2.17 Thème de la galerie

module/gallery/gallery.php

@@ -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)',
+		'9em'  => 'Très petite (9em)',
-		'10em' => 'Petite (10em)',
+		'12em' => 'Petite (12em)',
-		'12em' => '(12em)',
+		'15em' => 'Moyenne (15em)',
-		'14em' => 'Moyenne (14em)',
-		'16em' => '(16em)',
 		'18em' => 'Grande (18em)',
-		'20em' => 'Très grande (20em)'
+		'21em' => 'Très grande (21em)'
 	];
 
 	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 = [
 		'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 = [
 		'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 = [
 		'0em'    => 'Aucune',
-		'.2em'   => 'Très petite (.2em)',
+		'.1em'   => 'Très petite (.1em)',
-		'.4em'   => 'Petite (.4em)',
+		'.3em'   => 'Petite (.3em)',
 		'.6em'   => 'Moyenne (.6em)',
-		'.8em'  => 'Grande (.8em)',
+		'.9em'  => 'Grande (.9em)',
-		'1em'  => 'Très grande (1em)'
+		'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';	
 
 
 	/**
@@ -560,25 +567,47 @@ class gallery extends common {
 				'redirect' => helper::baseUrl() . $this->getUrl(0) . '/config',
 				'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), [
+			$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
 		$this->addOutput([

module/gallery/ressource/defaultdata.php

@@ -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)'
+    ];
+}

module/gallery/ressource/theme.css

@@ -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;
+	  }
+ }

module/gallery/ressource/vartheme.css

@@ -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#;
+}

module/gallery/view/config/config.php

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

module/gallery/view/gallery/gallery.css

@@ -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;
+	border: var(--thumbBorder) solid var(--thumbBorderColor);
-	height: 150px;
+	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;
+	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 {
 	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) {

module/gallery/view/index/index.css

@@ -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;
+	border: var(--thumbBorder) solid var(--thumbBorderColor);
-	height: 14em;
+	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 {
+.galleryPicture:hover,
-	opacity: .7;
+.galleryGalleryPicture:hover {
+	opacity: var(--thumbOpacity);
 }
-.galleryName {
+.galleryName,
+.galleryGalleryName {
 	position: absolute;
 	left: 0;
 	right: 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 {
 	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) {

module/gallery/view/theme/theme.php

@@ -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',
+                            '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>
@@ -62,44 +70,38 @@
     <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">
+                <div class="col6">
-                    <?php echo template::text('galleryThemelegendTextcolor', [
+                    <?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">
+                <div class="col6">
-                    <?php echo template::text('galleryThemelegendBgcolor', [
+                    <?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'])
+                        '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>