rtl support

Author: troolee

README.md

@@ -439,6 +439,7 @@ Changes
 - add options `disableDrag` and `disableResize`.
 - fix `batchUpdate`/`commit` (Thank to @radiolips)
 - remove dependency from FontAwesome
+- RTL support
 
 #### v0.2.4 (2016-02-15)
 

doc/README.md

@@ -72,6 +72,7 @@ gridstack.js API
 - `placeholderClass` - class for placeholder (default: `'grid-stack-placeholder'`)
 - `placeholderText` - placeholder default content (default: `''`)
 - `resizable` - allows to override jQuery UI resizable options. (default: `{autoHide: true, handles: 'se'}`)
+- `rtl` - if `true` turns grid to RTL. Possible values `true`, `false`, `'auto'` (default `'auto'`) See [example](http://troolee.github.io/gridstack.js/demo/rtl.html)
 - `staticGrid` - makes grid static (default `false`). If true widgets are not movable/resizable. You don't even need jQueryUI draggable/resizable.  A CSS class `grid-stack-static` is also added to the container.
 - `verticalMargin` - vertical gap size (default: `20`). Can be:
  - an integer (px)

src/gridstack.js

@@ -528,8 +528,18 @@
                 appendTo: 'body'
             }),
             disableDrag: opts.disableDrag || false,
-            disableResize: opts.disableResize || false
+            disableResize: opts.disableResize || false,
+            rtl: 'auto'
         });
+
+        if (this.opts.rtl === 'auto') {
+            this.opts.rtl = this.container.css('direction') === 'rtl';
+        }
+
+        if (this.opts.rtl) {
+            this.container.addClass('grid-stack-rtl');
+        }
+
         this.opts.isNested = isNested;
 
         this.cellHeight(this.opts.cellHeight, true);

src/gridstack.scss

@@ -16,6 +16,14 @@ $animation_speed: .3s !default;
 .grid-stack {
     position: relative;
 
+    &.grid-stack-rtl {
+        direction: ltr;
+
+        > .grid-stack-item {
+            direction: rtl;
+        }
+    }
+
     .grid-stack-placeholder > .placeholder-content {
         border: 1px dashed lightgray;
         margin: 0;