ROU-11183: Include OnOrientationChange logic on MenuReady/MenuDestroy (…

…#993) * Added OnOrientationChange logic to Menu OnReady/Destroy * Fixed typos already on the code * Renamed methods for better readability * Fixed callback validation, Snyk finding and replace setTimeouts * Update src/scripts/OutSystems/OSUI/Utils/Menu.ts Co-authored-by: José Rio <jose.rio@hotmail.com> --------- Co-authored-by: José Rio <jose.rio@hotmail.com>
OutSystems · Sep 25, 2024 · baaa6da · baaa6da
1 parent 559a53e
commit baaa6da
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 42 deletions.
diff --git a/src/scripts/OSFramework/OSUI/Helper/Device.ts b/src/scripts/OSFramework/OSUI/Helper/Device.ts
@@ -142,7 +142,7 @@ namespace OSFramework.OSUI.Helper {
 		private static _getUserAgent(userAgent = ''): string {
 			let localUserAgent = userAgent;
 
-			if (userAgent.replace(' ', '') === '') {
+			if (userAgent.replace(/ /g, '') === '') {
 				if (sessionStorage.previewDevicesUserAgent) {
 					localUserAgent = sessionStorage.previewDevicesUserAgent;
 				} else {

diff --git a/src/scripts/OutSystems/OSUI/Utils/Menu.ts b/src/scripts/OutSystems/OSUI/Utils/Menu.ts
@@ -29,10 +29,10 @@ namespace OutSystems.OSUI.Utils.Menu {
 		'a[href]:not([disabled]), [tabindex], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])';
 
 	// Add Menu Event Listeners
-	const _addMenuEeventListeners = (hasTriggeredByAPI = false): void => {
+	const _addMenuEventListeners = (hasTriggeredByAPI = false): void => {
 		// Ensure events will be removed when SetMenuListeners "API" has been triggered and before readding them again
 		if (hasTriggeredByAPI) {
-			_removeMenuEeventListeners();
+			_removeMenuEventListeners();
 		}
 		// Check if the keydown event should be added
 		const shouldKeyDownBeAdded =
@@ -54,6 +54,17 @@ namespace OutSystems.OSUI.Utils.Menu {
 		);
 	};
 
+	// Method that add the OrientationChange handler, used only for TabletApps (Template_TabletApp > Menu)
+	const _addMenuOnOrientationChange = (callback: OSFramework.OSUI.GlobalCallbacks.Generic): void => {
+		if (callback && OSFramework.OSUI.Helper.DeviceInfo.IsTablet) {
+			_onOrientationChangeCallback = callback;
+			OSFramework.OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.addHandler(
+				OSFramework.OSUI.Event.DOMEvents.Listeners.Type.OrientationChange,
+				_onOrientationChangeCallbackHandler
+			);
+		}
+	};
+
 	const _hideMenu = (): void => {
 		// Update app properties
 		if (_appProp.menu.element === undefined || _appProp.layout.element === undefined) {
@@ -103,8 +114,8 @@ namespace OutSystems.OSUI.Utils.Menu {
 
 	// OrientationChange handler
 	const _onOrientationChangeCallbackHandler = (callback: OSFramework.OSUI.GlobalCallbacks.Generic): void => {
-		if (callback !== undefined) {
-			setTimeout(function () {
+		if (typeof callback === 'function') {
+			OSFramework.OSUI.Helper.ApplySetTimeOut(() => {
 				_onOrientationChangeCallback();
 			}, 300);
 		}
@@ -133,20 +144,31 @@ namespace OutSystems.OSUI.Utils.Menu {
 		}
 
 		// Remove the menu event listeners since device type changed
-		_removeMenuEeventListeners();
+		_removeMenuEventListeners();
 
 		// ReAdd the menu event listeners
-		_addMenuEeventListeners();
+		_addMenuEventListeners();
 	};
 
 	// Remove Menu Event Listeners
-	const _removeMenuEeventListeners = (): void => {
+	const _removeMenuEventListeners = (): void => {
 		if (_appProp.menu.hasEventListeners) {
 			_appProp.menu.hasEventListeners = false;
 			_appProp.menu.element.removeEventListener('keydown', _menuOnKeypress);
 		}
 	};
 
+	// Method that removes the OrientationChange handler, used only for TabletApps (Template_TabletApp > Menu)
+	const _removeMenuOnOrientationChange = (): void => {
+		if (_onOrientationChangeCallback && OSFramework.OSUI.Helper.DeviceInfo.IsTablet) {
+			OSFramework.OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.removeHandler(
+				OSFramework.OSUI.Event.DOMEvents.Listeners.Type.OrientationChange,
+				_onOrientationChangeCallbackHandler
+			);
+			_onOrientationChangeCallback = undefined;
+		}
+	};
+
 	// Method that removes the OnResize handler
 	const _removeMenuOnResize = (): void => {
 		OSFramework.OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.removeHandler(
@@ -295,21 +317,11 @@ namespace OutSystems.OSUI.Utils.Menu {
 		_setA11YAttributes();
 	};
 
-	/**
-	 * Method that add the OrientationChange handler, used only for TabletApps (Template_TabletApp > Menu)
-	 *
-	 * @export
-	 * @param {OSFramework.OSUI.GlobalCallbacks.Generic} callback
-	 */
-	export function AddMenuOnOrientationChange(callback: OSFramework.OSUI.GlobalCallbacks.Generic): void {
-		if (callback !== undefined) {
-			_onOrientationChangeCallback = callback;
-			OSFramework.OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.addHandler(
-				OSFramework.OSUI.Event.DOMEvents.Listeners.Type.OrientationChange,
-				_onOrientationChangeCallbackHandler
-			);
-		}
-	}
+	// Expose the_addMenuOnOrientationChange method, used only for TabletApps (Template_TabletApp > Menu)
+	export const addMenuOnOrientationChange = _addMenuOnOrientationChange;
+
+	// Expose the _removeMenuOnOrientationChange method, used only for TabletApps (Template_TabletApp > Menu)
+	export const removeMenuOnOrientationChange = _removeMenuOnOrientationChange;
 
 	/**
 	 * Checks if the menu can be draggable
@@ -439,6 +451,8 @@ namespace OutSystems.OSUI.Utils.Menu {
 			errorCode: ErrorCodes.Utilities.FailSetMenuOnDestroy,
 			callback: () => {
 				_removeMenuOnResize();
+				// Remove the OrientationChange handler only for TabletApps
+				_removeMenuOnOrientationChange();
 			},
 		});
 
@@ -451,33 +465,20 @@ namespace OutSystems.OSUI.Utils.Menu {
 	 * @export
 	 * @return {*}  {string}
 	 */
-	export function OnReady(): string {
+	export function OnReady(callback: OSFramework.OSUI.GlobalCallbacks.Generic): string {
 		const result = OutSystems.OSUI.Utils.CreateApiResponse({
 			errorCode: ErrorCodes.Utilities.FailSetMenuOnReady,
 			callback: () => {
 				_updatePropsAndAttrs();
 				_addMenuOnResize();
+				// Add the OrientationChange handler only for TabletApps
+				_addMenuOnOrientationChange(callback);
 			},
 		});
 
 		return result;
 	}
 
-	/**
-	 * Method that removes the OrientationChange handler
-	 *
-	 * @export
-	 */
-	export function RemoveMenuOnOrientationChange(): void {
-		if (_onOrientationChangeCallback !== undefined) {
-			OSFramework.OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.removeHandler(
-				OSFramework.OSUI.Event.DOMEvents.Listeners.Type.OrientationChange,
-				_onOrientationChangeCallbackHandler
-			);
-			_onOrientationChangeCallback = undefined;
-		}
-	}
-
 	/**
 	 * Adds the selected states to menu items
 	 *
@@ -687,9 +688,9 @@ namespace OutSystems.OSUI.Utils.Menu {
 
 				if (_appProp.layout.element && menu) {
 					// Invoking setTimeout to schedule the callback to be run asynchronously
-					setTimeout(function () {
-						_addMenuEeventListeners(true);
-					}, 0);
+					OSFramework.OSUI.Helper.AsyncInvocation(() => {
+						_addMenuEventListeners(true);
+					});
 				}
 			},
 		});

diff --git a/src/scripts/osui.ts b/src/scripts/osui.ts
@@ -1,36 +1,54 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 namespace osui {
+	/**
+	 * @deprecated use 'OutSystems.OSUI.GetVersion()' instead.
+	 */
 	export function GetVersion(): string {
 		console.warn('osui.GetVersion(), is deprecated. Please use the API `OutSystems.OSUI.GetVersion()`.');
 		return OutSystems.OSUI.GetVersion();
 	}
 
+	/**
+	 * @deprecated use 'OutSystems.OSUI.Utils.ToggleClass(...)' instead.
+	 */
 	export function ToggleClass(el: HTMLElement, state: unknown, className: string): void {
 		console.warn(
 			'osui.ToggleClass(...), is deprecated. Please use the API `OutSystems.OSUI.Utils.ToggleClass(...)`.'
 		);
 		OutSystems.OSUI.Utils.ToggleClass(el, state, className);
 	}
 
+	/**
+	 * @deprecated use 'OutSystems.OSUI.GetVersion()' instead.
+	 */
 	export function GetClosest(elem: HTMLElement, selector: string): unknown {
 		console.warn(
 			'osui.GetClosest(...), is deprecated. Please use the API `OutSystems.OSUI.Utils.GetClosest(...)`.'
 		);
 		return OutSystems.OSUI.Utils.GetClosest(elem, selector);
 	}
 
+	/**
+	 * @deprecated use 'OutSystems.OSUI.Utils.FixInputs(...)' instead.
+	 */
 	export function FixInputs(): void {
 		console.warn('osui.FixInputs(...), is deprecated. Please use the API `OutSystems.OSUI.Utils.FixInputs(...)`.');
 		OutSystems.OSUI.Utils.LayoutPrivate.FixInputs();
 	}
 
+	/**
+	 * @deprecated use 'OutSystems.OSUI.Utils.HasMasterDetail()' instead.
+	 */
 	export function HasMasterDetail(): boolean {
 		console.warn(
 			'osui.HasMasterDetail(), is deprecated. Please use the API `OutSystems.OSUI.Utils.HasMasterDetail()`.'
 		);
 		return OutSystems.OSUI.Utils.HasMasterDetail();
 	}
 
+	/**
+	 * @deprecated use 'OutSystems.OSUI.Utils.HideOnScroll.Init()' instead.
+	 */
 	export function HideOnScroll(): unknown {
 		console.warn(
 			'osui.HideOnScroll(), is deprecated. Please use the API `OutSystems.OSUI.Utils.HideOnScroll.Init()`.'
@@ -42,3 +60,25 @@ namespace osui {
 		};
 	}
 }
+
+namespace OutSystems.OSUI.Utils.Menu {
+	/**
+	 * @deprecated use 'OutSystems.OSUI.Utils.Menu.OnReady(...)' instead.
+	 */
+	export function AddMenuOnOrientationChange(callback: OSFramework.OSUI.GlobalCallbacks.Generic): void {
+		console.warn(
+			'OutSystems.OSUI.Utils.Menu.AddMenuOnOrientationChange(...), is deprecated. Please use the API `OutSystems.OSUI.Utils.Menu.OnReady(...)`.'
+		);
+		return OutSystems.OSUI.Utils.Menu.addMenuOnOrientationChange(callback);
+	}
+
+	/**
+	 * @deprecated use 'OutSystems.OSUI.Utils.Menu.OnDestroy()' instead.
+	 */
+	export function RemoveMenuOnOrientationChange(): void {
+		console.warn(
+			'OutSystems.OSUI.Utils.Menu.RemoveMenuOnOrientationChange(), is deprecated. Please use the API `OutSystems.OSUI.Utils.Menu.OnDestroy()`.'
+		);
+		return OutSystems.OSUI.Utils.Menu.removeMenuOnOrientationChange();
+	}
+}