ILIAS  trunk Revision v11.0_alpha-3011-gc6b235a2e85
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 ()
 
 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.

36 : string
37{
38 global $DIC;
39 $f = $DIC->ui()->factory();
40 $renderer = $DIC->ui()->renderer();
41
42 $url = $DIC->http()->request()->getUri()->__toString() . '&new_metabar_ui=1';
43 $txt = $f->legacy()->content('<p>
44 The Metabar Example opens in Fullscreen to showcase the behaviour of the metabar best.
45 Note, an comprensive example for developers on how to access the JS API of the Metabar
46 feature bellow in the second example.
47 </p>');
48
49 $page_demo = $f->link()->standard('See UI in fullscreen-mode', $url);
50
51 return $renderer->render([
52 $txt,
53 $page_demo
54 ]);
55}
$renderer
$txt
Definition: error.php:31
$url
Definition: shib_logout.php:68

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

◆ buildMetabar()

ILIAS\UI\examples\MainControls\MetaBar\buildMetabar ( \ILIAS\UI\Factory  $f)

Definition at line 57 of file base_metabar.php.

58{
59 $help = $f->button()->bulky($f->symbol()->glyph()->help(), 'Help', '#');
60 $search = $f->button()->bulky($f->symbol()->glyph()->search(), 'Search', '#');
61 $user = $f->button()->bulky($f->symbol()->glyph()->user(), 'User', '#');
62
63 $notes = $f->mainControls()->slate()->legacy(
64 'Notification',
65 $f->symbol()->glyph()->notification(),
66 $f->legacy()->content('some content')
67 );
68
69 return $f->mainControls()->metaBar()
70 ->withAdditionalEntry('search', $search)
71 ->withAdditionalEntry('help', $help)
72 ->withAdditionalEntry('notes', $notes)
73 ->withAdditionalEntry('user', $user);
74}
75
76global $DIC;
77$request_wrapper = $DIC->http()->wrapper()->query();
78$refinery = $DIC->refinery();
79if ($request_wrapper->has('new_metabar_ui')
80 && $request_wrapper->retrieve('new_metabar_ui', $refinery->kindlyTo()->int()) === 1
81) {
84 exit();
85}
static initILIAS()
ilias initialisation
exit
This describes the MetaBar.
Definition: MetaBar.php:33
if( $request_wrapper->has( 'new_metabar_ui') &&$request_wrapper->retrieve( 'new_metabar_ui', $refinery->kindlyTo() ->int())===1) renderMetaBarInFullscreenMode(Container $dic)

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 218 of file extended_example_for_developers.php.

219{
220 $help = $f->button()->bulky($f->symbol()->glyph()->help(), 'Help', '#');
221 $search = $f->button()->bulky($f->symbol()->glyph()->search(), 'Search', '#');
222 $user = $f->button()->bulky($f->symbol()->glyph()->user(), 'User', '#');
223
224
225 $metabar = $f->mainControls()->metabar()
226 ->withAdditionalEntry('search', $search)
227 ->withAdditionalEntry('help', $help)
228 ->withAdditionalEntry('notification', $notification_center)
229 ->withAdditionalEntry('user', $user);
230
231 return $metabar;
232}

References Vendor\Package\$f.

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

+ 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.

55 : string
56{
57 //Set up the gears as always
58 global $DIC;
59 $f = $DIC->ui()->factory();
60 $renderer = $DIC->ui()->renderer();
61 $refinery = $DIC->refinery();
62 $request_wrapper = $DIC->http()->wrapper()->query();
63
64 //Create some bare UI Components Notification Item to be used all over the place
65 $icon = $f->symbol()->icon()->standard("chtr", "chtr");
66 $title = $f->link()->standard("Some Title", "#");
67 $item = $f->item()->notification($title, $icon);
68
69 //We provide 4 async endpoints here
70 //Endpoint if element ist closed
71 $async_close = $_SERVER['REQUEST_URI'] . '&close_item=true&async_load_replace=false&async_load_replace_content=false&async_add_aggregate=false';
72 //Attach this directly to all items to be closable (showing the Close Button)
73 $closable_item = $item->withCloseAction($async_close);
74 //Endpoint if replace button is pressed
75 $async_replace_url = $_SERVER['REQUEST_URI'] . '&close_item=false&async_load_replace=true&async_load_replace_content=false&async_add_aggregate=false';
76 //Endpoint if for only replacing data of the item (description, title etc.)
77 $async_replace_content_load_url = $_SERVER['REQUEST_URI'] . '&close_item=false&async_load_replace=false&async_load_replace_content=true&async_add_aggregate=false';
78 //Endpoint for adding one single aggreate item
79 $async_add_aggregate = $_SERVER['REQUEST_URI'] . '&close_item=false&async_load_replace=false&async_load_replace_content=false&async_add_aggregate=true';
80
81 if ($request_wrapper->has('close_item') && $request_wrapper->retrieve('close_item', $refinery->kindlyTo()->string()) === "true") {
82 //Note that we passe back JS logic here for further processing here
83 $js = $f->legacy()->content("")->withOnLoadCode(function ($id) use ($async_replace_content_load_url) {
84 return "
85 il.DemoScopeRemaining--;
86 il.DemoScopeItem.replaceContentByAsyncItemContent('$async_replace_content_load_url',{remaining: il.DemoScopeRemaining,added: il.DemoScopeAdded});
87 ";
88 });
89 echo $renderer->renderAsync($js);
90 exit;
91 }
92
93 if ($request_wrapper->has('async_load_replace') && $request_wrapper->retrieve('async_load_replace', $refinery->kindlyTo()->string()) === "true") {
94 $remaining = $request_wrapper->retrieve("remaining", $refinery->kindlyTo()->int());
95 $added = $request_wrapper->retrieve("added", $refinery->kindlyTo()->int());
96
97 //We create the amount of aggregates send to us by get and put an according
98 //description into the newly create Notification Item
99 $items = [];
100 for ($i = 1; $i < $added + 1; $i++) {
101 $items[] = $closable_item->withDescription("This item is number: " . $i . " of a fix set of 10 entries.");
102 }
103 $replacement = $item->withDescription("Number of Async non-closed Aggregates: " . $remaining . ", totally created: " . $added)
104 ->withAggregateNotifications($items);
105
106 echo $renderer->renderAsync([$replacement]);
107 exit;
108 }
109
110 if ($request_wrapper->has('async_load_replace_content') && $request_wrapper->retrieve('async_load_replace_content', $refinery->kindlyTo()->string()) === "true") {
111 $remaining = $request_wrapper->retrieve("remaining", $refinery->kindlyTo()->int());
112 $added = $request_wrapper->retrieve("added", $refinery->kindlyTo()->int());
113 $replacement = $item->withDescription("Number of Async non-closed Aggregates: " . $remaining . ", totally created: " . $added);
114 echo $renderer->renderAsync([$replacement]);
115 exit;
116 }
117
118 if ($request_wrapper->has('async_add_aggregate') && $request_wrapper->retrieve('async_add_aggregate', $refinery->kindlyTo()->string()) === "true") {
119 $added = $request_wrapper->retrieve("added", $refinery->kindlyTo()->int());
120
121 $new_aggregate = $closable_item->withDescription("The item has been added, Nr: " . $added);
122
123 echo $renderer->renderAsync([$new_aggregate]);
124 exit;
125 }
126
127 //Button with attached js logic to add one new Notification, note, that
128 //we also change the description of the already existing parent Notification
129 //Item holding the aggregates.
130 $add_button = $f->button()->standard("Add Chat Notification", "#")
131 ->withAdditionalOnLoadCode(function ($id) use ($async_replace_url, $async_add_aggregate) {
132 return "
133 $('#$id').click(function() {
134 il.DemoScopeItem.getCounterObjectIfAny().incrementNoveltyCount(1);
135 il.DemoScopeAdded++;
136 il.DemoScopeRemaining++;
137 il.DemoScopeItem.addAsyncAggregate('$async_add_aggregate',{remaining: il.DemoScopeAdded,added: il.DemoScopeAdded});
138 il.DemoScopeItem.replaceContentByAsyncItemContent('$async_replace_url',{remaining: il.DemoScopeRemaining,added: il.DemoScopeAdded});
139 });";
140 });
141
142 //Resetting all counts to 0, remove all aggregates
143 $reset_button = $f->button()->standard("Reset Chat", "#")
144 ->withAdditionalOnLoadCode(function ($id) use ($async_replace_url) {
145 return "
146 $('#$id').click(function() {
147 il.DemoScopeItem.getCounterObjectIfAny().decrementNoveltyCount(il.DemoScopeRemaining);
148 il.DemoScopeAdded = 0;
149 il.DemoScopeRemaining = 0;
150 il.DemoScopeItem.replaceByAsyncItem('$async_replace_url',{remaining: il.DemoScopeAdded,added: il.DemoScopeAdded});
151 });";
152 });
153
154 //Set all counts to a fixed value of ten.
155 $set_button = $f->button()->standard("Set to 10 chat entries", "#")
156 ->withAdditionalOnLoadCode(function ($id) use ($async_replace_url) {
157 return "
158 $('#$id').click(function() {
159 il.DemoScopeItem.getCounterObjectIfAny().decrementNoveltyCount(il.DemoScopeRemaining);
160 il.DemoScopeItem.getCounterObjectIfAny().incrementNoveltyCount(10);
161 il.DemoScopeAdded = 10;
162 il.DemoScopeRemaining = 10;
163 il.DemoScopeItem.replaceByAsyncItem('$async_replace_url',{remaining: il.DemoScopeAdded,added: il.DemoScopeAdded});
164 });";
165 });
166
172 $async_item = $item
173 ->withDescription("This is the original Version after the Page has loaded. Will be replaced completely.")
174 ->withAdditionalOnLoadCode(function ($id) {
175 return "
176 il.DemoScopeAdded = 0;
177 il.DemoScopeRemaining = 0;
178 il.DemoScopeItem = il.UI.item.notification.getNotificationItemObject($($id));
179 ";
180 });
181
187 return usuallyDoneByGlobalScreenProbablyIgnore($async_item, $f, $renderer, $add_button, $set_button, $reset_button);
188}
$id
plugin.php for ilComponentBuildPluginInfoObjectiveTest::testAddPlugins
Definition: plugin.php:23
usuallyDoneByGlobalScreenProbablyIgnore($async_item, $f, $renderer, $add_button, $set_button, $reset_button)
$_SERVER['HTTP_HOST']
Definition: raiseError.php:26
global $DIC
Definition: shib_login.php:26

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().

+ 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.

120 : array
121{
122 return [
123 $f->panel()->standard(
124 'All about the Meta Bar',
125 $f->legacy()->content(
126 "See above"
127 )
128 ),
129 ];
130}

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.

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.

143{
144 $text = 'Footer';
145
146 return $f->mainControls()->footer()->withAdditionalText($text);
147}

References Vendor\Package\$f.

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.

138{
139 return $f->mainControls()->mainBar();
140}
This describes the MainBar.
Definition: MainBar.php:34

References Vendor\Package\$f.

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

+ 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.

87 : string
88{
89 $f = $dic->ui()->factory();
90 $renderer = $dic->ui()->renderer();
91 $logo = $f->image()->responsive("assets/images/logo/HeaderIcon.svg", "ILIAS");
92 $responsive_logo = $f->image()->responsive("assets/images/logo/HeaderIconResponsive.svg", "ILIAS");
93 $breadcrumbs = pageMetabarDemoCrumbs($f);
94 $metabar = buildMetabar($f);
95 $mainbar = pageMetabarDemoMainbar($f);
96 $footer = pageMetabarDemoFooter($f);
97 $tc = $dic->ui()->factory()->toast()->container();
98
99 $content = pageMetabarDemoContent($f);
100
101 $page = $f->layout()->page()->standard(
102 $content,
103 $metabar,
104 $mainbar,
105 $breadcrumbs,
106 $logo,
107 $responsive_logo,
108 "./assets/images/logo/favicon.ico",
109 $tc,
110 $footer,
111 'UI Meta Bar DEMO', //page title
112 'ILIAS', //short title
113 'ILIAS Meta Bar Demo' //view title
114 )->withUIDemo(true);
115
116 return $renderer->render($page);
117}
$dic
Definition: ltiresult.php:33
pageMetabarDemoContent(\ILIAS\UI\Factory $f)
pageMetabarDemoCrumbs(\ILIAS\UI\Factory $f)
pageMetabarDemoMainbar(\ILIAS\UI\Factory $f)
pageMetabarDemoFooter(\ILIAS\UI\Factory $f)

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:

◆ 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.

191{
192 //Put the item in some slate.
193 $async_slate = $f->mainControls()->slate()->notification("Chat", [$async_item]);
194
195
196 //Just some candy, to give the whole example a more realistic look.
197 $mail_icon = $f->symbol()->icon()->standard("mail", "mail");
198 $mail_title = $f->link()->standard("Inbox", "link_to_inbox");
199 $mail_notification_item = $f->item()->notification($mail_title, $mail_icon)
200 ->withDescription("You have 23 unread mails in your inbox")
201 ->withProperties(["Time" => "3 days ago"]);
202 $mail_slate = $f->mainControls()->slate()->notification("Mail", [$mail_notification_item]);
203
204
205 //Note
206 $notification_glyph = $f->symbol()->glyph()->notification("notification", "notification")
207 ->withCounter($f->counter()->novelty(1));
208
209 $notification_center = $f->mainControls()->slate()
210 ->combined("Notification Center", $notification_glyph)
211 ->withAdditionalEntry($async_slate)
212 ->withAdditionalEntry($mail_slate);
213
214 $css_fix = "<style>.panel-primary .il-maincontrols-metabar{flex-direction: column;} .panel-primary .il-metabar-slates{position: relative;top: 0px;}</style>";
215 return $css_fix . $renderer->render([buildMetabarWithNotifications($f, $notification_center),$add_button,$set_button,$reset_button]);
216}

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

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

+ 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

◆ $refinery

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

◆ $request_wrapper

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