[9.2.10] Amélioration bannière responsive

This commit is contained in:
fredtempez 2019-11-11 19:12:19 +01:00
parent bd65a07b4d
commit ad47125c11
4 changed files with 51 additions and 22 deletions

View File

@ -307,6 +307,7 @@ core.start = function() {
core.noticeAdd(_this.attr("id"), "Format incorrect"); core.noticeAdd(_this.attr("id"), "Format incorrect");
} }
}); });
/** /**
* Iframes et vidéos responsives * Iframes et vidéos responsives
*/ */
@ -329,7 +330,25 @@ core.start = function() {
}); });
}).trigger("resize"); }).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.start();
/** /**

View File

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

View File

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

View File

@ -55,24 +55,18 @@
</div> </div>
<div id="themeHeaderImageOptions" class="displayNone"> <div id="themeHeaderImageOptions" class="displayNone">
<div class="row"> <div class="row">
<div class="col4"> <div class="col6">
<?php echo template::select('themeHeaderImageRepeat', $module::$repeats, [ <?php echo template::select('themeHeaderImageRepeat', $module::$repeats, [
'label' => 'Répétition', 'label' => 'Répétition',
'selected' => $this->getData(['theme', 'header', 'imageRepeat']) 'selected' => $this->getData(['theme', 'header', 'imageRepeat'])
]); ?> ]); ?>
</div> </div>
<div class="col4"> <div class="col6">
<?php echo template::select('themeHeaderImagePosition', $module::$imagePositions, [ <?php echo template::select('themeHeaderImagePosition', $module::$imagePositions, [
'label' => 'Position', 'label' => 'Position',
'selected' => $this->getData(['theme', 'header', 'imagePosition']) 'selected' => $this->getData(['theme', 'header', 'imagePosition'])
]); ?> ]); ?>
</div> </div>
<div class="col4">
<?php echo template::select('themeHeaderImageContainer', $module::$headerWide, [
'label' => 'Adaptation',
'selected' => $this->getData(['theme', 'header', 'imageContainer'])
]); ?>
</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col4"> <div class="col4">
@ -98,20 +92,29 @@
<div class="block"> <div class="block">
<h4>Configuration</h4> <h4>Configuration</h4>
<div class="row"> <div class="row">
<div class="col4"> <div class="col3">
<?php echo template::select('themeHeaderPosition', $module::$headerPositions, [ <?php echo template::select('themeHeaderPosition', $module::$headerPositions, [
'label' => 'Position', 'label' => 'Position',
'selected' => $this->getData(['theme', 'header', 'position']) 'selected' => $this->getData(['theme', 'header', 'position'])
]); ?> ]); ?>
</div> </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, [ <?php echo template::select('themeHeaderHeight', $module::$headerHeights, [
'label' => 'Hauteur', 'label' => 'Hauteur maximale',
'selected' => $this->getData(['theme', 'header', 'height']), '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>
<div class="col4"> <div class="col3">
<?php echo template::select('themeHeaderTextAlign', $module::$aligns, [ <?php echo template::select('themeHeaderTextAlign', $module::$aligns, [
'label' => 'Alignement du contenu', 'label' => 'Alignement du contenu',
'selected' => $this->getData(['theme', 'header', 'textAlign']) 'selected' => $this->getData(['theme', 'header', 'textAlign'])