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() { $(window).on("resize", function() {
if( $(window).width() > 768 ){ if( $(window).width() > 768 ){
$.each(parentPage, function(index, value) { var page=[];
$('.' + value).css('min-width', '<?php echo $this->getData(['theme', 'menu', 'minWidhtParent']); ?>'); if( '<?php echo $this->getData(['theme', 'menu', 'minWidthParentOrAll']); ?>' === ''){
$('.navSub .'+value).css('width', $('.'+value).css('width')); page = parentPage;
$('.' + value).css('text-align', 'left'); } 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"); }).trigger("resize");

View File

@ -1614,7 +1614,7 @@ class common {
$currentPageId = $this->getData(['page', $this->getUrl(0)]) ? $this->getUrl(0) : $this->getUrl(2); $currentPageId = $this->getData(['page', $this->getUrl(0)]) ? $this->getUrl(0) : $this->getUrl(2);
?> <script> var parentPage=[]; </script> ?> <script> var parentPage=[]; var allPage=[]; </script>
<?php <?php
foreach($this->getHierarchy() as $parentPageId => $childrenPageIds) { foreach($this->getHierarchy() as $parentPageId => $childrenPageIds) {
@ -1623,11 +1623,12 @@ class common {
$active = ($parentPageId === $currentPageId OR in_array($currentPageId, $childrenPageIds)) ? 'active ' : ''; $active = ($parentPageId === $currentPageId OR in_array($currentPageId, $childrenPageIds)) ? 'active ' : '';
$targetBlank = $this->getData(['page', $parentPageId, 'targetBlank']) ? ' target="_blank"' : ''; $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 !== [] ){ ?> if( $childrenPageIds !== [] ){ ?>
<script> parentPage.push('<?php echo $parentPageId; ?>'); </script> <script> parentPage.push('<?php echo $parentPageId; ?>'); </script>
<?php } <?php } ?>
<script> allPage.push('<?php echo $parentPageId; ?>'); </script>
<?php
// Mise en page de l'item // Mise en page de l'item
$itemsLeft .= '<li>'; $itemsLeft .= '<li>';
if ( ( $this->getData(['page',$parentPageId,'disable']) === true if ( ( $this->getData(['page',$parentPageId,'disable']) === true
@ -2291,7 +2292,7 @@ class core extends common {
} }
// Check la version rafraichissement du theme // Check la version rafraichissement du theme
$cssVersion = preg_split('/\*+/', file_get_contents(self::DATA_DIR.'theme.css')); $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 // Version
$css = '/*' . md5(json_encode($this->getData(['theme']))) . '*/'; $css = '/*' . md5(json_encode($this->getData(['theme']))) . '*/';
// Déclaration des polices // Déclaration des polices
@ -2457,6 +2458,16 @@ class core extends common {
$css .= 'nav a.active{color:' . $color2['text'] . '}';*/ $css .= 'nav a.active{color:' . $color2['text'] . '}';*/
} }
$css .= 'nav #burgerText{color:' . $this->getData(['theme','menu','burgerTextColor']) .';font-size:'.$this->getData(['theme','menu','burgerFontSize']) .';}'; $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 // Sous menu
$colors = helper::colorVariants($this->getData(['theme', 'menu', 'backgroundColorSub'])); $colors = helper::colorVariants($this->getData(['theme', 'menu', 'backgroundColorSub']));
$css .= 'nav .navSub a{background-color:' . $colors['normal'] . '}'; $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']) . '}'; $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 // Pied de page
$colors = helper::colorVariants($this->getData(['theme', 'footer', 'backgroundColor'])); $colors = helper::colorVariants($this->getData(['theme', 'footer', 'backgroundColor']));
if($this->getData(['theme', 'footer', 'margin'])) { if($this->getData(['theme', 'footer', 'margin'])) {
@ -2519,6 +2524,7 @@ class core extends common {
$css .= '#cookieConsentConfirm{ background-color: '. $colors['normal'].' ; color: '. $colors['text'] .'; }'; $css .= '#cookieConsentConfirm{ background-color: '. $colors['normal'].' ; color: '. $colors['text'] .'; }';
// Enregistre la personnalisation // Enregistre la personnalisation
$this->setData([ 'theme', 'update', false]);
file_put_contents(self::DATA_DIR.'theme.css', $css); file_put_contents(self::DATA_DIR.'theme.css', $css);
// Effacer le cache pour tenir compte de la couleur de fond TinyMCE // Effacer le cache pour tenir compte de la couleur de fond TinyMCE
header("Expires: Tue, 01 Jan 2000 00:00:00 GMT"); 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(['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 // Mise à jour
$this->setData(['core', 'dataVersion', 4401]); $this->setData(['core', 'dataVersion', 4401]);
} }

View File

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

View File

@ -363,7 +363,9 @@ class init extends common {
'burgerContent' => 'title', 'burgerContent' => 'title',
'width' => 'container', 'width' => 'container',
'burgerFontSize' => '1.5em', 'burgerFontSize' => '1.5em',
'burgerTextColor' => '#DDD' 'burgerTextColor' => '#DDD',
'minWidthTab' => '100px',
'minWidthParentOrAll' => false
], ],
'site' => [ 'site' => [
'backgroundColor' => 'rgba(255, 255, 255, 1)', 'backgroundColor' => 'rgba(255, 255, 255, 1)',
@ -393,7 +395,8 @@ class init extends common {
'button' => [ 'button' => [
'backgroundColor' => 'rgba(32, 59, 82, 1)' 'backgroundColor' => 'rgba(32, 59, 82, 1)'
], ],
'version' => 0 'version' => 0,
'update' => false
], ],
'admin' => [ 'admin' => [
'backgroundColor' => 'rgba(255, 255, 255, 1)', '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'][35] = 'Character case';
$text['core_theme_view']['menu'][36] = 'Automatic background color'; $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'][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'][0] = 'Back';
$text['core_theme_view']['site'][1] = 'Help'; $text['core_theme_view']['site'][1] = 'Help';
$text['core_theme_view']['site'][2] = 'Save'; $text['core_theme_view']['site'][2] = 'Save';
@ -515,8 +516,8 @@ $typeAddFont = [
//'link' => 'Fichier externe avec link', //'link' => 'Fichier externe avec link',
//'import' => 'Fichier externe avec import' //'import' => 'Fichier externe avec import'
]; ];
$minWidthParent = [ $minWidthTab = [
'none' => 'free', 'auto' => 'free',
'50px' => '50px', '50px' => '50px',
'100px' => '100px', '100px' => '100px',
'120px' => '120px', '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'][35] = 'Casse';
$text['core_theme_view']['menu'][36] = 'Couleur de fond automatique'; $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'][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'][0] = 'Retour';
$text['core_theme_view']['site'][1] = 'Aide'; $text['core_theme_view']['site'][1] = 'Aide';
$text['core_theme_view']['site'][2] = 'Enregistrer'; $text['core_theme_view']['site'][2] = 'Enregistrer';
@ -514,8 +515,8 @@ $typeAddFont = [
//'link' => 'Fichier externe avec link', //'link' => 'Fichier externe avec link',
//'import' => 'Fichier externe avec import' //'import' => 'Fichier externe avec import'
]; ];
$minWidthParent = [ $minWidthTab = [
'none' => 'libre', 'auto' => 'libre',
'50px' => '50px', '50px' => '50px',
'100px' => '100px', '100px' => '100px',
'120px' => '120px', '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'); include('./core/module/theme/lang/'. $this->getData(['config', 'i18n', 'langAdmin']) . '/lex_theme.php');
// Soumission du formulaire // Soumission du formulaire
if($this->isPost()) { if($this->isPost()) {
$this->setData([ 'theme', 'update', true]);
$this->setData(['theme', 'body', [ $this->setData(['theme', 'body', [
'backgroundColor' => $this->getInput('themeBodyBackgroundColor'), 'backgroundColor' => $this->getInput('themeBodyBackgroundColor'),
'image' => $this->getInput('themeBodyImage'), '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'); include('./core/module/theme/lang/'. $this->getData(['config', 'i18n', 'langAdmin']) . '/lex_theme.php');
// Soumission du formulaire // Soumission du formulaire
if($this->isPost()) { if($this->isPost()) {
$this->setData([ 'theme', 'update', true]);
if ( $this->getInput('themeFooterCopyrightPosition') === 'hide' && if ( $this->getInput('themeFooterCopyrightPosition') === 'hide' &&
$this->getInput('themeFooterSocialsPosition') === 'hide' && $this->getInput('themeFooterSocialsPosition') === 'hide' &&
$this->getInput('themeFooterTextPosition') === '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'); include('./core/module/theme/lang/'. $this->getData(['config', 'i18n', 'langAdmin']) . '/lex_theme.php');
// Soumission du formulaire // Soumission du formulaire
if($this->isPost()) { if($this->isPost()) {
$this->setData([ 'theme', 'update', true]);
// Modification des URL des images dans la bannière perso // Modification des URL des images dans la bannière perso
$featureContent = $this->getInput('themeHeaderText', null); $featureContent = $this->getInput('themeHeaderText', null);
// $featureContent = str_replace(helper::baseUrl(false,false), './', $featureContent); // $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'); include('./core/module/theme/lang/'. $this->getData(['config', 'i18n', 'langAdmin']) . '/lex_theme.php');
// Soumission du formulaire // Soumission du formulaire
if($this->isPost()) { if($this->isPost()) {
$this->setData([ 'theme', 'update', true]);
$this->setData(['theme', 'menu', [ $this->setData(['theme', 'menu', [
'backgroundColor' => $this->getInput('themeMenuBackgroundColor'), 'backgroundColor' => $this->getInput('themeMenuBackgroundColor'),
'backgroundColorSub' => $this->getInput('themeMenuBackgroundColorSub'), 'backgroundColorSub' => $this->getInput('themeMenuBackgroundColorSub'),
@ -546,7 +550,8 @@ class theme extends common {
'burgerContent' => $this->getInput('themeMenuBurgerContent'), 'burgerContent' => $this->getInput('themeMenuBurgerContent'),
'burgerTextColor' => $this->getInput('themeMenuBurgerTextColor'), 'burgerTextColor' => $this->getInput('themeMenuBurgerTextColor'),
'burgerFontSize' => $this->getInput('themeMenuBurgerFontSize'), 'burgerFontSize' => $this->getInput('themeMenuBurgerFontSize'),
'minWidhtParent' => $this->getInput('themeMenuMinWidthParent') 'minWidthTab' => $this->getInput('themeMenuMinWidthTab'),
'minWidthParentOrAll' => $this->getInput('themeMenuMinWidthParentOrAll', helper::FILTER_BOOLEAN),
]]); ]]);
// Valeurs en sortie // Valeurs en sortie
@ -621,6 +626,7 @@ class theme extends common {
include('./core/module/theme/lang/'. $this->getData(['config', 'i18n', 'langAdmin']) . '/lex_theme.php'); include('./core/module/theme/lang/'. $this->getData(['config', 'i18n', 'langAdmin']) . '/lex_theme.php');
// Soumission du formulaire // Soumission du formulaire
if($this->isPost()) { if($this->isPost()) {
$this->setData([ 'theme', 'update', true]);
$this->setData(['theme', 'title', [ $this->setData(['theme', 'title', [
'font' => $this->getInput('themeTitleFont'), 'font' => $this->getInput('themeTitleFont'),
'textColor' => $this->getInput('themeTitleTextColor'), '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 // Aperçu pour la largeur minimale des onglets et la largeur du sous-menu
$("#themeMenuMinWidthParent").on("change", function() { $("#themeMenuMinWidthParentOrAll, #themeMenuMinWidthTab").on("change", function() {
if( $(window).width() > 768 ){ if( $(window).width() > 768 ){
$.each(parentPage, function(index, value) { if( $('#themeMenuMinWidthParentOrAll').prop('checked') === false){
$('.' + value).css('min-width', $("#themeMenuMinWidthParent").val()); $('a.A, a.B').css('min-width', 'auto');
$('.navSub .'+value).css('width', $('.'+value).css('width')); $.each(parentPage, function(index, value) {
$('.' + value).css('text-align', 'left'); $('.' + 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"); }).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) // 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() { $("#themeMenuLoginLink").on("change", function() {
if($(this).is(":checked")) { if($(this).is(":checked")) {

View File

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