Multiple updates; new feature PhaseDoneJS

1 files changed, 28 insertions, 19 deletions

diff --git a/index.php b/index.php
index e8860d7..a713b07 100755
--- a/index.php
+++ b/index.php
@@ -1,39 +1,48 @@
 <?php
 #====================================================================================================
-# Cache deaktivieren
+# Deactivate caching
 #====================================================================================================
 header('Cache-Control: no-cache, no-store, must-revalidate');
 
 #====================================================================================================
-# Klassen und Funktionen einbinden
+# Include classes and functions
 #====================================================================================================
 require_once 'include/classes/BigPipe/BigPipe.php';
 require_once 'include/classes/BigPipe/Pagelet.php';
+require_once 'include/classes/BigPipe/DemoPagelet.php';
 require_once 'include/functions.php';
 
 #====================================================================================================
-# Pagelet mit rotem Hintergrund
+# Check if BigPipe should be disabled
 #====================================================================================================
-$PageletRed = new BigPipe\Pagelet();
-$PageletRed->addHTML('<section id="red" class="text">I AM JUST A PAGELET WITH RED BACKGROUND</section>');
+if(isset($_GET['bigpipe']) AND (int) $_GET['bigpipe'] === 0) {
+	// You can also check for search spiders and disable the pipeline
+	BigPipe\BigPipe::enablePipeline(FALSE);
+}
+
+#====================================================================================================
+# Pagelet with red background color
+#====================================================================================================
+$PageletRed = new BigPipe\DemoPagelet();
+$PageletRed->addHTML('<section id="red" class="text">I AM A PAGELET WITH RED BACKGROUND</section>');
 $PageletRed->addCSS('static/red.php');
 $PageletRed->addJS('static/delayJS.php');
 $PageletRed->addJSCode("document.getElementById('red').innerHTML += ' [JS executed]';document.getElementById('red').style.borderRadius = '30px';");
 
 #====================================================================================================
-# Pagelet mit blauem Hintergrund
+# Pagelet with blue background color
 #====================================================================================================
-$PageletBlue = new BigPipe\Pagelet(60);
-$PageletBlue->addHTML('<section id="blue" class="text">I AM JUST A PAGELET WITH BLUE BACKGROUND</section>');
+$PageletBlue = new BigPipe\DemoPagelet(BigPipe\Pagelet::PRIORITY_HIGH);
+$PageletBlue->addHTML('<section id="blue" class="text">I AM A PAGELET WITH BLUE BACKGROUND</section>');
 $PageletBlue->addCSS('static/blue.php');
 $PageletBlue->addJS('static/delayJS.php');
 $PageletBlue->addJSCode("document.getElementById('blue').innerHTML += ' [JS executed]';document.getElementById('blue').style.borderRadius = '30px';");
 
 #====================================================================================================
-# Pagelet mit grünem Hintergrund
+# Pagelet with green background color
 #====================================================================================================
-$PageletGreen = new BigPipe\Pagelet();
-$PageletGreen->addHTML('<section id="green" class="text">I AM JUST A PAGELET WITH GREEN BACKGROUND</section>');
+$PageletGreen = new BigPipe\DemoPagelet();
+$PageletGreen->addHTML('<section id="green" class="text">I AM A PAGELET WITH GREEN BACKGROUND</section>');
 $PageletGreen->addCSS('static/green.php');
 $PageletGreen->addJS('static/delayJS.php');
 $PageletGreen->addJSCode("document.getElementById('green').innerHTML += ' [JS executed]';document.getElementById('green').style.borderRadius = '30px';");
@@ -47,6 +56,7 @@ $PageletGreen->addJSCode("document.getElementById('green').innerHTML += ' [JS ex
 		html{margin:0;padding:0;background:#B9C3D2;font-family:Calibri,Sans-Serif;}
 		body{max-width:1200px;margin:0 auto;}
 		.text{color:white;margin-bottom:30px;padding:40px;border-radius:4px;font-weight:600;text-align:center;border:4px solid black;}
+		.hidden{display:none;}
 	</style>
 	<script>
 		var globalExecution = function globalExecution(code) {
@@ -54,17 +64,16 @@ $PageletGreen->addJSCode("document.getElementById('green').innerHTML += ' [JS ex
 		};
 	</script>
 	<script src="static/bigpipe.js"></script>
-	<script src="static/bigpipe-callbacks.js"></script>
-	<title>BigPipe Example</title>
+	<title>BigPipe Demo</title>
 </head>
 <body>
-<h1>BigPipe Example</h1>
-<p>Auf dieser Beispielseite werden insgesamt 3 Pagelets gerendert von denen alle jeweils eine CSS- und eine JS-Ressource haben. Wobei jede der CSS-Ressourcen die Hintergrundfarbe des zugehörigen Pagelets ändert.
-BigPipe wird hingehen und diese Pagelets der Reihe nach rendern. Dabei werden zuerst die zugehörigen CSS-Ressourcen geladen und dann der HTML-Code injiziert. Wenn dann von allen Pagelets die CSS-Ressourcen geladen
-und der HTML-Code injiziert ist, dann wird BigPipe die JS-Ressourcen der Pagelets einbinden und den statischen Javascript-Code (falls vorhanden) ausführen. Damit man den Pipeline-Effekt auf dieser Beispielseite auch
-sieht werden die CSS- und JS-Ressourcen über ein Delayscript geleitet. Debuginformationen findest du in der Javascript-Konsole.</p>
+<h1>BigPipe Demo</h1>
+<p>You see on this page 3 pagelets are getting rendered. Each pagelet has his own CSS and JS resources. The CSS resources change the background color of the pagelet (so you can see the effect when the CSS is loaded). The next step is to load the JS resources and they change the border-radius of the pagelet. After the loading of CSS and JS resources the static JS callback get executed. Additionally, the PhaseDoneJS callbacks performed for each pagelet phase. See the javascript console for more debug informations.</p>
+<p>PhaseDoneJS is a new feature of BigPipe which can execute JS callbacks for each pagelet phase. Each pagelet can have multiple PhaseDoneJS callbacks for each phase. The difference between a PhaseDoneJS callback and a static JS callback ("JS_CODE") is the following: The static JS callback always get executed (regardless of whether the pipeline is enabled or disabled) and can be a main part of the JS from the pagelet. But the PhaseDoneJS callbacks are only executed if the pipeline is enabled. They are suitable for application-specific stuff.</p>
+
+<p><b>More information [at this time only in german; sorry]:</b><br /><a href="https://blackphantom.de/artikel/bigpipe-website-pipelining-und-schnellerer-aufbau-durch-einzelne-pagelets/" target="_blank">https://blackphantom.de/artikel/bigpipe-website-pipelining-und-schnellerer-aufbau-durch-einzelne-pagelets/</a></p>
 
-<p><b>Weitere Informationen:</b> <a href="https://blackphantom.de/artikel/bigpipe-website-pipelining-und-schnellerer-aufbau-durch-einzelne-pagelets/" target="_blank">https://blackphantom.de/artikel/bigpipe-website-pipelining-und-schnellerer-aufbau-durch-einzelne-pagelets/</a></p>
+<p><b>Check if output flushing works on your server:</b><br /><a href="output-flushing-test.php">output-flushing-test.php</a></p>
 
 <?php
 echo $PageletRed;