suite sélection d'articles en sommaire

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>
 ]

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');

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 {