Add rtl support #366
Add rtl support #366
Conversation
.idea/.gitignore
Outdated
| @@ -0,0 +1,8 @@ | |||
| # Default ignored files | |||
There was a problem hiding this comment.
Make sure .idea/ is ignored properly.
docs/examples/README.md
Outdated
| ```html | ||
| <div id="app"> | ||
| <div> | ||
| <div> | ||
| <ul> | ||
| <li v-for="(item, index) in list" v-scroll-to="'#item' + index ">{{ item }}</li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div class="items" id="items"> | ||
| <div class="item" v-for="(item, index) in list" :id="'item' + index" v-scroll-to="'#item' + index "> | ||
| <h1>{{ item }}</h1> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ``` | ||
|
|
||
| ```js | ||
| Vue.use(VueScrollTo, { | ||
| container: "#items", | ||
| duration: 500, | ||
| easing: "ease", | ||
| offset: 0, | ||
| force: true, | ||
| cancelable: true, | ||
| onStart: false, | ||
| onDone: false, | ||
| onCancel: false, | ||
| x: true, | ||
| y: false, | ||
| rtl: true, | ||
| }) | ||
|
|
||
| new Vue({ | ||
| el: '#app', | ||
| data() { | ||
| return { | ||
| list: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k'] | ||
| } | ||
| }, | ||
| methods: { | ||
| } | ||
| }) | ||
| ``` | ||
|
|
||
| ``` css | ||
| body { | ||
| direction: rtl; | ||
| } | ||
|
|
||
| li { | ||
| display: inline-block; | ||
| margin: 10px: | ||
| cursor: pointer; | ||
| border: 1px solid #ff4500; | ||
| padding: .5rem; | ||
| width:20px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .items { | ||
| margin-right: 10%; | ||
| max-height: 300px; | ||
| max-width: 50%; | ||
| overflow: auto; | ||
| display: flex; | ||
| } | ||
|
|
||
| .item { | ||
| min-height: 100px; | ||
| border: 1px solid #000000; | ||
| margin-left: 5rem; | ||
| padding: 1rem; | ||
| min-width: 150px; | ||
| text-align: center; | ||
| } | ||
| ``` |
There was a problem hiding this comment.
Let's simplify the example code (keep it as is in the jsfiddle).
Perhaps something like
<button v-scroll-to="{
el: '#element',
rtl: true,
container: '#container'
}">
Scroll in a RTL container
</button>| if ( | ||
| container.scrollLeft <= 0 && | ||
| typeof window.scrollPositive === 'undefined' | ||
| ) | ||
| targetX -= container.scrollWidth - container.offsetWidth | ||
| else window.scrollPositive = true |
There was a problem hiding this comment.
Please add braces to the if/else branches.
I couldn't find any references to window.scrollPositive, do we need it here? Isn't just container.scrollLeft <= 0 enough?
There was a problem hiding this comment.
Yes we need it. In some browsers when the direction is rtl, `scrollLeft start with negative number to zero.
We should define scroll start with zero or negative
| if (rtl) { | ||
| let childrens = [].slice.call(container.children) | ||
| let index = Array.prototype.indexOf.call(childrens.reverse(), element) | ||
| element = childrens.reverse()[index] | ||
| } |
There was a problem hiding this comment.
Can you help me understand why this is needed? This seems like a potential performance bottleneck.
Perhaps we can improve this - just need to understand why it's needed!
There was a problem hiding this comment.
If direction reverse we should to scroll element that has reverse index
There was a problem hiding this comment.
How would we handle items that are not the same width?
It solves issue #345
The example in the source would work after PR merged.
For testing purpose see here
Also we should propose to when direction is
rtlin some browser'sscrollLeftstart with zero to positive number and in others start with negative number to zero