webcraftmedia/system
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

statesystem caches js & css, cleanup, small fixes

Browse Source
This commit is contained in:
Ulf Gebhardt 2015-04-09 16:57:25 +02:00
parent 22f5f9dc10
commit 8ff0efe6ba
1 changed files with 102 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
files/sys/system.js
View File

@ -1,7 +1,7 @@
var system = null; var system = null;
//mother object //mother object
function SYSTEM(endpoint, group,start_state,hashchange){ function SYSTEM(endpoint,group,start_state,hash_change){
system = this; system = this;
this.LOG_START = 0; this.LOG_START = 0;
@ -13,61 +13,51 @@ function SYSTEM(endpoint, group,start_state,hashchange){
this.pages = null; this.pages = null;
this.state = {}; this.state = {};
this.state_info = {}; this.state_info = {};
this.state_js = {};
this.state_css = {};
this.start_state = start_state; this.start_state = start_state;
this.hashchange = hashchange; this.hash_change = hash_change;
this.go_state(start_state); this.hashchange();
this.hashchange(this.cur_state()); $(window).bind('hashchange', this.hashchange);
$(window).bind('hashchange', function( event ) {
system.go_state();
//user callback
if(system.hashchange){
hashchange(system.cur_state());}
});
} }
//internal function to handle pagestate results SYSTEM.prototype.hashchange = function () {
SYSTEM.prototype.handle_call_pages = function (data,id,forced,cached) { system.go_state(system.start_state);
if(data['status']){ //user callback
system.log_info('load pages: endpoint '+system.endpoint+' group:'+system.group+' state:'+id+' - '+(cached ? 'cached ' : 'success')); if(system.hash_change){
//state not found? system.hash_change(system.cur_state());}
if(data['result'].length === 0){ };
system.log_error('load pages: endpoint '+system.endpoint+' group:'+system.group+' state:'+id+' - state not found - redirecting to start state: '+system.start_state); SYSTEM.prototype.handle_call_pages_data = function (entry,id,forced,cached) {
system.load(system.start_state); var url = entry['url']+(window.location.search.substr(1) ? '&'+window.location.search.substr(1) : '' );
return;} //check loaded state of div - reload only if required
//cache state info data if(forced || this.state[entry['div']] !== url){
system.state_info[id] = data; //load pages
//update history? $.ajax({
if(id !== system.cur_state()){ async: false,
window.history.pushState(null, "", '#!'+id);} data: {},
data['result'].forEach(function(entry) { dataType: 'html',
//check loaded state of div - reload only if required url: url,
if(forced || system.state[entry['div']] !== entry['url']+'&'+window.location.search.substr(1)){ success: function(data){
//load pages if($(entry['div']).length){
$.ajax({ $(entry['div']).html(data);
async: false, system.log_info('load page: '+id+entry['div']+' '+url+' - success');
data: {}, } else {
dataType: 'html', system.log_error('load page: '+id+entry['div']+' '+url+' - div not found');
url: entry['url']+'&'+window.location.search.substr(1), }},
success: function(data){ error: function(XMLHttpRequest, textStatus, errorThrown){system.log_error(errorThrown);}
if($(entry['div']).length){ });
$(entry['div']).html(data); //load css
system.log_info('load page: '+id+entry['div']+' '+entry['url']+'&'+window.location.search.substr(1)+' - success'); for(var i=0; i < entry['css'].length; i++){
} else { this.load_css(entry['css'][i],forced);}
system.log_error('load page: '+id+entry['div']+' '+entry['url']+'&'+window.location.search.substr(1)+' - div not found'); //load js
}}, var call_func = true;
error: function(XMLHttpRequest, textStatus, errorThrown){system.log(system.LOG_ERROR,errorThrown);} var loaded = 0;
}); for(var i=0; i < entry['js'].length; i++){
//load css if(forced || !this.state_js[entry['js'][i]]){
for(var i=0; i < entry['css'].length; i++){ this.log_info('load js: '+entry['js'][i]+(forced ? ' - forced' : ''));
system.load_css(entry['css'][i]);} $.getScript(entry['js'][i])
//load js .done(function(response, status, jqxhr) {
var call_func = true; system.log_info('load js: '+status);
var loaded = 0;
for(var i=0; i < entry['js'].length; i++){
system.log(system.LOG_INFO,'load js: '+entry['js'][i]);
$.getScript(entry['js'][i]).done(function(response, status) {
system.log(system.LOG_INFO,'load js: '+status);
if(loaded++ === entry['js'].length-1){ if(loaded++ === entry['js'].length-1){
var fn = window[entry['func']]; var fn = window[entry['func']];
if(call_func && typeof fn === 'function'){ if(call_func && typeof fn === 'function'){
@ -76,18 +66,51 @@ SYSTEM.prototype.handle_call_pages = function (data,id,forced,cached) {
system.log_info('call func: '+entry['func']); system.log_info('call func: '+entry['func']);
} else { } else {
system.log_error('call func: '+entry['func']+' - fail'); system.log_error('call func: '+entry['func']+' - fail');
}} }
}); }
} })
//update state .fail(function( jqxhr, settings, exception ) {
system.state[entry['div']] = entry['url']+'&'+window.location.search.substr(1); system.log_error( "Something went wrong"+exception );
});
this.state_js[entry['js'][i]] = true;
} else { } else {
system.log_info('load page: '+id+entry['div']+' '+entry['url']+'&'+window.location.search.substr(1)+' - skipped - already loaded'); this.log_info('load js: '+entry['js'][i]+' - cached');
if(loaded++ === entry['js'].length-1){
var fn = window[entry['func']];
if(call_func && typeof fn === 'function'){
call_func = false;
fn();
this.log_info('call func: '+entry['func']);
} else {
this.log_error('call func: '+entry['func']+' - fail');
}
}
} }
}); }
//update state
this.state[entry['div']] = url;
} else { } else {
console.log(data); this.log_info('load page: '+id+entry['div']+' '+url+' - skipped - already loaded');
system.log_info('Problem with your Pages: '+data['result']['message']); }
}
//internal function to handle pagestate results
SYSTEM.prototype.handle_call_pages = function (data,id,forced,cached) {
if(data['status']){
this.log_info('load pages: endpoint '+this.endpoint+' group:'+this.group+' state:'+id+' - '+(cached ? 'cached ' : (forced ? 'forced' : 'success')));
//state not found?
if(data['result'].length === 0){
this.log_error('load pages: endpoint '+this.endpoint+' group:'+this.group+' state:'+id+' - state not found - redirecting to start state: '+this.start_state);
this.load(this.start_state);
return;}
//cache state info data
this.state_info[id] = data;
//update history?
if(id !== this.cur_state()){
window.history.pushState(null, "", '#!'+id);}
data['result'].forEach(
function(entry) { system.handle_call_pages_data(entry,id,forced,cached);});
} else {
this.log_info('Problem with your Pages: '+data['result']['message']);
} }
}; };
//send a call to the endpoint //send a call to the endpoint
@ -98,19 +121,19 @@ SYSTEM.prototype.call = function(call,success,data,data_type,async){
dataType: data_type, dataType: data_type,
url: this.endpoint+'?'+call, url: this.endpoint+'?'+call,
success: success, success: success,
error: function(XMLHttpRequest, textStatus, errorThrown){system.log(system.LOG_ERROR,call+' '+XMLHttpRequest+' '+textStatus+' '+errorThrown);} error: function(XMLHttpRequest, textStatus, errorThrown){system.log_error(call+' '+XMLHttpRequest+' '+textStatus+' '+errorThrown);}
}); });
}; };
SYSTEM.prototype.log = function(type,msg){ SYSTEM.prototype.log = function(type,msg){
var res = ''; var res = '';
switch(type){ switch(type){
case system.LOG_START: case this.LOG_START:
res = '#SYSTEM: '; res = '#SYSTEM: ';
break; break;
case system.LOG_INFO: case this.LOG_INFO:
res = '-SYSTEM: '; res = '-SYSTEM: ';
break; break;
case system.LOG_ERROR: case this.LOG_ERROR:
res = '!SYSTEM-ERROR: '; res = '!SYSTEM-ERROR: ';
break; break;
} }
@ -122,30 +145,33 @@ SYSTEM.prototype.log_error = function(msg){
this.log(this.LOG_ERROR,msg);} this.log(this.LOG_ERROR,msg);}
//load a pagestatewith given id //load a pagestatewith given id
SYSTEM.prototype.load = function(id,forced){ SYSTEM.prototype.load = function(id,forced){
this.log(system.LOG_START,'load page: '+id+(forced ? ' - forced' : '')); this.log(this.LOG_START,'load page: '+id+(forced ? ' - forced' : ''));
if(!forced && this.state_info[id]){ if(!forced && this.state_info[id]){
this.handle_call_pages(this.state_info[id],id,forced,true); this.handle_call_pages(this.state_info[id],id,forced,true);
}else { }else {
this.call('call=pages&group='+this.group+'&state='+id,function(data){system.handle_call_pages(data,id,forced,false);},{},"json",false);} this.call('call=pages&group='+this.group+'&state='+id,function(data){system.handle_call_pages(data,id,forced,false);},{},"json",false);}
}; };
SYSTEM.prototype.load_css = function loadCSS(csssrc) { SYSTEM.prototype.load_css = function loadCSS(csssrc,forced) {
var snode = document.createElement('link'); if(forced || !this.state_css[csssrc]){
snode.setAttribute('type','text/css'); var snode = document.createElement('link');
snode.setAttribute('rel', 'stylesheet'); snode.setAttribute('type','text/css');
snode.setAttribute('href',csssrc); snode.setAttribute('rel', 'stylesheet');
document.getElementsByTagName('head')[0].appendChild(snode); snode.setAttribute('href',csssrc);
system.log(system.LOG_INFO,'load css '+csssrc); document.getElementsByTagName('head')[0].appendChild(snode);
this.state_css[csssrc] = true;
this.log_info('load css '+csssrc+' - '+(forced ? 'forced' : 'success'));
} else {
this.log_info('load css '+csssrc+' - cached');
}
}; };
//what?
SYSTEM.prototype.cur_state = function() { SYSTEM.prototype.cur_state = function() {
var pathName = window.location.href; var pathName = window.location.href;
if (pathName.indexOf('#!') != -1) { if (pathName.indexOf('#!') != -1) {
return pathName.split('#!').pop();} return pathName.split('#!').pop();}
return ''; return '';
}; };
SYSTEM.prototype.go_state = function(default_state,forced){ SYSTEM.prototype.go_state = function(default_state,forced){
var pageName = this.cur_state(); var pageName = this.cur_state();
this.load(pageName ? pageName : default_state,forced); this.load(pageName ? pageName : default_state,forced);