Skip to content

Instantly share code, notes, and snippets.

@jxnblk

jxnblk/index.html

Created October 3, 2014 18:44
Show Gist options
  • Save jxnblk/2a3373e3e8017017ca32 to your computer and use it in GitHub Desktop.
Save jxnblk/2a3373e3e8017017ca32 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Layout Prototype</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
.min-h320 { min-height: 320px }
.mb2 { margin-bottom: 30px }
.placeholder {
height: 0;
padding-bottom: 56%;
background-color: rgba(255,0,0,.2);
}
</style>
</head>
<body class="container-fluid">
<button id="switch-layout">Switch Layout</button>
<div id="content"></div>
<!-- Layout components -->
<script id="layout-one-template" type="text/x-template">
<h1>Layout {{layout}}</h1>
<div class="row">
{{#charts}}
<div class="col-xs-6 col-sm-4 col-md-3 mb2">
{{>chart}}
</div>
{{/charts}}
</div>
</script>
<script id="layout-two-template" type="text/x-template">
<h1>Layout {{layout}}</h1>
<div class="row">
{{#charts}}
<div class="col-sm-3 mb2">
{{>chart}}
</div>
{{/charts}}
</div>
</script>
<script id="layout-three-template" type="text/x-template">
<h1>Layout {{layout}}</h1>
<hr>
<div class="mb2">
{{#charts.0}} {{>chart}} {{/charts.0}}
</div>
<div class="row">
<div class="col-sm-6 mb2">
{{#charts.1}} {{>chart}} {{/charts.1}}
</div>
<div class="col-sm-6 mb2">
{{#charts.2}} {{>chart}} {{/charts.2}}
</div>
</div>
</script>
<!-- Chart component -->
<script id="chart-template" type="text/x-template">
<div class="placeholder">{{name}}</div>
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.min.js"></script>
<script>
var container = document.querySelector('#content');
var chartTemplate = document.querySelector('#chart-template').innerHTML;
var layouts = [
document.querySelector('#layout-one-template').innerHTML,
document.querySelector('#layout-two-template').innerHTML,
document.querySelector('#layout-three-template').innerHTML
];
var view = {};
view.charts = [
{ name: 'Chart 1' },
{ name: 'Chart 2' },
{ name: 'Chart 3' },
{ name: 'Chart 4' },
{ name: 'Chart 5' },
{ name: 'Chart 6' }
];
view.layout = 2;
function render(template, model) {
var rendered = Mustache.render(template, model, { chart: chartTemplate });
container.innerHTML = rendered;
}
render(layouts[view.layout], view);
var layoutButton = document.querySelector('#switch-layout');
layoutButton.addEventListener('click', function() {
if (view.layout < layouts.length - 1) {
view.layout++;
} else {
view.layout = 0;
}
render(layouts[view.layout], view);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment