Documentation

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

Standard

Description

Purpose: Standard Toasts display a normal toast inside a toast container.
Composition: Standard Toasts contain a title, a close button and an icon, which indicates the service or module triggering the Toast. They might contain a description and an action, which is triggered when user interact with the Toast. Further the Toast might contain a number of ILIAS Link components, which will be presented below the description.
Effect: If the item has an action set, a click interaction of the user with the Toast will trigger this action (The response of this interaction will not be displayed).

Context

The Toast should only be used inside a toast container.

Rules

Ordering

A new Toast SHOULD be ordered below all existing Toasts of its surrounding toast container.

Style

The description of the Toast MUST not render any non-textual context (e.g. HTML).

Responsiveness

The Toast SHOULD always have the same size on full display and be independent from the display size.

Example 1: Base

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Toast\Standard;
 
function base(): 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]);
}

Example 2: With action

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Toast\Standard;
 
function with_action(): string
{
    global $DIC;
    $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')
    ];
 
    $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 additional links

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Toast\Standard;
 
function with_additional_links(): string
{
    global $DIC;
    $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'))
    ];
 
    $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 4: With description

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Toast\Standard;
 
function with_description(): string
{
    global $DIC;
    $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.')
    ];
 
    $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 5: With link title

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Toast\Standard;
 
function with_link_title(): string
{
    global $DIC;
    $tc = $DIC->ui()->factory()->toast()->container();
 
    $toasts = [
        $DIC->ui()->factory()->toast()->standard(
            $DIC->ui()->factory()->link()->standard('Example', 'https://www.ilias.de'),
            $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]);
}

Example 6: With long description

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Toast\Standard;
 
function with_long_description(): string
{
    global $DIC;
    $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 which is very long to provide a representative view of the object when it has ' .
            'to occupy enough space to show a very long toast. This may not be the favorable way of displaying a toast, ' .
            'since toast are assumed to be readable in a short time due to the temporary visibility, therefore they only ' .
            'should contain short description which can be read withing seconds. But even if this long description softly ' .
            'violates the concepts of toast itself due to its long character it still provides a good view on the ' .
            'scalability of the object and could therefore be called to proof its responsivity which confirms its benefit ' .
            'as an example in spite of its unnatural form and missing usecase for productive systems'
        )
    ];
 
    $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