ZwiiCMS-Team/ZwiiCMS
ZwiiCMS-Team
/
ZwiiCMS
3
3
Fork 2
Code Releases 144 Activity

2.17 Thème de la galerie

This commit is contained in:
Fred Tempez 2020-04-18 16:33:48 +02:00
parent c19b1daa63
commit 7fd1259a79
8 changed files with 268 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
module/gallery/gallery.php
View File

@ -36,6 +36,14 @@ class gallery extends common {
self::SORT_HAND => 'Manuel' self::SORT_HAND => 'Manuel'
]; ];
public static $galleryThemeFlexAlign = [
'flex-start' => 'À gauche',
'center' => 'Au centre',
'flex-end' => 'À droite',
'space-around' => 'Distribué avec marges',
'space-between' => 'Distribué sans marge',
];
public static $galleryThemeAlign = [ public static $galleryThemeAlign = [
'left' => 'À gauche', 'left' => 'À gauche',
'center' => 'Au centre', 'center' => 'Au centre',
@ -43,47 +51,46 @@ class gallery extends common {
]; ];
public static $galleryThemeSize = [ public static $galleryThemeSize = [
'8em' => 'Très petite (8em)', '9em' => 'Très petite (9em)',
'10em' => 'Petite (10em)', '12em' => 'Petite (12em)',
'12em' => '(12em)', '15em' => 'Moyenne (15em)',
'14em' => 'Moyenne (14em)',
'16em' => '(16em)',
'18em' => 'Grande (18em)', '18em' => 'Grande (18em)',
'20em' => 'Très grande (20em)' '21em' => 'Très grande (21em)'
]; ];
public static $galleryThemeLegendHeight = [ public static $galleryThemeLegendHeight = [
'2em' => 'Très petite (2em)', '.125em' => 'Très petite (.125 em)',
'4em' => 'Petite (4em)', '.25em' => 'Petite (.25em)',
'6em' => 'Moyenne (6em)', '.375em' => 'Moyenne (.375em)',
'8em' => 'Grande (8em)', '.5em' => 'Grande (.5em)',
'10em' => 'Très grande (10em)' '.625em' => 'Très grande (.625em)'
]; ];
public static $galleryThemeBorder = [ public static $galleryThemeBorder = [
'0em' => 'Aucune', '0em' => 'Aucune',
'1em' => 'Très petite (1em)', '.1em' => 'Très petite (.1em)',
'2em' => 'Petite (2em)', '.4em' => 'Petite (.2em)',
'3em' => 'Moyenne (3em)', '.5em' => 'Moyenne (.5em)',
'4em' => 'Grande (4em)', '.8em' => 'Grande (.8em)',
'5em' => 'Très grande (5em)' '1.2em' => 'Très grande (1.2em)'
]; ];
public static $galleryThemeOpacity = [ public static $galleryThemeOpacity = [
'1' => 'Aucun ', '1' => 'Aucun ',
'.9' => 'Faible (.9)', '.9' => 'Très Discrète (.9)',
'.8' => 'Moyen (0.8)', '.8' => 'Discrète (0.8)',
'.7' => 'Fort(0.7)', '.7' => 'Moyenne (0.7)',
'.6' => 'Très fort (0.6)' '.6' => 'Forte (0.6)',
'.5' => 'Très forte (0.5)'
]; ];
public static $galleryThemeMargin = [ public static $galleryThemeMargin = [
'0em' => 'Aucune', '0em' => 'Aucune',
'.2em' => 'Très petite (.2em)', '.1em' => 'Très petite (.1em)',
'.4em' => 'Petite (.4em)', '.3em' => 'Petite (.3em)',
'.6em' => 'Moyenne (.6em)', '.6em' => 'Moyenne (.6em)',
'.8em' => 'Grande (.8em)', '.9em' => 'Grande (.9em)',
'1em' => 'Très grande (1em)' '1.2em' => 'Très grande (1.2em)'
]; ];
public static $directories = []; public static $directories = [];
@ -100,7 +107,7 @@ class gallery extends common {
public static $thumbs = []; public static $thumbs = [];
const GALLERY_VERSION = '2.16'; const GALLERY_VERSION = '2.17';
/** /**
@ -561,24 +568,46 @@ class gallery extends common {
'notification' => 'Action non autorisée' 'notification' => 'Action non autorisée'
]); ]);
} }
// Initialisation des données de thème de la galerie dasn theme.json
// Création des valeur par défaut absentes
if ( $this->getData(['theme', $this->getUrl(0)]) === null ) {
require_once('module/gallery/ressource/defaultdata.php');
$this->setData(['theme', $this->getUrl(0), theme::$defaultData]);
}
// Soumission du formulaire // Soumission du formulaire
if($this->isPost()) { if($this->isPost()) {
$this->setData(['module', $this->getUrl(0), $this->getUrl(1), [ $this->setData(['theme', $this->getUrl(0), [
'config' => [ 'thumbAlign' => $this->getinput('galleryThemeThumbAlign'),
'name' => $this->getData(['module',$this->getUrl(0),$this->getUrl(1),'config','name']), 'thumbWidth' => $this->getinput('galleryThemeThumbWidth'),
'directory' => $this->getData(['module',$this->getUrl(0),$this->getUrl(1),'config','directory']), 'thumbHeight' => $this->getinput('galleryThemeThumbHeight'),
'homePicture' => $this->getData(['module',$this->getUrl(0),$this->getUrl(1),'config','homePicture']), 'thumbMargin' => $this->getinput('galleryThemeThumbMargin'),
'sort' => $this->getData(['module',$this->getUrl(0),$this->getUrl(1),'config','sort']), 'thumbBorder' => $this->getinput('galleryThemeThumbBorder'),
'position' => $this->getData(['module',$this->getUrl(0),$this->getUrl(1),'config','position']), 'ThumbBorderColor' => $this->getinput('galleryThemeThumbBorderColor'),
'fullScreen' => $this->getData(['module',$this->getUrl(0),$this->getUrl(1),'config','fullScreen']) 'thumbOpacity' => $this->getinput('galleryThemeThumbOpacity'),
'legendHeight' => $this->getinput('galleryThemeLegendHeight'),
], 'legendAlign' => $this->getinput('galleryThemeLegendAlign'),
'legend' => $this->getData(['module',$this->getUrl(0),$this->getUrl(1),'legend']), 'legendTextColor'=> $this->getinput('galleryThemeLegendTextColor'),
'position' => $this->getData(['module',$this->getUrl(0),$this->getUrl(1),'position']), 'legendBgColor' => $this->getinput('galleryThemeLegendBgColor')
'theme' => [
] ]
]]); ]);
// Création des fichiers CSS
$content = file_get_contents('module/gallery/ressource/vartheme.css');
$themeCss = file_get_contents('module/gallery/ressource/theme.css');
// Injection des variables
$content = str_replace('#thumbAlign#',$this->getinput('galleryThemeThumbAlign'),$content );
$content = str_replace('#thumbWidth#',$this->getinput('galleryThemeThumbWidth'),$content );
$content = str_replace('#thumbHeight#',$this->getinput('galleryThemeThumbHeight'),$content );
$content = str_replace('#thumbMargin#',$this->getinput('galleryThemeThumbMargin'),$content );
$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('#legendAlign#',$this->getinput('galleryThemeLegendAlign'),$content );
$content = str_replace('#legendHeight#',$this->getinput('galleryThemeLegendHeight'),$content );
$content = str_replace('#legendTextColor#',$this->getinput('galleryThemeLegendTextColor'),$content );
$content = str_replace('#legendBgColor#',$this->getinput('galleryThemeLegendBgColor'),$content );
file_put_contents('module/gallery/view/index/index.css',$content . $themeCss);
file_put_contents('module/gallery/view/gallery/gallery.css',$content . $themeCss);
} }
// Valeurs en sortie // Valeurs en sortie
$this->addOutput([ $this->addOutput([

16
module/gallery/ressource/defaultdata.php Normal file
View File

@ -0,0 +1,16 @@
<?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)'
];
}

47
module/gallery/ressource/theme.css Normal file
View File

@ -0,0 +1,47 @@
.galleryPicture,
.galleryGalleryPicture {
display: block;
border: var(--thumbBorder) solid var(--thumbBorderColor);
height: var(--thumbHeight);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
-webkit-transition: opacity .3s ease-out;
transition: opacity .3s ease-out;
}
.galleryPicture:hover,
.galleryGalleryPicture:hover {
opacity: var(--thumbOpacity);
}
.galleryName,
.galleryGalleryName {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: var(--legendHeight);
background: var(--legendBgColor);
color: var(--legendTextColor);
text-align: var(--legendAlign);
}
.galleryRow {
display: flex;
flex-wrap: wrap;
justify-content: var(--thumbAlign);
}
.colPicture {
width : var(--thumbWidth);
max-width: 50%;
margin: var(--thumbMargin);
}
@media (max-width: 432px) {
.colPicture {
width: 90%;
max-width: 90%;
margin: 0.5em;
}
}

24
module/gallery/ressource/vartheme.css Normal file
View File

@ -0,0 +1,24 @@
.galleryRow {
--thumbAlign: #thumbAlign#;
}
.colPicture {
--thumbWidth: #thumbWidth#;
--thumbMargin: #thumbMargin#;
}
.galleryPicture,
.galleryGalleryPicture {
--thumbHeight: #thumbHeight#;
--thumbBorder: #thumbBorder#;
--thumbBorderColor: #thumbBorderColor#;
}
.galleryName,
.galleryGalleryName {
--legendHeight: #legendHeight#;
--legendAlign: #legendAlign#;
--legendTextColor: #legendTextColor#;
--legendBgColor: #legendBgColor#;
}
.galleryPicture:hover,
.galleryGalleryPicture:hover {
--thumbOpacity: #thumbOpacity#;
}

2
module/gallery/view/config/config.php
View File

@ -10,7 +10,7 @@
</div> </div>
<div class="col2 offset8"> <div class="col2 offset8">
<?php echo template::button('galleryConfigBack', [ <?php echo template::button('galleryConfigBack', [
//'href' => helper::baseUrl() . $this->getUrl(0) . '/theme/' . $_SESSION['csrf'], 'href' => helper::baseUrl() . $this->getUrl(0) . '/theme/' . $_SESSION['csrf'],
'value' => 'Thème' 'value' => 'Thème'
]); ?> ]); ?>
</div> </div>

48
module/gallery/view/gallery/gallery.css Executable file → Normal file
View File

@ -1,7 +1,32 @@
.galleryRow {
--thumbAlign: center;
}
.colPicture {
--thumbWidth: 18em;
--thumbMargin: .6em;
}
.galleryPicture,
.galleryGalleryPicture {
--thumbHeight: 15em;
--thumbBorder: .1em;
--thumbBorderColor: rgba(221, 221, 221, 1);
}
.galleryName,
.galleryGalleryName {
--legendHeight: .375em;
--legendAlign: center;
--legendTextColor: rgba(255, 255, 255, 1);
--legendBgColor: rgba(0, 0, 0, .6);
}
.galleryPicture:hover,
.galleryGalleryPicture:hover {
--thumbOpacity: .7;
}
.galleryPicture,
.galleryGalleryPicture { .galleryGalleryPicture {
display: block; display: block;
border: 1px solid #DDD; border: var(--thumbBorder) solid var(--thumbBorderColor);
height: 150px; height: var(--thumbHeight);
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
@ -9,29 +34,32 @@
-webkit-transition: opacity .3s ease-out; -webkit-transition: opacity .3s ease-out;
transition: opacity .3s ease-out; transition: opacity .3s ease-out;
} }
.galleryPicture:hover,
.galleryGalleryPicture:hover { .galleryGalleryPicture:hover {
opacity: .7; opacity: var(--thumbOpacity);
} }
.galleryName,
.galleryGalleryName { .galleryGalleryName {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
padding: 6px; padding: var(--legendHeight);
background: rgba(0, 0, 0, .6); background: var(--legendBgColor);
color: #FFF; color: var(--legendTextColor);
text-align: center; text-align: var(--legendAlign);
} }
.galleryRow { .galleryRow {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: var(--thumbAlign);
} }
.colPicture { .colPicture {
width : 16em; width : var(--thumbWidth);
max-width: 50%; max-width: 50%;
margin: 0.5em; margin: var(--thumbMargin);
} }
@media (max-width: 432px) { @media (max-width: 432px) {

54
module/gallery/view/index/index.css Executable file → Normal file
View File

@ -1,7 +1,32 @@
.galleryPicture { .galleryRow {
--thumbAlign: center;
}
.colPicture {
--thumbWidth: 18em;
--thumbMargin: .6em;
}
.galleryPicture,
.galleryGalleryPicture {
--thumbHeight: 15em;
--thumbBorder: .1em;
--thumbBorderColor: rgba(221, 221, 221, 1);
}
.galleryName,
.galleryGalleryName {
--legendHeight: .375em;
--legendAlign: center;
--legendTextColor: rgba(255, 255, 255, 1);
--legendBgColor: rgba(0, 0, 0, .6);
}
.galleryPicture:hover,
.galleryGalleryPicture:hover {
--thumbOpacity: .7;
}
.galleryPicture,
.galleryGalleryPicture {
display: block; display: block;
border: 1px solid #DDD; border: var(--thumbBorder) solid var(--thumbBorderColor);
height: 14em; height: var(--thumbHeight);
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
@ -9,29 +34,32 @@
-webkit-transition: opacity .3s ease-out; -webkit-transition: opacity .3s ease-out;
transition: opacity .3s ease-out; transition: opacity .3s ease-out;
} }
.galleryPicture:hover { .galleryPicture:hover,
opacity: .7; .galleryGalleryPicture:hover {
opacity: var(--thumbOpacity);
} }
.galleryName { .galleryName,
.galleryGalleryName {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
padding: 8px; padding: var(--legendHeight);
background: rgba(0, 0, 0, .6); background: var(--legendBgColor);
color: #FFF; color: var(--legendTextColor);
text-align: center; text-align: var(--legendAlign);
} }
.galleryRow { .galleryRow {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: var(--thumbAlign);
} }
.colPicture { .colPicture {
width : 16em; width : var(--thumbWidth);
max-width: 50%; max-width: 50%;
margin: 0.5em; margin: var(--thumbMargin);
} }
@media (max-width: 432px) { @media (max-width: 432px) {

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

@ -15,44 +15,52 @@
<div class="row"> <div class="row">
<div class="col12"> <div class="col12">
<div class="block"> <div class="block">
<h4>Vignettes</h4> <h4>Configuration des vignettes</h4>
<div class="row"> <div class="row">
<div class="col4"> <div class="col4">
<?php echo template::select('galleryThemeThumbAlign', $module::$galleryThemeAlign, [ <?php echo template::select('galleryThemeThumbAlign', $module::$galleryThemeFlexAlign, [
'label' => 'Alignement des vignettes sur la page :', 'label' => 'Alignement des vignettes sur la page :',
'selected' => $this->getData(['module', $this->getUrl(0),$this->getUrl(1),'theme','thumbAlign']) 'selected' => $this->getData(['theme', $this->getUrl(0),'thumbAlign'])
]); ?> ]); ?>
</div> </div>
<div class="col4"> <div class="col4">
<?php echo template::select('galleryThemeThumbWidth', $module::$galleryThemeSize, [ <?php echo template::select('galleryThemeThumbWidth', $module::$galleryThemeSize, [
'label' => 'Largeur des vignettes :', 'label' => 'Largeur des vignettes :',
'selected' => $this->getData(['module', $this->getUrl(0),$this->getUrl(1),'theme','thumbWidth']) 'selected' => $this->getData(['theme', $this->getUrl(0),'thumbWidth'])
]); ?> ]); ?>
</div> </div>
<div class="col4"> <div class="col4">
<?php echo template::select('galleryThemeThumbHeight', $module::$galleryThemeSize, [ <?php echo template::select('galleryThemeThumbHeight', $module::$galleryThemeSize, [
'label' => 'Hauteur des vignettes :', 'label' => 'Hauteur des vignettes :',
'selected' => $this->getData(['module', $this->getUrl(0),$this->getUrl(1),'theme','legendHeight']) 'selected' => $this->getData(['theme', $this->getUrl(0),'thumbHeight'])
]); ?> ]); ?>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col4"> <div class="col3">
<?php echo template::select('galleryThemeThumbMargin', $module::$galleryThemeMargin, [ <?php echo template::select('galleryThemeThumbMargin', $module::$galleryThemeMargin, [
'label' => 'Marges autour des vignettes :', 'label' => 'Marges autour des vignettes :',
'selected' => $this->getData(['module', $this->getUrl(0),$this->getUrl(1),'theme','thumbMargin']) 'selected' => $this->getData(['theme', $this->getUrl(0),'thumbMargin'])
]); ?> ]); ?>
</div> </div>
<div class="col4"> <div class="col3">
<?php echo template::select('galleryThemeThumbBorder', $module::$galleryThemeBorder, [ <?php echo template::select('galleryThemeThumbBorder', $module::$galleryThemeBorder, [
'label' => 'Epaisseur des bordures', 'label' => 'Epaisseur des bordures',
'selected' => $this->getData(['module', $this->getUrl(0),$this->getUrl(1),'theme','thumbBorder']) 'selected' => $this->getData(['theme', $this->getUrl(0),'thumbBorder'])
]); ?> ]); ?>
</div> </div>
<div class="col4"> <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">
<?php echo template::select('galleryThemeThumbOpacity', $module::$galleryThemeOpacity, [ <?php echo template::select('galleryThemeThumbOpacity', $module::$galleryThemeOpacity, [
'label' => 'Effet d\'opacité au survol', 'label' => 'Opacité au survol',
'selected' => $this->getData(['module', $this->getUrl(0),$this->getUrl(1),'theme','thumbOpacity']) 'selected' => $this->getData(['theme', $this->getUrl(0),'thumbOpacity'])
]); ?> ]); ?>
</div> </div>
</div> </div>
@ -62,42 +70,36 @@
<div class="row"> <div class="row">
<div class="col12"> <div class="col12">
<div class="block"> <div class="block">
<h4>Légendes</h4> <h4>Configuration des légendes</h4>
<div class="row"> <div class="row">
<div class="col6"> <div class="col6">
<?php echo template::select('galleryThemelegendHeight', $module::$galleryThemeLegendHeight, [ <?php echo template::select('galleryThemeLegendHeight', $module::$galleryThemeLegendHeight, [
'label' => 'Hauteur des légendes :', 'label' => 'Hauteur des légendes :',
'selected' => $this->getData(['module', $this->getUrl(0),$this->getUrl(1),'theme','legendHeight']) 'selected' => $this->getData(['theme', $this->getUrl(0),'legendHeight'])
]); ?> ]); ?>
</div> </div>
<div class="col6"> <div class="col6">
<?php echo template::select('galleryThemeThumbAlign', $module::$galleryThemeAlign, [ <?php echo template::select('galleryThemeLegendAlign', $module::$galleryThemeAlign, [
'label' => 'Alignement des légendes dans les vignettes :', 'label' => 'Alignement des légendes dans les vignettes :',
'selected' => $this->getData(['module', $this->getUrl(0),$this->getUrl(1),'theme','legendAlign']) 'selected' => $this->getData(['theme', $this->getUrl(0),'legendAlign'])
]); ?> ]); ?>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col4"> <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' => 'Couleur du texte de légende',
'value' => $this->getData(['module', $this->getUrl(0),$this->getUrl(1),'theme','legendTextColor']) 'value' => $this->getData(['theme', $this->getUrl(0),'legendTextColor'])
]); ?> ]); ?>
</div> </div>
<div class="col4"> <div class="col6">
<?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' => 'Couleur du fond de la légende',
'value' => $this->getData(['module', $this->getUrl(0),$this->getUrl(1),'theme','legendBgColor']) 'value' => $this->getData(['theme', $this->getUrl(0),'legendBgColor'])
]); ?>
</div>
<div class="col4">
<?php echo template::select('galleryThemelegendOpacity', $module::$galleryThemeOpacity, [
'label' => 'Opacité du fond des légendes :',
'selected' => $this->getData(['module', $this->getUrl(0),$this->getUrl(1),'theme','legendOpacity'])
]); ?> ]); ?>
</div> </div>
</div> </div>