Create a gist now

Instantly share code, notes, and snippets.

@urban /fiddle.css
Last active Dec 19, 2015

Template Inheritance with Hogan.js
body {
font: 94% helvetica, arial, freesans, clean, sans-serif;
}
.modal {
height: 100%;
left: 0;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 1000;
}
.modal:before {
background: #fff;
content: "";
display: block;
height: 100%;
opacity: .75;
position: absolute;
width: 100%;
z-index: -1;
}
.modal-chrome {
border: 1px solid #78c3f1;
display: inline-block;
margin-top: 5%;
text-align: left;
}
.modal-content {
margin: 0 20px;
min-height: 200px;
min-width: 400px;
}
.modal-chrome > header {
background: #d4ecfb;
border-bottom: 1px solid #78c3f1;
padding: 10px 20px;
position: relative;
}
.modal-chrome > header h3 {
margin: 0;
}
.modal-chrome > header .close {
color: #000;
font-weight: bold;
position: absolute;
right: 20px;
top: 10px;
text-decoration: none;
}
.modal.bar-modal .modal-chrome > header {
background: #999;
border-bottom-color: #ccc;
}
.modal.bar-modal .modal-chrome {
background: #2c2c2c;
border: 1px solid #000;
color: #fff;
position: relative;
}
.modal.bar-modal footer {
padding: 20px;
text-align: right;
}
.modal.bar-modal footer a {
background: #666;
border: 1px solid #ccc;
color: #fff;
display: inline-block;
margin-left: 20px;
padding: 4px 10px;
text-decoration: none;
}
nav.menu dl {
border: 1px solid #78c3f1;
margin-left: 20px;
max-width: 150px;
}
nav.menu dt {
background: #d4ecfb;
}
nav.menu dt,
nav.menu dd {
border-bottom: 1px solid #78c3f1;
margin: 0;
padding: 5px 10px;
}
nav.menu dd:last-child {
border: 0;
}
nav.menu a {
text-decoration: none;
}
<nav id="modal-menu" class="menu">
<dl>
<dt>Modal Menu</dt>
<dd><a href="#" data-modal-name="foo-modal">Show foo!</a></dd>
<dd><a href="#" data-modal-name="bar-modal">Show bar!</a></dd>
</dl>
</nav>
<script>
// template data
var data = {
"foo-modal": {
"title": "Foo Modal",
"has-close-button": true
},
"bar-modal": {
"title": "Bar Modal",
"class-names": "bar-modal"
}
};
// create modal
$("#modal-menu").on("click", "a", function (event) {
event.preventDefault();
var modalName = $(this).data("modal-name");
var output = TEMPLATES[modalName].render(data[modalName], TEMPLATES);
$("body").append(output);
});
// remove modal
$(document).on("click", "a[data-js-action='remove']", function (event) {
event.preventDefault();
var target = $(this).data("js-target");
$(target).remove();
});
</script>
!function () {
var TEMPLATES = window.TEMPLATES = window.TEMPLATES || {};
// modal-layout
TEMPLATES["modal-layout"] = Hogan.compile(' \
<section class="modal {{ class-names }}"> \
<div class="modal-chrome"> \
<header> \
<h3>{{ title }}</h3> \
{{# has-close-button }} \
<a href="#" class="close" data-js-action="remove" data-js-target="body > .modal">X</a> \
{{/ has-close-button}} \
</header> \
<div class="modal-content"> \
{{$ body }} \
Default content! \
{{/ body }} \
</div> \
{{$ footer }}{{/ footer }} \
</div> \
</section> \
');
// foo-modal
TEMPLATES["foo-modal"] = Hogan.compile(' \
{{< modal-layout }} \
{{$ body }} \
<p>This is the <b>foo</b> modal!</p> \
{{/ body }} \
{{/ modal-layout }} \
');
// bar-modal
TEMPLATES["bar-modal"] = Hogan.compile(' \
{{< modal-layout }} \
{{$ body }} \
<p>This is the <b>bar</b> modal!</p> \
{{/ body }} \
{{$ footer }} \
<footer> \
<a href="#" data-js-action="remove" data-js-target="body > .modal">Cancel</a> \
<a href="#" data-js-action="remove" data-js-target="body > .modal">Okay</a> \
</footer> \
{{/ footer }} \
{{/ modal-layout }} \
');
}();
name: Template Inheritance with Hogan.js
description: Example of template inheritance with Hogan.js
authors:
- Urban Faubion
resources:
- http://code.jquery.com/jquery-2.0.0.min.js
- http://urban.github.io/assets/javascripts/libs/hogan/hogan.min.js
normalize_css: no
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment