From 5997f9d30ea550858a63d2e81c214bddfdf16326 Mon Sep 17 00:00:00 2001 From: Youen Toupin Date: Sun, 3 Oct 2021 21:43:35 +0200 Subject: [PATCH] added button to select climate zone on the map --- simulator/src/app.css | 39 +++++++++++++++++++ simulator/src/app.ts | 31 +++++++++++++++ .../climate-zones-map.svg.ts} | 31 +++++---------- simulator/src/purify.js | 2 +- simulator/www/simulator.html | 34 ++++++++++------ 5 files changed, 104 insertions(+), 33 deletions(-) rename simulator/{www/climate-zones-map.svg => src/climate-zones-map.svg.ts} (99%) diff --git a/simulator/src/app.css b/simulator/src/app.css index 8df67d8..d05d208 100644 --- a/simulator/src/app.css +++ b/simulator/src/app.css @@ -5,3 +5,42 @@ input[type=number] { .wide-label .field-label { flex-grow: 2.5; } + +.dropdown.is-fullwidth { + display: flex; +} + +.dropdown.is-fullwidth .dropdown-trigger, +.dropdown.is-fullwidth .dropdown-menu { + width: 100%; +} + +.dropdown-trigger.with-dropdown-icon::after { + border: 3px solid black; + border-radius: 2px; + border-right: 0; + border-top: 0; + content: " "; + display: block; + height: 0.625em; + margin-top: -0.4375em; + pointer-events: none; + position: absolute; + top: 50%; + right: 15px; + transform: rotate(-45deg); + transform-origin: center; + width: 0.625em; +} + +.climate-zone { + cursor: pointer; +} + +.climate-zone:hover { + opacity: 0.5 !important; +} + +svg text { + pointer-events: none; +} \ No newline at end of file diff --git a/simulator/src/app.ts b/simulator/src/app.ts index e69de29..1b1b0c9 100644 --- a/simulator/src/app.ts +++ b/simulator/src/app.ts @@ -0,0 +1,31 @@ +function closest (el: Element, predicate: (e: Element) => boolean) { + do if (predicate(el)) return el; + while (el = el && 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 = (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 = 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); + }); + }); +}); diff --git a/simulator/www/climate-zones-map.svg b/simulator/src/climate-zones-map.svg.ts similarity index 99% rename from simulator/www/climate-zones-map.svg rename to simulator/src/climate-zones-map.svg.ts index 18a3262..73a816e 100644 --- a/simulator/www/climate-zones-map.svg +++ b/simulator/src/climate-zones-map.svg.ts @@ -1,14 +1,4 @@ - - +(window)['climate-zones-map.svg'] = ` H3 - - + `; diff --git a/simulator/src/purify.js b/simulator/src/purify.js index bf52b45..c8f0e27 100644 --- a/simulator/src/purify.js +++ b/simulator/src/purify.js @@ -8,7 +8,7 @@ let css = ['*.css']; let files = { output: '../www/simulator.css', - whitelist: ['is-multiple', 'is-loading', 'is-narrow'], + whitelist: ['is-multiple', 'is-loading', 'is-narrow', 'is-active', 'climate-zone'], minify: true, info: true }; diff --git a/simulator/www/simulator.html b/simulator/www/simulator.html index dd2753a..e92c00e 100644 --- a/simulator/www/simulator.html +++ b/simulator/www/simulator.html @@ -4,11 +4,10 @@ -
-
+
@@ -51,18 +50,21 @@
- + + + + + + + +
+

+ Choix sur la carte... +

@@ -115,6 +117,16 @@
+ +