Merge pull request #3553 from camptocamp/backgroundlayerselector-opac…

…ityslider

Backgroundlayerselector opacityslider

contribs/gmf/apps/desktop/index.html

@@ -222,7 +222,6 @@
               <img src="image/background-layer-button.png" alt="" />
             </button>
             <gmf-backgroundlayerselector
-              gmf-backgroundlayerselector-dimensions="::mainCtrl.dimensions"
               gmf-backgroundlayerselector-map="::mainCtrl.map"
               class="dropdown-menu">
             </gmf-backgroundlayerselector>

contribs/gmf/apps/desktop_alt/index.html

@@ -253,8 +253,8 @@
               <img src="image/background-layer-button.png" alt="" />
             </button>
             <gmf-backgroundlayerselector
-              gmf-backgroundlayerselector-dimensions="::mainCtrl.dimensions"
               gmf-backgroundlayerselector-map="::mainCtrl.map"
+              gmf-backgroundlayer-opacity-options="::mainCtrl.bgOpacityOptions"
               class="dropdown-menu">
             </gmf-backgroundlayerselector>
           </div>

contribs/gmf/apps/desktop_alt/js/controller.js

@@ -135,6 +135,12 @@ app.AlternativeDesktopController = function($scope, $injector, ngeoFile, gettext
   gettextCatalog.getString('Add a sub theme');
   gettextCatalog.getString('Add a layer');
 
+  /**
+   * @type {string}
+   * @export
+   */
+  this.bgOpacityOptions = 'Test aus Olten';
+
   /**
    * @export
    */

contribs/gmf/apps/mobile/index.html

@@ -107,7 +107,6 @@
         id="background"
         class="gmf-mobile-nav-slide"
         data-header-title="{{'Background' | translate}}"
-        gmf-backgroundlayerselector-dimensions="::mainCtrl.dimensions"
         gmf-backgroundlayerselector-map="::mainCtrl.map"
         gmf-backgroundlayerselector-select="mainCtrl.hideNav()">
       </gmf-backgroundlayerselector>

contribs/gmf/apps/mobile_alt/index.html

@@ -110,7 +110,6 @@
         id="background"
         class="gmf-mobile-nav-slide"
         data-header-title="{{'Background' | translate}}"
-        gmf-backgroundlayerselector-dimensions="::mainCtrl.dimensions"
         gmf-backgroundlayerselector-map="::mainCtrl.map"
         gmf-backgroundlayerselector-select="mainCtrl.hideNav()">
       </gmf-backgroundlayerselector>

contribs/gmf/examples/backgroundlayerselector.html

@@ -49,7 +49,6 @@
     directive to select the map background layer.</p>
     <div>
         <gmf-backgroundlayerselector
-          gmf-backgroundlayerselector-dimensions="::ctrl.dimensions"
           gmf-backgroundlayerselector-map="::ctrl.map">
         </gmf-backgroundlayerselector>
     </div>

contribs/gmf/examples/backgroundlayerselector.js

@@ -30,12 +30,6 @@ gmfapp.MainController = function(gmfThemes) {
 
   gmfThemes.loadThemes();
 
-  /**
-   * @type {Object.<string, string>}
-   * @export
-   */
-  this.dimensions = {};
-
   /**
    * @type {ol.Map}
    * @export

contribs/gmf/less/map.less

@@ -93,6 +93,20 @@ button[ngeo-mobile-geolocation] {
         content: @fa-var-check;
       }
     }
+
+    &.gmf-backgroundlayerselector-disabled{
+      border-top-color: @map-tools-color;
+      pointer-events: none;
+    }
+
+    span.gmf-backgroundlayerselector-opacity-check {
+      &::after {
+        width: (18em / 14);
+        font-family: FontAwesome;
+        content: @fa-var-check;
+        text-align: center;
+      }
+    }
   }
 
   .gmf-text {
@@ -106,6 +120,12 @@ button[ngeo-mobile-geolocation] {
     height: @map-tools-size;
     margin: 0 @half-app-margin;
   }
+
+  input.gmf-backgroundlayerselector-opacity-slider {
+    margin: 1rem 0 2rem 0;
+    padding-left: @half-app-margin !important;
+    padding-right: @half-app-margin !important;
+  }
 }
 
 /** Disclaimer and tablet redirect */

contribs/gmf/src/directives/backgroundlayerselector.js

@@ -1,6 +1,5 @@
 goog.provide('gmf.backgroundlayerselectorComponent');
 
-goog.require('goog.asserts');
 goog.require('gmf');
 goog.require('gmf.Themes');
 goog.require('ngeo.BackgroundEventType');
@@ -39,18 +38,17 @@ function gmfBackgroundlayerselectorTemplateUrl($element, $attrs, gmfBackgroundla
  * Example:
  *
  *      <gmf-backgroundlayerselector
- *        gmf-backgroundlayerselector-dimensions="::ctrl.dimensions"
  *        gmf-backgroundlayerselector-map="::ctrl.map"
+ *        gmf-backgroundlayer-opacity-options="::ctrl.bgOpacityOptions"
  *        gmf-backgroundlayerselector-select="onBackgroundSelected()">
  *      </gmf-backgroundlayerselector>
  *
  * Used UI metadata:
  *
  *  * thumbnail: The URL used for the icon.
  *
- * @htmlAttribute {Object.<string, string>} gmf-backgroundlayerselector-dimensions
- *     The dimensions.
  * @htmlAttribute {ol.Map=} gmf-backgroundlayerselector-map The map.
+ * @htmlAttribute {string} gmf-backgroundlayer-opacity-options The opacity slider options.
  * @htmlAttribute {Function} gmf-backgroundlayerselector-select Function called
  *     when a layer was selected by the user.
  *
@@ -60,8 +58,8 @@ function gmfBackgroundlayerselectorTemplateUrl($element, $attrs, gmfBackgroundla
 gmf.backgroundlayerselectorComponent = {
   controller: 'GmfBackgroundlayerselectorController as ctrl',
   bindings: {
-    'dimensions': '=gmfBackgroundlayerselectorDimensions',
     'map': '=gmfBackgroundlayerselectorMap',
+    'opacityOptions': '=gmfBackgroundlayerOpacityOptions',
     'select': '&?gmfBackgroundlayerselectorSelect'
   },
   templateUrl: gmfBackgroundlayerselectorTemplateUrl
@@ -85,16 +83,16 @@ gmf.module.component('gmfBackgroundlayerselector', gmf.backgroundlayerselectorCo
 gmf.BackgroundlayerselectorController = function($scope, ngeoBackgroundLayerMgr, gmfThemes) {
 
   /**
-   * @type {!Object.<string, string>}
+   * @type {?ol.Map}
    * @export
    */
-  this.dimensions;
+  this.map;
 
   /**
-   * @type {?ol.Map}
+   * @type {!string|undefined}
    * @export
    */
-  this.map;
+  this.opacityOptions;
 
   /**
    * Function called when a layer was selected by the user.
@@ -115,6 +113,12 @@ gmf.BackgroundlayerselectorController = function($scope, ngeoBackgroundLayerMgr,
    */
   this.bgLayers;
 
+  /**
+   * @type {ol.layer.Base}
+   * @export
+   */
+  this.opacityLayer;
+
   /**
    * @type {!gmf.Themes}
    * @private
@@ -154,7 +158,6 @@ gmf.module.controller('GmfBackgroundlayerselectorController',
  * Initialise the controller.
  */
 gmf.BackgroundlayerselectorController.prototype.$onInit = function() {
-  goog.asserts.assert(this.dimensions, 'The dimensions object is required');
   this.handleThemesChange_();
 };
 
@@ -166,9 +169,34 @@ gmf.BackgroundlayerselectorController.prototype.$onInit = function() {
 gmf.BackgroundlayerselectorController.prototype.handleThemesChange_ = function() {
   this.gmfThemes_.getBgLayers().then((layers) => {
     this.bgLayers = layers;
+
+    if (this.opacityOptions !== undefined) {
+      const opacityLayer = layers.find(layer => layer.get('label') === this.opacityOptions);
+      if (opacityLayer !== undefined) {
+        this.setOpacityBgLayer(opacityLayer);
+        this.opacityLayer = opacityLayer;
+
+        // Reorder for the UI the bgArray copy with the opacity layer at the end
+        this.bgLayers = this.bgLayers.slice();
+        const indexOpa = this.bgLayers.findIndex(layer => layer === this.opacityLayer);
+        this.bgLayers.splice(indexOpa, 1);
+        this.bgLayers.push(opacityLayer);
+      }
+    }
   });
 };
 
+/**
+ * Getter/setter for background layer overlay, used by opacity slider.
+ * @param {?number} val The opacity.
+ * @returns {number} The background layer opacity.
+ */
+gmf.BackgroundlayerselectorController.prototype.getSetBgLayerOpacity = function(val) {
+  if (val) {
+    this.opacityLayer.setOpacity(val);
+  }
+  return this.opacityLayer.getOpacity();
+};
 
 /**
  * @param {ol.layer.Base} layer Layer.
@@ -183,6 +211,13 @@ gmf.BackgroundlayerselectorController.prototype.setLayer = function(layer, opt_s
   }
 };
 
+/**
+ * Set a background layer overlay, used by the opacity slider.
+ * @param {ol.layer.Base} layer The opacity background layer.
+ */
+gmf.BackgroundlayerselectorController.prototype.setOpacityBgLayer = function(layer) {
+  this.backgroundLayerMgr_.setOpacityBgLayer(this.map, layer);
+};
 
 /**
  * @private

contribs/gmf/src/directives/partials/backgroundlayerselector.html

@@ -1,9 +1,20 @@
 <ul class="gmf-backgroundlayerselector">
   <li ng-repeat="layer in ctrl.bgLayers"
       ng-click="ctrl.setLayer(layer)"
-      ng-class="{'gmf-backgroundlayerselector-active': ctrl.bgLayer == layer}">
+      ng-class="{'gmf-backgroundlayerselector-active': ctrl.bgLayer == layer, 'gmf-backgroundlayerselector-disabled': ctrl.opacityLayer == layer}">
     <img class="gmf-thumb"
          ng-src="{{::layer.get('metadata')['thumbnail']}}" />
     <span class="gmf-text">{{layer.get("label") | translate}}</span>
+    <span ng-class="{'gmf-backgroundlayerselector-opacity-check': ctrl.opacityLayer == layer}"></span>
   </li>
+
+  <input ng-if="ctrl.opacityLayer"
+         class="input-action gmf-backgroundlayerselector-opacity-slider"
+         name="bg-layer-opacity"
+         type="range"
+         min="0"
+         max="1"
+         step="0.01"
+         ng-model="ctrl.getSetBgLayerOpacity"
+         ng-model-options="{getterSetter: true}">
 </ul>

contribs/gmf/src/gmf.js

@@ -40,6 +40,11 @@ gmf.module.config(['$animateProvider',
  */
 gmf.baseTemplateUrl = 'gmf';
 
+/**
+ * @const
+ * @export
+ */
+gmf.BACKGROUNDLAYERGROUP_NAME = 'background';
 
 /**
  * @const

src/services/backgroundlayermgr.js

@@ -4,6 +4,7 @@ goog.provide('ngeo.BackgroundLayerMgr');
 
 goog.require('goog.asserts');
 goog.require('ngeo');
+goog.require('ngeo.LayerHelper');
 goog.require('ol.Observable');
 goog.require('ol.events');
 goog.require('ol.source.ImageWMS');
@@ -91,10 +92,12 @@ ol.inherits(ngeo.BackgroundEvent, ol.events.Event);
  * @extends {ol.Observable}
  * @constructor
  * @struct
+ * @param {ngeo.LayerHelper} ngeoLayerHelper Themes service.
+ * @ngInject
  * @ngdoc service
  * @ngname ngeoBackgroundLayerMgr
  */
-ngeo.BackgroundLayerMgr = function() {
+ngeo.BackgroundLayerMgr = function(ngeoLayerHelper) {
 
   ol.Observable.call(this);
 
@@ -104,6 +107,12 @@ ngeo.BackgroundLayerMgr = function() {
    * @private
    */
   this.mapUids_ = {};
+
+  /**
+   * @type {ngeo.LayerHelper}
+   * @private
+   */
+  this.ngeoLayerHelper_ = ngeoLayerHelper;
 };
 ol.inherits(ngeo.BackgroundLayerMgr, ol.Observable);
 
@@ -117,7 +126,7 @@ ol.inherits(ngeo.BackgroundLayerMgr, ol.Observable);
  */
 ngeo.BackgroundLayerMgr.prototype.get = function(map) {
   const mapUid = ol.getUid(map).toString();
-  return mapUid in this.mapUids_ ? map.getLayers().item(0) : null;
+  return mapUid in this.mapUids_ ? this.ngeoLayerHelper_.getGroupFromMap(map, gmf.BACKGROUNDLAYERGROUP_NAME).getLayers().item(0) : null;
 };
 
 
@@ -132,16 +141,22 @@ ngeo.BackgroundLayerMgr.prototype.get = function(map) {
 ngeo.BackgroundLayerMgr.prototype.set = function(map, layer) {
   const mapUid = ol.getUid(map).toString();
   const previous = this.get(map);
+  if (layer !== null) {
+    layer.setZIndex(-200);
+  }
+
+  const bgGroup = this.ngeoLayerHelper_.getGroupFromMap(map, gmf.BACKGROUNDLAYERGROUP_NAME);
+
   if (previous !== null) {
     goog.asserts.assert(mapUid in this.mapUids_);
     if (layer !== null) {
-      map.getLayers().setAt(0, layer);
+      bgGroup.getLayers().setAt(0, layer);
     } else {
-      map.getLayers().removeAt(0);
+      bgGroup.getLayers().removeAt(0);
       delete this.mapUids_[mapUid];
     }
   } else if (layer !== null) {
-    map.getLayers().insertAt(0, layer);
+    bgGroup.getLayers().insertAt(0, layer);
     this.mapUids_[mapUid] = true;
   }
 
@@ -150,6 +165,35 @@ ngeo.BackgroundLayerMgr.prototype.set = function(map, layer) {
   return previous;
 };
 
+/**
+ * Return the current background layer overlay of a given map, used by the opacity slider.
+ * `null` is returned if the map does not have an opacity background layer.
+ * @param {ol.Map} map Map.
+ * @return {ol.layer.Base} layer The opacity background layer.
+ * @export
+ */
+ngeo.BackgroundLayerMgr.prototype.getOpacityBgLayer = function(map) {
+  const mapUid = ol.getUid(map).toString();
+  return mapUid in this.mapUids_ ? this.ngeoLayerHelper_.getGroupFromMap(map, gmf.BACKGROUNDLAYERGROUP_NAME).getLayers().item(1) : null;
+};
+
+/**
+ * Set an background layer overlay, used by the opacity slider.
+ * @param {ol.Map} map The map.
+ * @param {ol.layer.Base} layer The opacity background layer.
+ */
+ngeo.BackgroundLayerMgr.prototype.setOpacityBgLayer = function(map, layer) {
+  layer.setOpacity(0);
+  layer.setZIndex(-100);
+  layer.setVisible(true);
+  const bgGroup = this.ngeoLayerHelper_.getGroupFromMap(map, gmf.BACKGROUNDLAYERGROUP_NAME);
+
+  const index = bgGroup.getLayers().getArray().indexOf(layer);
+  if (index === -1) {
+    bgGroup.getLayers().push(layer);
+  }
+};
+
 /**
  * @param {ol.Map} map The map.
  * @param {Object.<string, string>} dimensions The global dimensions object.