Merge pull request #15436 from nextcloud/refactor/oc-menu-helpers-bundle

Move OC legacy menu helpers to the bundle

core/js/js.js

@@ -419,116 +419,6 @@ Object.assign(window.OC, {
 		}
 	},
 
-	/**
-	 * For menu toggling
-	 * @todo Write documentation
-	 *
-	 * @param {jQuery} $toggle
-	 * @param {jQuery} $menuEl
-	 * @param {function|undefined} toggle callback invoked everytime the menu is opened
-	 * @param {boolean} headerMenu is this a top right header menu?
-	 * @returns {undefined}
-	 */
-	registerMenu: function($toggle, $menuEl, toggle, headerMenu) {
-		var self = this;
-		$menuEl.addClass('menu');
-
-		// On link, the enter key trigger a click event
-		// Only use the click to avoid two fired events
-		$toggle.on($toggle.prop('tagName') === 'A'
-			? 'click.menu'
-			: 'click.menu keyup.menu', function(event) {
-			// prevent the link event (append anchor to URL)
-			event.preventDefault();
-
-			// allow enter key as a trigger
-			if (event.key && event.key !== "Enter") {
-				return;
-			}
-
-			if ($menuEl.is(OC._currentMenu)) {
-				self.hideMenus();
-				return;
-			}
-			// another menu was open?
-			else if (OC._currentMenu) {
-				// close it
-				self.hideMenus();
-			}
-
-			if (headerMenu === true) {
-				$menuEl.parent().addClass('openedMenu');
-			}
-
-			// Set menu to expanded
-			$toggle.attr('aria-expanded', true);
-
-			$menuEl.slideToggle(OC.menuSpeed, toggle);
-			OC._currentMenu = $menuEl;
-			OC._currentMenuToggle = $toggle;
-		});
-	},
-
-	/**
-	 *  @todo Write documentation
-	 */
-	unregisterMenu: function($toggle, $menuEl) {
-		// close menu if opened
-		if ($menuEl.is(OC._currentMenu)) {
-			this.hideMenus();
-		}
-		$toggle.off('click.menu').removeClass('menutoggle');
-		$menuEl.removeClass('menu');
-	},
-
-	/**
-	 * Hides any open menus
-	 *
-	 * @param {Function} complete callback when the hiding animation is done
-	 */
-	hideMenus: function(complete) {
-		if (OC._currentMenu) {
-			var lastMenu = OC._currentMenu;
-			OC._currentMenu.trigger(new $.Event('beforeHide'));
-			OC._currentMenu.slideUp(OC.menuSpeed, function() {
-				lastMenu.trigger(new $.Event('afterHide'));
-				if (complete) {
-					complete.apply(this, arguments);
-				}
-			});
-		}
-
-		// Set menu to closed
-		$('.menutoggle').attr('aria-expanded', false);
-
-		$('.openedMenu').removeClass('openedMenu');
-		OC._currentMenu = null;
-		OC._currentMenuToggle = null;
-	},
-
-	/**
-	 * Shows a given element as menu
-	 *
-	 * @param {Object} [$toggle=null] menu toggle
-	 * @param {Object} $menuEl menu element
-	 * @param {Function} complete callback when the showing animation is done
-	 */
-	showMenu: function($toggle, $menuEl, complete) {
-		if ($menuEl.is(OC._currentMenu)) {
-			return;
-		}
-		this.hideMenus();
-		OC._currentMenu = $menuEl;
-		OC._currentMenuToggle = $toggle;
-		$menuEl.trigger(new $.Event('beforeShow'));
-		$menuEl.show();
-		$menuEl.trigger(new $.Event('afterShow'));
-		// no animation
-		if (_.isFunction(complete)) {
-			complete();
-		}
-	},
-
 	/**
 	 * Returns the user's locale as a BCP 47 compliant language tag
 	 *

core/src/OC/index.js

@@ -40,6 +40,12 @@ import ContactsMenu from './contactsmenu'
 import Dialogs from './dialogs'
 import EventSource from './eventsource'
 import {get, set} from './get_set'
+import {
+	hideMenus,
+	registerMenu,
+	showMenu,
+	unregisterMenu,
+} from './menu'
 import {isUserAdmin} from './admin'
 import L10N from './l10n'
 import {
@@ -88,6 +94,15 @@ export default {
 	EventSource,
 	isUserAdmin,
 	L10N,
+
+	/*
+	 * Legacy menu helpers
+	 */
+	hideMenus,
+	registerMenu,
+	showMenu,
+	unregisterMenu,
+
 	msg,
 	Notification,
 	PasswordConfirmation,

core/src/OC/menu.js

@@ -0,0 +1,135 @@
+/*
+ * @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @author 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import _ from 'underscore'
+import $ from 'jquery'
+
+import {menuSpeed} from './constants'
+
+let currentMenu = null
+let currentMenuToggle = null
+
+/**
+ * For menu toggling
+ *
+ * @param {jQuery} $toggle
+ * @param {jQuery} $menuEl
+ * @param {function|undefined} toggle callback invoked everytime the menu is opened
+ * @param {boolean} headerMenu is this a top right header menu?
+ * @returns {undefined}
+ */
+export const registerMenu = ($toggle, $menuEl, toggle, headerMenu) => {
+	$menuEl.addClass('menu')
+
+	// On link, the enter key trigger a click event
+	// Only use the click to avoid two fired events
+	$toggle.on($toggle.prop('tagName') === 'A'
+		? 'click.menu'
+		: 'click.menu keyup.menu', function (event) {
+		// prevent the link event (append anchor to URL)
+		event.preventDefault()
+
+		// allow enter key as a trigger
+		if (event.key && event.key !== "Enter") {
+			return
+		}
+
+		if ($menuEl.is(currentMenu)) {
+			hideMenus()
+			return
+		} else if (currentMenu) {
+			// another menu was open?
+			// close it
+			hideMenus()
+		}
+
+		if (headerMenu === true) {
+			$menuEl.parent().addClass('openedMenu')
+		}
+
+		// Set menu to expanded
+		$toggle.attr('aria-expanded', true)
+
+		$menuEl.slideToggle(menuSpeed, toggle)
+		currentMenu = $menuEl
+		currentMenuToggle = $toggle
+	})
+}
+
+/**
+ *  @todo Write documentation
+ */
+export const unregisterMenu = ($toggle, $menuEl) => {
+	// close menu if opened
+	if ($menuEl.is(currentMenu)) {
+		hideMenus()
+	}
+	$toggle.off('click.menu').removeClass('menutoggle')
+	$menuEl.removeClass('menu')
+}
+
+/**
+ * Hides any open menus
+ *
+ * @param {Function} complete callback when the hiding animation is done
+ */
+export const hideMenus = function(complete) {
+	if (currentMenu) {
+		const lastMenu = currentMenu
+		currentMenu.trigger(new $.Event('beforeHide'))
+		currentMenu.slideUp(menuSpeed, function () {
+			lastMenu.trigger(new $.Event('afterHide'))
+			if (complete) {
+				complete.apply(this, arguments)
+			}
+		})
+	}
+
+	// Set menu to closed
+	$('.menutoggle').attr('aria-expanded', false)
+
+	$('.openedMenu').removeClass('openedMenu')
+	currentMenu = null
+	currentMenuToggle = null
+}
+
+/**
+ * Shows a given element as menu
+ *
+ * @param {Object} [$toggle=null] menu toggle
+ * @param {Object} $menuEl menu element
+ * @param {Function} complete callback when the showing animation is done
+ */
+export const showMenu = ($toggle, $menuEl, complete) => {
+	if ($menuEl.is(currentMenu)) {
+		return
+	}
+	hideMenus()
+	currentMenu = $menuEl
+	currentMenuToggle = $toggle
+	$menuEl.trigger(new $.Event('beforeShow'))
+	$menuEl.show()
+	$menuEl.trigger(new $.Event('afterShow'))
+	// no animation
+	if (_.isFunction(complete)) {
+		complete()
+	}
+}