Introduce close button to the swiper

camptocamp · Nov 6, 2019 · a03f720 · a03f720
1 parent 0e8231b
commit a03f720
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 3 deletions.
diff --git a/contribs/gmf/apps/desktop/index.html.ejs b/contribs/gmf/apps/desktop/index.html.ejs
@@ -230,7 +230,7 @@
         <ngeo-mapswipe
           ng-if="mainCtrl.gmfLayerBeingSwipe.layer != null"
           map="::mainCtrl.map"
-          layer="::mainCtrl.gmfLayerBeingSwipe.layer"
+          layer="mainCtrl.gmfLayerBeingSwipe.layer"
           swipe-value="mainCtrl.gmfLayerBeingSwipe.swipeValue">
         </ngeo-mapswipe>
         <div id="ol-zoom-control"></div>

diff --git a/contribs/gmf/apps/desktop_alt/index.html.ejs b/contribs/gmf/apps/desktop_alt/index.html.ejs
@@ -278,7 +278,7 @@
         <ngeo-mapswipe
           ng-if="mainCtrl.gmfLayerBeingSwipe.layer != null"
           map="::mainCtrl.map"
-          layer="::mainCtrl.gmfLayerBeingSwipe.layer"
+          layer="mainCtrl.gmfLayerBeingSwipe.layer"
           swipe-value="mainCtrl.gmfLayerBeingSwipe.swipeValue">
         </ngeo-mapswipe>
         <div id="ol-zoom-control"></div>

diff --git a/contribs/gmf/src/sass/swipe.scss b/contribs/gmf/src/sass/swipe.scss
@@ -24,6 +24,27 @@ ngeo-mapswipe {
       }
     }
 
+    .ngeo-swipe-close::before {
+      color: #fff;
+      content: "\00d7";
+      display: inline-block;
+      font-size: 20px;
+      font-weight: bold;
+      line-height: normal;
+      text-align: center;
+    }
+
+    .ngeo-swipe-close {
+      position: absolute;
+      width: 100%;
+      height: 1.5rem;
+      right: 50%;
+      background-color: $brand-primary;
+      color: #fff;
+      border: $border;
+      z-index: $above-content-index;
+    }
+
     .ngeo-swipe-arrow {
       position: absolute;
       width: 100%;

diff --git a/src/map/swipe.html b/src/map/swipe.html
@@ -1,4 +1,5 @@
 <div class="ngeo-swipe-line-draggable">
+  <button class="ngeo-swipe-close" ng-click="$ctrl.deactivate()"></button>
   <div class="ngeo-swipe-line"></div>
   <div class="ngeo-swipe-arrow"><%=require('ngeo/icons/swipe.svg?viewbox&height=1em')%></div>
 </div>
diff --git a/src/map/swipe.js b/src/map/swipe.js
@@ -135,6 +135,13 @@ class SwipeController {
     this.resizeObserver_.observe(this.draggableElement_.parent().get(0));
   }
 
+  /**
+   * Allows you to deactivate the swiper on click of the close button.
+   */
+  deactivate() {
+    this.layer = null;
+  }
+
   /**
    * @param {?Event|import("ol/events/Event.js").default} evt OpenLayers object event.
    * @private
@@ -180,7 +187,7 @@ module.component('ngeoMapswipe', {
   controller: SwipeController,
   bindings: {
     map: '<',
-    layer: '<',
+    layer: '=',
     swipeValue: '='
   },
   templateUrl: ngeoMapswipeTemplateUrl