Repository navigation
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #59
This makes annotations load only when someone actually clicks one. A plain song page no longer makes any referent requests, it just renders the highlights from the lyrics HTML that is already parsed.
The first click on a highlight reloads the page with the song's annotations loaded and opens the one you clicked. After that, every other highlight on the page opens in place, no more reloads.
Highlights on a plain page link to
?id={song}&referent_id={id}#ref-{id}-{n}. That's the same format Genius redirects its own annotation links to, so links coming from genius.com keep working.When
referent_idis in the URL, the server pulls the song's referents fromreferents?song_id=…&per_page=50. It keeps paging until a page comes back with fewer than 50 (thenext_pagefield is always null, so that's the only way to tell), capped at 5 pages. That endpoint leaves out verified annotations, so if the clicked one isn't in the list it's fetched separately viareferents/{id}. If any of that fails it just gets logged and the lyrics render without it.Each loaded annotation is rendered right after its highlight with
id="note-{id}", and the highlights switch to plain#note-…links. The popup is shown with.annotation:target.A few things that might look strange in the diff:
#ref-…and#note-…). The popup isposition: fixed, and browsers don't scroll to fixed elements. So the first click, which reloads the page, points at the lyric line instead, and the page lands where you clicked. Clicks after that don't reload, so they point straight at the popup.note-{id}-2,-3, …) so that closing one brings you back to the chorus you clicked, not the first one.<div>now, not<p>. Annotation text has paragraphs in it, and you can't nest those inside a<p>.scrollbar-gutter: stableso the page doesn't jump sideways when the scrollbar hides behind an open popup.