ZwiiCMS/core/module/theme/view/menu/menu.js.php

171 lines
5.3 KiB
PHP
Raw Normal View History

2018-04-02 08:29:19 +02:00
/**
* This file is part of Zwii.
*
* For full copyright and license information, please see the LICENSE
* file that was distributed with this source code.
*
* @author Rémi Jean <remi.jean@outlook.com>
* @copyright Copyright (C) 2008-2018, Rémi Jean
* @license GNU General Public License, version 3
* @link http://zwiicms.fr/
2018-04-02 08:29:19 +02:00
*/
$(document).ready(function(){
// Menu fixe à afficher
if($("#themeMenuPosition").val() === 'top') {
$("#themeMenuPositionFixed").slideDown();
}
else {
$("#themeMenuPositionFixed").slideUp(function() {
$("#themeMenuFixed").prop("checked", false).trigger("change");
});
}
// Option de menu à afficher
if($("#themeMenuPosition").val() === 'site-first' || $(this).val() === 'site-second') {
$("#themeMenuPositionOptions").slideDown();
}
else {
$("#themeMenuPositionOptions").slideUp(function() {
$("#themeMenuMargin").prop("checked", false).trigger("change");
});
}
});
2018-04-02 08:29:19 +02:00
/**
* Aperçu en direct
*/
$("input, select").on("change", function() {
// Import des polices de caractères
var menuFont = $("#themeMenuFont").val();
var css = "@import url('https://fonts.googleapis.com/css?family=" + menuFont + "');";
2018-04-02 08:29:19 +02:00
var colors = core.colorVariants($("#themeMenuBackgroundColor").val());
// Couleurs du menu
css += "nav,nav a{background-color:" + colors.normal + "}";
2018-04-02 08:29:19 +02:00
css += "nav a,#toggle span,nav a:hover{color:" + $("#themeMenuTextColor").val() + "}";
css += "nav a:hover{background-color:" + colors.darken + "}";
if ($("#themeMenuActiveColorAuto").is(':checked')) {
css += "nav a:hover{background-color:" + colors.veryDarken + ";color:" + $('#themeMenuActiveTextColor').val() + ";}";
} else {
css += "nav a:hover{background-color:" + $("#themeMenuActiveColor").val() + ";color:" + $('#themeMenuActiveTextColor').val() + ";}";
}
2018-04-02 08:29:19 +02:00
// Taille, hauteur, épaisseur et capitalisation de caractères du menu
css += "#toggle span,#menu a{padding:" + $("#themeMenuHeight").val() + ";font-family:'" + menuFont.replace(/\+/g, " ") + "',sans-serif;font-weight:" + $("#themeMenuFontWeight").val() + ";font-size:" + $("#themeMenuFontSize").val() + ";text-transform:" + $("#themeMenuTextTransform").val() + "}";
2018-04-02 08:29:19 +02:00
// Alignement du menu
2020-11-01 08:51:23 +01:00
css += "#menu{text-align:" + $("#themeMenuTextAlign").val() + "}";
2018-04-02 08:29:19 +02:00
// Marge
if($("#themeMenuMargin").is(":checked")) {
if(
<?php echo json_encode($this->getData(['theme', 'menu', 'position']) === 'site-first'); ?>
|| <?php echo json_encode($this->getData(['theme', 'menu', 'position']) === 'site-second'); ?>
2018-04-02 08:29:19 +02:00
) {
css += 'nav{padding: 10px 10px 0 10px}';
2018-04-02 08:29:19 +02:00
}
else {
css += 'nav{padding:0 10px;}';
2018-04-02 08:29:19 +02:00
}
}
else {
css += 'nav{margin:0;}';
2018-04-02 08:29:19 +02:00
}
if(
<?php echo json_encode($this->getData(['theme', 'menu', 'position']) === 'top'); ?>
) {
css += 'nav{padding:0 10px;}';
}
2018-04-02 08:29:19 +02:00
// Ajout du css au DOM
$("#themePreview").remove();
$("<style>")
.attr("type", "text/css")
.attr("id", "themePreview")
.text(css)
.appendTo("head");
2019-01-22 13:46:35 +01:00
2018-04-02 08:29:19 +02:00
// Position du menu
switch($("#themeMenuPosition").val()) {
case 'hide':
$("nav").hide();
break;
case 'site-first':
$("nav").show().prependTo("#site");
break;
case 'site-second':
if(<?php echo json_encode($this->getData(['theme', 'header', 'position']) === 'site'); ?>) {
$("nav").show().insertAfter("header");
}
else {
$("nav").show().prependTo("#site");
}
break;
case 'body-first':
$("nav").show().insertAfter("#bar");
$("#menu").removeClass('container-large');
$("nav").removeAttr('id');
$("#menu").addClass('container');
break;
2018-04-02 08:29:19 +02:00
case 'body-second':
if(<?php echo json_encode($this->getData(['theme', 'header', 'position']) === 'body'); ?>) {
$("nav").show().insertAfter("header");
}
else {
$("nav").show().insertAfter("#bar");
}
$("nav").removeAttr('id');
2018-04-02 08:29:19 +02:00
break;
2019-01-22 13:46:35 +01:00
case 'top':
$("nav").show().insertAfter("#bar");
$("#menu").removeClass('container');
$("#menu").addClass('container-large');
$("nav").attr('id','#navfixedconnected');
break;
case 'site':
$("nav").show().prependTo("#site");
break;
2018-04-02 08:29:19 +02:00
}
});
//
2018-04-02 08:29:19 +02:00
// 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")) {
$("#menuLoginLink").removeClass('displayNone');
}
else {
$("#menuLoginLink").addClass('displayNone');
}
}).trigger("change");
2018-04-02 08:29:19 +02:00
// Affiche / Cache les options de la position
$("#themeMenuPosition").on("change", function() {
if($(this).val() === 'site-first' || $(this).val() === 'site-second') {
$("#themeMenuPositionOptions").slideDown();
2018-04-02 08:29:19 +02:00
}
else {
$("#themeMenuPositionOptions").slideUp(function() {
$("#themeMenuMargin").prop("checked", false).trigger("change");
});
}
}).trigger("change");
// Affiche / Cache les options du menu fixe
$("#themeMenuPosition").on("change", function() {
if($(this).val() === 'top') {
$("#themeMenuPositionFixed").slideDown();
}
else {
$("#themeMenuPositionFixed").slideUp(function() {
$("#themeMenuFixed").prop("checked", false).trigger("change");
});
}
}).trigger("change");
// Affiche la sélection de couleur auto
$("#themeMenuActiveColorAuto").on("change", function() {
if ($(this).is(':checked') ) {
$("#themeMenuActiveColorWrapper").slideUp();
} else {
$("#themeMenuActiveColorWrapper").slideDown();
}
}).trigger("change");