ZwiiCMS-Team/ZwiiCampus
ZwiiCMS-Team/ZwiiCampus
8
6
Fork 1
Code Releases 75 Activity

Slider 7.0

Browse Source
This commit is contained in:
Fred Tempez 2024-08-19 16:45:07 +02:00
parent a48cdf6690
commit 806e1cc14f
6 changed files with 264 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
module/slider/changes.md
View File

@ -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 # Version 6.5
- Contrôle de la variable de session liée au contenu. Evite des erreurs lorsque plusieurs onglets sont ouverts. - Contrôle de la variable de session liée au contenu. Evite des erreurs lorsque plusieurs onglets sont ouverts.
# Version 6.4 # Version 6.4

58
module/slider/slider.php
View File

@ -27,7 +27,7 @@ class slider extends common
'index' => self::GROUP_VISITOR 'index' => self::GROUP_VISITOR
]; ];
const VERSION = '6.4'; const VERSION = '7.0';
const REALNAME = 'Carrousel'; const REALNAME = 'Carrousel';
const DELETE = true; const DELETE = true;
const UPDATE = '0.0'; const UPDATE = '0.0';
@ -57,6 +57,7 @@ class slider extends common
false => 'Puces invisibles' false => 'Puces invisibles'
]; ];
public static $auto = [ public static $auto = [
true => 'Active', true => 'Active',
false => 'Inactive' false => 'Inactive'
@ -76,7 +77,7 @@ class slider extends common
1920 => '1920 pixels', 1920 => '1920 pixels',
0 => 'Largeur de l\'écran' 0 => 'Largeur de l\'écran'
]; ];
public static $selectedMaxwidth = 0; public static $selectedMaxwidth = 640;
// Transition // Transition
public static $speed = [ public static $speed = [
@ -125,12 +126,17 @@ class slider extends common
//Choix du tri //Choix du tri
public static $sort = [ public static $sort = [
'asc' => 'Alphabétique naturel', 'dsc' => 'Alphabétique naturel',
'dsc' => 'Alphabétique naturel inverse', 'asc' => 'Alphabétique naturel inverse',
'rand' => 'Aléatoire', 'rand' => 'Aléatoire',
'none' => 'Par défaut, sans tri', '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 * 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'])) { switch ($this->getData(['module', $this->getUrl(0), 'theme', 'sort'])) {
case 'dsc':
ksort(self::$pictures, SORT_NATURAL | SORT_FLAG_CASE);
break;
case 'asc': case 'asc':
krsort(self::$pictures, SORT_NATURAL | SORT_FLAG_CASE); krsort(self::$pictures, SORT_NATURAL | SORT_FLAG_CASE);
break; break;
case 'dsc':
ksort(self::$pictures, SORT_NATURAL | SORT_FLAG_CASE);
break;
case 'rand': 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': case 'none':
default: default:
break; break;
@ -331,7 +349,8 @@ class slider extends common
'speed' => $speed, 'speed' => $speed,
'timeout' => $timeout, 'timeout' => $timeout,
'namespace' => $this->getInput('sliderThemeNameSpace', helper::FILTER_STRING_SHORT), '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']), 'directory' => $this->getData(['module', $this->getUrl(0), 'directory']),
'legends' => $this->getData(['module', $this->getUrl(0), 'legends']), 'legends' => $this->getData(['module', $this->getUrl(0), 'legends']),
@ -353,7 +372,7 @@ class slider extends common
// Sélection largeur de l'écran // Sélection largeur de l'écran
self::$selectedMaxwidth = array_key_exists($this->getData(['module', $this->getUrl(0), 'theme', 'maxWidth']), self::$screenWidth) self::$selectedMaxwidth = array_key_exists($this->getData(['module', $this->getUrl(0), 'theme', 'maxWidth']), self::$screenWidth)
? $this->getData(['module', $this->getUrl(0), 'theme', 'maxWidth']) ? $this->getData(['module', $this->getUrl(0), 'theme', 'maxWidth'])
: 0; : 640;
// Valeurs en sortie // Valeurs en sortie
$this->addOutput([ $this->addOutput([
@ -378,23 +397,18 @@ class slider extends common
if ($fileInfos->isDot() === false and $fileInfos->isFile() and @getimagesize($fileInfos->getPathname())) { if ($fileInfos->isDot() === false and $fileInfos->isFile() and @getimagesize($fileInfos->getPathname())) {
self::$pictures[$directory . '/' . $fileInfos->getFilename()] = [ self::$pictures[$directory . '/' . $fileInfos->getFilename()] = [
'legend' => $this->getData(['module', $galleryId, 'legends', str_replace('.', '', $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 // Tri des images par ordre alphabétique, alphabétique inverse, aléatoire ou pas
switch ($this->getData(['module', $galleryId, 'theme', 'sort'])) { switch ($this->getData(['module', $this->getUrl(0), 'theme', 'sort'])) {
case 'desc':
uksort(self::$pictures, function ($a, $b) {
return strcmp(basename($a), basename($b));
});
break;
case 'asc': case 'asc':
uksort(self::$pictures, function ($a, $b) { krsort(self::$pictures, SORT_NATURAL | SORT_FLAG_CASE);
return strcmp(basename($b), basename($a)); break;
}); case 'dsc':
ksort(self::$pictures, SORT_NATURAL | SORT_FLAG_CASE);
break; break;
case 'rand': case 'rand':
// Récupérer les clés du tableau // Récupérer les clés du tableau
@ -410,7 +424,6 @@ class slider extends common
self::$pictures = $shuffledPictures; self::$pictures = $shuffledPictures;
break; break;
case 'none': case 'none':
break;
default: default:
break; break;
} }
@ -448,7 +461,6 @@ class slider extends common
private function init() private function init()
{ {
if (is_null($this->getData(['module', $this->getUrl(0), 'theme']))) { if (is_null($this->getData(['module', $this->getUrl(0), 'theme']))) {
$this->setData([ $this->setData([
'module', 'module',
$this->getUrl(0), $this->getUrl(0),

399
module/slider/view/index/index.css
View File

@ -15,222 +15,235 @@
/*! http://responsiveslides.com v1.55 by @arielsalminen */ /*! http://responsiveslides.com v1.55 by @arielsalminen */
.rslides { .rslides {
position: relative; position: relative;
list-style: none; list-style: none;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
padding: 0; padding: 0;
margin: 0 auto; margin: 0 auto;
} }
.rslides li { .rslides li {
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
position: absolute; position: absolute;
display: none; display: none;
width: 100%; width: 100%;
left: 0; left: 0;
top: 0; top: 0;
} }
.rslides li:first-child { .rslides li:first-child {
position: relative; position: relative;
display: block; display: block;
float: left; float: left;
} }
.rslides img { .rslides img {
display: block; display: block;
height: auto; height: auto;
float: left; float: left;
width: 100%; width: 100%;
border: 0; border: 0;
} }
#wrapper {
margin: 0 auto;
width: 100%;
margin-bottom: 50px;
}
h1 {
font: 600 28px/36px sans-serif;
margin: 50px 0;
}
h3 {
font: 600 18px/24px sans-serif;
color: #999;
margin: 0 0 20px;
}
a {
color: #222;
}
.rslides {
margin: 0 auto;
}
.rslides_container {
margin-bottom: 50px;
position: relative;
float: left;
width: 100%;
}
.centered-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 50%;
left: 0;
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("module/slider/view/index/black.gif") no-repeat left top;
margin-top: -45px;
}
.centered-btns_nav:active {
opacity: 1.0;
}
.centered-btns_nav.next {
left: auto;
background-position: right top;
right: 0;
}
.transparent-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 0;
left: 0;
display: block;
background: #fff;
/* Fix for IE6-9 */
opacity: 0;
filter: alpha(opacity=1);
width: 48%;
text-indent: -9999px;
overflow: hidden;
height: 91%;
}
.transparent-btns_nav.next {
left: auto;
right: 0;
}
.large-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
opacity: 0.6;
text-indent: -9999px;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
background: #000 url("module/slider/view/index/black.gif") no-repeat left 50%;
width: 38px;
}
.large-btns_nav:active {
opacity: 1.0;
}
.large-btns_nav.next {
left: auto;
background-position: right 50%;
right: 0;
}
#wrapper {
margin: 0 auto;
width: 100%;
margin-bottom: 50px;
}
h1 {
font: 600 28px/36px sans-serif;
margin: 50px 0;
}
h3 {
font: 600 18px/24px sans-serif;
color: #999;
margin: 0 0 20px;
}
a {
color: #222;
}
.rslides {
margin: 0 auto;
}
.rslides_container {
margin-bottom: 50px;
position: relative;
float: left;
width: 100%;
}
.centered-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 50%;
left: 0;
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("module/slider/view/index/black.gif") no-repeat left top;
margin-top: -45px;
}
.centered-btns_nav:active {
opacity: 1.0;
}
.centered-btns_nav.next {
left: auto;
background-position: right top;
right: 0;
}
.transparent-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 0;
left: 0;
display: block;
background: #fff; /* Fix for IE6-9 */
opacity: 0;
filter: alpha(opacity=1);
width: 48%;
text-indent: -9999px;
overflow: hidden;
height: 91%;
}
.transparent-btns_nav.next {
left: auto;
right: 0;
}
.large-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
opacity: 0.6;
text-indent: -9999px;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
background: #000 url("module/slider/view/index/black.gif") no-repeat left 50%;
width: 38px;
}
.large-btns_nav:active {
opacity: 1.0;
}
.large-btns_nav.next {
left: auto;
background-position: right 50%;
right: 0;
}
/** /**
Boutons blancs Boutons blancs
*/ */
.white-btns_nav { .white-btns_nav {
z-index: 3; z-index: 3;
position: absolute; position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
opacity: 0.6; opacity: 0.6;
text-indent: -9999px; text-indent: -9999px;
overflow: hidden; overflow: hidden;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background: transparent url("module/slider/view/index/white.gif") no-repeat left 50%; background: transparent url("module/slider/view/index/white.gif") no-repeat left 50%;
width: 38px; width: 38px;
} }
.white-btns_nav:active { .white-btns_nav:active {
opacity: 1.0; opacity: 1.0;
} }
.white-btns_nav.next { .white-btns_nav.next {
left: auto; left: auto;
background-position: right 50%; background-position: right 50%;
right: 0; right: 0;
} }
/** /**
Boutons blancs Boutons blancs
*/ */
.centered-btns_nav:focus, .centered-btns_nav:focus,
.transparent-btns_nav:focus, .transparent-btns_nav:focus,
.large-btns_nav:focus, .large-btns_nav:focus,
.white-btns_nav:focus { .white-btns_nav:focus {
outline: none; outline: none;
} }
.centered-btns_tabs, .centered-btns_tabs,
.transparent-btns_tabs, .transparent-btns_tabs,
.large-btns_tabs, .large-btns_tabs,
.white-btns_tabs { .white-btns_tabs {
margin-top: 10px; margin-top: 10px;
text-align: center; text-align: center;
} padding: 0px;
}
.centered-btns_tabs li,
.transparent-btns_tabs li, .centered-btns_tabs li,
.transparent-btns_tabs li,
.large-btns_tabs li, .large-btns_tabs li,
.white-btns_tabs li { .white-btns_tabs li {
display: inline; display: inline;
float: none; float: none;
_float: left; margin-right: 5px;
*float: left; }
margin-right: 5px;
} .centered-btns_tabs a,
.transparent-btns_tabs a,
.centered-btns_tabs a,
.transparent-btns_tabs a,
.large-btns_tabs a, .large-btns_tabs a,
.white-btns_tabs a { .white-btns_tabs a {
text-indent: -9999px; text-indent: -9999px;
overflow: hidden; overflow: hidden;
-webkit-border-radius: 15px; -webkit-border-radius: 15px;
-moz-border-radius: 15px; -moz-border-radius: 15px;
border-radius: 15px; border-radius: 15px;
background: #ccc; background: #ccc;
background: rgba(0, 0, 0, .2); background: rgba(0, 0, 0, .2);
display: inline-block; display: inline-block;
_display: block; /*display: block;*/
*display: block;
-webkit-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .3); -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); -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); box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .3);
width: 9px; width: 9px;
height: 9px; height: 9px;
} }
.centered-btns_here a, .centered-btns_here a,
.transparent-btns_here a, .transparent-btns_here a,
.large-btns_here a, .large-btns_here a,
.white-btns_here a { .white-btns_here a {
background: #222; 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;
}

15
module/slider/view/index/index.js.php
View File

@ -36,22 +36,7 @@
$(document).ready(function () { $(document).ready(function () {
var maxwidth = "<?php echo $this->getData(['module', $this->getUrl(0),'theme', 'maxWidth']); ?>"; 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']); ?>"; 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%"); $("#wrapper").css('width', "100%");
$(function () { $(function () {
$("#sliders").responsiveSlides({ $("#sliders").responsiveSlides({

12
module/slider/view/index/index.php
View File

@ -2,15 +2,17 @@
<div id="wrapper"> <div id="wrapper">
<div class="rslides_container"> <div class="rslides_container">
<ul class="rslides" id="sliders"> <ul class="rslides" id="sliders">
<!--id="<?php echo $this->getData(['module', $this->getUrl(0), 'config', 'boutonsVisibles']); ?>"> -->
<?php foreach ($module::$pictures as $picture => $options): ?> <?php foreach ($module::$pictures as $picture => $options): ?>
<?php if (!empty($options['uri'])): ?> <?php if (!empty($options['uri'])): ?>
<a href="<?php echo helper::baseUrl() . $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; ?> <?php endif; ?>
<li> </li>
<img src="<?php echo helper::baseUrl(false) . $picture; ?>" alt="<?php echo $options['legend']; ?>"> <?php if (!empty($options['uri'])): ?>
</li>
<?php if (!empty($options['uri'])): ?>
</a> </a>
<?php endif; ?> <?php endif; ?>
<?php endforeach; ?> <?php endforeach; ?>

15
module/slider/view/theme/theme.php
View File

@ -53,26 +53,33 @@
<div class="block"> <div class="block">
<h4>Navigation</h4> <h4>Navigation</h4>
<div class="row"> <div class="row">
<div class="col4"> <div class="col3">
<?php echo template::select('sliderThemeTri', $module::$sort, [ <?php echo template::select('sliderThemeSort', $module::$sort, [
'label' => 'Tri des images', 'label' => 'Tri des images',
'selected' => $this->getData(['module', $this->getUrl(0), 'theme', 'sort']) 'selected' => $this->getData(['module', $this->getUrl(0), 'theme', 'sort'])
]); ?> ]); ?>
</div> </div>
<div class="col4"> <div class="col3">
<?php echo template::select('sliderThemePager', $module::$pager, [ <?php echo template::select('sliderThemePager', $module::$pager, [
'label' => 'Puces horizontales', 'label' => 'Puces horizontales',
'selected' => $this->getData(['module', $this->getUrl(0), 'theme', 'pager']), 'selected' => $this->getData(['module', $this->getUrl(0), 'theme', 'pager']),
]); ?> ]); ?>
</div> </div>
<div class="col4"> <div class="col3">
<?php echo template::select('sliderThemeNameSpace', $module::$namespace, [ <?php echo template::select('sliderThemeNameSpace', $module::$namespace, [
'label' => 'Boutons latéraux', 'label' => 'Boutons latéraux',
'selected' => $this->getData(['module', $this->getUrl(0), 'theme', 'namespace']) 'selected' => $this->getData(['module', $this->getUrl(0), 'theme', 'namespace'])
]); ?> ]); ?>
</div> </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> </div>
</div> </div>
</div>
<?php echo template::formClose(); ?> <?php echo template::formClose(); ?>