added button to select climate zone on the map

3 years ago · 5997f9d30e
5 changed files with 104 additions and 33 deletions
--- 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;
+}
--- 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 && <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);
+		});
+	});
+});
--- a/simulator/src/climate-zones-map.svg.ts
+++ b/simulator/src/climate-zones-map.svg.ts
--- 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
 };
--- a/simulator/www/simulator.html
+++ b/simulator/www/simulator.html
@ -4,11 +4,10 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<link rel="stylesheet" href="simulator.css"/>
-		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
 	</head>
 	<body>
 		<section class="section">
-    		<div class="container">
+		<div class="container">
 				<div class="simulation-parameters">
 					<div class="wide-label">
 						<div class="field is-horizontal">
@ -51,18 +50,21 @@
 								<div class="field has-addons">
 									<div class="control is-expanded">
 										<div class="select is-fullwidth">
-											<select>
-												<option>h1a</option>
-												<option>h1b</option>
-												<option>h1c</option>
-												<option>h2a</option>
-												<option>h2b</option>
-												<option>h2c</option>
-												<option>h2d</option>
-												<option>h3</option>
+											<select id="zone-selector">
+												<option>H1a</option>
+												<option>H1b</option>
+												<option>H1c</option>
+												<option>H2a</option>
+												<option>H2b</option>
+												<option>H2c</option>
+												<option>H2d</option>
+												<option>H3</option>
 											</select>
 										</div>
 									</div>
+									<p class="control">
+										<a class="button" data-activate-modal="zones-map-modal">Choix sur la carte...</a>
+									</p>
 								</div>
 							</div>
 						</div>
@ -115,6 +117,16 @@
 			</div>
 		</section>
 		
+		<div id="zones-map-modal" class="modal">
+			<div class="modal-background"></div>
+			<div class="modal-content">
+				<p class="image">
+					<svg id="zones-map" width="587" height="550" version="1.0"></svg>
+				</p>
+			</div>
+			<button class="modal-close is-large" aria-label="close"></button>
+		</div>
+		
 		<script type="text/javascript" src="simulator.js"></script>
 	</body>
 </html>