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

2.17 Thème de la galerie

Browse Source
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'
];
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 = [
'left' => 'À gauche',
'center' => 'Au centre',
@ -43,47 +51,46 @@ class gallery extends common {
];
public static $galleryThemeSize = [
'8em' => 'Très petite (8em)',
'10em' => 'Petite (10em)',
'12em' => '(12em)',
'14em' => 'Moyenne (14em)',
'16em' => '(16em)',
'9em' => 'Très petite (9em)',
'12em' => 'Petite (12em)',
'15em' => 'Moyenne (15em)',
'18em' => 'Grande (18em)',
'20em' => 'Très grande (20em)'
'21em' => 'Très grande (21em)'
];
public static $galleryThemeLegendHeight = [
'2em' => 'Très petite (2em)',
'4em' => 'Petite (4em)',
'6em' => 'Moyenne (6em)',
'8em' => 'Grande (8em)',
'10em' => 'Très grande (10em)'
'.125em' => 'Très petite (.125 em)',
'.25em' => 'Petite (.25em)',
'.375em' => 'Moyenne (.375em)',
'.5em' => 'Grande (.5em)',
'.625em' => 'Très grande (.625em)'
];
public static $galleryThemeBorder = [
'0em' => 'Aucune',
'1em' => 'Très petite (1em)',
'2em' => 'Petite (2em)',
'3em' => 'Moyenne (3em)',
'4em' => 'Grande (4em)',
'5em' => 'Très grande (5em)'
'.1em' => 'Très petite (.1em)',
'.4em' => 'Petite (.2em)',
'.5em' => 'Moyenne (.5em)',
'.8em' => 'Grande (.8em)',
'1.2em' => 'Très grande (1.2em)'
];
public static $galleryThemeOpacity = [
'1' => 'Aucun ',
'.9' => 'Faible (.9)',
'.8' => 'Moyen (0.8)',
'.7' => 'Fort(0.7)',
'.6' => 'Très fort (0.6)'
'.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)'
];
public static $galleryThemeMargin = [
'0em' => 'Aucune',
'.2em' => 'Très petite (.2em)',
'.4em' => 'Petite (.4em)',
'.1em' => 'Très petite (.1em)',
'.3em' => 'Petite (.3em)',
'.6em' => 'Moyenne (.6em)',
'.8em' => 'Grande (.8em)',
'1em' => 'Très grande (1em)'
'.9em' => 'Grande (.9em)',
'1.2em' => 'Très grande (1.2em)'
];
public static $directories = [];
@ -100,7 +107,7 @@ class gallery extends common {
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'
]);
}
// 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
if($this->isPost()) {
$this->setData(['module', $this->getUrl(0), $this->getUrl(1), [
'config' => [
'name' => $this->getData(['module',$this->getUrl(0),$this->getUrl(1),'config','name']),
'directory' => $this->getData(['module',$this->getUrl(0),$this->getUrl(1),'config','directory']),
'homePicture' => $this->getData(['module',$this->getUrl(0),$this->getUrl(1),'config','homePicture']),
'sort' => $this->getData(['module',$this->getUrl(0),$this->getUrl(1),'config','sort']),
'position' => $this->getData(['module',$this->getUrl(0),$this->getUrl(1),'config','position']),
'fullScreen' => $this->getData(['module',$this->getUrl(0),$this->getUrl(1),'config','fullScreen'])
],
'legend' => $this->getData(['module',$this->getUrl(0),$this->getUrl(1),'legend']),
'position' => $this->getData(['module',$this->getUrl(0),$this->getUrl(1),'position']),
'theme' => [
$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')
]
]]);
]);
// 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
$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 class="col2 offset8">
<?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'
]); ?>
</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 {
display: block;
border: 1px solid #DDD;
height: 150px;
border: var(--thumbBorder) solid var(--thumbBorderColor);
height: var(--thumbHeight);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
@ -9,29 +34,32 @@
-webkit-transition: opacity .3s ease-out;
transition: opacity .3s ease-out;
}
.galleryPicture:hover,
.galleryGalleryPicture:hover {
opacity: .7;
opacity: var(--thumbOpacity);
}
.galleryName,
.galleryGalleryName {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 6px;
background: rgba(0, 0, 0, .6);
color: #FFF;
text-align: center;
padding: var(--legendHeight);
background: var(--legendBgColor);
color: var(--legendTextColor);
text-align: var(--legendAlign);
}
.galleryRow {
display: flex;
flex-wrap: wrap;
justify-content: center;
justify-content: var(--thumbAlign);
}
.colPicture {
width : 16em;
width : var(--thumbWidth);
max-width: 50%;
margin: 0.5em;
margin: var(--thumbMargin);
}
@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;
border: 1px solid #DDD;
height: 14em;
border: var(--thumbBorder) solid var(--thumbBorderColor);
height: var(--thumbHeight);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
@ -9,29 +34,32 @@
-webkit-transition: opacity .3s ease-out;
transition: opacity .3s ease-out;
}
.galleryPicture:hover {
opacity: .7;
.galleryPicture:hover,
.galleryGalleryPicture:hover {
opacity: var(--thumbOpacity);
}
.galleryName {
.galleryName,
.galleryGalleryName {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 8px;
background: rgba(0, 0, 0, .6);
color: #FFF;
text-align: center;
padding: var(--legendHeight);
background: var(--legendBgColor);
color: var(--legendTextColor);
text-align: var(--legendAlign);
}
.galleryRow {
display: flex;
flex-wrap: wrap;
justify-content: center;
justify-content: var(--thumbAlign);
}
.colPicture {
width : 16em;
width : var(--thumbWidth);
max-width: 50%;
margin: 0.5em;
margin: var(--thumbMargin);
}
@media (max-width: 432px) {

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

@ -15,44 +15,52 @@
<div class="row">
<div class="col12">
<div class="block">
<h4>Vignettes</h4>
<h4>Configuration des vignettes</h4>
<div class="row">
<div class="col4">
<?php echo template::select('galleryThemeThumbAlign', $module::$galleryThemeAlign, [
<?php echo template::select('galleryThemeThumbAlign', $module::$galleryThemeFlexAlign, [
'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 class="col4">
<?php echo template::select('galleryThemeThumbWidth', $module::$galleryThemeSize, [
'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 class="col4">
<?php echo template::select('galleryThemeThumbHeight', $module::$galleryThemeSize, [
'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 class="row">
<div class="col4">
<div class="col3">
<?php echo template::select('galleryThemeThumbMargin', $module::$galleryThemeMargin, [
'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 class="col4">
<div class="col3">
<?php echo template::select('galleryThemeThumbBorder', $module::$galleryThemeBorder, [
'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 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, [
'label' => 'Effet d\'opacité au survol',
'selected' => $this->getData(['module', $this->getUrl(0),$this->getUrl(1),'theme','thumbOpacity'])
'label' => 'Opacité au survol',
'selected' => $this->getData(['theme', $this->getUrl(0),'thumbOpacity'])
]); ?>
</div>
</div>
@ -62,42 +70,36 @@
<div class="row">
<div class="col12">
<div class="block">
<h4>Légendes</h4>
<h4>Configuration des légendes</h4>
<div class="row">
<div class="col6">
<?php echo template::select('galleryThemelegendHeight', $module::$galleryThemeLegendHeight, [
<?php echo template::select('galleryThemeLegendHeight', $module::$galleryThemeLegendHeight, [
'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 class="col6">
<?php echo template::select('galleryThemeThumbAlign', $module::$galleryThemeAlign, [
<?php echo template::select('galleryThemeLegendAlign', $module::$galleryThemeAlign, [
'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 class="row">
<div class="col4">
<?php echo template::text('galleryThemelegendTextcolor', [
<div class="col6">
<?php echo template::text('galleryThemeLegendTextColor', [
'class' => 'colorPicker',
'help' => 'Le curseur horizontal règle le niveau de transparence.',
'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 class="col4">
<?php echo template::text('galleryThemelegendBgcolor', [
<div class="col6">
<?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',
'value' => $this->getData(['module', $this->getUrl(0),$this->getUrl(1),'theme','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'])
'value' => $this->getData(['theme', $this->getUrl(0),'legendBgColor'])
]); ?>
</div>
</div>