ZwiiCMS-Team/ZwiiCMS
ZwiiCMS-Team
/
ZwiiCMS
3
3
Fork 2
Code Releases 143 Activity

[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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
core/core.js.php
View File

@ -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();
/**

2
core/module/theme/theme.php
View File

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

23
core/module/theme/view/header/header.js.php
View File

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

29
core/module/theme/view/header/header.php
View File

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