Focus du resultat dans la liste et dans l'URL
This commit is contained in:
parent
7d45e2f717
commit
af337ea0bf
2 changed files with 26 additions and 12 deletions
|
|
@ -147,7 +147,11 @@ export class BidiPanelElement extends HTMLElement {
|
||||||
let progress = this.contentContainer.scrollLeft / (this.contentContainer.scrollWidth - thisGeometry.width)
|
let progress = this.contentContainer.scrollLeft / (this.contentContainer.scrollWidth - thisGeometry.width)
|
||||||
let focusedElementIndex = Math.floor(progress * this.children.length)
|
let focusedElementIndex = Math.floor(progress * this.children.length)
|
||||||
if(Number.isFinite(focusedElementIndex)){
|
if(Number.isFinite(focusedElementIndex)){
|
||||||
return focusedElementIndex
|
if(focusedElementIndex == this.children.length){
|
||||||
|
return this.children.length - 1
|
||||||
|
} else {
|
||||||
|
return focusedElementIndex
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
@ -193,14 +197,20 @@ export class BidiPanelElement extends HTMLElement {
|
||||||
if(Number.isFinite(newIndex)){
|
if(Number.isFinite(newIndex)){
|
||||||
this.setActiveChildrenIndex(newIndex, {behavior: "instant"})
|
this.setActiveChildrenIndex(newIndex, {behavior: "instant"})
|
||||||
}
|
}
|
||||||
|
this.requestDispatchChangeEvent()
|
||||||
}
|
}
|
||||||
|
|
||||||
handleContentScroll(e){
|
handleContentScroll(e){
|
||||||
this.updateProgress()
|
this.updateProgress()
|
||||||
this.#currentIndex = this.activeChildrenIndex
|
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.dispatchEvent(new ActivePanelChangeEvent("activePanelChange", this.#currentIndex))
|
||||||
this.#lastActive = this.#currentIndex
|
this.#lastActive = currentPanel
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
22
js/index.js
22
js/index.js
|
|
@ -108,22 +108,26 @@ function openSearchResultItem(feature){
|
||||||
panel.activeChildrenIndex = 0
|
panel.activeChildrenIndex = 0
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
let newUrl = new URL(window.location)
|
updateActiveFeature(feature)
|
||||||
newUrl.hash = feature.id
|
|
||||||
window.history.replaceState(newUrl.toString(), "")
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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 => {
|
document.getElementById("result-panel").addEventListener("activePanelChange", e => {
|
||||||
let activeElement = e.target.children[e.activePanelIndex]
|
let activeElement = e.target.children[e.activePanelIndex]
|
||||||
if(activeElement instanceof FeatureElement){
|
if(activeElement instanceof FeatureElement){
|
||||||
let feature = activeElement.feature
|
let feature = activeElement.feature
|
||||||
if(feature){
|
updateActiveFeature(feature)
|
||||||
MAP.highlight(feature.id)
|
|
||||||
} else {
|
|
||||||
MAP.unhighlight_all()
|
|
||||||
}
|
|
||||||
console.log("active panel changed: "+e.activePanelIndex, feature)
|
|
||||||
} else {
|
} else {
|
||||||
MAP.unhighlight_all()
|
MAP.unhighlight_all()
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue