ILIAS\UI\examples\MainControls\MetaBar Namespace Reference

Functions
	base_metabar ()
	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 ()
	buildMetabarWithNotifications ($f, $notification_center)
	handleAsyncRequestsIfAny (Container $dic)
	Handle async requests for the notification item. More...
	renderExtendedMetaBarInFullscreenMode (Container $dic)

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.

                       : 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
    ]);
}

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

buildMetabar()

ILIAS\UI\examples\MainControls\MetaBar\buildMetabar

(

\ILIAS\UI\Factory

$f

)

Definition at line 57 of file base_metabar.php.

                                           : \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();
}

References Vendor\Package\$f.

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

Here is the caller graph for this function:

buildMetabarWithNotifications()

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

Definition at line 82 of file extended_example_for_developers.php.

{
    $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;
}

References Vendor\Package\$f.

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

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 a link "See UI in fullscreen-mode". Clicking the link opens a standard page with the MetaBar in the header. The Notification Center in the MetaBar contains the Chat example with async functionality. The page content

provides buttons to add, reset or set chat notifications.

Returns

string

Definition at line 60 of file extended_example_for_developers.php.

                                          : string
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $url = $DIC->http()->request()->getUri()->__toString() . '&extended_metabar_ui=1';
    $txt = $f->legacy()->content('<p>
            The extended MetaBar example opens in fullscreen to showcase the
            Notification Item async functionality in the proper page layout.
            Use the Notification Center (bell icon) in the MetaBar and the
            buttons below to try the async features.
            </p>');
 
    $page_demo = $f->link()->standard('See UI in fullscreen-mode', $url);
 
    return $renderer->render([
        $txt,
        $page_demo
    ]);
}

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

handleAsyncRequestsIfAny()

ILIAS\UI\examples\MainControls\MetaBar\handleAsyncRequestsIfAny

(

Container

$dic

)

Handle async requests for the notification item.

Exits if request was async.

Definition at line 101 of file extended_example_for_developers.php.

                                                 : void
{
    $f = $dic->ui()->factory();
    $renderer = $dic->ui()->renderer();
    $refinery = $dic->refinery();
    $request_wrapper = $dic->http()->wrapper()->query();
 
    $icon = $f->symbol()->icon()->standard("chtr", "chtr");
    $title = $f->link()->standard("Some Title", "#");
    $item = $f->item()->notification($title, $icon);
 
    $async_close = $_SERVER['REQUEST_URI'] . '&close_item=true&async_load_replace=false&async_load_replace_content=false&async_add_aggregate=false';
    $closable_item = $item->withCloseAction($async_close);
    $async_replace_url = $_SERVER['REQUEST_URI'] . '&close_item=false&async_load_replace=true&async_load_replace_content=false&async_add_aggregate=false';
    $async_replace_content_load_url = $_SERVER['REQUEST_URI'] . '&close_item=false&async_load_replace=false&async_load_replace_content=true&async_add_aggregate=false';
    $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") {
        $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());
 
        $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;
    }
}

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

pageMetabarDemoContent()

ILIAS\UI\examples\MainControls\MetaBar\pageMetabarDemoContent

(

\ILIAS\UI\Factory

$f

)

Definition at line 120 of file base_metabar.php.

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

References Vendor\Package\$f.

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

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.

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

References Vendor\Package\$f.

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

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.

                                                    : \ILIAS\UI\Component\MainControls\Footer
{
    $text = 'Footer';
 
    return $f->mainControls()->footer()->withAdditionalText($text);
}

References Vendor\Package\$f, and $text.

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

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.

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

References Vendor\Package\$f.

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

Here is the caller graph for this function:

renderExtendedMetaBarInFullscreenMode()

ILIAS\UI\examples\MainControls\MetaBar\renderExtendedMetaBarInFullscreenMode

(

Container

$dic

)

Definition at line 160 of file extended_example_for_developers.php.

                                                              : string
{
    $f = $dic->ui()->factory();
    $renderer = $dic->ui()->renderer();
 
    $async_replace_url = $_SERVER['REQUEST_URI'] . '&close_item=false&async_load_replace=true&async_load_replace_content=false&async_add_aggregate=false';
    $async_add_aggregate = $_SERVER['REQUEST_URI'] . '&close_item=false&async_load_replace=false&async_load_replace_content=false&async_add_aggregate=true';
 
    $icon = $f->symbol()->icon()->standard("chtr", "chtr");
    $title = $f->link()->standard("Some Title", "#");
    $item = $f->item()->notification($title, $icon);
    $async_close = $_SERVER['REQUEST_URI'] . '&close_item=true&async_load_replace=false&async_load_replace_content=false&async_add_aggregate=false';
    $closable_item = $item->withCloseAction($async_close);
 
    $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});
                });";
        });
 
    $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_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));
            ";
        });
 
    $async_slate = $f->mainControls()->slate()->notification("Chat", [$async_item]);
 
    $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]);
 
 
    $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);
 
    $metabar = buildMetabarWithNotifications($f, $notification_center);
 
    $logo = $f->image()->responsive("assets/images/logo/HeaderIcon.svg", "ILIAS");
    $responsive_logo = $f->image()->responsive("assets/images/logo/HeaderIconResponsive.svg", "ILIAS");
    $breadcrumbs = $f->breadcrumbs([]);
    $mainbar = $f->mainControls()->mainBar();
    $footer = $f->mainControls()->footer()->withAdditionalText('Footer');
    $tc = $dic->ui()->factory()->toast()->container();
 
    $content = [
        $f->panel()->standard(
            'Notification Item Async Demo',
            $f->legacy()->content(
                "Use the Notification Center (bell icon) in the MetaBar above, then try these buttons:<br /><br />"
                . $renderer->render([$add_button, $set_button, $reset_button])
            )
        ),
    ];
 
    $page = $f->layout()->page()->standard(
        $content,
        $metabar,
        $mainbar,
        $breadcrumbs,
        $logo,
        $responsive_logo,
        "./assets/images/logo/favicon.ico",
        $tc,
        $footer,
        'UI MetaBar Extended Demo',
        'ILIAS',
        'MetaBar Async Demo'
    )->withUIDemo(true);
 
    return $renderer->render($page);
}
 
global $DIC;
$request_wrapper = $DIC->http()->wrapper()->query();
$refinery = $DIC->refinery();
 
handleAsyncRequestsIfAny($DIC);
 
if ($request_wrapper->has('extended_metabar_ui')
    && $request_wrapper->retrieve('extended_metabar_ui', $refinery->kindlyTo()->int()) === 1
) {
    \ilInitialisation::initILIAS();
    echo renderExtendedMetaBarInFullscreenMode($DIC);
    exit();
}

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

Here is the call 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.

                                                      : 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);
}

References $dic, 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(), and ILIAS\UI\examples\MainControls\MetaBar\pageMetabarDemoMainbar().

Here is the call 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\handleAsyncRequestsIfAny().

$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\handleAsyncRequestsIfAny().