63 lines
1.6 KiB
JavaScript
63 lines
1.6 KiB
JavaScript
import "./feature-legend.js"
|
|
import "./coords.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-generic-name"></small>
|
|
<camp-coords class="feature-location" lat="0" lon="0"></camp-coords>
|
|
`
|
|
|
|
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()
|
|
|
|
let name = this.feature?.properties?.name ||
|
|
this.feature.mapSymbol.genericName ||
|
|
this.feature.id;
|
|
|
|
this.querySelector(".feature-name").textContent = name;
|
|
|
|
if(name != this.feature.mapSymbol.genericName){
|
|
this.querySelector(".feature-generic-name").textContent = this.feature.mapSymbol.genericName
|
|
} else {
|
|
this.querySelector(".feature-generic-name").replaceChildren()
|
|
}
|
|
|
|
|
|
let featurePoint = this.feature.asPoint()
|
|
|
|
this.querySelector(".feature-location").lon = featurePoint.geometry.coordinates[0]
|
|
this.querySelector(".feature-location").lat = featurePoint.geometry.coordinates[1]
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
customElements.define("camp-feature-short-header", FeatureShortHeaderElement)
|