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.
34 lines
1.4 KiB
34 lines
1.4 KiB
function closest (el: Element, predicate: (e: Element) => boolean) { |
|
do if (predicate(el)) return el; |
|
while (el = el && <Element>el.parentNode); |
|
} |
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
// Load CSS |
|
document.getElementsByTagName('head')[0].innerHTML += (<any>window)['app.css']; |
|
|
|
// 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); |
|
}); |
|
}); |
|
|
|
document.querySelectorAll('.modal-close, .modal-card-head .delete').forEach(elt => { |
|
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); |
|
}); |
|
}); |
|
});
|
|
|