ZwiiCMS-Team/ZwiiCMS
ZwiiCMS-Team/ZwiiCMS
10
9
Fork 3
Code Releases 153 Activity

2.18 Ajout d'effets + masque du thème

Browse Source
This commit is contained in:
Fred Tempez 2020-04-18 19:18:34 +02:00
parent 79318d0408
commit 844acd8c8a
7 changed files with 161 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
module/gallery/gallery.php
View File

@ -19,6 +19,21 @@ class gallery extends common {
const SORT_ASC = 'SORT_ASC'; const SORT_ASC = 'SORT_ASC';
const SORT_DSC = 'SORT_DSC'; const SORT_DSC = 'SORT_DSC';
const SORT_HAND = 'SORT_HAND'; const SORT_HAND = 'SORT_HAND';
const GALLERY_VERSION = '2.18';
public static $directories = [];
public static $firstPictures = [];
public static $galleries = [];
public static $galleriesId = [];
public static $pictures = [];
public static $picturesId = [];
public static $thumbs = [];
public static $actions = [ public static $actions = [
'config' => self::GROUP_MODERATOR, 'config' => self::GROUP_MODERATOR,
@ -51,64 +66,65 @@ class gallery extends common {
]; ];
public static $galleryThemeSize = [ public static $galleryThemeSize = [
'9em' => 'Très petite (9em)', '9em' => 'Très petite',
'12em' => 'Petite (12em)', '12em' => 'Petite',
'15em' => 'Moyenne (15em)', '15em' => 'Moyenne',
'18em' => 'Grande (18em)', '18em' => 'Grande',
'21em' => 'Très grande (21em)' '21em' => 'Très grande'
]; ];
public static $galleryThemeLegendHeight = [ public static $galleryThemeLegendHeight = [
'.125em' => 'Très petite (.125 em)', '.125em' => 'Très petite',
'.25em' => 'Petite (.25em)', '.25em' => 'Petite',
'.375em' => 'Moyenne (.375em)', '.375em' => 'Moyenne',
'.5em' => 'Grande (.5em)', '.5em' => 'Grande',
'.625em' => 'Très grande (.625em)' '.625em' => 'Très grande'
]; ];
public static $galleryThemeBorder = [ public static $galleryThemeBorder = [
'0em' => 'Aucune', '0em' => 'Aucune',
'.1em' => 'Très petite (.1em)', '.1em' => 'Très petite',
'.4em' => 'Petite (.2em)', '.4em' => 'Petite',
'.5em' => 'Moyenne (.5em)', '.5em' => 'Moyenne',
'.8em' => 'Grande (.8em)', '.8em' => 'Grande',
'1.2em' => 'Très grande (1.2em)' '1.2em' => 'Très grande'
]; ];
public static $galleryThemeOpacity = [ public static $galleryThemeOpacity = [
'1' => 'Aucun ', '1' => 'Aucun ',
'.9' => 'Très Discrète (.9)', '.9' => 'Très Discrète',
'.8' => 'Discrète (0.8)', '.8' => 'Discrète',
'.7' => 'Moyenne (0.7)', '.7' => 'Moyenne',
'.6' => 'Forte (0.6)', '.6' => 'Forte',
'.5' => 'Très forte (0.5)' '.5' => 'Très forte'
]; ];
public static $galleryThemeMargin = [ public static $galleryThemeMargin = [
'0em' => 'Aucune', '0em' => 'Aucune',
'.1em' => 'Très petite (.1em)', '.1em' => 'Très petite',
'.3em' => 'Petite (.3em)', '.3em' => 'Petite',
'.6em' => 'Moyenne (.6em)', '.6em' => 'Moyenne',
'.9em' => 'Grande (.9em)', '.9em' => 'Grande',
'1.2em' => 'Très grande (1.2em)' '1.2em' => 'Très grande'
]; ];
public static $directories = []; public static $galleryThemeRadius = [
'0px' => 'Aucun',
public static $firstPictures = []; '5px' => 'Très léger',
'10px' => 'Léger',
public static $galleries = []; '15px' => 'Moyen',
'25px' => 'Important',
public static $galleriesId = []; '50px' => 'Très important'
];
public static $pictures = [];
public static $picturesId = [];
public static $thumbs = [];
const GALLERY_VERSION = '2.17';
public static $galleryThemeShadows = [
'0px' => 'Aucune',
'1px 1px 5px' => 'Très légère',
'1px 1px 10px' => 'Légère',
'1px 1px 15px' => 'Moyenne',
'1px 1px 25px' => 'Importante',
'1px 1px 50px' => 'Très importante'
];
/** /**
* Tri de la liste des galeries * Tri de la liste des galeries
@ -579,17 +595,19 @@ class gallery extends common {
if($this->isPost()) { if($this->isPost()) {
$this->setData(['theme', $this->getUrl(0), [ $this->setData(['theme', $this->getUrl(0), [
'thumbAlign' => $this->getinput('galleryThemeThumbAlign'), 'thumbAlign' => $this->getinput('galleryThemeThumbAlign'),
'thumbWidth' => $this->getinput('galleryThemeThumbWidth'), 'thumbWidth' => $this->getinput('galleryThemeThumbWidth'),
'thumbHeight' => $this->getinput('galleryThemeThumbHeight'), 'thumbHeight' => $this->getinput('galleryThemeThumbHeight'),
'thumbMargin' => $this->getinput('galleryThemeThumbMargin'), 'thumbMargin' => $this->getinput('galleryThemeThumbMargin'),
'thumbBorder' => $this->getinput('galleryThemeThumbBorder'), 'thumbBorder' => $this->getinput('galleryThemeThumbBorder'),
'ThumbBorderColor' => $this->getinput('galleryThemeThumbBorderColor'), 'thumbBorderColor'=> $this->getinput('galleryThemeThumbBorderColor'),
'thumbOpacity' => $this->getinput('galleryThemeThumbOpacity'), 'thumbOpacity' => $this->getinput('galleryThemeThumbOpacity'),
'legendHeight' => $this->getinput('galleryThemeLegendHeight'), 'thumbShadows' => $this->getinput('galleryThemeThumbShadows'),
'legendAlign' => $this->getinput('galleryThemeLegendAlign'), 'thumbRadius' => $this->getinput('galleryThemeThumbRadius'),
'legendTextColor'=> $this->getinput('galleryThemeLegendTextColor'), 'legendHeight' => $this->getinput('galleryThemeLegendHeight'),
'legendBgColor' => $this->getinput('galleryThemeLegendBgColor') 'legendAlign' => $this->getinput('galleryThemeLegendAlign'),
'legendTextColor' => $this->getinput('galleryThemeLegendTextColor'),
'legendBgColor' => $this->getinput('galleryThemeLegendBgColor')
] ]
]); ]);
// Création des fichiers CSS // Création des fichiers CSS
@ -603,6 +621,8 @@ class gallery extends common {
$content = str_replace('#thumbBorder#',$this->getinput('galleryThemeThumbBorder'),$content ); $content = str_replace('#thumbBorder#',$this->getinput('galleryThemeThumbBorder'),$content );
$content = str_replace('#thumbBorderColor#',$this->getinput('galleryThemeThumbBorderColor'),$content ); $content = str_replace('#thumbBorderColor#',$this->getinput('galleryThemeThumbBorderColor'),$content );
$content = str_replace('#thumbOpacity#',$this->getinput('galleryThemeThumbOpacity'),$content ); $content = str_replace('#thumbOpacity#',$this->getinput('galleryThemeThumbOpacity'),$content );
$content = str_replace('#thumbShadows#',$this->getinput('galleryThemeThumbShadows'),$content );
$content = str_replace('#thumbRadius#',$this->getinput('galleryThemeThumbRadius'),$content );
$content = str_replace('#legendAlign#',$this->getinput('galleryThemeLegendAlign'),$content ); $content = str_replace('#legendAlign#',$this->getinput('galleryThemeLegendAlign'),$content );
$content = str_replace('#legendHeight#',$this->getinput('galleryThemeLegendHeight'),$content ); $content = str_replace('#legendHeight#',$this->getinput('galleryThemeLegendHeight'),$content );
$content = str_replace('#legendTextColor#',$this->getinput('galleryThemeLegendTextColor'),$content ); $content = str_replace('#legendTextColor#',$this->getinput('galleryThemeLegendTextColor'),$content );

24
module/gallery/ressource/defaultdata.php
View File

@ -1,16 +1,18 @@
<?php <?php
class theme extends gallery { class theme extends gallery {
public static $defaultData = [ public static $defaultData = [
'thumbAlign' => 'center', 'thumbAlign' => 'center',
'thumbWidth' => '18em', 'thumbWidth' => '18em',
'thumbHeight' => '15em', 'thumbHeight' => '15em',
'thumbMargin' => '.6em', 'thumbMargin' => '.6em',
'thumbBorder' => '.1em', 'thumbBorder' => '.1em',
'thumbOpacity' => '.7', 'thumbOpacity' => '.7',
'ThumbBorderColor' => 'rgba(221, 221, 221, 1)', 'thumbBorderColor' => 'rgba(221, 221, 221, 1)',
'legendHeight' => '.375em', 'thumbRadius' => '5px',
'legendAlign' => 'center', 'thumbShadows' => '1px 1px 5px',
'legendTextColor'=> 'rgba(255, 255, 255, 1)', 'legendHeight' => '.375em',
'legendBgColor' => 'rgba(0, 0, 0, .6)' 'legendAlign' => 'center',
'legendTextColor' => 'rgba(255, 255, 255, 1)',
'legendBgColor' => 'rgba(0, 0, 0, .6)'
]; ];
} }

4
module/gallery/ressource/theme.css
View File

@ -9,6 +9,8 @@
position: relative; position: relative;
-webkit-transition: opacity .3s ease-out; -webkit-transition: opacity .3s ease-out;
transition: opacity .3s ease-out; transition: opacity .3s ease-out;
border-radius: var(--thumbRadius);
box-shadow: var(--thumbShadows) ;
} }
.galleryPicture:hover, .galleryPicture:hover,
.galleryGalleryPicture:hover { .galleryGalleryPicture:hover {
@ -35,7 +37,7 @@
.colPicture { .colPicture {
width : var(--thumbWidth); width : var(--thumbWidth);
max-width: 50%; max-width: 50%;
margin: var(--thumbMargin); padding: var(--thumbMargin);
} }
@media (max-width: 432px) { @media (max-width: 432px) {

2
module/gallery/ressource/vartheme.css
View File

@ -10,6 +10,8 @@
--thumbHeight: #thumbHeight#; --thumbHeight: #thumbHeight#;
--thumbBorder: #thumbBorder#; --thumbBorder: #thumbBorder#;
--thumbBorderColor: #thumbBorderColor#; --thumbBorderColor: #thumbBorderColor#;
--thumbRadius: #thumbRadius#;
--thumbShadows: #thumbShadows#;
} }
.galleryName, .galleryName,
.galleryGalleryName { .galleryGalleryName {

6
module/gallery/view/gallery/gallery.css
View File

@ -10,6 +10,8 @@
--thumbHeight: 15em; --thumbHeight: 15em;
--thumbBorder: .1em; --thumbBorder: .1em;
--thumbBorderColor: rgba(221, 221, 221, 1); --thumbBorderColor: rgba(221, 221, 221, 1);
--thumbRadius: 5px;
--thumbShadows: 1px 1px 5px;
} }
.galleryName, .galleryName,
.galleryGalleryName { .galleryGalleryName {
@ -33,6 +35,8 @@
position: relative; position: relative;
-webkit-transition: opacity .3s ease-out; -webkit-transition: opacity .3s ease-out;
transition: opacity .3s ease-out; transition: opacity .3s ease-out;
border-radius: var(--thumbRadius);
box-shadow: var(--thumbShadows) ;
} }
.galleryPicture:hover, .galleryPicture:hover,
.galleryGalleryPicture:hover { .galleryGalleryPicture:hover {
@ -59,7 +63,7 @@
.colPicture { .colPicture {
width : var(--thumbWidth); width : var(--thumbWidth);
max-width: 50%; max-width: 50%;
margin: var(--thumbMargin); padding: var(--thumbMargin);
} }
@media (max-width: 432px) { @media (max-width: 432px) {

6
module/gallery/view/index/index.css
View File

@ -10,6 +10,8 @@
--thumbHeight: 15em; --thumbHeight: 15em;
--thumbBorder: .1em; --thumbBorder: .1em;
--thumbBorderColor: rgba(221, 221, 221, 1); --thumbBorderColor: rgba(221, 221, 221, 1);
--thumbRadius: 5px;
--thumbShadows: 1px 1px 5px;
} }
.galleryName, .galleryName,
.galleryGalleryName { .galleryGalleryName {
@ -33,6 +35,8 @@
position: relative; position: relative;
-webkit-transition: opacity .3s ease-out; -webkit-transition: opacity .3s ease-out;
transition: opacity .3s ease-out; transition: opacity .3s ease-out;
border-radius: var(--thumbRadius);
box-shadow: var(--thumbShadows) ;
} }
.galleryPicture:hover, .galleryPicture:hover,
.galleryGalleryPicture:hover { .galleryGalleryPicture:hover {
@ -59,7 +63,7 @@
.colPicture { .colPicture {
width : var(--thumbWidth); width : var(--thumbWidth);
max-width: 50%; max-width: 50%;
margin: var(--thumbMargin); padding: var(--thumbMargin);
} }
@media (max-width: 432px) { @media (max-width: 432px) {

106
module/gallery/view/theme/theme.php
View File

@ -15,55 +15,73 @@
<div class="row"> <div class="row">
<div class="col12"> <div class="col12">
<div class="block"> <div class="block">
<h4>Configuration des vignettes</h4> <h4>Configuration des vignettes</h4>
<div class="row"> <div class="row">
<div class="col4"> <div class="col5 offset1">
<?php echo template::select('galleryThemeThumbAlign', $module::$galleryThemeFlexAlign, [
'label' => 'Alignement des vignettes sur la page :',
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbAlign'])
]); ?>
</div>
<div class="col4">
<?php echo template::select('galleryThemeThumbWidth', $module::$galleryThemeSize, [ <?php echo template::select('galleryThemeThumbWidth', $module::$galleryThemeSize, [
'label' => 'Largeur des vignettes :', 'label' => 'Largeur',
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbWidth']) 'selected' => $this->getData(['theme', $this->getUrl(0),'thumbWidth'])
]); ?> ]); ?>
</div> </div>
<div class="col4"> <div class="col5">
<?php echo template::select('galleryThemeThumbHeight', $module::$galleryThemeSize, [ <?php echo template::select('galleryThemeThumbHeight', $module::$galleryThemeSize, [
'label' => 'Hauteur des vignettes :', 'label' => 'Hauteur',
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbHeight']) 'selected' => $this->getData(['theme', $this->getUrl(0),'thumbHeight'])
]); ?> ]); ?>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col3"> <div class="col5 offset1">
<?php echo template::select('galleryThemeThumbAlign', $module::$galleryThemeFlexAlign, [
'label' => 'Alignement',
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbAlign'])
]); ?>
</div>
<div class="col5">
<?php echo template::select('galleryThemeThumbMargin', $module::$galleryThemeMargin, [ <?php echo template::select('galleryThemeThumbMargin', $module::$galleryThemeMargin, [
'label' => 'Marges autour des vignettes :', 'label' => 'Marges',
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbMargin']) 'selected' => $this->getData(['theme', $this->getUrl(0),'thumbMargin'])
]); ?> ]); ?>
</div> </div>
<div class="col3"> </div>
<div class="row">
<div class="col5 offset1">
<?php echo template::select('galleryThemeThumbBorder', $module::$galleryThemeBorder, [ <?php echo template::select('galleryThemeThumbBorder', $module::$galleryThemeBorder, [
'label' => 'Epaisseur des bordures', 'label' => 'Bordures',
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbBorder']) 'selected' => $this->getData(['theme', $this->getUrl(0),'thumbBorder'])
]); ?> ]); ?>
</div> </div>
<div class="col3"> <div class="col5">
<?php echo template::text('galleryThemeThumbBorderColor', [
'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.',
'label' => 'Couleur de la bordure',
'value' => $this->getData(['theme', $this->getUrl(0),'ThumbBorderColor'])
]); ?>
</div>
<div class="col3">
<?php echo template::select('galleryThemeThumbOpacity', $module::$galleryThemeOpacity, [ <?php echo template::select('galleryThemeThumbOpacity', $module::$galleryThemeOpacity, [
'label' => 'Opacité au survol', 'label' => 'Opacité au survol',
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbOpacity']) 'selected' => $this->getData(['theme', $this->getUrl(0),'thumbOpacity'])
]); ?> ]); ?>
</div> </div>
</div> </div>
<div class="row">
<div class="col5 offset1">
<?php echo template::select('galleryThemeThumbRadius', $module::$galleryThemeRadius, [
'label' => 'Bords arrondis',
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbRadius'])
]); ?>
</div>
<div class="col5">
<?php echo template::select('galleryThemeThumbShadows', $module::$galleryThemeShadows, [
'label' => 'Ombres',
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbShadows'])
]); ?>
</div>
</div>
<div class="row">
<div class="col5 offset4">
<?php echo template::text('galleryThemeThumbBorderColor', [
'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.',
'label' => 'Couleur de la bordure',
'value' => $this->getData(['theme', $this->getUrl(0),'thumbBorderColor'])
]); ?>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -72,35 +90,35 @@
<div class="block"> <div class="block">
<h4>Configuration des légendes</h4> <h4>Configuration des légendes</h4>
<div class="row"> <div class="row">
<div class="col6"> <div class="col5 offset1">
<?php echo template::select('galleryThemeLegendHeight', $module::$galleryThemeLegendHeight, [
'label' => 'Hauteur des légendes :',
'selected' => $this->getData(['theme', $this->getUrl(0),'legendHeight'])
]); ?>
</div>
<div class="col6">
<?php echo template::select('galleryThemeLegendAlign', $module::$galleryThemeAlign, [
'label' => 'Alignement des légendes dans les vignettes :',
'selected' => $this->getData(['theme', $this->getUrl(0),'legendAlign'])
]); ?>
</div>
</div>
<div class="row">
<div class="col6">
<?php echo template::text('galleryThemeLegendTextColor', [ <?php echo template::text('galleryThemeLegendTextColor', [
'class' => 'colorPicker', 'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.', 'help' => 'Le curseur horizontal règle le niveau de transparence.',
'label' => 'Couleur du texte de légende', 'label' => 'Texte',
'value' => $this->getData(['theme', $this->getUrl(0),'legendTextColor']) 'value' => $this->getData(['theme', $this->getUrl(0),'legendTextColor'])
]); ?> ]); ?>
</div> </div>
<div class="col6"> <div class="col5">
<?php echo template::text('galleryThemeLegendBgColor', [ <?php echo template::text('galleryThemeLegendBgColor', [
'class' => 'colorPicker', 'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.', 'help' => 'Le curseur horizontal règle le niveau de transparence.',
'label' => 'Couleur du fond de la légende', 'label' => 'Fond',
'value' => $this->getData(['theme', $this->getUrl(0),'legendBgColor']) 'value' => $this->getData(['theme', $this->getUrl(0),'legendBgColor'])
]); ?> ]); ?>
</div>
</div>
<div class="row">
<div class="col5 offset1">
<?php echo template::select('galleryThemeLegendHeight', $module::$galleryThemeLegendHeight, [
'label' => 'Hauteur',
'selected' => $this->getData(['theme', $this->getUrl(0),'legendHeight'])
]); ?>
</div>
<div class="col5">
<?php echo template::select('galleryThemeLegendAlign', $module::$galleryThemeAlign, [
'label' => 'Alignement:',
'selected' => $this->getData(['theme', $this->getUrl(0),'legendAlign'])
]); ?>
</div> </div>
</div> </div>
</div> </div>