Ajout d'un panneau vertical pour le resultat de la recerche
This commit is contained in:
parent
f7e5bb37bf
commit
7d45e2f717
GPG key ID:
C4B28FD2729941CE
8 changed files with 549 additions and 18 deletions
102
css/style.css
102
css/style.css
|
|
@ -5,12 +5,29 @@ body, html {
|
|||
|
||||
body {
|
||||
pointer-events: none;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
body > * {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
body > hr {
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
min-height: 50vh;
|
||||
flex-shrink: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* HEADER and NAV */
|
||||
|
||||
#main-header {
|
||||
|
|
@ -113,3 +130,88 @@ body > * {
|
|||
opacity: clamp(0, calc( 1 - ( var(--zoom-level) - 18 ) ), 1) ;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* SAERCH FORM */
|
||||
|
||||
#search-section {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100i;
|
||||
}
|
||||
|
||||
/* PANEL */
|
||||
|
||||
#result-panel {
|
||||
background: black;
|
||||
border-top: 3px white solid;
|
||||
|
||||
color: white;
|
||||
}
|
||||
|
||||
#result-panel.empty,
|
||||
#result-panel:empty{
|
||||
display:none;
|
||||
}
|
||||
|
||||
#result-panel > * {
|
||||
padding: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#result-panel::part(navigation-panel) {
|
||||
background: black;
|
||||
color: white;
|
||||
box-shadow: 0 0 10px black;
|
||||
border-top: solid 1px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
#result-panel::part(dot),
|
||||
#result-panel::part(dot-active) {
|
||||
border-radius: 0;
|
||||
width: 1ex;
|
||||
height: 1ex;
|
||||
margin-top: 0.5ex;
|
||||
}
|
||||
|
||||
#result-panel::part(dot-active) {
|
||||
transform-origin: 0% 100%;
|
||||
transform: scaleX(1) scaleY(1.5);
|
||||
}
|
||||
|
||||
camp-feature-short-header {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr min-content;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
camp-feature-short-header h2 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
camp-feature-short-header .feature-location {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0.6em;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
#search-result {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
#search-result > li:not(:first-child) {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
#search-result > li:not(:last-child) {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#search-result > li > a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
|
|
|||
19
icons/arrow-left.svg
Normal file
19
icons/arrow-left.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="20.302734"
|
||||
height="21.37561"
|
||||
viewBox="0 0 20.302734 21.37561"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xml:space="preserve"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><defs
|
||||
id="defs1" /><g
|
||||
id="layer2"
|
||||
transform="translate(-1524.3279,-1694.6793)"><path
|
||||
style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:1.84565;stroke-linecap:butt;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
|
||||
d="m 356.12486,1705.4702 h -19.62275 l 9.32634,-10.1671 -9.32634,10.1671 9.32634,9.9538"
|
||||
id="path23-6-2"
|
||||
transform="translate(1188.5058)" /></g></svg>
|
||||
|
After Width: | Height: | Size: 792 B |
19
icons/arrow-right.svg
Normal file
19
icons/arrow-right.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="20.302734"
|
||||
height="21.37561"
|
||||
viewBox="0 0 20.302734 21.37561"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xml:space="preserve"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><defs
|
||||
id="defs1" /><g
|
||||
id="layer2"
|
||||
transform="translate(-1562.407,-1694.6793)"><path
|
||||
style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:1.84565;stroke-linecap:butt;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
|
||||
d="m 373.90116,1705.4702 h 19.62274 l -9.32633,-10.1671 9.32633,10.1671 -9.32633,9.9538"
|
||||
id="path23-8-8"
|
||||
transform="translate(1188.5058)" /></g></svg>
|
||||
|
After Width: | Height: | Size: 791 B |
16
index.html
16
index.html
|
|
@ -7,6 +7,7 @@
|
|||
<link rel="stylesheet" href="./js/lib/leaflet/leaflet.css">
|
||||
<link rel="stylesheet" href="./css/style.css">
|
||||
<script type="module" src="./js/index.js"></script>
|
||||
<script type="module" src="./js/components/bidi-panel.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header id="main-header">
|
||||
|
|
@ -14,26 +15,17 @@
|
|||
</header>
|
||||
|
||||
<section id="map"></section>
|
||||
<style>
|
||||
#search-section {
|
||||
background: white;
|
||||
padding: 15px;
|
||||
max-width: 300px;
|
||||
margin-left: 15px;
|
||||
margin-top: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</style>
|
||||
<hr>
|
||||
|
||||
<section id="search-section">
|
||||
<form id="search-area">
|
||||
<label for="search-area-query">Rechercher une zone</label><br/>
|
||||
<input type="search" name="query" id="search-area-query" />
|
||||
<button>Rechercher</button>
|
||||
</form>
|
||||
<ul id="search-result"></ul>
|
||||
</section>
|
||||
|
||||
<camp-bidi-panel id="result-panel" ></camp-bidi-panel>
|
||||
</body>
|
||||
</html>
|
||||
264
js/components/bidi-panel.js
Normal file
264
js/components/bidi-panel.js
Normal file
|
|
@ -0,0 +1,264 @@
|
|||
const TEMPLATE = document.createElement("template");
|
||||
TEMPLATE.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
#navigation {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
background: inherit;
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
|
||||
padding: 0.5ex;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:host(.single-panel) #navigation {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#navigation .progress-container {
|
||||
flex: 1;
|
||||
flex-shrink: 100;
|
||||
}
|
||||
|
||||
#navigation button {
|
||||
flex-shrink: 0;
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
background: none;
|
||||
border: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#navigation button img {
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-container progress {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#progress-dots {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow-x: auto;
|
||||
gap: 0.5ex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#progress-dots .dot {
|
||||
width: 0.75ex;
|
||||
height: 0.75ex;
|
||||
border-radius: 100%;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
#progress-dots .dot.active {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
#content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: inherit;
|
||||
}
|
||||
|
||||
#content ::slotted(*) {
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
scroll-snap-align: start;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section id="content"><slot></slot></section>
|
||||
|
||||
<nav id="navigation" part="navigation-panel">
|
||||
<button id="nav-left-panel" title="Aller au panneau de gauche" part="nav-button-left">
|
||||
<img alt="Fleche vers la gauche" src="${new URL("../../icons/arrow-left.svg", import.meta.url)}"/>
|
||||
</button>
|
||||
<div class="progress-container">
|
||||
<progress id="panel-progress-bar" value="0"></progress>
|
||||
<div id="progress-dots" aria-hidden="true"></div>
|
||||
</div>
|
||||
<button id="nav-right-panel" title="Aller au panneau de droite" part="nav-button-right" >
|
||||
<img alt="Fleche vers la droite" src="${new URL("../../icons/arrow-right.svg", import.meta.url)}"/>
|
||||
</button>
|
||||
</nav>
|
||||
`
|
||||
|
||||
export class BidiPanelElement extends HTMLElement {
|
||||
|
||||
shadow
|
||||
|
||||
mutationObserver
|
||||
|
||||
#lastActive
|
||||
#currentIndex
|
||||
|
||||
get contentContainer(){
|
||||
return this.shadow.getElementById("content")
|
||||
}
|
||||
|
||||
get progressBar(){
|
||||
return this.shadow.getElementById("panel-progress-bar")
|
||||
}
|
||||
|
||||
get progressDotsContainer(){
|
||||
return this.shadow.getElementById("progress-dots")
|
||||
}
|
||||
|
||||
get activeChildrenIndex(){
|
||||
let thisGeometry = this.getBoundingClientRect()
|
||||
let progress = this.contentContainer.scrollLeft / (this.contentContainer.scrollWidth - thisGeometry.width)
|
||||
let focusedElementIndex = Math.floor(progress * this.children.length)
|
||||
if(Number.isFinite(focusedElementIndex)){
|
||||
return focusedElementIndex
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
set activeChildrenIndex(newIndex){
|
||||
this.setActiveChildrenIndex(newIndex, {behavior: "auto"})
|
||||
}
|
||||
|
||||
setActiveChildrenIndex(newIndex, options){
|
||||
let newPanel = this.children[newIndex]
|
||||
let newPanelRect = newPanel.getBoundingClientRect()
|
||||
let selfRect = this.getBoundingClientRect()
|
||||
this.contentContainer.scrollTo({
|
||||
left: this.contentContainer.scrollLeft + ( newPanelRect.left - selfRect.left ),
|
||||
behavior: options?.behavior || "auto"
|
||||
})
|
||||
this.#currentIndex = newIndex
|
||||
}
|
||||
|
||||
get activeChildren(){
|
||||
return this.children[this.activeChildrenIndex]
|
||||
}
|
||||
|
||||
connectedCallback(){
|
||||
if(!this.shadow){
|
||||
this.shadow = this.attachShadow({ mode: "open" })
|
||||
this.shadow.append(TEMPLATE.content.cloneNode(true))
|
||||
}
|
||||
this.contentContainer.addEventListener("scroll", this.handleContentScroll.bind(this))
|
||||
this.shadow.getElementById("nav-left-panel").addEventListener("click", () => this.previous());
|
||||
this.shadow.getElementById("nav-right-panel").addEventListener("click", () => this.next());
|
||||
|
||||
this.mutationObserver = (new MutationObserver(this.handleMutations.bind(this)))
|
||||
this.mutationObserver.observe(this, {childList:true})
|
||||
|
||||
this.updateProgress()
|
||||
}
|
||||
|
||||
handleMutations(mutation){
|
||||
let newIndex = this.#currentIndex
|
||||
this.updateProgress()
|
||||
if(Number.isFinite(newIndex)){
|
||||
this.setActiveChildrenIndex(newIndex, {behavior: "instant"})
|
||||
}
|
||||
}
|
||||
|
||||
handleContentScroll(e){
|
||||
this.updateProgress()
|
||||
this.#currentIndex = this.activeChildrenIndex
|
||||
if(this.#currentIndex != this.#lastActive){
|
||||
this.dispatchEvent(new ActivePanelChangeEvent("activePanelChange", this.#currentIndex))
|
||||
this.#lastActive = this.#currentIndex
|
||||
}
|
||||
}
|
||||
|
||||
updateProgress(){
|
||||
let focusedElementIndex = this.activeChildrenIndex;
|
||||
|
||||
let progressBar = this.progressBar;
|
||||
progressBar.value = focusedElementIndex;
|
||||
progressBar.min = 0;
|
||||
progressBar.max = this.children.length-1;
|
||||
|
||||
this.classList.toggle("single-panel", this.children.length == 1)
|
||||
this.classList.toggle("empty", this.children.length == 0)
|
||||
|
||||
let dotsContainer = this.progressDotsContainer;
|
||||
if(dotsContainer.children.length != parseInt(progressBar.max)+1){
|
||||
let dots = (new Array(this.children.length))
|
||||
.fill(0)
|
||||
.map(() => {
|
||||
let el = document.createElement("div")
|
||||
el.classList.add("dot")
|
||||
el.part = "dot"
|
||||
return el
|
||||
});
|
||||
dotsContainer.replaceChildren(...dots)
|
||||
}
|
||||
for(let inactiveDot of dotsContainer.querySelectorAll(".active")){
|
||||
inactiveDot.part = "dot"
|
||||
inactiveDot.classList.remove("active")
|
||||
}
|
||||
|
||||
let activeDot = dotsContainer.children[parseInt(progressBar.value)]
|
||||
if(activeDot){
|
||||
activeDot.part = "dot-active"
|
||||
activeDot.classList.add("active")
|
||||
}
|
||||
}
|
||||
|
||||
next(){
|
||||
let nextItem = this.activeChildrenIndex + 1;
|
||||
if(nextItem < this.children.length){
|
||||
this.activeChildrenIndex = nextItem
|
||||
}
|
||||
}
|
||||
|
||||
previous(){
|
||||
let nextItem = this.activeChildrenIndex - 1;
|
||||
if(nextItem >= 0){
|
||||
this.activeChildrenIndex = nextItem
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class ActivePanelChangeEvent extends Event {
|
||||
constructor(name, activePanelIndex){
|
||||
super(name)
|
||||
this.activePanelIndex = activePanelIndex
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("camp-bidi-panel", BidiPanelElement);
|
||||
43
js/components/feature-short-header.js
Normal file
43
js/components/feature-short-header.js
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
const TEMPLATE = document.createElement("template")
|
||||
TEMPLATE.innerHTML = `
|
||||
<h2 class="feature-name"></h2>
|
||||
<small class="feature-location"></small>
|
||||
`
|
||||
|
||||
export class FeatureShortHeaderElement extends HTMLElement {
|
||||
|
||||
#feature
|
||||
|
||||
get feature(){
|
||||
return this.#feature
|
||||
}
|
||||
|
||||
set feature(value){
|
||||
this.#feature = value
|
||||
}
|
||||
|
||||
connectedCallback(){
|
||||
this.updateContent()
|
||||
}
|
||||
|
||||
updateContent(){
|
||||
if(!this.feature){
|
||||
this.replaceChildren()
|
||||
} else {
|
||||
this.replaceChildren(TEMPLATE.content.cloneNode(true))
|
||||
this.querySelector(".feature-name").textContent =
|
||||
this.feature?.properties?.name ||
|
||||
this.feature.mapSymbol.genericName ||
|
||||
this.feature.id
|
||||
|
||||
let featurePoint = this.feature.asPoint()
|
||||
|
||||
this.querySelector(".feature-location").textContent =
|
||||
this.feature?.properties?.["location-description"] ||
|
||||
`${featurePoint.geometry.coordinates[1]}, ${featurePoint.geometry.coordinates[0]}`
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
customElements.define("camp-feature-short-header", FeatureShortHeaderElement)
|
||||
26
js/components/feature.js
Normal file
26
js/components/feature.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import "./feature-short-header.js"
|
||||
|
||||
const TEMPLATE = document.createElement("template")
|
||||
TEMPLATE.innerHTML = `
|
||||
<camp-feature-short-header class="feature-header" ></camp-feature-short-header>
|
||||
`
|
||||
|
||||
export class FeatureElement extends HTMLElement {
|
||||
|
||||
feature
|
||||
|
||||
connectedCallback(){
|
||||
this.updateContent()
|
||||
}
|
||||
|
||||
updateContent(){
|
||||
this.replaceChildren(TEMPLATE.content.cloneNode(true))
|
||||
|
||||
let header = this.querySelector("camp-feature-short-header")
|
||||
header.feature = this.feature
|
||||
header.updateContent()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
customElements.define("camp-feature", FeatureElement)
|
||||
70
js/index.js
70
js/index.js
|
|
@ -1,5 +1,7 @@
|
|||
import * as MAP from "./map.js"
|
||||
import { PlaceDatabase } from "./places.js";
|
||||
import {FeatureElement} from "./components/feature.js"
|
||||
import "./components/feature-short-header.js"
|
||||
|
||||
/** La carte */
|
||||
|
||||
|
|
@ -47,18 +49,82 @@ search_form.addEventListener("submit", e => {
|
|||
let a = document.createElement("a")
|
||||
el.append(a)
|
||||
a.href = "#"+encodeURIComponent(result_item.ref)
|
||||
a.textContent = result_item.feature.properties.name+" ("+result_item.ref+")"
|
||||
a.addEventListener("click", e => {
|
||||
e.preventDefault()
|
||||
openSearchResultItem(result_item.feature)
|
||||
})
|
||||
let header = document.createElement("camp-feature-short-header")
|
||||
header.feature = result_item.feature
|
||||
a.append(header)
|
||||
resultElements.push(el)
|
||||
}
|
||||
|
||||
if(!document.getElementById("search-result")){
|
||||
let el = document.createElement("ol")
|
||||
el.id = "search-result"
|
||||
document.getElementById("result-panel").replaceChildren(el)
|
||||
}
|
||||
|
||||
if(resultElements.length > 0){
|
||||
document.getElementById("search-result").replaceChildren(...resultElements)
|
||||
} else {
|
||||
document.getElementById("search-result").replaceChildren(document.createTextNode("Pas de resultat"))
|
||||
}
|
||||
|
||||
document.getElementById("search-result").children[0]?.scrollIntoView()
|
||||
} else {
|
||||
document.getElementById("search-result").replaceChildren([])
|
||||
document.getElementById("search-result")?.remove()
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
function openSearchResultItem(feature){
|
||||
let searchResultContainer = document.getElementById("search-result")
|
||||
if(searchResultContainer){
|
||||
let featureIndex = -1
|
||||
let featureFound = false
|
||||
let newChildren = []
|
||||
for(let el of searchResultContainer.children){
|
||||
let featureHeader = el.querySelector("camp-feature-short-header")
|
||||
if(!featureHeader)
|
||||
continue
|
||||
let root = document.createElement("camp-feature")
|
||||
root.feature = featureHeader.feature
|
||||
newChildren.push(root)
|
||||
if(!featureFound){
|
||||
featureIndex += 1
|
||||
if(feature == root.feature){
|
||||
featureFound = true
|
||||
}
|
||||
}
|
||||
}
|
||||
let panel = document.getElementById("result-panel")
|
||||
panel.replaceChildren(...newChildren)
|
||||
requestAnimationFrame(() => {
|
||||
if(featureFound){
|
||||
panel.setActiveChildrenIndex(featureIndex, {behavior: "instant"})
|
||||
} else {
|
||||
panel.activeChildrenIndex = 0
|
||||
}
|
||||
})
|
||||
let newUrl = new URL(window.location)
|
||||
newUrl.hash = feature.id
|
||||
window.history.replaceState(newUrl.toString(), "")
|
||||
}
|
||||
}
|
||||
|
||||
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)
|
||||
} else {
|
||||
MAP.unhighlight_all()
|
||||
}
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue