Documentation

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

Status

Description

Purpose: The Status counter is used to display information about the total number of some items like users active on the system or total number of comments.
Composition: The Status Counter is a non-obtrusive Counter.
Effect: Status Counters convey information, they are not interactive.

Context

The Status Counter is used in the ‘Who is online?’ Tool.

Rules

Style

The Status Counter MUST be displayed on the lower right of the item it accompanies.
The Status Counter SHOULD have a non-obtrusive background color, such as grey.

Example 1: Base

3 3

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Counter\Status;
 
function base()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    return $renderer->render($f->symbol()->glyph()->mail("#")
        ->withCounter($f->counter()->status(3)));
}

Example 2: Multiple glyphs

8 100 100 800 1 800 8 1 8

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Counter\Status;
 
function multiple_glyphs()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $note = $f->symbol()->glyph()->note("#")
        ->withCounter($f->counter()->novelty(100))
        ->withCounter($f->counter()->status(8));
 
    $tag = $f->symbol()->glyph()->tag("#")
        ->withCounter($f->counter()->novelty(1))
        ->withCounter($f->counter()->status(800));
 
    $comment = $f->symbol()->glyph()->comment("#")
        ->withCounter($f->counter()->novelty(1))
        ->withCounter($f->counter()->status(8));
 
    return $renderer->render($note) . $renderer->render($tag) . $renderer->render($comment);
}

Example 3: With js

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Counter\Status;
 
/**
 * Note, counters also offer an interface for manipulations through JS.
 * Checkout: src/UI/templates/js/Counter/counter.js for a complete spec.
 *
 *
 * Example Usage:
 * //Step 1: Get the counter Object
 * var counter = il.UI.counter.getCounterObject($some_jquery_object);
 * //Step 2: Do stuff with the counter Object
 * var novelty_count = counter.setNoveltyCount(3).getNoveltyCount(); //novelty count should be 3
 * novelty_count = counter.setNoveltyToStatus().getNoveltyCount(); //novelty count should be 0, status count 3
 */
function with_js()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    //Note that both counters have to be present to perform JS actions on them
    $like = $f->symbol()->glyph()->love("#")
        ->withCounter($f->counter()->novelty(3))
        ->withCounter($f->counter()->status(0));
 
    $set_status_button = $f->button()->bulky($like, "Set Status Counter to 10 on click.", "#")
        ->withAdditionalOnLoadCode(
            function ($id) {
                return "
                $(\"#$id\").click(function() { 
                    il.UI.counter.getCounterObject($(this)).setStatusTo(10);
                });";
            }
        );
 
    $increment_novelty_button = $f->button()->bulky($like, "Increment Novelty Counter by on click", "#")
        ->withAdditionalOnLoadCode(
            function ($id) {
                return "
                $(\"#$id\").click(function() { 
                    il.UI.counter.getCounterObject($(this)).incrementNoveltyCount(1);
                });";
            }
        );
 
    $set_novelty_count_to_status_button = $f->button()->bulky($like, "Set Novelty Count to status on click", "#")
        ->withAdditionalOnLoadCode(
            function ($id) {
                return "
                $(\"#$id\").click(function() { 
                    il.UI.counter.getCounterObject($(this)).setTotalNoveltyToStatusCount(1);
                });";
            }
        );
 
    //What will the value of Status be after click?
    $combined_button = $f->button()->bulky($like, "Some chained actions", "#")
        ->withAdditionalOnLoadCode(
            function ($id) {
                return "
                $(\"#$id\").click(function() { 
                    var counter = il.UI.counter.getCounterObject($(this));
                    counter.setNoveltyTo(3);
                    counter.setStatusTo(3);
                    counter.incrementStatusCount(1);
                    counter.setTotalNoveltyToStatusCount();
                    console.log(
                        counter.getStatusCount()
                    );
                });";
            }
        );
 
    return $renderer->render([$set_status_button,$increment_novelty_button,$set_novelty_count_to_status_button,$combined_button]);
}

Example 4: With novelty

8 1 8

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Counter\Status;
 
function with_novelty()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    return $renderer->render(
        $f->symbol()->glyph()->mail("#")
        ->withCounter($f->counter()->novelty(1))
        ->withCounter($f->counter()->status(8))
    );
}

Relations

Parents

UIComponent
Counter