Bookmarkable modals

core/package.json

@@ -72,7 +72,7 @@
   "bundlesize": [
     {
       "path": "./public/luigi.js",
-      "maxSize": "455 kB",
+      "maxSize": "460 kB",
       "compression": "none"
     },
     {
@@ -82,7 +82,7 @@
     },
     {
       "path": "./public-ie11/luigi-ie11.js",
-      "maxSize": "655 kB",
+      "maxSize": "670kB",
       "compression": "none"
     },
     {
@@ -136,4 +136,4 @@
     "type": "git",
     "url": "ssh://github.com/SAP/luigi.git"
   }
-}
+}

core/src/App.html

@@ -472,6 +472,7 @@
     // subsequential route handling
     RoutingHelpers.addRouteChangeListener((path, withoutSync) => {
       const pv = preservedViews;
+      // TODO: check if bookmarkable modal is interferring here
       if (!isValidBackRoute(pv, path)) {
         preservedViews = [];
         Iframe.removeInactiveIframes(node);
@@ -944,6 +945,7 @@
     mfModal.displayed = false;
     mfModal.nodepath = undefined;
     mfModal.settings = {};
+    modalIframe = undefined;
   };
 
   resetMicrofrontendModalData();
@@ -956,6 +958,13 @@
     mfModal.displayed = true;
     mfModal.nodepath = nodepath;
     mfModal.settings = settings;
+
+    const showModalPathInUrl = LuigiConfig.getConfigBooleanValue(
+      'routing.showModalPathInUrl'
+    );
+    if (showModalPathInUrl) {
+      Routing.appendModalDataToUrl(nodepath, settings);
+    }
   };
 
   const modalIframeCreated = event => {
@@ -969,11 +978,24 @@
   };
 
   const closeModal = event => {
+
     if (modalIframe) {
       getUnsavedChangesModalPromise(modalIframe.contentWindow).then(() => {
+        const showModalPathInUrl = LuigiConfig.getConfigBooleanValue(
+          'routing.showModalPathInUrl'
+        );
+        if (showModalPathInUrl) {
+          Routing.removeModalDataFromUrl();
+        }
         resetMicrofrontendModalData();
       });
     } else if (modalWC) {
+      const showModalPathInUrl = LuigiConfig.getConfigBooleanValue(
+        'routing.showModalPathInUrl'
+      );
+      if (showModalPathInUrl) {
+        Routing.removeModalDataFromUrl();
+      }
       resetMicrofrontendModalData();
     }
   };
@@ -1247,7 +1269,7 @@
           path = GenericHelpers.addLeadingSlash(path);
           contentNode = node;
           resetMicrofrontendModalData();
-          openViewInModal(path, e.data.params.modal);
+          openViewInModal(path, e.data.params.modal === true ? {} : e.data.params.modal);
         } else if (e.data.params.splitView !== undefined) {
           let path = buildPath(e.data.params);
           path = GenericHelpers.addLeadingSlash(path);

core/src/services/routing.js

@@ -6,7 +6,7 @@ import {
   RoutingHelpers,
   IframeHelpers, EventListenerHelpers
 } from '../utilities/helpers';
-import { LuigiConfig, LuigiI18N } from '../core-api';
+import { LuigiConfig, LuigiI18N, LuigiNavigation } from '../core-api';
 import { Iframe } from './';
 import { NAVIGATION_DEFAULTS } from './../utilities/luigi-config-defaults';
 import { NodeDataManagementStorage } from './node-data-management';
@@ -16,10 +16,10 @@ class RoutingClass {
   getNodePath(node, params) {
     return node
       ? RoutingHelpers.buildRoute(
-          node,
-          node.pathSegment ? '/' + node.pathSegment : '',
-          params
-        )
+        node,
+        node.pathSegment ? '/' + node.pathSegment : '',
+        params
+      )
       : '';
   }
 
@@ -58,7 +58,7 @@ class RoutingClass {
     }
 
     if (LuigiConfig.getConfigValue('routing.useHashRouting')) {
-      if (!navSync){
+      if (!navSync) {
         EventListenerHelpers.hashChangeWithoutSync = true;
       }
       window.location.hash = route;
@@ -159,9 +159,9 @@ class RoutingClass {
     return LuigiConfig.getConfigValue('routing.useHashRouting')
       ? window.location.hash.replace('#', '') // TODO: GenericHelpers.getPathWithoutHash(window.location.hash) fails in ContextSwitcher
       : window.location.search
-      ? GenericHelpers.trimLeadingSlash(window.location.pathname) +
+        ? GenericHelpers.trimLeadingSlash(window.location.pathname) +
         window.location.search
-      : GenericHelpers.trimLeadingSlash(window.location.pathname);
+        : GenericHelpers.trimLeadingSlash(window.location.pathname);
   }
 
   async handleRouteChange(path, component, iframeElement, config, withoutSync) {
@@ -190,7 +190,7 @@ class RoutingClass {
               this.handleRouteChange(path, component, iframeElement, config) &&
               history.replaceState(window.state, '', newUrl);
           },
-          () => {}
+          () => { }
         );
         return;
       }
@@ -204,6 +204,8 @@ class RoutingClass {
         RoutingHelpers.setFeatureToggles(featureToggleProperty, path);
       }
 
+      await this.handleBookmarkableModalPath();
+
       const previousCompData = component.get();
       this.checkInvalidateCache(previousCompData, path);
       const pathUrlRaw =
@@ -236,8 +238,8 @@ class RoutingClass {
             this.showPageNotFoundError(
               component,
               GenericHelpers.trimTrailingSlash(pathData.matchedPath) +
-                '/' +
-                defaultChildNode,
+              '/' +
+              defaultChildNode,
               pathUrlRaw,
               true
             );
@@ -328,10 +330,10 @@ class RoutingClass {
         Object.assign({}, newNodeData, {
           previousNodeValues: previousCompData
             ? {
-                viewUrl: previousCompData.viewUrl,
-                isolateView: previousCompData.isolateView,
-                viewGroup: previousCompData.viewGroup
-              }
+              viewUrl: previousCompData.viewUrl,
+              isolateView: previousCompData.isolateView,
+              viewGroup: previousCompData.viewGroup
+            }
             : {}
         })
       );
@@ -398,6 +400,20 @@ class RoutingClass {
     }
   }
 
+  async handleBookmarkableModalPath() {
+    const additionalModalPath = RoutingHelpers.getModalPathFromPath();
+    if (additionalModalPath) {
+      const modalParams = RoutingHelpers.getModalParamsFromPath();
+      const { nodeObject } = await Navigation.extractDataFromPath(
+        additionalModalPath
+      );
+      LuigiNavigation.openAsModal(
+        additionalModalPath,
+        nodeObject.openNodeInModal || modalParams
+      );
+    }
+  }
+
   /**
       This function takes the previous node data and the new node path and compares
       if the navigation path of both contains a dynamic node.
@@ -426,10 +442,10 @@ class RoutingClass {
             if (
               !isSamePath ||
               newPathSegment !==
-                RoutingHelpers.getDynamicNodeValue(
-                  previousPathNode,
-                  previousCompData.pathParams
-                )
+              RoutingHelpers.getDynamicNodeValue(
+                previousPathNode,
+                previousCompData.pathParams
+              )
             ) {
               NodeDataManagementStorage.deleteNodesRecursively(
                 previousPathNode
@@ -576,6 +592,69 @@ class RoutingClass {
       componentData.context
     );
   }
+
+  appendModalDataToUrl(modalPath, modalParams) {
+    // global setting for persistence in url .. default false
+    let queryParamSeparator = RoutingHelpers.getHashQueryParamSeparator();
+    const params = RoutingHelpers.getQueryParams();
+    const modalParamName = RoutingHelpers.getModalViewParamName();
+
+    const prevModalPath = params[modalParamName];
+    if (prevModalPath !== modalPath) {
+      params[modalParamName] = modalPath;
+      if (modalParams && Object.keys(modalParams).length) {
+        params[`${modalParamName}Params`] = JSON.stringify(modalParams);
+      }
+      const url = new URL(location.href);
+      const hashRoutingActive = LuigiConfig.getConfigBooleanValue(
+        'routing.useHashRouting'
+      );
+      if (hashRoutingActive) {
+        const queryParamIndex = location.hash.indexOf(queryParamSeparator);
+        if (queryParamIndex !== -1) {
+          url.hash = url.hash.slice(0, queryParamIndex);
+        }
+        url.hash = `${url.hash
+          }${queryParamSeparator}${RoutingHelpers.encodeParams(params)}`;
+      } else {
+        url.search = `?${RoutingHelpers.encodeParams(params)}`;
+      }
+      history.replaceState(window.state, '', url.href);
+    }
+  }
+
+  removeModalDataFromUrl() {
+    const params = RoutingHelpers.getQueryParams();
+    const modalParamName = RoutingHelpers.getModalViewParamName();
+    let url = new URL(location.href);
+    const hashRoutingActive = LuigiConfig.getConfigBooleanValue(
+      'routing.useHashRouting'
+    );
+    if (hashRoutingActive) {
+      let modalParamsObj = {};
+
+      if (params[modalParamName]) {
+        modalParamsObj[modalParamName] = params[modalParamName]
+      }
+      if (params[`${modalParamName}Params`]) {
+        modalParamsObj[`${modalParamName}Params`] = params[`${modalParamName}Params`];
+      }
+      let prevModalPath = RoutingHelpers.encodeParams(modalParamsObj);
+      if (url.hash.includes(`?${prevModalPath}`)) {
+        url.hash = url.hash.replace(`?${prevModalPath}`, '');
+      } else if (url.hash.includes(`&${prevModalPath}`)) {
+        url.hash = url.hash.replace(`&${prevModalPath}`, '');
+      }
+    } else {
+      let searchParams = new URLSearchParams(url.search.slice(1));
+      searchParams.delete(modalParamName);
+      searchParams.delete(`${modalParamName}Params`);
+      let finalUrl = '';
+      Array.from(searchParams.keys()).forEach(searchParamKey => { finalUrl += (finalUrl === '' ? '?' : '&') + searchParamKey + '=' + searchParams.get(searchParamKey); });
+      url.search = finalUrl;
+    }
+    history.replaceState(window.state, '', url.href);
+  }
 }
 
 export const Routing = new RoutingClass();

core/src/utilities/helpers/routing-helpers.js

@@ -12,6 +12,8 @@ import { Routing } from '../../services/routing';
 class RoutingHelpersClass {
   constructor() {
     this.defaultContentViewParamPrefix = '~';
+    this.defaultQueryParamSeparator = '?';
+    this.defaultModalViewParamName = 'modal';
   }
 
   getLastNodeObject(pathData) {
@@ -77,6 +79,16 @@ class RoutingHelpersClass {
     return result;
   }
 
+  encodeParams(dataObj) {
+    let queryArr = [];
+    for (let key in dataObj) {
+      queryArr.push(
+        encodeURIComponent(key) + '=' + encodeURIComponent(dataObj[key])
+      );
+    }
+    return queryArr.join('&');
+  }
+
   getNodeParams(params) {
     const result = {};
     const paramPrefix = this.getContentViewParamPrefix();
@@ -119,6 +131,61 @@ class RoutingHelpersClass {
     return prefix;
   }
 
+  getModalViewParamName() {
+    let paramName = LuigiConfig.getConfigValue('routing.modalPathParam');
+    if (!paramName) {
+      paramName = this.defaultModalViewParamName;
+    }
+    return paramName;
+  }
+
+  /**
+   * Get the query param separator which is used with hashRouting
+   * Default: :
+   * @example /home?modal=(urlencoded)/some-modal?modalParams=(urlencoded){...}&otherParam=hmhm
+   * @returns the first query param separator (like ? for path routing)
+   */
+  getHashQueryParamSeparator() {
+    return this.defaultQueryParamSeparator;
+  }
+
+  getQueryParam(paramName) {
+    return this.getQueryParams()[paramName];
+  }
+  getQueryParams() {
+    const hashRoutingActive = LuigiConfig.getConfigBooleanValue(
+      'routing.useHashRouting'
+    );
+    return hashRoutingActive
+      ? this.getLocationHashQueryParams()
+      : this.getLocationSearchQueryParams();
+  }
+  getLocationHashQueryParams() {
+    const queryParamIndex = location.hash.indexOf(
+      this.defaultQueryParamSeparator
+    );
+    return queryParamIndex !== -1
+      ? RoutingHelpers.parseParams(location.hash.slice(queryParamIndex + 1))
+      : {};
+  }
+  getLocationSearchQueryParams() {
+    return location.search
+      ? RoutingHelpers.parseParams(location.search.slice(1))
+      : {};
+  }
+
+  getModalPathFromPath() {
+    const path = this.getQueryParam(this.getModalViewParamName());
+    return path && decodeURIComponent(path);
+  }
+
+  getModalParamsFromPath() {
+    const modalParamsStr = this.getQueryParam(
+      `${this.getModalViewParamName()}Params`
+    );
+    return modalParamsStr && JSON.parse(decodeURIComponent(modalParamsStr));
+  }
+
   addRouteChangeListener(callback) {
     const hashRoutingActive = LuigiConfig.getConfigValue(
       'routing.useHashRouting'