From d8faaebbc7284dcd807757e92648d699a42f5e15 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Thu, 12 Apr 2018 16:05:00 +0200
Subject: [PATCH] Icon: support rtl {helpers} in icon names

Some arrows have to change their direction in an right-to-left layout. Based on the idea in css that start means left in ltr and right in rtl for now the icon method supports the {start} and {end} helpers that get turned into left and right depending on the directionality.
---
 .../javascripts/app/lib/app_post/utils.coffee     | 15 +++++++++++++++
 .../app/views/generic/datepicker.jst.eco          | 12 ++++++------
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/app/lib/app_post/utils.coffee b/app/assets/javascripts/app/lib/app_post/utils.coffee
index b13c90189..5b78fd667 100644
--- a/app/assets/javascripts/app/lib/app_post/utils.coffee
+++ b/app/assets/javascripts/app/lib/app_post/utils.coffee
@@ -829,6 +829,21 @@ class App.Utils
     num
 
   @icon: (name, className = '') ->
+    # rtl support
+    # ===========
+    #
+    # translates @Icon('arrow-{start}') to @Icon('arrow-left') on ltr and @Icon('arrow-right') on rtl
+    dictionary =
+      ltr:
+        start: 'left'
+        end: 'right'
+      rtl:
+        start: 'right'
+        end: 'left'
+    if name.indexOf('{') > 0 # only run through the dictionary when there is a {helper}
+      for key, value of dictionary[App.i18n.dir()]
+        name = name.replace("{#{key}}", value)
+
     #
     # reverse regex
     # =============
diff --git a/app/assets/javascripts/app/views/generic/datepicker.jst.eco b/app/assets/javascripts/app/views/generic/datepicker.jst.eco
index 0d464a7d6..f088665e8 100644
--- a/app/assets/javascripts/app/views/generic/datepicker.jst.eco
+++ b/app/assets/javascripts/app/views/generic/datepicker.jst.eco
@@ -6,9 +6,9 @@
                     <th colspan="7" class="datepicker-title"></th>
                 </tr>
                 <tr>
-                    <th class="prev"><%- @Icon('arrow-left') %></th>
+                    <th class="prev"><%- @Icon('arrow-{start}') %></th>
                     <th colspan="5" class="datepicker-switch"></th>
-                    <th class="next"><%- @Icon('arrow-right') %></th>
+                    <th class="next"><%- @Icon('arrow-{end}') %></th>
                 </tr>
             </thead>
         <tbody></tbody>
@@ -29,9 +29,9 @@
                   <th colspan="7" class="datepicker-title"></th>
               </tr>
               <tr>
-                  <th class="prev"><%- @Icon('arrow-left') %></th>
+                  <th class="prev"><%- @Icon('arrow-{start}') %></th>
                   <th colspan="5" class="datepicker-switch"></th>
-                  <th class="next"><%- @Icon('arrow-right') %></th>
+                  <th class="next"><%- @Icon('arrow-{end}') %></th>
               </tr>
           </thead>
           <tbody><tr><td colspan="7"></td></tr></tbody>
@@ -52,9 +52,9 @@
                   <th colspan="7" class="datepicker-title"></th>
               </tr>
               <tr>
-                  <th class="prev"><%- @Icon('arrow-left') %></th>
+                  <th class="prev"><%- @Icon('arrow-{start}') %></th>
                   <th colspan="5" class="datepicker-switch"></th>
-                  <th class="next"><%- @Icon('arrow-right') %></th>
+                  <th class="next"><%- @Icon('arrow-{end}') %></th>
               </tr>
           </thead>
           <tbody><tr><td colspan="7"></td></tr></tbody>