search

swiety85 / angular2gridster

Angular implementation of well known Gridster (no jQuery, no external libraries, only Angular and Rx.js).
https://swiety85.github.io/angular2gridster/
MIT License
203 stars 75 forks source link

RTL Support #269

Open MaiGhoneem opened 6 years ago

MaiGhoneem commented 6 years ago

Hello, I need to ask if there is any plan to support rtl or not? and if it is not, can you please help me to guide me how to start implement this part?

swiety85 commented 6 years ago

Hi, please describe how this functionality should work.

sirajc commented 5 years ago

Hi @swiety85, We too are looking for RTL solution in Gridster. It will be somewhat like option originLeft in https://masonry.desandro.com/options.html

In normal layout coordinates start from leftmost as 0,0 while in RTL mode co-ordinates start from right as 0,0

Normal Layout assuming 4 lane

1 2 3 4
5 6 7 8

RTL Layout assuming 4 lane

4 3 2 1
8 7 6 5

Now in two lanes, above layout will become

1 2
3 4
5 6
7 8

In RTL mode it will be

2 1
4 3
6 5
8 7

@swiety85 Let me know if you need more details

RTL layout is needed to support internationalizing in languages like Arabic and Hebrew

pavandixit93 commented 5 years ago

Hi @swiety85, Any update on RTL solution in Gridster??.

C-odes commented 5 years ago

@pavandixit93 Im curious. What does RTL stand for?

sosharma1403 commented 5 years ago

For language like Arabic, Hebrew text direction is from right to left.

If a gridster-item is present on left hand-side in LTR mode(for languages like English) , then when we switch to RTL mode it should move to right hand side of the screen.

C-odes commented 5 years ago

For language like Arabic, Hebrew text direction is from right to left.

If a gridster-item is present on left hand-side in LTR mode(for languages like English) , then when we switch to RTL mode it should move to right hand side of the screen.

Maybe code this yourself meanwhile you wait. For example have you tried adding for example float right instead of float left? This may disturb the way you drag and drop but if it fits your needs then why not.

Another way without float left is to think of a way to invert the x and y values of the items based on a boolean value. So for example you have a button that turns a boolean named rtl between false and true. When clicked and turned to true the values invert. when switched again they switch back.

Just think of how to invert the x and y values. (keep the amount of lanes in mind and also, the amount of lanes and positions in difference device sizes. ) @pavandixit93 @sirajc @MaiGhoneem