bachir
/
drupal-caravane
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

vue router pour l'history

This commit is contained in:
Valentin 2024-08-05 21:08:09 +02:00
parent a05f81c2d9
commit f61c81c714
8 changed files with 419 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

334
package-lock.json generated Normal file
View File

@ -0,0 +1,334 @@
{
"name": "src",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"dependencies": {
"vue-router": "^4.4.2"
}
},
"node_modules/@babel/helper-string-parser": {
"version": "7.24.8",
"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
"integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
"license": "MIT",
"peer": true,
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/helper-validator-identifier": {
"version": "7.24.7",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
"integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
"license": "MIT",
"peer": true,
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/parser": {
"version": "7.25.3",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.3.tgz",
"integrity": "sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==",
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/types": "^7.25.2"
},
"bin": {
"parser": "bin/babel-parser.js"
},
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/@babel/types": {
"version": "7.25.2",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.2.tgz",
"integrity": "sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==",
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/helper-string-parser": "^7.24.8",
"@babel/helper-validator-identifier": "^7.24.7",
"to-fast-properties": "^2.0.0"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@jridgewell/sourcemap-codec": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
"license": "MIT",
"peer": true
},
"node_modules/@vue/compiler-core": {
"version": "3.4.35",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.35.tgz",
"integrity": "sha512-gKp0zGoLnMYtw4uS/SJRRO7rsVggLjvot3mcctlMXunYNsX+aRJDqqw/lV5/gHK91nvaAAlWFgdVl020AW1Prg==",
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/parser": "^7.24.7",
"@vue/shared": "3.4.35",
"entities": "^4.5.0",
"estree-walker": "^2.0.2",
"source-map-js": "^1.2.0"
}
},
"node_modules/@vue/compiler-dom": {
"version": "3.4.35",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.35.tgz",
"integrity": "sha512-pWIZRL76/oE/VMhdv/ovZfmuooEni6JPG1BFe7oLk5DZRo/ImydXijoZl/4kh2406boRQ7lxTYzbZEEXEhj9NQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"@vue/compiler-core": "3.4.35",
"@vue/shared": "3.4.35"
}
},
"node_modules/@vue/compiler-sfc": {
"version": "3.4.35",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.35.tgz",
"integrity": "sha512-xacnRS/h/FCsjsMfxBkzjoNxyxEyKyZfBch/P4vkLRvYJwe5ChXmZZrj8Dsed/752H2Q3JE8kYu9Uyha9J6PgA==",
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/parser": "^7.24.7",
"@vue/compiler-core": "3.4.35",
"@vue/compiler-dom": "3.4.35",
"@vue/compiler-ssr": "3.4.35",
"@vue/shared": "3.4.35",
"estree-walker": "^2.0.2",
"magic-string": "^0.30.10",
"postcss": "^8.4.40",
"source-map-js": "^1.2.0"
}
},
"node_modules/@vue/compiler-ssr": {
"version": "3.4.35",
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.35.tgz",
"integrity": "sha512-7iynB+0KB1AAJKk/biENTV5cRGHRdbdaD7Mx3nWcm1W8bVD6QmnH3B4AHhQQ1qZHhqFwzEzMwiytXm3PX1e60A==",
"license": "MIT",
"peer": true,
"dependencies": {
"@vue/compiler-dom": "3.4.35",
"@vue/shared": "3.4.35"
}
},
"node_modules/@vue/devtools-api": {
"version": "6.6.3",
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.3.tgz",
"integrity": "sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==",
"license": "MIT"
},
"node_modules/@vue/reactivity": {
"version": "3.4.35",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.35.tgz",
"integrity": "sha512-Ggtz7ZZHakriKioveJtPlStYardwQH6VCs9V13/4qjHSQb/teE30LVJNrbBVs4+aoYGtTQKJbTe4CWGxVZrvEw==",
"license": "MIT",
"peer": true,
"dependencies": {
"@vue/shared": "3.4.35"
}
},
"node_modules/@vue/runtime-core": {
"version": "3.4.35",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.35.tgz",
"integrity": "sha512-D+BAjFoWwT5wtITpSxwqfWZiBClhBbR+bm0VQlWYFOadUUXFo+5wbe9ErXhLvwguPiLZdEF13QAWi2vP3ZD5tA==",
"license": "MIT",
"peer": true,
"dependencies": {
"@vue/reactivity": "3.4.35",
"@vue/shared": "3.4.35"
}
},
"node_modules/@vue/runtime-dom": {
"version": "3.4.35",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.35.tgz",
"integrity": "sha512-yGOlbos+MVhlS5NWBF2HDNgblG8e2MY3+GigHEyR/dREAluvI5tuUUgie3/9XeqhPE4LF0i2wjlduh5thnfOqw==",
"license": "MIT",
"peer": true,
"dependencies": {
"@vue/reactivity": "3.4.35",
"@vue/runtime-core": "3.4.35",
"@vue/shared": "3.4.35",
"csstype": "^3.1.3"
}
},
"node_modules/@vue/server-renderer": {
"version": "3.4.35",
"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.35.tgz",
"integrity": "sha512-iZ0e/u9mRE4T8tNhlo0tbA+gzVkgv8r5BX6s1kRbOZqfpq14qoIvCZ5gIgraOmYkMYrSEZgkkojFPr+Nyq/Mnw==",
"license": "MIT",
"peer": true,
"dependencies": {
"@vue/compiler-ssr": "3.4.35",
"@vue/shared": "3.4.35"
},
"peerDependencies": {
"vue": "3.4.35"
}
},
"node_modules/@vue/shared": {
"version": "3.4.35",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.35.tgz",
"integrity": "sha512-hvuhBYYDe+b1G8KHxsQ0diDqDMA8D9laxWZhNAjE83VZb5UDaXl9Xnz7cGdDSyiHM90qqI/CyGMcpBpiDy6VVQ==",
"license": "MIT",
"peer": true
},
"node_modules/csstype": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
"license": "MIT",
"peer": true
},
"node_modules/entities": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
"license": "BSD-2-Clause",
"peer": true,
"engines": {
"node": ">=0.12"
},
"funding": {
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
"node_modules/estree-walker": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
"license": "MIT",
"peer": true
},
"node_modules/magic-string": {
"version": "0.30.11",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
"integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
"license": "MIT",
"peer": true,
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.5.0"
}
},
"node_modules/nanoid": {
"version": "3.3.7",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"peer": true,
"bin": {
"nanoid": "bin/nanoid.cjs"
},
"engines": {
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
}
},
"node_modules/picocolors": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
"integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
"license": "ISC",
"peer": true
},
"node_modules/postcss": {
"version": "8.4.40",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.40.tgz",
"integrity": "sha512-YF2kKIUzAofPMpfH6hOi2cGnv/HrUlfucspc7pDyvv7kGdqXrfj8SCl/t8owkEgKEuu8ZcRjSOxFxVLqwChZ2Q==",
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/postcss"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"nanoid": "^3.3.7",
"picocolors": "^1.0.1",
"source-map-js": "^1.2.0"
},
"engines": {
"node": "^10 || ^12 || >=14"
}
},
"node_modules/source-map-js": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
"license": "BSD-3-Clause",
"peer": true,
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/to-fast-properties": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
"integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
"license": "MIT",
"peer": true,
"engines": {
"node": ">=4"
}
},
"node_modules/vue": {
"version": "3.4.35",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.4.35.tgz",
"integrity": "sha512-+fl/GLmI4GPileHftVlCdB7fUL4aziPcqTudpTGXCT8s+iZWuOCeNEB5haX6Uz2IpRrbEXOgIFbe+XciCuGbNQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"@vue/compiler-dom": "3.4.35",
"@vue/compiler-sfc": "3.4.35",
"@vue/runtime-dom": "3.4.35",
"@vue/server-renderer": "3.4.35",
"@vue/shared": "3.4.35"
},
"peerDependencies": {
"typescript": "*"
},
"peerDependenciesMeta": {
"typescript": {
"optional": true
}
}
},
"node_modules/vue-router": {
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.2.tgz",
"integrity": "sha512-1qNybkn2L7QsLzaXs8nvlQmRKp8XF8DCxZys/Jr1JpQcHsKUxTKzTxCVA1G7NfBfwRIBgCJPoujOG5lHCCNUxw==",
"license": "MIT",
"dependencies": {
"@vue/devtools-api": "^6.6.3"
},
"funding": {
"url": "https://github.com/sponsors/posva"
},
"peerDependencies": {
"vue": "^3.2.0"
}
}
}
}

5
package.json Normal file
View File

@ -0,0 +1,5 @@
{
"dependencies": {
"vue-router": "^4.4.2"
}
}

3
web/themes/custom/caravane/assets/js/main.js
View File

@ -4,6 +4,7 @@ import '../scss/main.scss'
import Modale from './vuejs/Modale.vue'
import { useContentStore } from './stores/content';
import router from './router/router';
// Working with the history API
// https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API
@ -47,7 +48,7 @@ import { useContentStore } from './stores/content';
}
function initVueContentModale(){
const app = createApp(Modale).use(createPinia());
const app = createApp(Modale).use(createPinia()).use(router);
const store = useContentStore();
app.mount('#content-modale');

14
web/themes/custom/caravane/assets/js/router/router.js Normal file
View File

@ -0,0 +1,14 @@
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' },
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;

4
web/themes/custom/caravane/assets/js/stores/content.js
View File

@ -92,6 +92,10 @@ export const useContentStore = defineStore('content', {
this.loading = false;
}
},
emptyAll() {
this.etape = {};
this.page = {};
},
},
});

78
web/themes/custom/caravane/assets/js/vuejs/Modale.vue
View File

@ -1,6 +1,6 @@
<template>
<Transition>
<div v-if="etape.etape_number">
<div v-if="isEtapeValid">
<header>
<h1>{{etape.adresse.locality}}, {{ etape.adresse.postal_code }}</h1>
<h2>{{etape.title}}</h2>
@ -17,9 +17,6 @@
</div>
</main>
<!--
<div v-if="loading">Loading...</div>
<div v-if="error">{{ error }}</div>
@ -40,7 +37,7 @@
</div>
</Transition>
<Transition>
<div v-if="page.title">
<div v-if="isPageValid">
<header>
<h1>{{ page.title }}</h1>
</header>
@ -52,25 +49,66 @@
</template>
<script setup>
import { watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useContentStore } from '../stores/content';
import { ref, computed, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { useContentStore } from '../stores/content';
import { useRoute, useRouter } from 'vue-router';
const store = useContentStore();
const router = useRouter();
const store = useContentStore();
const route = useRoute();
const {
loading, error,
href,
etape,
page,
const { loading, error, href, etape, page } = storeToRefs(store);
} = storeToRefs(store);
watch(() => href.value, (newHref) => {
if (newHref) {
history.pushState(null, '', newHref);
watch(() => route.params.id, (newId) => {
store.fetchEtapeData(newId);
if (!etape.value.data) {
store.fetchStaticData(newId);
}
});
});
watch(() => href.value, (newHref) => {
const relativePath = newHref.split('.fr')[1];
if (relativePath && (relativePath !== '' || relativePath !== '/')) {
router.push(relativePath);
} else {
store.emptyAll();
}
});
const isEtapeValid = computed(() => {
return etape.value && !isObjectEmpty(etape.value);
});
const isPageValid = computed(() => {
return page.value && !isObjectEmpty(page.value);
});
// Utility function to check if an object and its children are empty
function isObjectEmpty(obj) {
if (obj === null || obj === undefined || typeof obj !== 'object') {
return true;
}
for (const key in obj) {
if (Object.hasOwnProperty.call(obj, key)) {
const value = obj[key];
if (Array.isArray(value)) {
if (value.length > 0) {
return false;
}
} else if (typeof value === 'object') {
if (!isObjectEmpty(value)) {
return false;
}
} else if (value !== null && value !== undefined && value !== '') {
return false;
}
}
}
return true;
}
</script>
<style>

14
web/themes/custom/caravane/caravane.theme
View File

@ -37,17 +37,5 @@ function caravane_preprocess_node(&$variables) {
}
function your_theme_preprocess_block(&$variables) {
$t = 0;
}
// function A(){
// $attr = 6;
// B($attr);
// print($attr);
// }
// function B($attr){
// $attr = 3;
// print($attr);
// }
// A();