[templates] Expand accordion before jumping to homepage media anchor

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-<type>=, 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-<type>= panel first (via =bootstrap.Collapse.getOrCreateInstance=),
+    then scroll to the target once the collapse finishes animating.

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-<type>, 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