54 lines
1.3 KiB
JavaScript
54 lines
1.3 KiB
JavaScript
import "./feature-legend.js"
|
|
|
|
const TEMPLATE = document.createElement("template")
|
|
TEMPLATE.innerHTML = `
|
|
<camp-feature-legend class="feature-legend"></camp-feature-legend>
|
|
<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
|
|
let legend = this.querySelector(".feature-legend")
|
|
if(legend)
|
|
legend.feature = value
|
|
}
|
|
|
|
connectedCallback(){
|
|
this.updateContent()
|
|
}
|
|
|
|
updateContent(){
|
|
if(!this.feature){
|
|
this.replaceChildren()
|
|
} else {
|
|
|
|
this.replaceChildren(TEMPLATE.content.cloneNode(true))
|
|
|
|
this.querySelector(".feature-legend").feature = this.feature
|
|
this.querySelector(".feature-legend").updateContent()
|
|
|
|
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)
|