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

[PEM--]

For the direction attribute, we have already set up something: 52e2b5f. This should work out of the box.

[mcbain]

@pem my understanding the sticky data model was

 [item, item, header, item, item, item, header]

So, the not every item is a header, nor is the header simply a "marked as header" item with same content.

[PEM--]

pullToRefreshHeader and pullToRefreshFooter are different beast. They had to known at instantiation of the FlexScrollView. I would place them directly as specific attributes to the FlexScrollView. These attributes would lead to Template:

+FlexScrollView id='fxscrollv' pullToRefreshHeader=tplRefreshHeader pullToRefreshFooter=tplRefreshFooter
  ...

template(name='tplRefreshHeader')
  +View
    ...

template(name='tplRefreshFooter')
  +Surface
    ...

[PEM--]

Your understanding is 100% right. I was looking for a way to 'tag' a content as sticky header or footer.

[mcbain]

What is +tplRefreshHeader ?

Is it a template?

[PEM--]

Your proposal is better than mine for the sticky headers / footers. No way to do better.

Oops, I was thinking of: template(name='tplRefreshHeader')...

I'm removing my old comment for sticky headers / footers and cleaning the tplRefresh...

[PEM--]

How do you see the injection of the .isHeaderand .isFooter? When the xyzView is instantiated, you can't set a member on the object.

[mcbain]

Maybe its possible to change the code of FSV (FlexScrollView) so the header/footer detection can be plugged in.

[IjzerenHein]

Hey guys, I wish I understood more about meteor so I could help you out :)

Regarding pullToRefreshHeader and pullToRefreshFooter, you don't necessarily have to specify them in the constructor. They can also be set (or removed) later on using the setOptions function:

scrollView.setOptions({
  pullToRefreshHeader: myrenderable
});

[PEM--]

Thanks for the insights. It will be even easier and we can achieve reactivity on it. Nice.

We have a dilemma on how to provide sticky headers / footers. I can get a way to provide specific components (Surface or View) without asking you modification on your code.

[PEM--]

@IjzerenHein He he, by the way, I wish I know Meteor more, too 😉

@mcbain What do you think of using a callback on the onViewReady of the FlexScrollView? This callback could then parse its children as they are rendered and set the isHeader or isFooter on the objects instantiated by famo.us.

[gadicc]

Yay! What an exciting issue :)

Sorry, I won't be able to spend too much time on this today and I haven't read everything from the Plugins issue yet. But the gifs and demos are bloody impressive. Seems like this is the most developed component out there so far!

I don't think the sticky headers are a problem from our side:

var scrollView = new FlexScrollView({
    layoutOptions: {
        isHeaderCallback: function(renderNode) {
            return renderNode.isHeader;
        }
    }

don't forget that renderNode here is our fview. So we could:

FView.registerView('FlexScrollView', FlexScrollView, {
  add: function(child_fview, child_options) {
    child_fview.isHeader = child_options.isHeader;
    this.view.add(child_fview);
  }
});

and then, we don't even need the famousIf:

+FlexScrollView
  +famousEach items
    +Surface isHeader=isHeader

I'm more worried about how to provide items. We'll have to fetch all the items in advance and insert the headers in the correct places. This isn't as nice as working with a reactive cursor, but I don't see anyway around it. Blaze should, I think, not cause unnecessary rendering, but it will still be a bit slower.

Template.blah.items = function() {
  var out = [];
  var lastDate;
  var items = Items.find().fetch();
  _.each(items, function(item) {
    if (lastDate != item.date !=) {
      out.push({text: item.date, isHeader: true});
      lastDate = item.date;
    }
    out.push({text: item.text});
  });
  return out;
}

all untested, of course.

@IjzerenHein, I feel bad making requests for what is already so awesome, but is there any chance to support reordering of items? Say on a GridView, if I want to move pos 3 -> 5, it will make and close the gaps and translate the item in question, with animations? :)

[gadicc]

@IjzerenHein, I think also, once we get this done and you see how easy to it is to use via Meteor, you might be motivated to learn it :) @PEM-- I guess we need a fview-lab page for migrating from vanilla famo.us to Meteor :> Showing how to use Famous components in markup is fun and easy, but we'll also need a gradual introduction to core Meteor concepts like reactivity.

[PEM--]

Bloody simple! Brillant:

FView.registerView('FlexScrollView', FlexScrollView, {
  add: function(child_fview, child_options) {
    child_fview.isHeader = child_options.isHeader;
    this.view.add(child_fview);
  }
});

I think we stil need the famousIf for allowing different famo.us component to be inserted depending on wether it's a sticky header/footer or a basic content.

We have to come up with a name for the fview-lab. Famo.us university is already trademarked 😄

[IjzerenHein]

@gaddic, It's okay to make requests, just let me know :)
When you enable flow mode on the FlexScrollView, it will automatically do all the animations for you. It doesn't matter if you insert, remove or swap anything, it will magically animate all the renderables to their new position.
Currently, swapping isn't entirely supported. It can sort of by done by accessing the underlying viewSequence (which supports the .swap function), but this cumbersome and tricky. I think the swap function would make a nice addition, I will add it and let you know.

[gadicc]

Oh wow, amazingly, I really don't know famo.us enough... didn't realize there was a swap() method in ViewSequence :) Note, it's not always a swap though... an item could be moved to the end of a sequence.

My question as a famo.us novice, using viewSequence, is it still possible to animate a change of order? For insert and removal it's easy, because when we create or destroy we can do the appropriate transformations. But for a change of order, I don't think there's any way to understand this from viewSequence? But yeah, if we're wrapping it, the flow is something like, simultaneously:

1. insert shrinking space at the origin point
2. insert growing space at destination point
3. take renderable out of the sequence

then transition the renderable, and afterwards, delete the two new spaces and reinsert into the sequence.

hope that made sense :> think, visualization of a sorting algorithm, or switching a sort method (alphabetical vs date), or just having a single existing item change value in a sorted list.

anyways, glad you're open to requests, I really think your work is awesome and it's very exciting getting it into famous-views :) the community here is really looking for easy to use drop-in components, and I think we're succeeding to fill that gap (slowly :)).

[gadicc]

@PEM-- , good point, yeah... if you want a different kind of renderable for header / regular, you'll need the if. but at least we solved the other problem :)

i quite like "lab" :) we could call it Famous Views University too, I don't think it's bad to copy when we are doing the same thing. only, we're not. they just have lessons. we have an interactive space to play around and experiment (i.e a lab), and then share, fork, embed, etc. is there a better word for a place to do experiments? or is the word experiments not good enough?

[PEM--]

As long as no developer will be harmed during the course of the experiments in the lab, I'm quite OK 😄

[gadicc]

i think now we know what the front page jumbrotron will look like :> developer in a lab coat, the famous meteor crashing into his lab, and code flying everywhere :)

[IjzerenHein]

I've added the .swap function, here is it in action:

Let me know if you have more requests, I'll try to combine them in one release.

[IjzerenHein]

@gadicc, @pem, so if I want to learn meteor, what would be the best online resources to get me started? :)

[PEM--]

Did I say something about jaw breaking stuff? Congrats again on this incredible new piece of software 👏

The official doc has a very nice tutorial and the API are pretty well documented:

• Meteor official tutorial
• Meteor API

After that there's a nice book that you can buy or read online, the translation are free:

• Discover Meteor

[kevohagan]

also a very good read is : http://javascriptissexy.com/learn-meteor-js-properly/ 👍

[gadicc]

@IjzerenHein. Super fast work! Love the gifs as always, and much appreciated of course!

Ok, so, I'll see your same-day swap() function and raise you a same-day Intro to Meteor tutorial. Well, the start of one, anyway :)

https://fview-lab.meteor.com/pads/qXd9Zm6bPm8NiuZeX

[Lauricio]

If you prefer video you can try EventedMind where Chris Mather does a great job explaining meteor core principles. You can check out classes: "Meteor Reactivity with Deps - 33min", "Livedata - 3hr 19min" and "Shark UI Preview - 2hr 31min" (Shark was code name for Blaze rendering engine while it was still in preview stage, this class is a bit outdated, but still has useful information about blaze and spacebars - meteor's templating engine).
Its not free though.

[mcbain]

To be able to start playing with the flex-scrollview i created a meteor package which exports all flex-classes as global symbols in ijzerenhein.* and using the global famous.* classes - see https://atmospherejs.com/mjn/global-flex-scrollview....

[IjzerenHein]

Gents, I've released v0.1.4 of famous-flex.
It contains several improvements, amongst which new '.swap' and '.ensureVisible' functions and 'scroll' and 'pagechange' events.
https://github.com/IjzerenHein/famous-flex/releases

As for new years resolutions, mine is to learn and get started with Meteor :)

Happy new year and let's make 2015 count! :)

[trusktr]

This is awesome! Can wait to see this with the new ScrollView when it finally comes out.

[IjzerenHein]

Awesome :)))

[PEM--]

Starred ⭐

[Lauricio]

👍

[trusktr]

🌟

[IjzerenHein]

Awesome work, love how all the options can be configured on one line!

👍 and starred!

[vladpazych]

Cool! It's awesome!

[gadicc]

Thanks everyone!

@IjzerenHein, thanks... that's actually a mistake though hehe... you can still currently pass all those options in one line if you pass layoutOptions a quoted, JSON-encoded string. It wouldn't actually be too hard though to tweak the code to accept them directly, but I think maybe the separation is better. I'll think about it. Generally it looks like this:

  +ContainerSurface perspective=500 overflow="hidden"
    +FlexScrollView layout="WheelLayout" direction="Y" layoutOptions=layoutOptions
      +famousEach surfaces
        +Surface style=style
          | #{_id}

where layoutOptions is a reactive helper (more info in the README, but it's very meteory). In general I think you're going to love how all the reactivity works when you get into Meteor... it's a really good fit for complex layouts that depend on multiple factors.

[gadicc]

v0.0.2 is out with famono support :)

[IjzerenHein]

Awesome, thanks for the explanation @gadicc.

Be careful with overflow: hidden though. I've ran into a lot of problems will that lately. Everything from performance degradation, z-indexes not being respected anymore, and drawing issues on Android...

[gadicc]

@IjzerenHein, bummer :( It's an officially sanctioned pattern, no? I'll switch to a higher z-Index on the header instead in this case, but a ContainerSurface with overflow:hidden is so useful for things like https://atmospherejs.com/pierreeric/fview-devices, etc. Do you happen to know if Famo.us is working on this and how it will affect mixed mode? Either way thanks for the heads up!

[trusktr]

@gadicc @IjzerenHein Yep, this is a regression in Chrome. I remember this working long ago, specifically nested divs having their own z-indexes inside their parent. They borked it. xD

@gadicc Your FLexScrollView, is it using custom scroll behavior? I noticed it doesn't have the "bounce" effect ScrollViews normally have.

[jordangarside]

@trustkr FlexScrollView doesn't have bounce when you use the mousewheel, try dragging or using touch events

[gadicc]

@trusktr, I'm using this nodeSpring default which can be overridden with an attribute. Yeah, no bounce with mousewheel, but you can get it with a mouse "flick" with the simulated mouseMove stuff (which I enabled by default). It takes some practice though, and you don't get it every time... but if you keep trying you'll definitely see the effect :) And I'm sure it works perfect on an actual touch device. Dragging works fine, it's just the flick that's hard.

[trusktr]

@gadi Oh okay. For me the scrolling stops randomly all of a sudden without slowing down or reaching the end. I'm in Mac OS X using two-finger touch on the touch pad to fling the view (since with native scrolling in Mac OS X is like on touch devices with flinging). Have you experienced this? Maybe some custom work needs to be done specifically for Mac OS X touch pad fling to not treat it like a mousewheel? @jordangarside Your custom scroll areas at https://www.inlet.nu/ are working nicely with the OS X touch pad fling. Did you handle this case specifically for OS X?

[gadicc]

@trusktr, could also be "gaps" in the surfaces not piping events back to the scrollview. this was addressed in the fview-flex demo though; did you have this problem in the demo or in your own code? what about the original famous-flex (upstream) demo? and how does it compare to famo.us' native scrollview?

@jordangarside, nice site :) it's not famo.us though, right? looks like malihu-custom-scrollbar-plugin?

[jordangarside]

@gadicc Thanks! The site is just plain meteor and twitter bootstrap, and you're right, the scroll plugin is Malibu's. I say everything I use on the about page :). I'm working on the mobile app for it now and just using famo.us for everything. I debated using Polymer, but it makes every app look the same and doesn't allow much customization for animations (it's also fairly janky on mobile).

[trusktr]

@gadicc I was trying only the demo at http://fview-flex.meteor.com/. If I scroll slowly, it works just fine, even when the cursor is in the white spaces between the elements. The problem only happens when I try to 'fling' the view by two-finger throw on the Mac's touchpad. I modified the famous-angular scrollview demo, and made every odd item not pipe to the event handler. That behavior feels like what I'm experiencing in the fview-flex demo: http://plnkr.co/edit/COTKOxnMgL0LmawhpnUz?p=preview
Seems like OS X just triggers the mousewheel events in an animated way, and if the pointer happens to be on a non-event-handled Surface when one of the events is triggered, then the scrolling halts.

Idea: If you haven't already, maybe you can put a Surface in the background, behind the scrollview, to catch events that might fall through the items?

[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! 🙇 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!