Rtl support

transifex/addons/lotte/static/lotte/css/webtrans.css

@@ -541,6 +541,10 @@ html #footpanel ul li a.active { /*--Active state when sub-panel is open--*/
   padding:3px 4px;
 }
 
+.rtl_wrapper > .plural_label {
+  right: 405px;
+}
+
 /* Error styling */
 div.error_notes {
   display:none;
@@ -579,4 +583,4 @@ div.lotte_details_wrapper ul.details_left {
 
 div.lotte_details_wrapper ul.details_left li.key{
   margin-top:0;
-}
+}

transifex/addons/lotte/static/lotte/js/tx.lotte2.js

@@ -233,7 +233,7 @@ function undoButtonClickHandler() {
     tr.find('span.rule').each(function(i){
         rule = $(this).attr('rule');
         string.translate(undo_value[rule], rule);
-        $(this).next('textarea').focus().val(undo_value[rule]);
+        $(this).next('textarea').focus().val(undo_value[rule]).keyup();
     });
     // Save the new value
     string.push();
@@ -818,6 +818,7 @@ function StringSet(json_object, push_url, from_lang, to_lang) {
                         }
                         a.removeClass("action_go");
                         a.addClass("action");
+                        trans.keyup();
                     });
                 });
                 return false;
@@ -874,6 +875,7 @@ function StringSet(json_object, push_url, from_lang, to_lang) {
                     $('tbody tr td.notes span#undo_' + id).removeClass('inactive');
                     $('tbody tr td.notes span#undo_' + id).unbind('click');
                     $('tbody tr td.notes span#undo_' + id).bind('click', undoButtonClickHandler);
+                    trans.keyup();
                     trans.focus();
                 }
             });

transifex/addons/lotte/templates/translate.html

@@ -39,13 +39,7 @@
   <script type="text/javascript" src="{% static "lotte/js/jquery.textarea-expander.js" %}"></script>
   <script type="text/javascript" src="{% static "lotte/js/jquery.jeditable.mini.js" %}"></script>
   <script type="text/javascript" src="{% static "lotte/js/jquery.spellchecker.js" %}"></script>
-
-  {% if RTL %}
-    <style type="text/css">
-        textarea.rtl{unicode-bidi: embed; direction: rtl;}
-    </style>
-  {% endif %}
-
+  <script type="text/javascript" src="{% static "js/tx.jquery.bidi.js" %}"></script>
 <script type="text/javascript">
 
     /* Global variables */
@@ -302,12 +296,12 @@
                               else if (translation_text.substr(0, 2) == '\r\n')
                                   translation_text = '\r\n' + translation_text;
                               if(plural_types[rule]=='other'){
-                                  textareas += '<div class="translation_wrapper"><span class="rule nodisplay" rule="'+plural_types[rule]+'">'+plural_types[rule]+'</span><textarea class="translation {% if RTL %}rtl {% endif %}default_translation" id="translation_' + oObj.iDataRow + '">' + translation_text + '</textarea>';
+                                  textareas += '<div class="translation_wrapper{% if RTL %} rtl_wrapper{% endif %}"><span class="rule nodisplay" rule="'+plural_types[rule]+'">'+plural_types[rule]+'</span><textarea class="translation {% if RTL %}rtl {% endif %}default_translation" id="translation_' + oObj.iDataRow + '">' + translation_text + '</textarea>';
                                 if(plurals_counter>0)
                                     textareas += '<span class="plural_label tag" title="Translation plural form for '+plural_types[rule]+' items (equation: {{ target_language.rule_other}})">'+plural_types[rule]+'</span>';
                                 textareas += '</div>';
                               }else{
-                                textareas += '<div class="translation_wrapper"><span class="rule nodisplay" rule="'+plural_types[rule]+'">'+plural_types[rule]+'</span><textarea class="translation {% if RTL %}rtl {% endif %}">' + translation_text + '</textarea>';
+                                textareas += '<div class="translation_wrapper{% if RTL %} rtl_wrapper{% endif %}"><span class="rule nodisplay" rule="'+plural_types[rule]+'">'+plural_types[rule]+'</span><textarea class="translation {% if RTL %}rtl {% endif %}">' + translation_text + '</textarea>';
                                 if(plural_types[rule]=='zero'){
                                     textareas += '<span class="plural_label tag" title="Translation plural form for '+plural_types[rule]+' items (equation: {{ target_language.rule_zero }})">'+plural_types[rule]+'</span>';
                                 }else if(plural_types[rule]=='one'){
@@ -464,6 +458,9 @@
                     if (textareaHeight < srcHeight)
                         $(this).TextAreaExpander(srcHeight);
                 });
+                {% if RTL %}
+                    $('textarea.translation').bidi();
+                {% endif %}
 	    }
         }).fnSetFilteringDelay(500);
 

transifex/addons/suggestions/templates/suggestions/suggestions_snippet.html

@@ -6,11 +6,13 @@
 {% get_suggestions source_entity.id for lang_code as suggestions %}
 
 <link media="screen" href="{% static "suggestions/css/lotte_suggestions.css" %}" type="text/css" rel="stylesheet" />
+<script type="text/javascript" src="{% static "js/tx.jquery.bidi.js" %}"></script>
 
 <script type="text/javascript">
 
 /* document ready. do stuff */
 $(document).ready(function(){
+    $('textarea').bidi();
 
     $('#send_suggestion_'+{{ source_entity.id }}).click(function(){
       var suggestion_string = $('#new_suggestion_'+{{ source_entity.id }}).val();

transifex/static/css/base.css

@@ -429,6 +429,9 @@ input, textarea {
 
 input:focus, textarea:focus { border: 1px solid #818181; }
 
+/* support RTL BIDI in textarea */
+textarea.rtl { unicode-bidi: embed; direction: rtl; }
+
 /*Overriden form elements-----------------------------------------------------*/
 .tx-form select{margin: 10px 0;cursor: pointer;}
 .tx-form .chzn-container{width:250px !important;margin: 0.3em 0;}

transifex/static/js/tx.jquery.bidi.js

@@ -0,0 +1,51 @@
+/* Regular expression to identify RTL chars */
+UNICODE_RTL = /[\u0590-\u05FF\u0600-\u06FF\u0750-\u077F\uFB50-\uFDFF\uFE70-\uFEFF\u200F]/;
+
+(function($){
+    /* Align textareas properly when loaded.
+     * Also detect content change in textarea
+     * on 'keyup' event and align textarea
+     * accordingly.
+     * Usage:
+     *      $('textarea').bidi();
+     *  or
+     *      $('textarea').bidi({'css_class': 'foo'});
+     */
+    $.fn.bidi = function(options) {
+        var settings = $.extend({
+            'css_class': 'rtl',
+            'parent_css_class': 'rtl_wrapper',
+        }, options);
+        var css_class = settings.css_class;
+        var parent_css_class = settings.parent_css_class;
+        this.each(function() {
+            var textarea = $(this);
+            var text = textarea.val();
+            if (text) {
+                if (UNICODE_RTL.test(text)) {
+                    textarea.addClass(css_class);
+                    textarea.parent().addClass(parent_css_class);
+                }
+                else{
+                    textarea.removeClass(css_class);
+                    textarea.parent().removeClass(parent_css_class);
+                }
+            }
+            textarea.bind('keyup', function(e){
+                /* Function to check for RTL content in textarea on some event
+                 * and change the orientation of the textarea accordingly
+                 */
+                var textarea = $(this);
+                var text = textarea.val();
+                if (text && UNICODE_RTL.test(text)){
+                  textarea.addClass(css_class);
+                  textarea.parent().addClass(parent_css_class);
+                }
+                else{
+                  textarea.removeClass(css_class);
+                  textarea.parent().removeClass(parent_css_class);
+                }
+            });
+        });
+    };
+})(jQuery);