https://edruva.lv/wp-content/themes/edruva/assets/js/map.js?ver=1788643683

1/**
2 * Sākumlapas interaktīvā karte.
3 *
4 * Karte ir inline SVG: katrs laukums ir <path data-t="slug"> (pilsētām blakus arī
5 * <circle data-t="slug">), katrs uzraksts — <text data-for="slug">. Klikšķis, taustiņš
6 * vai izvēle meklētājā atzīmē teritoriju un pārzīmē kartīti blakus. Dati par visām
7 * teritorijām nāk gatavi no PHP (panelis, atribūts data-map), tāpēc izvēle nekādus
8 * pieprasījumus uz serveri nesūta.
9 *
10 * Fails NAV webpack paketē — to pieslēdz rydelcode/map/functions.php ar filemtime
11 * versiju, tāpēc karti var labot bez tēmas pārbūves.
12 */
13(function () {
14    var panel = document.getElementById('ed-mp-panel');
15    var map = document.getElementById('ed-mp');
16    if (!panel || !map) {
17        return;
18    }
19
20    var DATA;
21    try {
22        DATA = JSON.parse(panel.getAttribute('data-map') || '{}');
23    } catch (e) {
24        return;
25    }
26
27    var elName = document.getElementById('ed-mp-name');
28    var elImg = document.getElementById('ed-mp-img');
29    var elStats = document.getElementById('ed-mp-stats');
30    var elLink = document.getElementById('ed-mp-link');
31    var input = document.getElementById('ed-mp-search');
32    var arrow = document.getElementById('ed-mp-arrow');
33    var list = document.getElementById('ed-mp-list');
34    var items = list ? Array.prototype.slice.call(list.querySelectorAll('li')) : [];
35    var current = null;
36
37    function shapes(slug) {
38        return Array.prototype.slice.call(map.querySelectorAll('[data-t="' + slug + '"]'));
39    }
40
41    function nr(n) {
42        // Tūkstošus atdala ar atstarpi, kā pārējā portālā: 27709 -> 27 709.
43        return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, '\u00a0');
44    }
45
46    function row(label, value, url) {
47        if (!value) {
48            return '';
49        }
50        var text = '<span>' + label + '</span><b>' + nr(value) + '</b>';
51        return url
52            ? '<a class="map-card-row" href="' + url + '">

52' + text + '</a>'
53            : '<div class="map-card-row">' + text + '</div>';
54    }
55
56    function select(slug, scroll) {
57        var d = DATA[slug];
58        if (!d) {
59            return;
60        }
61        current = slug;
62
63        map.querySelectorAll('.is-active').forEach(function (el) {
64            el.classList.remove('is-active');
65        });
66        shapes(slug).forEach(function (el) {
67            el.classList.add('is-active');
68        });
69        var label = map.querySelector('[data-for="' + slug + '"]');
70        if (label) {
71            label.classList.add('is-active');
72        }
73
74        elName.textContent = d.name;
75
76        var c = d.counts || {};
77        if (c.img) {
78            elImg.src = c.img;
79            elImg.alt = d.name;
80            elImg.style.objectPosition = c.img_focal || '';
81            elImg.hidden = false;
82        } else {
83            elImg.hidden = true;
84            elImg.removeAttribute('src');
85        }
86
87        var urls = d.urls || {};
88        elStats.innerHTML = c.raksti
89            ? row('Raksti', c.raksti, urls.raksti) + row('Å ogad', c.sogad, '')
90            : '<div class="map-card-row map-card-empty"><span>Par šo vietu rakstu vēl nav</span></div>';
91
92        elLink.href = d.url;
93        elLink.textContent = 'Skatīt visu par ' + d.acc;
94
95        // Uzmanību pievērš tikai tad, kad vietu izvēlējies lasītājs. Pirmajā
96        // ielādē kartīte vienkārši ir — ievadanimācijas lapā nav.
97        if (scroll) {
98            panel.classList.remove('is-flash');
99            void panel.offsetWidth; // restartē uzmanības animāciju
100            panel.classList.add('is-flash');
101        }
102
103        if (scroll && window.matchMedia('(max-width: 991px)').matches) {
104            panel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
105        }
106    }
107
108    // --- karte -----------------------------------------------------------------
109    map.addEventListener('click', function (e) {
110        var el = e.target.closest('[data-t]');
111        if (el) {
112            select(el.getAttribute('data-t'), true);
113        }
114    });
115    map.addEventListener('keydown', function (e) {
116        if (e.key !== 'Enter' && e.key !== ' ') {
117            return;
118        }
119        var el = e.target.closest('[data-t]');
120        if (el) {
121            e.preventDefault();
122            select(el.getAttribute('data-t'), true);
123        }
124    });
125
126    // --- meklētājs -------------------------------------------------------------
127    function openList(filter) {
128        if (!list) {
129            return;
130        }
131        var shown = 0;
132        items.forEach(function (li) {
133            var hay = (li.getAttribute('data-name') + '|' + (li.getAttribute('data-aliases') || '')).toLowerCase();
134            var ok = !filter || hay.indexOf(filter) !== -1;
135            li.hidden = !ok;
136            if (ok) {
137                shown++;
138            }
139        });
140        list.style.display = shown ? 'block' : 'none';
141    }
142
143    function closeList() {
144        if (list) {
145            list.style.display = 'none';
146        }
147    }
148
149    if (input) {
150        input.addEventListener('input', function () {
151            openList(input.value.trim().toLowerCase());
152        });
153        input.addEventListener('focus', function () {
154            openList(input.value.trim().toLowerCase());
155        });
156        input.addEventListener('keydown', function (e) {
157            if (e.key !== 'Enter') {
158                return;
159            }
160            e.preventDefault();
161            var first = items.filter(function (li) { return !li.hidden; })[0];
162            if (first) {
163                input.value = '';
164                closeList();
165                select(first.getAttribute('data-slug'), true);
166            }
167        });
168    }
169
170    if (arrow) {
171        // Bultiņa vienmēr atver PILNO sarakstu, arī tad, ja lodziņā jau kaut kas ierakstīts.
172        arrow.addEventListener('click', function () {
173            if (list && list.style.display === 'block' && !input.value) {
174                closeList();
175                return;
176            }
177            input.value = '';
178            openList('');
179            input.focus();
180        });
181    }
182

183    items.forEach(function (li) {
184        li.addEventListener('click', function () {
185            input.value = '';
186            closeList();
187            select(li.getAttribute('data-slug'), true);
188        });
189    });
190
191    document.addEventListener('click', function (e) {
192        if (!e.target.closest('#ed-mp-combo')) {
193            closeList();
194        }
195    });
196
197    // Sākuma stāvoklis — Cēsis (portāla mājas pilsēta).
198    select(DATA.cesis ? 'cesis' : Object.keys(DATA)[0], false);
199}());