From 6658708bdd775a6ab1352e0c36b4c7deafc52e84 Mon Sep 17 00:00:00 2001 From: Thomas Lange Date: Sat, 26 Dec 2015 16:37:25 +0100 Subject: Multiple updates; new feature PhaseDoneJS --- static/bigpipe-callbacks.js | 27 -------- static/bigpipe.js | 155 ++++++++++++++++++++++---------------------- static/blue.php | 6 +- static/delayJS.php | 10 +-- static/green.php | 6 +- static/red.php | 6 +- 6 files changed, 92 insertions(+), 118 deletions(-) delete mode 100755 static/bigpipe-callbacks.js (limited to 'static') diff --git a/static/bigpipe-callbacks.js b/static/bigpipe-callbacks.js deleted file mode 100755 index a9f48f1..0000000 --- a/static/bigpipe-callbacks.js +++ /dev/null @@ -1,27 +0,0 @@ -// Folgende Phasen stehen zur Auswahl: PAGELET_STARTED, RESOURCE_DONE, PAGELET_HTML_RENDERED, PAGELET_JS_EXECUTED und BIGPIPE_PAGELETS_RENDERED - -var debugLine = "------------------------------------------------------------------------------------------------------------------------"; - -BigPipe.registerPhaseDoneCallback('PAGELET_STARTED', function(Pagelet) { - console.log(debugLine); - console.log(Pagelet.pageletID + ":\t" + "Die Ausführung des Pagelets wurde gestartet."); -}); - -BigPipe.registerPhaseDoneCallback('RESOURCE_DONE', function(Resource) { - console.log(Resource.pageletID + ":\t" + 'Die Ressource ' + Resource.file + ' wurde geladen.'); -}); - -BigPipe.registerPhaseDoneCallback('PAGELET_HTML_RENDERED', function(Pagelet) { - console.log(Pagelet.pageletID + ":\t" + 'Die Platzhalter wurden mit HTML-Code befüllt.'); -}); - -BigPipe.registerPhaseDoneCallback('BIGPIPE_PAGELETS_RENDERED', function() { - console.log(debugLine); - console.log('BP' + ":\t" + 'Die Platzhalter von allen Pagelets wurden mit ihrem HTML-Code befüllt.'); - console.log(debugLine); -}); - -BigPipe.registerPhaseDoneCallback('PAGELET_JS_EXECUTED', function(Pagelet) { - console.log(Pagelet.pageletID + ":\t" + 'Der zugehörige Javascript-Code des Pagelets wurde ausgeführt.'); - console.log(debugLine); -}); \ No newline at end of file diff --git a/static/bigpipe.js b/static/bigpipe.js index d3289b6..0fcf68f 100755 --- a/static/bigpipe.js +++ b/static/bigpipe.js @@ -1,58 +1,55 @@ //=================================================================================================== -// REVEALING MODLUE PATTERN: BigPipe +// Revealing Module Pattern //=================================================================================================== var BigPipe = (function() { //=================================================================================================== - // PROTOTYPE: PageletResource-Konstruktor + // Resource: Represents a single CSS or JS resource //=================================================================================================== - function PageletResource(file, type, pageletID) { - this.pageletID = pageletID; + function Resource(resourceURL, type) { + this.resourceURL = resourceURL; this.callbacks = []; this.done = false; - this.file = file; this.type = type; } //=================================================================================================== - // PROTOTYPE: Startet den Ladevorgang der Ressource + // Resource: Loading the resource //=================================================================================================== - PageletResource.prototype.start = function() { + Resource.prototype.start = function() { if(this.type === 0) { var element = document.createElement('link'); element.setAttribute('rel', 'stylesheet'); - element.setAttribute('href', this.file); + element.setAttribute('href', this.resourceURL); } else { var element = document.createElement('script'); - element.setAttribute('src', this.file); + element.setAttribute('src', this.resourceURL); element.async = true; } document.head.appendChild(element); element.onload = function() { - BigPipe.executePhaseDoneCallbacks('RESOURCE_DONE', this); this.executeCallbacks(); }.bind(this); element.onerror = function() { - BigPipe.executePhaseDoneCallbacks('RESOURCE_DONE', this); this.executeCallbacks(); }.bind(this); }; //=================================================================================================== - // PROTOTYPE: Registriert eine Callback-Funktion + // Resource: Register a new callback //=================================================================================================== - PageletResource.prototype.registerCallback = function(callback) { + Resource.prototype.registerCallback = function(callback) { return this.callbacks.push(callback); }; //=================================================================================================== - // PROTOTYPE: Führt alle registrierten Callback-Funktionen aus + // Resource: Executes all registered callbacks //=================================================================================================== - PageletResource.prototype.executeCallbacks = function() { + Resource.prototype.executeCallbacks = function() { if(!this.done) { this.done = true; @@ -63,7 +60,7 @@ var BigPipe = (function() { }; //=================================================================================================== - // PROTOTYPE: Pagelet-Konstruktor + // Pagelet: Represents a single pagelet //=================================================================================================== function Pagelet(data) { this.pageletID = data.ID; @@ -72,36 +69,62 @@ var BigPipe = (function() { this.JSFiles = data.RESOURCES.JS; this.JSCode = data.RESOURCES.JS_CODE; - this.phase = 0; // 1 => Laden von CSS-Ressourcen, 2 => CSS-Ressourcen geladen, 3 => HTML wurde injiziert, 4 => JS-Ressourcen geladen und JS-Code ausgeführt + this.phase = 0; this.CSSResources = []; this.JSResources = []; + + this.phaseDoneJS = data.PHASES; } //=================================================================================================== - // PROTOTYPE: Startet die Initialisierung des Pagelets und startet die Pagelet-Ressourcen + // Pagelet: Increases phase and executes PhaseDoneJS + //=================================================================================================== + Pagelet.prototype.phaseDoneHandler = function(phase) { + for(var currentPhase = this.phase; currentPhase <= phase; ++currentPhase) { + this.executePhaseDoneJS(currentPhase); + } + + return (this.phase = ++phase); + }; + + //=================================================================================================== + // Pagelet: Executes the callbacks of the specific phase + //=================================================================================================== + Pagelet.prototype.executePhaseDoneJS = function(phase) { + this.phaseDoneJS[phase].forEach(function(code) { + try { + globalExecution(code); + } catch(e) { + console.error("PhaseDoneJS: " + e); + } + }); + }; + + //=================================================================================================== + // Pagelet: Initialize and start the CSS resources //=================================================================================================== Pagelet.prototype.start = function() { - BigPipe.executePhaseDoneCallbacks('PAGELET_STARTED', this); - this.CSSFiles.forEach(function(file) { - this.attachCSSResource(new PageletResource(file, 0, this.pageletID)); + var isStarted = false; + + this.CSSFiles.forEach(function(resourceURL) { + this.attachCSSResource(new Resource(resourceURL, 0)); }.bind(this)); - this.JSFiles.forEach(function(file) { - this.attachJSResource(new PageletResource(file, 1, this.pageletID)); + this.JSFiles.forEach(function(resourceURL) { + this.attachJSResource(new Resource(resourceURL, 1)); }.bind(this)); this.CSSResources.forEach(function(resource) { - this.phase = 1; + isStarted = true; resource.start(); }.bind(this)); - if(this.phase === 0) { - this.injectHTML(); - } + // If no CSS resource was started (= no external CSS resources exists), then begin to inject the HTML + !isStarted && this.injectHTML(); }; //=================================================================================================== - // PROTOTYPE: Fügt eine CSS-Ressource hinzu + // Pagelet: Attach a new CSS resource to the pagelet //=================================================================================================== Pagelet.prototype.attachCSSResource = function(resource) { resource.registerCallback(this.onloadCSS.bind(this)); @@ -109,7 +132,7 @@ var BigPipe = (function() { }; //=================================================================================================== - // PROTOTYPE: Fügt eine JS-Ressource hinzu + // Pagelet: Attach a new JS resource to the pagelet //=================================================================================================== Pagelet.prototype.attachJSResource = function(resource) { resource.registerCallback(this.onloadJS.bind(this)); @@ -117,76 +140,69 @@ var BigPipe = (function() { }; //=================================================================================================== - // PROTOTYPE: Führt den statischen JS-Code des Pagelets aus + // Pagelet: Executes the main JS code of the pagelet //=================================================================================================== Pagelet.prototype.executeJSCode = function() { try { globalExecution(this.JSCode); - BigPipe.executePhaseDoneCallbacks('PAGELET_JS_EXECUTED', this); } catch(e) { - console.error(this.pageletID + ":\t" + e); + console.error(this.pageletID + ": " + e); } }; //=================================================================================================== - // PROTOTYPE: Pagelet-Methode + // Pagelet: Get each time called if a single JS resource has been loaded //=================================================================================================== Pagelet.prototype.onloadJS = function() { if(this.phase === 3 && this.JSResources.every(function(resource){ - return resource.done; - })) { + return resource.done; + })) { + this.phaseDoneHandler(3); this.executeJSCode(); - this.phase = 4; + this.phaseDoneHandler(4); } }; //=================================================================================================== - // PROTOTYPE: Pagelet-Methode + // Pagelet: Get each time called if a single CSS resource has been loaded //=================================================================================================== Pagelet.prototype.onloadCSS = function() { if(this.CSSResources.every(function(resource){ - return resource.done; - })) { + return resource.done; + })) { this.injectHTML(); } }; //=================================================================================================== - // PROTOTYPE: Injiziert den HTML-Code des Pagelets in den DOM + // Pagelet: Injects the HTML content into the DOM //=================================================================================================== Pagelet.prototype.injectHTML = function() { - this.phase = 2; - if(placeholder = document.getElementById(this.pageletID)) { - if(this.HTML) { - placeholder.innerHTML = this.HTML; - } + this.phaseDoneHandler(1); - else { - var content = document.getElementById('_' + this.pageletID); - placeholder.innerHTML = content.innerHTML.substring(5, content.innerHTML.length - 4); - document.body.removeChild(content); - } + if(placeholder = document.getElementById(this.pageletID)) { + var pageletHTML = document.getElementById('_' + this.pageletID); + placeholder.innerHTML = pageletHTML.innerHTML.substring(5, pageletHTML.innerHTML.length - 4); + document.body.removeChild(pageletHTML); } - this.phase = 3; + this.phaseDoneHandler(2); - BigPipe.executePhaseDoneCallbacks('PAGELET_HTML_RENDERED', this); BigPipe.executeNextPagelet(); + // Check if this was the last pagelet and then start loading of the external JS resources if(BigPipe.phase === 2 && BigPipe.pagelets[BigPipe.pagelets.length - 1].pageletID === this.pageletID) { - BigPipe.executePhaseDoneCallbacks('BIGPIPE_PAGELETS_RENDERED'); BigPipe.loadJSResources(); } }; //=================================================================================================== - // BigPipe-Hauptobjekt + // BigPipe //=================================================================================================== var BigPipe = { pagelets: [], - phase: 0, // 1 => Erstes Pagelet gestartet, 2 => Alle Pagelets angekommen, 3 => JS-Ressourcen geladen + JS-Code ausgeführt + phase: 0, offset: 0, - phaseDoneCallbacks: {}, executeNextPagelet: function() { if(this.pagelets[this.offset]) { @@ -194,27 +210,15 @@ var BigPipe = (function() { } else if(this.phase < 2) { - setTimeout(this.executeNextPagelet.bind(this), 30); - } - }, - - registerPhaseDoneCallback: function(phase, callback) { - if(!this.phaseDoneCallbacks[phase]) { - this.phaseDoneCallbacks[phase] = []; - } - return this.phaseDoneCallbacks[phase].push(callback); - }, - - executePhaseDoneCallbacks: function(phase, param) { - if(this.phaseDoneCallbacks[phase]) { - this.phaseDoneCallbacks[phase].forEach(function(callback) { - callback(param); - }); + setTimeout(this.executeNextPagelet.bind(this), 20); } }, onPageletArrive: function(data) { - if(this.pagelets.push(new Pagelet(data)) && this.phase === 0 && !data.IS_LAST) { + var pagelet = new Pagelet(data); + pagelet.phaseDoneHandler(0); + + if(this.pagelets.push(pagelet) && this.phase === 0 && !data.IS_LAST) { this.phase = 1; this.executeNextPagelet(); } @@ -260,12 +264,7 @@ var BigPipe = (function() { BigPipe.onPageletArrive(data); }, - registerPhaseDoneCallback: function(phase, callback) { - BigPipe.registerPhaseDoneCallback(phase, callback); - }, - reset: function() { - BigPipe.phaseDoneCallbacks = {}; BigPipe.pagelets = []; BigPipe.offset = 0; BigPipe.phase = 0; diff --git a/static/blue.php b/static/blue.php index ddffcf6..e715d83 100755 --- a/static/blue.php +++ b/static/blue.php @@ -1,16 +1,16 @@ diff --git a/static/delayJS.php b/static/delayJS.php index 1307ca0..96e46c5 100755 --- a/static/delayJS.php +++ b/static/delayJS.php @@ -1,16 +1,18 @@ \ No newline at end of file +?> + +console.log("EXTERNAL: Delayed javascript resource loaded"); diff --git a/static/green.php b/static/green.php index 3e45fc6..65ded6f 100755 --- a/static/green.php +++ b/static/green.php @@ -1,16 +1,16 @@ diff --git a/static/red.php b/static/red.php index 9ad993e..e6936e8 100755 --- a/static/red.php +++ b/static/red.php @@ -1,16 +1,16 @@ -- cgit v1.2.3