From 8ff0efe6ba1cd69b4511f051d327765e1817c562 Mon Sep 17 00:00:00 2001 From: rylon Date: Thu, 9 Apr 2015 16:57:25 +0200 Subject: [PATCH] statesystem caches js & css, cleanup, small fixes --- files/sys/system.js | 178 +++++++++++++++++++++++++------------------- 1 file changed, 102 insertions(+), 76 deletions(-) diff --git a/files/sys/system.js b/files/sys/system.js index f4db95f..3622d59 100644 --- a/files/sys/system.js +++ b/files/sys/system.js @@ -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) { - //check loaded state of div - reload only if required - if(forced || system.state[entry['div']] !== entry['url']+'&'+window.location.search.substr(1)){ - //load pages - $.ajax({ - async: false, - data: {}, - dataType: 'html', - url: entry['url']+'&'+window.location.search.substr(1), - 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'); - } else { - system.log_error('load page: '+id+entry['div']+' '+entry['url']+'&'+window.location.search.substr(1)+' - div not found'); - }}, - error: function(XMLHttpRequest, textStatus, errorThrown){system.log(system.LOG_ERROR,errorThrown);} - }); - //load css - for(var i=0; i < entry['css'].length; i++){ - system.load_css(entry['css'][i]);} - //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); +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 || this.state[entry['div']] !== url){ + //load pages + $.ajax({ + async: false, + data: {}, + dataType: 'html', + url: url, + success: function(data){ + if($(entry['div']).length){ + $(entry['div']).html(data); + system.log_info('load page: '+id+entry['div']+' '+url+' - success'); + } else { + system.log_error('load page: '+id+entry['div']+' '+url+' - div not found'); + }}, + error: function(XMLHttpRequest, textStatus, errorThrown){system.log_error(errorThrown);} + }); + //load css + for(var i=0; i < entry['css'].length; 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++){ + 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'); - }} - }); - } - //update state - system.state[entry['div']] = entry['url']+'&'+window.location.search.substr(1); + } + } + }) + .fail(function( jqxhr, settings, exception ) { + system.log_error( "Something went wrong"+exception ); + }); + this.state_js[entry['js'][i]] = true; } 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 { - console.log(data); - system.log_info('Problem with your Pages: '+data['result']['message']); + 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 { + 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) { - 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); +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); + 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);