diff options
Diffstat (limited to 'static')
-rwxr-xr-x | static/bigpipe.js | 544 | ||||
-rwxr-xr-x | static/blue.php | 32 | ||||
-rwxr-xr-x | static/delayJS.php | 36 | ||||
-rwxr-xr-x | static/green.php | 32 | ||||
-rwxr-xr-x | static/red.php | 32 |
5 files changed, 338 insertions, 338 deletions
diff --git a/static/bigpipe.js b/static/bigpipe.js index 0fcf68f..fed6e39 100755 --- a/static/bigpipe.js +++ b/static/bigpipe.js @@ -1,273 +1,273 @@ -//=================================================================================================== -// Revealing Module Pattern -//=================================================================================================== -var BigPipe = (function() { - //=================================================================================================== - // Resource: Represents a single CSS or JS resource - //=================================================================================================== - function Resource(resourceURL, type) { - this.resourceURL = resourceURL; - this.callbacks = []; - this.done = false; - this.type = type; - } - - //=================================================================================================== - // Resource: Loading the resource - //=================================================================================================== - Resource.prototype.start = function() { - if(this.type === 0) { - var element = document.createElement('link'); - element.setAttribute('rel', 'stylesheet'); - element.setAttribute('href', this.resourceURL); - } - - else { - var element = document.createElement('script'); - element.setAttribute('src', this.resourceURL); - element.async = true; - } - - document.head.appendChild(element); - - element.onload = function() { - this.executeCallbacks(); - }.bind(this); - - element.onerror = function() { - this.executeCallbacks(); - }.bind(this); - }; - - //=================================================================================================== - // Resource: Register a new callback - //=================================================================================================== - Resource.prototype.registerCallback = function(callback) { - return this.callbacks.push(callback); - }; - - //=================================================================================================== - // Resource: Executes all registered callbacks - //=================================================================================================== - Resource.prototype.executeCallbacks = function() { - if(!this.done) { - this.done = true; - - this.callbacks.forEach(function(callback) { - callback(); - }); - } - }; - - //=================================================================================================== - // Pagelet: Represents a single pagelet - //=================================================================================================== - function Pagelet(data) { - this.pageletID = data.ID; - this.HTML = data.HTML || ""; - this.CSSFiles = data.RESOURCES.CSS; - this.JSFiles = data.RESOURCES.JS; - this.JSCode = data.RESOURCES.JS_CODE; - - this.phase = 0; - this.CSSResources = []; - this.JSResources = []; - - this.phaseDoneJS = data.PHASES; - } - - //=================================================================================================== - // 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() { - var isStarted = false; - - this.CSSFiles.forEach(function(resourceURL) { - this.attachCSSResource(new Resource(resourceURL, 0)); - }.bind(this)); - - this.JSFiles.forEach(function(resourceURL) { - this.attachJSResource(new Resource(resourceURL, 1)); - }.bind(this)); - - this.CSSResources.forEach(function(resource) { - isStarted = true; - resource.start(); - }.bind(this)); - - // If no CSS resource was started (= no external CSS resources exists), then begin to inject the HTML - !isStarted && this.injectHTML(); - }; - - //=================================================================================================== - // Pagelet: Attach a new CSS resource to the pagelet - //=================================================================================================== - Pagelet.prototype.attachCSSResource = function(resource) { - resource.registerCallback(this.onloadCSS.bind(this)); - return this.CSSResources.push(resource); - }; - - //=================================================================================================== - // Pagelet: Attach a new JS resource to the pagelet - //=================================================================================================== - Pagelet.prototype.attachJSResource = function(resource) { - resource.registerCallback(this.onloadJS.bind(this)); - return this.JSResources.push(resource); - }; - - //=================================================================================================== - // Pagelet: Executes the main JS code of the pagelet - //=================================================================================================== - Pagelet.prototype.executeJSCode = function() { - try { - globalExecution(this.JSCode); - } catch(e) { - console.error(this.pageletID + ": " + e); - } - }; - - //=================================================================================================== - // 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; - })) { - this.phaseDoneHandler(3); - this.executeJSCode(); - this.phaseDoneHandler(4); - } - }; - - //=================================================================================================== - // 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; - })) { - this.injectHTML(); - } - }; - - //=================================================================================================== - // Pagelet: Injects the HTML content into the DOM - //=================================================================================================== - Pagelet.prototype.injectHTML = function() { - this.phaseDoneHandler(1); - - 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.phaseDoneHandler(2); - - 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.loadJSResources(); - } - }; - - //=================================================================================================== - // BigPipe - //=================================================================================================== - var BigPipe = { - pagelets: [], - phase: 0, - offset: 0, - - executeNextPagelet: function() { - if(this.pagelets[this.offset]) { - this.pagelets[this.offset++].start(); - } - - else if(this.phase < 2) { - setTimeout(this.executeNextPagelet.bind(this), 20); - } - }, - - onPageletArrive: function(data) { - var pagelet = new Pagelet(data); - pagelet.phaseDoneHandler(0); - - if(this.pagelets.push(pagelet) && this.phase === 0 && !data.IS_LAST) { - this.phase = 1; - this.executeNextPagelet(); - } - - else if(data.IS_LAST) { - this.phase = 2; - if(this.pagelets.length === 1) { - this.executeNextPagelet(); - } - } - }, - - loadJSResources: function() { - this.phase = 3; - var isLoading = false; - - this.pagelets.forEach(function(Pagelet) { - if(Pagelet.JSResources.length === 0) { - Pagelet.onloadJS(); - } - }); - - this.pagelets.forEach(function(Pagelet) { - Pagelet.JSResources.forEach(function(Resource) { - Resource.start(); - isLoading = true; - }); - }); - - if(!isLoading) { - this.pagelets.forEach(function(Pagelet) { - Pagelet.onloadJS(); - }); - } - } - }; - - //=================================================================================================== - // Public-Access - //=================================================================================================== - return { - onPageletArrive: function(data) { - BigPipe.onPageletArrive(data); - }, - - reset: function() { - BigPipe.pagelets = []; - BigPipe.offset = 0; - BigPipe.phase = 0; - } - }; +//==============================================================================
+// Revealing Module Pattern
+//==============================================================================
+var BigPipe = (function() {
+ //==============================================================================
+ // Resource: Represents a single CSS or JS resource
+ //==============================================================================
+ function Resource(resourceURL, type) {
+ this.resourceURL = resourceURL;
+ this.callbacks = [];
+ this.done = false;
+ this.type = type;
+ }
+
+ //==============================================================================
+ // Resource: Loading the resource
+ //==============================================================================
+ Resource.prototype.start = function() {
+ if(this.type === 0) {
+ var element = document.createElement('link');
+ element.setAttribute('rel', 'stylesheet');
+ element.setAttribute('href', this.resourceURL);
+ }
+
+ else {
+ var element = document.createElement('script');
+ element.setAttribute('src', this.resourceURL);
+ element.async = true;
+ }
+
+ document.head.appendChild(element);
+
+ element.onload = function() {
+ this.executeCallbacks();
+ }.bind(this);
+
+ element.onerror = function() {
+ this.executeCallbacks();
+ }.bind(this);
+ };
+
+ //==============================================================================
+ // Resource: Register a new callback
+ //==============================================================================
+ Resource.prototype.registerCallback = function(callback) {
+ return this.callbacks.push(callback);
+ };
+
+ //==============================================================================
+ // Resource: Executes all registered callbacks
+ //==============================================================================
+ Resource.prototype.executeCallbacks = function() {
+ if(!this.done) {
+ this.done = true;
+
+ this.callbacks.forEach(function(callback) {
+ callback();
+ });
+ }
+ };
+
+ //==============================================================================
+ // Pagelet: Represents a single pagelet
+ //==============================================================================
+ function Pagelet(data, HTML) {
+ this.pageletID = data.ID;
+ this.HTML = HTML || "";
+ this.CSSFiles = data.RESOURCES.CSS;
+ this.JSFiles = data.RESOURCES.JS;
+ this.JSCode = data.RESOURCES.JS_CODE;
+
+ this.phase = 0;
+ this.CSSResources = [];
+ this.JSResources = [];
+
+ this.phaseDoneJS = data.PHASES;
+ }
+
+ //==============================================================================
+ // 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() {
+ var isStarted = false;
+
+ this.CSSFiles.forEach(function(resourceURL) {
+ this.attachCSSResource(new Resource(resourceURL, 0));
+ }.bind(this));
+
+ this.JSFiles.forEach(function(resourceURL) {
+ this.attachJSResource(new Resource(resourceURL, 1));
+ }.bind(this));
+
+ this.CSSResources.forEach(function(resource) {
+ isStarted = true;
+ resource.start();
+ }.bind(this));
+
+ // If no CSS resource was started (= no external CSS resources exists), then begin to inject the HTML
+ !isStarted && this.injectHTML();
+ };
+
+ //==============================================================================
+ // Pagelet: Attach a new CSS resource to the pagelet
+ //==============================================================================
+ Pagelet.prototype.attachCSSResource = function(resource) {
+ resource.registerCallback(this.onloadCSS.bind(this));
+ return this.CSSResources.push(resource);
+ };
+
+ //==============================================================================
+ // Pagelet: Attach a new JS resource to the pagelet
+ //==============================================================================
+ Pagelet.prototype.attachJSResource = function(resource) {
+ resource.registerCallback(this.onloadJS.bind(this));
+ return this.JSResources.push(resource);
+ };
+
+ //==============================================================================
+ // Pagelet: Executes the main JS code of the pagelet
+ //==============================================================================
+ Pagelet.prototype.executeJSCode = function() {
+ try {
+ globalExecution(this.JSCode);
+ } catch(e) {
+ console.error(this.pageletID + ": " + e);
+ }
+ };
+
+ //==============================================================================
+ // 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;
+ })) {
+ this.phaseDoneHandler(3);
+ this.executeJSCode();
+ this.phaseDoneHandler(4);
+ }
+ };
+
+ //==============================================================================
+ // 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;
+ })) {
+ this.injectHTML();
+ }
+ };
+
+ //==============================================================================
+ // Pagelet: Injects the HTML content into the DOM
+ //==============================================================================
+ Pagelet.prototype.injectHTML = function() {
+ this.phaseDoneHandler(1);
+
+ document.getElementById(this.pageletID).innerHTML = this.HTML;
+
+ this.phaseDoneHandler(2);
+
+ 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.loadJSResources();
+ }
+ };
+
+ //==============================================================================
+ // BigPipe
+ //==============================================================================
+ var BigPipe = {
+ pagelets: [],
+ phase: 0,
+ offset: 0,
+
+ executeNextPagelet: function() {
+ if(this.pagelets[this.offset]) {
+ this.pagelets[this.offset++].start();
+ }
+
+ else if(this.phase < 2) {
+ setTimeout(this.executeNextPagelet.bind(this), 20);
+ }
+ },
+
+ onPageletArrive: function(data, codeContainer) {
+ var pageletHTML = codeContainer.innerHTML;
+ pageletHTML = pageletHTML.substring(5, pageletHTML.length - 4);
+ codeContainer.parentNode.removeChild(codeContainer);
+
+ var pagelet = new Pagelet(data, pageletHTML);
+ pagelet.phaseDoneHandler(0);
+
+ if(this.pagelets.push(pagelet) && this.phase === 0 && !data.IS_LAST) {
+ this.phase = 1;
+ this.executeNextPagelet();
+ }
+
+ else if(data.IS_LAST) {
+ this.phase = 2;
+ if(this.pagelets.length === 1) {
+ this.executeNextPagelet();
+ }
+ }
+ },
+
+ loadJSResources: function() {
+ this.phase = 3;
+ var isLoading = false;
+
+ this.pagelets.forEach(function(Pagelet) {
+ if(Pagelet.JSResources.length === 0) {
+ Pagelet.onloadJS();
+ }
+ });
+
+ this.pagelets.forEach(function(Pagelet) {
+ Pagelet.JSResources.forEach(function(Resource) {
+ Resource.start();
+ isLoading = true;
+ });
+ });
+
+ if(!isLoading) {
+ this.pagelets.forEach(function(Pagelet) {
+ Pagelet.onloadJS();
+ });
+ }
+ }
+ };
+
+ //==============================================================================
+ // Public-Access
+ //==============================================================================
+ return {
+ onPageletArrive: function(data, codeContainer) {
+ BigPipe.onPageletArrive(data, codeContainer);
+ },
+
+ reset: function() {
+ BigPipe.pagelets = [];
+ BigPipe.offset = 0;
+ BigPipe.phase = 0;
+ }
+ };
})();
\ No newline at end of file diff --git a/static/blue.php b/static/blue.php index e715d83..5f9bacb 100755 --- a/static/blue.php +++ b/static/blue.php @@ -1,17 +1,17 @@ -<?php -#==================================================================================================== -# Disable cache -#==================================================================================================== -header('Cache-Control: no-cache, no-store, must-revalidate'); - -#==================================================================================================== -# Set Content-Type -#==================================================================================================== -header('Content-Type: text/css'); - -#==================================================================================================== -# Simulate long loading time -#==================================================================================================== -usleep(intval(rand(60, 100).'0000')); -?> +<?php
+#===============================================================================
+# Disable cache
+#===============================================================================
+header('Cache-Control: no-cache, no-store, must-revalidate');
+
+#===============================================================================
+# Set Content-Type
+#===============================================================================
+header('Content-Type: text/css');
+
+#===============================================================================
+# Simulate long loading time
+#===============================================================================
+usleep(intval(rand(60, 100).'0000'));
+?>
#blue{background:blue;}
\ No newline at end of file diff --git a/static/delayJS.php b/static/delayJS.php index 96e46c5..b4af48d 100755 --- a/static/delayJS.php +++ b/static/delayJS.php @@ -1,18 +1,18 @@ -<?php -#==================================================================================================== -# Disable cache -#==================================================================================================== -header('Cache-Control: no-cache, no-store, must-revalidate'); - -#==================================================================================================== -# Set Content-Type -#==================================================================================================== -header('Content-Type: text/javascript'); - -#==================================================================================================== -# Simulate long loading time -#==================================================================================================== -usleep(intval(rand(10, 40).'0000')); -?> - -console.log("EXTERNAL: Delayed javascript resource loaded"); +<?php
+#===============================================================================
+# Disable cache
+#===============================================================================
+header('Cache-Control: no-cache, no-store, must-revalidate');
+
+#===============================================================================
+# Set Content-Type
+#===============================================================================
+header('Content-Type: text/javascript');
+
+#===============================================================================
+# Simulate long loading time
+#===============================================================================
+usleep(intval(rand(10, 40).'0000'));
+?>
+
+console.log("EXTERNAL: Delayed javascript resource loaded");
diff --git a/static/green.php b/static/green.php index 65ded6f..f1c5f1b 100755 --- a/static/green.php +++ b/static/green.php @@ -1,17 +1,17 @@ -<?php -#==================================================================================================== -# Disable cache -#==================================================================================================== -header('Cache-Control: no-cache, no-store, must-revalidate'); - -#==================================================================================================== -# Set Content-Type -#==================================================================================================== -header('Content-Type: text/css'); - -#==================================================================================================== -# Simulate long loading time -#==================================================================================================== -usleep(intval(rand(60, 100).'0000')); -?> +<?php
+#===============================================================================
+# Disable cache
+#===============================================================================
+header('Cache-Control: no-cache, no-store, must-revalidate');
+
+#===============================================================================
+# Set Content-Type
+#===============================================================================
+header('Content-Type: text/css');
+
+#===============================================================================
+# Simulate long loading time
+#===============================================================================
+usleep(intval(rand(60, 100).'0000'));
+?>
#green{background:green;}
\ No newline at end of file diff --git a/static/red.php b/static/red.php index e6936e8..b54abb3 100755 --- a/static/red.php +++ b/static/red.php @@ -1,17 +1,17 @@ -<?php -#==================================================================================================== -# Disable cache -#==================================================================================================== -header('Cache-Control: no-cache, no-store, must-revalidate'); - -#==================================================================================================== -# Set Content-Type -#==================================================================================================== -header('Content-Type: text/css'); - -#==================================================================================================== -# Simulate long loading time -#==================================================================================================== -usleep(intval(rand(60, 100).'0000')); -?> +<?php
+#===============================================================================
+# Disable cache
+#===============================================================================
+header('Cache-Control: no-cache, no-store, must-revalidate');
+
+#===============================================================================
+# Set Content-Type
+#===============================================================================
+header('Content-Type: text/css');
+
+#===============================================================================
+# Simulate long loading time
+#===============================================================================
+usleep(intval(rand(60, 100).'0000'));
+?>
#red{background:red;}
\ No newline at end of file |