url direct access #2936

web/themes/custom/caravane/assets/dist/redirect.js

@@ -0,0 +1 @@
+console.log("CARAVANE THEME redirect.js drupalDecoupled",drupalDecoupled);drupalDecoupled.redirect?(console.log("redirect",drupalDecoupled),console.log("window.location",window.location),drupalDecoupled.sys_path=edlp.sys_path.replace(/^\//,""),drupalDecoupled.url=window.location.pathname,drupalDecoupled.hash=window.location.hash,window.localStorage.setItem("decoupled_origin",JSON.stringify(drupalDecoupled)),window.location.replace(window.location.origin)):console.log("history do not redirect");

web/themes/custom/caravane/assets/js/main.js

@@ -43,6 +43,7 @@ import router from './router/router';
 
     function initVues(){
       initVueContentModale();
+
     }
 
     function initVueContentModale(){
@@ -62,6 +63,8 @@ import router from './router/router';
             mapStore.maxZoom = settings.settings.maxZoom;
             mapStore.defaultZoom = settings.settings.minZoom;
             
+
+            initFirstLoadRouting(store, map);
             processEtapeLinks(store, map);
             processStaticLinks(store, map);
             processHeaderLogo(store, map);
@@ -71,6 +74,38 @@ import router from './router/router';
       }
     }
 
+    function initFirstLoadRouting(store, map){
+      var decoupled_origin = JSON.parse(window.localStorage.getItem('decoupled_origin'));
+      console.log('decoupled_origin', decoupled_origin);
+
+
+      if(decoupled_origin && decoupled_origin.entity_id){
+        // Si c'était moi je ne ferais qu'une seule function fetchdata capable de dealer avec les différent type de contenus
+        switch (decoupled_origin.entity_bundle) {
+          case 'etape':
+            store.fetchEtapeData(decoupled_origin.entity_id, map);
+            break;
+          case 'static':
+            store.fetchEtapeData(decoupled_origin.entity_id, map);
+            break;
+        }
+
+        router.push({
+          // name: decoupled_origin.entity_bundle,
+          path: decoupled_origin.url,
+          // params: {
+          //   title: decoupled_origin.entity_uuid
+          // },
+          // props: {
+          //   nid: decoupled_origin.entity_id
+          // }
+        });
+
+        // reset the storage
+        window.localStorage.removeItem("decoupled_origin");
+      }
+    }
+
     function onClickContentLink(e, store, map, category){
       e.preventDefault();
       let a;
@@ -82,7 +117,7 @@ import router from './router/router';
         a = e.target.closest('a');
       }
     
-      let nid = a.dataset.nodeNid;
+      let nid = a.dataset.nid;
 
       if (category === 'etape') {
         store.fetchEtapeData(nid, map);
@@ -100,10 +135,11 @@ import router from './router/router';
     function processStaticLinks(store, map) {
       let general_link_fields = document.querySelectorAll('#menu > ul > li > a');
       for (let i =1; i <  general_link_fields.length; i ++) {
-        let general_link_href = general_link_fields[i].getAttribute('href');
-        const nid = general_link_href.charAt(general_link_href.length-1);
-        if (!isNaN(nid)) {
-          general_link_fields[i].setAttribute('data-node-nid', parseInt(nid));
+        let general_link_path = general_link_fields[i].getAttribute('data-drupal-link-system-path');
+        const match = [...general_link_path.match(/^node\/(\d+)$/)];
+        if (match) {
+          const nid = match[1];
+          general_link_fields[i].setAttribute('data-nid', parseInt(nid));
           general_link_fields[i].addEventListener('click', (e) => onClickContentLink(e, store, map, 'static'));
         }
       }
@@ -117,15 +153,13 @@ import router from './router/router';
     function processEtapeLinks(store, map) {
       let etape_li = document.querySelectorAll('#etapes-liste li');
       etape_li.forEach((li) => {
-        let nidElement = li.querySelector('.views-field-nid');
-        let nid = nidElement.innerText;
+        let etape_link = li.querySelector('a.etape-link');
+        let nid = etape_link.dataset.nid;
         
         if (nid) {
-          let a = li.querySelector('a');
-          a.setAttribute('data-node-nid', nid);
           li.addEventListener('click', (e) => onClickContentLink(e, store, map, 'etape'));
         }
-        let couleur = li.querySelector('.views-field-field-couleur .snippets-description').innerText;
+        let couleur = etape_link.dataset.couleur;
         let iconElements = li.querySelectorAll('.icone-arret > div');
         for (let element of iconElements) {
           element.style.backgroundColor = couleur;

web/themes/custom/caravane/assets/js/redirect.js

@@ -0,0 +1,16 @@
+console.log('CARAVANE THEME redirect.js drupalDecoupled', drupalDecoupled);
+
+// var drupalDecoupled is provided by edlp_ajax.module file
+if(drupalDecoupled.redirect){
+  console.log('redirect', drupalDecoupled);
+  console.log('window.location', window.location);
+
+  drupalDecoupled.sys_path = drupalDecoupled.sys_path.replace(/^\//, '');
+  drupalDecoupled.url = window.location.pathname;
+  drupalDecoupled.hash = window.location.hash;
+  window.localStorage.setItem('decoupled_origin', JSON.stringify(drupalDecoupled));
+  // redirect to home
+  window.location.replace(window.location.origin);
+}else{
+  console.log('history do not redirect');
+}

web/themes/custom/caravane/assets/js/router/router.js

@@ -2,8 +2,17 @@ import { createRouter, createWebHistory } from 'vue-router';
 import ModaleView from '../vuejs/Modale.vue';
 
 const routes = [
-    { path: '/node/:id', component: ModaleView, name: 'modale' },
-    { path: '/', component: ModaleView, name: 'home' },
+    { 
+      name: 'etape',
+      path: '/etapes/:title?',
+      component: ModaleView,
+      props: {id: null}
+    },
+    { 
+      name: 'home',
+      path: '/',
+      component: ModaleView
+    },
   ];
   
   const router = createRouter({

web/themes/custom/caravane/caravane.libraries.yml

@@ -1,6 +1,12 @@
+# redirect-js:
+#   header: true
+#   js:
+#     assets/dist/scripts/redirect.min.js: { weight: -998, preprocess: false, minified: true }
+
 # Main theme library.
 global:
   js:
+    assets/dist/scripts/redirect.min.js: { weight: -998, preprocess: false, minified: true }
     assets/dist/main.js: {}
     # assets/js/main.js: {}
   css:
@@ -14,7 +20,12 @@ vitehmr:
       type: external
       attributes: 
         type: module
+    http://localhost:5173/assets/js/redirect.js:
+      type: external
+      attributes: 
+        type: module
     http://localhost:5173/assets/js/main.js:
       type: external
       attributes: 
-        type: module
+        type: module
+    

web/themes/custom/caravane/caravane.theme

@@ -13,6 +13,7 @@ function caravane_page_attachments_alter(&$page) {
     // $page['#attached']['library'][] = 'http://localhost:5173/assets/js/main.js';
     $page['#attached']['library'][] = 'caravane/vitehmr';
   }else{
+    // $page['#attached']['library'][] = 'caravane/redirect-js';
     $page['#attached']['library'][] = 'caravane/global';
   }
 }

web/themes/custom/caravane/vite.config.js

@@ -16,9 +16,12 @@ export default defineConfig({
   build: {
     outDir: 'assets/dist',
     rollupOptions: {
-      input: 'assets/js/main.js',
+      input: {
+        main: 'assets/js/main.js',
+        redirect: 'assets/js/redirect'
+      },
       output: {
-        entryFileNames: 'main.js',
+        entryFileNames: '[name].js',
         assetFileNames: 'main.css'
       }
     }