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

Compare commits

base: bachir:03840a20ba840c94f3c749afe8e76309f551761b
Branches Tags
bachir:master
bachir:prod
..
compare: bachir:ef760adb39ef3f839b9db70104cdcafee6d4131a
Branches Tags
bachir:master
bachir:prod

No commits in common. "03840a20ba840c94f3c749afe8e76309f551761b" and "ef760adb39ef3f839b9db70104cdcafee6d4131a" have entirely different histories.
03840a20ba ... ef760adb39

5 changed files with 37 additions and 55 deletions
Show Stats Expand all files Collapse all files

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

@ -58,6 +58,8 @@ export const useContentStore = defineStore('content', {
} }
} }
} else { } else {
console.log("partenaires");
// pour les pages partenaires // pour les pages partenaires
rawContent = await REST.get('/rest/partenaires/'); rawContent = await REST.get('/rest/partenaires/');
contentType = type; contentType = type;
@ -226,6 +228,7 @@ export const useContentStore = defineStore('content', {
// est peut-être plus lisible que fetchFromRelationships // est peut-être plus lisible que fetchFromRelationships
} else if (this.contentType === 'partenaires') { } else if (this.contentType === 'partenaires') {
console.log(rawContent);
this.content.contentTitle = "Partenaires"; this.content.contentTitle = "Partenaires";
const partenairesArray = []; const partenairesArray = [];
for (let partenaire of rawContent.data) { for (let partenaire of rawContent.data) {
@ -282,9 +285,7 @@ export const useContentStore = defineStore('content', {
} }
} }
} }
// TODO :
// get the ordered view from here
// /jsonapi/views/etapes/block_1?views-argument%5B0%5D=all&views-argument%5B1%5D=all
const orderedEtapesList = document.querySelectorAll('#etapes-liste li'); const orderedEtapesList = document.querySelectorAll('#etapes-liste li');
if (orderedEtapesList) { if (orderedEtapesList) {
for (let li of orderedEtapesList) { for (let li of orderedEtapesList) {

34
web/themes/custom/caravane/assets/js/stores/layout.js
View File

@ -15,9 +15,8 @@ export const useLayoutStore = defineStore('layout', {
}) })
this.isEtapeListRetracted = this.isDesktop ? false : true; this.isEtapeListRetracted = this.isDesktop ? false : true;
}, },
collapseEtapeListe(listeEtape, animationToggle) { collapseEtapeListe(listeEtape) {
listeEtape.classList.add('retracted'); listeEtape.classList.add('retracted');
animationToggle.classList.add('hidden');
setTimeout(() => { setTimeout(() => {
listeEtape.closest('.layout__region').classList.add('retracted'); listeEtape.closest('.layout__region').classList.add('retracted');
listeEtape.nextElementSibling.classList.add('retracted'); listeEtape.nextElementSibling.classList.add('retracted');
@ -25,11 +24,10 @@ export const useLayoutStore = defineStore('layout', {
}, 300); }, 300);
this.isEtapeListRetracted = true; this.isEtapeListRetracted = true;
}, },
expandEtapeListe(listeEtape, animationToggle) { expandEtapeListe(listeEtape) {
listeEtape.closest('.layout__region').classList.remove('retracted'); listeEtape.closest('.layout__region').classList.remove('retracted');
listeEtape.nextElementSibling.classList.remove('retracted'); listeEtape.nextElementSibling.classList.remove('retracted');
listeEtape.classList.remove('disapeared'); listeEtape.classList.remove('disapeared');
animationToggle.classList.remove('hidden');
setTimeout(() => { setTimeout(() => {
listeEtape.classList.remove('retracted'); listeEtape.classList.remove('retracted');
}, 300); }, 300);
@ -39,8 +37,6 @@ export const useLayoutStore = defineStore('layout', {
const menuTitle = document.querySelector('#menu-title'); const menuTitle = document.querySelector('#menu-title');
const menuH2 = document.querySelector('#menu > h2'); const menuH2 = document.querySelector('#menu > h2');
menuContainer.style.display = 'none';
menuBurger.addEventListener('click', (e) => { menuBurger.addEventListener('click', (e) => {
this.toggleHamburgerMenu(menuBurger, menuContainer, menuTitle, menuH2); this.toggleHamburgerMenu(menuBurger, menuContainer, menuTitle, menuH2);
}); });
@ -65,18 +61,20 @@ export const useLayoutStore = defineStore('layout', {
toggleHamburgerMenu(menuBurger, menuContainer, menuTitle, menuH2) { toggleHamburgerMenu(menuBurger, menuContainer, menuTitle, menuH2) {
setTimeout(() => { setTimeout(() => {
if (!this.isHamburgerMenuOpen) menuContainer.style.display = 'block'; if (!this.isHamburgerMenuOpen) menuContainer.style.display = 'block';
setTimeout(() => { menuContainer.classList.toggle('open');
menuContainer.classList.toggle('open'); menuTitle.classList.toggle('open');
menuTitle.classList.toggle('open'); menuBurger.classList.toggle('open');
menuBurger.classList.toggle('open'); menuH2.classList.toggle('open');
menuH2.classList.toggle('open'); // console.log('isHamburgerMenuOpen', this.isHamburgerMenuOpen);
if (this.isHamburgerMenuOpen) { console.log(this.isHamburgerMenuOpen);
setTimeout(() => { if (this.isHamburgerMenuOpen) {
menuContainer.style.display = 'none'; setTimeout(() => {
}, 300); menuContainer.style.display = 'none';
} }, 300);
this.isHamburgerMenuOpen = !this.isHamburgerMenuOpen; }
}, 50); console.log('TOGGLE', this.isHamburgerMenuOpen);
console.log('isHamburgerMenuOpen', this.isHamburgerMenuOpen);
this.isHamburgerMenuOpen = !this.isHamburgerMenuOpen;
}, 50); }, 50);
} }
}, },

24
web/themes/custom/caravane/assets/js/utils/layout-setup.js
View File

@ -9,36 +9,34 @@ export function handleReactiveness() {
const listeEtape = document.querySelector('#etapes-liste'); const listeEtape = document.querySelector('#etapes-liste');
const animationToggle = document.querySelector('#animation-toggle'); if (!layoutStore.isDesktop) layoutStore.collapseEtapeListe(listeEtape, layoutStore);
if (!layoutStore.isDesktop) layoutStore.collapseEtapeListe(listeEtape, animationToggle);
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
if (layoutStore.isDesktop && layoutStore.isEtapeListRetracted) { if (layoutStore.isDesktop && layoutStore.isEtapeListRetracted) {
layoutStore.expandEtapeListe(listeEtape, animationToggle); layoutStore.expandEtapeListe(listeEtape, layoutStore);
} else if (!layoutStore.isDesktop && !layoutStore.isEtapeListRetracted) { } else if (!layoutStore.isDesktop && !layoutStore.isEtapeListRetracted) {
layoutStore.collapseEtapeListe(listeEtape, animationToggle); layoutStore.collapseEtapeListe(listeEtape, layoutStore);
} }
}); });
listeToggleButton.addEventListener('click', () => { listeToggleButton.addEventListener('click', () => {
if (!layoutStore.isDesktop) { if (!layoutStore.isDesktop) {
if (!layoutStore.isEtapeListRetracted) { if (!layoutStore.isEtapeListRetracted) {
layoutStore.collapseEtapeListe(listeEtape, animationToggle); layoutStore.collapseEtapeListe(listeEtape, layoutStore);
} else { } else {
layoutStore.expandEtapeListe(listeEtape, animationToggle); layoutStore.expandEtapeListe(listeEtape, layoutStore);
} }
} }
}); });
})(); })();
} }
export function setMenuToggle() { export function setMenuToggle() {
const layoutStore = useLayoutStore(); const layoutStore = useLayoutStore();
const menuBurger = document.querySelector('#hamburger'); const menuBurger = document.querySelector('#hamburger');
const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul'); const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul');
layoutStore.setUpHamburgerToggle(menuBurger, menuContainer); layoutStore.setUpHamburgerToggle(menuBurger, menuContainer);
} }
@ -50,8 +48,8 @@ export function setHamburgerWhenLogged(drupalSettings) {
const header = document.querySelector('.dialog-off-canvas-main-canvas'); const header = document.querySelector('.dialog-off-canvas-main-canvas');
const headerTop = header.getBoundingClientRect().top; const headerTop = header.getBoundingClientRect().top;
menuTitle.style.top = `${headerTop}px`; menuTitle.style.top = `${headerTop}px`;
menuBurger.style.top = `${headerTop}px`; menuBurger.style.top = `${headerTop}px`;
menuContainer.style.paddingTop = `${headerTop}px`; menuContainer.style.paddingTop = `${headerTop}px`;
} }
} }

12
web/themes/custom/caravane/assets/scss/main.scss
View File

@ -581,9 +581,6 @@ body{
opacity: 1; opacity: 1;
display: block; display: block;
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
@media screen and (min-width: $desktop-min-width) {
max-width: 30vw;
}
&.retracted { &.retracted {
opacity: 0; opacity: 0;
} }
@ -638,7 +635,7 @@ body{
font-family: 'Joost', sans-serif; font-family: 'Joost', sans-serif;
font-weight: lighter; font-weight: lighter;
font-size: $m-font-size-mobile; font-size: $m-font-size-mobile;
align-self: center; align-self: end;
@media screen and (min-width: $desktop-min-width) { @media screen and (min-width: $desktop-min-width) {
font-size: $m-font-size-desktop; font-size: $m-font-size-desktop;
} }
@ -1239,10 +1236,6 @@ body{
@media screen and (min-width: $desktop-min-width) { @media screen and (min-width: $desktop-min-width) {
z-index: 5; z-index: 5;
} }
transition: opacity 0.3s ease-out;
&.hidden {
opacity: 0;
}
> div { > div {
cursor: pointer; cursor: pointer;
position: fixed; position: fixed;
@ -1251,10 +1244,11 @@ body{
z-index: 999; z-index: 999;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.1rem 1.2rem; padding: 0.4rem 1.2rem;
border-radius: 10rem; border-radius: 10rem;
background-color: white; background-color: white;
transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out;
> div { > div {
margin-right: 1rem; margin-right: 1rem;
> p { > p {

15
web/themes/custom/caravane/templates/views-view-field--block-1--etape-list.html.twig
View File

@ -20,21 +20,12 @@
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
{% if output|length == 5 {% if output|length == 5
and output|replace( and output|replace(
{'0':'', '1':'', '2':'', '3':'', '4':'', '5':'', '6':'', '7':'', '8':'', '9':''} {'0':'', '1':'', '2':'', '3':'', '4':'', '5':'', '6':'', '7':'', '8':'', '9':''}
) == '' ) == ''
%} %}
<p>{{- output|slice(0, 2) -}}</p> <p>{{- output|slice(0, 2) -}}</p>
{% else %} {% else %}
{% set split_output = output|split('>') %} <p>{{- output -}}</p>
<p>
{% if split_output|length == 7 %}
{{- output -}}
{% else %}
{{- split_output[0]|raw -}}>
{# non breaking hyphen #}
{{- split_output[1]|default('')|replace({'-': '‑'})|raw -}}>
{% endif %}
</p>
{% endif %} {% endif %}