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

modif settings backend style map et ajout field étape couleurs

Browse Source
This commit is contained in:
Valentin
2024-08-09 17:04:53 +02:00
parent f61c81c714
commit bdf8011dd2
26 changed files with 1130 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -53,27 +53,24 @@ import router from './router/router';
app.mount('#content-modale');
processEtapeLinks(store);
processStaticLinks(store)
processStaticLinks(store);
setupEtapeMapPopup(store);
}
function onClickContentLink(e, store, category){
e.preventDefault();
let a = e.currentTarget;
let nid = a.dataset.nodeNid;
// console.log(nid);
let a;
const li = e.target.closest('li');
a = li.querySelector('a');
let nid = a.dataset.nodeNid;
let general_link_fields = document.querySelectorAll('#menu > ul > li > a');
for (let field of general_link_fields) {
if (field.classList.contains('is-active')) {
field.classList.remove('is-active');
}
}
if (category === 'etape') {
store.fetchEtapeData(nid);
} else if (category === 'static') {
e.currentTarget.classList.add('is-active');
store.fetchStaticData(nid);
}
@ -92,8 +89,9 @@ import router from './router/router';
function processEtapeLinks(store){
let etape_link_fields = document.querySelectorAll('#etapes-liste div.views-field-title');
etape_link_fields.forEach((field) => {
let etape_li = document.querySelectorAll('#etapes-liste li');
etape_li.forEach((li) => {
let field = li.querySelector('div.views-field-title');
let nid = null;
let classList = field.classList;
classList.forEach((classe) => {
@ -101,18 +99,20 @@ import router from './router/router';
let result = classe.match(reg);
if (result) {
nid = result[1];
console.log(nid);
}
})
if (nid) {
let a = field.querySelector('a');
a.setAttribute('data-node-nid', nid);
a.addEventListener('click', (e) => onClickContentLink(e, store, 'etape'));
li.addEventListener('click', (e) => onClickContentLink(e, store, 'etape'));
}
let couleur = li.querySelector('.views-field-field-couleur .snippets-description').innerText;
let iconElements = li.querySelectorAll('.icone-arret > div');
for (let element of iconElements) {
element.style.backgroundColor = couleur;
}
})
}
@ -123,7 +123,6 @@ import router from './router/router';
const menuBurger = document.querySelector('#hamburger');
const menuH2 = document.querySelector('#menu > h2');
menuButton.addEventListener('click', (e) => {
// e.preventDefault();
setTimeout(() => {
menuContainer.classList.toggle('open');
menuTitle.classList.toggle('open');
@ -140,6 +139,42 @@ import router from './router/router';
}
})
}
function setupEtapeMapPopup(store) {
setTimeout(() => {
const icons = document.querySelectorAll('.leaflet-map-divicon');
for (let icon of icons) {
const colorContainer = icon.querySelector('.couleur');
const colorDiv = colorContainer.querySelector('div > div:nth-of-type(4)');
const color = colorDiv.innerText.substring(colorDiv.innerText.indexOf('>') + 1, colorDiv.innerText.indexOf('<', colorDiv.innerText.indexOf('>') + 1)).trim();
const nid = icon.querySelector('.nid');
const nidValue = nid.querySelector('div > div').innerText;
icon.addEventListener('click', function(event) {
store.fetchEtapeData(nidValue);
});
colorContainer.remove();
nid.remove();
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];
})
}
}, 500);
}
init()
} // end CaravaneTheme()

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

@ -43,18 +43,19 @@ export const useContentStore = defineStore('content', {
this.etape.etape_number = etape.attributes.field_arret_numero;
this.etape.dates = etape.attributes.field_dates;
this.etape.geofield = etape.attributes.field_geofield;
this.etape.galeries = await fetchEtapeContent('field_galleries', etape.relationships);
const partiesFetch = await fetchEtapeContent('field_parties', etape.relationships);
this.etape.galeries = await this.fetchEtapeContent('field_galleries', etape.relationships);
const partiesFetch = await this.fetchEtapeContent('field_parties', etape.relationships);
let partiesArray = []
for (let partie of partiesFetch) {
partiesArray.push({ title: partie.attributes.field_titre, text: partie.attributes.field_texte.value });
}
this.etape.parties = partiesArray;
this.etape.saison = await fetchEtapeContent('field_saison', etape.relationships);
this.etape.saison = await fetchEtapeContent('field_saison', etape.relationships);
this.etape.thematiques = await fetchEtapeContent('field_thematiques', etape.relationships);
const vignetteFetch = await fetchEtapeContent('field_vignette', etape.relationships);
this.etape.saison = await this.fetchEtapeContent('field_saison', etape.relationships);
this.etape.saison = await this.fetchEtapeContent('field_saison', etape.relationships);
this.etape.thematiques = await this.fetchEtapeContent('field_thematiques', etape.relationships);
const vignetteFetch = await this.fetchEtapeContent('field_vignette', etape.relationships);
this.etape.vignette = { url: vignetteFetch.attributes.uri.url, alt: etape.attributes.field_vignette_alt };
this.setActiveItemInMenu();
break;
}
}
@ -76,7 +77,7 @@ export const useContentStore = defineStore('content', {
if (staticContent.attributes.drupal_internal__nid == nid) {
staticContent.attributes.metatag.forEach(item => {
if (item.tag === 'meta') {
this.page.title = item.attributes.content;
this.page.title = item.attributes.content.split(' |')[0];
}
if (item.tag === 'link') {
this.href = item.attributes.href;
@ -85,6 +86,7 @@ export const useContentStore = defineStore('content', {
this.page.text = staticContent.attributes.field_texte.value;
}
}
this.setActiveItemInMenu();
} catch (error) {
this.error = 'Failed to fetch data';
console.error('Issue with getNodeData', error);
@ -95,19 +97,55 @@ export const useContentStore = defineStore('content', {
emptyAll() {
this.etape = {};
this.page = {};
this.setActiveItemInMenu();
},
setActiveItemInMenu() {
const title = this.etape.title || this.page.title;
const generalLinks = document.querySelectorAll('#menu > ul > li > a');
if (Object.entries(this.etape).length === 0 && Object.entries(this.page).length === 0) {
for (let link of generalLinks) {
link.classList.remove('is-active');
}
generalLinks[0].classList.add('is-active');
} else {
for (let link of generalLinks) {
if (link.innerText === title) {
link.classList.add('is-active');
} else {
link.classList.remove('is-active');
}
}
}
const etapeLinks = document.querySelectorAll('#etapes-liste li');
for (let link of etapeLinks) {
const a = link.querySelector('a');
if (a.innerText === title) {
link.classList.remove('inactive');
} else {
link.classList.add('inactive');
}
}
const inactiveLinks = document.querySelectorAll('#etapes-liste li.inactive');
if (inactiveLinks.length === etapeLinks.length) {
for (let link of inactiveLinks) {
link.classList.remove('inactive');
}
}
},
async fetchEtapeContent(field, relationships) {
if (relationships[field].data) {
try {
const contentLink = relationships[field].links.related.href;
const contentFetch = await REST.get(contentLink);
return contentFetch.data.data;
} catch (error) {
this.error = 'Failed to fetch data';
console.error('Issue with getNodeData', error);
}
}
}
},
});
async function fetchEtapeContent(field, relationships) {
if (relationships[field].data) {
try {
const contentLink = relationships[field].links.related.href;
const contentFetch = await REST.get(contentLink);
return contentFetch.data.data;
} catch (error) {
this.error = 'Failed to fetch data';
console.error('Issue with getNodeData', error);
}
}
}

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

@ -26,6 +26,7 @@
<div><pre><b>GEOFIELD</b>{{etape.geofield}}</pre></div>
<div><pre><b>VIGNETTE</b>{{etape.vignette}}</pre></div>
<div><pre><b>GALERIES</b>{{etape.galeries}}</pre></div>
<div><pre><b>PARTIES</b>{{etape.parties}}</pre></div>
<div><pre><b>SAISON</b>{{etape.saison}}</pre></div>
@ -61,9 +62,14 @@ const route = useRoute();
const { loading, error, href, etape, page } = storeToRefs(store);
watch(() => route.params.id, (newId) => {
store.fetchEtapeData(newId);
if (!etape.value.data) {
store.fetchStaticData(newId);
if (!newId) {
store.emptyAll();
} else {
store.fetchEtapeData(newId);
if (!etape.value.data) {
store.fetchStaticData(newId);
}
window.scrollTo({top: 0, behavior: 'smooth'});
}
});
@ -71,12 +77,9 @@ 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);
});