From: SassNinja Date: Sat, 5 Aug 2017 14:52:25 +0000 (+0200) Subject: Create _showMenu method to open any (sub)menu in a drilldown X-Git-Tag: v6.4.4-rc1~18^2~1 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=6f3b5dbd479b1331f00fadf83113b988bcd82480;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Create _showMenu method to open any (sub)menu in a drilldown --- diff --git a/js/foundation.drilldown.js b/js/foundation.drilldown.js index 80a3dbf6e..e8b7a6186 100644 --- a/js/foundation.drilldown.js +++ b/js/foundation.drilldown.js @@ -342,6 +342,88 @@ class Drilldown extends Plugin { }); } + /** + * Sets the CSS classes for submenu to show it. + * @function + * @private + * @param {jQuery} $elem - the target submenu (`ul` tag) + * @param {boolean} trigger - trigger drilldown event + */ + _setShowSubMenuClasses($elem, trigger) { + $elem.addClass('is-active').removeClass('invisible').attr('aria-hidden', false); + $elem.parent('li').attr('aria-expanded', true); + if (trigger === true) { + this.$element.trigger('open.zf.drilldown', [$elem]); + } + } + + /** + * Sets the CSS classes for submenu to hide it. + * @function + * @private + * @param {jQuery} $elem - the target submenu (`ul` tag) + * @param {boolean} trigger - trigger drilldown event + */ + _setHideSubMenuClasses($elem, trigger) { + $elem.removeClass('is-active').addClass('invisible').attr('aria-hidden', true); + $elem.parent('li').attr('aria-expanded', false); + if (trigger === true) { + $elem.trigger('hide.zf.drilldown', [$elem]); + } + } + + /** + * Opens a specific drilldown (sub)menu no matter which (sub)menu in it is currently visible. + * Compared to _show() this lets you jump into any submenu without clicking through every submenu on the way to it. + * @function + * @fires Drilldown#open + * @param {jQuery} $elem - the target (sub)menu (`ul` tag) + * @param {boolean} autoFocus - if false the first link in the target (sub)menu won't get auto focused + */ + _showMenu($elem, autoFocus) { + + var _this = this; + + // Reset drilldown + var $expandedSubmenus = this.$element.find('li[aria-expanded="true"] > ul[data-submenu]'); + $expandedSubmenus.each(function(index) { + _this._setHideSubMenuClasses($(this)); + }); + + // If target menu is root, focus first link & exit + if ($elem.is('[data-drilldown]')) { + if (autoFocus !== false) $elem.find('li[role="treeitem"] > a').first().focus(); + if (this.options.autoHeight) this.$wrapper.css('height', $elem.data('calcHeight')); + return; + } + + // Find all submenus on way to root incl. the element itself + var $submenus = $elem.children().first().parentsUntil('[data-drilldown]', '[data-submenu]'); + + // Open target menu and all submenus on its way to root + $submenus.each(function(index) { + + // Update height of first child (target menu) if autoHeight option true + if (index === 0 && _this.options.autoHeight) { + _this.$wrapper.css('height', $(this).data('calcHeight')); + } + + var isLastChild = index == $submenus.length - 1; + + // Add transitionsend listener to last child (root due to reverse order) to open target menu's first link + // Last child makes sure the event gets always triggered even if going through several menus + if (isLastChild === true) { + $(this).one(transitionend($(this)), () => { + if (autoFocus !== false) { + $elem.find('li[role="treeitem"] > a').first().focus(); + } + }); + } + + _this._setShowSubMenuClasses($(this), isLastChild); + }); + } + /** * Opens a submenu. * @function @@ -357,7 +439,7 @@ class Drilldown extends Plugin { * @event Drilldown#open */ this.$element.trigger('open.zf.drilldown', [$elem]); - }; + } /** * Hides a submenu @@ -369,7 +451,7 @@ class Drilldown extends Plugin { if(this.options.autoHeight) this.$wrapper.css({height:$elem.parent().closest('ul').data('calcHeight')}); var _this = this; $elem.parent('li').attr('aria-expanded', false); - $elem.attr('aria-hidden', true).addClass('is-closing') + $elem.attr('aria-hidden', true); $elem.addClass('is-closing') .one(transitionend($elem), function(){ $elem.removeClass('is-active is-closing'); diff --git a/test/visual/drilldown/drilldown-show-menu.html b/test/visual/drilldown/drilldown-show-menu.html new file mode 100644 index 000000000..883d98ee4 --- /dev/null +++ b/test/visual/drilldown/drilldown-show-menu.html @@ -0,0 +1,111 @@ + + + + + + + + Foundation for Sites Testing + + + + +
+
+
+
+
+

should be possible to open any drilldown (sub)menu via JS

+
+ + + + +
+
+
+ + +
+
+
+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione id accusantium dolore sequi architecto at soluta, nulla nam? Nemo magnam repellendus iure, ut recusandae voluptatibus, dolores pariatur facere illo! Sapiente. +

+
+
+
+
+ + + + + +