I´m playing with meteor, iron router and famo.us (mjn:famous integration for meteor)and was wondering how is the common way to create full page transitions with famous surfaces without writing the same code again when I add more views. Does someone have an easy to understand code example for me to create simple transitions like fade from View A -> View B?
I also use gadicohen:famous-views.
I´m also confused which famous integration I should use. there is mjn:famous and raix:famono available for meteorJS
RenderController accepts some reactive data. Lets say that we have something
{{#RenderController}}
{{#if somethingTrue}}
{{>template1}}
{{else}}
{{>template2}}
{{/if}}
{{/RenderController}}
So when the somethingTrue changes reactively RenderController re-renders the page. Same thing comes to Iron router. Coz of Iron router {{>yield}} is reactive, pages are reactively changed with animations.
Very un-complete project.. but you can see codes & github
Famome
Related
I have an use case in which I need to have multiple modules loaded in the view at the same time. Thing is, each of those modules might be as simple as a component, or a complex Angular module with a router and everything. I guess you could call it a plugable framework.
The number of modules I have to show or who they are is dynamic (I'm getting them from a server).
My first idea is that it would be good for this case if the feature module's router wouldn't be a singleton with the main one and also if they wouldn't update the url completly.
Each of the feature module should be able to be launched as a stand-alone app if bootstrapped (therefore, I do need it to be able incorporate all Angular 4 features including the router).
I managed to get something working by playing with the router and with named router outlets (secondary routes) but not sure how good that is in the long run.
How should I approach this?
I am in the early stages of attacking a somewhat similar scenario. In my app, the UI is organized in panels that are designed to stand alone on smaller displays, or side by side on larger. I find this approach works well for my routes, as my app is designed to edit a complex, highly hiegraphical document with many inter-related sections. e.g. User follows link on list to open detail, new detail panel appears to right... follows link on detail to related node... etc.
The solution I'm noodling with now is attempting to use an ngrx store that interacts with the router (and router-store) to dynamically create panels based upon router data. Well, technically it does not create the panels, it only serves the data that tells a component what to create and render.
I know my situ is not exactly the same as yours, but perhaps there's something in my approach that may help you find usefull or at least thought provoking.
I'm learning so if this is a silly question feel free to let me know. My question relates to subscription and where you should subscribe. Let me be more specific with an example.
files
template.html
templatePieceOne.html
templatePieceTwo.html
In this example we have a template.html that will render using two separate template pieces. The template pieces might be used else where on the website. Is it better to subscribe at the top level template.html, template.js, or should the template pieces each have their own subscription.
If this doesn't make sense please let me know.
You definitely shouldn't subscribe in every template. Instead, you should decide which templates correspond to an independent part of the application, i.e. a view, modal or widget. Those templates should be responsible for subscribing to, managing and passing down their data.
This way you'll be able to see easily which part of the application is active at any given moment and what it subscribes to.
I recommend the following article on
presentation and container components.
Even if you're using Blaze instead of React the idea is still valid.
in my meteor app I have for every view its own template. I use iron:router to switch between the templates but it looks not that awesome without some transitions like fading or flipping the whole page. So I would like to make some fullpage transitions. Is there a common way to do this without changing too much code for upcoming views?
a simple way to achieve this would be to use the hooks available in iron router, particularly the onBeforeAction where you could apply a transition out to view, or view element, and use the onAfterAction to transition the new view in. You can also apply these either to all routes (I would use this for the transition out), and then apply specific transitions to bring views in.
Check out the Iron Router Guide :
https://github.com/EventedMind/iron-router/blob/devel/Guide.md#hooks
and heres a basic tutorial to get you going.
http://www.manuel-schoebel.com/blog/simple-page-transitions-with-iron-router-hooks
Every tutorial/example i can find for meteor shows a single view application. I would like to build something a little more complex. I'm unclear how to approach multiple views...preferably in a way that's somewhat scalable?
The iron-router package lets you access different views (layouts) by nice, REST-ful human-friendly clean URLs. It supports parameters in the URL, "loading" templates, waiting for subscriptions to finish loading, before and after hooks etc.
At this point you can only create Single Page applications with Meteor. Note that Single Page, doesn't mean you can't have several views - use iron-router for that.
But by design, Meteor serves a big fat unique JavaScript/HTML/CSS application down to the browser, though there's a feature request to allow incremental loading. It is then up to the application (or more precisely, the JavaScript framework), to dynamically render its views in order to display different "pages".
I was wondering the same thing and it took me way too much time getting something started. I finally got a paged app working solidly by using Backbone views and routes, so I created a simple boilerplate project to make setting up an app like this easier in the future.
Live demo here: backbone-boilerplate.meteor.com
Source code here: github.com/justinmc/meteor-backbone-boilerplate
Have you looked at madewith.meteor.com?
A bunch of apps there have multiple views using Backbone also Jonathan Kingston who created britto has started simple meteor framework called Stellar
At this stage of the game not sure if there really are best practices. But these two seem to be the current flow.
You can also make a tabbed interface for multiple views. There is a package project "Smart package for generating a tabbed interface with pushState" github project here: https://github.com/possibilities/meteor-tabs
The best solution right now is using a routing package (router is basic but works). The workflow is something like this:
declare routes; return a template name for each route
place the reactive helper provided by the package in your body tag
the reactive helper will return the template associated to that route
you create a template for each route and optionally set custom publish functions
Router will give you browser history (client side).
Note that at this time there are some limitation on the way Meteor handles html/js. They are load all at the same time. The bright side is that once the app is loaded, page transitions will be instant.
I wrote a module that uses the Ctools Modal Window to serve a form wizard. I would like to switch to using the Modal Frame API (which uses the JQuery UI Dialog as the modal). If someone has some experience making this type of switch in their code and can give me some pointers, I would appreciate it.
Thanks,
David
Update:
So I finally got around to making this change and this is what I learned:
On the server side code replace
ctools_modal_add_js() with
modalframe_parent_js()
On the client side js code where you
may do
$('#modal_link').click(Drupal.CTools.Modal.clickAjaxLink);
Replace
Drupal.CTools.Modal.clickAjaxLink
with your own custom function.
Clearly the ctools modal window is way easier to use because in most cases you wouldn't even have to bother with creating any js like above. But, there you have it.
I have never used CTools, but the Modal Frame API is very straight forward to use. You can have a look how I used it in my Sticky Notes module.
The documentation of ModalFrame API is quite comprehensive.
So I finally got around to making this change and this is what I learned:
On the server side code replace
ctools_modal_add_js() with
modalframe_parent_js()
On the client side js code where you
may do
$('#modal_link').click(Drupal.CTools.Modal.clickAjaxLink);
Replace
Drupal.CTools.Modal.clickAjaxLink
with your own custom function.
Clearly the ctools modal window is way easier to use because in most cases you wouldn't even have to bother with creating any js like above. But, there you have it.