youen/vehicle-simulator
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

added button to select climate zone on the map

Browse Source
This commit is contained in:
Youen Toupin 2021-10-03 21:43:35 +02:00
parent bed631a3d6
commit 5997f9d30e
5 changed files with 104 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
simulator/src/app.css
View File

@ -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;
}

31
simulator/src/app.ts
View File

@ -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);
});
});
});

31
simulator/www/climate-zones-map.svg → simulator/src/climate-zones-map.svg.ts
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 116 KiB

After

Width:  |  Height:  |  Size: 116 KiB

2
simulator/src/purify.js
View File

@ -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
};

34
simulator/www/simulator.html
View File

@ -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>