Merge pull request #10374 from abpframework/EngincanV/bs5-blazor-rtl

Add RTL support to templates for Blazor Wasm
abpframework · Oct 20, 2021 · 5f3d90e · 5f3d90e
2 parents 9bf2c48 + f1e7111
commit 5f3d90e
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 6 deletions.
diff --git a/...c/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/LanguageSwitch.razor b/...c/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/LanguageSwitch.razor
@@ -60,6 +60,11 @@
             "Abp.SelectedLanguage", language.UiCultureName
             );
 
+        await JsRuntime.InvokeVoidAsync(
+            "localStorage.setItem",
+            "Abp.IsRtl", CultureInfo.GetCultureInfo(language.UiCultureName).TextInfo.IsRightToLeft
+            );
+
         await JsRuntime.InvokeVoidAsync("location.reload");
     }
 }
diff --git a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/wwwroot/index.html b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/wwwroot/index.html
@@ -26,5 +26,6 @@
     <script src="global.js?_v=637701705558615007"></script>
     <!--/ABP:Scripts-->
 
+    <script src="main.js"></script>
 </body>
 </html>
diff --git a/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/wwwroot/main.js b/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor/wwwroot/main.js
@@ -0,0 +1,17 @@
+(
+    function () {
+        var isRtl = JSON.parse(localStorage.getItem("Abp.IsRtl"));
+        var htmlTag = document.getElementsByTagName("html")[0];
+
+        if (htmlTag) {
+            var selectedLanguage = localStorage.getItem("Abp.SelectedLanguage");
+            if (selectedLanguage) {
+                htmlTag.setAttribute("lang", selectedLanguage);
+            }
+
+            if (isRtl) {
+                htmlTag.setAttribute("dir", "rtl");
+            }
+        }
+    }
+)();
diff --git a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Blazor.Host/wwwroot/index.html b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Blazor.Host/wwwroot/index.html
@@ -14,16 +14,17 @@
 </head>
 
 <body class="abp-application-layout bg-light">
-<div id="ApplicationContainer">
-    <div class="spinner">
-        <div class="double-bounce1"></div>
-        <div class="double-bounce2"></div>
+    <div id="ApplicationContainer">
+        <div class="spinner">
+            <div class="double-bounce1"></div>
+            <div class="double-bounce2"></div>
+        </div>
     </div>
-</div>
 
-<!--ABP:Scripts-->
+    <!--ABP:Scripts-->
     <script src="global.js?_v=637701706654165281"></script>
     <!--/ABP:Scripts-->
 
+    <script src="main.js"></script>
 </body>
 </html>
diff --git a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Blazor.Host/wwwroot/main.js b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Blazor.Host/wwwroot/main.js
@@ -0,0 +1,17 @@
+(
+    function () {
+        var isRtl = JSON.parse(localStorage.getItem("Abp.IsRtl"));
+        var htmlTag = document.getElementsByTagName("html")[0];
+
+        if (htmlTag) {
+            var selectedLanguage = localStorage.getItem("Abp.SelectedLanguage");
+            if (selectedLanguage) {
+                htmlTag.setAttribute("lang", selectedLanguage);
+            }
+
+            if (isRtl) {
+                htmlTag.setAttribute("dir", "rtl");
+            }
+        }
+    }
+)();