feat(framework): Create attachDirectionChange function (#2646)

Author: vladitasev

packages/base/src/locale/applyDirection.js

@@ -1,4 +1,5 @@
 import RenderScheduler from "../RenderScheduler.js";
+import { fireDirectionChange } from "./directionChange.js";
 
 /**
  * Re-renders all RTL-aware UI5 Elements.
@@ -7,7 +8,9 @@ import RenderScheduler from "../RenderScheduler.js";
  *
  * @returns {Promise<void>}
  */
-const applyDirection = () => {
+const applyDirection = async () => {
+	const listenersResults = fireDirectionChange();
+	await Promise.all(listenersResults);
 	RenderScheduler.reRenderAllUI5Elements({ rtlAware: true });
 	return RenderScheduler.whenFinished();
 };

packages/base/src/locale/directionChange.js

@@ -0,0 +1,32 @@
+import EventProvider from "../EventProvider.js";
+
+const eventProvider = new EventProvider();
+const DIR_CHANGE = "directionChange";
+
+/**
+ * Attach a callback that will be executed whenever the application calls the "applyDirection" function
+ * @public
+ * @param listener
+ */
+const attachDirectionChange = listener => {
+	eventProvider.attachEvent(DIR_CHANGE, listener);
+};
+
+/**
+ * Detach a callback that was passed with "attachDirectionChange"
+ * @public
+ * @param listener
+ */
+const detachDirectionChange = listener => {
+	eventProvider.detachEvent(DIR_CHANGE, listener);
+};
+
+const fireDirectionChange = () => {
+	return eventProvider.fireEvent(DIR_CHANGE);
+};
+
+export {
+	attachDirectionChange,
+	detachDirectionChange,
+	fireDirectionChange,
+};

packages/main/bundle.esm.js

@@ -107,6 +107,7 @@ import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
 import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
 import { getRegisteredNames as getIconNames } from  "@ui5/webcomponents-base/dist/SVGIconRegistry.js";
 import applyDirection from "@ui5/webcomponents-base/dist/locale/applyDirection.js";
+import { attachDirectionChange } from "@ui5/webcomponents-base/dist/locale/directionChange.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 
 const testAssets = {
@@ -125,6 +126,7 @@ const testAssets = {
 	},
 	getLocaleData,
 	applyDirection,
+	attachDirectionChange,
 	ResizeHandler,
 	addCustomCSS,
 	attachThemeLoaded,

packages/main/test/pages/RTL.html

@@ -78,6 +78,12 @@
 	<ui5-date-picker></ui5-date-picker>
 	<script>
 
+		setTimeout(function() {
+			window['sap-ui-webcomponents-bundle'].attachDirectionChange(function() {
+				console.log("Direction changed");
+			});
+		}, 1000);
+
 		// Utility function to change RTL and apply the changes
 		function setDir(dir) {
 			document.body.dir = dir;