You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 lines
1.4 KiB
35 lines
1.4 KiB
3 years ago
|
function closest (el: Element, predicate: (e: Element) => boolean) {
|
||
|
do if (predicate(el)) return el;
|
||
|
while (el = el && <Element>el.parentNode);
|
||
|
}
|
||
|
|
||
|
document.addEventListener('DOMContentLoaded', function() {
|
||
3 years ago
|
// Load CSS
|
||
|
document.getElementsByTagName('head')[0].innerHTML += (<any>window)['app.css'];
|
||
|
|
||
3 years ago
|
// In order to be able to style SVG elements with CSS, and register events with javascript, we must use inline SVG (we can't use an img tag)
|
||
|
// For this purpose, the SVG file contents are embedded in a javascript file
|
||
|
document.getElementById('zones-map').innerHTML = (<any>window)['climate-zones-map.svg'];
|
||
|
|
||
|
document.querySelectorAll("[data-activate-modal]").forEach(elt => {
|
||
|
elt.addEventListener('click', e => {
|
||
|
document.getElementById(elt.getAttribute('data-activate-modal')).classList.toggle('is-active', true);
|
||
|
});
|
||
|
});
|
||
|
|
||
3 years ago
|
document.querySelectorAll('.modal-close, .modal-card-head .delete').forEach(elt => {
|
||
3 years ago
|
elt.addEventListener('click', e => {
|
||
|
closest(elt, e => e.classList.contains('modal')).classList.toggle('is-active', false);
|
||
|
});
|
||
|
});
|
||
|
|
||
|
let zoneSelector = <HTMLSelectElement>document.getElementById('zone-selector');
|
||
|
document.querySelectorAll('.climate-zone').forEach(elt => {
|
||
|
elt.addEventListener('click', e => {
|
||
|
let zoneName = elt.getAttribute('id');
|
||
|
zoneSelector.value = zoneName;
|
||
|
closest(elt, e => e.classList.contains('modal')).classList.toggle('is-active', false);
|
||
|
});
|
||
|
});
|
||
|
});
|