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

refactor du système de routing (EXPORTS DES SETTINGS DRUPAL)

Browse Source
This commit is contained in:
Valentin
2024-10-17 02:50:39 +02:00
parent 74f099ebdd
commit d5c5d81841
20 changed files with 613 additions and 712 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,253 +1,49 @@
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { initVueContentModale } from './utils/vue-setup';
import { processClickableElements } from './utils/process-clickable-elements';
import { setMenuToggle, setHamburgerWhenLogged } from './utils/layout-setup';
import { initFirstLoadRouting, handleClickableElements } from './utils/handle-navigation';
import { setupMapStore } from './utils/map-setup';
import '../scss/main.scss'
import Modale from './vuejs/Modale.vue'
import VueImageZoomer from 'vue-image-zoomer'
import 'vue-image-zoomer/dist/style.css';
import { useContentStore } from './stores/content';
import { useMapStore } from './stores/mapState';
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
// /**
// * @file
// * reha behaviors.
// * https://www.drupal.org/docs/drupal-apis/javascript-api/javascript-api-overview
// */
// (function (Drupal) {
// 'use strict';
// Drupal.behaviors.reha = {
// attach: function (context, settings) {
// console.log('It works!');
// }
// };
// } (Drupal));
// https://www.drupal.org/docs/drupal-apis/javascript-api/javascript-api-overview
(function ($, Drupal, drupalSettings) {
const CaravaneTheme = function () {
const _is_front = drupalSettings.path.isFront;
console.log('drupalSettings', drupalSettings);
const CaravaneTheme = function () {
function init () {
console.log('DrupalSettings', drupalSettings);
function init () {
console.log('CaravaneTheme init()');
initVues();
toggleMenu();
}
const baseUrl = window.location.protocol + "//" + window.location.host;
const siteName = document.querySelector('#site_name').innerText;
const { store, mapStore, router, route } = initVueContentModale();
function initVues(){
initVueContentModale();
setMenuToggle();
setHamburgerWhenLogged(drupalSettings);
}
// https://www.drupal.org/docs/extending-drupal/contributed-modules/contributed-module-documentation/leaflet/leaflet-api
function initVueContentModale(){
const app = createApp(Modale)
.use(createPinia()).use(router)
.use(VueImageZoomer);
const store = useContentStore();
const mapStore = useMapStore();
app.mount('#content-modale');
Drupal.behaviors.customLeafletInteraction = {
attach: function(context, settings) {
$(context).on('leafletMapInit', function (e, settings, map, mapid, markers) {
const {
etapeListLinks,
generalListLinks,
logoLink,
mapIcons,
} = processClickableElements();
const clickableElements = [...etapeListLinks, ...generalListLinks, logoLink, ...mapIcons];
setHamburgerWhenLogged();
setupMapStore(mapStore, map, settings);
Drupal.behaviors.customLeafletInteraction = {
attach: function(context, settings) {
$(context).on('leafletMapInit', function (e, settings, map, mapid, markers) {
mapStore.defaultMapCenter = map.getCenter();
mapStore.maxZoom = settings.settings.maxZoom;
mapStore.defaultZoom = settings.settings.minZoom;
initFirstLoadRouting(store, router, baseUrl, siteName);
initFirstLoadRouting(store, map);
processEtapeLinks(store, map);
processStaticLinks(store, map);
processHeaderLogo(store, map);
setupEtapeMapPopup(store, map);
});
}
}
}
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;
handleClickableElements(clickableElements, store, router, baseUrl, siteName, mapStore);
});
}
}
}
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");
}
init()
}
function onClickContentLink(e, store, map, category){
e.preventDefault();
let a;
if (e.target.tagName !== 'IMG') {
const li = e.target.closest('li');
a = li.querySelector('a');
} else {
a = e.target.closest('a');
}
let nid = a.dataset.nid;
if (category === 'etape') {
store.fetchEtapeData(nid, map);
} else if (category === 'static') {
if (nid) {
store.fetchStaticData(nid, map);
} else {
store.emptyAll(null, map);
}
}
return null;
}
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_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'));
}
}
}
function processHeaderLogo(store, map) {
const logo = document.querySelector('#block-caravane-logocaravane a');
logo.addEventListener('click', (e) => onClickContentLink(e, store, map, 'static'));
}
function processEtapeLinks(store, map) {
let etape_li = document.querySelectorAll('#etapes-liste li');
etape_li.forEach((li) => {
let etape_link = li.querySelector('a.etape-link');
let nid = etape_link.dataset.nid;
if (nid) {
li.addEventListener('click', (e) => onClickContentLink(e, store, map, 'etape'));
}
let couleur = etape_link.dataset.couleur;
let iconElements = li.querySelectorAll('.icone-arret > div');
for (let element of iconElements) {
element.style.backgroundColor = couleur;
}
})
}
function toggleMenu() {
const menuButton = document.querySelector('#block-caravane-mainnavigation > #menu');
const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul');
const menuTitle = document.querySelector('#menu-title');
const menuBurger = document.querySelector('#hamburger');
const menuH2 = document.querySelector('#menu > h2');
menuButton.addEventListener('click', (e) => {
setTimeout(() => {
menuContainer.classList.toggle('open');
menuTitle.classList.toggle('open');
menuBurger.classList.toggle('open');
menuH2.classList.toggle('open');
}, 50);
})
document.addEventListener('click', (e) => {
if (!menuContainer.contains(e.target) && !menuBurger.contains(e.target)) {
menuContainer.classList.remove('open');
menuTitle.classList.remove('open');
menuBurger.classList.remove('open');
menuH2.classList.remove('open');
}
})
}
function setHamburgerWhenLogged() {
if (drupalSettings.user.uid != 0) {
const menuBurger = document.querySelector('#hamburger');
const menuTitle = document.querySelector('#menu-title');
const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul');
const header = document.querySelector('.dialog-off-canvas-main-canvas');
const headerTop = header.getBoundingClientRect().top;
menuTitle.style.top = `${headerTop}px`;
menuBurger.style.top = `${headerTop}px`;
menuContainer.style.paddingTop = `${headerTop}px`;
}
}
function setupEtapeMapPopup(store, map) {
const icons = document.querySelectorAll('.leaflet-map-divicon');
for (let icon of icons) {
const colorContainer = icon.querySelector('.couleur');
let colorDivs = colorContainer.querySelectorAll('.separated-content');
let color;
colorDivs.forEach((div) => {
if (div.innerText.startsWith('<div class="snippets-description">')) {
color = div.innerText;
}
});
color = color.substring(color.indexOf('>') + 1, color.indexOf('<', color.indexOf('>') + 1)).trim();
const nid = icon.querySelector('.nid');
const nidValue = nid.querySelector('.separated-content').innerText;
icon.addEventListener('click', function(event) {
store.fetchEtapeData(nidValue, map);
});
colorContainer.style.display = "none";
nid.style.display = "none";
const iconElements = icon.querySelectorAll('div');
for (let iconElement of iconElements) {
iconElement.style.backgroundColor = color;
}
icon.removeAttribute('title');
icon.addEventListener('mouseenter', function (event) {
icon.style.transform = `${icon.style.transform} scale(1.1)`;
const popup = document.querySelector('.leaflet-tooltip-center > div');
popup.style.opacity = "1";
});
icon.addEventListener('mouseleave', function (event) {
icon.style.transform = icon.style.transform.split(' ')[0] + icon.style.transform.split(' ')[1] + icon.style.transform.split(' ')[2];
})
}
}
init()
} // end CaravaneTheme()
CaravaneTheme()
CaravaneTheme()
})(jQuery, Drupal, drupalSettings)