adaptation manquante + jquery en cours

This commit is contained in:
Fred Tempez 2021-11-09 18:58:19 +01:00
parent bc60e9b857
commit 8fdac9753e
2 changed files with 76 additions and 66 deletions

View File

@ -22,10 +22,70 @@
*/
$("input, select").on("change", function() {
// Affiche / Cache les options de l'image du fond
$("#themeHeaderImage").on("change", function() {
if($(this).val()) {
$("#themeHeaderImageOptions").slideDown();
}
else {
$("#themeHeaderImageOptions").slideUp(function() {
$("#themeHeaderTextHide").prop("checked", false).trigger("change");
});
}
}).trigger("change");
// Affiche / Cache les options de la position
$("#themeHeaderPosition").on("change", function() {
if($(this).val() === 'site') {
$("#themeHeaderPositionOptions").slideDown();
}
else {
$("#themeHeaderPositionOptions").slideUp(function() {
$("#themeHeaderMargin").prop("checked", false).trigger("change");
});
}
}).trigger("change");
// Affiche / Cache les options de la bannière cliquable si pas masquée
$("#themeHeaderPosition").on("change", function() {
if($(this).val() === 'hide') {
$("#themeHeaderShow").slideUp(function() {
$("#themeHeaderlinkHome").prop("checked", false).trigger("change");
});
}
else {
$("#themeHeaderShow").slideDown();
}
}).trigger("change");
// Affiche / Cache l'option bannière masquée en écran réduit
$("#themeHeaderPosition").on("change", function() {
if($(this).val() === 'hide') {
$("#themeHeaderSmallDisplay").slideUp();
}
else {
$("#themeHeaderSmallDisplay").slideDown();
}
}).trigger("change");
// Affiche les blocs selon le type bannière
$("#themeHeaderFeature").on("change", function() {
if($(this).val() === 'wallpaper') {
$(".wallpaperContainer").show();
$(".featureContainer").hide();
}
if($(this).val() === 'feature') {
$(".featureContainer").show();
$(".wallpaperContainer").hide();
}
}).trigger("change");
// Récupérer la taille de l'image
var tmpImg = new Image();
tmpImg.onload = function() {
// Informations affichées
$("#themeHeaderImageHeight").html(tmpImg.height + "px");
@ -65,7 +125,8 @@ $("input, select").on("change", function() {
var css = "@import url('https://fonts.googleapis.com/css?family=" + headerFont + "');";
// Couleurs, image, alignement et hauteur de la bannière
if ($("#themeHeaderFeature") === "wallpaper") {
console.log ($("#themeHeaderFeature").val());
if ($("#themeHeaderFeature").val() == "wallpaper") {
css += "header{background-color:" + $("#themeHeaderBackgroundColor").val() + ";text-align:" + $("#themeHeaderTextAlign").val() + ";";
if ($("#themeHeaderImage").val()) {
// Une image est sélectionnée
@ -78,7 +139,7 @@ $("input, select").on("change", function() {
}
css += "line-height:" + $("#themeHeaderHeight").val() + ";height:" + $("#themeHeaderHeight").val() + "}";
}
if ($("#themeHeaderFeature") === "feature") {
if ($("#themeHeaderFeature").val() == "feature") {
css += "header{height:" + $("#themeHeaderHeight").val() + ";}";
}
@ -178,63 +239,3 @@ $("input, select").on("change", function() {
.appendTo("head");
}).trigger("change");
// Affiche / Cache les options de l'image du fond
$("#themeHeaderImage").on("change", function() {
if($(this).val()) {
$("#themeHeaderImageOptions").slideDown();
}
else {
$("#themeHeaderImageOptions").slideUp(function() {
$("#themeHeaderTextHide").prop("checked", false).trigger("change");
});
}
}).trigger("change");
// Affiche / Cache les options de la position
$("#themeHeaderPosition").on("change", function() {
if($(this).val() === 'site') {
$("#themeHeaderPositionOptions").slideDown();
}
else {
$("#themeHeaderPositionOptions").slideUp(function() {
$("#themeHeaderMargin").prop("checked", false).trigger("change");
});
}
}).trigger("change");
// Affiche / Cache les options de la bannière cliquable si pas masquée
$("#themeHeaderPosition").on("change", function() {
if($(this).val() === 'hide') {
$("#themeHeaderShow").slideUp(function() {
$("#themeHeaderlinkHome").prop("checked", false).trigger("change");
});
}
else {
$("#themeHeaderShow").slideDown();
}
}).trigger("change");
// Affiche / Cache l'option bannière masquée en écran réduit
$("#themeHeaderPosition").on("change", function() {
if($(this).val() === 'hide') {
$("#themeHeaderSmallDisplay").slideUp();
}
else {
$("#themeHeaderSmallDisplay").slideDown();
}
}).trigger("change");
// Affiche les blocs selon le type bannière
$("#themeHeaderFeature").on("change", function() {
if($(this).val() === 'wallpaper') {
$(".wallpaperContainer").show();
$(".featureContainer").hide();
}
if($(this).val() === 'feature') {
$(".featureContainer").show();
$(".wallpaperContainer").hide();
}
}).trigger("change");

View File

@ -141,13 +141,22 @@
</div>
<div id="themeHeaderImageOptions" class="displayNone">
<div class="row">
<div class="col6">
<div class="col4">
<?php echo template::select('themeHeaderImageRepeat', $module::$repeats, [
'label' => 'Répétition',
'selected' => $this->getData(['theme', 'header', 'imageRepeat'])
]); ?>
</div>
<div class="col6">
<div class="col4">
<?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="col4">
<?php echo template::select('themeHeaderImagePosition', $module::$imagePositions, [
'label' => 'Position',
'selected' => $this->getData(['theme', 'header', 'imagePosition'])