Patio
Patio is a Javascript library to manage screen context. It handles what should appear on screen surrounding your main container.
You can try an online example here https://msa-argentina.github.io/patio/example/
License
Patio is distributed under the LGPLv3 License
Requirements
- jQuery (soon to be removed as requirement.)
- Handlebars (optional but used on most of our projects.)
how to use it
// you define your tiles
var tiles = [
{
"id": "loading",
"template": "loading"
},
{
"id": "slide_1",
"template": "first_slide"
},
{
"id": "slide_2",
"template": "second_slide",
"context_tiles": ["ok", "cancel"]
}
];
// and your context tiles
var context = [
{
"id": "ok",
"template": "confirm_button",
"container": "#options",
"callback_click": click_button
},
{
"id": "cancel",
"template": "cancel_button",
"container": "#options",
"callback_click": click_button
}
];
function get_template(template_name, template_dir){
// you should implement your "template fetching function" which shoud return a function that renders the template (we use Handlebars)
}
var patio = new Patio($("#containter"), tiles, context, "templates_dir");
patio.loading.only(); // Will show just the loading screen
patio.slide_1.only(); // Will show just the loading screen
patio.slide_2.only(); // Will show the slide_2 along it's content