[9.2.10] Amélioration bannière responsive

core/core.js.php

@@ -307,6 +307,7 @@ core.start = function() {
 			core.noticeAdd(_this.attr("id"), "Format incorrect");
 		}
 	});
+
 	/**
 	 * Iframes et vidéos responsives
 	 */
@@ -329,7 +330,25 @@ core.start = function() {
 		});
 	}).trigger("resize");
 
+	/*
+	* Header responsive
+	*/
+	$(window).on("resize", function() {
+		var responsive = "<?php echo $this->getdata(['theme','header','imageContainer']);?>";
+		if (responsive === "cover" || responsive === "contain" ) {
+			var widthpx = "<?php echo $this->getdata(['theme','site','width']);?>";
+			var width = widthpx.substr(0,widthpx.length-2);
+			var heightpx = "<?php echo $this->getdata(['theme','header','height']);?>";
+			var height = heightpx.substr(0,heightpx.length-2);
+			var ratio = width / height;
+			$("header").height( $(window).width() / ratio );
+			$("header").css("line-height", $(window).width() / ratio + "px"); 
+		}
+	}).trigger("resize");
+
 };
+
+
 core.start();
 
 /**

core/module/theme/theme.php

@@ -216,8 +216,8 @@ class theme extends common {
 	];
 	public static $headerWide = [	
 		'auto auto' => 'Automatique',	
-		'cover' => 'Responsive (cover)',
 		'100% 100%' => 'Image étirée (100% 100%)',
+		'cover' => 'Responsive (cover)',
 		'contain' => 'Responsive (contain)'
 	];
 	public static $footerTemplate = [	

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

@@ -12,7 +12,10 @@
  * @link http://zwiicms.com/
  */
 
-
+$(document).ready(function(){
+	$("header").css("line-height", "");
+	$("header").css("height", "");
+});
 
 /**
  * Aperçu en direct
@@ -35,21 +38,25 @@ $("input, select").on("change", function() {
 			tmpImgHeight = tmpImg.height;
 		}
 
-		//Modifier la dropdown liste
-		if ($("#themeHeaderImage").val() !== "") {
+		//Modifier la dropdown liste si une image n'est pas sélectionnée
+		if ($("#themeHeaderImage").val() !== "" ) {
 			// Une image est ajoutée ou changée
-			if ($("#themeHeaderHeight option").length === 4) {
+			if ($("#themeHeaderHeight option").length === 5) {
+				// Pas d'image précédemment on ajoute l'option
 				$("#themeHeaderHeight ").prepend('<option selected="selected" value="0"> Hauteur de l\'image sélectionnée </option>');
-			}
+			} 
 			// Modifier la valeur
 			$("#themeHeaderHeight option:eq(0)").val(tmpImgHeight + "px");
 			// Modifier l'option
-			$("#themeHeaderHeight option:first-child").html("Hauteur de l\'image sélectionnée (" + tmpImgHeight + "px)");
-		} else {
-			$("#themeHeaderHeight option:first-child").html("Hauteur de l\'image sélectionnée");
+			$("#themeHeaderHeight option:eq(0)").html("Hauteur de l\'image sélectionnée (" + tmpImgHeight + "px)");
 		}
 	};
 
+	if ($("#themeHeaderImage").val() === "" &&
+		$("#themeHeaderHeight option").length === 6 ) {
+		$("#themeHeaderHeight option:eq(0)").remove();
+	}
+
 	tmpImg.src= "<?php echo helper::baseUrl(false); ?>" + "site/file/source/" + $("#themeHeaderImage").val();
 
 	// Import des polices de caractères

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

@@ -55,24 +55,18 @@
             </div>
             <div id="themeHeaderImageOptions" class="displayNone">
                 <div class="row">
-                    <div class="col4">
+                    <div class="col6">
                         <?php echo template::select('themeHeaderImageRepeat', $module::$repeats, [
 								'label' => 'Répétition',
 								'selected' => $this->getData(['theme', 'header', 'imageRepeat'])
 							]); ?>
                     </div>
-                    <div class="col4">
+                    <div class="col6">
                         <?php echo template::select('themeHeaderImagePosition', $module::$imagePositions, [
 								'label' => 'Position',
 								'selected' => $this->getData(['theme', 'header', 'imagePosition'])
 							]); ?>
                     </div>
-                    <div class="col4">
-                        <?php echo template::select('themeHeaderImageContainer', $module::$headerWide, [
-								'label' => 'Adaptation',
-								'selected' => $this->getData(['theme', 'header', 'imageContainer'])
-							]); ?>
-                    </div>
                 </div>
                 <div class="row">
                     <div class="col4">
@@ -98,20 +92,29 @@
         <div class="block">
             <h4>Configuration</h4>
             <div class="row">
-                <div class="col4">
+                <div class="col3">
                     <?php echo template::select('themeHeaderPosition', $module::$headerPositions, [
 							'label' => 'Position',
 							'selected' => $this->getData(['theme', 'header', 'position'])
 						]); ?>
                 </div>
-                <div class="col4">
+                <div class="col3">
+                    <?php echo template::select('themeHeaderImageContainer', $module::$headerWide, [
+                            'label' => 'Adaptation',
+                            'selected' => $this->getData(['theme', 'header', 'imageContainer']),
+                            'help' => 'Les modes responsives permettent de conserver des dimensions proportionnelles.<br />
+                                Cover pour une image plus grande que la bannière, Contain pour une image plus petite.
+                                Les modes Auto et Etiré ne provoquent pas de modification de la hauteur de la bannière.'
+                        ]); ?>
+                </div>                 
+                <div class="col3">
                     <?php echo template::select('themeHeaderHeight', $module::$headerHeights, [
-							'label' => 'Hauteur',
+							'label' => 'Hauteur maximale',
                             'selected' => $this->getData(['theme', 'header', 'height']),
-                            'help' => "Quelque soit la taille de la bannière, la hauteur maximale autorisée est de 600 pixels."
+                            'help' => 'La hauteur maximale est de 600 pixels, même si les dimensions de l\'image sélectionnée sont supérieures. <br />Lorsque l\'adaptation est positionnée sur Responsive, la hauteur diminue proportionnellement à la largeur.'
 						]); ?>
                 </div>
-                <div class="col4">
+                <div class="col3">
                     <?php echo template::select('themeHeaderTextAlign', $module::$aligns, [
 							'label' => 'Alignement du contenu',
 							'selected' => $this->getData(['theme', 'header', 'textAlign'])