Add floor selector component

contribs/gmf/apps/appmodule.js

@@ -20,5 +20,22 @@ module.config(['$compileProvider', function($compileProvider) {
   }
 }]);
 
+/**
+ * @type {Array.<Object.<string, string>>}
+ */
+const appFloors = [
+  {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: 'NULL', label: 'N'},
+  {value: '*', label: '*'}
+];
+module.constant('appFloors', appFloors);
 
 export default module;

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';
@@ -40,9 +41,10 @@ class Controller extends AbstractDesktopController {
   /**
    * @param {angular.IScope} $scope Scope.
    * @param {angular.auto.IInjectorService} $injector Main injector.
+   * @param {Array.<Object.<string, string>>} appFloors Floor dimension values and labels.
    * @ngInject
    */
-  constructor($scope, $injector) {
+  constructor($scope, $injector, appFloors) {
     super({
       srid: 21781,
       mapViewConfig: {
@@ -52,6 +54,15 @@ class Controller extends AbstractDesktopController {
       }
     }, $scope, $injector);
 
+    /**
+     * @type {Array.<Object.<string, string>>}
+     */
+    this.floors = appFloors;
+
+    if (this.dimensions['FLOOR'] == undefined) {
+      this.dimensions['FLOOR'] = '*';
+    }
+
     /**
      * @type {Array.<string>}
      */
@@ -175,6 +186,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="gmf-floorselector 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/controllers/desktop.scss

@@ -236,6 +236,12 @@ gmf-search {
   top: $app-margin;
 }
 
+.gmf-floorselector {
+  left: 0.62rem;
+  top: 6rem;
+  height: 15rem;
+}
+
 .gmf-app-data-panel {
   display: block;
   float: left;

contribs/gmf/src/floor/floor.scss

@@ -0,0 +1,42 @@
+.gmf-floorselector {
+  overflow: hidden;
+  background-color: transparent;
+  padding: 0;
+  &:hover {
+   background-color: transparent;
+  }
+  .btn-floor {
+    margin: 0;
+    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: $map-tools-bg-color;
+    }
+    &:focus {
+      background-color: $map-tools-bg-color;
+      outline: none;
+      box-shadow: none;
+    }
+    &.active {
+      outline: none;
+      background-color: $brand-secondary;
+    }
+  }
+  .btn-group-floors {
+    margin-top: 0.2rem;
+    margin-bottom: 0.2rem;
+  }
+  .btn-floor-up {
+    position: absolute;
+    top: 0;
+    z-index: 1;
+  }
+  .btn-floor-down {
+    position: absolute;
+    bottom: 0;
+    z-index: 1;
+  }
+}

contribs/gmf/src/floor/floorselectorComponent.js

@@ -0,0 +1,169 @@
+/* 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.
+   * @param {!JQuery} $element Element.
+   * @private
+   * @ngInject
+   * @ngdoc controller
+   * @ngname GmfFilterselectorController
+   */
+  constructor($scope, $element) {
+
+    /**
+     * @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_;
+
+    this.scope = $scope;
+    this.element = $element;
+  }
+
+  $postLink() {
+    this.scope.$watch(
+      () => {
+        return this.floor;
+      },
+      () => {
+        this.floorChanged_();
+      }
+    );
+
+    this.element[0].addEventListener('wheel', (event) => {
+      this.scope.$apply(() => {
+        const delta = event.deltaY > 0 ? -1 : 1;
+        this.move(delta);
+      });
+    });
+  }
+
+  /**
+   * @private
+   */
+  floorChanged_() {
+    const floor = this.floor;
+
+    // Update currentIndex
+    this.currentIndex = findIndexInArray(this.items, function(item) {
+      return item.value === floor;
+    });
+    console.assert(this.currentIndex > -1);
+
+    const buttonGroup = this.element.find('.btn-group-floors');
+
+    const buttonUp = this.element.find('.btn-floor-up');
+    const maxTop = buttonUp.position().top + buttonUp.outerHeight(true);
+
+    const buttonDown = this.element.find('.btn-floor-down');
+    const minTop = buttonDown.position().top - buttonGroup.outerHeight(true);
+
+    const currentButton = this.element.find(`.btn-floor:nth(${this.currentIndex})`);
+    let top = (
+      this.element.innerHeight() / 2
+      - currentButton.position().top
+      - currentButton.outerHeight(true) / 2
+    );
+    top = Math.min(top, maxTop);
+    top = Math.max(top, minTop);
+    buttonGroup.css('top', top);
+  }
+
+  /**
+   * @param {number} delta Signed number of floors to move.
+   */
+  move(delta) {
+    const newindex = this.currentIndex - delta; // Items are in reversed order
+    if (newindex >= 0 && newindex < this.items.length) {
+      this.floor = this.items[newindex].value;
+    }
+  }
+}
+
+
+module.component('gmfFloorselector', {
+  bindings: {
+    floor: '=',
+    items: '<',
+    size: '<'
+  },
+  controller: Controller,
+  templateUrl: gmfFloorselectorTemplateUrl
+});
+
+
+export default module;

contribs/gmf/src/floor/floorselectorcomponent.html

@@ -0,0 +1,8 @@
+<div role="group" class="btn-group-floors btn-group-vertical">
+  <button type="button" class="btn btn-floor"
+    ng-repeat="item in ::$ctrl.items"
+    ng-class="{active: item.value == $ctrl.floor}"
+    ng-click="$ctrl.floor = item.value">{{::item.label}}</button>
+</div>
+<button type="button" class="btn btn-floor btn-floor-up increment fa fa-2x fa-angle-up" ng-click="$ctrl.move(+1)"></button>
+<button type="button" class="btn btn-floor btn-floor-down 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,
+]);