gridstack rtl mode

[BrkCoder]

Subject of the issue

When moving to rtl mode, the layout doesn't organize in rtl direction rather in ltr direction although I have set the flag of rtl options to true.

Your environment

version of gridstack is ????

Steps to reproduce

in-order to reproduce the problem all we need is the configure the following options for gridstack:

options = {
  cellHeight: 100,
  verticalMargin: 10,
  draggable: {
    handle: '.header-drag',
  },
  rtl: true
}

Expected behaviour

Expected behavior widgets start adding from right to left.

Actual behaviour

Actual behavior widgets start adding from left to right.

[mrmowji]

Unfortunately that's not the only behavior. Re-sizable handlers should be on the left side of grid-stack-item.

[radiolips]

Sounds like #820 might be this same issue? This might be tricky, but it's a reasonable request.

[sinap-se]

Rough PoC:

GridStackEngine.prototype.addNode = function(node, triggerAddEvent) {
...

if (this.opts.rtl) {
        for (var i = 0;; ++i) {
          var x = this.column - (i % this.column) - node.width;
          var y = Math.floor(i / this.column);
          if (x < 0) {
            continue;
          }
          if (!this.nodes.find(Utils._isAddNodeIntercepted, {x: x, y: y, node: node})) {
            node.x = x;
            node.y = y;
            delete node.autoPosition; // found our slot
            break;
          }
        }
      } else {
        for (var i = 0;; ++i) {
          var x = i % this.column;
          var y = Math.floor(i / this.column);
          if (x + node.width > this.column) {
            continue;
          }
          if (!this.nodes.find(Utils._isAddNodeIntercepted, {x: x, y: y, node: node})) {
            node.x = x;
            node.y = y;
            delete node.autoPosition; // found our slot
            break;
          }
        }
...
}

Resize handle is still on the wrong side.

[adumesny]

@sinap-se do you mind making a review fix in the latest 3.0 code for this ? (typescript now) I would love to get this in an official build. We can update the rtl demo as well as I have not spent time on this.

I can take care of the default resize handle side.

Update: quick look at your code change, I would change GridStackEngine constructor to take a GridStackEngineOptions that would optionally be all current params + rtf flag as the current list doesn't scale up. Should have cleaned that up in 2.0

[adumesny]

actually wondering if this could all be done in CSS instead as column 0 would be right most in rtl mode, and all position is done in CSS, rather than change code... but maybe not as width would need to be subtracted from position. Would be interesting to see what browser support it (ideally coordinate and width would be flipped and not require code change).

[Vishnupriyaakinapelli]

Hi,

We are also looking for a solution to support rtl for our application that is using GridStack.js with react framework. If anyone have tried it, please share an example.

Thanks

[adumesny]

@Vishnupriyaakinapelli this is a big feature request as there is some RTL support in the code, yet the code lays items from the left side... can be done with the right donation.