This is a Meteor Famous Views plugin based on Famo.us BoxLayout.
Original demo is hosted here and you can find this project demo there.
The most exhaustive (yet basic) example to use BoxLayout.
<template name="boxlayout">
{{#BoxLayout margins=[]}}
{{>Surface target="topLeft" template="box" class="topLeft"}}
{{>Surface target="top" template="box" class="top"}}
{{>Surface target="topRight" template="box" class="topRight"}}
{{>Surface target="left" template="box" class="left"}}
{{>Surface target="middle" template="middle" class="middle"}}
{{>Surface target="right" template="box" class="right"}}
{{>Surface target="bottomLeft" template="box" class="bottomLeft"}}
{{>Surface target="bottom" template="box" class="bottom"}}
{{>Surface target="bottomRight" template="box" class="bottomRight"}}
{{/BoxLayout}}
</template>You have examples on how to use the margins parameter in the demo code.
You do not need to specify all targets!
All targets not needed by margins will show a warning in the console when added. Behind the scenes, the child element (Surface, ...) is created but not added to the DOM, hence the warning.
E.g. In the example above, margins is empty, so only 'middle' is expected. All other targets will produce a warning message. I did not want to throw an error although that would probably be considered as a leak.
That might be a problem, so in a real case world, and if you wanted it to be adaptive, you would use a template like this one:
<template name="boxLayout">
{{#BoxLayout id="layout" margins=margins}}
{{#each expectedTargets}}
{{#if isEq this 'middle'}}
{{>Surface target=this template="middle" class=this}}
{{else}}
{{>Surface target=this template="box" class=this}}
{{/if}}
{{/each}}
{{/BoxLayout}}
</template>Along with two helper functions:
UI.registerHelper 'isEq', (x, y) ->
x == y
Template.boxLayout.helpers
expectedTargets: ->
fview = FView.byId 'layout'
fview.view._expectedTargets#Note I am using {{#each}}...{{/each}} and {{#if}}...{{/if}} here since we will never rely on Famo.us Surface reacitivity.
Also, using #famous equivalent would change the inner workings of BoxLayout, making it a [0..n] container (like Scrollview) when we know that no more than 9 children will ever be needed.
In the demo, if you want to play with reactive Session variables, you can try to tweak the Session variable called 'grid'.
Session.get('grid');And set (up to 9) margins wrapped around a single array. The following example will show two BoxLayout, one with only 'middle' target and the other with 20px border all sides.
Session.set('grid', [[],[20]]);Then if you want to return to the original demo margins, you can type this in your browser console:
Session.set('grid', Demo.defaultGrid(60));#Note Use the Source, Luke.
Modifier size change on-the-fly (a.k.a margins reactivity)
In the demo, if you change margins with
Session.set('grid', [[]]);all BoxLayout will update existing Surface(s) sizes and if needs be, Surface(s) will be created or removed automagically! 😄
Support {{#famousEach}}...{{/famousEach}} and {{#famousIf}}...{{/famousIf}}
See above.