Skip to content

Instantly share code, notes, and snippets.

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

Embed
What would you like to do?
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
@urban

This comment has been minimized.

Copy link
Owner Author

urban commented Jul 1, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.