From 0b0aa75821dc25ac7e68388517e91530dea3e22f Mon Sep 17 00:00:00 2001
From: gael <gsimon@webgeoservices.com>
Date: Wed, 7 Feb 2024 11:17:26 +0100
Subject: [PATCH] feat: create and use mixins in draw and rendered shapes

---
 samples/draw-shapes-events/index.njk         |  7 ++-
 samples/draw-shapes-events/index.ts          |  2 +-
 samples/draw-shapes-events/style.scss        | 11 +---
 samples/draw-shapes/index.njk                | 13 ++--
 samples/draw-shapes/index.ts                 | 43 ++++++-------
 samples/draw-shapes/style.scss               | 64 +++++---------------
 samples/map-events/style.scss                |  2 +-
 samples/render-shapes-data-events/index.njk  |  7 ++-
 samples/render-shapes-data-events/index.ts   |  2 +-
 samples/render-shapes-data-events/style.scss | 56 +++++++----------
 samples/render-shapes-data/style.scss        | 18 ++----
 shared/scss/_mixins.scss                     | 33 ++++++++++
 shared/scss/_modal.scss                      | 39 ++++++++++++
 13 files changed, 153 insertions(+), 144 deletions(-)
 create mode 100644 shared/scss/_modal.scss

diff --git a/samples/draw-shapes-events/index.njk b/samples/draw-shapes-events/index.njk
index 1961109f..0fc3a07e 100644
--- a/samples/draw-shapes-events/index.njk
+++ b/samples/draw-shapes-events/index.njk
@@ -1,6 +1,7 @@
 {% extends '../../src/_includes/layout.njk' %}
 {% block html %}
-    <div id="events"></div>
-    <!--The div element for the map -->
-    <div id="map"></div>
+    <div id="container">
+        <div id="map"></div>
+        <div class="events" id="sidebar"></div>
+    </div>
 {% endblock %}
diff --git a/samples/draw-shapes-events/index.ts b/samples/draw-shapes-events/index.ts
index 3e10133a..4d813e28 100644
--- a/samples/draw-shapes-events/index.ts
+++ b/samples/draw-shapes-events/index.ts
@@ -57,7 +57,7 @@ const data: woosmap.map.GeoJSONFeatureCollection = {
 };
 
 function populateTable() {
-  const eventsTable = document.getElementById("events");
+  const eventsTable = document.getElementById("sidebar");
   let content = "";
   for (let i = 0; i < events.length; i++) {
     content += `<div class="event" id="${events[i]}">${events[i]}</div>`;
diff --git a/samples/draw-shapes-events/style.scss b/samples/draw-shapes-events/style.scss
index 5388ee92..ed3474b9 100644
--- a/samples/draw-shapes-events/style.scss
+++ b/samples/draw-shapes-events/style.scss
@@ -1,16 +1,9 @@
 @use 'sass:meta'; // To enable @use via meta.load-css and keep comments in order
 
 /* [START woosmap_draw_shapes_events] */
-@include meta.load-css("../../shared/scss/_default.scss");
+@include meta.load-css("../../shared/scss/_sidebar.scss");
 
-#events {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 75%;
-  bottom: 0;
-  border-right: 2px solid #f5f5f5;
-  border-bottom: 1px solid #f5f5f5;
+.events {
   font-family: "Droid Sans Mono", monospace;
 }
 
diff --git a/samples/draw-shapes/index.njk b/samples/draw-shapes/index.njk
index 0f2258cd..cf2aa425 100644
--- a/samples/draw-shapes/index.njk
+++ b/samples/draw-shapes/index.njk
@@ -1,12 +1,15 @@
 {% extends '../../src/_includes/layout.njk' %}
 {% block html %}
-     <div id="buttons">
-        <button id="getAll" type="button">Export</button>
-      </div>
+    <div class="container">
+        <button class="btn" id="getDrawData" type="button">
+            <span class="btnText" tabindex="-1">Get GeoJSON</span>
+        </button>
+    </div>
     <!--The div element for the map -->
     <div id="map"></div>
-    <div id="myModal" class="modal">
+    <div class="modal-overlay closed" id="modal-overlay"></div>
+    <div class="modal closed"  id="modal">
         <!-- Modal content -->
-        <div class="modal-content" id="modal-content" />
+        <div class="modal-content" id="modal-content"></div>
     </div>
 {% endblock %}
diff --git a/samples/draw-shapes/index.ts b/samples/draw-shapes/index.ts
index 9c317c4b..8efc8e62 100644
--- a/samples/draw-shapes/index.ts
+++ b/samples/draw-shapes/index.ts
@@ -1,11 +1,11 @@
 // [START woosmap_draw_shapes]
 // Initialize and add the map
 let map: woosmap.map.Map;
-const modal = document.getElementById("myModal");
+const modal = document.getElementById("modal") as HTMLElement;
+const modalOverlay = document.getElementById("modal-overlay") as HTMLElement;
+const modalContent = document.getElementById("modal-content") as HTMLElement;
 
 function initMap() {
-  console.log("init map");
-
   map = new window.woosmap.map.Map(
     document.getElementById("map") as HTMLElement,
     {
@@ -19,19 +19,20 @@ function initMap() {
 
   draw.addControl(map);
 
-  const getAll_Button = document.getElementById("getAll");
-  if (getAll_Button) {
-    getAll_Button.onclick = function () {
-      // Retrieve geospatial data of all features
-      const data = draw.getAll();
-      const modalContent = document.getElementById("modal-content");
-      if (modalContent && modal) {
-        modalContent.innerHTML =
-          "<div><pre>" + JSON.stringify(data, null, 2) + "</pre></div>";
-        modal.style.display = "block";
-      }
-    };
-  }
+  const getDrawDataBtn = document.getElementById(
+    "getDrawData",
+  ) as HTMLButtonElement;
+
+  getDrawDataBtn.onclick = function () {
+    // Retrieve geospatial data of all features
+    const data = draw.getAll();
+    if (modalContent && modal && modalOverlay) {
+      modalContent.innerHTML =
+        "<div><pre>" + JSON.stringify(data, null, 2) + "</pre></div>";
+      modal.classList.toggle("closed");
+      modalOverlay.classList.toggle("closed");
+    }
+  };
 
   // Once map is loaded, load features and update them
   window.woosmap.map.event.addListenerOnce(map, "idle", () => {
@@ -497,13 +498,9 @@ function initMap() {
     // draw.add() method allows you to load features on the map.
     draw.add(data);
   });
-
-  window.onclick = function (event) {
-    if (event.target == modal) {
-      if (modal) {
-        modal.style.display = "none";
-      }
-    }
+  modalOverlay.onclick = function () {
+    modal.classList.toggle("closed");
+    modalOverlay.classList.toggle("closed");
   };
 }
 
diff --git a/samples/draw-shapes/style.scss b/samples/draw-shapes/style.scss
index f59c56de..17179f3d 100644
--- a/samples/draw-shapes/style.scss
+++ b/samples/draw-shapes/style.scss
@@ -2,56 +2,20 @@
 
 /* [START woosmap_draw_shapes] */
 @include meta.load-css("../../shared/scss/_default.scss");
+@include meta.load-css("../../shared/scss/_modal.scss");
+@import "../../shared/scss/mixins.scss";
 
-#getAll {
-    background-color: #4caf50; /* Green */
-    border: none;
-    color: white;
-    padding: 15px 32px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    font-size: 16px;
-    margin: 4px 2px;
-    cursor: pointer;
-  }
-  
-  #buttons {
-    position: absolute;
-    top: 0;
-    z-index: 10000;
-    margin: 10px;
-    padding: 5px;
-    display: flex;
-    align-items: center;
-  }
-  
-  body {
-    font-family: Arial, Helvetica, sans-serif;
-  }
-  
-  /* The Modal (background) */
-  .modal {
-    display: none; /* Hidden by default */
-    position: fixed; /* Stay in place */
-    z-index: 1; /* Sit on top */
-    padding-top: 100px; /* Location of the box */
-    left: 0;
-    top: 0;
-    width: 100%; /* Full width */
-    height: 100%; /* Full height */
-    overflow: auto; /* Enable scroll if needed */
-    background-color: rgb(0, 0, 0); /* Fallback color */
-    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
-  }
-  
-  /* Modal Content */
-  .modal-content {
-    background-color: #fefefe;
-    margin: auto;
-    padding: 20px;
-    border: 1px solid #888;
-    width: 80%;
-  }
+.btn {
+  @include button($background: #3d5afe);
+}
+
+.btnText {
+  @include actionText($color: #fff);
+}
+
+.container {
+  z-index: 1;
+  @include position($position: absolute, $top: 10px, $left: 10px);
+}
 
 /* [END woosmap_draw_shapes] */
diff --git a/samples/map-events/style.scss b/samples/map-events/style.scss
index 0dfddb79..b61b6379 100644
--- a/samples/map-events/style.scss
+++ b/samples/map-events/style.scss
@@ -1,7 +1,7 @@
 @use 'sass:meta'; // To enable @use via meta.load-css and keep comments in order
 
 /* [START woosmap_map_events] */
-@include meta.load-css("../../shared/scss/sidebar.scss");
+@include meta.load-css("../../shared/scss/_sidebar.scss");
 
 .events {
   font-family: "Droid Sans Mono", monospace;
diff --git a/samples/render-shapes-data-events/index.njk b/samples/render-shapes-data-events/index.njk
index 1961109f..0fc3a07e 100644
--- a/samples/render-shapes-data-events/index.njk
+++ b/samples/render-shapes-data-events/index.njk
@@ -1,6 +1,7 @@
 {% extends '../../src/_includes/layout.njk' %}
 {% block html %}
-    <div id="events"></div>
-    <!--The div element for the map -->
-    <div id="map"></div>
+    <div id="container">
+        <div id="map"></div>
+        <div class="events" id="sidebar"></div>
+    </div>
 {% endblock %}
diff --git a/samples/render-shapes-data-events/index.ts b/samples/render-shapes-data-events/index.ts
index 70970955..d94214a0 100644
--- a/samples/render-shapes-data-events/index.ts
+++ b/samples/render-shapes-data-events/index.ts
@@ -15,7 +15,7 @@ const events = [
 ];
 
 function populateTable() {
-  const eventsTable = document.getElementById("events");
+  const eventsTable = document.getElementById("sidebar");
   let content = "";
   for (let i = 0; i < events.length; i++) {
     content += `<div class="event" id="${events[i]}">${events[i]}</div>`;
diff --git a/samples/render-shapes-data-events/style.scss b/samples/render-shapes-data-events/style.scss
index 0a597307..d16ada70 100644
--- a/samples/render-shapes-data-events/style.scss
+++ b/samples/render-shapes-data-events/style.scss
@@ -1,40 +1,26 @@
 @use 'sass:meta'; // To enable @use via meta.load-css and keep comments in order
 
 /* [START woosmap_render_shapes_data_events] */
-@include meta.load-css("../../shared/scss/_default.scss");
-#map {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 25%;
-    bottom: 0;
-  }
-  
-#events {
-    position: absolute;
-    top: 0;
-    left: 75%;
-    right: 0;
-    bottom: 0;
-    border-right: 2px solid #f5f5f5;
-    border-bottom: 1px solid #f5f5f5;
-    font-family: "Droid Sans Mono", monospace;
-  }
-  
-  .event {
-    transition: background-color 0.5s ease-out;
-    padding: 0.5em;
-    overflow: hidden;
-    font-size: 14px;
-  }
-  
-  .active {
-    background-color: #ffdd00;
-    color: #000;
-  }
-  
-  .inactive {
-    background-color: white;
-  }
+@include meta.load-css("../../shared/scss/_sidebar.scss");
+
+.events {
+  font-family: "Droid Sans Mono", monospace;
+}
+
+.event {
+  transition: background-color 0.5s ease-out;
+  padding: 0.5em;
+  overflow: hidden;
+  font-size: 14px;
+}
+
+.active {
+  background-color: #ffdd00;
+  color: #000;
+}
+
+.inactive {
+  background-color: white;
+}
 
 /* [END woosmap_render_shapes_data_events] */
diff --git a/samples/render-shapes-data/style.scss b/samples/render-shapes-data/style.scss
index 82bd30e7..8c443c06 100644
--- a/samples/render-shapes-data/style.scss
+++ b/samples/render-shapes-data/style.scss
@@ -2,19 +2,11 @@
 
 /* [START woosmap_render_shapes_data] */
 @include meta.load-css("../../shared/scss/_default.scss");
+@import "../../shared/scss/mixins.scss";
 
 #info {
-    position: absolute;
-    top: 0;
-    z-index: 10000;
-    margin: 10px;
-    background: #fff;
-    padding: 5px;
-    display: flex;
-    flex-direction: column;
-    max-width: 200px;
-    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
-    border-radius: 3px;
-  }
-  
+  max-width: 200px;
+  @include map-panel($top: 0, $left: 0);
+}
+
 /* [END woosmap_render_shapes_data] */
diff --git a/shared/scss/_mixins.scss b/shared/scss/_mixins.scss
index c230e842..957f12cd 100644
--- a/shared/scss/_mixins.scss
+++ b/shared/scss/_mixins.scss
@@ -29,3 +29,36 @@
   z-index: 1;
 }
 
+@mixin button($background:#fff, $color:#202124, $hover: darken($background, 10%)) {
+  background: $background;
+  border: 0;
+  border-radius: 4px;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2);
+  -webkit-transition: background .3s, color .3s;
+  transition: background .3s, color .3s;
+  box-sizing: border-box;
+  font-size: 14px;
+  color: $color;
+  cursor: pointer;
+  display: flex;
+  font-weight: 600;
+  height: 32px;
+  padding: 0 15px;
+  position: relative;
+  align-items: center;
+  &:hover {
+    background: $hover;
+  }
+}
+
+@mixin actionText($color: #202124) {
+  color: $color;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.25rem;
+  &:hover {
+    text-decoration: none;
+  }
+}
diff --git a/shared/scss/_modal.scss b/shared/scss/_modal.scss
new file mode 100644
index 00000000..7ba1d0fa
--- /dev/null
+++ b/shared/scss/_modal.scss
@@ -0,0 +1,39 @@
+.modal {
+  display: block;
+  width: 80%;
+  max-width: 100%;
+  height: 80%;
+  max-height: 100%;
+  position: fixed;
+  z-index: 100;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background: white;
+  box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.25);
+}
+
+.modal-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  padding: 20px 50px 20px 20px;
+  box-sizing: border-box;
+}
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 50;
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.closed {
+  display: none;
+}