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

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

@ -1,16 +1,18 @@
<?php
class theme extends gallery {
public static $defaultData = [
'thumbAlign' => 'center',
'thumbWidth' => '18em',
'thumbHeight' => '15em',
'thumbMargin' => '.6em',
'thumbBorder' => '.1em',
'thumbOpacity' => '.7',
'ThumbBorderColor' => 'rgba(221, 221, 221, 1)',
'legendHeight' => '.375em',
'legendAlign' => 'center',
'legendTextColor'=> 'rgba(255, 255, 255, 1)',
'legendBgColor' => 'rgba(0, 0, 0, .6)'
'thumbAlign' => 'center',
'thumbWidth' => '18em',
'thumbHeight' => '15em',
'thumbMargin' => '.6em',
'thumbBorder' => '.1em',
'thumbOpacity' => '.7',
'thumbBorderColor' => 'rgba(221, 221, 221, 1)',
'thumbRadius' => '5px',
'thumbShadows' => '1px 1px 5px',
'legendHeight' => '.375em',
'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;
-webkit-transition: opacity .3s ease-out;
transition: opacity .3s ease-out;
border-radius: var(--thumbRadius);
box-shadow: var(--thumbShadows) ;
}
.galleryPicture:hover,
.galleryGalleryPicture:hover {
@ -35,7 +37,7 @@
.colPicture {
width : var(--thumbWidth);
max-width: 50%;
margin: var(--thumbMargin);
padding: var(--thumbMargin);
}
@media (max-width: 432px) {

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

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

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

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

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

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

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

@ -15,55 +15,73 @@
<div class="row">
<div class="col12">
<div class="block">
<h4>Configuration des vignettes</h4>
<h4>Configuration des vignettes</h4>
<div class="row">
<div class="col4">
<?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">
<div class="col5 offset1">
<?php echo template::select('galleryThemeThumbWidth', $module::$galleryThemeSize, [
'label' => 'Largeur des vignettes :',
'label' => 'Largeur',
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbWidth'])
]); ?>
</div>
<div class="col4">
<div class="col5">
<?php echo template::select('galleryThemeThumbHeight', $module::$galleryThemeSize, [
'label' => 'Hauteur des vignettes :',
'label' => 'Hauteur',
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbHeight'])
]); ?>
</div>
</div>
<div class="row">
<div class="col3">
<div class="row">
<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, [
'label' => 'Marges autour des vignettes :',
'label' => 'Marges',
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbMargin'])
]); ?>
</div>
<div class="col3">
</div>
<div class="row">
<div class="col5 offset1">
<?php echo template::select('galleryThemeThumbBorder', $module::$galleryThemeBorder, [
'label' => 'Epaisseur des bordures',
'label' => 'Bordures',
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbBorder'])
]); ?>
</div>
<div class="col3">
<?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">
</div>
<div class="col5">
<?php echo template::select('galleryThemeThumbOpacity', $module::$galleryThemeOpacity, [
'label' => 'Opacité au survol',
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbOpacity'])
]); ?>
</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>
@ -72,35 +90,35 @@
<div class="block">
<h4>Configuration des légendes</h4>
<div class="row">
<div class="col6">
<?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">
<div class="col5 offset1">
<?php echo template::text('galleryThemeLegendTextColor', [
'class' => 'colorPicker',
'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'])
]); ?>
</div>
<div class="col6">
<div class="col5">
<?php echo template::text('galleryThemeLegendBgColor', [
'class' => 'colorPicker',
'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'])
]); ?>
</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>