FlexScrollView integration

[mcbain]

https://github.com/IjzerenHein/famous-flex/blob/master/tutorials/FlexScrollView.md

Providing a fview plugin for complex views like FlexScrollView should follow a clear concept. IMHO most users would prefer a declarative approach, than programing javascript. So lets collect some ideas here.

Basic options

All direct options for FlexScrollview should be reactivly e.g. by template-helpers

+FlexScrollView flow=templatehelper

Sticky Headers

+FlexScrollView
  +famousEach items
    +famousIf isHeader
      +xyzView target='header'
    +else
      +xyzView

[gadicc]

@trusktr, It's difficult for me to trouble shoot this since I don't have a Mac :( Your modified scrollview does sound like the "crack" issue though, but yeah, actually that is the point of the ContainerSurface... it creates a div in the background and is auto-piped to the FlexScrollView. I can consistently scroll all the way through, unlike your repro - even with spacing of say, 200. I'll be very interested if you find out anything more about this. What about the original flex demo at https://rawgit.com/IjzerenHein/famous-flex-demo/master/dist/index.html ?

[trusktr]

@gadicc Interesting, I don't seem to have the problem with the original flex demo!

[IjzerenHein]

@trusktr @gadicc If you're having scrolling issues, then most of the time this is related to events which have been piped too often. If both the events from the ContainerSurface and the surfaces inside are piped you'll typically see random stops and such.

[gadicc]

Wow, @IjzerenHein, you're totally right! :bow: Thanks!

@trusktr, try the demo site now and if that fixes your issue I'll make a new release. It's definitely a lot easier for me to flick with the mouse now too.

[trusktr]

@gadicc @IjzerenHein I just tried http://fview-flex.meteor.com/, it's still having the same issue but it seems to happen only if I fling it at a fast enough speed, otherwise it comes to a smooth stop at slower initial fling speeds.

[gadicc]

@trusktr, copy that, thanks. so an improvement but not completely solved. and on https://rawgit.com/IjzerenHein/famous-flex-demo/master/dist/index.html fast flicking works?

[trusktr]

@gadicc Yes indeed, fast flicking is working there. I'm curious to know what's the difference!

[trusktr]

In this example I'm experiencing the same behavior.

[gadicc]

Hey, your link is broken... still hoping to track this down when I have a chance.

[gadicc]

@trusktr, sorry, unfortunately i can't test this myself... but just tried something else, could you test http://fview-flex.meteor.com/ again please?

[trusktr]

Oops, fixed the link. It seems worse. I made a video:

https://www.youtube.com/watch?v=QAmSJuMPVpg&feature=youtu.be

[gadicc]

Oh :( Thanks, the video helps to understand a bit better.

So, the other link you gave "Scrollview in HeaderFooterLyaout" is using the native famo.us Scrollview. So maybe it's an Engine issue with Mac OS X. But you said that in the original famous-flex demo you don't notice this.

The fact that my most recent change made the situation worse makes me think that we might still get to fix this, but I'm at a bit of a loss. @IjzerenHein, if you have any more insight that would be greatly appreciated. Are you on a Mac? trusktr's is referring solely to flicking with two fingers on the touchpad on Mac OS.

So basically, as you suggested, not piping the surfaces as well as the container make a big difference. However, from the above feedback, container.pipe(flexscrollview) worked better than what I tried now from famous-flex source:

      flexscrollview.subscribe(container);
      EventHandler.setInputHandler(container, flexscrollview);
      EventHandler.setOutputHandler(container, flexscrollview);      

Beyond that, I guess it could be part of the overhead of famous-views - wrapping stuff in RenderNodes and MeteorFamousViews. But the flexscrollview and container above are the actual pre-wrapped nodes.

[trusktr]

Side topic: I noticed Famo.us guides recommend using two event handlers per view/thing/class/whatever (one for input, one for output). This is an awkward pattern IMO! I'm using only a single handler per view/thing/class/whatever in my stuff and it's working out great!