Merge pull request #718 from FEMR/rtl-translation

Added RTL css for Right to Left Languages
FEMR · Apr 16, 2024 · 6e6d7c5 · 6e6d7c5
2 parents aeb3d31 + c6ab018
commit 6e6d7c5
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 4 deletions.
diff --git a/app/femr/ui/controllers/MedicalController.java b/app/femr/ui/controllers/MedicalController.java
@@ -274,7 +274,14 @@ public Result translateGet() {
         PatientEncounterItem patientEncounter = currentEncounterByPatientId.getResponseObject();
         String fromLanguage = patientEncounter.getLanguageCode();
 
-        return ok(Json.toJson(translate(text, fromLanguage, toLanguage)));
+        // add whether the language is rtl to response
+        List<String> rtlLanguages = Arrays.asList("he", "ar");
+        Map<String, Object> responseMap = new HashMap<>();
+        responseMap.put("toLanguageIsRtl", rtlLanguages.contains(toLanguage));
+        responseMap.put("fromLanguageIsRtl", rtlLanguages.contains(fromLanguage));
+        responseMap.put("translation", translate(text, fromLanguage,toLanguage));
+
+        return ok(Json.toJson(responseMap));
     }
 
 //    Calls Python Script to translate

diff --git a/public/css/medical/medical.css b/public/css/medical/medical.css
@@ -322,4 +322,9 @@ http://api.thumbr.it/whitenoise-361x370.png?background=#d4d3ccff&noise=626262&de
 
     width: auto;
     margin-right: 5px;
+}
+
+.rtl {
+    direction: rtl;
+    text-align: right;
 }
diff --git a/public/js/medical/medical.js b/public/js/medical/medical.js
@@ -338,7 +338,7 @@ $(document).ready(function () {
 
     // tabs
     for (let i = 1; i < jsonObj.length; i++) {
-        textToTranslate = textToTranslate + " $ " + $(jsonObj[i].id).val(); // DELIM = $
+        textToTranslate = textToTranslate + " $ " + $(jsonObj[i].id).val();
         jsonObj[i].text = $(jsonObj[i].id).val();
     }
 
@@ -347,23 +347,37 @@ $(document).ready(function () {
         type: 'get',
         url: '/translate',
         data: {text : textToTranslate, patientId: patientId},
-        success: function(translation){
+        success: function(response){
             $("#loading").remove();
             $("#toggleBtn").text("Show Original");
 
-            var listTranslated = translation.split("$");
+            var listTranslated = response.translation.split("$");
+            var toLanguageIsRtl = response.toLanguageIsRtl;
+            var fromLanguageIsRtl = response.fromLanguageIsRtl;
 
             for (let i = 0; i < jsonObj.length; i++) {
                 var textOut = listTranslated[i];
 
                 if (jsonObj[i].id === "#complaintInfo"){
                     var oldText =  $(jsonObj[i].id + " span").text();
                     $(jsonObj[i].id + "Store").text(oldText)
+                    $(jsonObj[i].id + "Store").data('isRtl', fromLanguageIsRtl); // store whether langauge is rtl
                     $(jsonObj[i].id).text(textOut)
+                    $(jsonObj[i].id).data('isRtl', toLanguageIsRtl);
+
                 } else {
                     var oldText =  $(jsonObj[i].id).val();
                     $(jsonObj[i].id + "Store").text(oldText)
+                    $(jsonObj[i].id + "Store").data('isRtl', fromLanguageIsRtl);
                     $(jsonObj[i].id).val(textOut);
+                    $(jsonObj[i].id).data('isRtl', toLanguageIsRtl);
+                }
+
+                // make the text right to left if it is a rtl language
+                if ($(jsonObj[i].id).data('isRtl')) {
+                    $(jsonObj[i].id).addClass('rtl');
+                } else {
+                    $(jsonObj[i].id).removeClass('rtl');
                 }
             }
         },
@@ -399,12 +413,36 @@ $(document).ready(function () {
         $(jsonObj[0].id + "Store").text(oldText);
         $(jsonObj[0].id).text(newText);
 
+        // switch and set the rtl values
+        var storeRtl = $(jsonObj[0].id + "Store").data("isRtl");
+        var currentRtl = $(jsonObj[0].id).data("isRtl");
+        $(jsonObj[0].id + "Store").data("isRtl",currentRtl);
+        $(jsonObj[0].id).data("isRtl",storeRtl);
+
+        if($(jsonObj[0].id).data("isRtl")) {
+            $(jsonObj[0].id).addClass('rtl');
+        } else {
+            $(jsonObj[0].id).removeClass('rtl');
+        }
+
         // toggle tabs
         for (let i = 1; i < jsonObj.length; i++) {
             var oldText =  $(jsonObj[i].id).val();
             var newText =  $(jsonObj[i].id + "Store").text();
             $(jsonObj[i].id + "Store").text(oldText);
             $(jsonObj[i].id).val(newText);
+
+            // switch and set the rtl values
+            var storeRtl = $(jsonObj[i].id + "Store").data("isRtl");
+            var currentRtl = $(jsonObj[i].id).data("isRtl");
+            $(jsonObj[i].id + "Store").data("isRtl",currentRtl);
+            $(jsonObj[i].id).data("isRtl",storeRtl);
+
+            if($(jsonObj[i].id).data("isRtl")) {
+                $(jsonObj[i].id).addClass('rtl');
+            } else {
+                $(jsonObj[i].id).removeClass('rtl');
+            }
         }
     });