Bannière personnalisée

Manque JS  + tests
This commit is contained in:
Fred Tempez 2021-11-07 15:50:24 +01:00
parent 6384e75393
commit 932caa814d
6 changed files with 129 additions and 96 deletions

View File

@ -2233,7 +2233,6 @@ class core extends common {
$css .= '.block {border: 1px solid ' . $this->getdata(['theme','block','borderColor']) . ';}.block h4 {background-color:'. $colors['normal'] . ';color:' . $colors['text'] .';}';
$css .= '.mce-tinymce {border: 1px solid ' . $this->getdata(['theme','block','borderColor']) .' !important;}';
// Bannière
$colors = helper::colorVariants($this->getData(['theme', 'header', 'backgroundColor']));
if($this->getData(['theme', 'header', 'margin'])) {
if($this->getData(['theme', 'menu', 'position']) === 'site-first') {
$css .= 'header{margin:0 20px}';
@ -2242,18 +2241,21 @@ class core extends common {
$css .= 'header{margin:20px 20px 0 20px}';
}
}
$css .= 'header{background-size:' . $this->getData(['theme','header','imageContainer']).'}';
$css .= 'header{background-color:' . $colors['normal'];
if ($this->getData(['theme','header','feature']) === 'wallpaper' ) {
$colors = helper::colorVariants($this->getData(['theme', 'header', 'backgroundColor']));
$css .= 'header{background-size:' . $this->getData(['theme','header','imageContainer']).'}';
$css .= 'header{background-color:' . $colors['normal'];
// Valeur de hauteur traditionnelle
$css .= ';height:' . $this->getData(['theme', 'header', 'height']) . ';line-height:' . $this->getData(['theme', 'header', 'height']) ;
// Valeur de hauteur traditionnelle
$css .= ';height:' . $this->getData(['theme', 'header', 'height']) . ';line-height:' . $this->getData(['theme', 'header', 'height']) ;
$css .= ';text-align:' . $this->getData(['theme', 'header', 'textAlign']) . '}';
if($themeHeaderImage = $this->getData(['theme', 'header', 'image'])) {
$css .= 'header{background-image:url("../file/source/' . $themeHeaderImage . '");background-position:' . $this->getData(['theme', 'header', 'imagePosition']) . ';background-repeat:' . $this->getData(['theme', 'header', 'imageRepeat']) . '}';
$css .= ';text-align:' . $this->getData(['theme', 'header', 'textAlign']) . '}';
if($themeHeaderImage = $this->getData(['theme', 'header', 'image'])) {
$css .= 'header{background-image:url("../file/source/' . $themeHeaderImage . '");background-position:' . $this->getData(['theme', 'header', 'imagePosition']) . ';background-repeat:' . $this->getData(['theme', 'header', 'imageRepeat']) . '}';
}
$colors = helper::colorVariants($this->getData(['theme', 'header', 'textColor']));
$css .= 'header span{color:' . $colors['normal'] . ';font-family:"' . str_replace('+', ' ', $this->getData(['theme', 'header', 'font'])) . '",sans-serif;font-weight:' . $this->getData(['theme', 'header', 'fontWeight']) . ';font-size:' . $this->getData(['theme', 'header', 'fontSize']) . ';text-transform:' . $this->getData(['theme', 'header', 'textTransform']) . '}';
}
$colors = helper::colorVariants($this->getData(['theme', 'header', 'textColor']));
$css .= 'header span{color:' . $colors['normal'] . ';font-family:"' . str_replace('+', ' ', $this->getData(['theme', 'header', 'font'])) . '",sans-serif;font-weight:' . $this->getData(['theme', 'header', 'fontWeight']) . ';font-size:' . $this->getData(['theme', 'header', 'fontSize']) . ';text-transform:' . $this->getData(['theme', 'header', 'textTransform']) . '}';
// Menu
$colors = helper::colorVariants($this->getData(['theme', 'menu', 'backgroundColor']));
$css .= 'nav,nav.navMain a{background-color:' . $colors['normal'] . '}';

View File

@ -61,20 +61,24 @@
<?php if($this->getData(['theme', 'header', 'position']) === 'body'): ?>
<header <?php if($this->getData(['theme', 'header', 'tinyHidden']) === true): ?>class="bannerDisplay"<?php endif;?>>
<?php ?>
<?php echo $this->getData(['theme','header','linkHomePage']) ? '<a href="' . helper::baseUrl(false) . '">' : ''; ?>
<?php echo ($this->getData(['theme','header','linkHomePage']) && $this->getData(['theme','header','feature']) === 'wallpaper' ) ? '<a href="' . helper::baseUrl(false) . '">' : ''; ?>
<div id="headerContainer" class="container">
<?php if(
$this->getData(['theme', 'header', 'textHide']) === false
// Affiche toujours le titre de la bannière pour l'édition du thème
OR ($this->getUrl(0) === 'theme' AND $this->getUrl(1) === 'header')
): ?>
<span class="notranslate" id="themeHeaderTitle"><?php echo $this->getData(['locale', 'title']); ?></span>
<?php else: ?>
<span id="themeHeaderTitle">&nbsp;</span>
<?php if ($this->getData(['theme','header','feature']) === 'wallpaper' ): ?>
<?php if(
$this->getData(['theme', 'header', 'textHide']) === false
// Affiche toujours le titre de la bannière pour l'édition du thème
OR ($this->getUrl(0) === 'theme' AND $this->getUrl(1) === 'header')
): ?>
<span class="notranslate" id="themeHeaderTitle"><?php echo $this->getData(['locale', 'title']); ?></span>
<?php else: ?>
<span id="themeHeaderTitle">&nbsp;</span>
<?php endif; ?>
<?php else: ?>
<?php echo $this->getData(['theme','header','content']);?>
<?php endif; ?>
</div> <!--fin container -->
<?php echo $this->getData(['theme','header','linkHomePage']) ? '</a>' : ''; ?>
</div> <!--fin container -->
</header>
<?php echo ( $this->getData(['theme','header','linkHomePage']) && $this->getData(['theme','header','feature']) === 'wallpaper' ) ? '</a>' : ''; ?>
<?php endif; ?>
<!-- Menu dans le fond du site après la bannière -->
@ -110,24 +114,26 @@
)
): ?>
<!-- Bannière dans le site -->
<?php echo $this->getData(['theme','header','linkHomePage']) ? '<a href="' . helper::baseUrl(false) . '">' : ''; ?>
<header class="
<?php echo $this->getData(['theme', 'header', 'position']) === 'hide' ? 'displayNone' : ''; ?>
<?php echo $this->getData(['theme', 'header', 'tinyHidden']) ? ' bannerDisplay' : ''; ?>
">
<?php echo ( $this->getData(['theme','header','linkHomePage']) && $this->getData(['theme','header','feature']) === 'wallpaper' ) ? '<a href="' . helper::baseUrl(false) . '">' : ''; ?>
<header class="<?php echo $this->getData(['theme', 'header', 'position']) === 'hide' ? 'displayNone' : ''; ?>
<?php echo $this->getData(['theme', 'header', 'tinyHidden']) ? ' bannerDisplay' : ''; ?> ">
<div id="headerContainer" class="container">
<?php if(
$this->getData(['theme', 'header', 'textHide']) === false
// Affiche toujours le titre de la bannière pour l'édition du thème
OR ($this->getUrl(0) === 'theme' AND $this->getUrl(1) === 'header')
): ?>
<span class="notranslate" id="themeHeaderTitle"><?php echo $this->getData(['locale', 'title']); ?></span>
<?php if ($this->getData(['theme','header','feature']) === 'wallpaper' ): ?>
<?php if(
$this->getData(['theme', 'header', 'textHide']) === false
// Affiche toujours le titre de la bannière pour l'édition du thème
OR ($this->getUrl(0) === 'theme' AND $this->getUrl(1) === 'header')
): ?>
<span class="notranslate" id="themeHeaderTitle"><?php echo $this->getData(['locale', 'title']); ?></span>
<?php else: ?>
<span id="themeHeaderTitle">&nbsp;</span>
<?php endif; ?>
<?php else: ?>
<span id="themeHeaderTitle">&nbsp;</span>
<?php echo $this->getData(['theme','header','content']);?>
<?php endif; ?>
</div> <!--fin container -->
</header>
<?php echo $this->getData(['theme','header','linkHomePage']) ? '</a>' : ''; ?>
<?php echo ( $this->getData(['theme','header','linkHomePage']) && $this->getData(['theme','header','feature']) === 'wallpaper' ) ? '</a>' : ''; ?>
<?php endif; ?>
<?php if(
$this->getData(['theme', 'menu', 'position']) === 'site-second' ||

View File

@ -157,7 +157,9 @@ class init extends common {
'textTransform' => 'none',
'linkHomePage' => true,
'imageContainer' => 'auto',
'tinyHidden' => true
'tinyHidden' => true,
'feature' => 'wallpaper',
'featureContent' => '<p>Bannière vide</p>'
],
'menu' => [
'backgroundColor' => 'rgba(32, 59, 82, 1)',

View File

@ -69,6 +69,10 @@ class theme extends common {
'Ubuntu' => 'Ubuntu',
'Vollkorn' => 'Vollkorn'
];
public static $containers = [
'container' => 'Largeur du site',
'container-large' => 'Largeur de la page'
];
public static $footerblocks = [
1 => [
'hide' => 'Masqué',
@ -133,6 +137,10 @@ class theme extends common {
'site' => 'Dans le site',
'hide' => 'Cachée'
];
public static $headerFeatures = [
'wallpaper' => 'Couleur unie ou papier-peint',
'content' => 'Contenu personnalisé'
];
public static $imagePositions = [
'top left' => 'En haut à gauche',
'top center' => 'En haut au centre',
@ -435,6 +443,7 @@ class theme extends common {
'fontSize' => $this->getInput('themeHeaderFontSize'),
'fontWeight' => $this->getInput('themeHeaderFontWeight'),
'height' => $this->getInput('themeHeaderHeight'),
'container' => $this->getInput('themeHeaderContainer'),
'image' => $this->getInput('themeHeaderImage'),
'imagePosition' => $this->getInput('themeHeaderImagePosition'),
'imageRepeat' => $this->getInput('themeHeaderImageRepeat'),
@ -446,7 +455,9 @@ class theme extends common {
'textTransform' => $this->getInput('themeHeaderTextTransform'),
'linkHomePage' => $this->getInput('themeHeaderlinkHomePage',helper::FILTER_BOOLEAN),
'imageContainer' => $this->getInput('themeHeaderImageContainer'),
'tinyHidden' => $this->getInput('themeHeaderTinyHidden', helper::FILTER_BOOLEAN)
'tinyHidden' => $this->getInput('themeHeaderTinyHidden', helper::FILTER_BOOLEAN),
'feature' => $this->getInput('themeHeaderFeature'),
'featureContent' => $this->getInput('themeHeaderContent', null)
]]);
// Modification de la position du menu selon la position de la bannière
if ( $this->getData(['theme','header','position']) == 'site' )
@ -474,7 +485,8 @@ class theme extends common {
$this->addOutput([
'title' => 'Personnalisation de la bannière',
'vendor' => [
'tinycolorpicker'
'tinycolorpicker',
'tinymce'
],
'view' => 'header'
]);
@ -504,6 +516,7 @@ class theme extends common {
'fontSize' => $this->getInput('themeMenuFontSize'),
'fontWeight' => $this->getInput('themeMenuFontWeight'),
'height' => $this->getInput('themeMenuHeight'),
'container' => $this->getInput('themeMenuContainer'),
'loginLink' => $this->getInput('themeMenuLoginLink', helper::FILTER_BOOLEAN),
'margin' => $this->getInput('themeMenuMargin', helper::FILTER_BOOLEAN),
'position' => $this->getInput('themeMenuPosition'),

View File

@ -17,51 +17,40 @@
<div class="block">
<h4>Paramètres</h4>
<div class="row">
<div class="col3">
<div class="col6">
<?php echo template::select('themeHeaderFeature', $module::$headerFeatures, [
'label' => 'Nature de contenu',
'selected' => $this->getData(['theme', 'header', 'feature'])
]); ?>
</div>
<div class="col6">
<?php echo template::select('themeHeaderPosition', $module::$headerPositions, [
'label' => 'Position',
'selected' => $this->getData(['theme', 'header', 'position'])
]); ?>
</div>
<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 maximale',
'selected' => $this->getData(['theme', 'header', 'height']),
'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="col3">
<?php echo template::select('themeHeaderTextAlign', $module::$aligns, [
'label' => 'Alignement du contenu',
'selected' => $this->getData(['theme', 'header', 'textAlign'])
]); ?>
</div>
</div>
<div class="row">
<div class="col6">
<div class="col4">
<div id="themeHeaderSmallDisplay" class="displayNone">
<?php echo template::checkbox('themeHeaderTinyHidden', true, 'Masquer la bannière en écran réduit', [
'checked' => $this->getData(['theme', 'header', 'tinyHidden'])
]); ?>
</div>
</div>
<div class="col6">
<div class="col4">
<div id="themeHeaderPositionOptions" class="displayNone">
<?php echo template::checkbox('themeHeaderMargin', true, 'Aligner la bannière avec le contenu', [
'checked' => $this->getData(['theme', 'header', 'margin'])
]); ?>
</div>
</div>
<div class="col4">
<?php echo template::select('themeHeaderContainer', $module::$containers, [
'label' => 'Largeur',
'selected' => $this->getData(['theme', 'header', 'container'])
]); ?>
</div>
</div>
</div>
</div>
@ -94,7 +83,42 @@
<div class="row">
<div class="col12">
<div class="block">
<h4>Image</h4>
<h4>Mise en forme du titre</h4>
<div class="row">
<div class="col3">
<?php echo template::select('themeHeaderFont', $module::$fonts, [
'label' => 'Police',
'selected' => $this->getData(['theme', 'header', 'font']),
'fonts' => true
]); ?>
</div>
<div class="col3">
<?php echo template::select('themeHeaderFontSize', $module::$headerFontSizes, [
'label' => 'Taille',
'help' => 'Proportionnelle à celle définie dans le site.',
'selected' => $this->getData(['theme', 'header', 'fontSize'])
]); ?>
</div>
<div class="col3">
<?php echo template::select('themeHeaderFontWeight', $module::$fontWeights, [
'label' => 'Style',
'selected' => $this->getData(['theme', 'header', 'fontWeight'])
]); ?>
</div>
<div class="col3">
<?php echo template::select('themeHeaderTextTransform', $module::$textTransforms, [
'label' => 'Casse',
'selected' => $this->getData(['theme', 'header', 'textTransform'])
]); ?>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col12">
<div class="block">
<h4>Papier peint</h4>
<div class="row">
<div class="col12">
<?php
@ -149,33 +173,13 @@
<div class="row">
<div class="col12">
<div class="block">
<h4>Mise en forme du texte</h4>
<h4>Contenu personnalisé</h4>
<div class="row">
<div class="col3">
<?php echo template::select('themeHeaderFont', $module::$fonts, [
'label' => 'Police',
'selected' => $this->getData(['theme', 'header', 'font']),
'fonts' => true
]); ?>
</div>
<div class="col3">
<?php echo template::select('themeHeaderFontSize', $module::$headerFontSizes, [
'label' => 'Taille',
'help' => 'Proportionnelle à celle définie dans le site.',
'selected' => $this->getData(['theme', 'header', 'fontSize'])
]); ?>
</div>
<div class="col3">
<?php echo template::select('themeHeaderFontWeight', $module::$fontWeights, [
'label' => 'Style',
'selected' => $this->getData(['theme', 'header', 'fontWeight'])
]); ?>
</div>
<div class="col3">
<?php echo template::select('themeHeaderTextTransform', $module::$textTransforms, [
'label' => 'Casse',
'selected' => $this->getData(['theme', 'header', 'textTransform'])
]); ?>
<div class="col12">
<?php echo template::textarea('themeHeaderContent', [
'class' => 'editorWysiwyg',
'value' => $this->getData(['theme', 'header', 'featureContent'])
]); ?>
</div>
</div>
</div>

View File

@ -32,21 +32,27 @@
?>
</div>
<div class="col6">
<?php echo template::select('themeMenuContainer', $module::$containers, [
'label' => 'Largeur',
'selected' => $this->getData(['theme', 'menu', 'container'])
]); ?>
</div>
</div>
<div class="row">
<div class="col4">
<?php echo template::select('themeMenuRadius', $module::$menuRadius, [
'label' => 'Bords arrondis',
'selected' => $this->getData(['theme', 'menu', 'radius']),
'help' => 'Autour de la page sélectionnée'
]); ?>
</div>
</div>
<div class="row">
<div class="col6">
<div class="col4">
<?php echo template::select('themeMenuHeight', $module::$menuHeights, [
'label' => 'Hauteur',
'selected' => $this->getData(['theme', 'menu', 'height'])
]); ?>
</div>
<div class="col6">
<div class="col4">
<?php echo template::select('themeMenuTextAlign', $module::$aligns, [
'label' => 'Alignement du contenu',
'selected' => $this->getData(['theme', 'menu', 'textAlign'])