gustinmi/jstemplates2.html

## jstemplates2.html
<!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>
	<!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>