ILIAS\UI\examples\Popover\Standard Namespace Reference

Functions
	show_card_in_popover ()
	description: > Example for rendering a standard popover. More...
	show_popover_with_async_loaded_content ()
	description: > Example for rendering a standard popover with asynchronous loaded content. More...
	show_popover_with_different_positions ()
	description: > Example for rendering a standard popover with different positions. More...
	show_popover_with_vertical_scrollbars ()
	description: > Example for rendering a standard popover with vertical scrollbars. More...

Function Documentation

show_card_in_popover()

ILIAS\UI\examples\Popover\Standard\show_card_in_popover

(

)

---

description: > Example for rendering a standard popover.

expected output: > ILIAS shows a button titled "Show Card". A click onto the button opens a card popover.

The popover can be closed by clicking onto the ILIAS background outside of the popover.

Definition at line 34 of file show_card_in_popover.php.

References $DIC, and $renderer.

{
    global $DIC;

    // This example shows how to render a card containing an image and a descriptive list inside a popover.
    $factory = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();

    $image = $factory->image()->responsive("./assets/images/logo/HeaderIcon.svg", "Thumbnail Example");
    $card = $factory->card()->standard("Title", $image)->withSections(array($factory->legacy()->content("Hello World, I'm a card")));
    $popover = $factory->popover()->standard($card)->withTitle('Card');
    $button = $factory->button()->standard('Show Card', '#')
        ->withOnClick($popover->getShowSignal());

    return $renderer->render([$popover, $button]);
}

show_popover_with_async_loaded_content()

ILIAS\UI\examples\Popover\Standard\show_popover_with_async_loaded_content

(

)

---

description: > Example for rendering a standard popover with asynchronous loaded content.

expected output: > ILIAS shows a button titled "Show Popover". After the first click the text shows up with a short delay.

You can close the popover b clicking onto the ILIAS background outside of the popover.

Definition at line 33 of file show_popover_with_async_loaded_content.php.

References $_SERVER, $DIC, ILIAS\UI\examples\Layout\Page\Standard\$refinery, $renderer, ILIAS\UI\examples\Layout\Page\Standard\$request_wrapper, exit, and ILIAS\GlobalScreen\Scope\Footer\Factory\withTitle().

{
    global $DIC;
    $factory = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $refinery = $DIC->refinery();
    $request_wrapper = $DIC->http()->wrapper()->query();

    if (
        $request_wrapper->has('renderPopoverAsync') &&
        $request_wrapper->retrieve('renderPopoverAsync', $refinery->kindlyTo()->bool())
    ) {
        // This is the ajax request to load the content of the popover. During the ajax request,
        // a loading spinner is presented to the user. Check the code below on how to construct the popover,
        // e.g. using Popover::withAsyncContentUrl().
        $content = $factory->legacy()->content('This text is rendered async');
        echo $renderer->render($content);
        exit();
    }

    $async_url = $_SERVER['REQUEST_URI'] . '&renderPopoverAsync=1';
    $popover = $factory->popover()->standard($factory->legacy()->content(''))
        ->withTitle('Popover')
        ->withAsyncContentUrl($async_url);
    $button = $factory->button()->standard('Show Popover', '#')
        ->withOnClick($popover->getShowSignal());

    return $renderer->render([$popover, $button]);
}

Here is the call graph for this function:

show_popover_with_different_positions()

ILIAS\UI\examples\Popover\Standard\show_popover_with_different_positions

(

)

---

description: > Example for rendering a standard popover with different positions.

expected output: > In this example ILIAS shows depending on the screen size and scroll position the popover's text accordingly. ILIAS shows three different buttons. Click onto the button and check if the popover's behaviour aligns with the description in the first sentence of this example's expected output.

Please do some tests with different size and scroll positions on your browser window to see if the functions still work.

Definition at line 36 of file show_popover_with_different_positions.php.

References $DIC, and $renderer.

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

    $content = $factory->legacy()->content('The position of this popover is calculated automatically based on the available space. Note that the max width CSS setting is used here, as this text is quite long.');
    $popover = $factory->popover()->standard($content);
    $button = $factory->button()->standard('Auto Popover', '#')
        ->withOnClick($popover->getShowSignal());

    $content = $factory->legacy()->content('The position of this popover is either on top or bottom of the triggerer, based on the available space');
    $popover2 = $factory->popover()->standard($content)
        ->withVerticalPosition();
    $button2 = $factory->button()->standard('Vertical Popover', '#')
        ->withOnClick($popover2->getShowSignal());

    $content = $factory->legacy()->content('The position of this popover is either on the left or right of the triggerer, based on the available space');
    $popover3 = $factory->popover()->standard($content)
        ->withHorizontalPosition();
    $button3 = $factory->button()->standard('Horizontal Popover', '#')
        ->withOnClick($popover3->getShowSignal());

    $buttons = implode(' ', [$renderer->render($button), $renderer->render($button2), $renderer->render($button3)]);

    return $buttons . $renderer->render([$popover, $popover2, $popover3]);
}

show_popover_with_vertical_scrollbars()

ILIAS\UI\examples\Popover\Standard\show_popover_with_vertical_scrollbars

(

)

---

description: > Example for rendering a standard popover with vertical scrollbars.

expected output: > ILIAS shows a button titled "Show me some Series". A click onto the button opens a popover with a longer list of TV-Series.

The list is too big for the popover, but you can scroll down.

Definition at line 34 of file show_popover_with_vertical_scrollbars.php.

References $DIC, $renderer, and ILIAS\GlobalScreen\Scope\Footer\Factory\withTitle().

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

    // Note: A list should be rendered with the listing popover, e.g. $factory->popover()->listing()
    // However, at the moment there is no component present representing such list items, so this example
    // also uses a standard popover.

    $series = [
        'Breaking Bad',
        'Big Bang Theory',
        'Dexter',
        'Better Call Saul',
        'Narcos',
        'Ray Donovan',
        'Simpsons',
        'South Park',
        'Fargo',
        'Bloodline',
        'The Walking Dead',
        'New Girl',
        'Sons of Anarchy',
        'How I Met Your Mother',
    ];
    $list = $renderer->render($factory->listing()->unordered($series));
    // Note: The Popover does not restrict the height. It is the responsibility of the content component
    // to define the max height and to display vertical scrollbars, if necessary.
    // At the moment, the renderer of a component is not aware of the context it is rendering the component,
    // e.g. inside a Popover.
    // The inline code below simulates this behaviour. Here we want to reduce the
    // height of the list to 200px and display vertical scrollbars, if needed.
    $content = "<div style='max-height: 200px; overflow-y: auto; padding-right: 10px;'>{$list}</div>";

    $popover = $factory->popover()->standard($factory->legacy()->content($content))->withTitle('Series');
    $button = $factory->button()->standard('Show me some Series', '#')
        ->withOnClick($popover->getShowSignal());

    return $renderer->render([$popover, $button]);
}

Here is the call graph for this function: