implements Toast container and set dependency in standard toast (#4059)

ILIAS-eLearning · Mar 15, 2022 · a284e26 · a284e26
1 parent 131b3f0
commit a284e26
Show file tree

Hide file tree

Showing 25 changed files with 482 additions and 108 deletions.
diff --git a/src/UI/Component/Toast/Toast.php b/src/UI/Component/Toast/Toast.php
@@ -4,6 +4,7 @@
 
 use ILIAS\UI\Component\Button\Shy;
 use ILIAS\UI\Component\Component;
+use ILIAS\UI\Component\JavaScriptBindable;
 use ILIAS\UI\Component\Link\Link;
 use ILIAS\UI\Component\Signal;
 use ILIAS\UI\Component\Symbol\Icon\Icon;
@@ -13,7 +14,7 @@
  * Interface Toast
  * @package ILIAS\UI\Component\Toast
  */
-interface Toast extends Component
+interface Toast extends Component, JavaScriptBindable
 {
     /**
      * @return string|Shy|Link

diff --git a/src/UI/Implementation/Component/Toast/Container.php b/src/UI/Implementation/Component/Toast/Container.php
@@ -0,0 +1,48 @@
+<?php declare(strict_types=1);
+
+namespace ILIAS\UI\Implementation\Component\Toast;
+
+use ILIAS\UI\Implementation\Component\ComponentHelper;
+use ILIAS\UI\Component\Toast as ComponentInterface;
+
+/******************************************************************************
+ *
+ * This file is part of ILIAS, a powerful learning management system.
+ *
+ * ILIAS is licensed with the GPL-3.0, you should have received a copy
+ * of said license along with the source code.
+ *
+ * If this is not the case or you just want to try ILIAS, you'll find
+ * us at:
+ * https://www.ilias.de
+ * https://github.com/ILIAS-eLearning
+ *
+ *****************************************************************************/
+class Container implements ComponentInterface\Container
+{
+    use ComponentHelper;
+
+    /**
+     * @var Toast[] $toasts
+     */
+    protected array $toasts = [];
+
+    public function getToasts() : array
+    {
+        return $this->toasts;
+    }
+
+    public function withAdditionalToast(ComponentInterface\Toast $toast) : Container
+    {
+        $clone = clone $this;
+        $clone->toasts[] = $toast;
+        return $clone;
+    }
+
+    public function withoutToasts() : Container
+    {
+        $clone = clone $this;
+        $clone->toasts = [];
+        return $clone;
+    }
+}
diff --git a/src/UI/Implementation/Component/Toast/Factory.php b/src/UI/Implementation/Component/Toast/Factory.php
@@ -3,7 +3,6 @@
 namespace ILIAS\UI\Implementation\Component\Toast;
 
 use ILIAS\UI\Component\Symbol\Icon\Icon;
-use ILIAS\UI\Component\Toast\Container;
 use ILIAS\UI\Implementation\Component\SignalGeneratorInterface;
 
 class Factory implements \ILIAS\UI\Component\Toast\Factory
@@ -25,6 +24,6 @@ public function standard($title, Icon $icon) : Toast
 
     public function container() : Container
     {
-        throw new \ILIAS\UI\NotImplementedException();
+        return new Container();
     }
 }
diff --git a/src/UI/Implementation/Component/Toast/Renderer.php b/src/UI/Implementation/Component/Toast/Renderer.php
@@ -2,7 +2,6 @@
 
 namespace ILIAS\UI\Implementation\Component\Toast;
 
-use ilException;
 use ILIAS\UI\Component\Button\Shy;
 use ILIAS\UI\Component\Link\Link;
 use ILIAS\UI\Implementation\Render\AbstractComponentRenderer;
@@ -23,6 +22,9 @@ public function render(Component\Component $component, RendererInterface $defaul
         if ($component instanceof Component\Toast\Toast) {
             return $this->renderToast($component, $default_renderer);
         }
+        if ($component instanceof Component\Toast\Container) {
+            return $this->renderContainer($component, $default_renderer);
+        }
 
         throw new LogicException("Cannot render: " . get_class($component));
     }
@@ -62,16 +64,41 @@ protected function renderToast(Component\Toast\Toast $component, RendererInterfa
         $tpl->setVariable("ICON", $default_renderer->render($component->getIcon()));
         $tpl->setVariable("CLOSE", $default_renderer->render($this->getUIFactory()->button()->close()));
 
+        $component = $component->withAdditionalOnLoadCode(function ($id) {
+            return "
+                il.UI.toast.setToastSettings($id);
+                il.UI.toast.showToast($id);
+            ";
+        });
+
+        $tpl->setCurrentBlock("id");
+        $tpl->setVariable('ID', $this->bindJavaScript($component));
+        $tpl->parseCurrentBlock();
+
+        return $tpl->get();
+    }
+
+    protected function renderContainer(Component\Toast\Container $component, RendererInterface $default_renderer) : string
+    {
+        $tpl = $this->getTemplate("tpl.container.html", true, true);
+        $tpl->setVariable("TOASTS", $default_renderer->render($component->getToasts()));
         return $tpl->get();
     }
 
+    public function registerResources(ResourceRegistry $registry) : void
+    {
+        parent::registerResources($registry);
+        $registry->register('./src/UI/templates/js/Toast/toast.js');
+    }
+
     /**
      * @inheritdoc
      */
     protected function getComponentInterfaceName() : array
     {
         return [
-            Component\Toast\Toast::class
+            Component\Toast\Toast::class,
+            Component\Toast\Container::class
         ];
     }
 }
diff --git a/src/UI/Implementation/Component/Toast/Toast.php b/src/UI/Implementation/Component/Toast/Toast.php
@@ -8,11 +8,14 @@
 use ILIAS\UI\Component\Symbol\Icon\Icon;
 use ILIAS\UI\Implementation\Component\ComponentHelper;
 use ILIAS\UI\Component\Toast as ComponentInterface;
+use ILIAS\UI\Implementation\Component\JavaScriptBindable;
 use ILIAS\UI\Implementation\Component\SignalGeneratorInterface;
 
 class Toast implements ComponentInterface\Toast
 {
     use ComponentHelper;
+    use JavaScriptBindable;
+
     public const DEFAULT_VANISH_TIME_IN_MS = 5000;
     public const DEFAULT_DELAY_TIME_IN_MS = 500;
 

diff --git a/src/UI/examples/Toast/Container/base.php b/src/UI/examples/Toast/Container/base.php
@@ -6,5 +6,21 @@ function base() : string
 {
     global $DIC;
     $tc = $DIC->ui()->factory()->toast()->container();
-    return $DIC->ui()->renderer()->render($tc);
+
+    $toasts = [];
+
+    $toasts = base64_encode($DIC->ui()->renderer()->renderAsync($toasts));
+    $button = $DIC->ui()->factory()->button()->standard($DIC->language()->txt('show'), '');
+    $button = $button->withAdditionalOnLoadCode(function ($id) use ($toasts) {
+        return "$id.addEventListener('click', () => {
+            $id.parentNode.querySelector('.il-toast-container').innerHTML = atob('$toasts');
+            $id.parentNode.querySelector('.il-toast-container').querySelectorAll('script').forEach(element => {
+                let newScript = document.createElement('script');
+                newScript.innerHTML = element.innerHTML;
+                element.parentNode.appendChild(newScript);
+            })
+        });";
+    });
+
+    return $DIC->ui()->renderer()->render([$button,$tc]);
 }
diff --git a/src/UI/examples/Toast/Container/with_multiple_toasts.php b/src/UI/examples/Toast/Container/with_multiple_toasts.php
@@ -5,23 +5,35 @@
 function with_multiple_toasts() : string
 {
     global $DIC;
-    $tc = $DIC->ui()->factory()->toast()->container()
-        ->withAdditionalToast(
-            $DIC->ui()->factory()->toast()->standard(
-                'Example 1',
-                $DIC->ui()->factory()->symbol()->icon()->standard('info', 'Test')
-            )
-        )->withAdditionalToast(
-            $DIC->ui()->factory()->toast()->standard(
-                'Example 2',
-                $DIC->ui()->factory()->symbol()->icon()->standard('info', 'Test')
-            )
-        )->withAdditionalToast(
-            $DIC->ui()->factory()->toast()->standard(
-                'Example 3',
-                $DIC->ui()->factory()->symbol()->icon()->standard('info', 'Test')
-            )
-        );
+    $tc = $DIC->ui()->factory()->toast()->container();
 
-    return $DIC->ui()->renderer()->render($tc);
+    $toasts = [
+        $DIC->ui()->factory()->toast()->standard(
+            'Example 1',
+            $DIC->ui()->factory()->symbol()->icon()->standard('mail', 'Test')->withIsOutlined(true)
+        ),
+        $DIC->ui()->factory()->toast()->standard(
+            'Example 2',
+            $DIC->ui()->factory()->symbol()->icon()->standard('mail', 'Test')->withIsOutlined(true)
+        ),
+        $DIC->ui()->factory()->toast()->standard(
+            'Example 3',
+            $DIC->ui()->factory()->symbol()->icon()->standard('mail', 'Test')->withIsOutlined(true)
+        )
+    ];
+
+    $toasts = base64_encode($DIC->ui()->renderer()->renderAsync($toasts));
+    $button = $DIC->ui()->factory()->button()->standard($DIC->language()->txt('show'), '');
+    $button = $button->withAdditionalOnLoadCode(function ($id) use ($toasts) {
+        return "$id.addEventListener('click', () => {
+            $id.parentNode.querySelector('.il-toast-container').innerHTML = atob('$toasts');
+            $id.parentNode.querySelector('.il-toast-container').querySelectorAll('script').forEach(element => {
+                let newScript = document.createElement('script');
+                newScript.innerHTML = element.innerHTML;
+                element.parentNode.appendChild(newScript);
+            })
+        });";
+    });
+
+    return $DIC->ui()->renderer()->render([$button,$tc]);
 }
diff --git a/src/UI/examples/Toast/Container/with_toast.php b/src/UI/examples/Toast/Container/with_toast.php
@@ -5,12 +5,27 @@
 function with_toast() : string
 {
     global $DIC;
-    $tc = $DIC->ui()->factory()->toast()->container()->withAdditionalToast(
+    $tc = $DIC->ui()->factory()->toast()->container();
+
+    $toasts = [
         $DIC->ui()->factory()->toast()->standard(
             'Example',
             $DIC->ui()->factory()->symbol()->icon()->standard('info', 'Test')
         )
-    );
+    ];
+
+    $toasts = base64_encode($DIC->ui()->renderer()->renderAsync($toasts));
+    $button = $DIC->ui()->factory()->button()->standard($DIC->language()->txt('show'), '');
+    $button = $button->withAdditionalOnLoadCode(function ($id) use ($toasts) {
+        return "$id.addEventListener('click', () => {
+            $id.parentNode.querySelector('.il-toast-container').innerHTML = atob('$toasts');
+            $id.parentNode.querySelector('.il-toast-container').querySelectorAll('script').forEach(element => {
+                let newScript = document.createElement('script');
+                newScript.innerHTML = element.innerHTML;
+                element.parentNode.appendChild(newScript);
+            })
+        });";
+    });
 
-    return $DIC->ui()->renderer()->render($tc);
+    return $DIC->ui()->renderer()->render([$button,$tc]);
 }
diff --git a/src/UI/examples/Toast/Standard/base.php b/src/UI/examples/Toast/Standard/base.php
@@ -5,12 +5,27 @@
 function base() : string
 {
     global $DIC;
-    $tc = $DIC->ui()->factory()->toast()->container()->withAdditionalToast(
+    $tc = $DIC->ui()->factory()->toast()->container();
+
+    $toasts = [
         $DIC->ui()->factory()->toast()->standard(
             'Example',
             $DIC->ui()->factory()->symbol()->icon()->standard('info', 'Test')
         )
-    );
+    ];
+
+    $toasts = base64_encode($DIC->ui()->renderer()->renderAsync($toasts));
+    $button = $DIC->ui()->factory()->button()->standard($DIC->language()->txt('show'), '');
+    $button = $button->withAdditionalOnLoadCode(function ($id) use ($toasts) {
+        return "$id.addEventListener('click', () => {
+            $id.parentNode.querySelector('.il-toast-container').innerHTML = atob('$toasts');
+            $id.parentNode.querySelector('.il-toast-container').querySelectorAll('script').forEach(element => {
+                let newScript = document.createElement('script');
+                newScript.innerHTML = element.innerHTML;
+                element.parentNode.appendChild(newScript);
+            })
+        });";
+    });
 
-    return $DIC->ui()->renderer()->render($tc);
+    return $DIC->ui()->renderer()->render([$button,$tc]);
 }
diff --git a/src/UI/examples/Toast/Standard/with_action.php b/src/UI/examples/Toast/Standard/with_action.php
@@ -5,11 +5,27 @@
 function with_action() : string
 {
     global $DIC;
-    $tc = $DIC->ui()->factory()->toast()->container()->withAdditionalToast(
+    $tc = $DIC->ui()->factory()->toast()->container();
+
+    $toasts = [
         $DIC->ui()->factory()->toast()->standard(
             'Example',
             $DIC->ui()->factory()->symbol()->icon()->standard('info', 'Test')
         )->withAction('https://www.ilias.de')
-    );
-    return $DIC->ui()->renderer()->render($tc);
+    ];
+
+    $toasts = base64_encode($DIC->ui()->renderer()->renderAsync($toasts));
+    $button = $DIC->ui()->factory()->button()->standard($DIC->language()->txt('show'), '');
+    $button = $button->withAdditionalOnLoadCode(function ($id) use ($toasts) {
+        return "$id.addEventListener('click', () => {
+            $id.parentNode.querySelector('.il-toast-container').innerHTML = atob('$toasts');
+            $id.parentNode.querySelector('.il-toast-container').querySelectorAll('script').forEach(element => {
+                let newScript = document.createElement('script');
+                newScript.innerHTML = element.innerHTML;
+                element.parentNode.appendChild(newScript);
+            })
+        });";
+    });
+
+    return $DIC->ui()->renderer()->render([$button,$tc]);
 }
diff --git a/src/UI/examples/Toast/Standard/with_additional_links.php b/src/UI/examples/Toast/Standard/with_additional_links.php
@@ -5,13 +5,29 @@
 function with_additional_links() : string
 {
     global $DIC;
-    $tc = $DIC->ui()->factory()->toast()->container()->withAdditionalToast(
+    $tc = $DIC->ui()->factory()->toast()->container();
+
+    $toasts = [
         $DIC->ui()->factory()->toast()->standard(
             'Example',
             $DIC->ui()->factory()->symbol()->icon()->standard('info', 'Example')
         )
-        ->withAdditionalLink($DIC->ui()->factory()->link()->standard('ILIAS', 'https://www.ilias.de'))
-        ->withAdditionalLink($DIC->ui()->factory()->link()->standard('GitHub', 'https://www.github.com'))
-    );
-    return $DIC->ui()->renderer()->render($tc);
+            ->withAdditionalLink($DIC->ui()->factory()->link()->standard('ILIAS', 'https://www.ilias.de'))
+            ->withAdditionalLink($DIC->ui()->factory()->link()->standard('GitHub', 'https://www.github.com'))
+    ];
+
+    $toasts = base64_encode($DIC->ui()->renderer()->renderAsync($toasts));
+    $button = $DIC->ui()->factory()->button()->standard($DIC->language()->txt('show'), '');
+    $button = $button->withAdditionalOnLoadCode(function ($id) use ($toasts) {
+        return "$id.addEventListener('click', () => {
+            $id.parentNode.querySelector('.il-toast-container').innerHTML = atob('$toasts');
+            $id.parentNode.querySelector('.il-toast-container').querySelectorAll('script').forEach(element => {
+                let newScript = document.createElement('script');
+                newScript.innerHTML = element.innerHTML;
+                element.parentNode.appendChild(newScript);
+            })
+        });";
+    });
+
+    return $DIC->ui()->renderer()->render([$button,$tc]);
 }
diff --git a/src/UI/examples/Toast/Standard/with_description.php b/src/UI/examples/Toast/Standard/with_description.php
@@ -5,11 +5,27 @@
 function with_description() : string
 {
     global $DIC;
-    $tc = $DIC->ui()->factory()->toast()->container()->withAdditionalToast(
+    $tc = $DIC->ui()->factory()->toast()->container();
+
+    $toasts = [
         $DIC->ui()->factory()->toast()->standard(
             'Example',
             $DIC->ui()->factory()->symbol()->icon()->standard('info', 'Test')
         )->withDescription('This is an example description.')
-    );
-    return $DIC->ui()->renderer()->render($tc);
+    ];
+
+    $toasts = base64_encode($DIC->ui()->renderer()->renderAsync($toasts));
+    $button = $DIC->ui()->factory()->button()->standard($DIC->language()->txt('show'), '');
+    $button = $button->withAdditionalOnLoadCode(function ($id) use ($toasts) {
+        return "$id.addEventListener('click', () => {
+            $id.parentNode.querySelector('.il-toast-container').innerHTML = atob('$toasts');
+            $id.parentNode.querySelector('.il-toast-container').querySelectorAll('script').forEach(element => {
+                let newScript = document.createElement('script');
+                newScript.innerHTML = element.innerHTML;
+                element.parentNode.appendChild(newScript);
+            })
+        });";
+    });
+
+    return $DIC->ui()->renderer()->render([$button,$tc]);
 }