Pārlūkot izejas kodu

HUE-7743 [frontend] Use hash-based page routing in embedded mode

Johan Ahlen 7 gadi atpakaļ
vecāks
revīzija
2dc34be

+ 55 - 22
desktop/core/src/desktop/static/desktop/js/hue.utils.js

@@ -119,9 +119,11 @@ if (!('addRule' in CSSStyleSheet.prototype)) {
  * Add utility methods to the HUE object
 */
 
-(function (hueUtils) {
+window.hueUtils = window.hueUtils || (function () {
   'use strict';
 
+  var hueUtils = {};
+
   hueUtils.bootstrapRatios = {
     span3: function () {
       var windowWidth = $(window).width();
@@ -222,8 +224,12 @@ if (!('addRule' in CSSStyleSheet.prototype)) {
   };
 
   hueUtils.changeURL = function (newURL) {
-    if (window.location.hash !== '' && newURL.indexOf('#') === -1){
-      newURL = newURL + window.location.hash;
+    if (IS_EMBEDDED) {
+      newURL = window.location.pathname + window.location.search + '#!' + newURL;
+    } else {
+      if (window.location.hash !== '' && newURL.indexOf('#') === -1){
+        newURL = newURL + window.location.hash;
+      }
     }
     window.history.pushState(null, null, newURL);
   };
@@ -233,27 +239,52 @@ if (!('addRule' in CSSStyleSheet.prototype)) {
   };
 
   hueUtils.changeURLParameter = function (param, value) {
-    var newSearch = '';
-    if (window.location.getParameter(param, true) !== null) {
-      newSearch += '?';
-      window.location.search.replace(/\?/gi, '').split('&').forEach(function (p) {
-        if (p.split('=')[0] !== param) {
-          newSearch += p;
+    if (IS_EMBEDDED) {
+      var currentUrl = window.location.hash.replace('#!', '');
+      var parts = currentUrl.split('?');
+      var path = parts[0];
+      var search = parts.length > 1 ? parts[1] : '';
+      if (~search.indexOf(param + '=' + value)) {
+        return;
+      }
+      if (~search.indexOf(param + '=')) {
+        if (!value) {
+          search = search.replace(new RegExp(param + '=[^&]*&?'), '');
+        } else {
+          search = search.replace(new RegExp(param + '=[^&]*'), param + '=' + value);
         }
-      });
-      if (value){
-        newSearch += (newSearch !== '?' ? '&' : '') + param + '=' + value;
+      } else if (value) {
+        if (search) {
+          search += '&';
+        }
+        search += param + '=' + value;
+      } else {
+        return;
       }
-    }
-    else {
-      newSearch = window.location.search + (value ? (window.location.search.indexOf('?') > -1 ? '&' : '?') + param + '=' + value : '' );
-    }
 
-    if (newSearch === '?') {
-      newSearch = '';
-    }
+      hueUtils.changeURL(search ? path + '?' + search : path);
+    } else {
+      var newSearch = '';
+      if (window.location.getParameter(param, true) !== null) {
+        newSearch += '?';
+        window.location.search.replace(/\?/gi, '').split('&').forEach(function (p) {
+          if (p.split('=')[0] !== param) {
+            newSearch += p;
+          }
+        });
+        if (value){
+          newSearch += (newSearch !== '?' ? '&' : '') + param + '=' + value;
+        }
+      } else {
+        newSearch = window.location.search + (value ? (window.location.search.indexOf('?') > -1 ? '&' : '?') + param + '=' + value : '' );
+      }
 
-    hueUtils.changeURL(window.location.pathname + newSearch);
+      if (newSearch === '?') {
+        newSearch = '';
+      }
+
+      hueUtils.changeURL(window.location.pathname + newSearch);
+    }
   };
 
   hueUtils.removeURLParameter = function (param) {
@@ -409,9 +440,11 @@ if (!('addRule' in CSSStyleSheet.prototype)) {
         }
       }
     }
-  }
+  };
+
+  return hueUtils;
 
-}(hueUtils = window.hueUtils || {}));
+})();
 
 if (!Object.keys) {
 

+ 2 - 0
desktop/core/src/desktop/templates/global_js_constants.mako

@@ -48,6 +48,8 @@
 
   window.HUE_CONTAINER = '${ IS_EMBEDDED.get() }' === 'True' ? '.hue-embedded-container' : 'body';
 
+  window.IS_EMBEDDED = '${ IS_EMBEDDED.get() }' === 'True';
+
   window.HUE_I18n = {
     autocomplete: {
       category: {

+ 35 - 10
desktop/core/src/desktop/templates/hue.mako

@@ -1060,7 +1060,32 @@ ${ smart_unicode(login_modal(request).content) | n,unicode }
           $(this).attr('href', link);
         });
 
-        page.base(typeof HUE_EMBEDDED_BASE_URL !== 'undefined' ? HUE_EMBEDDED_BASE_URL : '/hue');
+        % if IS_EMBEDDED.get():
+        page.base(window.location.pathname);
+        page({ hashbang: true });
+        if (!window.location.hash) {
+          window.location.hash = '#!'
+        }
+        % else:
+        page.base('/hue');
+        % endif
+
+        var getUrlParameter = function (name) {
+          % if IS_EMBEDDED.get():
+            if (~window.location.hash.indexOf('?')) {
+              var paramString = window.location.hash.substring(window.location.hash.indexOf('?'));
+              var params = paramString.split('&');
+              for (var i = 0; i < params.length; i++) {
+                if (~params[i].indexOf(name + '=')) {
+                  return params[i].substring(name.length + 2);
+                }
+              }
+            }
+            return '';
+          % else:
+          return window.location.getParameter(name) || '';
+          % endif
+        };
 
         self.lastContext = null;
 
@@ -1096,20 +1121,20 @@ ${ smart_unicode(login_modal(request).content) | n,unicode }
             // Defer to allow window.location param update
             _.defer(function () {
               if (typeof self.embeddable_cache['editor'] === 'undefined'){
-                if (window.location.getParameter('editor') !== '') {
-                  self.extraEmbeddableURLParams('&editor=' + window.location.getParameter('editor'));
-                } else if (window.location.getParameter('type') !== '' && window.location.getParameter('type') !== 'notebook') {
-                  self.extraEmbeddableURLParams('&type=' + window.location.getParameter('type'));
+                if (getUrlParameter('editor') !== '') {
+                  self.extraEmbeddableURLParams('&editor=' + getUrlParameter('editor'));
+                } else if (getUrlParameter('type') !== '' && getUrlParameter('type') !== 'notebook') {
+                  self.extraEmbeddableURLParams('&type=' + getUrlParameter('type'));
                 }
                 self.loadApp('editor');
               } else {
                 self.loadApp('editor');
-                if (window.location.getParameter('editor') !== '') {
+                if (getUrlParameter('editor') !== '') {
                   self.getActiveAppViewModel(function (viewModel) {
-                    viewModel.openNotebook(window.location.getParameter('editor'));
+                    viewModel.openNotebook(getUrlParameter('editor'));
                   });
-                } else if (window.location.getParameter('type') !== '') {
-                  self.changeEditorType(window.location.getParameter('type'));
+                } else if (getUrlParameter('type') !== '') {
+                  self.changeEditorType(getUrlParameter('type'));
                 }
               }
             });
@@ -1275,7 +1300,7 @@ ${ smart_unicode(login_modal(request).content) | n,unicode }
 
         huePubSub.subscribe('open.link', function (href) {
           if (href) {
-            var prefix = typeof HUE_EMBEDDED_BASE_URL !== 'undefined' ? HUE_EMBEDDED_BASE_URL : '/hue';
+            var prefix = '${ '' if IS_EMBEDDED.get() else '/hue' }';
             if (href.startsWith('/') && !href.startsWith(prefix)){
               page(prefix + href);
             } else {