ILIAS\UI\examples\MainControls\MetaBar Namespace Reference

Functions
	base_metabar ()
	expected output: > ILIAS shows a link "See UI in fullscreen-mode". More...
	buildMetabar (\ILIAS\UI\Factory $f)
if($request_wrapper->has('new_metabar_ui') && $request_wrapper->retrieve('new_metabar_ui', $refinery->kindlyTo() ->int())===1)	renderMetaBarInFullscreenMode (Container $dic)
	pageMetabarDemoContent (\ILIAS\UI\Factory $f)
	pageMetabarDemoCrumbs (\ILIAS\UI\Factory $f)
	pageMetabarDemoMainbar (\ILIAS\UI\Factory $f)
	pageMetabarDemoFooter (\ILIAS\UI\Factory $f)
	extended_example_for_developers ()
	description: > This is a rather extended example on the usage of the Notification Item async functionality provided by src/UI/templates/js/Item/notification.js. More...
	usuallyDoneByGlobalScreenProbablyIgnore ($async_item, $f, $renderer, $add_button, $set_button, $reset_button)
	buildMetabarWithNotifications ($f, $notification_center)

Variables
global	$DIC
	$request_wrapper = $DIC->http()->wrapper()->query()
	$refinery = $DIC->refinery()

Function Documentation

base_metabar()

ILIAS\UI\examples\MainControls\MetaBar\base_metabar

(

)

---

expected output: > ILIAS shows a link "See UI in fullscreen-mode".

On clicking the link, a new page opens. The page has no entries in the mainbar and very(!) little content, but shows four icons in the metabar: search, help, notes and user. Only the notes-glyph is operable, it shows a little overlay with "some content"

when clicked.

Definition at line 36 of file base_metabar.php.

References ILIAS\UI\examples\MainControls\MetaBar\$DIC, Vendor\Package\$f, $renderer, $txt, and $url.

                       : string
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();

    $url = $DIC->http()->request()->getUri()->__toString() . '&new_metabar_ui=1';
    $txt = $f->legacy()->content('<p>
            The Metabar Example opens in Fullscreen to showcase the behaviour of the metabar best.
            Note, an comprensive example for developers on how to access the JS API of the Metabar
            feature bellow in the second example.
            </p>');

    $page_demo = $f->link()->standard('See UI in fullscreen-mode', $url);

    return $renderer->render([
        $txt,
        $page_demo
    ]);
}

buildMetabar()

ILIAS\UI\examples\MainControls\MetaBar\buildMetabar

(

\ILIAS\UI\Factory

$f

)

Definition at line 57 of file base_metabar.php.

Referenced by ILIAS\UI\examples\MainControls\MetaBar\renderMetaBarInFullscreenMode().

                                           : \ILIAS\UI\Component\MainControls\MetaBar
{
    $help = $f->button()->bulky($f->symbol()->glyph()->help(), 'Help', '#');
    $search = $f->button()->bulky($f->symbol()->glyph()->search(), 'Search', '#');
    $user = $f->button()->bulky($f->symbol()->glyph()->user(), 'User', '#');

    $notes = $f->mainControls()->slate()->legacy(
        'Notification',
        $f->symbol()->glyph()->notification(),
        $f->legacy()->content('some content')
    );

    return $f->mainControls()->metaBar()
             ->withAdditionalEntry('search', $search)
             ->withAdditionalEntry('help', $help)
             ->withAdditionalEntry('notes', $notes)
             ->withAdditionalEntry('user', $user);
}

global $DIC;
$request_wrapper = $DIC->http()->wrapper()->query();
$refinery = $DIC->refinery();
if ($request_wrapper->has('new_metabar_ui')
    && $request_wrapper->retrieve('new_metabar_ui', $refinery->kindlyTo()->int()) === 1
) {
    \ilInitialisation::initILIAS();
    echo renderMetaBarInFullscreenMode($DIC);
    exit();
}

Here is the caller graph for this function:

buildMetabarWithNotifications()

ILIAS\UI\examples\MainControls\MetaBar\buildMetabarWithNotifications	(		$f,
			$notification_center
	)

Definition at line 218 of file extended_example_for_developers.php.

References Vendor\Package\$f.

Referenced by ILIAS\UI\examples\MainControls\MetaBar\usuallyDoneByGlobalScreenProbablyIgnore().

{
    $help = $f->button()->bulky($f->symbol()->glyph()->help(), 'Help', '#');
    $search = $f->button()->bulky($f->symbol()->glyph()->search(), 'Search', '#');
    $user = $f->button()->bulky($f->symbol()->glyph()->user(), 'User', '#');


    $metabar = $f->mainControls()->metabar()
                 ->withAdditionalEntry('search', $search)
                 ->withAdditionalEntry('help', $help)
                 ->withAdditionalEntry('notification', $notification_center)
                 ->withAdditionalEntry('user', $user);

    return $metabar;
}

Here is the caller graph for this function:

extended_example_for_developers()

ILIAS\UI\examples\MainControls\MetaBar\extended_example_for_developers

(

)

---

description: > This is a rather extended example on the usage of the Notification Item async functionality provided by src/UI/templates/js/Item/notification.js.

See notification.js for a detailed description of the function. Note that we use some il.DemoScope to store some JS for Demo purposes, it contains the following three items:

• DemoScopeRemaining: Integer, Counting how many Items are still there
• DemoScopeAdded: Integer, Counting how many Items have been addedf
• DemoScopeItem: Most importantly, the Notification Object for executing all the Async logic.

The functions of the public interface of interest featured here are:

• getNotificationItemObject($item_or_object_inside_item): Most importantly, returning the Item Object, for access to all other functions of the interface.
• replaceByAsyncItem(url,send_data): Replaces the item completely with a new retrieved async.
• replaceContentByAsyncItemContent(url,send_data): Only replaces the data around the item (title, description and such)
• addAsyncAggregate(url,send_data): Adds one aggregate retrieved async (the sub-like items).
• getCounterObjectIfAny(): Gets an instance of the counter for manual manipulations.

Of further Interest could be (not featured here):

• getCloseButtonOfItem(): Getting a jQuery instance of the close button, e.g. for attaching more interactions.

expected output: >

ILIAS shows the rendered Component.

Returns

string

Important, this is the heart of the example. By creating our Notification Item we attach in additionalOnLoad code the logic to store access to our freshly created Notification Item.

Note the work from here on is usually done by the global screen. This is just done to get the example up and running and to give it a more realistic look. See ilias/components/ILIAS/GlobalScreen/Scope/Notification/README.md

Definition at line 55 of file extended_example_for_developers.php.

References $_SERVER, ILIAS\UI\examples\MainControls\MetaBar\$DIC, Vendor\Package\$f, $id, ILIAS\UI\examples\MainControls\MetaBar\$refinery, $renderer, ILIAS\UI\examples\MainControls\MetaBar\$request_wrapper, exit, and ILIAS\UI\examples\MainControls\MetaBar\usuallyDoneByGlobalScreenProbablyIgnore().

                                          : string
{
    //Set up the gears as always
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $refinery = $DIC->refinery();
    $request_wrapper = $DIC->http()->wrapper()->query();

    //Create some bare UI Components Notification Item to be used all over the place
    $icon = $f->symbol()->icon()->standard("chtr", "chtr");
    $title = $f->link()->standard("Some Title", "#");
    $item = $f->item()->notification($title, $icon);

    //We provide 4 async endpoints here
    //Endpoint if element ist closed
    $async_close = $_SERVER['REQUEST_URI'] . '&close_item=true&async_load_replace=false&async_load_replace_content=false&async_add_aggregate=false';
    //Attach this directly to all items to be closable (showing the Close Button)
    $closable_item = $item->withCloseAction($async_close);
    //Endpoint if replace button is pressed
    $async_replace_url = $_SERVER['REQUEST_URI'] . '&close_item=false&async_load_replace=true&async_load_replace_content=false&async_add_aggregate=false';
    //Endpoint if for only replacing data of the item (description, title etc.)
    $async_replace_content_load_url = $_SERVER['REQUEST_URI'] . '&close_item=false&async_load_replace=false&async_load_replace_content=true&async_add_aggregate=false';
    //Endpoint for adding one single aggreate item
    $async_add_aggregate = $_SERVER['REQUEST_URI'] . '&close_item=false&async_load_replace=false&async_load_replace_content=false&async_add_aggregate=true';

    if ($request_wrapper->has('close_item') && $request_wrapper->retrieve('close_item', $refinery->kindlyTo()->string()) === "true") {
        //Note that we passe back JS logic here for further processing here
        $js = $f->legacy()->content("")->withOnLoadCode(function ($id) use ($async_replace_content_load_url) {
            return "
                il.DemoScopeRemaining--;
                il.DemoScopeItem.replaceContentByAsyncItemContent('$async_replace_content_load_url',{remaining: il.DemoScopeRemaining,added: il.DemoScopeAdded});
            ";
        });
        echo $renderer->renderAsync($js);
        exit;
    }

    if ($request_wrapper->has('async_load_replace') && $request_wrapper->retrieve('async_load_replace', $refinery->kindlyTo()->string()) === "true") {
        $remaining = $request_wrapper->retrieve("remaining", $refinery->kindlyTo()->int());
        $added = $request_wrapper->retrieve("added", $refinery->kindlyTo()->int());

        //We create the amount of aggregates send to us by get and put an according
        //description into the newly create Notification Item
        $items = [];
        for ($i = 1; $i < $added + 1; $i++) {
            $items[] = $closable_item->withDescription("This item is number: " . $i . " of a fix set of 10 entries.");
        }
        $replacement = $item->withDescription("Number of Async non-closed Aggregates: " . $remaining . ", totally created: " . $added)
            ->withAggregateNotifications($items);

        echo $renderer->renderAsync([$replacement]);
        exit;
    }

    if ($request_wrapper->has('async_load_replace_content') && $request_wrapper->retrieve('async_load_replace_content', $refinery->kindlyTo()->string()) === "true") {
        $remaining = $request_wrapper->retrieve("remaining", $refinery->kindlyTo()->int());
        $added = $request_wrapper->retrieve("added", $refinery->kindlyTo()->int());
        $replacement = $item->withDescription("Number of Async non-closed Aggregates: " . $remaining . ", totally created: " . $added);
        echo $renderer->renderAsync([$replacement]);
        exit;
    }

    if ($request_wrapper->has('async_add_aggregate') && $request_wrapper->retrieve('async_add_aggregate', $refinery->kindlyTo()->string()) === "true") {
        $added = $request_wrapper->retrieve("added", $refinery->kindlyTo()->int());

        $new_aggregate = $closable_item->withDescription("The item has been added, Nr: " . $added);

        echo $renderer->renderAsync([$new_aggregate]);
        exit;
    }

    //Button with attached js logic to add one new Notification, note, that
    //we also change the description of the already existing parent Notification
    //Item holding the aggregates.
    $add_button = $f->button()->standard("Add Chat Notification", "#")
                    ->withAdditionalOnLoadCode(function ($id) use ($async_replace_url, $async_add_aggregate) {
                        return "
                            $('#$id').click(function() {
                                il.DemoScopeItem.getCounterObjectIfAny().incrementNoveltyCount(1);
                                il.DemoScopeAdded++;
                                il.DemoScopeRemaining++;
                                il.DemoScopeItem.addAsyncAggregate('$async_add_aggregate',{remaining: il.DemoScopeAdded,added: il.DemoScopeAdded});
                                il.DemoScopeItem.replaceContentByAsyncItemContent('$async_replace_url',{remaining: il.DemoScopeRemaining,added: il.DemoScopeAdded});
                            });";
                    });

    //Resetting all counts to 0, remove all aggregates
    $reset_button = $f->button()->standard("Reset Chat", "#")
                      ->withAdditionalOnLoadCode(function ($id) use ($async_replace_url) {
                          return "
                            $('#$id').click(function() {
                                il.DemoScopeItem.getCounterObjectIfAny().decrementNoveltyCount(il.DemoScopeRemaining);
                                il.DemoScopeAdded = 0;
                                il.DemoScopeRemaining = 0;
                                il.DemoScopeItem.replaceByAsyncItem('$async_replace_url',{remaining: il.DemoScopeAdded,added: il.DemoScopeAdded});
                            });";
                      });

    //Set all counts to a fixed value of ten.
    $set_button = $f->button()->standard("Set to 10 chat entries", "#")
                    ->withAdditionalOnLoadCode(function ($id) use ($async_replace_url) {
                        return "
                            $('#$id').click(function() {
                                il.DemoScopeItem.getCounterObjectIfAny().decrementNoveltyCount(il.DemoScopeRemaining);
                                il.DemoScopeItem.getCounterObjectIfAny().incrementNoveltyCount(10);
                                il.DemoScopeAdded = 10;
                                il.DemoScopeRemaining = 10;
                                il.DemoScopeItem.replaceByAsyncItem('$async_replace_url',{remaining: il.DemoScopeAdded,added: il.DemoScopeAdded});
                            });";
                    });

    $async_item = $item
        ->withDescription("This is the original Version after the Page has loaded. Will be replaced completely.")
        ->withAdditionalOnLoadCode(function ($id) {
            return "
                il.DemoScopeAdded = 0;
                il.DemoScopeRemaining = 0;
                il.DemoScopeItem = il.UI.item.notification.getNotificationItemObject($($id));
            ";
        });

    return usuallyDoneByGlobalScreenProbablyIgnore($async_item, $f, $renderer, $add_button, $set_button, $reset_button);
}

Here is the call graph for this function:

pageMetabarDemoContent()

ILIAS\UI\examples\MainControls\MetaBar\pageMetabarDemoContent

(

\ILIAS\UI\Factory

$f

)

Definition at line 120 of file base_metabar.php.

Referenced by ILIAS\UI\examples\MainControls\MetaBar\renderMetaBarInFullscreenMode().

                                                     : array
{
    return [
        $f->panel()->standard(
            'All about the Meta Bar',
            $f->legacy()->content(
                "See above"
            )
        ),
    ];
}

Here is the caller graph for this function:

pageMetabarDemoCrumbs()

ILIAS\UI\examples\MainControls\MetaBar\pageMetabarDemoCrumbs

(

\ILIAS\UI\Factory

$f

)

Definition at line 132 of file base_metabar.php.

Referenced by ILIAS\UI\examples\MainControls\MetaBar\renderMetaBarInFullscreenMode().

                                                    : \ILIAS\UI\Component\Breadcrumbs\Breadcrumbs
{
    return $f->breadcrumbs([]);
}

Here is the caller graph for this function:

pageMetabarDemoFooter()

ILIAS\UI\examples\MainControls\MetaBar\pageMetabarDemoFooter

(

\ILIAS\UI\Factory

$f

)

Definition at line 142 of file base_metabar.php.

Referenced by ILIAS\UI\examples\MainControls\MetaBar\renderMetaBarInFullscreenMode().

                                                    : \ILIAS\UI\Component\MainControls\Footer
{
    $text = 'Footer';

    return $f->mainControls()->footer()->withAdditionalText($text);
}

Here is the caller graph for this function:

pageMetabarDemoMainbar()

ILIAS\UI\examples\MainControls\MetaBar\pageMetabarDemoMainbar

(

\ILIAS\UI\Factory

$f

)

Definition at line 137 of file base_metabar.php.

Referenced by ILIAS\UI\examples\MainControls\MetaBar\renderMetaBarInFullscreenMode().

                                                     : \ILIAS\UI\Component\MainControls\MainBar
{
    return $f->mainControls()->mainBar();
}

Here is the caller graph for this function:

renderMetaBarInFullscreenMode()

if ( $request_wrapper->has( 'new_metabar_ui') &&$request_wrapper->retrieve( 'new_metabar_ui', $refinery->kindlyTo() ->int())===1) ILIAS\UI\examples\MainControls\MetaBar\renderMetaBarInFullscreenMode

(

Container

$dic

)

Definition at line 87 of file base_metabar.php.

References Vendor\Package\$f, $renderer, ILIAS\UI\examples\MainControls\MetaBar\buildMetabar(), ILIAS\UI\examples\MainControls\MetaBar\pageMetabarDemoContent(), ILIAS\UI\examples\MainControls\MetaBar\pageMetabarDemoCrumbs(), ILIAS\UI\examples\MainControls\MetaBar\pageMetabarDemoFooter(), ILIAS\UI\examples\MainControls\MetaBar\pageMetabarDemoMainbar(), and ILIAS\DI\Container\ui().

                                                      : string
{
    $f = $dic->ui()->factory();
    $renderer = $dic->ui()->renderer();
    $logo = $f->image()->responsive("assets/images/logo/HeaderIcon.svg", "ILIAS");
    $responsive_logo = $f->image()->responsive("assets/images/logo/HeaderIconResponsive.svg", "ILIAS");
    $breadcrumbs = pageMetabarDemoCrumbs($f);
    $metabar = buildMetabar($f);
    $mainbar = pageMetabarDemoMainbar($f);
    $footer = pageMetabarDemoFooter($f);
    $tc = $dic->ui()->factory()->toast()->container();

    $content = pageMetabarDemoContent($f);

    $page = $f->layout()->page()->standard(
        $content,
        $metabar,
        $mainbar,
        $breadcrumbs,
        $logo,
        $responsive_logo,
        "./assets/images/logo/favicon.ico",
        $tc,
        $footer,
        'UI Meta Bar DEMO', //page title
        'ILIAS', //short title
        'ILIAS Meta Bar Demo' //view title
    )->withUIDemo(true);

    return $renderer->render($page);
}

Here is the call graph for this function:

usuallyDoneByGlobalScreenProbablyIgnore()

ILIAS\UI\examples\MainControls\MetaBar\usuallyDoneByGlobalScreenProbablyIgnore	(		$async_item,
			$f,
			$renderer,
			$add_button,
			$set_button,
			$reset_button
	)

Definition at line 190 of file extended_example_for_developers.php.

References Vendor\Package\$f, $renderer, and ILIAS\UI\examples\MainControls\MetaBar\buildMetabarWithNotifications().

Referenced by ILIAS\UI\examples\MainControls\MetaBar\extended_example_for_developers().

{
    //Put the item in some slate.
    $async_slate = $f->mainControls()->slate()->notification("Chat", [$async_item]);


    //Just some candy, to give the whole example a more realistic look.
    $mail_icon = $f->symbol()->icon()->standard("mail", "mail");
    $mail_title = $f->link()->standard("Inbox", "link_to_inbox");
    $mail_notification_item = $f->item()->notification($mail_title, $mail_icon)
                                ->withDescription("You have 23 unread mails in your inbox")
                                ->withProperties(["Time" => "3 days ago"]);
    $mail_slate = $f->mainControls()->slate()->notification("Mail", [$mail_notification_item]);


    //Note
    $notification_glyph = $f->symbol()->glyph()->notification("notification", "notification")
                            ->withCounter($f->counter()->novelty(1));

    $notification_center = $f->mainControls()->slate()
                             ->combined("Notification Center", $notification_glyph)
                             ->withAdditionalEntry($async_slate)
                             ->withAdditionalEntry($mail_slate);

    $css_fix = "<style>.panel-primary .il-maincontrols-metabar{flex-direction: column;} .panel-primary .il-metabar-slates{position: relative;top: 0px;}</style>";
    return $css_fix . $renderer->render([buildMetabarWithNotifications($f, $notification_center),$add_button,$set_button,$reset_button]);
}

Here is the call graph for this function:

Here is the caller graph for this function:

Variable Documentation

$DIC

global ILIAS::UI::examples::MainControls::MetaBar\$DIC

Definition at line 76 of file base_metabar.php.

Referenced by ILIAS\UI\examples\MainControls\MetaBar\base_metabar(), and ILIAS\UI\examples\MainControls\MetaBar\extended_example_for_developers().

$refinery

ILIAS::UI::examples::MainControls::MetaBar\$refinery = $DIC->refinery()

Definition at line 78 of file base_metabar.php.

Referenced by ILIAS\UI\examples\MainControls\MetaBar\extended_example_for_developers().

$request_wrapper

ILIAS::UI::examples::MainControls::MetaBar\$request_wrapper = $DIC->http()->wrapper()->query()

Definition at line 77 of file base_metabar.php.

Referenced by ILIAS\UI\examples\MainControls\MetaBar\extended_example_for_developers().