js et css pages ressources
This commit is contained in:
@@ -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);
|
||||
|
||||
|
||||
|
@@ -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 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// }
|
||||
|
||||
|
Reference in New Issue
Block a user