Merge pull request #2670 from fghamsary/feature-rtl-support-in-locale

Feature RTL support in locale
VulcanJS · Dec 14, 2020 · d52abc7 · d52abc7
2 parents c7fad14 + 8aa4e27
commit d52abc7
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/packages/vulcan-core/lib/modules/components/App.jsx b/packages/vulcan-core/lib/modules/components/App.jsx
@@ -74,6 +74,7 @@ class App extends PureComponent {
     this.state = {
       locale: {
         id: locale.id,
+        rtl: locale.rtl ?? false,
         method: locale.method,
         loading: false,
         strings: merge({}, loadedStrings, bundledStrings),
@@ -137,12 +138,25 @@ class App extends PureComponent {
 
     // if this is a dynamic locale, fetch its data from the server
     if (localeObject.dynamic) {
-      this.setState({ locale: { ...this.state.locale, loading: true } });
+      this.setState({ locale: { ...this.state.locale, loading: true, rtl: localeObject?.rtl ?? false } });
       localeStrings = await this.loadLocaleStrings(localeId);
     } else {
       localeStrings = getStrings(localeId);
     }
-    this.setState({ locale: { ...this.state.locale, loading: false, id: localeId, strings: localeStrings } });
+    // before removing the loading we have to change the rtl class on HTML tag if it exists
+    if (document && typeof document.getElementsByTagName === "function" && document.getElementsByTagName("html")) {
+      const htmlTag = document.getElementsByTagName("html");
+      if (htmlTag && htmlTag.length === 1) {
+        // change in locale didn't change the html lang as well, which is fixed by this PR
+        htmlTag[0].lang = localeId;
+        if (localeObject?.rtl === true) {
+          htmlTag[0].classList.add("rtl")
+        } else {
+          htmlTag[0].classList.remove("rtl")
+        }
+      }
+    }
+    this.setState({ locale: { ...this.state.locale, loading: false, id: localeId, rtl: localeObject?.rtl ?? false, strings: localeStrings } });
 
     cookies.remove('locale', { path: '/' });
     cookies.set('locale', localeId, { path: '/' });

diff --git a/packages/vulcan-lib/lib/server/apollo-server/context.js b/packages/vulcan-lib/lib/server/apollo-server/context.js
@@ -19,6 +19,7 @@ import { GraphQLSchema } from '../graphql/index.js';
 import _merge from 'lodash/merge';
 import { getUser } from 'meteor/apollo';
 import { getHeaderLocale } from '../intl.js';
+import { getLocale } from '../../modules/intl.js';
 import { getSetting } from '../../modules/settings.js';
 import { WebApp } from 'meteor/webapp';
 
@@ -116,12 +117,17 @@ export const computeContextFromReq = (currentContext, customContextFromReq) => {
     }
 
     context.locale = getHeaderLocale(headers, context.currentUser && context.currentUser.locale);
+    const locale = getLocale(context.locale);
 
     // see https://forums.meteor.com/t/can-i-edit-html-tag-in-meteor/5867/7
     WebApp.addHtmlAttributeHook(function() {
-      return {
-        lang: context.locale,
+      let htmlAttributes = {
+        lang: context.locale
       };
+      if (locale?.rtl === true) {
+        htmlAttributes.class = 'rtl';
+      }
+      return htmlAttributes;
     });
 
     return context;