diff --git a/PROJECT.org b/PROJECT.org index 66a2c9e..952dbd7 100644 --- a/PROJECT.org +++ b/PROJECT.org @@ -18,7 +18,7 @@ tasks, Todoist tasks, web pages I've read and trails I've hiked has turned out to be sometimes cathartic and sometimes functional as I try to remember when I did a thing. -* Backlog [0/30] :vrobbler:project:personal: +* Backlog [0/31] :vrobbler:project:personal: ** TODO [#C] Configure IMAP folder/start in user profile :imap:settings: *** Description @@ -591,3 +591,19 @@ The Edit log form should have from top to bottom: - Expansion ids (which should a multi-select widget of expansions for this game) - Location (which should be a drop down of BoardGameLocations for this user) +** TODO [#B] Fix bug where link on homepage only jumps to media type if already uncollapsed :bug:ui:templates: +:PROPERTIES: +:ID: 2719639e-d9b4-8523-6974-30846882ecaa +:END: + +*** Implementation + +The summary strip links to =#home-=, which lives inside a collapsed +Bootstrap accordion panel on the "Details" section. When the panel is +collapsed, the browser cannot scroll to the hidden target, so the jump only +worked if the section was already expanded. + +- File: ~vrobbler/templates/scrobbles/scrobble_list.html~ (extra_js block) +- On load, if the URL hash starts with =#home-=, expand the matching + =#collapse-= panel first (via =bootstrap.Collapse.getOrCreateInstance=), + then scroll to the target once the collapse finishes animating. diff --git a/vrobbler/templates/scrobbles/scrobble_list.html b/vrobbler/templates/scrobbles/scrobble_list.html index dfeaf96..8254eb0 100644 --- a/vrobbler/templates/scrobbles/scrobble_list.html +++ b/vrobbler/templates/scrobbles/scrobble_list.html @@ -243,6 +243,31 @@ feather.replace({ 'aria-hidden': 'true' }) + // Expand the accordion section matching the anchor before jumping to it. + // Anchor links in the summary strip point to #home-, which lives + // inside a collapsed Bootstrap collapse panel. If the panel is hidden the + // browser cannot scroll to the target, so open it first. + (function () { + var hash = window.location.hash + if (!hash || hash.indexOf('#home-') !== 0) { + return + } + var slug = hash.slice('#home-'.length) + var collapse = document.getElementById('collapse-' + slug) + if (collapse && !collapse.classList.contains('show')) { + var instance = bootstrap.Collapse.getOrCreateInstance(collapse, { + toggle: false + }) + instance.show() + collapse.addEventListener('shown.bs.collapse', function () { + var target = document.getElementById(hash.slice(1)) + if (target && target.scrollIntoView) { + target.scrollIntoView() + } + }) + } + })() + // Graphs var ctx = document.getElementById('myChart') // eslint-disable-next-line no-unused-vars