Fix 617 - Iframe API new app

Makefile

@@ -17,7 +17,7 @@ GMF_TEST_JS_FILES := $(shell find contribs/gmf/test/ -type f -name '*.js')
 GMF_EXAMPLES_HTML_FILES := $(shell ls -1 contribs/gmf/examples/*.html)
 GMF_EXAMPLES_JS_FILES := $(GMF_EXAMPLES_HTML_FILES:.html=.js)
 
-GMF_APPS += mobile desktop desktop_alt mobile_alt oeedit oeview
+GMF_APPS += mobile desktop desktop_alt iframe_api mobile_alt oeedit oeview
 GMF_APPS_JS_FILES = $(shell find contribs/gmf/apps/ -type f -name '*.js')
 GMF_APPS_PARTIALS_FILES = $(shell find contribs/gmf/apps/ -type f -name '*.html')
 GMF_APPS_ALL_FILES = $(shell find contribs/gmf/apps/ -type f) $(GMF_ALL_SRC_FILES)
@@ -249,6 +249,7 @@ gh-pages: .build/python-venv.timestamp
 		--app 'Desktop application' apps/desktop.html 'The desktop example application for GeoMapFish.' \
 		--app 'Alternate mobile application' apps/mobile_alt.html 'An alternate mobile example application for GeoMapFish.' \
 		--app 'Alternate desktop application' apps/desktop_alt.html 'An alternate desktop example application for GeoMapFish.' \
+		--app 'Iframe api application' apps/iframe_api.html 'A desktop application for GeoMapFish without any tools that can be used within an iframe.' \
 		--app 'Object editing viewer' apps/oeview.html 'An example application for viewing an object.' \
 		--app 'Object editing editor' apps/oeedit.html 'An example application for editing an object.' \
 		$< $(GMF_EXAMPLES_HTML_FILES) > $@

contribs/gmf/apps/iframe_api/Controller.js

@@ -0,0 +1,66 @@
+/**
+ * @module app.iframe_api.Controller
+ */
+/**
+ * Application entry point.
+ *
+ * This file includes `goog.require`'s for all the components/directives used
+ * by the HTML page and the controller to provide the configuration.
+ */
+
+import './sass/iframe_api.scss';
+import gmfControllersAbstractAPIController from 'gmf/controllers/AbstractAPIController.js';
+import appBase from '../appmodule.js';
+import ngeoProjEPSG2056 from 'ngeo/proj/EPSG2056.js';
+import ngeoProjEPSG21781 from 'ngeo/proj/EPSG21781.js';
+import * as olBase from 'ol/index.js';
+import Raven from 'raven-js/src/raven.js';
+import RavenPluginsAngular from 'raven-js/plugins/angular.js';
+
+if (!window.requestAnimationFrame) {
+  alert('Your browser is not supported, please update it or use another one. You will be redirected.\n\n'
+    + 'Votre navigateur n\'est pas supporté, veuillez le mettre à jour ou en utiliser un autre. Vous allez être redirigé.\n\n'
+    + 'Ihr Browser wird nicht unterstützt, bitte aktualisieren Sie ihn oder verwenden Sie einen anderen. Sie werden weitergeleitet.');
+  window.location = 'http://geomapfish.org/';
+}
+
+/**
+ * @param {angular.Scope} $scope Scope.
+ * @param {angular.$injector} $injector Main injector.
+ * @constructor
+ * @extends {gmf.controllers.AbstractAPIController}
+ * @ngInject
+ * @export
+ */
+const exports = function($scope, $injector) {
+  gmfControllersAbstractAPIController.call(this, {
+    srid: 21781,
+    mapViewConfig: {
+      center: [632464, 185457],
+      zoom: 3,
+      resolutions: [250, 100, 50, 20, 10, 5, 2, 1, 0.5, 0.25, 0.1, 0.05]
+    }
+  }, $scope, $injector);
+
+  this.ngeoProjEPSG2056 = ngeoProjEPSG2056;
+  this.ngeoProjEPSG21781 = ngeoProjEPSG21781;
+
+  if ($injector.has('sentryUrl')) {
+    const options = $injector.has('sentryOptions') ? $injector.get('sentryOptions') : undefined;
+    const raven = new Raven();
+    raven.config($injector.get('sentryUrl'), options)
+      .addPlugin(RavenPluginsAngular)
+      .install();
+  }
+};
+
+olBase.inherits(exports, gmfControllersAbstractAPIController);
+
+exports.module = angular.module('Appiframe_api', [
+  appBase.module.name,
+  gmfControllersAbstractAPIController.module.name,
+]);
+
+exports.module.controller('IframeAPIController', exports);
+
+export default exports;

contribs/gmf/apps/iframe_api/contextualdata.html

@@ -0,0 +1,43 @@
+<table>
+  <tr>
+    <td translate>
+      Swiss grid (LV03)
+    </td>
+    <td>
+      {{coord_21781|ngeoNumberCoordinates:0:'{x} / {y}'}}
+    </td>
+  </tr>
+  <tr>
+    <td translate>
+      Wgs Coord.
+    </td>
+    <td>
+      {{coord_4326|ngeoNumberCoordinates:2:'{y} / {x}'}}
+    </td>
+  </tr>
+  <tr>
+    <td translate>
+      Wgs Coord. DMS
+    </td>
+    <td>
+      {{coord_4326|ngeoDMSCoordinates:0:'{y} {x}'}}
+    </td>
+  </tr>
+  <tr>
+    <td translate>
+      Elevation (SRTM)
+    </td>
+    <td>
+      {{srtm | number}} [m]
+    </td>
+  </tr>
+  <tr>
+    <td translate>
+      Elevation (Aster)
+    </td>
+    <td>
+      {{aster | number}} [m]
+    </td>
+  </tr>
+</table>
+<a ng-href="https://maps.google.ch/?ie=UTF8&ll={{coord_4326_northern}},{{coord_4326_eastern}}&layer=c&cbll={{coord_4326_northern}},{{coord_4326_eastern}}&cbp=12,57.78,,0,8.1" target="_blank">Google StreetView</a>

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

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html
+  lang="{{mainCtrl.lang}}"
+  ng-app="Appiframe_api"
+  ng-controller="IframeAPIController as mainCtrl"
+  ng-strict-di>
+  <head>
+    <title ng-bind-template="{{'Iframe API Application'|translate}}">GeoMapFish</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="shortcut icon" href="<%=require("./image/favicon.ico")%>" />
+    <% for (var css in htmlWebpackPlugin.files.css) { %>
+    <link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
+    <% } %>
+  </head>
+  <body>
+  <div ng-show="mainCtrl.loading" class="loading-mask">
+    <i class="fa fa-spinner fa-spin spinner-loading-mask"></i>
+  </div>
+    <main>
+      <div class="gmf-app-map-container" ng-class="{'gmf-app-infobar-active': mainCtrl.showInfobar}">
+        <ngeo-displaywindow
+          content="mainCtrl.displaywindowContent"
+          desktop="true"
+          height="mainCtrl.displaywindowHeight"
+          open="mainCtrl.displaywindowOpen"
+          title="mainCtrl.displaywindowTitle"
+          url="mainCtrl.displaywindowUrl"
+          width="mainCtrl.displaywindowWidth"
+        ></ngeo-displaywindow>
+        <div class="gmf-app-map-bottom-controls">
+          <div class="gmf-backgroundlayerbutton btn-group dropup">
+            <button
+                class="btn btn-default dropdown-toggle"
+                data-toggle="dropdown">
+              <img src="<%=require('./image/background-layer-button.png')%>" alt="" />
+            </button>
+            <gmf-backgroundlayerselector
+              gmf-backgroundlayerselector-map="::mainCtrl.map"
+              class="dropdown-menu">
+            </gmf-backgroundlayerselector>
+          </div>
+          <div class="gmf-app-map-messages">
+            <gmf-disclaimer
+              gmf-disclaimer-map="::mainCtrl.map">
+            </gmf-disclaimer>
+          </div>
+          <gmf-displayquerywindow
+            gmf-displayquerywindow-draggable-containment="::mainCtrl.displaywindowDraggableContainment"
+            gmf-displayquerywindow-featuresstyle="::mainCtrl.queryFeatureStyle"
+            gmf-displayquerywindow-desktop="true">
+          </gmf-displayquerywindow>
+        </div>
+        <gmf-map
+          class="gmf-map"
+          gmf-map-map="mainCtrl.map"
+          gmf-map-manage-resize="mainCtrl.manageResize"
+          gmf-map-resize-transition="mainCtrl.resizeTransition"
+          ngeo-map-query=""
+          ngeo-map-query-map="::mainCtrl.map"
+          ngeo-map-query-active="mainCtrl.queryActive"
+          ngeo-map-query-autoclear="mainCtrl.queryAutoClear"
+          ngeo-bbox-query=""
+          ngeo-bbox-query-map="::mainCtrl.map"
+          ngeo-bbox-query-active="mainCtrl.queryActive"
+          ngeo-bbox-query-autoclear="mainCtrl.queryAutoClear">
+
+          <div id="scaleline"></div>
+        </gmf-map>
+        <gmf-layertree
+          gmf-layertree-dimensions="mainCtrl.dimensions"
+          gmf-layertree-map="::mainCtrl.map">
+        </gmf-layertree>
+      </div>
+      <ngeo-modal ng-model="mainCtrl.modalShareShown">
+        <gmf-share ng-if="mainCtrl.modalShareShown" gmf-share-email="true"></gmf-share>
+      </ngeo-modal>
+      <ngeo-modal
+          ngeo-modal-closable="false"
+          ng-model="mainCtrl.userMustChangeItsPassword()"
+          ng-model-options="{getterSetter: true}">
+        <div class="modal-header">
+          <h4 class="modal-title">
+            {{'You must change your password' | translate}}
+          </h4>
+        </div>
+        <div class="modal-body">
+          <gmf-authentication
+            gmf-authentication-force-password-change="::true">
+          </gmf-authentication>
+        </div>
+      </ngeo-modal>
+    </main>
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,default-3.6,Array.prototype.includes"></script>
+    <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
+    <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
+    <% } %>
+    <script>
+    document.write(
+      '<script src="https://geomapfish-demo-dc.camptocamp.com/2.4/dynamic.js?' +
+      'interface=iframe_api&' +
+      'query=' + encodeURIComponent(document.location.search) +
+      '"><' + '/script>');
+    </script>
+  </body>
+</html>

contribs/gmf/apps/iframe_api/sass/iframe_api.scss

@@ -0,0 +1,29 @@
+@import '~gmf/controllers/desktop.scss';
+
+body {
+  padding: 0;
+}
+
+.gmf-app-map-container .gmf-displayquerywindow,
+.ngeo-displaywindow {
+  bottom: $app-margin;
+  left: auto;
+  right: $app-margin;
+}
+
+.gmf-app-map-messages {
+  bottom: $app-margin + 2rem;
+}
+
+.gmf-backgroundlayerbutton {
+  bottom: $app-margin + 2rem;
+}
+
+gmf-layertree {
+  display: none;
+}
+
+.ol-scale-line {
+  bottom: $app-margin;
+  left: $app-margin;
+}

contribs/gmf/src/controllers/AbstractAPIController.js

@@ -0,0 +1,93 @@
+/**
+ * @module gmf.controllers.AbstractAPIController
+ */
+import gmfControllersAbstractAppController from 'gmf/controllers/AbstractAppController.js';
+import ngeoQueryBboxQueryComponent from 'ngeo/query/bboxQueryComponent.js';
+import ngeoMapResizemap from 'ngeo/map/resizemap.js';
+import * as olBase from 'ol/index.js';
+import * as olProj from 'ol/proj.js';
+import * as olObj from 'ol/obj.js';
+import olMap from 'ol/Map.js';
+import olView from 'ol/View.js';
+import olControlScaleLine from 'ol/control/ScaleLine.js';
+import olControlZoom from 'ol/control/Zoom.js';
+import olControlRotate from 'ol/control/Rotate.js';
+import * as olInteraction from 'ol/interaction.js';
+
+/**
+ * API application abstract controller.
+ *
+ * This file includes `goog.require`'s for desktop/api components/directives used
+ * by the HTML page and the controller to provide the configuration.
+ *
+ * @param {gmfx.Config} config A part of the application config.
+ * @param {angular.Scope} $scope Scope.
+ * @param {angular.$injector} $injector Main injector.
+ * @constructor
+ * @extends {gmf.controllers.AbstractAppController}
+ * @ngdoc controller
+ * @ngInject
+ * @export
+ */
+const exports = function(config, $scope, $injector) {
+
+  const viewConfig = {
+    projection: olProj.get(`EPSG:${config.srid || 21781}`)
+  };
+  olObj.assign(viewConfig, config.mapViewConfig || {});
+
+  const arrow = gmfControllersAbstractAppController.prototype.getLocationIcon();
+
+  /**
+   * @type {ol.Map}
+   * @export
+   */
+  this.map = new olMap({
+    pixelRatio: config.mapPixelRatio,
+    layers: [],
+    view: new olView(viewConfig),
+    controls: config.mapControls || [
+      new olControlScaleLine({
+        target: document.getElementById('scaleline')
+      }),
+      new olControlZoom({
+        zoomInTipLabel: '',
+        zoomOutTipLabel: ''
+      }),
+      new olControlRotate({
+        label: arrow,
+        tipLabel: ''
+      })
+    ],
+    interactions: config.mapInteractions || olInteraction.defaults({
+      pinchRotate: true,
+      altShiftDragRotate: true
+    }),
+    loadTilesWhileAnimating: true,
+    loadTilesWhileInteracting: true
+  });
+
+  gmfControllersAbstractAppController.call(this, config, $scope, $injector);
+};
+
+olBase.inherits(exports, gmfControllersAbstractAppController);
+
+
+exports.module = angular.module('GmfAbstractAPIControllerModule', [
+  gmfControllersAbstractAppController.module.name,
+  ngeoMapResizemap.name,
+  ngeoQueryBboxQueryComponent.name
+]);
+
+exports.module.controller(
+  'AbstractAPIController',
+  exports);
+
+exports.module.value('isDesktop', true);
+
+exports.module.value('ngeoQueryOptions', {
+  'limit': 20
+});
+
+
+export default exports;