Skip to content

Instantly share code, notes, and snippets.

@gustinmi
Last active April 26, 2024 08:50
Show Gist options
  • Save gustinmi/d312211a9751d2e7e41f to your computer and use it in GitHub Desktop.
Save gustinmi/d312211a9751d2e7e41f to your computer and use it in GitHub Desktop.
JavaScript Templating Full Edition (settings, localization, micro templates )
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>templator2</title>
<style type="text/css">
html, body {
font-size: 14px;
width: 100%;
min-height: 100%;
overflow-y: hidden;
}
#toolbar{
display: table;
width: 99%;
}
#toolbar > * {
display: table-cell;
}
#toolbar select {
width: 95%;
text-align: right;
padding-right: 5px;
}
#content {
padding: 5px;
min-height: 100px;
margin: 0px 5px;
border: 1px solid gray;
}
ul li {
display: inline;
padding-right: 10px;
}
.spacer1x{
display: block;
height: 14px;
}
</style>
<script type="text/html" id="tplTimeScript">
<div><%=textSpan%><span id="timeSpan"></span></div>
<div>
<button type="button" id="btnRefreshTime"><%=textButton%></button>
</div>
</script>
<script type="text/html" id="tplEchoScript">
<div><%=textSpan%><span id="echoSpan"></span></div>
<div>
<input type="text" id="txtEcho">
<button type="button" id="btnRefreshEcho"><%=textButton%></button>
</div>
</script>
</head>
<body>
<div id="toolbar">
<ul id="menu">
<li><a href="#" data-tmplid="tplTimeScript">TimeTemplate</a></li>
<li><a href="#" data-tmplid="tplEchoScript">EchoTemplate</a></li>
</ul>
<select id="cbLangs"></select>
</div>
<div class="spacer1x"></div>
<div id="content">
home screen
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
//templator funkcija from ejohn (NE GLEJ TEGA)
//source: http://ejohn.org/blog/javascript-micro-templating/
(function(){
var cache = {}; // template cache
this.views = {};//global collection of views
this.tmpl = function tmpl(str, data){
var fn = !/\W/.test(str) ?
cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML) :
new Function("obj",
"var p=[],print=function(){p.push.apply(p,arguments);};" +
"with(obj){p.push('" +
str
.replace(/[\r\t\n]/g, " ")
.split("<%").join("\t")
.replace(/((^|%>)[^\t]*)'/g, "$1\r")
.replace(/\t=(.*?)%>/g, "',$1,'")
.split("\t").join("');")
.split("%>").join("p.push('")
.split("\r").join("\\'")
+ "');}return p.join('');");
return data ? fn( data ) : fn;
}; //end of templator function
})();
//application module settings
(function(){
window['AppSettings'] = {
log :{
debug : true
},
i18n :{
active : 'en',
avail : ['en','sl'],
en : {
'timeTemplate_textSpan' : 'Time is: ',
'timeTemplate_textButton' : 'Refresh time',
'echoTemplate_textSpan' : 'You entered: ',
'echoTemplate_textButton' : 'Say!'
},
sl : {
'timeTemplate_textSpan' : 'Ura je: ',
'timeTemplate_textButton' : 'Osveženi čas: ',
'echoTemplate_textSpan' : 'Vnesel si: ',
'echoTemplate_textButton' : 'Sporoči!'
},
onInit : function(){
this.active = localStorage ? localStorage.getItem('AppSettings.i18n.active') : this.active;
},
str : function(key){
return AppSettings.i18n[this.active][key] ? AppSettings.i18n[this.active][key] : "No resource for: " + key;
}
}
};
window.logm = function(msg){
if (this.AppSettings.log.debug) console.log(msg);
};
})();
// base object and template creation
(function(){
//prototype for widget
this.widget = {
fnInit : function(){
this.html = tmpl(this.oName, this.oData);
},
getHtml : function(){
return this.html;
}
};
//register template,
this.register = function(tmpl){
if (!tmpl.oName) throw new Error('Cannot register a widget: it contains no name');
if (!tmpl.oData) throw new Error('Cannot register a widget: it contains no data');
logm('RegisterTmpl:' + tmpl.oName);
views[tmpl.oName] = tmpl;
tmpl.fnInit();
}
})();
</script>
<script type="text/javascript">
(function(){ // master screen
var placeHolder = $('#content'),
cbLangs = document.getElementById('cbLangs'),
currView,
openView = function(name, whereTo){
var newView = views[name];
if (currView) currView.onClose();
whereTo.empty();
if (newView){
logm('2CurrView: ' + name)
whereTo.html(newView.getHtml());
newView.onOpen();
currView = newView;
}
};
//setup application object
AppSettings.i18n.onInit();
//setup menu
$('ul#menu').delegate('a','click', function(){
var tmplid = $(this).data("tmplid");
openView(tmplid, placeHolder);
});
//setup language selection
for(var i = 0; i < AppSettings.i18n.avail.length; i++) {
var opt = document.createElement('option');
var lname = AppSettings.i18n.avail[i];
opt.innerHTML = lname;
opt.value = lname;
if (lname===AppSettings.i18n.active)
opt.selected = true;
cbLangs.appendChild(opt);
}
cbLangs.addEventListener("change", function() {
localStorage.setItem('AppSettings.i18n.active', this.value);
window.location.reload();
});
})();
</script>
<script type="text/javascript">
(function(){ // this will be timeTemplate.js script in widgets folder
var timeTemplate = Object.create(this.widget);
timeTemplate.oName = 'tplTimeScript';
timeTemplate.oData = {
'textSpan' : AppSettings.i18n.str('timeTemplate_textSpan'),
'textButton' : AppSettings.i18n.str('timeTemplate_textButton')
};
timeTemplate.onOpen = function(){
var that = this,
btnClick = function(evt) {
that.span.text('Time is now: ' + new Date());
};
this.span = $('#timeSpan');
this.btn = $('#btnRefreshTime');
this.btn.on('click', btnClick);
};
timeTemplate.onClose = function(){
this.btn.unbind('click');
delete this.span;
delete this.btn;
};
register(timeTemplate);
})();
</script>
<script type="text/javascript">
(function(){ // this will be echoTemplate.js script in widgets folder
var echoTemplate = Object.create(this.widget);
echoTemplate.oName = 'tplEchoScript';
echoTemplate.oData = {
'textSpan' : AppSettings.i18n.str('echoTemplate_textSpan'),
'textButton' : AppSettings.i18n.str('echoTemplate_textButton')
};
echoTemplate.fnInit = function(){
this.innerHtml = tmpl(this.oName, this.oData);
};
echoTemplate.onOpen = function(){
var that = this,
btnClick = function(evt) {
that.span.text(that.txtEcho.val());
};
this.txtEcho = $('#txtEcho');
this.span = $('#echoSpan');
this.btn = $('#btnRefreshEcho');
this.btn.on('click', btnClick);
};
echoTemplate.onClose = function(){
// remove event handlers to prevent memory leak
this.btn.unbind('click');
// delete properties
delete this.span;
delete this.btn;
delete this.txtEcho;
};
echoTemplate.getHtml = function(){
return this.innerHtml;
};
register(echoTemplate);
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment