|
5 | 5 |
|
6 | 6 | define('globalNavigation', [ |
7 | 7 | 'jquery', |
8 | | - 'jquery/ui', |
9 | | - 'jquery/hover-intent' |
| 8 | + 'jquery/ui' |
10 | 9 | ], function ($) { |
11 | 10 | 'use strict'; |
12 | 11 |
|
13 | 12 | $.widget('mage.globalNavigation', { |
14 | 13 | options: { |
15 | | - menuCategory: '.level-0', |
16 | | - menuLinks: 'a', |
17 | | - itemsConfig: null, |
18 | | - hoverIntentConfig: { |
19 | | - interval: 100, |
20 | | - timeout: 500 // number = milliseconds delay before onMouseOut |
| 14 | + selectors: { |
| 15 | + topLevelItem: '.level-0', |
| 16 | + topLevelHref: '> a', |
| 17 | + subMenu: '> .submenu', |
| 18 | + closeSubmenuBtn: '[data-role="close-submenu"]' |
21 | 19 | }, |
22 | | - categoriesConfig: { |
23 | | - '[data-ui-id="menu-mage-adminhtml-system"]': { |
24 | | - open: 'click' |
25 | | - }, |
26 | | - '[data-ui-id="menu-mage-adminhtml-stores"]': { |
27 | | - open: 'click' |
28 | | - } |
29 | | - } |
| 20 | + overlayTmpl: '<div class="admin__menu-overlay"></div>' |
30 | 21 | }, |
31 | 22 |
|
32 | 23 | _create: function () { |
33 | | - this.menu = this.element; |
34 | | - this.menuCategory = $(this.options.menuCategory, this.menu); |
35 | | - this.menuLinks = $(this.options.menuLinks, this.menuCategory); |
36 | | - this._bind(); |
37 | | - }, |
| 24 | + var selectors = this.options.selectors; |
38 | 25 |
|
39 | | - _menuCategoryBind: function (category, config) { |
40 | | - category |
41 | | - .hoverIntent($.extend({}, this.options.hoverIntentConfig, { |
42 | | - over: !config.open ? this._hoverEffects : $.noop, |
43 | | - out: !config.close ? this._leaveEffects : $.noop |
44 | | - })); |
45 | | - |
46 | | - if (config.open) { |
47 | | - category.on(config.open, this._hoverEffects); |
48 | | - } |
| 26 | + this.menu = this.element; |
| 27 | + this.menuLinks = $(selectors.topLevelHref, selectors.topLevelItem); |
49 | 28 |
|
50 | | - if (config.close) { |
51 | | - category.on(config.close, this._leaveEffects); |
52 | | - } |
| 29 | + this._initOverlay() |
| 30 | + ._bind(); |
53 | 31 | }, |
54 | 32 |
|
55 | | - _menuCategoryEvents: function () { |
56 | | - this.menuCategory.each($.proxy(function (i, category) { |
57 | | - var itemConfig = {}; |
58 | | - if (this.options.categoriesConfig) { |
59 | | - $.each(this.options.categoriesConfig, $.proxy(function (selector, conf) { |
60 | | - if ($(category).is(selector)) { |
61 | | - itemConfig = conf; |
62 | | - } |
63 | | - }, this)); |
64 | | - } |
65 | | - this._menuCategoryBind($(category), itemConfig); |
66 | | - }, this)); |
| 33 | + _initOverlay: function () { |
| 34 | + var wrapper = $('<div />').addClass('admin__scope'); |
| 35 | + |
| 36 | + this.overlay = $(this.options.overlayTmpl).appendTo('body').hide(0); |
| 37 | + |
| 38 | + /** |
| 39 | + * @todo fix LESS and remove next line and wrapper definition |
| 40 | + */ |
| 41 | + this.overlay.wrap(wrapper); |
| 42 | + |
| 43 | + return this; |
67 | 44 | }, |
68 | 45 |
|
69 | 46 | _bind: function () { |
70 | | - this._menuCategoryEvents(); |
| 47 | + var lighten = this._lighten.bind(this), |
| 48 | + open = this._open.bind(this), |
| 49 | + darken = this._darken.bind(this); |
| 50 | + |
71 | 51 | this.menuLinks |
72 | | - .on('focus.tabFocus', function (e) { |
73 | | - $(e.target).trigger('mouseenter'); |
74 | | - }) |
75 | | - .on('blur.tabFocus', function (e) { |
76 | | - $(e.target).trigger('mouseleave'); |
77 | | - }); |
| 52 | + .on('focus', lighten) |
| 53 | + .on('click', open) |
| 54 | + .on('blur', darken); |
78 | 55 | }, |
79 | 56 |
|
80 | | - _hoverEffects: function (e) { |
| 57 | + _lighten: function (e) { |
| 58 | + var selectors = this.options.selectors, |
| 59 | + menuItem = $(e.target).closest(selectors.topLevelItem); |
81 | 60 |
|
82 | | - // Disable current active class while hover is on level 0 |
83 | | - $(this).siblings('._active').addClass('_current').removeClass('_active'); |
| 61 | + menuItem |
| 62 | + .addClass('_active') |
| 63 | + .siblings(selectors.topLevelItem) |
| 64 | + .removeClass('_active'); |
| 65 | + }, |
84 | 66 |
|
85 | | - $(this) |
86 | | - .addClass('_hover _recent') |
87 | | - .siblings('.level-0').each(function () { |
88 | | - clearTimeout($(this).prop('hoverIntent_t')); |
89 | | - $(this).prop('hoverIntent_s', 0); |
90 | | - $(this).removeClass('_recent _hover'); |
91 | | - }); |
| 67 | + _darken: function (e) { |
| 68 | + var selectors = this.options.selectors, |
| 69 | + menuItem = $(e.target).closest(selectors.topLevelItem); |
92 | 70 |
|
93 | | - var targetSubmenu = $(e.target).closest('.submenu'); |
94 | | - if (targetSubmenu.length && targetSubmenu.is(':visible')) { |
95 | | - return; |
96 | | - } |
97 | | - var availableWidth = parseInt($(this).parent().css('width')) - $(this).position().left, |
98 | | - submenu = $('> .submenu', this), |
99 | | - colsWidth = 0; |
| 71 | + menuItem.removeClass('_active'); |
| 72 | + }, |
100 | 73 |
|
101 | | - submenu.addClass('_show'); |
| 74 | + _closeSubmenu: function (e) { |
| 75 | + var selectors = this.options.selectors, |
| 76 | + menuItem = $(e.target).closest(selectors.topLevelItem); |
102 | 77 |
|
103 | | - $.each($('> .submenu > ul li.column', this), function () { |
104 | | - colsWidth = colsWidth + parseInt($(this).css('width')); |
105 | | - }); |
| 78 | + this._close(e); |
106 | 79 |
|
107 | | - var containerPaddings = parseInt(submenu.css('padding-left')) + parseInt(submenu.css('padding-right')); |
| 80 | + $(selectors.topLevelHref, menuItem).focus(); |
| 81 | + }, |
108 | 82 |
|
109 | | - $(this).toggleClass('reverse', (containerPaddings + colsWidth) > availableWidth); |
| 83 | + _open: function (e) { |
| 84 | + var selectors = this.options.selectors, |
| 85 | + menuItemSelector = selectors.topLevelItem, |
| 86 | + menuItem = $(e.target).closest(menuItemSelector), |
| 87 | + subMenu = $(selectors.subMenu, menuItem), |
| 88 | + close = this._closeSubmenu.bind(this), |
| 89 | + closeBtn = subMenu.find(selectors.closeSubmenuBtn); |
110 | 90 |
|
111 | | - submenu.removeClass('_show'); |
| 91 | + if (subMenu.length) { |
| 92 | + e.preventDefault(); |
| 93 | + } |
| 94 | + |
| 95 | + menuItem |
| 96 | + .addClass('_hover _recent') |
| 97 | + .siblings(menuItemSelector) |
| 98 | + .removeClass('_hover _recent'); |
| 99 | + |
| 100 | + subMenu.attr('aria-expanded', 'true'); |
| 101 | + |
| 102 | + closeBtn.on('click', close); |
| 103 | + |
| 104 | + this.overlay.show(0).on('click', close); |
112 | 105 | }, |
113 | 106 |
|
114 | | - _leaveEffects: function (e) { |
| 107 | + _close: function (e) { |
| 108 | + var selectors = this.options.selectors, |
| 109 | + menuItem = this.menu.find(selectors.topLevelItem + '._hover._recent'), |
| 110 | + subMenu = $(selectors.subMenu, menuItem), |
| 111 | + closeBtn = subMenu.find(selectors.closeSubmenuBtn); |
115 | 112 |
|
116 | | - // Disable current active class while hover is on level 0 |
117 | | - $(this).siblings('._current').addClass('_active').removeClass('_current'); |
| 113 | + e.preventDefault(); |
118 | 114 |
|
119 | | - var targetSubmenu = $(e.target).closest('.submenu'), |
120 | | - self = $(this), |
121 | | - submenu = $('> .submenu', this); |
| 115 | + this.overlay.hide(0).off('click'); |
122 | 116 |
|
123 | | - if (targetSubmenu.length && targetSubmenu.is(':hidden')) { |
124 | | - return; |
125 | | - } |
| 117 | + closeBtn.off('click'); |
126 | 118 |
|
127 | | - if (submenu.length) { |
128 | | - submenu.removeClass('_show', function () { |
129 | | - self.removeClass('_hover'); |
130 | | - }); |
131 | | - } else { |
132 | | - self.removeClass('_hover'); |
133 | | - } |
| 119 | + subMenu.attr('aria-expanded', 'false'); |
134 | 120 |
|
| 121 | + menuItem.removeClass('_hover _recent'); |
135 | 122 | } |
136 | 123 | }); |
137 | 124 |
|
|
0 commit comments