rtl ltr is not ok.

[BackuPs]

Hi

The rtl /ltr layout/order is not ok. I had to change this function to make that work right and check if there is a class in the body set to rtl to get the grid in the right order. It starts with the first item on the left, but that should be on the right in rtl mode. So i am reversing xProperty and xResetProperty on RTL language and then it works ok.

i wonder if there is another way to accomplish this,

Please advice.

    proto.layoutPosition = function() {
      var layoutSize = this.layout.size;
      var style = {};
      var isOriginLeft = this.layout._getOption('originLeft');
      var isOriginTop = this.layout._getOption('originTop');

      // x
      var xPadding = isOriginLeft ? 'paddingLeft' : 'paddingRight';

      if( document.body.className.match('rtl') ) {  
        var xProperty = isOriginLeft ? 'right' : 'left';
        var xResetProperty = isOriginLeft ? 'left' : 'right';
      } else {
        var xProperty = isOriginLeft ? 'left' : 'right';
        var xResetProperty = isOriginLeft ? 'right' : 'left';
      }

      var x = this.position.x + layoutSize[ xPadding ];
      // set in percentage or pixels
      style[ xProperty ] = this.getXValue( x );
      // reset other property
      style[ xResetProperty ] = '';

      // y
      var yPadding = isOriginTop ? 'paddingTop' : 'paddingBottom';
      var yProperty = isOriginTop ? 'top' : 'bottom';
      var yResetProperty = isOriginTop ? 'bottom' : 'top';

      var y = this.position.y + layoutSize[ yPadding ];
      // set in percentage or pixels
      style[ yProperty ] = this.getYValue( y );
      // reset other property
      style[ yResetProperty ] = '';

      this.css( style );
      this.emitEvent( 'layout', [ this ] );
    };

rtl mode without FIX

rtl mode with FIX

Ltr (normal) Mode.

[BackuPs]

The animation though is still wrong. So is there another way to get the right order on RTL languages?

[thesublimeobject]

@BackuPs could you provide a reference to the url that you have screenshot above, or provide a link to a codepen?—i'd be happy to help you debug, and i may already know the issue, but it would be helpful to see exactly what you're seeing to be sure.

[BackuPs]

Hi

Which one do you want to see the ordering issue or the animation issue? It requires me to set it up different

[thesublimeobject]

@BackuPs i guess we can tackle whichever one is more important to you first, and then move from there?

The animation though is still wrong. So is there another way to get the right order on RTL languages?

i actually thought this was just referring to the same ordering issue since you didn't mention an animation issue in the original issue. what's happening with the animation?

[BackuPs]

Hi

You can see the issue here...

http://champion.backupsdemo.nl/shortcodes/masonry?d=rtl

On resizing the animation is ltr instead of rtl..

I already fixed the ltr rtl mode layout order. Just not the animating.

Thank you for any help.

Kind regards,