Skip to content

Instantly share code, notes, and snippets.

@tomhodgins

tomhodgins/id-overview.js

Created November 12, 2020 21:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tomhodgins/db4d3b8eea4598aa150ba490052f3b0c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tomhodgins/db4d3b8eea4598aa150ba490052f3b0c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. tomhodgins renamed this gist Nov 12, 2020. 1 changed file with 0 additions and 0 deletions.
    0 id-overview.html → id-overview.js
    View file
    File renamed without changes.
  2. tomhodgins created this gist Nov 12, 2020.
    39 changes: 39 additions & 0 deletions id-overview.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@
    function html(strings, ...expressions) {
    return document.createRange().createContextualFragment(
    strings.reduce((output, string, index) =>
    output + expressions[index - 1] + string
    )
    )
    }

    document.body.append(
    html`
    <style>
    [data-overview] {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, .8);
    padding: 1em;
    max-height: 100vh;
    overflow-y: auto;
    }
    [data-overview] a {
    color: black;
    }
    :target {
    background: rgba(255, 255, 0, .1);
    }
    </style>
    <nav data-overview>
    <ul>
    ${
    Array.from(
    document.querySelectorAll('[id]'),
    ({id}) => `<li><a href="#${id}">${id}</a>`
    ).join('')
    }
    </ul>
    </nav>
    `
    )