Slider 7.0

2024-08-19 16:45:07 +02:00 · 2024-08-19 16:45:07 +02:00 · 806e1cc14f
commit 806e1cc14f
parent a48cdf6690
6 changed files with 264 additions and 240 deletions
--- a/module/slider/changes.md
+++ b/module/slider/changes.md
@ -1,3 +1,8 @@
+# Version 7.0
+- Ajoute un affichage de la légende sous l'image
+- Corrige un tri inversé
+- Erreur dans la feuille de style de la vue index
+- Bug de calcul de la largeur maximale du slide dans la vue index
 # Version 6.5
 - Contrôle de la variable de session liée au contenu. Evite des erreurs lorsque plusieurs onglets sont ouverts.
 # Version 6.4
--- a/module/slider/slider.php
+++ b/module/slider/slider.php
@ -27,7 +27,7 @@ class slider extends common
 		'index' => self::GROUP_VISITOR
 	];

-	const VERSION = '6.4';
+	const VERSION = '7.0';
 	const REALNAME = 'Carrousel';
 	const DELETE = true;
 	const UPDATE = '0.0';
@ -57,6 +57,7 @@ class slider extends common
 		false => 'Puces invisibles'
 	];

+
 	public static $auto = [
 		true => 'Active',
 		false => 'Inactive'
@ -76,7 +77,7 @@ class slider extends common
 		1920 => '1920 pixels',
 		0 => 'Largeur de l\'écran'
 	];
-	public static $selectedMaxwidth = 0;
+	public static $selectedMaxwidth = 640;

 	// Transition
 	public static $speed = [
@ -125,12 +126,17 @@ class slider extends common

 	//Choix du tri
 	public static $sort = [
-		'asc' => 'Alphabétique naturel',
-		'dsc' => 'Alphabétique naturel inverse',
+		'dsc' => 'Alphabétique naturel',
+		'asc' => 'Alphabétique naturel inverse',
 		'rand' => 'Aléatoire',
 		'none' => 'Par défaut, sans tri',
 	];

+	public static $caption = [
+		'bottom' => 'En bas de l\'image',
+		'alt' => 'Uniquement dans le texte alternatif'
+	];
+
 	/**
 	 * Mise à jour du dossier
 	 */
@ -236,15 +242,27 @@ class slider extends common
 					];
 				}
 			}
-			// Tri des images pour affichage de la liste dans la page d'édition
+			// Tri des images par ordre alphabétique, alphabétique inverse, aléatoire ou pas
 			switch ($this->getData(['module', $this->getUrl(0), 'theme', 'sort'])) {
-				case 'dsc':
-					ksort(self::$pictures, SORT_NATURAL | SORT_FLAG_CASE);
-					break;
 				case 'asc':
 					krsort(self::$pictures, SORT_NATURAL | SORT_FLAG_CASE);
 					break;
+				case 'dsc':
+					ksort(self::$pictures, SORT_NATURAL | SORT_FLAG_CASE);
+					break;
 				case 'rand':
+					// Récupérer les clés du tableau
+					$keys = array_keys(self::$pictures);
+					// Mélanger les clés
+					shuffle($keys);
+					// Créer un nouveau tableau avec les clés mélangées
+					$shuffledPictures = [];
+					foreach ($keys as $key) {
+						$shuffledPictures[$key] = self::$pictures[$key];
+					}
+					// Mettre à jour le tableau initial avec le nouveau tableau mélangé
+					self::$pictures = $shuffledPictures;
+					break;
 				case 'none':
 				default:
 					break;
@ -331,7 +349,8 @@ class slider extends common
 							'speed' => $speed,
 							'timeout' => $timeout,
 							'namespace' => $this->getInput('sliderThemeNameSpace', helper::FILTER_STRING_SHORT),
-							'sort' => $this->getInput('sliderThemeTri', helper::FILTER_STRING_SHORT),
+							'sort' => $this->getInput('sliderThemeSort', helper::FILTER_STRING_SHORT),
+							'caption' => $this->getInput('sliderThemeCaption', helper::FILTER_STRING_SHORT),
 						],
 						'directory' => $this->getData(['module', $this->getUrl(0), 'directory']),
 						'legends' => $this->getData(['module', $this->getUrl(0), 'legends']),
@ -353,7 +372,7 @@ class slider extends common
 		// Sélection largeur de l'écran
 		self::$selectedMaxwidth = array_key_exists($this->getData(['module', $this->getUrl(0), 'theme', 'maxWidth']), self::$screenWidth)
 			? $this->getData(['module', $this->getUrl(0), 'theme', 'maxWidth'])
-			: 0;
+			: 640;

 		// Valeurs en sortie
 		$this->addOutput([
@ -378,23 +397,18 @@ class slider extends common
 				if ($fileInfos->isDot() === false and $fileInfos->isFile() and @getimagesize($fileInfos->getPathname())) {
 					self::$pictures[$directory . '/' . $fileInfos->getFilename()] = [
 						'legend' => $this->getData(['module', $galleryId, 'legends', str_replace('.', '', $fileInfos->getFilename())]),
-						'uri' => $this->getData(['module', $galleryId, 'uri', str_replace('.', '', $fileInfos->getFilename())]),
+						'uri' => $this->getData(['module', $galleryId, 'uri', str_replace('.', '', $fileInfos->getFilename())])
 					];
-					//self::$pictures['uri'][$directory . '/' . $fileInfos->getFilename()] = ;
 				}
 			}

 			// Tri des images par ordre alphabétique, alphabétique inverse, aléatoire ou pas
-			switch ($this->getData(['module', $galleryId, 'theme', 'sort'])) {
-				case 'desc':
-					uksort(self::$pictures, function ($a, $b) {
-						return strcmp(basename($a), basename($b));
-					});
-					break;
+			switch ($this->getData(['module', $this->getUrl(0), 'theme', 'sort'])) {
 				case 'asc':
-					uksort(self::$pictures, function ($a, $b) {
-						return strcmp(basename($b), basename($a));
-					});
+					krsort(self::$pictures, SORT_NATURAL | SORT_FLAG_CASE);
+					break;
+				case 'dsc':
+					ksort(self::$pictures, SORT_NATURAL | SORT_FLAG_CASE);
 					break;
 				case 'rand':
 					// Récupérer les clés du tableau
@ -410,7 +424,6 @@ class slider extends common
 					self::$pictures = $shuffledPictures;
 					break;
 				case 'none':
-					break;
 				default:
 					break;
 			}
@ -448,7 +461,6 @@ class slider extends common
 	private function init()
 	{
 		if (is_null($this->getData(['module', $this->getUrl(0), 'theme']))) {
-
 			$this->setData([
 				'module',
 				$this->getUrl(0),
--- a/module/slider/view/index/index.css
+++ b/module/slider/view/index/index.css
@ -21,30 +21,30 @@
   width: 100%;
   padding: 0;
   margin: 0 auto;
-}
+ }

-.rslides li {
+ .rslides li {
   -webkit-backface-visibility: hidden;
   position: absolute;
   display: none;
   width: 100%;
   left: 0;
   top: 0;
-}
+ }

-.rslides li:first-child {
+ .rslides li:first-child {
   position: relative;
   display: block;
   float: left;
-}
+ }

-.rslides img {
+ .rslides img {
   display: block;
   height: auto;
   float: left;
   width: 100%;
   border: 0;
-}
+ }

 #wrapper {
   margin: 0 auto;
@ -81,7 +81,7 @@
 .centered-btns_nav {
   z-index: 3;
   position: absolute;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
+   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   top: 50%;
   left: 0;
   opacity: 0.7;
@ -107,11 +107,12 @@
 .transparent-btns_nav {
   z-index: 3;
   position: absolute;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
+   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   top: 0;
   left: 0;
   display: block;
-    background: #fff; /* Fix for IE6-9 */
+   background: #fff;
+   /* Fix for IE6-9 */
   opacity: 0;
   filter: alpha(opacity=1);
   width: 48%;
@ -128,7 +129,7 @@
 .large-btns_nav {
   z-index: 3;
   position: absolute;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
+   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   opacity: 0.6;
   text-indent: -9999px;
   overflow: hidden;
@ -164,17 +165,17 @@
   left: 0;
   background: transparent url("module/slider/view/index/white.gif") no-repeat left 50%;
   width: 38px;
-}
+ }

-.white-btns_nav:active {
+ .white-btns_nav:active {
   opacity: 1.0;
-}
+ }

-.white-btns_nav.next {
+ .white-btns_nav.next {
   left: auto;
   background-position: right 50%;
   right: 0;
-}
+ }

 /**
 Boutons blancs
@ -192,6 +193,7 @@
 .white-btns_tabs {
   margin-top: 10px;
   text-align: center;
+   padding: 0px;
 }

 .centered-btns_tabs li,
@ -200,8 +202,6 @@
 .white-btns_tabs li {
   display: inline;
   float: none;
-    _float: left;
-    *float: left;
   margin-right: 5px;
 }

@ -217,8 +217,7 @@
   background: #ccc;
   background: rgba(0, 0, 0, .2);
   display: inline-block;
-    _display: block;
-    *display: block;
+   /*display: block;*/
   -webkit-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .3);
   -moz-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .3);
   box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .3);
@ -231,6 +230,20 @@
 .large-btns_here a,
 .white-btns_here a {
   background: #222;
-    background: rgba(0,0,0, .8);
+   background: rgba(0, 0, 0, .8);
 }

+ .caption {
+  position: absolute;
+  display: block;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 15px;
+  text-align: center;
+  background: #000;
+  background: rgba(0,0,0, .8);
+  color: #fff;
+  margin: inherit;
+}
+ 
--- a/module/slider/view/index/index.js.php
+++ b/module/slider/view/index/index.js.php
@ -36,22 +36,7 @@
 $(document).ready(function () {

    var maxwidth = "<?php echo $this->getData(['module', $this->getUrl(0),'theme', 'maxWidth']); ?>";
-    var screenwidth = "<?php echo intval(trim($this->getData(['theme', 'site', 'width']), 'px')); ?>";
    var sort = "<?php echo $this->getData(['module', $this->getUrl(0),'theme', 'sort']); ?>";
-    // Réduction de la taille maximale selon la largeur de la section
-
-    // Limiter à la largeur de l'écran
-    if (
-        screenwidth !== '100%' &&
-        maxwidth > screenwidth
-    ) {
-        mawwidth = screenwidth - 40;
-    }
-    // Largeur 100%
-    maxwidth = $("#site").width();
-
-
-    console.log(maxwidth);
    $("#wrapper").css('width', "100%");
    $(function () {
        $("#sliders").responsiveSlides({
--- a/module/slider/view/index/index.php
+++ b/module/slider/view/index/index.php
@ -2,13 +2,15 @@
 	<div id="wrapper">
 		<div class="rslides_container">
 			<ul class="rslides" id="sliders">
-				<!--id="<?php echo $this->getData(['module', $this->getUrl(0), 'config', 'boutonsVisibles']); ?>"> -->
 				<?php foreach ($module::$pictures as $picture => $options): ?>
 					<?php if (!empty($options['uri'])): ?>
 						<a href="<?php echo helper::baseUrl() . $options['uri']; ?>">
 					<?php endif; ?>
 					<li>
 						<img src="<?php echo helper::baseUrl(false) . $picture; ?>" alt="<?php echo $options['legend']; ?>">
+						<?php if ($this->getData(['module', $this->getUrl(0), 'theme', 'caption']) === 'bottom'): ?>
+							<p class="caption"><?php echo $options['legend']; ?></p>
+						<?php endif; ?>
 					</li>
 					<?php if (!empty($options['uri'])): ?>
 						</a>
--- a/module/slider/view/theme/theme.php
+++ b/module/slider/view/theme/theme.php
@ -53,26 +53,33 @@
 		<div class="block">
 			<h4>Navigation</h4>
 			<div class="row">
-				<div class="col4">
-					<?php echo template::select('sliderThemeTri', $module::$sort, [
+				<div class="col3">
+					<?php echo template::select('sliderThemeSort', $module::$sort, [
 						'label' => 'Tri des images',
 						'selected' => $this->getData(['module', $this->getUrl(0), 'theme', 'sort'])
 					]); ?>
 				</div>
-				<div class="col4">
+				<div class="col3">
 					<?php echo template::select('sliderThemePager', $module::$pager, [
 						'label' => 'Puces horizontales',
 						'selected' => $this->getData(['module', $this->getUrl(0), 'theme', 'pager']),
 					]); ?>
 				</div>
-				<div class="col4">
+				<div class="col3">
 					<?php echo template::select('sliderThemeNameSpace', $module::$namespace, [
 						'label' => 'Boutons latéraux',
 						'selected' => $this->getData(['module', $this->getUrl(0), 'theme', 'namespace'])
 					]); ?>
 				</div>
+				<div class="col3">
+					<?php echo template::select('sliderThemeCaption', $module::$caption, [
+						'label' => 'Légendes',
+						'selected' => $this->getData(['module', $this->getUrl(0), 'theme', 'caption'])
+					]); ?>
+				</div>
 			</div>
 		</div>
 	</div>
 </div>
+</div>
 <?php echo template::formClose(); ?>