Documentation

Kitchen Sink documentation of style: 'Delos' of skin: 'ILIAS'

Container

Description

Purpose: Toasts Containers display Toasts on the ILIAS page. It has no visual appearance on it's own but provides a location for the Toasts.
Composition: Toast Containers contain a group of toasts.
Effect: The container will be displayed overlaying the main content. If the container is empty it will not be displayed.

Rules

Style

The Toast Container SHOULD be limited in space so it does not cover all of the pages content, no matter the size of its own content.
An empty Toast Container SHOULD have no effect on the visible page.

Accessibility

All Toast Containers MUST alert screen readers when appearing and therefore MUST declare the role "alert" or aria-live.

Example 1: Base

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Toast\Container;
 
function base(): string
{
    global $DIC;
    $tc = $DIC->ui()->factory()->toast()->container();
 
    $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]);
}

Example 2: With multiple toasts

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Toast\Container;
 
function with_multiple_toasts(): string
{
    global $DIC;
    $tc = $DIC->ui()->factory()->toast()->container();
 
    $toasts = [
        $DIC->ui()->factory()->toast()->standard(
            'Example 1',
            $DIC->ui()->factory()->symbol()->icon()->standard('mail', 'Test')
        ),
        $DIC->ui()->factory()->toast()->standard(
            'Example 2',
            $DIC->ui()->factory()->symbol()->icon()->standard('mail', 'Test')
        ),
        $DIC->ui()->factory()->toast()->standard(
            'Example 3',
            $DIC->ui()->factory()->symbol()->icon()->standard('mail', '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([$button,$tc]);
}

Example 3: With toast

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Toast\Container;
 
function with_toast(): string
{
    global $DIC;
    $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([$button,$tc]);
}

Relations

Parents

UIComponent
Toast