menu avec min width pour tous ou parents

This commit is contained in:
Deltacms 2022-11-25 17:22:00 +01:00
parent 131cc5dc25
commit 11321d944b
10 changed files with 94 additions and 55 deletions

View File

@ -550,14 +550,21 @@ $(document).ready(function(){
});
/*
* Largeur du sous-menu égale à la largeur de l'onglet parent sauf en petit écran
* Largeur minimale des onglets principaux du menu et largeur du sous-menu égale à la largeur de l'onglet parent
* sauf en petit écran
*/
$(window).on("resize", function() {
if( $(window).width() > 768 ){
$.each(parentPage, function(index, value) {
$('.' + value).css('min-width', '<?php echo $this->getData(['theme', 'menu', 'minWidhtParent']); ?>');
$('.navSub .'+value).css('width', $('.'+value).css('width'));
$('.' + value).css('text-align', 'left');
var page=[];
if( '<?php echo $this->getData(['theme', 'menu', 'minWidthParentOrAll']); ?>' === ''){
page = parentPage;
} else{
page = allPage;
}
$.each(page, function(index, value) {
$('nav li .' + value).css('min-width', '<?php echo $this->getData(['theme', 'menu', 'minWidthTab']); ?>');
$('nav li ul li .'+value).css('width', $('.'+value).css('width'));
$('nav li.' + value).css('text-align', 'left');
});
}
}).trigger("resize");

View File

@ -1614,7 +1614,7 @@ class common {
$currentPageId = $this->getData(['page', $this->getUrl(0)]) ? $this->getUrl(0) : $this->getUrl(2);
?> <script> var parentPage=[]; </script>
?> <script> var parentPage=[]; var allPage=[]; </script>
<?php
foreach($this->getHierarchy() as $parentPageId => $childrenPageIds) {
@ -1623,11 +1623,12 @@ class common {
$active = ($parentPageId === $currentPageId OR in_array($currentPageId, $childrenPageIds)) ? 'active ' : '';
$targetBlank = $this->getData(['page', $parentPageId, 'targetBlank']) ? ' target="_blank"' : '';
// Si c'est une page parent, on passe son id à core.js.php pour adampter la largeur du sous-menu à la largeur de l'onglet de la page parent
// Si c'est une page parent on passe son id à core.js.php pour adampter la largeur du sous-menu à la largeur de l'onglet de la page parent
if( $childrenPageIds !== [] ){ ?>
<script> parentPage.push('<?php echo $parentPageId; ?>'); </script>
<?php }
<?php } ?>
<script> allPage.push('<?php echo $parentPageId; ?>'); </script>
<?php
// Mise en page de l'item
$itemsLeft .= '<li>';
if ( ( $this->getData(['page',$parentPageId,'disable']) === true
@ -2291,7 +2292,7 @@ class core extends common {
}
// Check la version rafraichissement du theme
$cssVersion = preg_split('/\*+/', file_get_contents(self::DATA_DIR.'theme.css'));
if(empty($cssVersion[1]) OR $cssVersion[1] !== md5(json_encode($this->getData(['theme'])))) {
if(empty($cssVersion[1]) OR $cssVersion[1] !== md5(json_encode($this->getData(['theme']))) OR $this->getData([ 'theme', 'update']) === true) {
// Version
$css = '/*' . md5(json_encode($this->getData(['theme']))) . '*/';
// Déclaration des polices
@ -2457,6 +2458,16 @@ class core extends common {
$css .= 'nav a.active{color:' . $color2['text'] . '}';*/
}
$css .= 'nav #burgerText{color:' . $this->getData(['theme','menu','burgerTextColor']) .';font-size:'.$this->getData(['theme','menu','burgerFontSize']) .';}';
// Appliquer au menu les réglages de largeur minimale suivant l'option tous ou pages parent uniquement
foreach($this->getHierarchy() as $parentPageId => $childrenPageIds) {
if( $this->getData(['theme', 'menu', 'minWidthParentOrAll']) === true || $childrenPageIds !== [] ){
$css .= 'nav li .' . $parentPageId . '{ min-width : '. $this->getData(['theme', 'menu', 'minWidthTab']) .';}';
}
}
// Sous menu
$colors = helper::colorVariants($this->getData(['theme', 'menu', 'backgroundColorSub']));
$css .= 'nav .navSub a{background-color:' . $colors['normal'] . '}';
@ -2482,13 +2493,7 @@ class core extends common {
}
$css .= '#toggle span,#menu a{padding:' . $this->getData(['theme', 'menu', 'height']) .';font-family:"' . $this->getData(['fonts', $this->getData(['theme', 'menu', 'font']), 'name']) . '",sans-serif;font-weight:' . $this->getData(['theme', 'menu', 'fontWeight']) . ';font-size:' . $this->getData(['theme', 'menu', 'fontSize']) . ';text-transform:' . $this->getData(['theme', 'menu', 'textTransform']) . '}';
/* Orientation des sous-menus
if( $this->getData(['theme', 'menu', 'textAlign']) === 'right'){
$css .= 'nav ul .navSub{right: 0px}';
} else {
$css .= 'nav ul .navSub{left: 0px}';
*/
// Pied de page
$colors = helper::colorVariants($this->getData(['theme', 'footer', 'backgroundColor']));
if($this->getData(['theme', 'footer', 'margin'])) {
@ -2519,6 +2524,7 @@ class core extends common {
$css .= '#cookieConsentConfirm{ background-color: '. $colors['normal'].' ; color: '. $colors['text'] .'; }';
// Enregistre la personnalisation
$this->setData([ 'theme', 'update', false]);
file_put_contents(self::DATA_DIR.'theme.css', $css);
// Effacer le cache pour tenir compte de la couleur de fond TinyMCE
header("Expires: Tue, 01 Jan 2000 00:00:00 GMT");

View File

@ -84,6 +84,9 @@ if ($this->getData(['core', 'dataVersion']) < 4401) {
$this->setData(['user', $userId, 'group', $this->getData(['user', $userId, 'group']) +1 ]);
}
}
$this->setData(['theme', 'menu', 'minWidthTab', '100px']);
$this->setData(['theme', 'menu', 'minWidthParentOrAll', true]);
$this->setData(['theme', 'update', false]);
// Mise à jour
$this->setData(['core', 'dataVersion', 4401]);
}

View File

@ -566,18 +566,15 @@ nav ul {
nav li {
display: inline-block;
position: relative;
/*max-width: 30vmin;*/
}
@media screen and (max-width: 768px) {
nav li {
/*max-width: 50vmin;*/
} }
nav li ul {
display: block;
position: absolute;
/*width: inherit;*/
z-index: -1;
opacity: 0;
transition: .3s ease-out;

View File

@ -363,7 +363,9 @@ class init extends common {
'burgerContent' => 'title',
'width' => 'container',
'burgerFontSize' => '1.5em',
'burgerTextColor' => '#DDD'
'burgerTextColor' => '#DDD',
'minWidthTab' => '100px',
'minWidthParentOrAll' => false
],
'site' => [
'backgroundColor' => 'rgba(255, 255, 255, 1)',
@ -393,7 +395,8 @@ class init extends common {
'button' => [
'backgroundColor' => 'rgba(32, 59, 82, 1)'
],
'version' => 0
'version' => 0,
'update' => false
],
'admin' => [
'backgroundColor' => 'rgba(255, 255, 255, 1)',

View File

@ -227,7 +227,8 @@ $text['core_theme_view']['menu'][34] = 'Style';
$text['core_theme_view']['menu'][35] = 'Character case';
$text['core_theme_view']['menu'][36] = 'Automatic background color';
$text['core_theme_view']['menu'][37] = 'Minimum width of a parent tab';
$text['core_theme_view']['menu'][38] = 'The submenu has a width imposed by the width of the parent tab, this selection sets a minimum width of the parent tab.';
$text['core_theme_view']['menu'][38] = 'Minimum width of menu tabs. The submenu has a width imposed by that of the parent tab.';
$text['core_theme_view']['menu'][39] = 'On: all / Off: with submenu only';
$text['core_theme_view']['site'][0] = 'Back';
$text['core_theme_view']['site'][1] = 'Help';
$text['core_theme_view']['site'][2] = 'Save';
@ -515,8 +516,8 @@ $typeAddFont = [
//'link' => 'Fichier externe avec link',
//'import' => 'Fichier externe avec import'
];
$minWidthParent = [
'none' => 'free',
$minWidthTab = [
'auto' => 'free',
'50px' => '50px',
'100px' => '100px',
'120px' => '120px',

View File

@ -227,7 +227,8 @@ $text['core_theme_view']['menu'][34] = 'Style';
$text['core_theme_view']['menu'][35] = 'Casse';
$text['core_theme_view']['menu'][36] = 'Couleur de fond automatique';
$text['core_theme_view']['menu'][37] = 'Largeur minimale d\'un onglet parent';
$text['core_theme_view']['menu'][38] = 'Le sous-menu a une largeur imposée par celle de l\'onglet parent, cette sélection permet de définir une largeur minimale de l\'onglet parent.';
$text['core_theme_view']['menu'][38] = 'Largeur minimum des onglets du menu.Le sous-menu a une largeur imposée par celle de l\'onglet parent.';
$text['core_theme_view']['menu'][39] = 'On : tous / Off : avec sous-menu uniquement';
$text['core_theme_view']['site'][0] = 'Retour';
$text['core_theme_view']['site'][1] = 'Aide';
$text['core_theme_view']['site'][2] = 'Enregistrer';
@ -514,8 +515,8 @@ $typeAddFont = [
//'link' => 'Fichier externe avec link',
//'import' => 'Fichier externe avec import'
];
$minWidthParent = [
'none' => 'libre',
$minWidthTab = [
'auto' => 'libre',
'50px' => '50px',
'100px' => '100px',
'120px' => '120px',

View File

@ -311,6 +311,7 @@ class theme extends common {
include('./core/module/theme/lang/'. $this->getData(['config', 'i18n', 'langAdmin']) . '/lex_theme.php');
// Soumission du formulaire
if($this->isPost()) {
$this->setData([ 'theme', 'update', true]);
$this->setData(['theme', 'body', [
'backgroundColor' => $this->getInput('themeBodyBackgroundColor'),
'image' => $this->getInput('themeBodyImage'),
@ -346,6 +347,7 @@ class theme extends common {
include('./core/module/theme/lang/'. $this->getData(['config', 'i18n', 'langAdmin']) . '/lex_theme.php');
// Soumission du formulaire
if($this->isPost()) {
$this->setData([ 'theme', 'update', true]);
if ( $this->getInput('themeFooterCopyrightPosition') === 'hide' &&
$this->getInput('themeFooterSocialsPosition') === 'hide' &&
$this->getInput('themeFooterTextPosition') === 'hide' ) {
@ -425,6 +427,7 @@ class theme extends common {
include('./core/module/theme/lang/'. $this->getData(['config', 'i18n', 'langAdmin']) . '/lex_theme.php');
// Soumission du formulaire
if($this->isPost()) {
$this->setData([ 'theme', 'update', true]);
// Modification des URL des images dans la bannière perso
$featureContent = $this->getInput('themeHeaderText', null);
// $featureContent = str_replace(helper::baseUrl(false,false), './', $featureContent);
@ -521,6 +524,7 @@ class theme extends common {
include('./core/module/theme/lang/'. $this->getData(['config', 'i18n', 'langAdmin']) . '/lex_theme.php');
// Soumission du formulaire
if($this->isPost()) {
$this->setData([ 'theme', 'update', true]);
$this->setData(['theme', 'menu', [
'backgroundColor' => $this->getInput('themeMenuBackgroundColor'),
'backgroundColorSub' => $this->getInput('themeMenuBackgroundColorSub'),
@ -546,7 +550,8 @@ class theme extends common {
'burgerContent' => $this->getInput('themeMenuBurgerContent'),
'burgerTextColor' => $this->getInput('themeMenuBurgerTextColor'),
'burgerFontSize' => $this->getInput('themeMenuBurgerFontSize'),
'minWidhtParent' => $this->getInput('themeMenuMinWidthParent')
'minWidthTab' => $this->getInput('themeMenuMinWidthTab'),
'minWidthParentOrAll' => $this->getInput('themeMenuMinWidthParentOrAll', helper::FILTER_BOOLEAN),
]]);
// Valeurs en sortie
@ -621,6 +626,7 @@ class theme extends common {
include('./core/module/theme/lang/'. $this->getData(['config', 'i18n', 'langAdmin']) . '/lex_theme.php');
// Soumission du formulaire
if($this->isPost()) {
$this->setData([ 'theme', 'update', true]);
$this->setData(['theme', 'title', [
'font' => $this->getInput('themeTitleFont'),
'textColor' => $this->getInput('themeTitleTextColor'),

View File

@ -141,18 +141,26 @@ $("input, select").on("change", function() {
});
// Aperçu pour la largeur minimale de l'onglet parent
$("#themeMenuMinWidthParent").on("change", function() {
// Aperçu pour la largeur minimale des onglets et la largeur du sous-menu
$("#themeMenuMinWidthParentOrAll, #themeMenuMinWidthTab").on("change", function() {
if( $(window).width() > 768 ){
$.each(parentPage, function(index, value) {
$('.' + value).css('min-width', $("#themeMenuMinWidthParent").val());
$('.navSub .'+value).css('width', $('.'+value).css('width'));
$('.' + value).css('text-align', 'left');
});
if( $('#themeMenuMinWidthParentOrAll').prop('checked') === false){
$('a.A, a.B').css('min-width', 'auto');
$.each(parentPage, function(index, value) {
$('.' + value).css('min-width', $("#themeMenuMinWidthTab").val());
$('.navsub .'+value).css('width', $('.'+value).css('width'));
$('.' + value).css('text-align', 'left');
});
} else {
$('a.A, a.B').css('min-width', $("#themeMenuMinWidthTab").val());
$('nav li ul li a').css('min-width', $("#themeMenuMinWidthTab").val());
$('nav li ul li a').css('width', $("#themeMenuMinWidthTab").val());
$('a.A, a.B').css('text-align', 'left');
}
}
}).trigger("change");
//
// Lien de connexion (addClass() et removeClass() au lieu de hide() et show() car ils ne conservent pas le display-inline: block; de #themeMenuLoginLink)
$("#themeMenuLoginLink").on("change", function() {
if($(this).is(":checked")) {

View File

@ -54,43 +54,50 @@ echo template::formOpen('themeMenuForm'); ?>
</div>
</div>
<div class="row">
<div class="col3">
<div class="col4">
<?php echo template::select('themeMenuRadius', $menuRadius, [
'label' => $text['core_theme_view']['menu'][6],
'selected' => $this->getData(['theme', 'menu', 'radius']),
'help' => $text['core_theme_view']['menu'][7]
]); ?>
</div>
<div class="col3">
<div class="col4">
<?php echo template::select('themeMenuHeight', $menuHeights, [
'label' => $text['core_theme_view']['menu'][8],
'selected' => $this->getData(['theme', 'menu', 'height'])
]); ?>
</div>
<div class="col3">
<div class="col4">
<?php echo template::select('themeMenuTextAlign', $aligns, [
'label' => $text['core_theme_view']['menu'][9],
'selected' => $this->getData(['theme', 'menu', 'textAlign'])
]); ?>
</div>
<div class="col3">
<?php echo template::select('themeMenuMinWidthParent', $minWidthParent, [
'label' => $text['core_theme_view']['menu'][37],
'help' => $text['core_theme_view']['menu'][38],
'selected' => $this->getData(['theme', 'menu', 'minWidhtParent'])
]); ?>
</div>
</div>
<div class="row">
<div id="themeMenuPositionOptions" class="displayNone">
<?php echo template::checkbox('themeMenuMargin', true, $text['core_theme_view']['menu'][10], [
'checked' => $this->getData(['theme', 'menu', 'margin'])
]); ?>
<div class="col4">
<div id="themeMenuPositionOptions" class="displayNone">
<?php echo template::checkbox('themeMenuMargin', true, $text['core_theme_view']['menu'][10], [
'checked' => $this->getData(['theme', 'menu', 'margin'])
]); ?>
</div>
<div id="themeMenuPositionFixed" class="displayNone">
<?php echo template::checkbox('themeMenuFixed', true, $text['core_theme_view']['menu'][11], [
'checked' => $this->getData(['theme', 'menu', 'fixed'])
]); ?>
</div>
</div>
<div id="themeMenuPositionFixed" class="displayNone">
<?php echo template::checkbox('themeMenuFixed', true, $text['core_theme_view']['menu'][11], [
'checked' => $this->getData(['theme', 'menu', 'fixed'])
]); ?>
<div class="col4">
<?php echo template::select('themeMenuMinWidthTab', $minWidthTab, [
'label' => $text['core_theme_view']['menu'][37],
'help' => $text['core_theme_view']['menu'][38],
'selected' => $this->getData(['theme', 'menu', 'minWidthTab'])
]); ?>
</div>
<div class="col4" style="padding:30px 0 0 10px;>
<?php echo template::checkbox('themeMenuMinWidthParentOrAll', true, $text['core_theme_view']['menu'][39], [
'checked' => $this->getData(['theme', 'menu', 'minWidthParentOrAll'])
]); ?>
</div>
</div>
</div>