4 files changed, 63 insertions, 4 deletions

diff --git a/include/classes/BigPipe/BigPipe.php b/include/classes/BigPipe/BigPipe.php
index 8cdda0b..1af4d8a 100755
--- a/include/classes/BigPipe/BigPipe.php
+++ b/include/classes/BigPipe/BigPipe.php
@@ -34,7 +34,7 @@ class BigPipe {
 	#===============================================================================
 	private static function singleResponse(Pagelet $Pagelet, $last = FALSE) {
 		$pageletJSON = [
-			'ID' => $Pagelet->getID(),
+			'ID' => $Pagelet->getID(), 'NEED' => $Pagelet->getDependencies(),
 			'RESOURCES' => ['CSS' => $Pagelet->getCSSFiles(), 'JS' => $Pagelet->getJSFiles(), 'JS_CODE' => removeLineBreaksAndTabs($Pagelet->getJSCode())],
 			'PHASES' => (object) $Pagelet->getPhaseDoneJS()
 		];
diff --git a/include/classes/BigPipe/DemoPagelet.php b/include/classes/BigPipe/DemoPagelet.php
index 83689ba..adb9f89 100755
--- a/include/classes/BigPipe/DemoPagelet.php
+++ b/include/classes/BigPipe/DemoPagelet.php
@@ -3,8 +3,8 @@ namespace BigPipe;
 
 class DemoPagelet extends Pagelet {
 
-	public function __construct($customID = NULL, $priority = Pagelet::PRIORITY_NORMAL) {
-		parent::__construct($customID, $priority);
+	public function __construct($customID = NULL, $priority = Pagelet::PRIORITY_NORMAL, array $dependencies = []) {
+		parent::__construct($customID, $priority, $dependencies);
 
 		$message = '%s: PhaseDoneJS for phase %s';
 
diff --git a/include/classes/BigPipe/Pagelet.php b/include/classes/BigPipe/Pagelet.php
index 22aadce..436e12a 100755
--- a/include/classes/BigPipe/Pagelet.php
+++ b/include/classes/BigPipe/Pagelet.php
@@ -8,6 +8,7 @@ class Pagelet {
 	private $JSFiles      = [];
 	private $CSSFiles     = [];
 	private $phaseDoneJS  = [];
+	private $dependencies = [];
 	private $tagname      = 'div';
 	private static $count = 0;
 
@@ -29,8 +30,9 @@ class Pagelet {
 	const PHASE_LOADJS  = 3; # After all the JS resources have been loaded
 	const PHASE_EXECJS  = 4; # After the static JS code has been executed
 
-	public function __construct($customID = NULL, $priority = self::PRIORITY_NORMAL) {
+	public function __construct($customID = NULL, $priority = self::PRIORITY_NORMAL, array $dependencies = []) {
 		$this->phaseDoneJS = array_pad($this->phaseDoneJS, 5, []);
+		$this->dependencies = $dependencies;
 		$this->ID = is_string($customID) ? $customID : 'P'.++self::$count;
 
 		BigPipe::addPagelet($this, $priority);
@@ -114,6 +116,13 @@ class Pagelet {
 	}
 
 	#===============================================================================
+	# Return all display dependencies
+	#===============================================================================
+	public function getDependencies(): array {
+		return $this->dependencies;
+	}
+
+	#===============================================================================
 	# Set custom placeholder tagname
 	#===============================================================================
 	public function setTagname($tagname) {
diff --git a/include/pagelets.php b/include/pagelets.php
new file mode 100644
index 0000000..176bc74
--- /dev/null
+++ b/include/pagelets.php
@@ -0,0 +1,50 @@
+<?php
+#===============================================================================
+# Pagelet with red background color
+#===============================================================================
+$PageletRed = new BigPipe\DemoPagelet('redPL');
+$PageletRed->addHTML('<section id="red" class="text">I AM A PAGELET WITH RED BACKGROUND</section>');
+$PageletRed->addCSS('static/red.php');
+$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 with blue background color
+#===============================================================================
+$PageletBlue = new BigPipe\DemoPagelet('bluePL', BigPipe\Pagelet::PRIORITY_HIGH);
+$PageletBlue->addHTML('<section id="blue" class="text">I AM A PAGELET WITH BLUE BACKGROUND</section>');
+$PageletBlue->addCSS('static/blue.php');
+$PageletRed->addCSS('static/red.php');
+$PageletBlue->addJS('static/delayJS.php');
+$PageletBlue->addJSCode("document.getElementById('blue').innerHTML += ' [JS executed]';document.getElementById('blue').style.borderRadius = '30px';");
+
+#===============================================================================
+# Pagelet with green background color
+#===============================================================================
+$PageletGreen = new BigPipe\DemoPagelet('greenPL');
+
+{
+	#===============================================================================
+	# Pagelet within $PageletGreen
+	#===============================================================================
+	// The third parameter is required to ensure that the $InnerPagelet will only be
+	// executed if the HTML from the $PageletGreen has ALREADY DISPLAYED. Otherwise,
+	// $InnerPagelet would not find his placeholder tag which is defined WITHIN the
+	// HTML on $PageletGreen. Of course, you can still add other pagelets as
+	// dependency. Then will $InnerPagelet only displayed if all dependencies are
+	// already displayed!
+	//
+	// NOTE: PRIORITY_HIGHEST is only set so that you can see, that this pagelet is
+	// the first which arrives, but it will first be displayed if his dependency
+	// pagelets are already displayed.
+
+	$InnerPagelet = new BigPipe\DemoPagelet('innerPL', BigPipe\Pagelet::PRIORITY_HIGHEST, [$PageletGreen->getID()]);
+	$InnerPagelet->addHTML('<section sytle="background:#FFF;padding:5px;">Inner Pagelet \(o_o)/</section>');
+}
+
+$PageletGreen->addHTML('<section id="green" class="text">I AM A PAGELET WITH GREEN BACKGROUND'.$InnerPagelet.'</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';");
+?>
\ No newline at end of file