Add floor selector component

contribs/gmf/apps/desktop_alt/Controller.js

@@ -14,6 +14,7 @@ import gmfControllersAbstractDesktopController, {AbstractDesktopController}
   from 'gmf/controllers/AbstractDesktopController.js';
 import appBase from '../appmodule.js';
 import gmfImportModule from 'gmf/import/module.js';
+import gmfFloorModule from 'gmf/floor/module.js';
 import ngeoGooglestreetviewModule from 'ngeo/googlestreetview/module.js';
 import ngeoRoutingModule from 'ngeo/routing/module.js';
 import EPSG2056 from '@geoblocks/proj/src/EPSG_2056.js';
@@ -52,6 +53,26 @@ class Controller extends AbstractDesktopController {
       }
     }, $scope, $injector);
 
+    /**
+     * @type {Array.<Object.<string, string>>}
+     */
+    this.floors = [
+      {value: "10", label: "10"},
+      {value: "9", label: "9"},
+      {value: "8", label: "8"},
+      {value: "7", label: "7"},
+      {value: "6", label: "6"},
+      {value: "5", label: "5"},
+      {value: "4", label: "4"},
+      {value: "3", label: "3"},
+      {value: "2", label: "2"},
+      {value: "", label: ""}
+    ];
+
+    if (this.dimensions['FLOOR'] == undefined) {
+      this.dimensions['FLOOR'] = '+0';
+    }
+
     /**
      * @type {Array.<string>}
      */
@@ -175,6 +196,7 @@ const module = angular.module('Appdesktop_alt', [
   appBase.name,
   gmfControllersAbstractDesktopController.name,
   gmfImportModule.name,
+  gmfFloorModule.name,
   ngeoRoutingModule.name,
   ngeoGooglestreetviewModule.name,
   ngeoStatemanagerWfsPermalink.name,

contribs/gmf/apps/desktop_alt/index.html.ejs

@@ -305,6 +305,12 @@
           ngeo-bbox-query-autoclear="mainCtrl.queryAutoClear">
         </gmf-map>
 
+        <gmf-floorselector class="ol-unselectable ol-control"
+          floor="mainCtrl.dimensions.FLOOR"
+          items="::mainCtrl.floors"
+          size="7">
+        </gmf-floorselector>
+
         <!--infobar-->
         <div class="gmf-app-footer" ng-class="{'gmf-app-active': mainCtrl.showInfobar}">
           <button class="btn fa gmf-app-map-info ng-cloak" ng-click="mainCtrl.showInfobar = !mainCtrl.showInfobar"

contribs/gmf/src/floor/floor.scss

@@ -0,0 +1,41 @@
+gmf-floorselector {
+  right: 0.62rem;
+  top: 0.62rem;
+
+  &.ol-control {
+    background-color: transparent;
+    padding: 0;
+    button {
+      margin: 0;
+      margin-bottom: $micro-app-margin;
+      height: $map-tools-size;
+      width: $map-tools-size;
+      background-color: $map-tools-bg-color;
+      border: solid 0.06rem $border-color;
+      color: $map-tools-color;
+      &:hover {
+        background-color: $onhover-color;
+      }
+      &:focus {
+        background-color: $map-tools-bg-color;
+        outline: none;
+      }
+      &:active {
+        outline: none;
+      }
+    }
+    .btn-floor {
+      &.active {
+        background-color: $brand-secondary;
+      }
+    }
+  }
+  &:hover {
+    background-color: transparent;
+  }
+
+  .btn-group-floors {
+    margin-top: 0.2rem;
+    margin-bottom: 0.2rem;
+  }
+}

contribs/gmf/src/floor/floorselectorComponent.js

@@ -0,0 +1,177 @@
+/* eslint max-len: ["error", { "code": 110, "ignoreComments": true }] */
+
+import angular from 'angular';
+
+import {findIndex as findIndexInArray} from 'ol/array.js';
+
+
+/**
+ * @type {!angular.IModule}
+ * @hidden
+ */
+const module = angular.module('gmfFloorselector', []);
+
+
+module.run(/* @ngInject */ ($templateCache) => {
+  // @ts-ignore: webpack
+  $templateCache.put('gmf/floor/floorselectorcomponent', require('./floorselectorcomponent.html'));
+});
+
+module.value('gmfFloorselectorTemplateUrl',
+  /**
+   * @param {!angular.IAttributes} $attrs Attributes.
+   * @return {string} The template url.
+   */
+  ($attrs) => {
+    const templateUrl = $attrs['gmfFloorselectorTemplateUrl'];
+    return templateUrl !== undefined ? templateUrl :
+      'gmf/floor/floorselectorcomponent';
+  });
+
+
+/**
+ * @param {!angular.IAttributes} $attrs Attributes.
+ * @param {!function(!angular.IAttributes): string} gmfFloorselectorTemplateUrl Template function.
+ * @return {string} Template URL.
+ * @ngInject
+ * @private
+ * @hidden
+ */
+function gmfFloorselectorTemplateUrl($attrs, gmfFloorselectorTemplateUrl) {
+  return gmfFloorselectorTemplateUrl($attrs);
+}
+
+
+/**
+ * @private
+ * @hidden
+ */
+class Controller {
+
+  /**
+   * @param {!angular.IScope} $scope Angular scope.
+   * @private
+   * @ngInject
+   * @ngdoc controller
+   * @ngname GmfFilterselectorController
+   */
+  constructor($scope) {
+
+    /**
+     * @type {Array.<Object.<string, string>>}
+     */
+    this.items;
+
+    /**
+     * @type {number}
+     */
+    this.size;
+
+    /**
+     * @type {string}
+     */
+    this.floor;
+
+    /**
+     * @type {number}
+     */
+    this.currentIndex;
+
+    /**
+     * @type {number}
+     * @private
+     */
+    this.lowerBound_;
+
+    /**
+     * @type {number}
+     * @private
+     */
+    this.upperBound_;
+
+    $scope.$watch(
+      function() {
+        return this.floor;
+      }.bind(this),
+      function() {
+        this.floorChanged_();
+      }.bind(this)
+    );
+  }
+
+  /**
+   * @private
+   */
+  floorChanged_() {
+    var floor = this.floor;
+
+    // Update currentIndex
+    this.currentIndex = findIndexInArray(this.items, function(item) {
+      return item.value === floor;
+    });
+    console.assert(this.currentIndex > -1);
+
+    // Update visible bounds
+    var uBound = this.currentIndex,
+        lBound = this.currentIndex;
+    for (var i=1; i<this.size; i++) {
+      if (i % 2 == 0) {
+        uBound > 0 ? uBound -= 1 : lBound += 1;
+      }
+      else {
+        lBound < (this.items.length - 1) ? lBound += 1 : uBound -= 1;
+      }
+    }
+    this.upperBound_ = uBound;
+    this.lowerBound_ = lBound;
+  }
+
+  /**
+   * @param {number} index Item index.
+   * @export
+   */
+  isItemVisible(index) {
+    if (this.lowerBound_ === undefined || this.upperBound_ === undefined) {
+      return true;
+    }
+    // Items are in reversed order
+    return this.upperBound_ <= index && index <= this.lowerBound_;
+  }
+
+  /**
+   * @param {number} delta Signed number of floors to move.
+   */
+  move(delta) {
+    var newindex = this.currentIndex - delta;  // Items are in reversed order
+    if (newindex >= 0 && newindex < this.items.length) {
+      this.floor = this.items[newindex].value;
+    }
+  }
+}
+
+
+/**
+ * @typedef {Object} RuleCacheItem
+ * @property {Array.<import('ngeo/rule/Rule.js').default>} customRules
+ * @property {Array.<import('ngeo/rule/Rule.js').default>} directedRules
+ */
+module.component('gmfFloorselector', {
+  bindings: {
+    floor: '=',
+    items: '<',
+    size: '<'
+  },
+  controller: Controller,
+  templateUrl: gmfFloorselectorTemplateUrl,
+  link: function(scope, element, attrs, ctrl) {
+    element[0].addEventListener('wheel', function(event) {
+      scope.$apply(function() {
+        var delta = event.deltaY > 0 ? -1 : 1;
+        ctrl.move(delta);
+      });
+    });
+  }
+});
+
+
+export default module;

contribs/gmf/src/floor/floorselectorcomponent.html

@@ -0,0 +1,9 @@
+<button type="button" class="btn btn-floor increment fa fa-2x fa-angle-up" ng-click="$ctrl.move(+1)"></button>
+<div role="group" class="btn-group-floors">
+  <button type="button" class="btn btn-floor"
+    ng-repeat="item in ::$ctrl.items"
+    ng-class="{active: item.value == $ctrl.floor}"
+    ng-show="$ctrl.isItemVisible($index)"
+    ng-click="$ctrl.floor = item.value">{{::item.label}}</button>
+</div>
+<button type="button" class="btn btn-floor decrement fa fa-2x fa-angle-down" ng-click="$ctrl.move(-1)"></button>

contribs/gmf/src/floor/module.js

@@ -0,0 +1,14 @@
+/**
+ */
+import angular from 'angular';
+import gmfFloorFloorSelectorComponent from 'gmf/floor/floorselectorComponent.js';
+
+import './floor.scss';
+
+
+/**
+ * @type {!angular.IModule}
+ */
+export default angular.module('gmfFloorModule', [
+  gmfFloorFloorSelectorComponent.name,
+]);