Rework bidi file structure

Closes #1026,#983,#982,#978

PR #1026 contains the full history of the changes made herein.
Due to the volume of commits with no meaningful comment, they
have been squashed down to this one.

Adding bidi Files

Tuning code style

Adding rest of bidi files and its dependencies

Tuning code style

editing numeric shaping value

Tuning Code style

adding bidi support

Adding Bidi Support for the rest of files

Adding Bidi support

Editing Bidi menu

adding mirroring enablement

handeling code style

Addinng Bidi Support

Adding Bidi Support

Adding locale settings to national calendar support

Adding Numeric Shaping Support

scss files after adding rtl direction part 1

adding rtl direction at scss files part2

adding right directionality at comman typeInput

correcting some comments

editing spaces

applying code style

editing code style

editing code style

editing code style

editing code style

adding right directionality

adding right directionality

adding style in case of right directionality

adding style in case of right directionality

adding style in case of right directionality

create a global variable for ui direction to call it once need

Update main.js

Update typedInput.js

Update 10-switch.html

manage palette mirroring

adding RTL directionality to Tabs and Manage palette

Style Editing

Adding mirroring to subflow workspace

handle mirroring defects at manage palette

Handle Mirroring defects at sidebar seperator

Numeric Shaping Updates

Editing code style

Handling mirroring defects

Handling mirroring defects

Fixing mirroring defects

editing code style

fixing mirroring defects at deploy dialog

editing code style

Updating Bidi Support

handling some reviewing comments

handling chicks

Update base-text-dir.js

Update bidi-util.js

Update bidi-util.js

Handling reviewing comment

Fixing Popover mirroring defect

Handling namespace structure for bidi features

reflecting new namespace structure for bidi features at editorfiles

Handling comments that related to css

moving bidi.js under js/bidi folder

nodes/core/core/25-catch.html

@@ -27,7 +27,7 @@
             <div style="box-sizing: border-box; line-height: 20px; font-size: 0.8em; border-bottom: 1px solid #ddd; height: 20px;">
               <input type="checkbox" data-i18n="[title]catch.label.selectAll" id="node-input-target-node-checkbox-all" style="width: 30px; margin: 0 2px 1px 2px;">
               <div style="display: inline-block;"><a id="node-input-target-sort-label" href="#" data-i18n="[title]catch.label.sortByLabel"><span data-i18n="catch.label.node"></span> <i class="node-input-catch-sort-label-a fa fa-caret-down"></i><i class="node-input-catch-sort-label-d fa fa-caret-up"></i></a></div>
-              <div style="position: absolute; right: 10px; width: 50px; display: inline-block; text-align: right;"><a id="node-input-target-sort-type" href="#" data-i18n="[title]catch.label.sortByType"><i class="node-input-catch-sort-sublabel-a fa fa-caret-down"></i><i class="node-input-catch-sort-sublabel-d fa fa-caret-up"></i> <span data-i18n="catch.label.type"></span></a></div>
+              <div id="node-input-catch-target-sort-type"><a id="node-input-target-sort-type" href="#" data-i18n="[title]catch.label.sortByType"><i class="node-input-catch-sort-sublabel-a fa fa-caret-down"></i><i class="node-input-catch-sort-sublabel-d fa fa-caret-up"></i> <span data-i18n="catch.label.type"></span></a></div>
             </div>
             <div style="background: #fbfbfb; box-sizing: border-box; position:absolute; top:20px;bottom:0;left:0px;right:0px; overflow-y: scroll; overflow-x: hidden;">
                 <ul id="node-input-catch-target-container" style=" list-style-type:none; margin: 0;"></ul>
@@ -85,6 +85,17 @@
 #node-input-catch-target-container li:hover .node-input-target-node-sublabel {
     background: #f0f0f0;
 }
+#node-input-catch-target-sort-type {
+    position: absolute;
+    right: 10px; 
+    width: 50px; 
+    display: inline-block; 
+    text-align: right;
+}
+[dir="rtl"] #node-input-catch-target-sort-type {
+    right: auto;
+    left: 0px;
+}
 .node-input-target-node-sublabel {
     position:absolute;
     right: 0px;
@@ -93,6 +104,10 @@
     font-size: 0.8em;
     background: #fbfbfb;
 }
+[dir="rtl"] .node-input-target-node-sublabel {
+	right: auto;
+	left: 0;
+}
 </style>
 <script type="text/javascript">
     RED.nodes.registerType('catch',{

nodes/core/core/25-status.html

@@ -27,7 +27,7 @@
             <div style="box-sizing: border-box; line-height: 20px; font-size: 0.8em; border-bottom: 1px solid #ddd; height: 20px;">
               <input type="checkbox" data-i18n="[title]status.label.selectAll" id="node-input-target-node-checkbox-all" style="width: 30px; margin: 0 2px 1px 2px;">
               <div style="display: inline-block;"><a id="node-input-target-sort-label" href="#" data-i18n="[title]status.label.sortByLabel"><span data-i18n="status.label.node"></span> <i class="node-input-status-sort-label-a fa fa-caret-down"></i><i class="node-input-status-sort-label-d fa fa-caret-up"></i></a></div>
-              <div style="position: absolute; right: 10px; width: 50px; display: inline-block; text-align: right;"><a id="node-input-target-sort-type" href="#" data-i18n="[title]status.label.sortByType"><i class="node-input-status-sort-sublabel-a fa fa-caret-down"></i><i class="node-input-status-sort-sublabel-d fa fa-caret-up"></i> <span data-i18n="status.label.type"></span></a></div>
+              <div id="node-input-status-target-sort-type"><a id="node-input-target-sort-type" href="#" data-i18n="[title]status.label.sortByType"><i class="node-input-status-sort-sublabel-a fa fa-caret-down"></i><i class="node-input-status-sort-sublabel-d fa fa-caret-up"></i> <span data-i18n="status.label.type"></span></a></div>
             </div>
             <div style="background: #fbfbfb; box-sizing: border-box; position:absolute; top:20px;bottom:0;left:0px;right:0px; overflow-y: scroll; overflow-x: hidden;">
                 <ul id="node-input-status-target-container" style=" list-style-type:none; margin: 0;"></ul>
@@ -76,6 +76,17 @@
 #node-input-status-target-container li:hover .node-input-target-node-sublabel {
     background: #f0f0f0;
 }
+#node-input-status-target-sort-type {
+    position: absolute;
+    right: 10px;
+    width: 50px;
+    display: inline-block;
+    text-align: right;"
+}
+[dir="rtl"] #node-input-status-target-sort-type {
+    right: auto;
+    left: 0;
+}
 .node-input-target-node-sublabel {
     position:absolute;
     right: 0px;

nodes/core/core/58-debug.html

@@ -119,7 +119,7 @@
 
             function getTimestamp() {
                 var d = new Date();
-                return d.toLocaleString();
+                return RED.bidi.applyBidiSupport(d,RED.bidi.flags.CALENDAR);
             }
 
             var sbc = document.getElementById("debug-content");
@@ -198,10 +198,11 @@
                 } else {
                     msg.innerHTML += '<span class="debug-message-topic">'+
                                     (o.topic?topic+' : ':'')+
-                                    (o.property?'msg.'+property:'msg')+" : "+format+
+                                    (o.property?'msg.'+property:'msg')+" : "+RED.bidi.applyBidiSupport(format,RED.bidi.flags.NS)+
 
                                     '</span>';
                 }
+                payload = RED.bidi.applyBidiSupport(payload,RED.bidi.flags.NS);
                 msg.innerHTML += '<span class="debug-message-payload">'+ payload+ '</span>';
                 var atBottom = (sbc.scrollHeight-messages.height()-sbc.scrollTop) < 5;
                 messageCount++;

nodes/core/core/60-link.html

@@ -70,6 +70,25 @@
 #node-input-link-container li:hover .node-input-target-node-sublabel {
     background: #f0f0f0;
 }
+#node-input-link-sort-type-div {
+    position: absolute;
+    right: 10px;
+    width: 50px;
+    display: inline-block;
+    text-align: right;"
+}
+[dir="rtl"] #node-input-link-sort-type-div {
+    right: auto;
+    left: 0;
+}
+#node-input-link-sort-label-div {
+    display: inline-block;
+    margin-left: 5px;
+}
+[dir="rtl"] #node-input-link-sort-label-div {
+	margin-left: 0;
+	margin-right: 5px;
+}
 .node-input-link-node-sublabel {
     position:absolute;
     right: 0px;
@@ -131,8 +150,8 @@
 
         $('<div id="node-input-link-container-div" style="min-height: 100px;position: relative;   box-sizing: border-box; border-radius: 2px; height: 180px;  border: 1px solid #ccc;overflow:hidden; ">'+
             '    <div style="box-sizing: border-box; line-height: 20px; font-size: 0.8em; border-bottom: 1px solid #ddd; height: 20px;">'+
-            '        <div style="display: inline-block;margin-left: 5px;"><a id="node-input-link-sort-label" href="#" data-i18n="[title]link.label.sortByLabel"><span data-i18n="link.label.node">name</span> <i class="node-input-link-sort-label-a fa fa-caret-down"></i><i class="node-input-link-sort-label-d fa fa-caret-up"></i></a></div>'+
-            '        <div style="position: absolute; right: 10px; width: 50px; display: inline-block; text-align: right;"><a id="node-input-link-sort-type" href="#" data-i18n="[title]link.label.sortByFlow"><i class="node-input-link-sort-sublabel-a fa fa-caret-down"></i><i class="node-input-link-sort-sublabel-d fa fa-caret-up"></i> <span data-i18n="link.label.type">flow</span></a></div>'+
+            '        <div id="node-input-link-sort-label-div"><a id="node-input-link-sort-label" href="#" data-i18n="[title]link.label.sortByLabel"><span data-i18n="link.label.node">name</span> <i class="node-input-link-sort-label-a fa fa-caret-down"></i><i class="node-input-link-sort-label-d fa fa-caret-up"></i></a></div>'+
+            '        <div id="node-input-link-sort-type-div"><a id="node-input-link-sort-type" href="#" data-i18n="[title]link.label.sortByFlow"><i class="node-input-link-sort-sublabel-a fa fa-caret-down"></i><i class="node-input-link-sort-sublabel-d fa fa-caret-up"></i> <span data-i18n="link.label.type">flow</span></a></div>'+
             '    </div>'+
             '    <div style="background: #fbfbfb; box-sizing: border-box; position:absolute; top:20px;bottom:0;left:0px;right:0px; overflow-y: scroll; overflow-x: hidden;">'+
             '        <ul id="node-input-link-container" style=" list-style-type:none; margin: 0;"></ul>'+

nodes/core/core/80-template.html

@@ -27,7 +27,7 @@
     <div class="form-row" style="position: relative; margin-bottom: 0px;">
         <label for="node-input-template"><i class="fa fa-file-code-o"></i> <span data-i18n="template.label.template"></span></label>
         <input type="hidden" id="node-input-template" autofocus="autofocus">
-        <div style="position: absolute; right:0;display:inline-block; text-align: right; font-size: 0.8em;">
+        <div class="template-div-format">
             <span data-i18n="template.label.format"></span>:
             <select id="node-input-format" style="width:110px; font-size: 10px !important;  height: 24px; padding:0;">
                 <option value="handlebars">mustache</option>
@@ -141,3 +141,18 @@
         }
     });
 </script>
+
+<style>
+.template-div-format {
+    position: absolute;
+    right:0;
+    display:inline-block;
+    text-align: right;
+    font-size: 0.8em;
+}
+
+[dir="rtl"] .template-div-format {
+    right: auto;
+    left: 0px;
+}
+</style>

nodes/core/core/89-delay.html

@@ -50,7 +50,7 @@
           <option value="day" data-i18n="delay.label.units.day.singular"></option>
         </select>
         <br/>
-        <div id="node-input-dr"><input style="margin: 20px 0 20px 100px; width: 30px;" type="checkbox" id="node-input-drop"><label style="width: 250px;" for="node-input-drop"><span data-i18n="delay.dropmsg"></span></label></div>
+        <div id="node-input-dr"><input type="checkbox" id="node-input-drop"><label style="width: 250px;" for="node-input-drop"><span data-i18n="delay.dropmsg"></span></label></div>
     </div>
 
 
@@ -241,3 +241,12 @@
         }
     });
 </script>
+<style>
+#node-input-drop {
+    margin: 20px 0 20px 100px;
+    width: 30px;"
+}
+[dir="rtl"] #node-input-drop {
+    margin: 20px 100px 20px 0;
+}
+</style>

nodes/core/core/89-trigger.html

@@ -48,7 +48,7 @@
     </div>
     <div class="form-row">
         <label data-i18n="trigger.label.reset" style="width:auto"></label>
-        <div style="display:inline-block; width:70%;vertical-align:top">
+        <div class="trigger-reset-options-div" >
         <ul>
             <li data-i18n="trigger.label.resetMessage"></li>
             <li><span data-i18n="trigger.label.resetPayload"></span> <input type="text" id="node-input-reset" style="width:150px" data-i18n="[placeholder]trigger.label.resetprompt"></li>
@@ -171,3 +171,13 @@
         }
     });
 </script>
+<style>
+.trigger-reset-options-div {
+    display:inline-block;
+    width:70%;
+    vertical-align:top;
+}
+[dir="rtl"] .trigger-reset-options-div {
+    padding-right: 13px;
+}
+</style>

nodes/core/io/10-mqtt.html

@@ -148,7 +148,7 @@
             <div class="form-row node-input-broker">
                 <label for="node-config-input-broker"><i class="fa fa-globe"></i> <span data-i18n="mqtt.label.broker"></span></label>
                 <input class="input-append-left" type="text" id="node-config-input-broker" placeholder="e.g. localhost" style="width: 40%;" >
-                <label for="node-config-input-port" style="margin-left: 10px; width: 35px; "> <span data-i18n="mqtt.label.port"></span></label>
+                <label for="node-config-input-port" id="node-config-label-port"> <span data-i18n="mqtt.label.port"></span></label>
                 <input type="text" id="node-config-input-port" data-i18n="[placeholder]mqtt.label.port" style="width:45px">
             </div>
             <div class="form-row">
@@ -165,7 +165,7 @@
             <div class="form-row">
                 <label for="node-config-input-keepalive" style="width: auto"><i class="fa fa-clock-o"></i> <span data-i18n="mqtt.label.keepalive"></span></label>
                 <input type="text" id="node-config-input-keepalive" style="width: 50px">
-                <input type="checkbox" id="node-config-input-cleansession" style="margin-left: 30px; height: 1em;display: inline-block; width: auto; vertical-align: middle;">
+                <input type="checkbox" id="node-config-input-cleansession">
                 <label for="node-config-input-cleansession" style="width: auto;" data-i18n="mqtt.label.cleansession"></label>
             </div>
             <div class="form-row">
@@ -357,3 +357,25 @@
         }
     });
 </script>
+
+<style>
+#node-config-label-port {
+    margin-left: 10px;
+    width: 35px;
+}
+[dir="rtl"] #node-config-label-port{
+    margin-left: 0;
+    margin-right: 10px;
+}
+#node-config-input-cleansession {
+    margin-left: 30px;
+    height: 1em;
+    display: inline-block;
+    width: auto;
+    vertical-align: middle;
+}
+[dir="rtl"] #node-config-input-cleansession {
+    margin-left: 0px;
+    margin-right: 30px;
+}
+</style>

nodes/core/logic/10-switch.html

@@ -130,7 +130,8 @@
                     var btwnValueField = $('<input/>',{class:"node-input-rule-btwn-value",type:"text",style:"margin-left: 5px;"}).appendTo(row).typedInput({default:'num',types:['msg','flow','global','str','num',previousValueType]});
                     var btwnAndLabel = $('<span/>',{class:"node-input-rule-btwn-label"}).text(" "+andLabel+" ").appendTo(row3);
                     var btwnValue2Field = $('<input/>',{class:"node-input-rule-btwn-value2",type:"text",style:"margin-left:2px;"}).appendTo(row3).typedInput({default:'num',types:['msg','flow','global','str','num',previousValueType]});
-                    var finalspan = $('<span/>',{style:"float: right;margin-top: 6px;"}).appendTo(row);
+                    // reverse float property in case of right directionality
+                    var finalspan = $('<span/>',{style:"float: "+RED.bidi.componentPos.right+";margin-top: 6px;"}).appendTo(row);
                     finalspan.append(' &#8594; <span class="node-input-rule-index">'+(i+1)+'</span> ');
                     var caseSensitive = $('<input/>',{id:"node-input-rule-case-"+i,class:"node-input-rule-case",type:"checkbox",style:"width:auto;vertical-align:top"}).appendTo(row2);
                     $('<label/>',{for:"node-input-rule-case-"+i,style:"margin-left: 3px;"}).text(caseLabel).appendTo(row2);