From be581c0f3ee1294966245a8bb755fdca8c00c8de Mon Sep 17 00:00:00 2001
From: chankalan <chankalan@choc0.net>
Date: Wed, 30 Nov 2022 15:42:24 +0100
Subject: [PATCH] =?UTF-8?q?suite=20s=C3=A9lection=20d'articles=20en=20somm?=
 =?UTF-8?q?aire?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 squelettes/content/sommaire_selection.html | 57 ++++++++++++----------
 squelettes/javascript/perso.js             |  2 +-
 squelettes/scss/styles/_perso.scss         | 32 +++++++++---
 3 files changed, 59 insertions(+), 32 deletions(-)

diff --git a/squelettes/content/sommaire_selection.html b/squelettes/content/sommaire_selection.html
index 1236b78..400d0d0 100644
--- a/squelettes/content/sommaire_selection.html
+++ b/squelettes/content/sommaire_selection.html
@@ -75,46 +75,53 @@ ensuite inclusion en statique pour la gestion du cache indépendante - à vérif
 
 <B_selection>
 <div class="liste articles emissions emissions_selectionaccueil">
-<h2>[(#CONFIG{libreavous/selectionaccueiltitre}|sinon{<:libreavous:selection_d_emissions:>})]</h2>
+<h2>[(#CONFIG{libreavous/selectionaccueiltitre}|sinon{<:libreavous:selection_d_emissions:>}) ]<span class="avant disabled"></span><span class="ensuite"></span></h2>
 <div class="owl-theme owl-carousel [ (#TOTAL_BOUCLE|>={3}|oui)owlselectionaccueil]">
 <BOUCLE_selection(ARTICLES){id_article IN #CONFIG{libreavous/selectionaccueil}|picker_selected{article}}>
-	<INCLURE{fond=inclure/resume/emission,id_article} />
+	<div data-item="#COMPTEUR_BOUCLE"><INCLURE{fond=inclure/resume/emission,id_article} /></div>
 </BOUCLE_selection>
 </div>
 
 [(#TOTAL_BOUCLE|>={3}|oui)
 <script>
 jQuery(function($){
-	$(".owlselectionaccueil").owlCarousel({
+	var owl = $('.owl-carousel');
+	owl.owlCarousel({
 		loop:false,
      	margin:30,
 		items: 3,
 		slideBy: 3,
 		dots: false,
-// 		navContainerClass:'navowl',
-		nav: true,
-		autoplay: true,
-		autoplayTimeout: 5000,
-		autoplayHoverPause: true,
-		lazyLoad: true,
+		nav: false,
 		autoHeight: false,
-		URLhashListener: true,
-		startPosition: 'URLHash',
-		responsive : {
-			// breakpoint from 0 up
-			0 : {
-				items: 1,
-			},
-			// breakpoint from 480 up
-			560 : {
-				items: 2,
-			},
-			// breakpoint from 768 up
-			860 : {
-				items: 3,
-			}
-		}
+		onTranslated: callback
 	});
+	// Go to the next item
+	$('.ensuite').click(function() {
+		owl.trigger('next.owl.carousel');
+	})
+	// Go to the previous item
+	$('.avant').click(function() {
+		owl.trigger('prev.owl.carousel');
+// 		owl.trigger('prev.owl.carousel', [100]);
+	})
+	function callback(event) {
+		var totalItems = $('.owl-item').length;
+		var firstitemactive = $('.owl-item.active').first().find('div').attr('data-item');
+		var lastitemactive = $('.owl-item.active').last().find('div').attr('data-item');
+		if (lastitemactive == totalItems) {
+			$('.ensuite').addClass('disabled');
+		}
+		if (lastitemactive < totalItems) {
+			$('.ensuite').removeClass('disabled');
+		}
+		if (firstitemactive == 1) {
+			$('.avant').addClass('disabled');
+		}
+		if (firstitemactive > 1) {
+			$('.avant').removeClass('disabled');
+		}
+	}
 });
 </script>
 ]
diff --git a/squelettes/javascript/perso.js b/squelettes/javascript/perso.js
index 8ee36c5..6095d95 100644
--- a/squelettes/javascript/perso.js
+++ b/squelettes/javascript/perso.js
@@ -1,5 +1,5 @@
 $(function() {
-	
+
 // 	$('.header_menu .abonnement label.btn').on('click', function(){
 // 		$(this).siblings('#email').toggleClass('vu');
 // 		$(this).parent().siblings('button').toggleClass('vu');
diff --git a/squelettes/scss/styles/_perso.scss b/squelettes/scss/styles/_perso.scss
index b01b917..d9a6e5d 100644
--- a/squelettes/scss/styles/_perso.scss
+++ b/squelettes/scss/styles/_perso.scss
@@ -285,7 +285,7 @@ html .formulaire_spip input[type="text"] {
 	}
 
 }
-.body__sommaire .page_main .annonce {
+.body__sommaire .page_main .annonce, .body__sommaire_selection .page_main .annonce {
 		h1 {
 			margin-top:0;
 		}
@@ -860,7 +860,7 @@ a:hover .fab, a:hover .fas {
 }
 
 /* page sommaire */
-.body__sommaire .page_main {
+.body__sommaire .page_main, .body__sommaire_selection .page_main {
 	h1 {
 		margin: 1em 0 0.8em;
 	}
@@ -1024,11 +1024,28 @@ a:hover .fab, a:hover .fas {
 
 	&.emissions_selectionaccueil {
 		position: relative;
+		.avant {
+			@include triangle(left, white, 0.4em);
+		}
+		.ensuite {
+			@include triangle(right, white, 0.4em);
+		}
+		.avant, .ensuite {
+			display: inline-block;
+			margin: 0 0.2em;
+			cursor: pointer;
+			&.disabled {
+				opacity: 0.5;
+				cursor: default;
+			}
+		}
 		.owl-carousel {
+			margin: 0 -4rem;
+			width: auto;
 			article {
 /* 				width: 30%; */
 				padding: 0 1rem;
-				.texte_aside, .podcast, .sujets, .btn.blanc {
+				h1 small, .texte_aside, .podcast, .sujets {
 					display: none;
 					opacity: 0;
 				}
@@ -1082,10 +1099,13 @@ a:hover .fab, a:hover .fas {
 
 		}
 	}
-	.emission-resume.article-resume h1 small {
-		display: block;
+	.emission-resume.article-resume h1 {
+		margin-top: 0.8em;
+		margin-bottom: 1.5em;
+		small {
+			display: block;
+		}
 	}
-
 }
 .liste.emissions.chroniques {
 	> ul > li {