Select avec family name

core/class/template.class.php

@@ -1,6 +1,6 @@
 <?php
 
-class template {
+class template  {
 
     /**
     * Crée un bouton
@@ -118,7 +118,7 @@ class template {
         copy ('core/vendor/zwiico/png/' .  $attributes['type'] . '/' . $letters[$firstNumber] .  '.png', 'site/tmp/' . $firstLetter . '.png');
         copy ('core/vendor/zwiico/png/' .  $attributes['type'] . '/' . $letters[$secondNumber] . '.png', 'site/tmp/' . $secondLetter . '.png');
 
-      
+
         // Début du wrapper
         $html = '<div id="' . $attributes['id'] . 'Wrapper" class="captcha inputWrapper ' . $attributes['classWrapper'] . '">';
         // Label
@@ -447,7 +447,7 @@ class template {
                     $lang = 'fr';
                 }
         }
-        return '<img class="flag" src="' . helper::baseUrl(false) . 'core/vendor/i18n/png/' . $lang . '.png" 
+        return '<img class="flag" src="' . helper::baseUrl(false) . 'core/vendor/i18n/png/' . $lang . '.png"
                 width="' . $size .'"
                 height="' . $size .'"
                 title="' . $lang .'"
@@ -612,8 +612,13 @@ class template {
             'label' => '',
             'name' => $nameId,
             'selected' => '',
-            'fonts' => false
+            'fonts' =>  []
         ], $attributes);
+        // Stocker les fontes et remettre à zéro le tableau des fontes transmis pour éviter une erreur de sprintAttributes
+        if (empty($attributes['fonts']) === false) {
+            $fonts = $attributes['fonts'];
+            $attributes['fonts'] = [];
+        }
         // Sauvegarde des données en cas d'erreur
         if($attributes['before'] AND array_key_exists($attributes['id'], common::$inputBefore)) {
             $attributes['selected'] = common::$inputBefore[$attributes['id']];
@@ -626,7 +631,7 @@ class template {
                 'help' => $attributes['help']
             ]);
         }
-        // Notice
+         // Notice
         $notice = '';
         if(array_key_exists($attributes['id'], common::$inputNotices)) {
             $notice = common::$inputNotices[$attributes['id']];
@@ -638,12 +643,14 @@ class template {
             helper::sprintAttributes($attributes)
         );
         foreach($options as $value => $text) {
-            $html .=   $attributes['fonts'] === true ? sprintf(
+            // Select des liste de fontes
+            $html .=   isset($fonts)  ? sprintf(
                     '<option value="%s"%s style="font-family: %s;">%s</option>',
                     $value,
                     $attributes['selected'] == $value ? ' selected' : '', // Double == pour ignorer le type de variable car $_POST change les types en string
-                    $text,
+                    $fonts[$value],
                     $text
+                // Select standard
                 ) : sprintf(
                     '<option value="%s"%s>%s</option>',
                         $value,

core/module/theme/theme.php

@@ -232,7 +232,8 @@ class theme extends common {
 	// Variable pour construire la liste des pages du site
 	public static $pagesList = [];
 	// Variable pour construire la liste des fontes installées
-	public static $fontsList = [];
+	public static $fontsNames= [];
+	public static $fonts = [];
 	// Variable pour détailler les fontes installées
 	public static $fontsDetail = [];
 
@@ -1126,7 +1127,11 @@ class theme extends common {
 	// Retourne un tableau simple des fonts installées idfont avec le nom
 	// Cette fonction est utile aux sélecteurs de fonts dans les formulaires.
 	public function enumFonts() {
-		// Récupère la liste des fontes installées
+		/**
+		* Récupère la liste des fontes installées et construit deux tableaux
+		* id - nom
+		* id - font-family - resource
+		*/
 		$f ['files'] =  $this->getData(['fonts', 'files']);
 		$f ['imported'] =  $this->getData(['fonts', 'imported']);
 		$f ['websafe'] = self::$fontsWebSafe;
@@ -1134,12 +1139,14 @@ class theme extends common {
 		foreach(['websafe', 'imported', 'files'] as $type) {
 			if (is_array($f[$type]))  {
 				foreach ($f[$type] as $fontId => $fontValue ) {
-					$fonts [$fontId] = $fontValue['name'];
+					self::$fonts['name'][$fontId] = $fontValue['name'];
+					self::$fonts['family'][$fontId] = $fontValue['font-family'];
 				}
 			}
 		}
-		ksort($fonts);
+		// Liste des fontes pour les sélecteurs
-		self::$fontsList = $fonts;
+		ksort(self::$fonts['name']);
+		ksort(self::$fonts['family']);
 	}
 
 }

core/module/theme/view/admin/admin.php

@@ -128,10 +128,10 @@
 					<h4>Mise en forme du texte</h4>
 					<div class="row">
 						<div class="col4">
-							<?php echo template::select('adminFontText', $module::$fontsList, [
+							<?php echo template::select('adminFontText', $module::$fonts['name'], [
 								'label' => 'Police du texte',
 								'selected' => $this->getData(['admin', 'fontText']),
-								'fonts' => true
+								'fonts' => $module::$fonts['family']
 							]); ?>
 						</div>
 						<div class="col4">
@@ -141,10 +141,10 @@
 							]); ?>
 						</div>
 						<div class="col4">
-							<?php echo template::select('adminFontTitle', $module::$fontsList, [
+							<?php echo template::select('adminFontTitle', $module::$fonts['name'], [
 								'label' => 'Police des titres',
 								'selected' => $this->getData(['admin', 'fontTitle']),
-								'fonts' => true
+								'fonts' => $module::$fonts['family']
 							]); ?>
 						</div>
 					</div>

core/module/theme/view/footer/footer.php

@@ -171,10 +171,10 @@
             <h4>Mise en forme du texte</h4>
             <div class="row">
                 <div class="col3">
-                    <?php echo template::select('themeFooterFont', $module::$fontsList, [
+                    <?php echo template::select('themeFooterFont', $module::$fonts['name'], [
 							'label' => 'Fonte',
 							'selected' => $this->getData(['theme', 'footer', 'font']),
-							'fonts' => true
+							'fonts' => $module::$fonts['family']
 						]); ?>
                 </div>
                 <div class="col3">

core/module/theme/view/header/header.php

@@ -106,10 +106,10 @@
                         ]); ?>
                 </div>
                 <div class="col4">
-                    <?php echo template::select('themeHeaderFont', $module::$fontsList, [
+                    <?php echo template::select('themeHeaderFont', $module::$fonts['name'], [
 							'label' => 'Fonte',
 							'selected' => $this->getData(['theme', 'header', 'font']),
-							'fonts' => true
+							'fonts' => $module::$fonts['family']
 						]); ?>
                 </div>
                 <div class="col4">

core/module/theme/view/menu/menu.php

@@ -183,10 +183,10 @@
             <h4>Mise en forme du texte</h4>
             <div class="row">
                 <div class="col6">
-                    <?php echo template::select('themeMenuFont', $module::$fontsList, [
+                    <?php echo template::select('themeMenuFont', $module::$fonts['name'], [
 								'label' => 'Fonte',
 								'selected' => $this->getData(['theme', 'menu', 'font']),
-                                'fonts' => true
+                                'fonts' => $module::$fonts['family']
 							]); ?>
                 </div>
                 <div class="col6">

core/module/theme/view/site/site.js.php

@@ -11,7 +11,32 @@
  * @link http://zwiicms.fr/
  */
 
+ $( document ).ready(function() {
 
+	/**
+	 * Chargement des fontes installées pour l'aperçu dans les sélecteurs
+	 */
+	var fontsFile = 	<?php echo json_encode($this->getData(['fonts', 'files']) ); ?>;
+	var fontsImported = <?php echo json_encode($this->getData(['fonts', 'imported']) ); ?>;
+	var fonts = 		<?php echo json_encode(self::$fontsWebSafe); ?>;
+
+	// Concaténation
+	if (fontsImported.length != 0 ) {
+		fonts = $.merge(fonts, fontsImported);
+	}
+	if (fontsFile.length != 0 ) {
+		fonts = $.merge(fonts, fontsFile);
+	}
+	// Fonte WebSa
+	 $.each(fonts, function(key, value) {
+		console.log( "The key is" + key);
+		$.each(value, function(i, f) {
+			console.log(f);
+		});
+
+	});
+
+ });
 
 /**
  * Aperçu en direct
@@ -28,20 +53,19 @@ $("input, select").on("change",function() {
 		$("#themeSiteMarginWrapper").show();
 	}
 
+
 	/**
 	 * Aperçu dans la boîte
 	 */
 
-	// Import des polices de caractères
+	// Import des polices de caractères pour l'aperçu en temps réel
 	var titleFont = $("#themeTitleFont :selected").val();
 	var titleFontText = $("#themeTitleFont :selected").text();
 	var textFont = $("#themeTextFont :selected").val();
 	var textFontText = $("#themeTextFont :selected").text();
-	var css = "@import url('https://fonts.cdnfonts.com/css/" + titleFont +  "');";
-	var css = "@import url('https://fonts.cdnfonts.com/css/" + textFont + "');";
 	// Couleurs des boutons
 	var colors = core.colorVariants($("#themeButtonBackgroundColor").val());
-	css += ".button.buttonSubmitPreview{background-color:" + colors.normal + ";}";
+	var css = ".button.buttonSubmitPreview{background-color:" + colors.normal + ";}";
 	css += ".button.buttonSubmitPreview:hover{background-color:" + colors.darken + "}";
 	css += ".button.buttonSubmitPreview{color:" + colors.text + ";}";
 
@@ -113,5 +137,4 @@ $("input, select").on("change",function() {
 		.attr("id", "themePreview")
 		.text(css)
 		.appendTo("head");
-
 }).trigger("change");

core/module/theme/view/site/site.php

@@ -141,7 +141,8 @@
                             <div class="row">
                                 <div class="col12">
                                     <div class="block preview">
-                                        <h4 class="preview">Bloc</h4>										<p class="textPreview">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                                        <h4 class="preview">Bloc</h4>
+										<p class="textPreview">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 										<p><a href="#" class="urlPreview">Lorem ipsum dolor sit amet.</a></p>
 									</div>
 								</div>
@@ -158,10 +159,11 @@
 				<h4>Mise en forme du texte</h4>
 				<div class="row">
 					<div class="col6">
-						<?php echo template::select('themeTextFont', $module::$fontsList, [
+						<?php 
+						echo template::select('themeTextFont', $module::$fonts['name'], [
 							'label' => 'Fonte',
 							'selected' => $this->getData(['theme', 'text', 'font']),
-							'fonts' => true
+							'fonts' => $module::$fonts['family']
 						]); ?>
 					</div>
 					<div class="col6">
@@ -179,10 +181,10 @@
 				<h4>Mise en forme des titres</h4>
 				<div class="row">
 					<div class="col4">
-						<?php echo template::select('themeTitleFont', $module::$fontsList, [
+						<?php echo template::select('themeTitleFont',  $module::$fonts['name'] , [
 							'label' => 'Fonte',
 							'selected' => $this->getData(['theme', 'title', 'font']),
-							'fonts' => true
+							'fonts' => $module::$fonts['family']
 						]); ?>
 					</div>
 					<div class="col4">