diff --git a/js/components/bidi-panel.js b/js/components/bidi-panel.js index 6a85da0..73e09e3 100644 --- a/js/components/bidi-panel.js +++ b/js/components/bidi-panel.js @@ -147,7 +147,11 @@ export class BidiPanelElement extends HTMLElement { let progress = this.contentContainer.scrollLeft / (this.contentContainer.scrollWidth - thisGeometry.width) let focusedElementIndex = Math.floor(progress * this.children.length) if(Number.isFinite(focusedElementIndex)){ - return focusedElementIndex + if(focusedElementIndex == this.children.length){ + return this.children.length - 1 + } else { + return focusedElementIndex + } } else { return null } @@ -193,14 +197,20 @@ export class BidiPanelElement extends HTMLElement { if(Number.isFinite(newIndex)){ this.setActiveChildrenIndex(newIndex, {behavior: "instant"}) } + this.requestDispatchChangeEvent() } handleContentScroll(e){ this.updateProgress() this.#currentIndex = this.activeChildrenIndex - if(this.#currentIndex != this.#lastActive){ + this.requestDispatchChangeEvent() + } + + requestDispatchChangeEvent(){ + let currentPanel = this.activeChildren + if(currentPanel != this.#lastActive){ this.dispatchEvent(new ActivePanelChangeEvent("activePanelChange", this.#currentIndex)) - this.#lastActive = this.#currentIndex + this.#lastActive = currentPanel } } diff --git a/js/index.js b/js/index.js index 28141bd..91fb24a 100644 --- a/js/index.js +++ b/js/index.js @@ -108,22 +108,26 @@ function openSearchResultItem(feature){ panel.activeChildrenIndex = 0 } }) - let newUrl = new URL(window.location) - newUrl.hash = feature.id - window.history.replaceState(newUrl.toString(), "") + updateActiveFeature(feature) } } +function updateActiveFeature(feature_or_featureid){ + let newUrl = new URL(window.location) + if(feature_or_featureid){ + newUrl.hash = encodeURIComponent(feature_or_featureid.id || feature_or_featureid) + } else { + delete newUrl.hash; + } + window.history.replaceState(null, "", newUrl.toString()) + window.dispatchEvent(new Event("hashchange")) +} + document.getElementById("result-panel").addEventListener("activePanelChange", e => { let activeElement = e.target.children[e.activePanelIndex] if(activeElement instanceof FeatureElement){ let feature = activeElement.feature - if(feature){ - MAP.highlight(feature.id) - } else { - MAP.unhighlight_all() - } - console.log("active panel changed: "+e.activePanelIndex, feature) + updateActiveFeature(feature) } else { MAP.unhighlight_all() }