One Way Data flow & Two Scrollbars

[alexander-alvarez]

I gutted the ember-scrollable class in favor of a more DDAU approach. Allowing me to make the double scroll easily.

This made it easier to set up listeners on the appropriate 'information-hierarchy' level and delegate functionality to different components

new components (ideally would be private):
scroll-content-element -- Handles scroll events within the body of the scroll content, properly sets scrollTop / scrollLeft property depending on the configuration and the given scrollTo.
ember-scrollbar -- Handles displaying and moving the handle within the confines of it's template, and has callbacks for intending to dragging and jump to particular positions.

TODO

• Extend api to allow for left and right scroll & implement
• Fix Jiterryness
• Lots of documentation
• Tests

Considerations

• I couldn't figure out how to completely eliminate the ember-scrollable class, so there is parent's accessing children's state through jquery.

<!-- singleScroll -->
{{ember-scrollable
  horizontal=true
  scrollTo=0
}}

<!-- double scroll -->
{{ember-scrollable
  horizontal=true
  vertical=true
  scrollToX=0
  scrollToY=0
}}

End goal is something like this (except for ours hides when the user isn't moving the mouse in the scroll area):
http://automattic.github.io/antiscroll/

[taras]

I just wanted to let you know that I started looking at the code and it's looking great so far. I haven't had a chance to pull it down yet and take a deeper look.

[alexander-alvarez]

Thanks @taras . Just got the two scrollbars to show up and trigger appropriate scroll events.
now to debug jittery-ness and iron out the kinks.

`
{{ember-scrollable
horizontal=true
scrollTo=0
}}

`
{{ember-scrollable
double=true
scrollToX=0
scrollToY=0
}}

I decided I liked the first approach. I'm thinking scrollTo would map to the appropriate scrollToX or scrollToY depending on what the value for horizontal is set to, that way there's no need to change any of the implementation on the scroll-content-element.

[alexander-alvarez]

out of curiousity -- you wouldn't happen to know if this file is needed: https://github.com/alphasights/ember-scrollable/blob/master/blueprints/ember-scrollable/index.js

it's the only piece of code I see that references trackpad scroll emulator

[taras]

I'm not sure if it's necessary because it's now added as a dependency. I don't remember, it's been a while. My only concern would be whether it would work in ember-light-table without that code.

…

-- Taras Mankovski

On December 9, 2016 at 9:42:50 AM, Alex Alvarez ***@***.***) wrote: out of curiousity -- you wouldn't happen to know if this file is needed: https://github.com/alphasights/ember-scrollable/blob/master/blueprints/ember-scrollable/index.js it's the only piece of code I see that references trackpad scroll emulator — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#29 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAEjvwUUdXR8YTdcrwkwbUTLJEJmGxsEks5rGNVCgaJpZM4LG6nD> .

[alexander-alvarez]

Planned tests (covered by integration tests of the elements

• Using mousewheel triggers vertical scroll
• Click on the scrollbar when not on handle causes 'jumping' to particular position
• Click and drag on scrollbar space moves the scrollbar (in vertical and horizontal mode). After mouseUp (anywhere) dragging should stop
• Click, move mouse off of scrollbar, and drag moves the scrollbar. After mouseup, dragging should stop.

Double Scrollbar Tests (Acceptance tests)

• Has same functionality as above
• Dragging on vertical, drag on horizontal, then drag on horizontal (vise versa)
• Drag on vertical, jump on horizontal, drag on vertical (vise versa)

[alexander-alvarez]

@taras I was struggling to get these badboys triggering the scroll events synchronously.
the source binding the scroll is as such: this.$().on('scroll', bind(this, this.scrolled));

I tried wrapping these blocks in run, run.next etc, to no avail.

any experience with this?

[offirgolan]

@alexander-alvarez that's fine. I would also add a deprecation in the set of the scrollTo property then. I'd prefer users to not directly set scrollTo and eventually remove the proxy altogether.

[offirgolan]

@alexander-alvarez is this ready to be merged?

[alexander-alvarez]

@offirgolan almost...

• I was going to add the deprecation (which is simple)
• Tests are broken in master Showing that master is broken for 1.13 #33
• Adjust for the zoom programatically (@taras need to understand how I get access to that programatically)
• I need help handling the asynchroneity of the scroll events... see the run.later in tests.

[taras]

Adjust for the zoom programatically (@taras need to understand how I get access to that programatically)

Why do you want to adjust zoom programmatically?

I need help handling the asynchroneity of the scroll events... see the run.later in tests.

We could use ember-lifeline to address this issue and #30 in a more general way. But this will make ember-scrollable require Ember 2.6+. Thoughts?

[alexander-alvarez]

@taras adjust for the zoom programatically. I want a variable instead of / 2

right now we're doing bind , which I guess I can replace the with the code from https://github.com/rwjblue/ember-lifeline#addeventlistener if that's the best practice and will let me replace the arbitrary run.later's with run loops.

I don't think requiring 2.6+ is a little excessive at the moment, no?

[taras]

@taras adjust for the zoom programatically. I want a variable instead of / 2

I'm not sure how you'd handle that. We could remove zoom from the test suite. What do you think?

I don't think requiring 2.6+ is a little excessive at the moment, no?

I'm not sure. I've seen ember-lifeline being used in other addons. I'm not sure how many people are using < Ember 1.13. Those people can just stick to an older version of Ember Scrollable

[alexander-alvarez]

We could remove zoom from the test suite

Any particular reason why it's there? Where is this even done?

oh wait.. I already added ember-lifeline 😂
https://github.com/alphasights/ember-scrollable/pull/29/files#diff-b9cfc7f2cdf78a7f4b91a753d10865a2R39

[taras]

Any particular reason why it's there? Where is this even done?

It's part of the default app blueprint. It's in ember-qunit but it looks like it was removed. We can upgrade to the latest ember-qunit and it'll just resolve itself (i think)

[alexander-alvarez]

@taras no luck
https://github.com/alphasights/ember-scrollable/pull/33/files#diff-b9cfc7f2cdf78a7f4b91a753d10865a2R30

[offirgolan]

@alexander-alvarez can't we just force the zoom to be 1 via css on tests/index.html?

<style>
#ember-testing-contaner {
 zoom: 1 !important;
}
</style>

Note: I'm not sure if the id of the container is correct, just going off the top of my head here.

[alexander-alvarez]

tried write a test helper, that blocks for the scroll events which are asynchronous, but still not passing -- I'm pretty sure it's related to the scroll events triggered by configureInitialScrollPosition and them not getting flushed

[offirgolan]

@alexander-alvarez are these test being run on chrome or phantom?

[alexander-alvarez]

@offirgolan travis it seems they're using chrome (on my local it's with chrome)

[alexander-alvarez]

What needs to be done to finalize this?
Do we or anyone we know how to properly block for the asynchronous scroll events in tests?

Test is failing because of:
#33

[alexander-alvarez]

I updated to follow the LTS releases supported by ember-lifeline: https://github.com/rwjblue/ember-lifeline/blob/master/.travis.yml#L15
added badge to README indicating 2.3+ support, got rid of the ember-hash-helper-polyfill stuff for ember 1.13 support.

[offirgolan]

Looks like test are passing now as well. Awesome work @alexander-alvarez.

cc @taras. Lets get this baby in so we can start figuring out how to integrate this with ELT.

[taras]

Amazing job here guys!!!