5 changed files with 104 additions and 33 deletions
@ -0,0 +1,31 @@
|
||||
function closest (el: Element, predicate: (e: Element) => boolean) { |
||||
do if (predicate(el)) return el; |
||||
while (el = el && <Element>el.parentNode); |
||||
} |
||||
|
||||
document.addEventListener('DOMContentLoaded', function() { |
||||
// 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').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); |
||||
}); |
||||
}); |
||||
}); |
||||
|
Before Width: | Height: | Size: 116 KiB After Width: | Height: | Size: 116 KiB |
Loading…
Reference in new issue