mise au point menu animation jquery

This commit is contained in:
Deltacms 2023-02-18 18:23:43 +01:00
parent f367b75010
commit e247c30ed0
5 changed files with 77 additions and 42 deletions

View File

@ -80,32 +80,37 @@ else { echo '<html lang="'.$lang.'">'; }
<div id="main_screenshot"> <div id="main_screenshot">
<?php }} ?> <?php }} ?>
<!-- Menu dans le fond du site avant la bannière --> <!-- Menu dans en dehors du site ou avant la bannière, au dessus du site -->
<?php if($this->getData(['theme', 'menu', 'position']) === 'body-first' || $this->getData(['theme', 'menu', 'position']) === 'top' ): ?> <?php if($this->getData(['theme', 'menu', 'position']) === 'body-first' || $this->getData(['theme', 'menu', 'position']) === 'top' ):
<!-- Détermine si le menu est fixe en haut de page lorsque l'utilisateur n'est pas connecté --> // Menu dans le fond du site avant la bannière et bannière limitée au site
<?php $navStyle = '';
if ( $this->getData(['theme', 'menu', 'position']) === 'top' if( $this->getData(['theme', 'header', 'position'])==='body' && $this->getData(['theme', 'header', 'wide'])==='container'
AND $this->getData(['theme', 'menu', 'fixed']) === true && $this->getData(['theme', 'menu', 'position']) === 'body-first'){
AND $this->getUser('password') === $this->getInput('DELTA_USER_PASSWORD') $navStyle = 'style="max-width:'. $this->getData(['theme', 'site', 'width']) . '; display: block; margin: auto;"';
AND $this->getUser('group') > self::GROUP_MEMBER) { }
echo '<nav id="navfixedconnected" >'; ?> <!-- Détermine si le menu est fixe en haut de page lorsque l'utilisateur n'est pas connecté --> <?php
} else { if ( $this->getData(['theme', 'menu', 'position']) === 'top'
echo '<nav id="navfixedlogout" >'; AND $this->getData(['theme', 'menu', 'fixed']) === true
} AND $this->getUser('password') === $this->getInput('DELTA_USER_PASSWORD')
?> AND $this->getUser('group') > self::GROUP_MEMBER) {
<!-- Menu Burger --> echo '<nav '.$navStyle.' id="navfixedconnected" >';
<div id="toggle"> } else {
<?php echo $this->getData(['theme','menu','burgerContent']) === 'title' ? '<div class="notranslate" id="burgerText">' . $this->getData(['locale', 'title']) . '</div>' : '' ;?> echo '<nav '.$navStyle.' id="navfixedlogout" >';
<?php echo $this->getData(['theme','menu','burgerContent']) === 'logo' ? '<div class="notranslate" id="burgerLogo"><img src="'. $fileLogo .'" width="'. $widthLogo.'" height="'. $heightLogo .'"></div>' : '' ;?> }
<?php echo template::ico('menu',null,null,'2em'); ?></div> ?>
<!-- fin du menu burger --> <!-- Menu Burger -->
<?php <div id="toggle">
$menuClass = $this->getData(['theme', 'menu', 'position']) === 'top' ? 'class="container-large"' : 'class="container"'; <?php echo $this->getData(['theme','menu','burgerContent']) === 'title' ? '<div class="notranslate" id="burgerText">' . $this->getData(['locale', 'title']) . '</div>' : '' ;?>
$menuClass = $this->getData(['theme', 'menu', 'wide']) === 'none' ? 'class="container-large"' : 'class="container"'; <?php echo $this->getData(['theme','menu','burgerContent']) === 'logo' ? '<div class="notranslate" id="burgerLogo"><img src="'. $fileLogo .'" width="'. $widthLogo.'" height="'. $heightLogo .'"></div>' : '' ;?>
?> <?php echo template::ico('menu',null,null,'2em'); ?></div>
<div id="menu" <?php echo $menuClass; ?> > <!-- fin du menu burger -->
<?php $this->showMenu(); ?> <?php
</div> <!--fin menu --> $menuClass = $this->getData(['theme', 'menu', 'position']) === 'top' ? 'class="container-large"' : 'class="container"';
$menuClass = $this->getData(['theme', 'menu', 'wide']) === 'none' ? 'class="container-large"' : 'class="container"';
?>
<div id="menu" <?php echo $menuClass; ?> >
<?php $this->showMenu(); ?>
</div> <!--fin menu -->
</nav> </nav>
<?php endif; ?> <?php endif; ?>

View File

@ -470,6 +470,11 @@ $menuPositionsBody = [
'site' => 'In the site', 'site' => 'In the site',
'hide' => 'Hidden' 'hide' => 'Hidden'
]; ];
$menuPositionsHide = [
'top' => 'Outside the site',
'site' => 'In the site',
'hide' => 'Hidden'
];
$menuRadius = [ $menuRadius = [
'0px' => 'None', '0px' => 'None',
'3px 3px 0px 0px' => 'Very light', '3px 3px 0px 0px' => 'Very light',

View File

@ -240,7 +240,7 @@ $text['core_theme_view']['menu'][36] = 'Couleur de fond automatique';
$text['core_theme_view']['menu'][37] = 'Largeur minimale d\'un onglet'; $text['core_theme_view']['menu'][37] = 'Largeur minimale d\'un onglet';
$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'][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']['menu'][39] = 'On : tous / Off : avec sous-menu uniquement';
$text['core_theme_view']['menu'][40] = 'Disposition des élèemnts de menu. La largeur du bandeau du menu, elle, s\'adapte automatiquement.'; $text['core_theme_view']['menu'][40] = 'Disposition des items du menu. La largeur du bandeau du menu, elle, s\'adapte automatiquement.';
$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';
@ -469,6 +469,11 @@ $menuPositionsBody = [
'site' => 'Dans le site', 'site' => 'Dans le site',
'hide' => 'Caché' 'hide' => 'Caché'
]; ];
$menuPositionsHide = [
'top' => 'En-dehors du site',
'site' => 'Dans le site',
'hide' => 'Caché'
];
$menuRadius = [ $menuRadius = [
'0px' => 'Aucun', '0px' => 'Aucun',
'3px 3px 0px 0px' => 'Très léger', '3px 3px 0px 0px' => 'Très léger',

View File

@ -122,12 +122,34 @@ $("input, select").on("change", function() {
break; break;
} }
// Largeur étendue // Disposition des items du menu
if ($("#themeMenuWide").val() === 'none') { if ($("#themeMenuWide").val() === 'none') {
$("#menu").removeClass(); $("#menu").removeClass();
} else { } else {
$("#menu").addClass("container"); $("#menu").addClass("container");
} }
// Largeur du menu étendue à la page pour top sinon limitée au site
if ($("#themeMenuPosition").val() === 'top') {
$("nav").removeAttr('style');
} else {
var menuWidth = document.body.clientWidth + 20;
if( <?php echo json_encode($this->getData(['theme', 'header', 'position']) === 'body'); ?> && <?php echo json_encode($this->getData(['theme', 'header', 'wide']) === 'container'); ?>){
menuWidth = "<?php echo $this->getData(['theme', 'site', 'width']); ?>";
$("nav").css("width", menuWidth);
$("nav").css("display", "block");
$("nav").css("margin", "auto");
} else {
$("nav").css("width", menuWidth);
}
}
// Visibilité du select 'disposition' si le menu est en dehors du site
if( $("#themeMenuPosition").val() === 'top' ) {
$(".themeMenuWideWrapper").show();
} else {
$(".themeMenuWideWrapper").hide();
}
// Ajout du css au DOM // Ajout du css au DOM
$("#themePreview").remove(); $("#themePreview").remove();
@ -136,13 +158,6 @@ $("input, select").on("change", function() {
.attr("id", "themePreview") .attr("id", "themePreview")
.text(css) .text(css)
.appendTo("head"); .appendTo("head");
if($("#themeMenuPosition").val() === 'site' || $("#themeMenuPosition").val() === 'hide' ) {
$(".themeMenuWideWrapper").hide();
} else {
$(".themeMenuWideWrapper").show();
}
}); });
// Aperçu pour la largeur minimale des onglets et la largeur du sous-menu // Aperçu pour la largeur minimale des onglets et la largeur du sous-menu

View File

@ -34,17 +34,22 @@ echo template::formOpen('themeMenuForm'); ?>
<div class="row"> <div class="row">
<div class="col6"> <div class="col6">
<?php <?php
if ( $this->getData(['theme', 'header', 'position']) == "site") if( $this->getData(['theme', 'header', 'position']) == "site"){
{ echo template::select('themeMenuPosition', $menuPositionsSite, [ echo template::select('themeMenuPosition', $menuPositionsSite, [
'label' => $text['core_theme_view']['menu'][4], 'label' => $text['core_theme_view']['menu'][4],
'selected' => $this->getData(['theme', 'menu', 'position']) 'selected' => $this->getData(['theme', 'menu', 'position'])
]); ]);
} elseif( $this->getData(['theme', 'header', 'position']) == "body"){
echo template::select('themeMenuPosition', $menuPositionsBody, [
'label' => $text['core_theme_view']['menu'][4],
'selected' => $this->getData(['theme', 'menu', 'position'])
]);
}else{ }else{
echo template::select('themeMenuPosition', $menuPositionsBody, [ echo template::select('themeMenuPosition', $menuPositionsHide, [
'label' => $text['core_theme_view']['menu'][4], 'label' => $text['core_theme_view']['menu'][4],
'selected' => $this->getData(['theme', 'menu', 'position']) 'selected' => $this->getData(['theme', 'menu', 'position'])
]); } ]);
?> }?>
</div> </div>
<div class="col6 themeMenuWideWrapper"> <div class="col6 themeMenuWideWrapper">
<?php echo template::select('themeMenuWide', $containerWides, [ <?php echo template::select('themeMenuWide', $containerWides, [