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

58
module/slider/slider.php
View File

@ -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),

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

@ -15,222 +15,235 @@
/*! http://responsiveslides.com v1.55 by @arielsalminen */
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0 auto;
}
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0 auto;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
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
*/
.white-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: transparent url("module/slider/view/index/white.gif") no-repeat left 50%;
width: 38px;
}
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: transparent url("module/slider/view/index/white.gif") no-repeat left 50%;
width: 38px;
}
.white-btns_nav:active {
opacity: 1.0;
}
.white-btns_nav:active {
opacity: 1.0;
}
.white-btns_nav.next {
left: auto;
background-position: right 50%;
right: 0;
}
.white-btns_nav.next {
left: auto;
background-position: right 50%;
right: 0;
}
/**
Boutons blancs
*/
.centered-btns_nav:focus,
.transparent-btns_nav:focus,
.centered-btns_nav:focus,
.transparent-btns_nav:focus,
.large-btns_nav:focus,
.white-btns_nav:focus {
outline: none;
}
.centered-btns_tabs,
.transparent-btns_tabs,
outline: none;
}
.centered-btns_tabs,
.transparent-btns_tabs,
.large-btns_tabs,
.white-btns_tabs {
margin-top: 10px;
text-align: center;
}
.centered-btns_tabs li,
.transparent-btns_tabs li,
.white-btns_tabs {
margin-top: 10px;
text-align: center;
padding: 0px;
}
.centered-btns_tabs li,
.transparent-btns_tabs li,
.large-btns_tabs li,
.white-btns_tabs li {
display: inline;
float: none;
_float: left;
*float: left;
margin-right: 5px;
}
.centered-btns_tabs a,
.transparent-btns_tabs a,
display: inline;
float: none;
margin-right: 5px;
}
.centered-btns_tabs a,
.transparent-btns_tabs a,
.large-btns_tabs a,
.white-btns_tabs a {
text-indent: -9999px;
overflow: hidden;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background: #ccc;
.white-btns_tabs a {
text-indent: -9999px;
overflow: hidden;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background: #ccc;
background: rgba(0, 0, 0, .2);
display: inline-block;
_display: block;
*display: block;
display: inline-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);
width: 9px;
height: 9px;
}
.centered-btns_here a,
.transparent-btns_here a,
width: 9px;
height: 9px;
}
.centered-btns_here a,
.transparent-btns_here a,
.large-btns_here a,
.white-btns_here a {
background: #222;
background: rgba(0,0,0, .8);
}
background: #222;
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 () {
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({

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

@ -2,15 +2,17 @@
<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>
<img src="<?php echo helper::baseUrl(false) . $picture; ?>" alt="<?php echo $options['legend']; ?>">
</li>
<?php if (!empty($options['uri'])): ?>
</li>
<?php if (!empty($options['uri'])): ?>
</a>
<?php endif; ?>
<?php endforeach; ?>

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

@ -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(); ?>