193 lines
7.3 KiB
JavaScript
193 lines
7.3 KiB
JavaScript
/**
|
|
* 2007-2019 PrestaShop and Contributors
|
|
*
|
|
* NOTICE OF LICENSE
|
|
*
|
|
* This source file is subject to the Open Software License (OSL 3.0)
|
|
* that is bundled with this package in the file LICENSE.txt.
|
|
* It is also available through the world-wide-web at this URL:
|
|
* https://opensource.org/licenses/OSL-3.0
|
|
* If you did not receive a copy of the license and are unable to
|
|
* obtain it through the world-wide-web, please send an email
|
|
* to license@prestashop.com so we can send you a copy immediately.
|
|
*
|
|
* DISCLAIMER
|
|
*
|
|
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
|
|
* versions in the future. If you wish to customize PrestaShop for your
|
|
* needs please refer to https://www.prestashop.com for more information.
|
|
*
|
|
* @author PrestaShop SA <contact@prestashop.com>
|
|
* @copyright 2007-2019 PrestaShop SA and Contributors
|
|
* @license https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
|
|
* International Registered Trademark & Property of PrestaShop SA
|
|
*/
|
|
const $ = window.$;
|
|
|
|
export default class NavBar {
|
|
constructor() {
|
|
$(() => {
|
|
$(".nav-bar").find(".link-levelone").hover(function() {
|
|
$(this).addClass("-hover");
|
|
}, function() {
|
|
$(this).removeClass("-hover");
|
|
});
|
|
|
|
$('.nav-bar li.link-levelone.has_submenu > a').on('click', function(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
let $submenu = $(this).parent();
|
|
$('.nav-bar li.link-levelone.has_submenu a > i.material-icons.sub-tabs-arrow')
|
|
.text('keyboard_arrow_down');
|
|
let onlyClose = $(e.currentTarget).parent().hasClass('ul-open');
|
|
|
|
if ($('body').is('.page-sidebar-closed:not(.mobile)')) {
|
|
$('.nav-bar li.link-levelone.has_submenu.ul-open').removeClass('ul-open open -hover');
|
|
$('.nav-bar li.link-levelone.has_submenu.ul-open ul.submenu').removeAttr('style');
|
|
} else {
|
|
$('.nav-bar li.link-levelone.has_submenu.ul-open ul.submenu').slideUp({
|
|
complete: function() {
|
|
$(this).parent().removeClass('ul-open open');
|
|
$(this).removeAttr('style');
|
|
}
|
|
});
|
|
}
|
|
|
|
if (onlyClose) {
|
|
return;
|
|
}
|
|
$submenu.addClass('ul-open');
|
|
|
|
if ($('body').is('.page-sidebar-closed:not(.mobile)')) {
|
|
$submenu.addClass('-hover');
|
|
$submenu.find('ul.submenu').removeAttr('style');
|
|
} else {
|
|
$submenu.find('ul.submenu').slideDown({
|
|
complete: function() {
|
|
$submenu.addClass('open');
|
|
$(this).removeAttr('style');
|
|
}
|
|
});
|
|
}
|
|
$submenu.find('i.material-icons.sub-tabs-arrow').text('keyboard_arrow_up');
|
|
});
|
|
|
|
$('.nav-bar').on('click', '.menu-collapse', function() {
|
|
$('body').toggleClass('page-sidebar-closed');
|
|
|
|
$('.popover.show').remove();
|
|
$('.help-box[aria-describedby]').removeAttr('aria-describedby');
|
|
|
|
if ($('body').hasClass('page-sidebar-closed')) {
|
|
$('nav.nav-bar ul.main-menu > li')
|
|
.removeClass('ul-open open')
|
|
.find('a > i.material-icons.sub-tabs-arrow').text('keyboard_arrow_down');
|
|
addMobileBodyClickListener();
|
|
} else {
|
|
$('nav.nav-bar ul.main-menu > li.-active')
|
|
.addClass('ul-open open')
|
|
.find('a > i.material-icons.sub-tabs-arrow').text('keyboard_arrow_up');
|
|
$('body').off('click.mobile');
|
|
}
|
|
|
|
$.post({
|
|
url: $(this).data('toggle-url'),
|
|
cache: false,
|
|
data: {
|
|
shouldCollapse: Number($('body').hasClass('page-sidebar-closed'))
|
|
},
|
|
});
|
|
});
|
|
addMobileBodyClickListener();
|
|
const MAX_MOBILE_WIDTH = 1023;
|
|
|
|
if ($(window).width() <= MAX_MOBILE_WIDTH) {
|
|
this.mobileNav(MAX_MOBILE_WIDTH);
|
|
}
|
|
|
|
$(window).on('resize', () => {
|
|
if ($('body').hasClass('mobile') && $(window).width() > MAX_MOBILE_WIDTH) {
|
|
this.unbuildMobileMenu();
|
|
} else if (!$('body').hasClass('mobile') && $(window).width() <= MAX_MOBILE_WIDTH) {
|
|
this.mobileNav(MAX_MOBILE_WIDTH);
|
|
}
|
|
});
|
|
|
|
function addMobileBodyClickListener() {
|
|
if (!$('body').is('.page-sidebar-closed:not(.mobile)')) {
|
|
return;
|
|
}
|
|
// To close submenu on mobile devices
|
|
$('body').on('click.mobile', function() {
|
|
if ($('ul.main-menu li.ul-open').length > 0) {
|
|
$('.nav-bar li.link-levelone.has_submenu.ul-open').removeClass('ul-open open -hover');
|
|
$('.nav-bar li.link-levelone.has_submenu.ul-open ul.submenu').removeAttr('style');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
mobileNav() {
|
|
let $logout = $('#header_logout').addClass('link').removeClass('m-t-1').prop('outerHTML');
|
|
let $employee = $('.employee_avatar').prop('outerHTML');
|
|
let profileLink = $('.profile-link').attr('href');
|
|
const $mainMenu = $('.main-menu');
|
|
|
|
$('.nav-bar li.link-levelone.has_submenu:not(.open) a > i.material-icons.sub-tabs-arrow').text('keyboard_arrow_down');
|
|
$('body').addClass('mobile');
|
|
$('.nav-bar').addClass('mobile-nav').attr('style', 'margin-left: -100%;');
|
|
$('.panel-collapse').addClass('collapse');
|
|
$('.link-levelone a').each((index, el) => {
|
|
let id = $(el).parent().find('.collapse').attr('id');
|
|
if (id) {
|
|
$(el).attr('href', `#${id}`).attr('data-toggle', 'collapse');
|
|
}
|
|
});
|
|
$mainMenu.append(`<li class="link-levelone" data-submenu="">${$logout}</li>`);
|
|
$mainMenu.prepend(`<li class="link-levelone">${$employee}</li>`);
|
|
$('.collapse').collapse({
|
|
toggle: false
|
|
});
|
|
$mainMenu.find('.employee_avatar .material-icons, .employee_avatar span').wrap(`<a href="${profileLink}"></a>`);
|
|
$('.js-mobile-menu').on('click', expand);
|
|
$('.js-notifs_dropdown').css({
|
|
'height': window.innerHeight
|
|
});
|
|
|
|
function expand(e) {
|
|
if ($('div.notification-center.dropdown').hasClass('open')) {
|
|
return;
|
|
}
|
|
|
|
if ($('.mobile-nav').hasClass('expanded')) {
|
|
$('.mobile-nav').animate({'margin-left': '-100%'}, {
|
|
complete: function() {
|
|
$('.nav-bar, .mobile-layer').removeClass('expanded');
|
|
$('.nav-bar, .mobile-layer').addClass('d-none');
|
|
}
|
|
});
|
|
$('.mobile-layer').off();
|
|
} else {
|
|
$('.nav-bar, .mobile-layer').addClass('expanded');
|
|
$('.nav-bar, .mobile-layer').removeClass('d-none');
|
|
$('.mobile-layer').on('click', expand);
|
|
$('.mobile-nav').animate({'margin-left': 0});
|
|
}
|
|
}
|
|
}
|
|
|
|
unbuildMobileMenu() {
|
|
$('body').removeClass('mobile');
|
|
$('body.page-sidebar-closed .nav-bar .link-levelone.open').removeClass('ul-open open');
|
|
$('.main-menu li:first, .main-menu li:last').remove();
|
|
$('.js-notifs_dropdown').removeAttr('style');
|
|
$('.nav-bar').removeClass('mobile-nav expanded').addClass('d-none').css('margin-left', 0);
|
|
$('.js-mobile-menu').off();
|
|
$('.panel-collapse').removeClass('collapse').addClass('submenu');
|
|
$('.shop-list-title').remove();
|
|
$('.js-non-responsive').hide();
|
|
$('.mobile-layer').addClass('d-none').removeClass('expanded');
|
|
}
|
|
}
|