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

mouvement et lock de la carte + prevent refresh homepage

Browse Source
This commit is contained in:
Valentin
2024-10-07 23:39:50 +02:00
parent 6dad6cc7bc
commit 80f7f43370
7 changed files with 225 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,6 +7,7 @@ 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
@@ -31,19 +32,13 @@ import router from './router/router';
(function ($, Drupal, drupalSettings) {
const CaravaneTheme = function () {
const _is_front = drupalSettings.path.isFront
console.log('drupalSettings', drupalSettings)
const _is_front = drupalSettings.path.isFront;
console.log('drupalSettings', drupalSettings);
// let _I18n
// ___ _ _
// |_ _|_ _ (_) |_
// | || ' \| | _|
// |___|_||_|_|\__|
function init () {
console.log('CaravaneTheme init()')
initVues()
toggleMenu()
console.log('CaravaneTheme init()');
initVues();
toggleMenu();
}
function initVues(){
@@ -55,45 +50,67 @@ import router from './router/router';
.use(createPinia()).use(router)
.use(VueImageZoomer);
const store = useContentStore();
const mapStore = useMapStore();
app.mount('#content-modale');
processEtapeLinks(store);
processStaticLinks(store);
setupEtapeMapPopup(store);
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;
processEtapeLinks(store, map);
processStaticLinks(store, map);
processHeaderLogo(store, map);
setupEtapeMapPopup(store, map);
});
}
}
}
function onClickContentLink(e, store, category){
function onClickContentLink(e, store, map, category){
e.preventDefault();
let a;
const li = e.target.closest('li');
a = li.querySelector('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.nodeNid;
if (category === 'etape') {
store.fetchEtapeData(nid);
store.fetchEtapeData(nid, map);
} else if (category === 'static') {
store.fetchStaticData(nid);
if (nid) {
store.fetchStaticData(nid, map);
} else {
store.emptyAll(null, map);
}
}
return null;
}
function processStaticLinks(store){
let general_link_fields = document.querySelectorAll('#menu > ul > li:not(:first-of-type) > a');
function processStaticLinks(store, map) {
let general_link_fields = document.querySelectorAll('#menu > ul > li > a');
for (let field of general_link_fields) {
let general_link_href = field.getAttribute('href');
const nid = general_link_href.charAt(general_link_href.length-1);
field.setAttribute('data-node-nid', nid);
field.addEventListener('click', (e) => onClickContentLink(e, store, 'static'));
field.setAttribute('data-node-nid', parseInt(nid));
field.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){
function processEtapeLinks(store, map) {
let etape_li = document.querySelectorAll('#etapes-liste li');
etape_li.forEach((li) => {
let field = li.querySelector('div.views-field-title');
@@ -110,7 +127,7 @@ import router from './router/router';
if (nid) {
let a = field.querySelector('a');
a.setAttribute('data-node-nid', nid);
li.addEventListener('click', (e) => onClickContentLink(e, store, 'etape'));
li.addEventListener('click', (e) => onClickContentLink(e, store, map, 'etape'));
}
let couleur = li.querySelector('.views-field-field-couleur .snippets-description').innerText;
let iconElements = li.querySelectorAll('.icone-arret > div');
@@ -145,52 +162,43 @@ import router from './router/router';
})
}
function setupEtapeMapPopup(store) {
Drupal.behaviors.customLeafletInteraction = {
attach: function(context, settings) {
$(context).on('leafletMapInit', function (e, settings, map, mapid, markers) {
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();
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;
const nid = icon.querySelector('.nid');
const nidValue = nid.querySelector('.separated-content').innerText;
icon.addEventListener('click', function(event) {
store.fetchEtapeData(nidValue);
});
//colorContainer.remove();
//nid.remove();
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];
})
}
});
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];
})
}
}