Merge pull request #2898 from camptocamp/merge_2.2

Merge 2.2 into master

contribs/gmf/less/mobile-nav.less

@@ -232,7 +232,7 @@ nav.gmf-mobile-nav-right {
 
 // For small devices (in portrait mode) we want the navigation menus to take
 // 90% of the viewport width
-@media (max-width: @screen-xs) {
+@media (max-width: @screen-xs-max) {
   main {
     .gmf-mobile-nav-left-is-visible & {
       transform: translateX(90vw);

contribs/gmf/less/mobile.less

@@ -123,7 +123,7 @@ button[ngeo-mobile-geolocation] {
   z-index: 2;
 }
 
-// Overrides for tablet devices
+// Overrides for tablet devices and up
 @media (min-width: @screen-sm-min) {
   .gmf-mobile-measure {
     right: 2 * @app-margin + @map-tools-size;

contribs/gmf/less/search.less

@@ -55,7 +55,6 @@ gmf-search {
   }
   .form-control {
     box-shadow: none;
-    border: none;
     height: 100%;
     padding: @half-app-margin @map-tools-size;
     border: 1px solid @border-color;
@@ -111,8 +110,8 @@ gmf-search {
   }
 }
 
-// Overrides for small browser widths
-@media (max-width: @screen-sm-min) {
+// Overrides for small browser widths only
+@media (max-width: @screen-xs-max) {
   gmf-search {
     .gmf-search {
       width: 100%;
@@ -125,7 +124,7 @@ gmf-search {
 
 @search-width: 6 * @map-tools-size;
 
-// Overrides for tablet devices
+// Overrides for tablet devices and up
 @media (min-width: @screen-sm-min) {
   gmf-search {
     .gmf-search {

contribs/gmf/less/searchmobile.less

@@ -1,20 +1,19 @@
 @import "search.less";
 
-// Overrides for tablet devices
+// Overrides for tablet devices and up
 @media (min-width: @screen-sm-min) {
   gmf-search {
     left: 2 * @app-margin + @map-tools-size;
   }
 }
 
-// Overrides for phone devices
-@media (max-width: @screen-sm-min) {
+// Overrides for phone devices only
+@media (max-width: @screen-xs-max) {
   gmf-search {
     left: 0;
     right: 0;
     margin: 0 @app-margin + @map-tools-size;
     .gmf-search {
-      border-width: 1px 0;
       width: 100%;
     }
     .tt-menu {

contribs/gmf/src/directives/layertree.js

@@ -106,6 +106,7 @@ gmf.module.component('gmfLayertree', gmf.layertreeComponent);
 
 
 /**
+ * @param {angular.JQLite} $element Element.
  * @param {!angular.$http} $http Angular http service.
  * @param {!angular.$sce} $sce Angular sce service.
  * @param {!angular.Scope} $scope Angular scope.
@@ -127,7 +128,7 @@ gmf.module.component('gmfLayertree', gmf.layertreeComponent);
  * @ngdoc controller
  * @ngname gmfLayertreeController
  */
-gmf.LayertreeController = function($http, $sce, $scope, ngeoCreatePopup,
+gmf.LayertreeController = function($element, $http, $sce, $scope, ngeoCreatePopup,
   ngeoLayerHelper, gmfDataSourceBeingFiltered, gmfPermalink, gmfTreeManager,
   gmfSyncLayertreeMap, ngeoSyncArrays, ngeoWMSTime, gmfThemes) {
 
@@ -259,6 +260,11 @@ gmf.LayertreeController = function($http, $sce, $scope, ngeoCreatePopup,
    * @private
    */
   this.ngeoSyncArrays_ = ngeoSyncArrays;
+
+  // enter digest cycle on node collapse
+  $element.on('shown.bs.collapse', () => {
+    this.scope_.$apply();
+  });
 };
 
 

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

@@ -152,9 +152,8 @@ <h4 class="modal-title">
         {{'Password forgotten?' | translate}}
       </h4>
     </div>
-    <div class="modal-body">
-      {{ ::authCtrl.translate(
-      'A new password has just been sent to you by e-mail.') }}
+    <div class="modal-body" translate>
+      A new password has just been sent to you by e-mail.
     </div>
     <div class="modal-footer">
       <button type="button"

contribs/gmf/src/services/themesservice.js

@@ -259,13 +259,6 @@ gmf.Themes.prototype.getBgLayers = function(appDimensions) {
    * @return {angular.$q.Promise.<ol.layer.Base>|ol.layer.Base} the created layer.
    */
   const layerLayerCreationFn = function(ogcServers, gmfLayer) {
-    // Overwrite conflicting server dimensions with application ones
-    for (const dimkey in gmfLayer.dimensions) {
-      if (appDimensions[dimkey] !== undefined) {
-        gmfLayer.dimensions[dimkey] = appDimensions[dimkey];
-      }
-    }
-
     if (gmfLayer.type === 'WMTS') {
       const gmfLayerWMTS = /** @type gmfThemes.GmfLayerWMTS */ (gmfLayer);
       goog.asserts.assert(gmfLayerWMTS.url, 'Layer URL is required');

examples/scaleselector.html

@@ -12,7 +12,7 @@
       #map {
         height: 400px;
       }
-      app-scaleselector {
+      .scaleselector {
         display: inline-block;
         min-width: 160px;
       }
@@ -22,7 +22,10 @@
     <div id="map" ngeo-map="mainCtrl.map"></div>
     <label>
       Select scale:
-      <app-scaleselector app-scaleselector-map="::mainCtrl.map"></app-scaleselector>
+      <div class="scaleselector"
+           ngeo-scaleselector="::mainCtrl.scales"
+           ngeo-scaleselector-map="::mainCtrl.map"
+           ngeo-scaleselector-options="::mainCtrl.options"></div>
     </label>
     <div>
       <p id="desc">This example shows how to write an application-specific directive (<code>app-scaleselecor</code>) based on <code><a href="../apidoc/ngeo.scaleselectorDirective.html" title="Read our documentation">ngeo-scaleselector</a></code>to create a scale selector.</p>

examples/scaleselector.js

@@ -17,58 +17,37 @@ goog.require('ol.source.OSM');
 app.module = angular.module('app', ['ngeo']);
 
 
-/**
- * The application-specific scale selector directive, based on the
- * ngeo-scaleselector directive.
- *
- * @return {angular.Directive} Directive Definition Object.
- * @ngInject
- */
-app.scaleselectorDirective = function() {
-  return {
-    restrict: 'E',
-    scope: {
-      'map': '=appScaleselectorMap'
-    },
-    template: '<div ngeo-scaleselector="ctrl.scales" ' +
-        'ngeo-scaleselector-map="ctrl.map" ' +
-        'ngeo-scaleselector-options="ctrl.options"></div>',
-    bindToController: true,
-    controller: 'AppScaleselectorController as ctrl'
-  };
-};
-
-
-app.module.directive('appScaleselector', app.scaleselectorDirective);
-
-
 /**
  * @constructor
- * @param {angular.$sce} $sce Angular sce service.
+ * @param {angular.Scope} $scope Controller scope.
  * @ngInject
  */
-app.ScaleselectorController = function($sce) {
+app.MainController = function($scope) {
 
   /**
    * @type {ol.Map}
    * @export
    */
-  this.map;
+  this.map = new ol.Map({
+    layers: [
+      new ol.layer.Tile({
+        source: new ol.source.OSM()
+      })
+    ],
+    view: new ol.View({
+      center: [-10635142.37, 4813698.29],
+      zoom: 1,
+      maxZoom: 4
+    })
+  });
 
   /**
    * The zoom level/scale map object for the ngeoScaleselector directive.
-   * The values need to be trusted as HTML.
-   * @type {Object.<string, string>}
+   * @type {!Array.<number>}
    * @const
    * @export
    */
-  this.scales = {
-    '0': $sce.trustAsHtml('1&nbsp;:&nbsp;200\'000\'000'),
-    '1': $sce.trustAsHtml('1&nbsp;:&nbsp;100\'000\'000'),
-    '2': $sce.trustAsHtml('1&nbsp;:&nbsp;50\'000\'000'),
-    '3': $sce.trustAsHtml('1&nbsp;:&nbsp;25\'000\'000'),
-    '4': $sce.trustAsHtml('1&nbsp;:&nbsp;12\'000\'000')
-  };
+  this.scales = [200000000, 100000000, 50000000, 25000000, 12000000];
 
   /**
    * Use the "dropup" variation of the Bootstrap dropdown.
@@ -78,35 +57,6 @@ app.ScaleselectorController = function($sce) {
   this.options = {
     'dropup': true
   };
-};
-
-app.module.controller('AppScaleselectorController',
-  app.ScaleselectorController);
-
-
-/**
- * @constructor
- * @param {angular.Scope} $scope Controller scope.
- * @ngInject
- */
-app.MainController = function($scope) {
-
-  /**
-   * @type {ol.Map}
-   * @export
-   */
-  this.map = new ol.Map({
-    layers: [
-      new ol.layer.Tile({
-        source: new ol.source.OSM()
-      })
-    ],
-    view: new ol.View({
-      center: [-10635142.37, 4813698.29],
-      zoom: 1,
-      maxZoom: 4
-    })
-  });
 
 };
 

package.json

@@ -33,7 +33,7 @@
     "async": "2.5.0",
     "bootstrap": "3.3.7",
     "clean-css-cli": "4.1.7",
-    "closure-util": "git://github.com/camptocamp/closure-util#487fac6",
+    "closure-util": "camptocamp/closure-util#487fac6",
     "console-control-strings": "1.1.0",
     "corejs-typeahead": "1.1.1",
     "coveralls": "2.13.1",

src/directives/partials/scaleselector.html

@@ -1,11 +1,11 @@
 <div class="btn-group btn-block" ng-class="::{'dropup': scaleselectorCtrl.options.dropup}">
   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
-    <span ng-bind-html="scaleselectorCtrl.currentScale|ngeoScalify"></span>&nbsp;<i class="caret"></i>
+    <span ng-bind-html="scaleselectorCtrl.currentScale | ngeoScalify | ngeoTrustHtml"></span>&nbsp;<i class="caret"></i>
   </button>
   <ul class="dropdown-menu btn-block" role="menu">
     <li ng-repeat="zoomLevel in ::scaleselectorCtrl.zoomLevels">
       <a href ng-click="scaleselectorCtrl.changeZoom(zoomLevel)"
-         ng-bind-html="::scaleselectorCtrl.getScale(zoomLevel)|ngeoScalify">
+         ng-bind-html="::scaleselectorCtrl.getScale(zoomLevel) | ngeoScalify | ngeoTrustHtml">
       </a>
     </li>
   </ul>

src/directives/scaleselector.js

@@ -37,14 +37,10 @@ ngeo.ScaleselectorOptions;
  *     </div>
  *
  * The expression passed to the ngeo-scaleselector attribute should return an
- * object of this form:
+ * array of this form:
  *
  *    [20000, 10000, 5000, 2500]
  *
- * This object's keys are strings representing zoom levels, the values are
- * strings representing scales. The directive's partial uses ng-bind-html so
- * the scale strings should be trusted.
- *
  * That directive's partial uses Bootstrap's `dropdown` and `dropdown-menu`
  * classes, and `data-toggle="dropdown"`, so it is meant to be used with
  * Bootstrap's "dropdown" jQuery plugin.
@@ -61,7 +57,7 @@ ngeo.ScaleselectorOptions;
  *
  * See our live example: [../examples/scaleselector.html](../examples/scaleselector.html)
  *
- * @htmlAttribute {Object.<string, string>} ngeo-scaleselector-scales The available scales (key: scale, value: display text).
+ * @htmlAttribute {!Array.<number>} ngeo-scaleselector The available scales.
  * @htmlAttribute {ol.Map} ngeo-scaleselector-map The map.
  * @param {string|function(!angular.JQLite=, !angular.Attributes=)}
  *     ngeoScaleselectorTemplateUrl Template URL for the directive.