meteor-famous-views
meteor-famous-views copied to clipboard
gadicc
FlexScrollView integration
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
For the direction attribute, we have already set up something: https://github.com/gadicc/meteor-famous-views/commit/52e2b5f7e4f55f8b43ec4f5b7af30c141de76d78. This should work out of the box.
@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.
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
...
Your understanding is 100% right. I was looking for a way to 'tag' a content as sticky header or footer.
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...
How do you see the injection of the .isHeaderand .isFooter? When the xyzView is instantiated, you can't set a member on the object.
Maybe its possible to change the code of FSV (FlexScrollView) so the header/footer detection can be plugged in.
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
});
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.
@IjzerenHein He he, by the way, I wish I know Meteor more, too :wink:
@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.
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? :)
@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.
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 :smile:
@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.
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:
- insert shrinking space at the origin point
- insert growing space at destination point
- 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 :)).
@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?
As long as no developer will be harmed during the course of the experiments in the lab, I'm quite OK :smile:
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 :)
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.
@gadicc, @PEM, so if I want to learn meteor, what would be the best online resources to get me started? :)
Did I say something about jaw breaking stuff? Congrats again on this incredible new piece of software :clap:
The official doc has a very nice tutorial and the API are pretty well documented:
After that there's a nice book that you can buy or read online, the translation are free:
also a very good read is : http://javascriptissexy.com/learn-meteor-js-properly/ :+1:
@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
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.
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....
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! :)
This is awesome! Can wait to see this with the new ScrollView when it finally comes out.
Happy new year 2015.
Am Sonntag, 4. Januar 2015 schrieb Pierre-Eric Marchandet :
Happy new year [image: :tada:] [image: :balloon:] [image: :balloon:] It's going to be an awesome year!
— Reply to this email directly or view it on GitHub https://github.com/gadicc/meteor-famous-views/issues/178#issuecomment-68631980 .
Jens Zastrow
Geschäftsführender Gesellschafter / Managing Partner
MJ Networks GmbH Strausberger Str. 44 D-10243 Berlin
Fon +49 30 530 86368 Fax +49 30 530 86370 [email protected] [email protected]
MJ Networks GmbH Geschäftsführer: Maher Chamsi, Jens Zastrow Handelsregister: Amtsgericht Charlottenburg, HRB 117014B