From cdd717133c6f7e629a066272d11ebcb2fd179f66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Fri, 20 Jan 2023 15:54:07 +0100
Subject: [PATCH] montpellier: add roadworks css/js (#73652)

---
 static/montpellier-ville/_chantiers.scss |  9 +++++----
 static/montpellier/_custom.scss          | 19 +++++++++++++++++++
 static/montpellier/_vars.scss            |  2 ++
 static/montpellier/extra.js              | 22 ++++++++++++++++++++++
 static/montpellier/style.scss            |  1 +
 5 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/static/montpellier-ville/_chantiers.scss b/static/montpellier-ville/_chantiers.scss
index 22dd822d..03243fc4 100644
--- a/static/montpellier-ville/_chantiers.scss
+++ b/static/montpellier-ville/_chantiers.scss
@@ -1,5 +1,6 @@
-$cell-map-height: calc(100vh - 265px);
-$cell-map-mobile-height: calc(100vh - 108px);
+$cell-map-height: calc(100vh - 265px) !default;
+$cell-map-mobile-height: calc(100vh - 108px) !default;
+$roadwork-width: 400px !default;
 
 .page-template-roadworks-map {
 	#main-content {
@@ -42,8 +43,8 @@ $cell-map-mobile-height: calc(100vh - 108px);
 	height: calc(#{$cell-map-height} + 2px);
 	overflow-x: hidden;
 	overflow-y: scroll;
-	width: 25vw;
-	transform: translateX(25vw);
+	width: $roadwork-width;
+	transform: translateX($roadwork-width);
 	transition: transform linear 250ms;
 	padding: 1em;
 	h3 {
diff --git a/static/montpellier/_custom.scss b/static/montpellier/_custom.scss
index eb1c03a1..f40c1293 100644
--- a/static/montpellier/_custom.scss
+++ b/static/montpellier/_custom.scss
@@ -978,3 +978,22 @@ p#help {
 	text-align: right;
 	margin-bottom: 0;
 }
+
+.page-template-roadworks-map {
+	.leaflet-marker-icon {
+		font-size: 16px;
+	}
+	.chantier .chantier--libelle {
+		color: #666;
+	}
+	.chantier {
+		padding: 0;
+		> h3 {
+			padding: 0.5rem 1rem;
+			font-size: 110%;
+		}
+		> div {
+			padding: 0 1rem;
+		}
+	}
+}
diff --git a/static/montpellier/_vars.scss b/static/montpellier/_vars.scss
index 95d8b48b..1a288159 100644
--- a/static/montpellier/_vars.scss
+++ b/static/montpellier/_vars.scss
@@ -42,3 +42,5 @@ $wcs-steps-spacing: 0.7rem;
 $wcs-step-background: #fbfbfb;
 
 $or-separator: false;
+
+$cell-map-mobile-height: calc(100vh - 198px);
diff --git a/static/montpellier/extra.js b/static/montpellier/extra.js
index 1a56e9d0..d23d1e8e 100644
--- a/static/montpellier/extra.js
+++ b/static/montpellier/extra.js
@@ -59,4 +59,26 @@ $(function() {
     $(this).parent().toggleClass('on');
     return false;
   });
+
+  $('.page-template-roadworks-map div.cell.map').on('combo:map-feature-prepare', function(ev, info) {
+    info.layer.on('click', function(ev) {
+      var marker = info.layer;
+      var chantier_id = marker.feature.properties.IDCHANTIER || marker.feature.properties.id;
+      var $cell = $('[data-chantier-id=' + chantier_id + ']');
+      if ($cell.hasClass('shown')) {
+        $('.chantier').removeClass('shown');
+      } else {
+        $('.chantier[data-chantier-id!=' + chantier_id + ']').removeClass('shown');
+        $('.chantier').show();
+        $cell.addClass('shown');
+      }
+    });
+  });
+  if ($('.page-template-roadworks-map').length) {
+    $(document).on('combo:cell-loaded combo:roadworks-loaded', function(ev, elem) {
+      $('.chantier').off('click').on('click', function() { $(this).toggleClass('shown'); });
+    });
+    $(document).trigger('combo:roadworks-loaded');
+  }
+
 });
diff --git a/static/montpellier/style.scss b/static/montpellier/style.scss
index 8d1660d8..b67ad600 100644
--- a/static/montpellier/style.scss
+++ b/static/montpellier/style.scss
@@ -16,5 +16,6 @@
 @import '../includes/back-top';
 @import '../includes/library';
 @import '../includes/authentic';
+@import '../montpellier-ville/chantiers';
 
 @import 'custom';