Merge pull request #3651 from camptocamp/merge_in_2.2

Merge 2.2 into master

contribs/gmf/apps/desktop/index.html

@@ -228,7 +228,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

@@ -257,8 +257,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>
@@ -417,9 +417,10 @@
               defaultFeatureNS: 'http://mapserver.gis.umn.edu/mapserver',
               defaultFeaturePrefix: 'feature'
             }));
+        module.constant('ngeoTilesPreloadingLimit', 0);
         module.constant('ngeoQueryOptions', {
           limit: 50
-        })
+        });
       })();
     </script>
   </body>

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

@@ -147,6 +147,12 @@ app.desktop_alt.Controller = function($scope, $injector, ngeoFile, gettext, $q)
   gettextCatalog.getString('Add a theme');
   gettextCatalog.getString('Add a sub theme');
   gettextCatalog.getString('Add a layer');
+
+  /**
+   * @type {string}
+   * @export
+   */
+  this.bgOpacityOptions = 'Test aus Olten';
 };
 ol.inherits(app.desktop_alt.Controller, gmf.controllers.AbstractDesktopController);
 

contribs/gmf/apps/mobile/index.html

@@ -116,7 +116,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

@@ -119,7 +119,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>
@@ -240,6 +239,7 @@
               defaultFeatureNS: 'http://mapserver.gis.umn.edu/mapserver',
               defaultFeaturePrefix: 'feature'
             }));
+        module.constant('ngeoTilesPreloadingLimit', 0);
        })();
     </script>
   </body>

contribs/gmf/examples/backgroundlayerselector.html

@@ -13,7 +13,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

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

contribs/gmf/less/contextualdata.less

@@ -4,5 +4,10 @@
 
   table {
     width: 100%;
+    tr {
+      td {
+        white-space: nowrap;
+      }
+    }
   }
 }

contribs/gmf/less/map.less

@@ -95,6 +95,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 {
@@ -108,6 +122,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/less/popover.less

@@ -6,6 +6,7 @@
 
 .popover {
   border-radius: 0;
+  z-index: @above-content-index;
   .popover-content {
     ul {
       margin-bottom: 0;

contribs/gmf/src/authentication/Service.js

@@ -21,12 +21,13 @@ gmf.authentication.Service = class extends ol.events.EventTarget {
 
   /**
    * @param {angular.$http} $http Angular http service.
+   * @param {angular.$injector} $injector Main injector.
    * @param {angular.Scope} $rootScope The directive's scope.
    * @param {string} authenticationBaseUrl URL to "authentication" web service.
    * @param {gmfx.User} gmfUser User.
    * @ngInject
    */
-  constructor($http, $rootScope, authenticationBaseUrl, gmfUser) {
+  constructor($http, $injector, $rootScope, authenticationBaseUrl, gmfUser) {
 
     super();
 
@@ -55,6 +56,16 @@ gmf.authentication.Service = class extends ol.events.EventTarget {
      */
     this.user_ = gmfUser;
 
+    /**
+      * Don't request a new user object from the back-end after
+      * logging out if the logged-in user's role has this role.
+      * @type {?string}
+      * @private
+      */
+    this.noReloadRole_ =  $injector.has('gmfAuthenticationNoReloadRole')
+      ? $injector.get('gmfAuthenticationNoReloadRole')
+      : null;
+
     this.load_();
   }
 
@@ -114,9 +125,11 @@ gmf.authentication.Service = class extends ol.events.EventTarget {
    * @export
    */
   logout() {
+    const noReload = this.user_['role_name'] === this.noReloadRole_;
     const url = `${this.baseUrl_}/${gmf.authentication.Service.RouteSuffix.LOGOUT}`;
-    return this.$http_.get(url, {withCredentials: true}).then(
-      this.resetUser_.bind(this));
+    return this.$http_.get(url, {withCredentials: true}).then(() => {
+      this.resetUser_(noReload);
+    });
   }
 
   /**
@@ -191,15 +204,20 @@ gmf.authentication.Service = class extends ol.events.EventTarget {
 
   /**
    * @private
+   * @param {boolean} noReload Don't request a new user object from
+   * the back-end after logging out, defaults to false.
    */
-  resetUser_() {
+  resetUser_(noReload) {
+    noReload = noReload || false;
     for (const key in this.user_) {
       this.user_[key] = null;
     }
     /** @type {gmfx.AuthenticationEvent} */
     const event = new ngeo.CustomEvent('logout', {user: this.user_});
     this.dispatchEvent(event);
-    this.load_();
+    if (!noReload) {
+      this.load_();
+    }
   }
 };
 

contribs/gmf/src/backgroundlayerselector/component.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/backgroundlayerselector/component.js

@@ -1,7 +1,6 @@
 goog.provide('gmf.backgroundlayerselector.component');
 
 goog.require('gmf'); // nowebpack
-goog.require('goog.asserts');
 goog.require('gmf.theme.Themes');
 goog.require('ngeo.map.BackgroundLayerMgr');
 goog.require('ol.events');
@@ -54,18 +53,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.
  *
@@ -75,8 +73,8 @@ function gmfBackgroundlayerselectorTemplateUrl($element, $attrs, gmfBackgroundla
 gmf.backgroundlayerselector.component.component_ = {
   controller: 'GmfBackgroundlayerselectorController as ctrl',
   bindings: {
-    'dimensions': '=gmfBackgroundlayerselectorDimensions',
     'map': '=gmfBackgroundlayerselectorMap',
+    'opacityOptions': '=gmfBackgroundlayerOpacityOptions',
     'select': '&?gmfBackgroundlayerselectorSelect'
   },
   templateUrl: gmfBackgroundlayerselectorTemplateUrl
@@ -101,16 +99,16 @@ gmf.backgroundlayerselector.component.component('gmfBackgroundlayerselector',
 gmf.backgroundlayerselector.component.Controller_ = 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.
@@ -131,6 +129,12 @@ gmf.backgroundlayerselector.component.Controller_ = function($scope, ngeoBackgro
    */
   this.bgLayers;
 
+  /**
+   * @type {ol.layer.Base}
+   * @export
+   */
+  this.opacityLayer;
+
   /**
    * @type {!gmf.theme.Themes}
    * @private
@@ -167,7 +171,6 @@ gmf.backgroundlayerselector.component.Controller_ = function($scope, ngeoBackgro
  * Initialise the controller.
  */
 gmf.backgroundlayerselector.component.Controller_.prototype.$onInit = function() {
-  goog.asserts.assert(this.dimensions, 'The dimensions object is required');
   this.handleThemesChange_();
 };
 
@@ -179,9 +182,34 @@ gmf.backgroundlayerselector.component.Controller_.prototype.$onInit = function()
 gmf.backgroundlayerselector.component.Controller_.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.backgroundlayerselector.component.Controller_.prototype.getSetBgLayerOpacity = function(val) {
+  if (val) {
+    this.opacityLayer.setOpacity(val);
+  }
+  return this.opacityLayer.getOpacity();
+};
 
 /**
  * @param {ol.layer.Base} layer Layer.
@@ -196,6 +224,13 @@ gmf.backgroundlayerselector.component.Controller_.prototype.setLayer = function(
   }
 };
 
+/**
+ * Set a background layer overlay, used by the opacity slider.
+ * @param {ol.layer.Base} layer The opacity background layer.
+ */
+gmf.backgroundlayerselector.component.Controller_.prototype.setOpacityBgLayer = function(layer) {
+  this.backgroundLayerMgr_.setOpacityBgLayer(this.map, layer);
+};
 
 /**
  * @private

contribs/gmf/src/controllers/AbstractAppController.js

@@ -659,7 +659,7 @@ gmf.controllers.AbstractAppController.prototype.setDefaultBackground_ = function
     // get the background from the permalink
     layer = this.permalink_.getBackgroundLayer(layers);
 
-    if (!layer) {
+    if (!layer && this.gmfUser.functionalities) {
       // get the background from the user settings
       layer = gmf.controllers.AbstractAppController.getLayerByLabels(layers, this.gmfUser.functionalities.default_basemap);
     }

contribs/gmf/src/gmf.js

@@ -6,6 +6,12 @@ goog.provide('gmf');
  */
 gmf.baseModuleTemplateUrl = 'gmf'; // nowebpack
 
+/**
+ * @const
+ * @export
+ */
+gmf.BACKGROUNDLAYERGROUP_NAME = 'background';
+
 /**
  * @const
  * @export