https://ecozonas.org/static/dashboard/components/map-popup/component.js?v=1.3.0

1class MapPopup extends HTMLElement {
2  static observedAttributes = ['title', 'dimension', 'score', 'imagesource'];
3
4  constructor() {
5    super();
6
7    const templateContent = document.getElementById('map-popup-template').content;
8    const shadowRoot = this.attachShadow({ mode: 'open' });
9
10    shadowRoot.appendChild(templateContent.cloneNode(true));
11
12    this.i18n = JSON.parse(this.shadowRoot.getElementById("i18n").textContent);
13  }
14
15  attributeChangedCallback(name, old, newVal) {
16    if (name === 'title') {
17      this.shadowRoot.getElementById('title').innerText = newVal;
18    } else if (name === 'dimension') {
19      const dimensionEl = this.shadowRoot.getElementById('dimension');
20
21      dimensionEl.innerText = LABELS[newVal];
22      dimensionEl.classList.remove(...dimensionEl.classList);
23      dimensionEl.classList.add('dimension-label');
24      dimensionEl.classList.add(newVal);
25    } else if (name === 'score') {
26      const el = this.shadowRoot.getElementById('score-or-potential');
27
28      el.classList.remove(...el.classList);
29      el.classList.add('score-or-potential-label');
30
31      if (newVal == 'potential') {
32        el.innerText = this.i18n.Potential;
33        el.classList.add('potential');
34      } else if (newVal === 'other') {
35        el.innerText = this.i18n.NoScore;
36        el.classList.add('no-score');
37      } else {
38        el.innerText = SCORES[newVal];
39        el.classList.add(newVal.toLowerCase());
40      }
41    } else if (name === 'imagesource') {
42      const el = this.shadowRoot.getElementById('image');
43
44      if (newVal) {
45        el.src = newVal;
46        el.style.display = 'block';
47      } else {
48        el.style.display = 'none';
49      }
50    }
51  }
52}
53
54customElements.define('map-popup', MapPopup);