vhelio
/
vehicle-simulator
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

added button to select climate zone on the map

master
Youen Toupin 3 years ago
parent
bed631a3d6
commit
5997f9d30e
5 changed files with 104 additions and 33 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 39
      simulator/src/app.css
  2. 31
      simulator/src/app.ts
  3. 31
      simulator/src/climate-zones-map.svg.ts
  4. 2
      simulator/src/purify.js
  5. 34
      simulator/www/simulator.html

39
simulator/src/app.css
Unescape View File

@ -5,3 +5,42 @@ input[type=number] {
.wide-label .field-label { .wide-label .field-label {
flex-grow: 2.5; 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
Unescape 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
Unescape View File

@ -8,7 +8,7 @@ let css = ['*.css'];
let files = { let files = {
output: '../www/simulator.css', output: '../www/simulator.css',
whitelist: ['is-multiple', 'is-loading', 'is-narrow'], whitelist: ['is-multiple', 'is-loading', 'is-narrow', 'is-active', 'climate-zone'],
minify: true, minify: true,
info: true info: true
}; };

34
simulator/www/simulator.html
Unescape View File

@ -4,11 +4,10 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="simulator.css"/> <link rel="stylesheet" href="simulator.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head> </head>
<body> <body>
<section class="section"> <section class="section">
<div class="container"> <div class="container">
<div class="simulation-parameters"> <div class="simulation-parameters">
<div class="wide-label"> <div class="wide-label">
<div class="field is-horizontal"> <div class="field is-horizontal">
@ -51,18 +50,21 @@
<div class="field has-addons"> <div class="field has-addons">
<div class="control is-expanded"> <div class="control is-expanded">
<div class="select is-fullwidth"> <div class="select is-fullwidth">
<select> <select id="zone-selector">
<option>h1a</option> <option>H1a</option>
<option>h1b</option> <option>H1b</option>
<option>h1c</option> <option>H1c</option>
<option>h2a</option> <option>H2a</option>
<option>h2b</option> <option>H2b</option>
<option>h2c</option> <option>H2c</option>
<option>h2d</option> <option>H2d</option>
<option>h3</option> <option>H3</option>
</select> </select>
</div> </div>
</div> </div>
<p class="control">
<a class="button" data-activate-modal="zones-map-modal">Choix sur la carte...</a>
</p>
</div> </div>
</div> </div>
</div> </div>
@ -115,6 +117,16 @@
</div> </div>
</section> </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> <script type="text/javascript" src="simulator.js"></script>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save