MDL-54708 message: add notification popover to nav bar

lib/templates/mdl_popover.mustache

@@ -0,0 +1,70 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core/mdl_popover
+
+    This template will render a mdl popover
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Context variables required for this template:
+    * userid the logged in user id
+
+    Example context (json):
+    {
+    }
+
+}}
+<div class="mdl-popover mdl-popover-{{uniqid}} collapsed {{$classes}}{{/classes}}" {{$attributes}}{{/attributes}}>
+    <div class="mdl-popover-toggle"
+        aria-role="button"
+        aria-controls="mdl-popover-container-{{uniqid}}"
+        aria-haspopup="true"
+        aria-label="{{$togglelabel}}{{#str}}showpopovermenu{{/str}}{{/togglelabel}}"
+        tabindex="0">
+        {{$togglecontent}}{{/togglecontent}}
+    </div>
+    <div {{$containerattributes}}{{/containerattributes}}
+        id="mdl-popover-container-{{uniqid}}"
+        class="mdl-popover-container"
+        aria-expanded="false"
+        aria-hidden="true"
+        aria-label="{{$containerlabel}}{{/containerlabel}}"
+        role="region">
+        <div class="mdl-popover-header-container">
+            <h3 class="mdl-popover-header-text">{{$headertext}}{{/headertext}}</h3>
+            <div class="mdl-popover-header-actions">{{$headeractions}}{{/headeractions}}</div>
+        </div>
+        <div class="mdl-popover-content-container">
+            <div class="mdl-popover-content">
+                {{$content}}{{/content}}
+            </div>
+            <div class="loading-icon">{{#pix}} y/loading, core, {{#str}} loading, mod_assign {{/str}} {{/pix}}</div>
+        </div>
+    </div>
+</div>
+{{#js}}
+require(['jquery', 'core/mdl_popover_controller'], function($, controller) {
+    var container = $(".mdl-popover-{{uniqid}}");
+    var controller = new controller(container);
+    controller.registerBaseEventListeners();
+});
+{{/js}}