From cf98519130492976488f501b4f6da672b0b7a349 Mon Sep 17 00:00:00 2001
From: Nils Haagen <nhaagen@cat06.de>
Date: Wed, 17 Jan 2018 16:33:20 +0100
Subject: [PATCH 1/8] expand slate if entry is active

---
 src/UI/Component/MainControls/Menu/Slate.php  | 37 +++++++++++++++++--
 .../Component/Layout/Renderer.php             | 11 ++----
 .../Component/MainControls/Menu/Renderer.php  | 10 ++++-
 .../Component/MainControls/Menu/Slate.php     | 21 ++++++++++-
 src/UI/examples/Layout/SideBar/sidebar.php    |  2 +-
 .../templates/js/MainControls/Menu/slate.js   |  2 +-
 6 files changed, 68 insertions(+), 15 deletions(-)

diff --git a/src/UI/Component/MainControls/Menu/Slate.php b/src/UI/Component/MainControls/Menu/Slate.php
index 01a837431551..91cf4996f13d 100644
--- a/src/UI/Component/MainControls/Menu/Slate.php
+++ b/src/UI/Component/MainControls/Menu/Slate.php
@@ -10,17 +10,48 @@
 interface Slate extends \ILIAS\UI\Component\Component, JavaScriptBindable {
 
 	/**
-	 * @return Plank[]
+	 * @return 	Plank[]
 	 */
 	public function getPlanks();
 
 	/**
-	 * @return Slate
+	 * @param 	bool 	$state
+	 * @return 	Slate
+	 */
+	public function withActive($state);
+
+	/**
+	 * @return 	bool
+	 */
+	public function getActive();
+
+	/**
+	 * @param 	string | Signal		$action
+	 * @return 	Slate
+	 */
+	//public function withBacklinkAction($action);
+
+	/**
+	 * @return 	string | Signal
+	 */
+	//public function getBacklinkAction();
+
+
+	/**
+	 * @return 	Signal
+	 */
+	//public function getReplaceContentSignal();
+
+
+
+
+	/**
+	 * @return 	Slate
 	 */
 	public function withResetSignals();
 
 	/**
-	 * @return Signal
+	 * @return 	Signal
 	 */
 	public function getToggleSignal();
 }
\ No newline at end of file
diff --git a/src/UI/Implementation/Component/Layout/Renderer.php b/src/UI/Implementation/Component/Layout/Renderer.php
index 4a8fa2c464f6..4b321a0c241a 100644
--- a/src/UI/Implementation/Component/Layout/Renderer.php
+++ b/src/UI/Implementation/Component/Layout/Renderer.php
@@ -31,14 +31,10 @@ protected function renderSidebar(Component\Layout\SideBar $component, RendererIn
         $entry_signal = $component->getEntryClickSignal();
         $counter = 0;
         foreach ($component->getEntries() as $entry) {
+            $engaged = ($counter === $component->getActive());
             $button = $entry->getButton()
-                ->appendOnClick($entry_signal);
-
-            if($counter === $component->getActive()) {
-                $button = $button->withEngagedState(true);
-            } else {
-                $button = $button->withEngagedState(false);
-            }
+                ->appendOnClick($entry_signal)
+                ->withEngagedState($engaged);
 
             $tpl->setCurrentBlock("trigger_item");
             $tpl->setVariable("BUTTON", $default_renderer->render($button));
@@ -46,6 +42,7 @@ protected function renderSidebar(Component\Layout\SideBar $component, RendererIn
 
             $slate = $entry->getSlate();
             if($slate) {
+                $slate = $slate->withActive($engaged);
                 $tpl->setCurrentBlock("slate_item");
                 $tpl->setVariable("SLATE", $default_renderer->render($slate));
                 $tpl->parseCurrentBlock();
diff --git a/src/UI/Implementation/Component/MainControls/Menu/Renderer.php b/src/UI/Implementation/Component/MainControls/Menu/Renderer.php
index 8b2f596414d3..7ac9f5912b4a 100644
--- a/src/UI/Implementation/Component/MainControls/Menu/Renderer.php
+++ b/src/UI/Implementation/Component/MainControls/Menu/Renderer.php
@@ -36,6 +36,15 @@ protected function renderSlate(Component\MainControls\Menu\Slate $component, Ren
                     })";
         });
 
+        if($component->getActive()) {
+            $component = $component->withAdditionalOnLoadCode(function($id) {
+                return "
+                    var slate = $('#{$id}');
+                    il.UI.maincontrols.menu.slate.toggle(slate);
+                ";
+            });
+        }
+
         $id = $this->bindJavaScript($component);
         $tpl->setVariable('ID', $id);
 
@@ -51,7 +60,6 @@ protected function renderSlate(Component\MainControls\Menu\Slate $component, Ren
             "close",
             "#"
         )->withOnClick($component->getToggleSignal());
-
         $tpl->setVariable("CLOSE", $default_renderer->render($closebtn));
 
         $backlinkbtn = $f->button()->iconographic(
diff --git a/src/UI/Implementation/Component/MainControls/Menu/Slate.php b/src/UI/Implementation/Component/MainControls/Menu/Slate.php
index 10637a046735..9991d9d16831 100644
--- a/src/UI/Implementation/Component/MainControls/Menu/Slate.php
+++ b/src/UI/Implementation/Component/MainControls/Menu/Slate.php
@@ -16,9 +16,9 @@ class Slate implements C\MainControls\Menu\Slate {
 	use JavaScriptBindable;
 
 	/**
-	 * @var \ILIAS\UI\Component\Button\Iconographic
+	 * @var bool
 	 */
-	private $button;
+	private $active;
 
 	/**
 	 * @var Plank[]
@@ -48,6 +48,23 @@ public function getPlanks() {
 		return $this->planks;
 	}
 
+	/**
+	 * @inheritdoc
+	 */
+	public function withActive($state) {
+		$this->checkBoolArg('state', $state);
+		$clone = clone $this;
+		$clone->active = $state;
+		return $clone;
+	}
+
+	/**
+	 * @inheritdoc
+	 */
+	public function getActive() {
+		return $this->active;
+	}
+
 	/**
 	 * Set the signals for this component
 	 */
diff --git a/src/UI/examples/Layout/SideBar/sidebar.php b/src/UI/examples/Layout/SideBar/sidebar.php
index 3ee4a2717bfd..ab29f3f8b0d3 100644
--- a/src/UI/examples/Layout/SideBar/sidebar.php
+++ b/src/UI/examples/Layout/SideBar/sidebar.php
@@ -25,7 +25,7 @@ function buildSidebar($f) {
     $extra_button = $f->button()->iconographic($glyph,'Extra', '#');
 
     $entries[] = $f->layout()->sidebarentry($extra_button);
-    return $f->layout()->sidebar($entries);
+    return $f->layout()->sidebar($entries, 2);
 
 }
 
diff --git a/src/UI/templates/js/MainControls/Menu/slate.js b/src/UI/templates/js/MainControls/Menu/slate.js
index 4041516eb23d..92c9d473d4f4 100644
--- a/src/UI/templates/js/MainControls/Menu/slate.js
+++ b/src/UI/templates/js/MainControls/Menu/slate.js
@@ -9,7 +9,7 @@ il.UI.maincontrols.menu = il.UI.maincontrols.menu || {};
 		var _cls_disengaged = 'disengaged';
 
 		var onClickTrigger = function(event, signalData, id) {
-			slate = $('#' + id);
+			var slate = $('#' + id);
 			slate.siblings().each(function(c,s){
 				_disengage($(s));
 			});

From c2789384b96474acf1811c3d0edba16cd81078f1 Mon Sep 17 00:00:00 2001
From: Nils Haagen <nhaagen@cat06.de>
Date: Wed, 17 Jan 2018 17:39:15 +0100
Subject: [PATCH 2/8] replace content (signal) for slate

---
 src/UI/Component/MainControls/Menu/Slate.php  | 14 +++++-------
 .../Component/MainControls/Menu/Renderer.php  | 10 +++++++--
 .../Component/MainControls/Menu/Slate.php     | 22 +++++++++++++++++++
 src/UI/examples/Layout/SideBar/sidebar.php    | 10 ++++++++-
 .../templates/js/MainControls/Menu/slate.js   | 13 ++++++++++-
 5 files changed, 57 insertions(+), 12 deletions(-)

diff --git a/src/UI/Component/MainControls/Menu/Slate.php b/src/UI/Component/MainControls/Menu/Slate.php
index 91cf4996f13d..07643b58ab9d 100644
--- a/src/UI/Component/MainControls/Menu/Slate.php
+++ b/src/UI/Component/MainControls/Menu/Slate.php
@@ -37,14 +37,6 @@ public function getActive();
 	//public function getBacklinkAction();
 
 
-	/**
-	 * @return 	Signal
-	 */
-	//public function getReplaceContentSignal();
-
-
-
-
 	/**
 	 * @return 	Slate
 	 */
@@ -54,4 +46,10 @@ public function withResetSignals();
 	 * @return 	Signal
 	 */
 	public function getToggleSignal();
+
+	/**
+	 * @return 	Signal
+	 */
+	public function getReplaceContentSignal();
+
 }
\ No newline at end of file
diff --git a/src/UI/Implementation/Component/MainControls/Menu/Renderer.php b/src/UI/Implementation/Component/MainControls/Menu/Renderer.php
index 7ac9f5912b4a..d654c2a5e11f 100644
--- a/src/UI/Implementation/Component/MainControls/Menu/Renderer.php
+++ b/src/UI/Implementation/Component/MainControls/Menu/Renderer.php
@@ -28,12 +28,18 @@ protected function renderSlate(Component\MainControls\Menu\Slate $component, Ren
         $tpl = $this->getTemplate("Menu/tpl.slate.html", true, true);
 
         $toggle_signal = $component->getToggleSignal();
+        $replace_signal = $component->getReplaceContentSignal();
 
-        $component = $component->withOnLoadCode(function($id) use ($toggle_signal) {
+        $component = $component->withOnLoadCode(function($id) use ($toggle_signal, $replace_signal) {
             return "$(document).on('{$toggle_signal}', function(event, signalData) {
                         il.UI.maincontrols.menu.slate.onClickTrigger(event, signalData, '{$id}');
                         return false;
-                    })";
+                    });
+                    $(document).on('{$replace_signal}', function(event, signalData) {
+                        il.UI.maincontrols.menu.slate.replaceContentFromSignal(event, signalData, '{$id}');
+                        return false;
+                    });
+                    ";
         });
 
         if($component->getActive()) {
diff --git a/src/UI/Implementation/Component/MainControls/Menu/Slate.php b/src/UI/Implementation/Component/MainControls/Menu/Slate.php
index 9991d9d16831..6b4bd725873e 100644
--- a/src/UI/Implementation/Component/MainControls/Menu/Slate.php
+++ b/src/UI/Implementation/Component/MainControls/Menu/Slate.php
@@ -30,6 +30,11 @@ class Slate implements C\MainControls\Menu\Slate {
 	 */
 	protected $toggle_signal;
 
+	/**
+	 * @var Signal
+	 */
+	protected $replace_signal;
+
 
 	public function __construct(
 		array $planks,
@@ -48,6 +53,15 @@ public function getPlanks() {
 		return $this->planks;
 	}
 
+	/**
+	 * @param 	Plank 	$plank
+	 */
+	public function withAdditionalPlank($plank) {
+		$clone = clone $this;
+		$clone->planks[] = $plank;
+		return $clone;
+	}
+
 	/**
 	 * @inheritdoc
 	 */
@@ -70,6 +84,7 @@ public function getActive() {
 	 */
 	protected function initSignals() {
 		$this->toggle_signal = $this->signal_generator->create();
+		$this->replace_signal = $this->signal_generator->create();
 	}
 
 	/**
@@ -88,4 +103,11 @@ public function getToggleSignal() {
 		return $this->toggle_signal;
 	}
 
+	/**
+	 * @inheritdoc
+	 */
+	public function getReplaceContentSignal() {
+		return $this->replace_signal;
+	}
+
 }
diff --git a/src/UI/examples/Layout/SideBar/sidebar.php b/src/UI/examples/Layout/SideBar/sidebar.php
index ab29f3f8b0d3..85d436f5d2a6 100644
--- a/src/UI/examples/Layout/SideBar/sidebar.php
+++ b/src/UI/examples/Layout/SideBar/sidebar.php
@@ -8,12 +8,20 @@ function buildSidebar($f) {
     foreach(range(1,4) as $c){
         //build planks and slate
         $planks = array(
-            buildPlank($f),
             buildPlank($f),
             buildPlank($f)
         );
         $slate =$f->maincontrols()->menu()->slate($planks);
 
+        $replace_signal = $slate->getReplaceContentSignal();
+        $button = $f->button()->standard('replace content', '#')->withOnClick($replace_signal);
+        $plank = $f->maincontrols()->menu()->plank()->withContents([
+            $f->legacy('<h1>replace</h1>'),
+            $f->legacy('this will replace the contents of the entire slate'),
+            $button
+        ]);
+        $slate =$slate->withAdditionalPlank($plank);
+
         //triggerer
         $icon = $f->icon()->standard('sidebar_trigger', '')->withSize('medium');
         $button = $f->button()->iconographic($icon->withAbbreviation('X'), "Button $i", '#');
diff --git a/src/UI/templates/js/MainControls/Menu/slate.js b/src/UI/templates/js/MainControls/Menu/slate.js
index 92c9d473d4f4..77801c01fed5 100644
--- a/src/UI/templates/js/MainControls/Menu/slate.js
+++ b/src/UI/templates/js/MainControls/Menu/slate.js
@@ -43,9 +43,20 @@ il.UI.maincontrols.menu = il.UI.maincontrols.menu || {};
 			slate.addClass(_cls_disengaged);
 		};
 
+		var replaceContentFromSignal = function (event, signalData, id) {
+            console.group('REPLACE CONTENT');
+            console.log(event);
+            console.log(signalData);
+            console.log(id);
+            console.groupEnd();
+			var slate_contents = $('#' + id + ' .il-maincontrol-menu-slate-content');
+			slate_contents.html('replaced!');
+
+        }
 		return {
 			onClickTrigger: onClickTrigger,
-			toggle : toggle
+			toggle : toggle,
+			replaceContentFromSignal: replaceContentFromSignal
 		}
 
 	})($);

From a92fabeca5b1c1d2c2d8ee8877fcded513260339 Mon Sep 17 00:00:00 2001
From: Nils Haagen <nhaagen@cat06.de>
Date: Wed, 17 Jan 2018 17:56:29 +0100
Subject: [PATCH 3/8] disengage all buttons for closed slates

---
 src/UI/templates/js/MainControls/Menu/slate.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/UI/templates/js/MainControls/Menu/slate.js b/src/UI/templates/js/MainControls/Menu/slate.js
index 77801c01fed5..78fda91948ab 100644
--- a/src/UI/templates/js/MainControls/Menu/slate.js
+++ b/src/UI/templates/js/MainControls/Menu/slate.js
@@ -29,18 +29,22 @@ il.UI.maincontrols.menu = il.UI.maincontrols.menu || {};
 		};
 
 		var _engage = function(slate) {
-			var pagediv = $('.il-layout-page');
 			slate.removeClass(_cls_disengaged);
 			slate.addClass(_cls_engaged);
+
+			var pagediv = $('.il-layout-page');
 			pagediv.addClass('with-engaged-slates');
 		};
 
 		var _disengage = function(slate) {
-			var pagediv = $('.il-layout-page');
-			pagediv.removeClass('with-engaged-slates');
-
 			slate.removeClass(_cls_engaged);
 			slate.addClass(_cls_disengaged);
+
+			var pagediv = $('.il-layout-page');
+			pagediv.removeClass('with-engaged-slates');
+			$('.il-sidebar-triggers .btn').each( function(index, obj) {
+				$(obj).removeClass(_cls_engaged);
+            });
 		};
 
 		var replaceContentFromSignal = function (event, signalData, id) {

From d35313ce94458b7646dfa4da27e6bb849849de7c Mon Sep 17 00:00:00 2001
From: Nils Haagen <nhaagen@cat06.de>
Date: Wed, 17 Jan 2018 18:19:04 +0100
Subject: [PATCH 4/8] propagate signal from sidebar to slate

---
 .../Implementation/Component/Layout/Renderer.php |  4 ++--
 .../Component/MainControls/Menu/Renderer.php     |  7 ++++++-
 .../Component/MainControls/Menu/Slate.php        | 16 ++++++++++++++++
 src/UI/templates/js/MainControls/Menu/slate.js   |  3 +++
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/UI/Implementation/Component/Layout/Renderer.php b/src/UI/Implementation/Component/Layout/Renderer.php
index 4b321a0c241a..f8b69a9931b6 100644
--- a/src/UI/Implementation/Component/Layout/Renderer.php
+++ b/src/UI/Implementation/Component/Layout/Renderer.php
@@ -42,7 +42,8 @@ protected function renderSidebar(Component\Layout\SideBar $component, RendererIn
 
             $slate = $entry->getSlate();
             if($slate) {
-                $slate = $slate->withActive($engaged);
+                $slate = $slate->withActive($engaged) //show?
+                    ->withCloseSignal($entry_signal); //disengage button on close
                 $tpl->setCurrentBlock("slate_item");
                 $tpl->setVariable("SLATE", $default_renderer->render($slate));
                 $tpl->parseCurrentBlock();
@@ -53,7 +54,6 @@ protected function renderSidebar(Component\Layout\SideBar $component, RendererIn
         $component = $component->withOnLoadCode(function($id) use ($entry_signal) {
             $registry = '';
             $registry .= "$(document).on('{$entry_signal}', function(event, signalData) {
-
                 var down_class = 'engaged';
 
                 //set all non-triggerer to inactive
diff --git a/src/UI/Implementation/Component/MainControls/Menu/Renderer.php b/src/UI/Implementation/Component/MainControls/Menu/Renderer.php
index d654c2a5e11f..9d0636d5043a 100644
--- a/src/UI/Implementation/Component/MainControls/Menu/Renderer.php
+++ b/src/UI/Implementation/Component/MainControls/Menu/Renderer.php
@@ -65,7 +65,12 @@ protected function renderSlate(Component\MainControls\Menu\Slate $component, Ren
             $f->glyph()->back("#"),
             "close",
             "#"
-        )->withOnClick($component->getToggleSignal());
+        )
+        ->withOnClick($component->getToggleSignal())
+        ->appendOnClick($component->getCloseSignal());
+
+        //->withOnClick();
+
         $tpl->setVariable("CLOSE", $default_renderer->render($closebtn));
 
         $backlinkbtn = $f->button()->iconographic(
diff --git a/src/UI/Implementation/Component/MainControls/Menu/Slate.php b/src/UI/Implementation/Component/MainControls/Menu/Slate.php
index 6b4bd725873e..92a803076660 100644
--- a/src/UI/Implementation/Component/MainControls/Menu/Slate.php
+++ b/src/UI/Implementation/Component/MainControls/Menu/Slate.php
@@ -55,6 +55,7 @@ public function getPlanks() {
 
 	/**
 	 * @param 	Plank 	$plank
+	 * *return Slate
 	 */
 	public function withAdditionalPlank($plank) {
 		$clone = clone $this;
@@ -62,6 +63,21 @@ public function withAdditionalPlank($plank) {
 		return $clone;
 	}
 
+	/**
+	 * this is fired by the close-button.
+	 */
+	public function withCloseSignal($signal) {
+		$clone = clone $this;
+		$clone->close_signal = $signal;
+		return $clone;
+	}
+
+	public function getCloseSignal() {
+		return $this->close_signal;
+	}
+
+
+
 	/**
 	 * @inheritdoc
 	 */
diff --git a/src/UI/templates/js/MainControls/Menu/slate.js b/src/UI/templates/js/MainControls/Menu/slate.js
index 78fda91948ab..27c6b2cbf893 100644
--- a/src/UI/templates/js/MainControls/Menu/slate.js
+++ b/src/UI/templates/js/MainControls/Menu/slate.js
@@ -42,9 +42,12 @@ il.UI.maincontrols.menu = il.UI.maincontrols.menu || {};
 
 			var pagediv = $('.il-layout-page');
 			pagediv.removeClass('with-engaged-slates');
+			/*
+			//should be an additional signal the slate recieves...
 			$('.il-sidebar-triggers .btn').each( function(index, obj) {
 				$(obj).removeClass(_cls_engaged);
             });
+            */
 		};
 
 		var replaceContentFromSignal = function (event, signalData, id) {

From 57c94b0069f05e051b95e0bda2a2fc40f8031466 Mon Sep 17 00:00:00 2001
From: Nils Haagen <nhaagen@cat06.de>
Date: Thu, 18 Jan 2018 10:47:54 +0100
Subject: [PATCH 5/8] slate with navigation-history

---
 .../Component/MainControls/Menu/Renderer.php  | 11 +++--
 .../Component/MainControls/Menu/Slate.php     | 41 ++++++++++++-------
 src/UI/examples/Layout/Page/ui.php            | 27 ------------
 src/UI/examples/Layout/SideBar/sidebar.php    | 36 ++++++++++++++--
 .../default/MainControls/Menu/tpl.slate.html  |  2 +-
 .../templates/js/MainControls/Menu/slate.js   | 39 ++++++++++++++++--
 6 files changed, 103 insertions(+), 53 deletions(-)

diff --git a/src/UI/Implementation/Component/MainControls/Menu/Renderer.php b/src/UI/Implementation/Component/MainControls/Menu/Renderer.php
index 9d0636d5043a..9ac53d9c7fae 100644
--- a/src/UI/Implementation/Component/MainControls/Menu/Renderer.php
+++ b/src/UI/Implementation/Component/MainControls/Menu/Renderer.php
@@ -29,8 +29,9 @@ protected function renderSlate(Component\MainControls\Menu\Slate $component, Ren
 
         $toggle_signal = $component->getToggleSignal();
         $replace_signal = $component->getReplaceContentSignal();
+        $navback_signal = $component->getNavigateBackSignal();
 
-        $component = $component->withOnLoadCode(function($id) use ($toggle_signal, $replace_signal) {
+        $component = $component->withOnLoadCode(function($id) use ($toggle_signal, $replace_signal, $navback_signal) {
             return "$(document).on('{$toggle_signal}', function(event, signalData) {
                         il.UI.maincontrols.menu.slate.onClickTrigger(event, signalData, '{$id}');
                         return false;
@@ -39,6 +40,10 @@ protected function renderSlate(Component\MainControls\Menu\Slate $component, Ren
                         il.UI.maincontrols.menu.slate.replaceContentFromSignal(event, signalData, '{$id}');
                         return false;
                     });
+                    $(document).on('{$navback_signal}', function(event, signalData) {
+                        il.UI.maincontrols.menu.slate.navigateBack('{$id}');
+                        return false;
+                    });
                     ";
         });
 
@@ -66,7 +71,7 @@ protected function renderSlate(Component\MainControls\Menu\Slate $component, Ren
             "close",
             "#"
         )
-        ->withOnClick($component->getToggleSignal())
+        ->withOnClick($toggle_signal)
         ->appendOnClick($component->getCloseSignal());
 
         //->withOnClick();
@@ -77,7 +82,7 @@ protected function renderSlate(Component\MainControls\Menu\Slate $component, Ren
             $f->glyph()->back("#"),
             "back",
             "#"
-        )->withOnClick($component->getToggleSignal());
+        )->withOnClick($navback_signal);
         $tpl->setVariable("BACKLINK", $default_renderer->render($backlinkbtn));
 
         return $tpl->get();
diff --git a/src/UI/Implementation/Component/MainControls/Menu/Slate.php b/src/UI/Implementation/Component/MainControls/Menu/Slate.php
index 92a803076660..f507a53b5ad9 100644
--- a/src/UI/Implementation/Component/MainControls/Menu/Slate.php
+++ b/src/UI/Implementation/Component/MainControls/Menu/Slate.php
@@ -35,6 +35,11 @@ class Slate implements C\MainControls\Menu\Slate {
 	 */
 	protected $replace_signal;
 
+	/**
+	 * @var Signal
+	 */
+	protected $navback_signal;
+
 
 	public function __construct(
 		array $planks,
@@ -63,21 +68,6 @@ public function withAdditionalPlank($plank) {
 		return $clone;
 	}
 
-	/**
-	 * this is fired by the close-button.
-	 */
-	public function withCloseSignal($signal) {
-		$clone = clone $this;
-		$clone->close_signal = $signal;
-		return $clone;
-	}
-
-	public function getCloseSignal() {
-		return $this->close_signal;
-	}
-
-
-
 	/**
 	 * @inheritdoc
 	 */
@@ -95,12 +85,26 @@ public function getActive() {
 		return $this->active;
 	}
 
+	/**
+	 * this is fired by the close-button.
+	 */
+	public function withCloseSignal($signal) {
+		$clone = clone $this;
+		$clone->close_signal = $signal;
+		return $clone;
+	}
+
+	public function getCloseSignal() {
+		return $this->close_signal;
+	}
+
 	/**
 	 * Set the signals for this component
 	 */
 	protected function initSignals() {
 		$this->toggle_signal = $this->signal_generator->create();
 		$this->replace_signal = $this->signal_generator->create();
+		$this->navback_signal = $this->signal_generator->create();
 	}
 
 	/**
@@ -126,4 +130,11 @@ public function getReplaceContentSignal() {
 		return $this->replace_signal;
 	}
 
+	/**
+	 * @inheritdoc
+	 */
+	public function getNavigateBackSignal() {
+		return $this->navback_signal;
+	}
+
 }
diff --git a/src/UI/examples/Layout/Page/ui.php b/src/UI/examples/Layout/Page/ui.php
index 50bc984f3bb8..3a5151030b78 100644
--- a/src/UI/examples/Layout/Page/ui.php
+++ b/src/UI/examples/Layout/Page/ui.php
@@ -4,25 +4,6 @@ function ui() {
 	return '<a href="src/UI/examples/Layout/Page/ui.php?new_ui=1">see UI</a>';
 }
 
-function buildTreePlank($f) {
-    include_once ("./Services/Repository/classes/class.ilRepositoryExplorer.php");
-    global $DIC;
-    $tree = $DIC->repositoryTree();
-    $top_node = 0;
-
-    $exp = new ilRepositoryExplorer("ilias.php?baseClass=ilRepositoryGUI&amp;cmd=goto", $top_node);
-    $exp->setExpandTarget('src/UI/examples/Layout/Page/ui.php?new_ui=1');
-    //$exp->setUseStandardFrame(false);
-    //$exp->setFrameUpdater("tree", "updater");
-    //$exp->setTargetGet("ref_id");
-    $expanded = $tree->readRootId();
-    $exp->setExpand($expanded);
-    $exp->setOutput(0, 1, 0);
-    $out =  $exp->getOutput(false);
-
-    return $f->maincontrols()->menu()->plank()
-        ->withContents([$f->legacy($out)]);
-}
 
 
 if ($_GET['new_ui'] == '1') {
@@ -50,17 +31,9 @@ function buildTreePlank($f) {
 	);
 
 
-
 	$metabar = buildMetabar($f);
 	$sidebar = buildSidebar($f);
 
-    //tree in plank
-    $glyph = $f->glyph()->settings();
-    $button = $f->button()->iconographic($glyph,'Tree', '#');
-    $slate = $f->maincontrols()->menu()->slate(array(buildTreePlank($f)));
-    //$sidebar = $sidebar->withEntry($button, $slate);
-
-
 	$page = $f->layout()->page($content)
 		->withMetabar($metabar)
 		->withSidebar($sidebar)
diff --git a/src/UI/examples/Layout/SideBar/sidebar.php b/src/UI/examples/Layout/SideBar/sidebar.php
index 85d436f5d2a6..9ae5b00f1028 100644
--- a/src/UI/examples/Layout/SideBar/sidebar.php
+++ b/src/UI/examples/Layout/SideBar/sidebar.php
@@ -11,7 +11,7 @@ function buildSidebar($f) {
             buildPlank($f),
             buildPlank($f)
         );
-        $slate =$f->maincontrols()->menu()->slate($planks);
+        $slate = $f->maincontrols()->menu()->slate($planks);
 
         $replace_signal = $slate->getReplaceContentSignal();
         $button = $f->button()->standard('replace content', '#')->withOnClick($replace_signal);
@@ -20,14 +20,20 @@ function buildSidebar($f) {
             $f->legacy('this will replace the contents of the entire slate'),
             $button
         ]);
-        $slate =$slate->withAdditionalPlank($plank);
+        $slate = $slate->withAdditionalPlank($plank);
 
         //triggerer
         $icon = $f->icon()->standard('sidebar_trigger', '')->withSize('medium');
-        $button = $f->button()->iconographic($icon->withAbbreviation('X'), "Button $i", '#');
+        $button = $f->button()->iconographic($icon->withAbbreviation('X'), "Button", '#');
         $entries[] = $f->layout()->sidebarentry($button, $slate);
     }
 
+    $icon = $f->icon()->standard('sidebar_trigger', '')->withSize('medium');
+    $button = $f->button()->iconographic($icon->withAbbreviation('X'), "Tree", '#');
+    $slate = $f->maincontrols()->menu()->slate([buildTreePlank($f)]);
+    $entries[] = $f->layout()->sidebarentry($button, $slate);
+
+
 
     $glyph = $f->glyph()->user();
     $extra_button = $f->button()->iconographic($glyph,'Extra', '#');
@@ -37,6 +43,30 @@ function buildSidebar($f) {
 
 }
 
+
+function buildTreePlank($f) {
+    include_once ("./Services/Repository/classes/class.ilRepositoryExplorer.php");
+    global $DIC;
+    $tree = $DIC->repositoryTree();
+    $top_node = 0;
+
+    $exp = new ilRepositoryExplorer("ilias.php?baseClass=ilRepositoryGUI&amp;cmd=goto", $top_node);
+    $exp->setExpandTarget('src/UI/examples/Layout/Page/ui.php?new_ui=1');
+    //$exp->setUseStandardFrame(false);
+    //$exp->setFrameUpdater("tree", "updater");
+    //$exp->setTargetGet("ref_id");
+    $expanded = $tree->readRootId();
+    $exp->setExpand($expanded);
+    $exp->setOutput(0, 1, 0);
+    $out =  $exp->getOutput(false);
+
+    return $f->maincontrols()->menu()->plank()
+        ->withContents([$f->legacy($out)]);
+}
+
+
+
+
 function sidebar() {
     global $DIC;
     $f = $DIC->ui()->factory();
diff --git a/src/UI/templates/default/MainControls/Menu/tpl.slate.html b/src/UI/templates/default/MainControls/Menu/tpl.slate.html
index b47f369cbeaf..52cdfd3458e9 100644
--- a/src/UI/templates/default/MainControls/Menu/tpl.slate.html
+++ b/src/UI/templates/default/MainControls/Menu/tpl.slate.html
@@ -1,6 +1,6 @@
 <div class="il-maincontrol-menu-slate disengaged" id="{ID}">
 	<!-- BEGIN backlink -->
-	<div class="il-maincontrol-menu-slate-back">
+	<div class="il-maincontrol-menu-slate-back inactive">
 		{BACKLINK}
 	</div>
 	<!-- END backlink -->
diff --git a/src/UI/templates/js/MainControls/Menu/slate.js b/src/UI/templates/js/MainControls/Menu/slate.js
index 27c6b2cbf893..61081a631345 100644
--- a/src/UI/templates/js/MainControls/Menu/slate.js
+++ b/src/UI/templates/js/MainControls/Menu/slate.js
@@ -7,6 +7,7 @@ il.UI.maincontrols.menu = il.UI.maincontrols.menu || {};
 	menu.slate = (function($) {
 		var _cls_engaged = 'engaged';
 		var _cls_disengaged = 'disengaged';
+		var _history = [];
 
 		var onClickTrigger = function(event, signalData, id) {
 			var slate = $('#' + id);
@@ -51,19 +52,49 @@ il.UI.maincontrols.menu = il.UI.maincontrols.menu || {};
 		};
 
 		var replaceContentFromSignal = function (event, signalData, id) {
-            console.group('REPLACE CONTENT');
+/*            console.group('REPLACE CONTENT');
             console.log(event);
             console.log(signalData);
             console.log(id);
             console.groupEnd();
-			var slate_contents = $('#' + id + ' .il-maincontrol-menu-slate-content');
+*/
+			var slate_contents = $('#' + id + ' .il-maincontrol-menu-slate-content'),
+				slate_backbtn = $('#' + id + ' .il-maincontrol-menu-slate-back');
+
 			slate_contents.html('replaced!');
 
-        }
+			_appendToHistory(id, slate_contents);
+			slate_backbtn.removeClass('inactive');
+			slate_backbtn.addClass('active');
+
+        };
+
+
+        var _appendToHistory = function (id, slate_contents) {
+        	if(! _history[id]) {
+        		_history[id] = [];
+        	}
+        	_history[id].push(slate_contents.clone(true, true)); //clone with events, in depth
+        };
+
+        var navigateBack = function (id) {
+        	var slate_contents = $('#' + id + ' .il-maincontrol-menu-slate-content'),
+        		slate_backbtn = $('#' + id + ' .il-maincontrol-menu-slate-back');
+        	content = _history[id].pop();
+        	slate_contents.replaceWith(content);
+        	if(_history[id].length === 0) {
+        		slate_backbtn.removeClass('active');
+				slate_backbtn.addClass('inactive');
+        	}
+        };
+
+
+
 		return {
 			onClickTrigger: onClickTrigger,
 			toggle : toggle,
-			replaceContentFromSignal: replaceContentFromSignal
+			replaceContentFromSignal: replaceContentFromSignal,
+			navigateBack: navigateBack
 		}
 
 	})($);

From 36148b8104d81aed099ea87bd26c6f5783e50eea Mon Sep 17 00:00:00 2001
From: Nils Haagen <nhaagen@cat06.de>
Date: Thu, 18 Jan 2018 10:55:59 +0100
Subject: [PATCH 6/8] navigate back in slate

---
 .../default/MainControls/Menu/tpl.slate.html  |  2 --
 .../templates/js/MainControls/Menu/slate.js   | 20 +++----------------
 2 files changed, 3 insertions(+), 19 deletions(-)

diff --git a/src/UI/templates/default/MainControls/Menu/tpl.slate.html b/src/UI/templates/default/MainControls/Menu/tpl.slate.html
index 52cdfd3458e9..fc4f0eb8de0d 100644
--- a/src/UI/templates/default/MainControls/Menu/tpl.slate.html
+++ b/src/UI/templates/default/MainControls/Menu/tpl.slate.html
@@ -1,9 +1,7 @@
 <div class="il-maincontrol-menu-slate disengaged" id="{ID}">
-	<!-- BEGIN backlink -->
 	<div class="il-maincontrol-menu-slate-back inactive">
 		{BACKLINK}
 	</div>
-	<!-- END backlink -->
 
 	<div class="il-maincontrol-menu-slate-content">
 	<!-- BEGIN plank_item -->{PLANK}<!-- END plank_item -->
diff --git a/src/UI/templates/js/MainControls/Menu/slate.js b/src/UI/templates/js/MainControls/Menu/slate.js
index 61081a631345..0f7bdaf15bc0 100644
--- a/src/UI/templates/js/MainControls/Menu/slate.js
+++ b/src/UI/templates/js/MainControls/Menu/slate.js
@@ -43,33 +43,19 @@ il.UI.maincontrols.menu = il.UI.maincontrols.menu || {};
 
 			var pagediv = $('.il-layout-page');
 			pagediv.removeClass('with-engaged-slates');
-			/*
-			//should be an additional signal the slate recieves...
-			$('.il-sidebar-triggers .btn').each( function(index, obj) {
-				$(obj).removeClass(_cls_engaged);
-            });
-            */
 		};
 
 		var replaceContentFromSignal = function (event, signalData, id) {
-/*            console.group('REPLACE CONTENT');
-            console.log(event);
-            console.log(signalData);
-            console.log(id);
-            console.groupEnd();
-*/
 			var slate_contents = $('#' + id + ' .il-maincontrol-menu-slate-content'),
 				slate_backbtn = $('#' + id + ' .il-maincontrol-menu-slate-back');
 
+			_appendToHistory(id, slate_contents);
 			slate_contents.html('replaced!');
 
-			_appendToHistory(id, slate_contents);
 			slate_backbtn.removeClass('inactive');
 			slate_backbtn.addClass('active');
-
         };
 
-
         var _appendToHistory = function (id, slate_contents) {
         	if(! _history[id]) {
         		_history[id] = [];
@@ -80,16 +66,16 @@ il.UI.maincontrols.menu = il.UI.maincontrols.menu || {};
         var navigateBack = function (id) {
         	var slate_contents = $('#' + id + ' .il-maincontrol-menu-slate-content'),
         		slate_backbtn = $('#' + id + ' .il-maincontrol-menu-slate-back');
+
         	content = _history[id].pop();
         	slate_contents.replaceWith(content);
+
         	if(_history[id].length === 0) {
         		slate_backbtn.removeClass('active');
 				slate_backbtn.addClass('inactive');
         	}
         };
 
-
-
 		return {
 			onClickTrigger: onClickTrigger,
 			toggle : toggle,

From 71295f8bd70c9efd2084a7de818e4bb13438543e Mon Sep 17 00:00:00 2001
From: Nils Haagen <nhaagen@cat06.de>
Date: Thu, 18 Jan 2018 14:35:40 +0100
Subject: [PATCH 7/8] use icons from example (instead of templates)

---
 .../Component/Layout/Renderer.php             |  5 +-
 .../Component/MainControls/Menu/Renderer.php  | 10 +--
 .../Component/MainControls/Menu/Slate.php     | 10 +++
 .../examples/Layout/Page}/icon-sb-cockpit.svg |  0
 .../UI/examples/Layout/Page}/icon-sb-help.svg |  0
 .../UI/examples/Layout/Page}/icon-sb-more.svg |  0
 .../Layout/Page}/icon-sb-navigation.svg       |  0
 .../examples/Layout/Page}/icon-sb-search.svg  |  0
 src/UI/examples/Layout/Page/page.php          | 89 ++++++++++++++++++-
 src/UI/examples/Layout/SideBar/sidebar.php    |  4 +-
 .../templates/js/MainControls/Menu/slate.js   |  6 +-
 11 files changed, 111 insertions(+), 13 deletions(-)
 rename {templates/default/images => src/UI/examples/Layout/Page}/icon-sb-cockpit.svg (100%)
 mode change 100644 => 100755
 rename {templates/default/images => src/UI/examples/Layout/Page}/icon-sb-help.svg (100%)
 mode change 100644 => 100755
 rename {templates/default/images => src/UI/examples/Layout/Page}/icon-sb-more.svg (100%)
 mode change 100644 => 100755
 rename {templates/default/images => src/UI/examples/Layout/Page}/icon-sb-navigation.svg (100%)
 mode change 100644 => 100755
 rename {templates/default/images => src/UI/examples/Layout/Page}/icon-sb-search.svg (100%)
 mode change 100644 => 100755

diff --git a/src/UI/Implementation/Component/Layout/Renderer.php b/src/UI/Implementation/Component/Layout/Renderer.php
index f8b69a9931b6..72997f58525b 100644
--- a/src/UI/Implementation/Component/Layout/Renderer.php
+++ b/src/UI/Implementation/Component/Layout/Renderer.php
@@ -32,6 +32,9 @@ protected function renderSidebar(Component\Layout\SideBar $component, RendererIn
         $counter = 0;
         foreach ($component->getEntries() as $entry) {
             $engaged = ($counter === $component->getActive());
+            $slate = $entry->getSlate();
+
+            //if a buttons comes twith a slate, sidebarentry will set the action
             $button = $entry->getButton()
                 ->appendOnClick($entry_signal)
                 ->withEngagedState($engaged);
@@ -40,7 +43,6 @@ protected function renderSidebar(Component\Layout\SideBar $component, RendererIn
             $tpl->setVariable("BUTTON", $default_renderer->render($button));
             $tpl->parseCurrentBlock();
 
-            $slate = $entry->getSlate();
             if($slate) {
                 $slate = $slate->withActive($engaged) //show?
                     ->withCloseSignal($entry_signal); //disengage button on close
@@ -63,7 +65,6 @@ protected function renderSidebar(Component\Layout\SideBar $component, RendererIn
                         $(obj).removeClass(down_class);
                     }
                 });
-
                 //toggle triggerer active/inactive
                 if(signalData.triggerer.hasClass(down_class)) {
                     signalData.triggerer.removeClass(down_class);
diff --git a/src/UI/Implementation/Component/MainControls/Menu/Renderer.php b/src/UI/Implementation/Component/MainControls/Menu/Renderer.php
index 9ac53d9c7fae..f7b07895d1a9 100644
--- a/src/UI/Implementation/Component/MainControls/Menu/Renderer.php
+++ b/src/UI/Implementation/Component/MainControls/Menu/Renderer.php
@@ -33,7 +33,7 @@ protected function renderSlate(Component\MainControls\Menu\Slate $component, Ren
 
         $component = $component->withOnLoadCode(function($id) use ($toggle_signal, $replace_signal, $navback_signal) {
             return "$(document).on('{$toggle_signal}', function(event, signalData) {
-                        il.UI.maincontrols.menu.slate.onClickTrigger(event, signalData, '{$id}');
+                        il.UI.maincontrols.menu.slate.onToggle(event, signalData, '{$id}');
                         return false;
                     });
                     $(document).on('{$replace_signal}', function(event, signalData) {
@@ -71,10 +71,10 @@ protected function renderSlate(Component\MainControls\Menu\Slate $component, Ren
             "close",
             "#"
         )
-        ->withOnClick($toggle_signal)
-        ->appendOnClick($component->getCloseSignal());
-
-        //->withOnClick();
+        ->withOnClick($toggle_signal);
+        if($component->getCloseSignal()) {
+            $closebtn = $closebtn->appendOnClick($component->getCloseSignal());
+        }
 
         $tpl->setVariable("CLOSE", $default_renderer->render($closebtn));
 
diff --git a/src/UI/Implementation/Component/MainControls/Menu/Slate.php b/src/UI/Implementation/Component/MainControls/Menu/Slate.php
index f507a53b5ad9..582a83e4addb 100644
--- a/src/UI/Implementation/Component/MainControls/Menu/Slate.php
+++ b/src/UI/Implementation/Component/MainControls/Menu/Slate.php
@@ -68,6 +68,16 @@ public function withAdditionalPlank($plank) {
 		return $clone;
 	}
 
+	/**
+	 * @param 	Plank[] 	$planks
+	 * *return Slate
+	 */
+	public function withPlanks(array $planks) {
+		$clone = clone $this;
+		$clone->planks = $planks;
+		return $clone;
+	}
+
 	/**
 	 * @inheritdoc
 	 */
diff --git a/templates/default/images/icon-sb-cockpit.svg b/src/UI/examples/Layout/Page/icon-sb-cockpit.svg
old mode 100644
new mode 100755
similarity index 100%
rename from templates/default/images/icon-sb-cockpit.svg
rename to src/UI/examples/Layout/Page/icon-sb-cockpit.svg
diff --git a/templates/default/images/icon-sb-help.svg b/src/UI/examples/Layout/Page/icon-sb-help.svg
old mode 100644
new mode 100755
similarity index 100%
rename from templates/default/images/icon-sb-help.svg
rename to src/UI/examples/Layout/Page/icon-sb-help.svg
diff --git a/templates/default/images/icon-sb-more.svg b/src/UI/examples/Layout/Page/icon-sb-more.svg
old mode 100644
new mode 100755
similarity index 100%
rename from templates/default/images/icon-sb-more.svg
rename to src/UI/examples/Layout/Page/icon-sb-more.svg
diff --git a/templates/default/images/icon-sb-navigation.svg b/src/UI/examples/Layout/Page/icon-sb-navigation.svg
old mode 100644
new mode 100755
similarity index 100%
rename from templates/default/images/icon-sb-navigation.svg
rename to src/UI/examples/Layout/Page/icon-sb-navigation.svg
diff --git a/templates/default/images/icon-sb-search.svg b/src/UI/examples/Layout/Page/icon-sb-search.svg
old mode 100644
new mode 100755
similarity index 100%
rename from templates/default/images/icon-sb-search.svg
rename to src/UI/examples/Layout/Page/icon-sb-search.svg
diff --git a/src/UI/examples/Layout/Page/page.php b/src/UI/examples/Layout/Page/page.php
index 40077652e076..49d748c14ca5 100644
--- a/src/UI/examples/Layout/Page/page.php
+++ b/src/UI/examples/Layout/Page/page.php
@@ -2,7 +2,6 @@
 
 function page() {
     include_once('src/UI/examples/Layout/MetaBar/metabar.php');
-    include_once('src/UI/examples/Layout/SideBar/sidebar.php');
 
     global $DIC;
     $f = $DIC->ui()->factory();
@@ -12,8 +11,94 @@ function page() {
 
     $page = $f->layout()->page($content)
         ->withMetabar(buildMetabar($f))
-        ->withSidebar(buildSidebar($f))
+        ->withSidebar(pagedemo_sidebar($f))
         ;
 
     return $renderer->render($page);
 }
+
+function pagedemo_sidebar($f) {
+
+    $icon = $f->icon()->custom('./src/UI/examples/Layout/Page/icon-sb-cockpit.svg', '');
+    $btn = $f->button()->iconographic($icon->withSize('large'), "Button 1", '#');
+    $slate = $f->maincontrols()->menu()->slate(array()); //remove constructor-planks
+    $replace_signal = $slate->getReplaceContentSignal();
+    $slate = $slate->withPlanks(pagedemo_planks1($f, $replace_signal));
+    $entries[] = $f->layout()->sidebarentry($btn, $slate);
+
+    $icon = $f->icon()->custom('./src/UI/examples/Layout/Page/icon-sb-navigation.svg', '');
+    $btn = $f->button()->iconographic($icon->withSize('large'), "Button 2", '#');
+    $slate = $slate->withResetSignals();
+    $replace_signal = $slate->getReplaceContentSignal();
+    $slate = $slate->withPlanks(pagedemo_planks2($f, $replace_signal));
+    $entries[] = $f->layout()->sidebarentry($btn, $slate);
+
+    $icon = $f->icon()->custom('./src/UI/examples/Layout/Page/icon-sb-search.svg', '');
+    $btn = $f->button()->iconographic($icon->withSize('large'), "Button 3", '#');
+    $slate = $slate->withResetSignals();
+    $replace_signal = $slate->getReplaceContentSignal();
+    $slate = $slate->withPlanks(pagedemo_planks3($f, $replace_signal));
+    $entries[] = $f->layout()->sidebarentry($btn, $slate);
+
+    $icon = $f->icon()->custom('./src/UI/examples/Layout/Page/icon-sb-help.svg', '');
+    $btn = $f->button()->iconographic($icon->withSize('large'), "Button 4", '#');
+    $slate = $slate->withResetSignals();
+    $replace_signal = $slate->getReplaceContentSignal();
+    $slate = $slate->withPlanks(pagedemo_planks4($f, $replace_signal));
+    $entries[] = $f->layout()->sidebarentry($btn, $slate);
+
+    $icon = $f->icon()->custom('./src/UI/examples/Layout/Page/icon-sb-more.svg', '');
+    $btn = $f->button()->iconographic($icon->withSize('large'), "More", '#');
+    $slate = $slate->withResetSignals();
+    $replace_signal = $slate->getReplaceContentSignal();
+    $slate = $slate->withPlanks(pagedemo_planks5($f, $replace_signal));
+    $entries[] = $f->layout()->sidebarentry($btn, $slate);
+
+    return $f->layout()->sidebar($entries);
+}
+
+
+function pagedemo_planks1($f, $replacesignal){
+    $planks = array();
+    $planks[] = $f->maincontrols()->menu()->plank()->withContents([
+            $f->legacy('some content'),
+            $f->legacy('in a slate')
+        ]);
+
+    return $planks;
+}
+
+function pagedemo_planks2($f, $replacesignal){
+    $planks = array();
+    $planks[] = $f->maincontrols()->menu()->plank()->withContents([
+            $f->legacy('some other content'),
+            $f->legacy('in a slate')
+        ]);
+    $planks[] = $f->maincontrols()->menu()->plank()->withContents([
+            $f->legacy('here is another plank')
+        ]);
+    return $planks;
+}
+
+
+function pagedemo_planks3($f, $replacesignal){
+    $planks = array();
+    $planks[] = $f->maincontrols()->menu()->plank()->withContents([
+        $f->legacy('planks - 3')
+    ]);
+    return $planks;
+}
+function pagedemo_planks4($f, $replacesignal){
+    $planks = array();
+    $planks[] = $f->maincontrols()->menu()->plank()->withContents([
+        $f->legacy('planks - 4')
+    ]);
+    return $planks;
+}
+function pagedemo_planks5($f, $replacesignal){
+    $planks = array();
+    $planks[] = $f->maincontrols()->menu()->plank()->withContents([
+        $f->legacy('planks - 5')
+    ]);
+    return $planks;
+}
\ No newline at end of file
diff --git a/src/UI/examples/Layout/SideBar/sidebar.php b/src/UI/examples/Layout/SideBar/sidebar.php
index 9ae5b00f1028..2599bf252db3 100644
--- a/src/UI/examples/Layout/SideBar/sidebar.php
+++ b/src/UI/examples/Layout/SideBar/sidebar.php
@@ -27,12 +27,12 @@ function buildSidebar($f) {
         $button = $f->button()->iconographic($icon->withAbbreviation('X'), "Button", '#');
         $entries[] = $f->layout()->sidebarentry($button, $slate);
     }
-
+/*
     $icon = $f->icon()->standard('sidebar_trigger', '')->withSize('medium');
     $button = $f->button()->iconographic($icon->withAbbreviation('X'), "Tree", '#');
     $slate = $f->maincontrols()->menu()->slate([buildTreePlank($f)]);
     $entries[] = $f->layout()->sidebarentry($button, $slate);
-
+*/
 
 
     $glyph = $f->glyph()->user();
diff --git a/src/UI/templates/js/MainControls/Menu/slate.js b/src/UI/templates/js/MainControls/Menu/slate.js
index 0f7bdaf15bc0..926968f40e65 100644
--- a/src/UI/templates/js/MainControls/Menu/slate.js
+++ b/src/UI/templates/js/MainControls/Menu/slate.js
@@ -9,7 +9,7 @@ il.UI.maincontrols.menu = il.UI.maincontrols.menu || {};
 		var _cls_disengaged = 'disengaged';
 		var _history = [];
 
-		var onClickTrigger = function(event, signalData, id) {
+		var onToggle = function(event, signalData, id) {
 			var slate = $('#' + id);
 			slate.siblings().each(function(c,s){
 				_disengage($(s));
@@ -30,6 +30,7 @@ il.UI.maincontrols.menu = il.UI.maincontrols.menu || {};
 		};
 
 		var _engage = function(slate) {
+			console.log("engage");
 			slate.removeClass(_cls_disengaged);
 			slate.addClass(_cls_engaged);
 
@@ -38,6 +39,7 @@ il.UI.maincontrols.menu = il.UI.maincontrols.menu || {};
 		};
 
 		var _disengage = function(slate) {
+			console.log("disengage");
 			slate.removeClass(_cls_engaged);
 			slate.addClass(_cls_disengaged);
 
@@ -77,7 +79,7 @@ il.UI.maincontrols.menu = il.UI.maincontrols.menu || {};
         };
 
 		return {
-			onClickTrigger: onClickTrigger,
+			onToggle: onToggle,
 			toggle : toggle,
 			replaceContentFromSignal: replaceContentFromSignal,
 			navigateBack: navigateBack

From b90f238f84209732e9ed1c3a2467e462500df310 Mon Sep 17 00:00:00 2001
From: Nils Haagen <nhaagen@cat06.de>
Date: Thu, 18 Jan 2018 15:47:50 +0100
Subject: [PATCH 8/8] remote loading of slate contents

---
 .../Component/MainControls/Menu/Slate.php     |  3 +-
 src/UI/examples/Layout/Page/page.php          | 40 +++++++++++++++++--
 .../templates/js/MainControls/Menu/slate.js   | 16 ++++++--
 3 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/src/UI/Implementation/Component/MainControls/Menu/Slate.php b/src/UI/Implementation/Component/MainControls/Menu/Slate.php
index 582a83e4addb..e41a9c706f0e 100644
--- a/src/UI/Implementation/Component/MainControls/Menu/Slate.php
+++ b/src/UI/Implementation/Component/MainControls/Menu/Slate.php
@@ -113,8 +113,9 @@ public function getCloseSignal() {
 	 */
 	protected function initSignals() {
 		$this->toggle_signal = $this->signal_generator->create();
-		$this->replace_signal = $this->signal_generator->create();
 		$this->navback_signal = $this->signal_generator->create();
+	//	$this->replace_signal = $this->signal_generator->create();
+		$this->replace_signal = $this->signal_generator->create("ILIAS\\UI\\Implementation\\Component\\Popover\\ReplaceContentSignal");
 	}
 
 	/**
diff --git a/src/UI/examples/Layout/Page/page.php b/src/UI/examples/Layout/Page/page.php
index 49d748c14ca5..ca8b5a65c8b5 100644
--- a/src/UI/examples/Layout/Page/page.php
+++ b/src/UI/examples/Layout/Page/page.php
@@ -7,6 +7,10 @@ function page() {
     $f = $DIC->ui()->factory();
     $renderer = $DIC->ui()->renderer();
 
+    if($_GET['rpc']) {
+        handleRPC($f, $renderer);
+    }
+
     $content = $f->legacy("some content");
 
     $page = $f->layout()->page($content)
@@ -57,14 +61,44 @@ function pagedemo_sidebar($f) {
     return $f->layout()->sidebar($entries);
 }
 
+function handleRPC($f, $renderer) {
+    $counter = $_GET['rpc'];
+    $nu_cnt = (int)$counter + 1;
+    $url = str_replace('&rpc=' .$counter, '&rpc=' .$nu_cnt, $_SERVER['REQUEST_URI']);
+
+    $sig_id = $_GET['replaceSignal'];
+    $replace_signal = new \ILIAS\UI\Implementation\Component\Popover\ReplaceContentSignal($sig_id);
+    $replace_signal = $replace_signal->withAsyncRenderUrl($url);
+
+    $btn = $f->button()->standard('Replace Contents', '#')
+    ->withOnClick($replace_signal);
+
+    $contents = $f->maincontrols()->menu()->plank()->withContents([
+        $f->legacy('remote content'),
+        $f->legacy('in depth ' .$counter),
+        $btn
+    ]);
+    echo $renderer->renderAsync($contents);
+    exit();
+}
 
 function pagedemo_planks1($f, $replacesignal){
     $planks = array();
     $planks[] = $f->maincontrols()->menu()->plank()->withContents([
-            $f->legacy('some content'),
-            $f->legacy('in a slate')
-        ]);
+        $f->legacy('some content'),
+        $f->legacy('in a slate')
+    ]);
+
+    $signal_id = $replacesignal->getId();
+    $signal = $replacesignal->withAsyncRenderUrl(
+       $_SERVER['REQUEST_URI']
+        .'&replaceSignal='. $signal_id
+        .'&rpc=1'
+    );
+    $btn = $f->button()->standard('Replace Contents', '#')
+        ->withOnClick($signal);
 
+    $planks[] = $btn;
     return $planks;
 }
 
diff --git a/src/UI/templates/js/MainControls/Menu/slate.js b/src/UI/templates/js/MainControls/Menu/slate.js
index 926968f40e65..e29c88911970 100644
--- a/src/UI/templates/js/MainControls/Menu/slate.js
+++ b/src/UI/templates/js/MainControls/Menu/slate.js
@@ -30,7 +30,6 @@ il.UI.maincontrols.menu = il.UI.maincontrols.menu || {};
 		};
 
 		var _engage = function(slate) {
-			console.log("engage");
 			slate.removeClass(_cls_disengaged);
 			slate.addClass(_cls_engaged);
 
@@ -39,7 +38,6 @@ il.UI.maincontrols.menu = il.UI.maincontrols.menu || {};
 		};
 
 		var _disengage = function(slate) {
-			console.log("disengage");
 			slate.removeClass(_cls_engaged);
 			slate.addClass(_cls_disengaged);
 
@@ -52,10 +50,20 @@ il.UI.maincontrols.menu = il.UI.maincontrols.menu || {};
 				slate_backbtn = $('#' + id + ' .il-maincontrol-menu-slate-back');
 
 			_appendToHistory(id, slate_contents);
-			slate_contents.html('replaced!');
-
 			slate_backbtn.removeClass('inactive');
 			slate_backbtn.addClass('active');
+
+
+            console.log(signalData.options.url);
+            slate_contents.html([
+            	'<div class="il-maincontrol-menu-plank">',
+					'<div class="plank-element">...loading...</div>',
+				'</div>'
+			].join(''));
+            slate_contents.load(signalData.options.url, function() {
+                console.log('loaded');
+            });
+
         };
 
         var _appendToHistory = function (id, slate_contents) {