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

actus caroussel overflow....

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-07-08 22:36:58 +02:00
parent 47dba3466b
commit 47792a44c0
8 changed files with 206 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -150,133 +150,149 @@
});
//////////////////////// smooth apparition des textes
//////////////////////// smooth apparition des textes
function scrollReaveal(){
function scrollReaveal(){
const nodes = {
logo : document.querySelectorAll('#logo-animated-container'),
chapeau : document.querySelectorAll('.field_body'),
paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),
}
const showUp = {
origin: 'bottom',
delay: 100,
duration: 1000,
distance: '50px',
easing: 'cubic-bezier(0.5, 0, 0, 1)'
}
const Show = {
delay: 100,
duration: 600,
easing: 'cubic-bezier(0.5, 0, 0, 1)'
}
console.log(nodes);
ScrollReveal().reveal(nodes.logo, Show);
ScrollReveal().reveal(nodes.chapeau, showUp);
ScrollReveal().reveal(nodes.paragraph, showUp);
}
$( document ).ready(function() {
scrollReaveal();
});
////////////////// Timeline ///////////////////////
document.addEventListener('DOMContentLoaded', function() {
let currentSlide = 0;
function getVisibleSlides() {
if (window.innerWidth <= 600) {
return 1; // Show 1 slide on small screens
} else if (window.innerWidth <= 900) {
return 2; // Show 2 slides on medium screens
} else {
return 3; // Show 3 slides on large screens
const nodes = {
logo : document.querySelectorAll('#logo-animated-container'),
chapeau : document.querySelectorAll('.field_body'),
paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),
}
const showUp = {
origin: 'bottom',
delay: 100,
duration: 1000,
distance: '50px',
easing: 'cubic-bezier(0.5, 0, 0, 1)'
}
const Show = {
delay: 100,
duration: 600,
easing: 'cubic-bezier(0.5, 0, 0, 1)'
}
console.log(nodes);
ScrollReveal().reveal(nodes.logo, Show);
ScrollReveal().reveal(nodes.chapeau, showUp);
ScrollReveal().reveal(nodes.paragraph, showUp);
}
function showSlides(index) {
const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');
const totalSlides = slides.length;
const visibleSlides = getVisibleSlides();
const maxSlide = totalSlides - visibleSlides + 1;
// Adjust the index to ensure it stays within bounds
currentSlide = Math.max(0.6, Math.min(index, maxSlide));
$( document ).ready(function() {
scrollReaveal();
});
// Calculate the offset for the transform
const offset = currentSlide * -70 / visibleSlides;
document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;
// Enable/disable arrows based on the current slide
document.getElementById('arrowPrev').disabled = currentSlide === 0;
document.getElementById('arrowNext').disabled = currentSlide === maxSlide;
}
function prevSlide() {
showSlides(currentSlide - 1);
}
////////////////// Timeline ///////////////////////
function nextSlide() {
showSlides(currentSlide + 1);
}
// Attach event listeners
document.getElementById('arrowPrev').addEventListener('click', prevSlide);
document.getElementById('arrowNext').addEventListener('click', nextSlide);
document.addEventListener('DOMContentLoaded', function() {
let currentSlide = 0;
// Initialize the first view of the slides
showSlides(currentSlide);
// Update month field to only show the first 3 letters
document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
if (monthField) {
const monthText = monthField.textContent.trim();
if (monthText.length >= 3) {
monthField.textContent = monthText.slice(0, 3);
function getVisibleSlides() {
if (window.innerWidth <= 600) {
return 1; // Show 1 slide on small screens
} else if (window.innerWidth <= 900) {
return 2; // Show 2 slides on medium screens
} else {
return 3; // Show 3 slides on large screens
}
}
});
// Handle window resize
window.addEventListener('resize', function() {
showSlides(currentSlide); // Recalculate the slides on resize
});
// });
function showSlides(index) {
const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');
const totalSlides = slides.length;
const visibleSlides = getVisibleSlides();
const maxSlide = totalSlides - visibleSlides + 1;
// Adjust the index to ensure it stays within bounds
currentSlide = Math.max(0.6, Math.min(index, maxSlide));
// Initialize
showSlides(currentSlide);
});
// Calculate the offset for the transform
const offset = currentSlide * -70 / visibleSlides;
document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;
document.addEventListener('DOMContentLoaded', function() {
// Iterate over each .date element
document.querySelectorAll('.date').forEach(function(dateElement) {
const date2Element = dateElement.querySelector('.date2');
const yearElement = dateElement.querySelector('.field_field_date_de_annee');
// Check if the .date2 element is empty
if (date2Element && !date2Element.textContent.trim()) {
// Add the .only class to the year element
yearElement.classList.add('only');
// Enable/disable arrows based on the current slide
document.getElementById('arrowPrev').disabled = currentSlide === 0;
document.getElementById('arrowNext').disabled = currentSlide === maxSlide;
}
function prevSlide() {
showSlides(currentSlide - 1);
}
function nextSlide() {
showSlides(currentSlide + 1);
}
// Attach event listeners
document.getElementById('arrowPrev').addEventListener('click', prevSlide);
document.getElementById('arrowNext').addEventListener('click', nextSlide);
// Initialize the first view of the slides
showSlides(currentSlide);
// Update month field to only show the first 3 letters
document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
if (monthField) {
const monthText = monthField.textContent.trim();
if (monthText.length >= 3) {
monthField.textContent = monthText.slice(0, 3);
}
}
});
// Handle window resize
window.addEventListener('resize', function() {
showSlides(currentSlide); // Recalculate the slides on resize
});
// });
// Initialize
showSlides(currentSlide);
});
document.addEventListener('DOMContentLoaded', function() {
// Iterate over each .date element
document.querySelectorAll('.date').forEach(function(dateElement) {
const date2Element = dateElement.querySelector('.date2');
const yearElement = dateElement.querySelector('.field_field_date_de_annee');
// Check if the .date2 element is empty
if (date2Element && !date2Element.textContent.trim()) {
// Add the .only class to the year element
yearElement.classList.add('only');
}
});
});
});
// slideshow home
/////////////////// caracteres body actus/////////////////////////
document.addEventListener('DOMContentLoaded', function() {
// Maximum number of characters to display
const maxChars = 140; // Adjust this value as needed
document.querySelectorAll('#actus-caroussel .node-type-actualite .field_body p').forEach(function(paragraph) {
let text = paragraph.textContent.trim();
if (text.length > maxChars) {
let truncatedText = text.slice(0, maxChars) + '...';
paragraph.textContent = truncatedText;
}
});
});
//////////// slideshow home //////////////////////////
$(document).ready(function(){
$('.content-actus .view').slick({

1
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/actualite.scss
View File

@@ -1,5 +1,4 @@
#page-node{
// .node-id-11{
.content_container{
width: 60%;
display: flex;

11
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/actu-caroussel-home.scss
View File

@@ -2,9 +2,10 @@
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 3rem;
h2{
width: fit-content;
padding-bottom: 0.6rem;
padding-bottom: 0.4rem;
margin-top: 3rem;
margin-bottom: 3rem;
font-size: 1.7rem;
@@ -20,10 +21,10 @@
}
.views-row{
width: 500px !important;
padding: 2rem;
@media(max-width: 550px){
width: 296px !important;
}
padding: 1rem;
article.node-type-actualite{
display: flex;
flex-direction: column;
@@ -68,6 +69,7 @@
color: red;
display: inline-flex;
align-items: center;
font-size: 0.6rem;
&::before{
content: url('../img/date-actu.svg');
padding-right: 0.2rem;
@@ -86,7 +88,9 @@
}
}
.field_body{
// visibility: visible;
opacity: 1 !important;
transform: none !important;
p{
margin: 0;
}
@@ -99,5 +103,6 @@
top: 60px;
}
}
}

2
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/slick-theme.scss
View File

@@ -76,7 +76,7 @@ $slick-opacity-not-active: 0.25 !default;
cursor: pointer;
background: transparent;
color: transparent;
top: -1rem;
top: -2rem;
-webkit-transform: translate(0, -1rem);
-ms-transform: translate(0, -1rem);
transform: translate(0, -1rem);

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

@@ -4,7 +4,7 @@
#home{
* { box-sizing: border-box; }
.config_pages--type--deroulement{
.__container-deroulement{
background-color: #f3f5fcff;
background-image: url(../../../dist/assets/img/pillier-1.svg);
background-repeat: no-repeat;
@@ -13,12 +13,19 @@
@media(max-width:1090px){
cursor:grab;
}
h2{
width: fit-content;
margin: auto;
padding-top: 3rem;
font-size: 1.7rem;
font-weight: bold;
}
}
.timeline {
white-space: nowrap;
overflow: hidden;
padding-top: 10rem;
padding-top: 5rem;
padding-bottom: 4rem;
@media(max-width:1090px){
padding-top: 18rem;
@@ -29,6 +36,7 @@
margin: auto;
position: relative;
top: -115px;
padding-bottom: 2rem;
@media(max-width:1090px){
top: -211px;
display: none;
@@ -39,10 +47,10 @@
&:hover{
opacity: 0.5;
}
svg{
padding: 0.5rem;
// svg{
// padding: 0.5rem;
}
// }
}
}
.__timeline-content{
@@ -179,7 +187,8 @@
min-width: 65%;
.field_field_titre{
font-size: 0.5rem;
@media(max-width:10900px){
font-weight: 800;
@media(max-width:1090px){
font-size: 1rem;
}
}