update

routing/ccm.routing.js

@@ -1,19 +1,22 @@
 /**
  * @overview ccmjs-based web component for routing
- * @author André Kless <[email protected]> 2019-2021
+ * @author André Kless <[email protected]> 2019-2024
  * @license MIT License
- * @version latest (3.0.0)
+ * @version latest (4.0.0)
  * @changes
- * version 3.0.0 (22.10.2021): reimplementation
- * (for older version changes see ccm.routing-2.0.7.js)
+ * version 4.0.0 (18.07.2024):
+ * - configurable separator for route parameters
+ * - uses ccmjs v27.5.0 as default
+ * (for older version changes see ccm.routing-3.0.0.js)
  */
 
 ( () => {
   const component = {
     name: 'routing',
-    ccm: 'https://ccmjs.github.io/ccm/versions/ccm-27.1.1.min.js',
+    ccm: 'https://ccmjs.github.io/ccm/versions/ccm-27.5.0.min.js',
     config: {
-//    "app": "1558132111384X2108359471753687"
+//    "app": "1558132111384X2108359471753687",
+      "separator": "+"
     },
     Instance: function () {
 
@@ -89,7 +92,7 @@
       this.refresh = async () => {
         const route = this.get();
         if ( route === current_route ) return;
-        const split = route.split( '-' ).map( value => parseInt( value ) || value );
+        const split = route.split( this.separator ).map( value => parseInt( value ) || value );
         current_route = route;
         if ( routes[ split[ 0 ] ] )
           await routes[ split[ 0 ] ].apply( undefined, split.slice( 1 ) )

routing/versions/ccm.routing-4.0.0.js

@@ -0,0 +1,107 @@
+/**
+ * @overview ccmjs-based web component for routing
+ * @author André Kless <[email protected]> 2019-2024
+ * @license MIT License
+ * @version 4.0.0
+ * @changes
+ * version 4.0.0 (18.07.2024):
+ * - configurable separator for route parameters
+ * - uses ccmjs v27.5.0 as default
+ * (for older version changes see ccm.routing-3.0.0.js)
+ */
+
+( () => {
+  const component = {
+    name: 'routing',
+    version: [ 4, 0, 0 ],
+    ccm: 'https://ccmjs.github.io/ccm/versions/ccm-27.5.0.min.js',
+    config: {
+//    "app": "1558132111384X2108359471753687",
+      "separator": "+"
+    },
+    Instance: function () {
+
+      /**
+       * defined app routes
+       * @type {Object.<string,Function>}
+       */
+      let routes;
+
+      /**
+       * current app route
+       * @type {string}
+       */
+      let current_route = '';
+
+      /**
+       * is first use
+       * @type {boolean}
+       */
+      let first = true;
+
+      /**
+       * when the instance is created, when all dependencies have been resolved and before the dependent sub-instances are initialized and ready
+       * @returns {Promise<void>}
+       */
+      this.init = async () => {
+
+        // no app ID? => use component name
+        if ( !this.app && this.parent ) this.app = this.parent.component.name;
+
+      };
+
+      /**
+       * when all dependencies are solved after creation and before the app starts
+       * @returns {Promise<void>}
+       */
+      this.ready = async () => {
+        if ( !this.app && this.parent ) this.app = this.parent.component.name;  // no app ID? => use component name
+        window.addEventListener( 'popstate', this.refresh );                    // check route on 'popstate' event
+      };
+
+      /**
+       * defines app routes
+       * @param {Object.<string,Function>} _routes
+       * @example routing.define( { home: async () => {}, page: async page_nr => {} } );
+       */
+      this.define = _routes => { routes = _routes; };
+
+      /**
+       * gets current app route
+       * @returns {string}
+       */
+      this.get = () => new URLSearchParams( window.location.search ).get( 'ccm-' + this.app ) || '';
+
+      /**
+       * sets current app route
+       * @param {string} route
+       * @example routing.set('home')
+       * @example routing.set('page-5')
+       */
+      this.set = route => {
+        if ( route === current_route ) return;
+        const searchParams = new URLSearchParams( window.location.search );
+        searchParams.set( 'ccm-' + this.app, current_route = route );
+        window.history[ ( first ? 'replace' : 'push' ) + 'State' ]( '', '', '?' + searchParams.toString() );
+        first = false;
+      }
+
+      /**
+       * performs route specific function
+       * @returns {Promise<void>}
+       */
+      this.refresh = async () => {
+        const route = this.get();
+        if ( route === current_route ) return;
+        const split = route.split( this.separator ).map( value => parseInt( value ) || value );
+        current_route = route;
+        if ( routes[ split[ 0 ] ] )
+          await routes[ split[ 0 ] ].apply( undefined, split.slice( 1 ) )
+        else if ( this.parent )
+          await this.parent.start();
+      }
+
+    }
+  };
+  let b="ccm."+component.name+(component.version?"-"+component.version.join("."):"")+".js";if(window.ccm&&null===window.ccm.files[b])return window.ccm.files[b]=component;(b=window.ccm&&window.ccm.components[component.name])&&b.ccm&&(component.ccm=b.ccm);"string"===typeof component.ccm&&(component.ccm={url:component.ccm});let c=(component.ccm.url.match(/(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)/)||[""])[0];if(window.ccm&&window.ccm[c])window.ccm[c].component(component);else{var a=document.createElement("script");document.head.appendChild(a);component.ccm.integrity&&a.setAttribute("integrity",component.ccm.integrity);component.ccm.crossorigin&&a.setAttribute("crossorigin",component.ccm.crossorigin);a.onload=function(){(c="latest"?window.ccm:window.ccm[c]).component(component);document.head.removeChild(a)};a.src=component.ccm.url}
+} )();