Use a draggable div for the map swipe component

contribs/gmf/src/layertree/common.scss

@@ -194,6 +194,6 @@
     }
   }
   .gmf-layer-being-swipe {
-    margin: 0 15px;
+    margin-left: 0.25rem;
   }
 }

contribs/gmf/src/layertree/component.html

@@ -79,7 +79,7 @@
 
     <span
       ng-if="gmfLayertreeCtrl.gmfLayerBeingSwipe.layer && gmfLayertreeCtrl.gmfLayerBeingSwipe.layer === layertreeCtrl.layer"
-      class="fa fal fa-sort fa-rotate-90 gmf-layer-being-swipe"
+      class="fas fa-arrows-alt-h gmf-layer-being-swipe"
     ></span>
 
     <i

contribs/gmf/src/sass/swipe.scss

@@ -1,117 +1,35 @@
- ngeo-mapswipe {
-   height: 100%;
-   position: relative;
-   width: 100%;
-   z-index: 1;
- }
-
-@mixin track() {
-  background: none;
-  border: 0;
-  height: 100%;
-}
-
-ngeo-mapswipe div {
-  display: contents;
-  height: 100%;
+ngeo-mapswipe {
   position: absolute;
-  vertical-align: middle;
   width: 100%;
+  height: 100%;
 
-  .swipe-input {
-    appearance: none;
-    background: none;
+  .ngeo-swipe-line-draggable {
+    position: absolute;
+    left: calc(50% - 16px);
+    width: 32px;
     height: 100%;
-    opacity: 0.7;
-    outline: none;
-    pointer-events: none;
-    transition: opacity 0.2s;
-    width: 100%;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    -webkit-transition: 0.2s;
-  }
-
-  [type="range"].swipe-input {
-    &::-webkit-slider-thumb {
-      appearance: none;
-      background-color: red;
-      border: 0.06rem solid red;
-      cursor: pointer;
-      height: 100%;
-      pointer-events: auto;
-      width: 8px;
-      -webkit-appearance: none;
-    }
-
-    &::-webkit-slider-runnable-track {
-      @include track;
-    }
-    &::-moz-range-track {
-      width: 100%;
-      @include track;
-    }
-    &::-ms-track {
-      @include track;
-    }
-
-    &::-moz-range-progress {
-      background: transparent;
-    }
-
-    &::-moz-range-thumb {
-      appearance: none;
-      background-color: red;
-      border: 0.06rem solid red;
-      box-sizing: border-box;
-      cursor: pointer;
+    z-index: 1;
+    cursor: pointer;
+
+    .ngeo-swipe-line {
+      position: absolute;
+      left: 50%;
+      width: 4px;
+      margin-left: -2px;
       height: 100%;
-      pointer-events: auto;
-      width: 8px;
-      -moz-appearance: none;
-    }
-    &::-ms-thumb {
-      margin-top: 0;
-    }
-
-    &::-ms-tooltip {
-      display: none;
+      background-color: #f00;
     }
 
-    &::-moz-focus-outer {
-      border: 0;
+    .ngeo-swipe-arrow {
+      position: absolute;
+      width: 32px;
+      height: 32px;
+      left: 0;
+      top: 50%;
+      margin-top: -16px;
+      padding: 5px 4px;
+      background-color: #f00;
+      color: #fff;
     }
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-
-  .swipe-output {
-    background-color: red;
-    border: 2px solid red;
-    color: white;
-    display: inline-block;
-    font-size: 36px;
-    height: 40px;
-    left: 0%;
-    line-height: 20px;
-    margin: 30% 0 0 -20px;
-    padding: 5px;
-    position: absolute;
-    pointer-events: none;
-    text-align: center;
-    top: auto;
-    transform: rotate(90deg);
-    width: 40px;
-  }
-
-  .swipe-output::before {
-    content: "\f0dc";
-    font-family: "Font Awesome 5 Free";
-    font-weight: 900;
-    margin: 30% 0 0 -3%;
-    position: relative;
-    vertical-align: middle;
   }
 }

examples/mapswipe.css

@@ -1,32 +1,34 @@
-#map {
-    width: 100%;
-    height: 400px;
-  }
-
-ngeo-mapswipe .swipe-input {
-  background: none;
-  height: 0;
-  opacity: 0.7;
-  outline: none;
-  pointer-events: none;
-  position: absolute;
-  top: 20%;
-  transition: opacity .2s;
-  -webkit-appearance: none;
-  -webkit-transition: .2s;
+#map, ngeo-mapswipe {
   width: 100%;
+  height: 400px;
 }
-
-ngeo-mapswipe .swipe-input:hover {
-  opacity: 1;
+ngeo-mapswipe {
+  position: absolute;
 }
 
-ngeo-mapswipe .swipe-input::-webkit-slider-thumb {
-  appearance: none;
-  background: #206020;
+.ngeo-swipe-line-draggable {
+  position: absolute;
+  left: calc(50% - 16px);
+  width: 32px;
+  height: 100%;
+  z-index: 1;
   cursor: pointer;
-  height: 415px;
-  pointer-events: auto;
-  -webkit-appearance: none;
-  width: 25px;
+}
+.ngeo-swipe-line {
+  position: absolute;
+  left: 50%;
+  width: 4px;
+  margin-left: -2px;
+  height: 100%;
+  background-color: #f00;
+ }
+
+.ngeo-swipe-arrow {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  margin-top: -16px;
+  padding: 0 2px;
+  background-color: #f00;
+  color: #fff;
 }

examples/mapswipe.html

@@ -8,8 +8,8 @@
     <meta name="mobile-web-app-capable" content="yes">
   </head>
   <body ng-controller="MainController as ctrl">
-   <div id="map" ngeo-map="::ctrl.map"></div>
-   <ngeo-mapswipe map="::ctrl.map" layer="::ctrl.openSeaMapLayer"></ngeo-mapswipe>
+    <ngeo-mapswipe map="::ctrl.map" layer="::ctrl.openSeaMapLayer"></ngeo-mapswipe>
+    <div id="map" ngeo-map="::ctrl.map"></div>
     <p id="desc">This example shows how to use the <code><a href="../apidoc/ngeo.map.swipe.html" title="Read our documentation">ngeo-Mapswipe</a></code> component to insert an input type range and swipe a map.</p>
     <script type="text/javascript" src="dist/vendor.js"></script>
   </body>

package.json

@@ -119,6 +119,7 @@
     "popper.js": "~1.15.0",
     "proj4": "~2.5.0",
     "puppeteer": "~1.20.0",
+    "resize-observer-polyfill": "~1.5.1",
     "simple-html-tokenizer": "~0.5.7",
     "sinon": "~7.5.0",
     "svg-inline-loader": "~0.8.0",

src/map/swipe.html

@@ -1,4 +1,4 @@
-<div>
-  <input id="swipe" type="range" class="swipe-input">
-  <output for="swipe" class="swipe-output" input></output>
+<div class="ngeo-swipe-line-draggable">
+  <div class="ngeo-swipe-line"></div>
+  <div class="ngeo-swipe-arrow"><i class="fas fa-arrows-alt-h fa-2x"></i></div>
 </div>

src/map/swipe.js

@@ -1,6 +1,11 @@
 import angular from 'angular';
 import {listen, unlistenByKey} from 'ol/events.js';
 import RenderEvent from 'ol/render/Event.js';
+
+import ResizeObserver from 'resize-observer-polyfill';
+import 'jquery-ui/ui/widgets/draggable.js';
+
+
 /**
  * @type {angular.IModule}
  * @hidden
@@ -77,25 +82,26 @@ class SwipeController {
     /**
      * @type {number}
      */
-    this.swipeValue = 50;
+    this.swipeValue = 0.5;
 
     /**
      * @type {JQuery}
      * @private
      */
-    this.swipeInput_ = $element.find('.swipe-input');
+    this.draggableElement_ = $element.find('.ngeo-swipe-line-draggable');
 
     /**
-     * @type {JQuery}
+     * @type {import("ol/events.js").EventsKey[]}
      * @private
      */
-    this.swipeOutput_ = $element.find('.swipe-output');
+    this.layerKeys_ = [];
 
     /**
-     * @type {import("ol/events.js").EventsKey[]}
+     * @type {ResizeObserver}
      * @private
      */
-    this.layerKeys_ = [];
+    this.resizeObserver_;
+
   }
 
   /**
@@ -105,17 +111,27 @@ class SwipeController {
     this.layerKeys_.push(listen(this.layer, 'prerender', this.handleLayerPrerender_, this));
     this.layerKeys_.push(listen(this.layer, 'postrender', this.handleLayerPostrender_, this));
 
-    this.swipeOutput_.css({
-      'left': `${this.swipeValue}%`
+    const halfDraggableWidth = this.draggableElement_.width() / 2;
+
+    this.draggableElement_.draggable({
+      axis: 'x',
+      containment: 'parent',
+      drag: () => {
+        const parentWidth = this.draggableElement_.parent().width();
+        const position = this.draggableElement_.position().left + halfDraggableWidth;
+
+        this.swipeValue = position / parentWidth;
+
+        this.map.render();
+      }
     });
 
-    this.swipeInput_.on('input change', event => {
-      this.swipeValue = Number($(event.target).val());
-      this.map.render();
-      this.swipeOutput_.css({
-        'left': `${this.swipeValue}%`
-      });
+    // keep the same percentage when the parent is resized
+    this.resizeObserver_ = new ResizeObserver(() => {
+      const parentWidth = this.draggableElement_.parent().width();
+      this.draggableElement_.css('left', (parentWidth * this.swipeValue) - halfDraggableWidth);
     });
+    this.resizeObserver_.observe(this.draggableElement_.parent().get(0));
   }
 
   /**
@@ -130,7 +146,7 @@ class SwipeController {
     if (!ctx) {
       return;
     }
-    const width = ctx.canvas.width * (this.swipeValue / 100);
+    const width = ctx.canvas.width * this.swipeValue;
     ctx.save();
     ctx.beginPath();
     ctx.rect(0, 0, width, ctx.canvas.height);
@@ -154,7 +170,8 @@ class SwipeController {
   $onDestroy() {
     this.layerKeys_.forEach(unlistenByKey);
     this.layerKeys_.length = 0;
-    this.swipeInput_.off();
+    this.draggableElement_.draggable('destroy');
+    this.resizeObserver_.disconnect();
   }
 }
 

tsconfig.json

@@ -23,6 +23,7 @@
         "moment": ["node_modules/moment/moment.d.ts"],
         "jsts/*": ["node_modules/@types/jsts/index.d.ts"],
         "localforage/*": ["node_modules/localforage/*"],
+        "resize-observer-polyfill": ["node_modules/resize-observer-polyfill/src/index.d.ts"],
       }
     },
     "include": [