Get setting from JSON

No inline script No JavaScript on server side
camptocamp · Dec 6, 2018 · 26431be · 26431be
1 parent 75636ff
commit 26431be
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 48 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -0,0 +1,9 @@
+# 2.4
+
+For the GeoMapFish applications we must not anymore to add the dynamic.js in the application HTML file
+and the ng-app, but we needs to add the following metadata:
+```
+<meta name="dynamicUrl" content="<application_url>/dynamic.json">
+<meta name="interface" content="<interface_name>">
+```
+If you use the one of the abstract controllers the bootstrap will be done by `gmf/controllers/bootstrap.js`.
diff --git a/contribs/gmf/apps/desktop/index.html.ejs b/contribs/gmf/apps/desktop/index.html.ejs
@@ -1,9 +1,11 @@
 <!DOCTYPE html>
-<html lang="{{mainCtrl.lang}}" ng-app="Appdesktop" ng-controller="DesktopController as mainCtrl" ng-strict-di>
+<html lang="{{mainCtrl.lang}}" ng-controller="DesktopController as mainCtrl" ng-strict-di>
   <head>
     <title ng-bind-template="{{'Desktop Application'|translate}}">GeoMapFish</title>
     <meta charset="utf-8">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <meta name="dynamicUrl" content="https://geomapfish-demo-dc.camptocamp.com/2.4/dynamic.json">
+    <meta name="interface" content="desktop">
     <link rel="shortcut icon" href="<%=require("./image/favicon.ico")%>" />
     <% for (var css in htmlWebpackPlugin.files.css) { %>
     <link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
@@ -314,12 +316,5 @@
     <% 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=desktop&' +
-      'query=' + encodeURIComponent(document.location.search) +
-      '"><' + '/script>');
-    </script>
   </body>
 </html>
diff --git a/contribs/gmf/apps/desktop_alt/index.html.ejs b/contribs/gmf/apps/desktop_alt/index.html.ejs
@@ -1,9 +1,11 @@
 <!DOCTYPE html>
-<html lang="{{mainCtrl.lang}}" ng-app="Appdesktop_alt" ng-controller="AlternativeDesktopController as mainCtrl" ng-strict-di>
+<html lang="{{mainCtrl.lang}}" ng-controller="AlternativeDesktopController as mainCtrl" ng-strict-di>
   <head>
     <title ng-bind-template="{{'Alternative Desktop Application'|translate}}">GeoMapFish</title>
     <meta charset="utf-8">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <meta name="dynamicUrl" content="https://geomapfish-demo-dc.camptocamp.com/2.4/dynamic.json">
+    <meta name="interface" content="desktop_alt">
     <link rel="shortcut icon" href="<%=require("./image/favicon.ico")%>" />
     <% for (var css in htmlWebpackPlugin.files.css) { %>
     <link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">

diff --git a/contribs/gmf/apps/iframe_api/index.html.ejs b/contribs/gmf/apps/iframe_api/index.html.ejs
@@ -8,6 +8,8 @@
     <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">
+    <meta name="dynamicUrl" content="https://geomapfish-demo-dc.camptocamp.com/2.4/dynamic.json">
+    <meta name="interface" content="iframe_api">
     <link rel="shortcut icon" href="<%=require("./image/favicon.ico")%>" />
     <% for (var css in htmlWebpackPlugin.files.css) { %>
     <link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
@@ -95,12 +97,5 @@
     <% 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>
diff --git a/contribs/gmf/apps/mobile/index.html.ejs b/contribs/gmf/apps/mobile/index.html.ejs
@@ -1,11 +1,13 @@
 <!DOCTYPE html>
-<html lang="{{mainCtrl.lang}}" ng-app="Appmobile" ng-controller="MobileController as mainCtrl" ng-strict-di>
+<html lang="{{mainCtrl.lang}}" ng-controller="MobileController as mainCtrl" ng-strict-di>
   <head>
     <title ng-bind-template="{{'Mobile Application'|translate}}">GeoMapFish</title>
     <meta charset="utf-8">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="dynamicUrl" content="https://geomapfish-demo-dc.camptocamp.com/2.4/dynamic.json">
+    <meta name="interface" content="mobile">
     <link rel="shortcut icon" href="<%=require("./image/favicon.ico")%>" />
     <% for (var css in htmlWebpackPlugin.files.css) { %>
     <link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
@@ -183,12 +185,5 @@
     <% 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=mobile&' +
-      'query=' + encodeURIComponent(document.location.search) +
-      '"><' + '/script>');
-    </script>
   </body>
 </html>
diff --git a/contribs/gmf/apps/mobile_alt/index.html.ejs b/contribs/gmf/apps/mobile_alt/index.html.ejs
@@ -1,11 +1,13 @@
 <!DOCTYPE html>
-<html lang="{{mainCtrl.lang}}" ng-app="Appmobile_alt" ng-controller="AlternativeMobileController as mainCtrl" ng-strict-di>
+<html lang="{{mainCtrl.lang}}" ng-controller="AlternativeMobileController as mainCtrl" ng-strict-di>
   <head>
     <title ng-bind-template="{{'Alternative Mobile Application'|translate}}">GeoMapFish</title>
     <meta charset="utf-8">
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="dynamicUrl" content="https://geomapfish-demo-dc.camptocamp.com/2.4/dynamic.json">
+    <meta name="interface" content="mobile_alt">
     <link rel="shortcut icon" href="<%=require("./image/favicon.ico")%>" />
     <% for (var css in htmlWebpackPlugin.files.css) { %>
     <link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
@@ -192,12 +194,5 @@
     <% 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=mobile_alt&' +
-      'query=' + encodeURIComponent(document.location.search) +
-      '"><' + '/script>');
-    </script>
   </body>
 </html>
diff --git a/contribs/gmf/apps/oeedit/index.html.ejs b/contribs/gmf/apps/oeedit/index.html.ejs
@@ -1,8 +1,11 @@
 <!DOCTYPE html>
-<html lang="{{mainCtrl.lang}}" ng-app="Appoeedit" ng-controller="OEEditController as mainCtrl" ng-strict-di>
+<html lang="{{mainCtrl.lang}}" ng-controller="OEEditController as mainCtrl" ng-strict-di>
   <head>
     <title ng-bind-template="{{'ObjectEditing - Edit Application'|translate}}">GeoMapFish</title>
     <meta charset="utf-8">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <meta name="dynamicUrl" content="https://geomapfish-demo-dc.camptocamp.com/2.4/dynamic.json">
+    <meta name="interface" content="oeedit">
     <link rel="shortcut icon" href="<%=require("./image/favicon.ico")%>" />
     <% for (var css in htmlWebpackPlugin.files.css) { %>
     <link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
@@ -173,12 +176,5 @@
     <% 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=oeedit&' +
-      'query=' + encodeURIComponent(document.location.search) +
-      '"><' + '/script>');
-    </script>
   </body>
 </html>
diff --git a/contribs/gmf/apps/oeview/index.html.ejs b/contribs/gmf/apps/oeview/index.html.ejs
@@ -1,8 +1,11 @@
 <!DOCTYPE html>
-<html lang="{{mainCtrl.lang}}" ng-app="Appoeview" ng-controller="DesktopController as mainCtrl" ng-strict-di>
+<html lang="{{mainCtrl.lang}}" ng-controller="DesktopController as mainCtrl" ng-strict-di>
   <head>
     <title ng-bind-template="{{'ObjectEditing - Viewer Application'|translate}}">GeoMapFish</title>
     <meta charset="utf-8">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <meta name="dynamicUrl" content="https://geomapfish-demo-dc.camptocamp.com/2.4/dynamic.json">
+    <meta name="interface" content="oeview">
     <link rel="shortcut icon" href="<%=require("./image/favicon.ico")%>" />
     <% for (var css in htmlWebpackPlugin.files.css) { %>
     <link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
@@ -130,12 +133,5 @@
     <% 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=oeview&' +
-      'query=' + encodeURIComponent(document.location.search) +
-      '"><' + '/script>');
-    </script>
   </body>
 </html>
diff --git a/contribs/gmf/src/controllers/AbstractAppController.js b/contribs/gmf/src/controllers/AbstractAppController.js
@@ -5,6 +5,7 @@ import 'jquery';
 import 'angular';
 import 'angular-gettext';
 import 'angular-dynamic-locale';
+import bootstrap from 'gmf/controllers/bootstrap.js';
 import gmfAuthenticationModule from 'gmf/authentication/module.js';
 import gmfBackgroundlayerselectorComponent from 'gmf/backgroundlayerselector/component.js';
 import gmfDatasourceModule from 'gmf/datasource/module.js';
@@ -827,5 +828,6 @@ exports.module.config(['tmhDynamicLocaleProvider', 'angularLocaleScript',
   }
 ]);
 
+bootstrap(exports.module);
 
 export default exports;
diff --git a/contribs/gmf/src/controllers/bootstrap.js b/contribs/gmf/src/controllers/bootstrap.js
@@ -0,0 +1,34 @@
+/* global DocumentTouch */
+
+import $ from 'jquery';
+
+function bootstrap(module) {
+  const interface_ = $('meta[name=interface]')[0].attributes.content.value;
+  const dynamicUrl_ = $('meta[name=dynamicUrl]')[0].attributes.content.value;
+  const dynamicUrl = `?${dynamicUrl_}interface=${interface_}&query=${encodeURIComponent(document.location.search)}`;
+  const request = $.ajax(dynamicUrl, {
+    'dataType': 'json',
+    'xhrFields': {
+      withCredentials: false
+    }
+  });
+  request.fail((jqXHR, textStatus) => {
+    window.alert(`Failed to get the dynamic: ${textStatus}`);
+  });
+  request.done((dynamic) => {
+    if (dynamic['doRedirect']) {
+      const small_screen = window.matchMedia ? window.matchMedia('(max-width: 1024px)') : false;
+      if (small_screen && (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch)) {
+        window.location = dynamic['redirectUrl'];
+      }
+    }
+
+    for (const name in dynamic['constants']) {
+      module.constant(name, dynamic['constants'][name]);
+    }
+
+    angular.bootstrap(document, [`App${interface_}`]);
+  });
+}
+
+export default bootstrap;