Commit b7930eb9 authored by antoine-boiteau's avatar antoine-boiteau
Browse files

addition of a toggle button to hide/show the map on every courses that can be...

addition of a toggle button to hide/show the map on every courses that can be displayed (includes previews)
parent dd63ff7e
......@@ -175,4 +175,11 @@ function showPreview(data, divXml, divMap, divLeaflet, map, overlay, img) {
previewXml(data, divXml);
previewMap(data, divMap, divLeaflet, map, overlay, img);
addControlPointOnMap(data, map);
}
function switchMapDisplay(overlay, overlayOpacity){
let hideButton = document.getElementById("hide-map");
let showButton = document.getElementById("show-map");
overlayOpacity === 100 ? (overlayOpacity = 0, hideButton.style.display = "block", showButton.style.display = "none" ) : (overlayOpacity = 100, hideButton.style.display = "none", showButton.style.display = "block" ) ;
overlay.setOpacity(overlayOpacity);
}
\ No newline at end of file
......@@ -36,7 +36,6 @@
<script>
let divLeaflet, map, overlay;
let overlayOpacity = 100;
let imageURL;
function showMap() {
......@@ -50,13 +49,6 @@
xhr.send()
}
function switchMapDisplay(){
let hideButton = document.getElementById("hide-map");
let showButton = document.getElementById("show-map");
overlayOpacity === 100 ? (overlayOpacity = 0, hideButton.style.display = "block", showButton.style.display = "none" ) : (overlayOpacity = 100, hideButton.style.display = "none", showButton.style.display = "block" ) ;
overlay.setOpacity(overlayOpacity);
}
function printMap(){ //see library printJS for further print options.
let printableMap = window.open(window.location.origin + "/" + imageURL);
printableMap.print();
......@@ -85,8 +77,8 @@
<!-- Tab content -->
<div id="map-tab" class="tab-content">
<button class="btn btn-primary" id="show-map" onclick="switchMapDisplay()" style="position: absolute; z-index: 9999; top: 60px; right: 35px">{% trans %} course.description.mask.map {% endtrans %}</button>
<button class="btn btn-primary" id="hide-map" onclick="switchMapDisplay()" style="display:none; position: absolute; z-index: 9999; top: 60px; right: 35px">{% trans %} course.description.show.map {% endtrans %}</button>
<button class="btn btn-primary" id="show-map" onclick="switchMapDisplay(overlay, 100)" style="position: absolute; z-index: 9999; top: 60px; right: 35px">{% trans %} course.description.mask.map {% endtrans %}</button>
<button class="btn btn-primary" id="hide-map" onclick="switchMapDisplay(overlay, 0)" style="display:none; position: absolute; z-index: 9999; top: 60px; right: 35px">{% trans %} course.description.show.map {% endtrans %}</button>
<!-- button class="btn btn-primary" onclick="printMap()" style="position: absolute; z-index: 9999; top: 105px; right: 35px">{% trans %} course.description.print {% endtrans %}</button -->
<div id="map-div" style="min-width: 300px">
......
......@@ -191,6 +191,8 @@
<!-- Tab content -->
<div id="map-tab" class="tab-content">
<button class="btn btn-primary" id="show-map" onclick="switchMapDisplay(overlay, 100)" style="position: absolute; z-index: 9999; top: 60px; right: 35px">{% trans %} course.description.mask.map {% endtrans %}</button>
<button class="btn btn-primary" id="hide-map" onclick="switchMapDisplay(overlay, 0)" style="display:none; position: absolute; z-index: 9999; top: 60px; right: 35px">{% trans %} course.description.show.map {% endtrans %}</button>
<div id="map-div" style="min-width: 300px"></div>
<p id="map-not-found" class="alert alert-danger"
style="display : none">{% trans %}course.error.map.not.found{% endtrans %}</p>
......
......@@ -112,6 +112,7 @@
btnPreview.onclick = function (event) {
event.preventDefault();
postData(true);
document.getElementById("preview-container").style.opacity = 100;
};
});
</script>
......@@ -189,13 +190,15 @@
</div>
</div>
<div class="w-100" style="padding-top: 50pt;">
<div class="w-100" id="preview-container" style="opacity:0; padding-top: 50pt;">
<div class="tab">
<button class="tab-links" onclick="openTab('tab1', 'map-tab')" id="tab1">{% trans %}course.add.map{% endtrans %}</button>
<button class="tab-links" onclick="openTab('tab2', 'xml-tab')" id="tab2">{% trans %}course.add.control.point{% endtrans %}</button>
</div>
<div id="map-tab" class="tab-content">
<div id="map-tab" class="tab-content" style="position: relative">
<button class="btn btn-primary" id="show-map" onclick="switchMapDisplay(overlay, 100)" style="position: absolute; z-index: 9999; top: 10px; right: 15px">{% trans %} course.description.mask.map {% endtrans %}</button>
<button class="btn btn-primary" id="hide-map" onclick="switchMapDisplay(overlay, 0)" style="display:none; position: absolute; z-index: 9999; top: 10px; right: 15px">{% trans %} course.description.show.map {% endtrans %}</button>
<div id="map_preview"></div>
</div>
<div id="xml-tab" class="tab-content">
......
......@@ -15,10 +15,12 @@
<script src="{{ asset('/public/leaflet/ImageOverlay.rotated.js') }}"></script>
<script src="{{ asset('/public/leaflet/easy-button.js') }}"></script>
<script>
let overlay;
window.addEventListener("load", function (event) {
let divLeaflet = document.createElement("div");
let map = generateMap(divLeaflet);
let overlay = L.imageOverlay.rotated("/none", L.latLng([-5, -5]), L.latLng([5, 5]), L.latLng([-5, 5]));
overlay = L.imageOverlay.rotated("/none", L.latLng([-5, -5]), L.latLng([5, 5]), L.latLng([-5, 5]));
overlay.addTo(map);
let xhr = new XMLHttpRequest();
xhr.open("GET", "{{ course }}");
......@@ -41,6 +43,8 @@
</div>
<div id="map-tab" class="tab-content">
<button class="btn btn-primary" id="show-map" onclick="switchMapDisplay(overlay, 100)" style="position: absolute; z-index: 9999; top: 60px; right: 35px">{% trans %} course.description.mask.map {% endtrans %}</button>
<button class="btn btn-primary" id="hide-map" onclick="switchMapDisplay(overlay, 0)" style="display:none; position: absolute; z-index: 9999; top: 60px; right: 35px">{% trans %} course.description.show.map {% endtrans %}</button>
<div id="map-div"></div>
</div>
<div id="xml-tab" class="tab-content">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment