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.

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
     # =============

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>