js et css pages ressources

This commit is contained in:
2025-03-13 11:52:43 +01:00
parent c5f23ffca8
commit 3212219618
7 changed files with 326 additions and 209 deletions

View File

@@ -453,100 +453,100 @@ $(document).ready(function () {
//////////////// start lightbox galerie image page site////////////////////////
// Sélection des images et de leurs légendes dans la galerie
let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');
let currentIndex;
// Sélection des images et de leurs légendes dans la galerie
let images = document.querySelectorAll('.paragraph--type--site-diapo .lightbox-trigger');
let currentIndex;
// Création de la lightbox et de ses éléments
const lightbox = document.createElement('div');
lightbox.id = 'lightbox';
lightbox.classList.add('lightbox');
document.body.appendChild(lightbox);
// Création de la lightbox et de ses éléments
const lightbox = document.createElement('div');
lightbox.id = 'lightbox';
lightbox.classList.add('lightbox');
document.body.appendChild(lightbox);
const img = document.createElement('img');
lightbox.appendChild(img);
const img = document.createElement('img');
lightbox.appendChild(img);
// Élément pour afficher la légende
const caption = document.createElement('p');
caption.classList.add('caption');
lightbox.appendChild(caption);
// Élément pour afficher la légende
const caption = document.createElement('p');
caption.classList.add('caption');
lightbox.appendChild(caption);
const closeBtn = document.createElement('span');
closeBtn.classList.add('close');
closeBtn.innerHTML = '×';
lightbox.appendChild(closeBtn);
const closeBtn = document.createElement('span');
closeBtn.classList.add('close');
closeBtn.innerHTML = '×';
lightbox.appendChild(closeBtn);
const prevBtn = document.createElement('a');
prevBtn.classList.add('prev');
prevBtn.innerHTML = '❮';
lightbox.appendChild(prevBtn);
const prevBtn = document.createElement('a');
prevBtn.classList.add('prev');
prevBtn.innerHTML = '❮';
lightbox.appendChild(prevBtn);
const nextBtn = document.createElement('a');
nextBtn.classList.add('next');
nextBtn.innerHTML = '❯';
lightbox.appendChild(nextBtn);
const nextBtn = document.createElement('a');
nextBtn.classList.add('next');
nextBtn.innerHTML = '❯';
lightbox.appendChild(nextBtn);
// Fonction pour afficher l'image et la légende à l'index donné
function showImage(index) {
if (index < 0) index = images.length - 1;
if (index >= images.length) index = 0;
currentIndex = index;
// Fonction pour afficher l'image et la légende à l'index donné
function showImage(index) {
if (index < 0) index = images.length - 1;
if (index >= images.length) index = 0;
currentIndex = index;
// Mettre à jour l'image
img.src = images[currentIndex].getAttribute('src');
// Mettre à jour l'image
img.src = images[currentIndex].getAttribute('src');
// Récupérer la légende associée (le paragraphe dans blockquote suivant l'image)
const captionText = images[currentIndex]
.closest('.cadre-img-zoom')
.nextElementSibling.querySelector('.image-field-caption p')
.textContent;
caption.textContent = captionText || ''; // Affiche la légende ou une chaîne vide si elle est absente
lightbox.style.display = 'flex';
}
// Récupérer la légende associée (le paragraphe dans blockquote suivant l'image)
const captionText = images[currentIndex]
.closest('.cadre-img-zoom')
.nextElementSibling.querySelector('.image-field-caption p')
.textContent;
caption.textContent = captionText || ''; // Affiche la légende ou une chaîne vide si elle est absente
lightbox.style.display = 'flex';
}
// Événements de clic sur chaque image pour ouvrir le lightbox avec la légende
images.forEach((image, index) => {
image.addEventListener('click', () => {
showImage(index);
});
});
// Événements de clic sur chaque image pour ouvrir le lightbox avec la légende
images.forEach((image, index) => {
image.addEventListener('click', () => {
showImage(index);
});
});
// Fermer le lightbox
closeBtn.addEventListener('click', () => {
lightbox.style.display = 'none';
});
// Navigation pour images précédente et suivante
prevBtn.addEventListener('click', (e) => {
e.stopPropagation();
showImage(currentIndex - 1);
});
nextBtn.addEventListener('click', (e) => {
e.stopPropagation();
showImage(currentIndex + 1);
});
// Fermer le lightbox en cliquant en dehors de l'image
lightbox.addEventListener('click', (e) => {
if (e.target === lightbox) {
lightbox.style.display = 'none';
}
});
// Ajout des contrôles clavier (Échap, flèches gauche/droite)
document.addEventListener('keydown', (e) => {
if (lightbox.style.display === 'flex') {
if (e.key === 'Escape') {
// Fermer le lightbox
closeBtn.addEventListener('click', () => {
lightbox.style.display = 'none';
} else if (e.key === 'ArrowLeft') {
});
// Navigation pour images précédente et suivante
prevBtn.addEventListener('click', (e) => {
e.stopPropagation();
showImage(currentIndex - 1);
} else if (e.key === 'ArrowRight') {
});
nextBtn.addEventListener('click', (e) => {
e.stopPropagation();
showImage(currentIndex + 1);
}
}
});
});
// Fermer le lightbox en cliquant en dehors de l'image
lightbox.addEventListener('click', (e) => {
if (e.target === lightbox) {
lightbox.style.display = 'none';
}
});
// Ajout des contrôles clavier (Échap, flèches gauche/droite)
document.addEventListener('keydown', (e) => {
if (lightbox.style.display === 'flex') {
if (e.key === 'Escape') {
lightbox.style.display = 'none';
} else if (e.key === 'ArrowLeft') {
showImage(currentIndex - 1);
} else if (e.key === 'ArrowRight') {
showImage(currentIndex + 1);
}
}
});
//////////////// end lightbox galerie image page site////////////////////////
@@ -578,12 +578,9 @@ if (container) {
}
}
});
//////////////////// end wrapper views-row lessites /////////////////////////
//////////////////// start div infos site ////////////////////////
// Vérifie si la page a la classe 'node-type-site' dans le <body>
@@ -685,6 +682,72 @@ window.addEventListener("resize", moveLanguageSwitcher);
});
/////////////// start class à view-rows-ressources ////////
$(document).ready(function () {
$(".view-rows-ressources").each(function () {
let h3Container = $(this).prev("h3").find("div[class^='type-']");
let classToAdd = h3Container.attr("class"); // Récupère la classe complète (ex: "type-Documentation")
if (classToAdd) {
$(this).addClass(classToAdd); // Ajoute cette classe à .view-rows-ressources
}
});
});
////////////////// end class à view-rows-ressources ////////////////
/////////////////// start voir plus... ressources ////////////////////
$(document).ready(function () {
$(".view-rows-ressources").each(function () {
let container = $(this); // Cible uniquement cette section
let items = container.find(".views-row"); // Les éléments à afficher progressivement
let visibleCount = 4; // Nombre d'éléments visibles au départ
// Récupérer la classe `type-XXX`
let typeClass = container.attr("class").split(" ").find(cls => cls.startsWith("type-"));
let typeName = typeClass ? typeClass.replace("type-", "").replace(/-/g, " ") : "contenu"; // Nettoyer le nom
if (typeClass === "type-podcast" || typeClass === "type-video") {
visibleCount = 2; // Pour Podcast et Vidéo
}
// Ajouter un bouton dynamiquement après chaque `.view-rows-ressources`
let button = $("<button>")
.addClass("voir-plus")
.text("Voir plus de " + typeName)
.insertAfter(container);
// Cacher tous les éléments sauf les 4 premiers
items.hide().slice(0, visibleCount).show();
// Action sur le bouton
button.on("click", function () {
let hiddenItems = container.find(".views-row:hidden").slice(0, 4); // Prochains éléments à afficher
if ($(this).text().includes("Voir plus")) {
hiddenItems.slideDown(); // Afficher avec un effet de glissement
if (container.find(".views-row:hidden").length === 0) {
$(this).text("Voir moins de " + typeName); // Changer le texte du bouton si tout est affiché
}
} else {
container.find(".views-row").slice(visibleCount).slideUp(); // Replier les éléments
$(this).text("Voir plus de " + typeName); // Revenir à l'état initial
}
});
});
});
/////////////////// end voir plus... ressources ////////////////////
})(jQuery, window);

View File

@@ -30,53 +30,57 @@
}
.views-element-container{
margin-left: 15%;
width: 70%;
// .group-content{
// display: flex;
// flex-direction: row;
// flex-wrap: wrap;
.view{
margin-left: 20%;
width: 65%;
h3{
&::before{
content:"";
display: block;
border-bottom: solid 2px $blue_QDD;
// width: 80% ;
margin: auto;
}
text-align: center;
div{
.field_name{
h2{
margin-bottom: 0.6rem;
a{
font-family: "gilroy-light";
color: $blue_QDD;
font-size: 1.2rem;
}
}
}
.field_description{
margin-left: 10%;
margin-right: 10%;
font-family: "gilroy-light";
p{
margin-top: 0.6rem;
}
}
}
}
button.voir-plus{
background-color: transparent;
color: $blue_QDD;
border: solid $blue_QDD 0.5px;
padding: 0.3rem;
display: flex;
margin: auto;
}
.view-rows-ressources{
display: flex;
flex-direction: row;
flex-wrap: wrap;
h3{
&::before{
content:"";
display: block;
border-bottom: solid 2px $blue_QDD;
// width: 80% ;
margin: auto;
}
text-align: center;
// width: 100%;
flex: 0 0 100%;
div{
.field_name{
h2{
margin-bottom: 0.6rem;
a{
font-family: "gilroy-light";
color: $blue_QDD;
font-size: 1.2rem;
}
}
}
.field_description{
margin-left: 10%;
margin-right: 10%;
font-family: "gilroy-light";
p{
margin-top: 0.6rem;
}
}
}
}
.views-row{
width: 30%;
font-size: 0.5rem;
margin-bottom: 1rem;
h2{
font-family: "gilroy-semibold";
color: $blue_QDD;
@@ -140,21 +144,26 @@
.type-podcast{
div{
display: flex;
align-items: flex-start;
flex-wrap: wrap;
.content-ressource{
display: grid;
grid-template-columns: 1fr 1.2fr;
grid-template-rows: repeat(5 1fr);
margin-top: 1rem;
.field_field_images{
width: 150px;
height: auto;
flex-shrink: 0;
grid-column: 1;
grid-row: 1 /span 5;
padding: 0 1rem 1rem 1rem;
img{
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 9px;
}
}
.field_title, h2{
margin-top: 0;
}
.field_title,
.field_field_sous_titre,
.field_field_author,
@@ -164,7 +173,8 @@
.field_field_site,
.field_field_documents,
.field_field_liens{
flex: 1 1 50%;
grid-column: 2;
}
}
@@ -183,7 +193,8 @@
}
}
// }