MDL-72530 navigation: Fix the auto collapse in the more menu

This commit is contained in:
Mihail Geshoski 2021-10-13 16:32:25 +08:00
parent f652127d28
commit 3910c41813
3 changed files with 6 additions and 9 deletions

View File

@ -1,2 +1,2 @@
define ("core/moremenu",["exports","jquery","core/menu_navigation"],function(a,b,c){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;b=d(b);c=d(c);function d(a){return a&&a.__esModule?a:{default:a}}var f={regions:{moredropdown:"[data-region=\"moredropdown\"]",morebutton:"[data-region=\"morebutton\"]"},classes:{dropdownitem:"dropdown-item",dropdownmoremenu:"dropdownmoremenu",hidden:"d-none",active:"active",nav:"nav",navlink:"nav-link",observed:"observed"},attributes:{menu:"[role=\"menu\"]",dropdowntoggle:"[data-toggle=\"dropdown\"]"}},g=function(a){var b=a.parentNode.offsetHeight+1,c=a.querySelector(f.regions.moredropdown),d=a.querySelector(f.regions.morebutton);if(a.offsetHeight>b){d.classList.remove(f.classes.hidden);var e=Array.from(a.children).reverse();e.forEach(function(c){if(!c.classList.contains(f.classes.dropdownmoremenu)){if(a.offsetHeight>b){var d=a.removeChild(c);h(a,d,!0)}}})}else{if("children"in c){var j=Array.from(c.children);j.forEach(function(d){if(a.offsetHeight<b&&"true"!==d.dataset.forceintomoremenu){var e=c.removeChild(d);i(a,e)}});if(0===j.length){d.classList.add(f.classes.hidden)}}if(a.offsetHeight>b){g(a)}}a.parentNode.classList.add(f.classes.observed)},h=function(a,b){var c=2<arguments.length&&arguments[2]!==void 0?arguments[2]:!1,d=a.querySelector(f.regions.moredropdown),e=a.querySelector(f.attributes.dropdowntoggle),g=b.querySelector("."+f.classes.navlink);if(g.classList.contains(f.classes.active)){e.classList.add(f.classes.active)}g.classList.remove(f.classes.navlink);g.classList.add(f.classes.dropdownitem);if(c){d.prepend(b)}else{d.append(b)}},i=function(a,b){var c=a.querySelector(f.regions.morebutton),d=a.querySelector(f.attributes.dropdowntoggle),e=b.querySelector("."+f.classes.dropdownitem);if(e.classList.contains(f.classes.active)){d.classList.remove(f.classes.active)}e.classList.remove(f.classes.dropdownitem);e.classList.add(f.classes.navlink);a.insertBefore(b,c)},j=function(a){a.firstElementChild.querySelector("[role=\"menuitem\"]").setAttribute("tabindex","0");if("children"in a){var d=a.querySelector(f.regions.morebutton),e=Array.from(a.children);e.forEach(function(b){if(!b.classList.contains(f.classes.dropdownmoremenu)&&"true"===b.dataset.forceintomoremenu){h(a,b,!1);if(d.classList.contains(f.classes.hidden)){d.classList.remove(f.classes.hidden)}}})}g(a);(0,c.default)(a);window.addEventListener("resize",function(){g(a);(0,c.default)(a)});var i=function(a){var b=a.target.parentNode.querySelector(f.attributes.menu);if(b){b.classList.toggle("show")}a.stopPropagation()};(0,b.default)("."+f.classes.dropdownmoremenu).on("show.bs.dropdown",function(){var b=a.querySelector(f.regions.moredropdown);b.querySelectorAll(".dropdown").forEach(function(a){a.removeEventListener("click",i,!0);a.addEventListener("click",i,!0)})})};a.default=j;return a.default});
define ("core/moremenu",["exports","jquery","core/menu_navigation"],function(a,b,c){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;b=d(b);c=d(c);function d(a){return a&&a.__esModule?a:{default:a}}var f={regions:{moredropdown:"[data-region=\"moredropdown\"]",morebutton:"[data-region=\"morebutton\"]"},classes:{dropdownitem:"dropdown-item",dropdownmoremenu:"dropdownmoremenu",hidden:"d-none",active:"active",nav:"nav",navlink:"nav-link",observed:"observed"},attributes:{menu:"[role=\"menu\"]",dropdowntoggle:"[data-toggle=\"dropdown\"]"}},g=function(a){var b=a.parentNode.offsetHeight+1,c=a.querySelector(f.regions.moredropdown),d=a.querySelector(f.regions.morebutton);if(a.offsetHeight>b){d.classList.remove(f.classes.hidden);var e=Array.from(a.children).reverse();e.forEach(function(c){if(!c.classList.contains(f.classes.dropdownmoremenu)){if(a.offsetHeight>b){var d=a.removeChild(c);h(a,d,!0)}}})}else{if("children"in c){Array.from(c.children).forEach(function(d){if(a.offsetHeight<b&&"true"!==d.dataset.forceintomoremenu){var e=c.removeChild(d);i(a,e)}});if(0===Array.from(c.children).length){d.classList.add(f.classes.hidden)}}if(a.offsetHeight>b){g(a)}}a.parentNode.classList.add(f.classes.observed)},h=function(a,b){var c=2<arguments.length&&arguments[2]!==void 0?arguments[2]:!1,d=a.querySelector(f.regions.moredropdown),e=a.querySelector(f.attributes.dropdowntoggle),g=b.querySelector("."+f.classes.navlink);if(g.classList.contains(f.classes.active)){e.classList.add(f.classes.active)}g.classList.remove(f.classes.navlink);g.classList.add(f.classes.dropdownitem);if(c){d.prepend(b)}else{d.append(b)}},i=function(a,b){var c=a.querySelector(f.regions.morebutton),d=a.querySelector(f.attributes.dropdowntoggle),e=b.querySelector("."+f.classes.dropdownitem);if(e.classList.contains(f.classes.active)){d.classList.remove(f.classes.active)}e.classList.remove(f.classes.dropdownitem);e.classList.add(f.classes.navlink);a.insertBefore(b,c)},j=function(a){a.firstElementChild.querySelector("[role=\"menuitem\"]").setAttribute("tabindex","0");if("children"in a){var d=a.querySelector(f.regions.morebutton),e=Array.from(a.children);e.forEach(function(b){if(!b.classList.contains(f.classes.dropdownmoremenu)&&"true"===b.dataset.forceintomoremenu){h(a,b,!1);if(d.classList.contains(f.classes.hidden)){d.classList.remove(f.classes.hidden)}}})}g(a);(0,c.default)(a);window.addEventListener("resize",function(){g(a);(0,c.default)(a)});var i=function(a){var b=a.target.parentNode.querySelector(f.attributes.menu);if(b){b.classList.toggle("show")}a.stopPropagation()};(0,b.default)("."+f.classes.dropdownmoremenu).on("show.bs.dropdown",function(){var b=a.querySelector(f.regions.moredropdown);b.querySelectorAll(".dropdown").forEach(function(a){a.removeEventListener("click",i,!0);a.addEventListener("click",i,!0)})})};a.default=j;return a.default});
//# sourceMappingURL=moremenu.min.js.map

File diff suppressed because one or more lines are too long

View File

@ -62,7 +62,6 @@ const autoCollapse = menu => {
// If the menu items wrap and the menu height is larger than the height of the
// parent then start pushing navlinks into the moreDropdown.
if (menu.offsetHeight > maxHeight) {
moreButton.classList.remove(Selectors.classes.hidden);
const menuNodes = Array.from(menu.children).reverse();
@ -79,10 +78,9 @@ const autoCollapse = menu => {
});
} else {
// If the menu height is smaller than the height of the parent, then try returning navlinks to the menu.
if ('children' in moreDropdown) {
const menuNodes = Array.from(moreDropdown.children);
menuNodes.forEach(item => {
// Iterate through the nodes within the more dropdown menu.
Array.from(moreDropdown.children).forEach(item => {
// Don't move the node to the more menu if it is explicitly defined that
// this node should be displayed in the more dropdown menu at all times.
if (menu.offsetHeight < maxHeight && item.dataset.forceintomoremenu !== 'true') {
@ -91,9 +89,8 @@ const autoCollapse = menu => {
moveOutOfMoreDropdown(menu, lastNode);
}
});
// If there are no more menuNodes in the dropdown we can hide the moreButton.
if (menuNodes.length === 0) {
// If there are no more nodes in the more dropdown menu we can hide the moreButton.
if (Array.from(moreDropdown.children).length === 0) {
moreButton.classList.add(Selectors.classes.hidden);
}
}