menu avec min width pour tous ou parents
This commit is contained in:
parent
131cc5dc25
commit
11321d944b
|
@ -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");
|
||||
|
|
|
@ -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");
|
||||
|
|
|
@ -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]);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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)',
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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'),
|
||||
|
|
|
@ -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")) {
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue