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