Locales - Add dirLocale computed and set dir attributes properly

area17 · Jul 21, 2021 · 2b18349 · 2b18349
1 parent c626a14
commit 2b18349
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 1 deletion.
diff --git a/frontend/js/components/InputFrame.vue b/frontend/js/components/InputFrame.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="input" :class="textfieldClasses" v-show="isCurrentLocale" :hidden="!isCurrentLocale ? true : null">
+  <div class="input" :dir="dirLocale" :class="textfieldClasses" v-show="isCurrentLocale" :hidden="!isCurrentLocale ? true : null">
     <label class="input__label" :for="labelFor || name" v-if="label">
       {{ label }}<span class="input__required" v-if="required">*</span>
       <span class="input__lang" v-if="hasLocale && languages.length > 1" @click="onClickLocale" :data-tooltip-title="$trans('fields.generic.switch-language')" v-tooltip>{{ displayedLocale }}</span>

diff --git a/frontend/js/components/Wysiwyg.vue b/frontend/js/components/Wysiwyg.vue
@@ -202,6 +202,12 @@
           }
         }
 
+        // set Quill direction
+        if(this.dirLocale === 'rtl') {
+          editor.format('direction', 'rtl');
+          editor.format('align', 'right');
+        }
+
         // check text length
         if (this.hasMaxlength && this.showCounter) {
           this.updateCounter(this.getTextLength())

diff --git a/frontend/js/mixins/locale.js b/frontend/js/mixins/locale.js
@@ -20,6 +20,29 @@ export default {
         return true
       }
     },
+    isLocaleRTL: function () {
+      /* List of RTL locales */
+      /*
+        ar : Arabic
+        arc : Aramaic
+        dv : Divehi
+        fa : Persian
+        ha : Hausa
+        he : Hebrew
+        khw : Khowar
+        ks : Kashmiri
+        ku : Kurdish
+        ps : Pashto
+        ur : Urdu
+        yi : Yiddish
+      */
+      const rtlLocales = ['ar','arc','dv','fa','ha','he','khw','ks','ku','ps','ur','yi']
+      if (this.hasLocale) return rtlLocales.includes(this.locale.shortlabel.toLowerCase())
+      else return false
+    },
+    dirLocale: function() {
+      return (this.isLocaleRTL ? 'rtl' : 'auto')
+    },
     displayedLocale: function () {
       if (this.hasLocale) return this.locale.shortlabel
       else return false