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

js timeline

This commit is contained in:
ouidade 2024-07-05 22:36:05 +02:00
parent cb46670aaf
commit a0e5c1d028
4 changed files with 78 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js vendored
View File

@ -36,7 +36,7 @@ eval("\nfunction setLogoContainerSize() {\n let svgContainer = document.query
\**********************************************/
/***/ (() => {
eval("/**\n * @file\n * quartiers_de_demain behaviors.\n */\n (function (Drupal) {\n\n 'use strict';\n \n Drupal.behaviors.quartiers_de_demain = {\n attach: function (context, settings) {\n console.log('It works!');\n }\n };\n } (Drupal));\n\n \n jQuery(document).ready(function($){\n\n $('.open-block').click(function(){\n $(this).toggleClass('opened');\n\n $('.header_nav_container').toggleClass('display-nav-opened');\n \n if(mobile == true){\n $(\"body\").css(\"overflow\",\"hidden\");\n }\n\n });\n \n // Hide the header_nav_container when a link inside it is clicked\n $('.header_nav_container li').click(function() {\n $('.header_nav_container').fadeOut();\n });\n\n\n\n\n});\n\n\n// /////////////////\n//// ancre dans texte au click parragraphe correspondant arrive en dessous du header \n\n\n(function($, window) {\n var adjustAnchor = function() {\n var $anchor = $('.sidebar_first_container'),\n fixedElementHeight = 500;\n if ($anchor.length > 0) {\n $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);\n }\n };\n\n $(window).on('hashchange', function() {\n adjustAnchor();\n });\n\n\n//////////////////////////////////////////// smooth apparition des textes\n\n\nfunction scrollReaveal(){\n\n const nodes = {\n logo : document.querySelectorAll('#logo-animated-container'),\n chapeau : document.querySelectorAll('.field_body'),\n paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),\n }\n\n const showUp = {\n origin: 'bottom',\n delay: 100,\n duration: 1000,\n distance: '50px',\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n const Show = {\n delay: 100,\n duration: 600,\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n console.log(nodes);\n\n ScrollReveal().reveal(nodes.logo, Show);\n ScrollReveal().reveal(nodes.chapeau, showUp);\n ScrollReveal().reveal(nodes.paragraph, showUp);\n}\n\n\n$( document ).ready(function() {\n scrollReaveal();\n});\n\n\n\n////////////////// Timeline ///////////////////////\n\ndocument.addEventListener('DOMContentLoaded', function() {\n let currentSlide = 0;\n\n function showSlides(index) {\n const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');\n const totalSlides = slides.length;\n const visibleSlides = 3; // Number of slides to show at a time\n const maxSlide = totalSlides - visibleSlides;\n\n // Adjust the index to ensure it stays within bounds\n currentSlide = Math.max(0, Math.min(index, maxSlide));\n\n // Calculate the offset for the transform\n const offset = currentSlide * -100 / visibleSlides;\n document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;\n\n // Enable/disable arrows based on the current slide\n document.getElementById('arrowPrev').disabled = currentSlide === 0;\n document.getElementById('arrowNext').disabled = currentSlide === maxSlide;\n }\n\n function prevSlide() {\n showSlides(currentSlide - 1);\n }\n\n function nextSlide() {\n showSlides(currentSlide + 1);\n }\n\n // Attach event listeners\n document.getElementById('arrowPrev').addEventListener('click', prevSlide);\n document.getElementById('arrowNext').addEventListener('click', nextSlide);\n\n // Initialize\n showSlides(currentSlide);\n});\n\n})(jQuery, window);\n\n\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/quartiers_de_demain.js?");
eval("/**\n * @file\n * quartiers_de_demain behaviors.\n */\n (function (Drupal) {\n\n 'use strict';\n \n Drupal.behaviors.quartiers_de_demain = {\n attach: function (context, settings) {\n console.log('It works!');\n }\n };\n } (Drupal));\n\n \n jQuery(document).ready(function($){\n\n $('.open-block').click(function(){\n $(this).toggleClass('opened');\n\n $('.header_nav_container').toggleClass('display-nav-opened');\n \n if(mobile == true){\n $(\"body\").css(\"overflow\",\"hidden\");\n }\n\n });\n \n // Hide the header_nav_container when a link inside it is clicked\n $('.header_nav_container li').click(function() {\n $('.header_nav_container').fadeOut();\n });\n\n\n\n\n});\n\n\n// /////////////////\n//// ancre dans texte au click parragraphe correspondant arrive en dessous du header \n\n\n(function($, window) {\n var adjustAnchor = function() {\n var $anchor = $('.sidebar_first_container'),\n fixedElementHeight = 500;\n if ($anchor.length > 0) {\n $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);\n }\n };\n\n $(window).on('hashchange', function() {\n adjustAnchor();\n });\n\n\n//////////////////////////////////////////// smooth apparition des textes\n\n\nfunction scrollReaveal(){\n\n const nodes = {\n logo : document.querySelectorAll('#logo-animated-container'),\n chapeau : document.querySelectorAll('.field_body'),\n paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),\n }\n\n const showUp = {\n origin: 'bottom',\n delay: 100,\n duration: 1000,\n distance: '50px',\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n const Show = {\n delay: 100,\n duration: 600,\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n console.log(nodes);\n\n ScrollReveal().reveal(nodes.logo, Show);\n ScrollReveal().reveal(nodes.chapeau, showUp);\n ScrollReveal().reveal(nodes.paragraph, showUp);\n}\n\n\n$( document ).ready(function() {\n scrollReaveal();\n});\n\n\n\n////////////////// Timeline ///////////////////////\n\ndocument.addEventListener('DOMContentLoaded', function() {\n let currentSlide = 0;\n\n function showSlides(index) {\n const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');\n const totalSlides = slides.length;\n const visibleSlides = 3; // Number of slides to show at a time\n const maxSlide = totalSlides - visibleSlides;\n\n // Adjust the index to ensure it stays within bounds\n currentSlide = Math.max(0, Math.min(index, maxSlide));\n\n // Calculate the offset for the transform\n const offset = currentSlide * -100 / visibleSlides;\n document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;\n\n // Enable/disable arrows based on the current slide\n document.getElementById('arrowPrev').disabled = currentSlide === 0;\n document.getElementById('arrowNext').disabled = currentSlide === maxSlide;\n }\n\n function prevSlide() {\n showSlides(currentSlide - 1);\n }\n\n function nextSlide() {\n showSlides(currentSlide + 1);\n }\n\n // Attach event listeners\n document.getElementById('arrowPrev').addEventListener('click', prevSlide);\n document.getElementById('arrowNext').addEventListener('click', nextSlide);\n\n \n // Check and replace empty day fields\n document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {\n const dateElement = paragraph.querySelector('.date');\n const dayField = paragraph.querySelector('.field_field_date_de_jour');\n const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');\n\n if (dayField && dayField.textContent.trim()) {\n dateElement.classList.add('jour');\n } else {\n dateElement.classList.add('mois');\n const monthText = monthField.textContent.trim();\n // console.log(monthText)\n if (monthText.length >= 3) {\n monthField.textContent = monthText.slice(0, 3);\n console.log(monthField)\n }\n }\n });\n\n // Initialize\n showSlides(currentSlide);\n});\n\n})(jQuery, window);\n\n\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/quartiers_de_demain.js?");
/***/ })

24
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@ -1028,34 +1028,48 @@ footer span.totop #toTop .arrow-up::before {
padding-bottom: 1rem;
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date {
width: 50%;
width: fit-content;
display: flex;
flex-direction: column;
margin: auto;
align-items: center;
padding-right: 1rem;
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .moi-annee {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date.jour .moi-annee {
display: inline-flex;
font-size: 0.6rem;
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .moi-annee .field_field_date_de_moi {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date.jour .moi-annee .field_field_date_de_moi {
padding-right: 0.2rem;
text-transform: uppercase;
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_jour {
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date.jour .field_field_date_de_jour {
font-size: 5rem;
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date.mois .moi-annee {
display: flex;
font-size: 0.6rem;
flex-direction: column;
align-items: center;
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date.mois .moi-annee .field_field_date_de_moi {
padding-right: 0.2rem;
text-transform: uppercase;
font-size: 4rem;
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text {
border: solid rgb(7, 50, 194) 1px;
border-radius: 5%;
padding: 0.6rem 0.6rem;
width: 45%;
width: fit-content;
min-width: 50%;
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_titre {
font-size: 0.6rem;
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description p {
font-size: 0.5rem !important;
margin: 0;
}
#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .text .field_field_description .field--label-above {
display: none;

20
web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
View File

@ -130,6 +130,26 @@ document.addEventListener('DOMContentLoaded', function() {
document.getElementById('arrowPrev').addEventListener('click', prevSlide);
document.getElementById('arrowNext').addEventListener('click', nextSlide);
// Check and replace empty day fields
document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
const dateElement = paragraph.querySelector('.date');
const dayField = paragraph.querySelector('.field_field_date_de_jour');
const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
if (dayField && dayField.textContent.trim()) {
dateElement.classList.add('jour');
} else {
dateElement.classList.add('mois');
const monthText = monthField.textContent.trim();
// console.log(monthText)
if (monthText.length >= 3) {
monthField.textContent = monthText.slice(0, 3);
console.log(monthField)
}
}
});
// Initialize
showSlides(currentSlide);
});

52
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss
View File

@ -81,38 +81,62 @@
flex-direction: row;
padding-bottom: 1rem;
.date{
width: 50%;
width: fit-content;
display: flex;
flex-direction: column;
margin: auto;
align-items: center;
.moi-annee{
display: inline-flex;
font-size: 0.6rem;
.field_field_date_de_moi{
padding-right: 0.2rem;
text-transform: uppercase;
padding-right: 1rem;
&.jour{
.moi-annee{
display: inline-flex;
font-size: 0.6rem;
.field_field_date_de_moi{
padding-right: 0.2rem;
text-transform: uppercase;
}
}
.field_field_date_de_jour{
font-size: 5rem;
}
}
.field_field_date_de_jour{
font-size: 5rem;
&.mois{
.moi-annee{
display: flex;
font-size: 0.6rem;
flex-direction: column;
align-items: center;
.field_field_date_de_moi{
padding-right: 0.2rem;
text-transform: uppercase;
font-size: 4rem;
}
}
}
}
.text{
border: solid $blue_QDD 1px;
border-radius: 5%;
padding: 0.6rem 0.6rem;
width: 45%;
width: fit-content;
min-width: 50%;
.field_field_titre{
font-size: 0.6rem;
}
.field_field_description{
p{font-size: 0.5rem !important;}
.field--label-above{display: none;}
p{
font-size: 0.5rem !important;
margin: 0;
}
.field--label-above{
display: none;
}
}
}