first commit

message/output/popup/templates/message_content_item.mustache

@@ -0,0 +1,75 @@
+{{!
+    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 message_popup/message_content_item
+
+    This template will render the message content item for the
+    navigation bar message menu.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * All data attributes are required
+
+    Context variables required for this template:
+    * isread If the message is read or not
+    * contexturl The link to the message on the messages page
+    * fullname The name of the sender
+    * profileimageurl The URL for the sender's profile image
+    * sentfromcurrentuser Was the last message sent by the current user
+    * lastmessage The message text
+    * unreadcount The number of unread messages in this conversation
+
+    Example context (json):
+    {
+        "isread": true,
+        "contexturl": "http://www.moodle.com",
+        "fullname": "Some Person",
+        "profileimageurl": "http://www.moodle.com",
+        "sentfromcurrentuser": false,
+        "lastmessage": "Hello, this is Some Person!",
+        "unreadcount": 1
+    }
+
+}}
+<a class="content-item-container {{^isread}}unread{{/isread}}"
+    data-region="message-content-item-container"
+    role="listitem"
+    href="{{{contexturl}}}"
+    {{^isread}}aria-label="{{#str}} viewunreadmessageswith, message, {{fullname}} {{/str}}"{{/isread}}
+    {{#isread}}aria-label="{{#str}} viewmessageswith, message, {{fullname}} {{/str}}"{{/isread}}
+    tabindex="0">
+
+    <div class="content-item">
+        <div class="profile-image-container">
+            <img src="{{{profileimageurl}}}" />
+        </div>
+        <div class="content-item-body">
+            <h3>{{fullname}}</h3>
+            <p>
+                {{#sentfromcurrentuser}}
+                    <span data-region="last-message-user">{{#str}}you, message{{/str}}</span>
+                {{/sentfromcurrentuser}}
+                {{lastmessage}}
+            </p>
+        </div>
+        <div class="unread-count-container">
+            <span data-region="unread-count" class="badge bg-danger text-white">{{unreadcount}}</span>
+        </div>
+    </div>
+</a>

message/output/popup/templates/notification_area.mustache

@@ -0,0 +1,81 @@
+{{!
+    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 message_popup/notification_area
+
+    This template will render the notification area on the notifications
+    page.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * All data attributes are required
+
+    Context variables required for this template:
+    * userid The logged in user id
+    * offset The offset amound of the notification list
+    * limit The limit amount for the notification list
+    * notificationid The specific notification to select
+
+    Example context (json):
+    {
+        "userid":3
+    }
+
+}}
+<div class="notification-area" data-region="notification-area" data-user-id="{{userid}}">
+    <div class="control-area" data-region="control-area">
+        <div class="header"></div>
+        <div class="content" data-region="content"></div>
+        <div class="empty-text">{{#str}} nonotifications, message {{/str}}</div>
+        {{> core/loading }}
+    </div>
+    <div class="content-area" data-region="content-area">
+        <div class="toggle-mode">
+            <button class="btn btn-link" data-action="toggle-mode">{{#str}} back {{/str}}</button>
+        </div>
+        <div class="header" data-region="header"></div>
+        <div class="content" data-region="content"></div>
+        <div class="empty-text">{{#str}} selectnotificationtoview, message {{/str}}</div>
+        <div class="footer" data-region="footer"></div>
+    </div>
+</div>
+{{#js}}
+require(['jquery', 'message_popup/notification_area_control_area', 'message_popup/notification_area_content_area'],
+    function($, ControlArea, ContentArea) {
+
+    var userId = {{userid}};
+    var controlArea = new ControlArea($('[data-region="control-area"]'), userId);
+    {{#offset}}
+    controlArea.setOffset({{.}});
+    {{/offset}}
+    {{#limit}}
+    controlArea.setLimit({{.}});
+    {{/limit}}
+    {{#notificationid}}
+    controlArea.loadMoreNotifications().done(function() {
+        controlArea.showNotification({{.}});
+    });
+    {{/notificationid}}
+    {{^notificationid}}
+    controlArea.loadMoreNotifications();
+    {{/notificationid}}
+
+    new ContentArea($('[data-region="content-area"]'), userId);
+});
+{{/js}}

message/output/popup/templates/notification_area_content_area_content.mustache

@@ -0,0 +1,39 @@
+{{!
+    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 message_popup/notification_area_content_area_content
+
+    This template will render the content for the content area in the
+    notification area on the notifications page.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Context variables required for this template:
+    * fullmessagehtml The notification in HTML format
+    * fullmessage     The notification in plain text (if no HTML)
+
+    Example context (json):
+    {
+    }
+
+}}
+{{#fullmessagehtml}}{{{.}}}{{/fullmessagehtml}}
+{{^fullmessagehtml}}<pre>{{fullmessage}}</pre>{{/fullmessagehtml}}

message/output/popup/templates/notification_area_content_area_footer.mustache

@@ -0,0 +1,38 @@
+{{!
+    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 message_popup/notification_area_content_area_footer
+
+    This template will render the footer for the content area in the
+    notification area on the notifications page.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Context variables required for this template:
+    * contexturl     The URL for the associated resource
+    * contexturlname Human readable name for the URL
+
+    Example context (json):
+    {
+    }
+
+}}
+<a href="{{{contexturl}}}">{{#str}} viewnotificationresource, message, {{contexturlname}}{{/str}}</a>

message/output/popup/templates/notification_area_content_area_header.mustache

@@ -0,0 +1,41 @@
+{{!
+    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 message_popup/notification_area_content_area_header
+
+    This template will render the header for the content area in the
+    notification area on the notifications page.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Context variables required for this template:
+    * iconurl               The URL for the notification icon
+    * subject               The notification subject
+    * timecreatedpretty     Pretty format when the notification was created
+
+    Example context (json):
+    {
+    }
+
+}}
+<div class="image-container">{{#pix}} e/text_highlight, core, {{#str}} notificationimage, message {{/str}} {{/pix}}</div>
+<div class="subject-container">{{subject}}</div>
+<div class="timestamp">{{timecreatedpretty}}</div>

message/output/popup/templates/notification_content_item.mustache

@@ -0,0 +1,85 @@
+{{!
+    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 message_popup/notification_content_item
+
+    This template will render the notification content item for the
+    navigation bar notification menu.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * All data attributes are required
+
+    Context variables required for this template:
+    * contexturl A link to the notification resource
+    * read If the notification is read or not
+    * subject The subject text
+    * id Notification id
+    * iconurl The URL for the notification icon
+    * shortenedsubject A shortened version of subject text
+    * timecreatedpretty Pretty formatted time stamp
+    * viewmoreurl The link to the full notification
+
+    Example context (json):
+    {
+        "contexturl": "http://www.moodle.com",
+        "read": true,
+        "subject": "You have a notification",
+        "id": 1,
+        "iconurl": "http://www.moodle.com",
+        "shortenedsubject": "You have a...",
+        "timecreatedpretty": "5 minutes ago",
+        "viewmoreurl": "http://www.moodle.com"
+    }
+
+}}
+<div class="content-item-container notification {{^read}}unread{{/read}}"
+    data-region="notification-content-item-container"
+    data-id="{{id}}"
+    role="listitem">
+
+    {{#contexturl}}
+    <a class="context-link" href="{{{.}}}" data-action="content-item-link"
+    {{/contexturl}}
+    {{^contexturl}}
+    <div tabindex="0"
+    {{/contexturl}}
+        {{#read}}aria-label="{{subject}}"{{/read}}
+        {{^read}}aria-label="{{#str}} unreadnotification, message, {{subject}} {{/str}}"{{/read}}>
+
+        <div class="content-item-body">
+            <div class="notification-image">
+                {{#pix}} e/text_highlight, core, {{#str}} notificationimage, message {{/str}} {{/pix}}
+            </div>
+            <div class="notification-message">{{shortenedsubject}}</div>
+        </div>
+        <div class="content-item-footer">
+            <div class="timestamp">{{timecreatedpretty}}</div>
+        </div>
+
+        {{#viewmoreurl}}
+            <a href="{{{.}}}" class="view-more" data-action="view-more">{{#str}} viewfullnotification, message {{/str}}</a>
+        {{/viewmoreurl}}
+    {{#contexturl}}
+    </a>
+    {{/contexturl}}
+    {{^contexturl}}
+    </div>
+    {{/contexturl}}
+</div>

message/output/popup/templates/notification_popover.mustache

@@ -0,0 +1,98 @@
+{{!
+    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 message_popup/notification_popover
+
+    This template will render the notification popover for the navigation bar.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * All data attributes are required
+
+    Context variables required for this template:
+    * userid the logged in user id
+    * urls The URLs for the popover
+
+    Example context (json):
+    {
+        "userid": 3,
+        "urls": {
+            "preferences": "http://www.moodle.com"
+        }
+    }
+
+}}
+{{< core/popover_region }}
+    {{$classes}}popover-region-notifications{{/classes}}
+    {{$attributes}}id="nav-notification-popover-container" data-userid="{{userid}}"{{/attributes}}
+
+    {{$togglelabel}}{{!
+        }}{{^unreadcount}} {{#str}} shownotificationwindownonew, message {{/str}} {{/unreadcount}} {{!
+        }}{{#unreadcount}} {{#str}} shownotificationwindowwithcount, message, {{.}} {{/str}} {{/unreadcount}} {{!
+    }}{{/togglelabel}}
+    {{$togglecontent}}
+        {{#pix}} i/notifications, core, {{#str}} togglenotificationmenu, message {{/str}} {{/pix}}
+        <div
+            class="count-container {{^unreadcount}}hidden{{/unreadcount}}"
+            data-region="count-container"
+            aria-hidden=true
+        >
+            {{unreadcount}}
+        </div>
+    {{/togglecontent}}
+
+    {{$containerlabel}}{{#str}} notificationwindow, message {{/str}}{{/containerlabel}}
+
+    {{$headertext}}{{#str}} notifications, message {{/str}}{{/headertext}}
+    {{$headeractions}}
+        <a class="mark-all-read-button"
+           href="#"
+           title="{{#str}} markallread {{/str}}"
+           data-action="mark-all-read"
+           role="button"
+           aria-label="{{#str}} markallread {{/str}}">
+            <span class="normal-icon">{{#pix}} t/markasread, core {{/pix}}</span>
+            {{> core/loading }}
+        </a>
+        {{# urls.preferences }}
+            <a href="{{{ . }}}"
+               title="{{#str}} notificationpreferences, message {{/str}}"
+               aria-label="{{#str}} notificationpreferences, message {{/str}}">
+                {{#pix}} i/settings, core {{/pix}}</a>
+        {{/ urls.preferences }}
+    {{/headeractions}}
+
+    {{$content}}
+        <div class="all-notifications"
+            data-region="all-notifications"
+            role="log"
+            aria-busy="false"
+            aria-atomic="false"
+            aria-relevant="additions"></div>
+        <div class="empty-message" tabindex="0" data-region="empty-message">{{#str}} nonotifications, message {{/str}}</div>
+    {{/content}}
+{{/ core/popover_region }}
+{{#js}}
+require(['jquery', 'message_popup/notification_popover_controller'], function($, Controller) {
+    var container = $('#nav-notification-popover-container');
+    var controller = new Controller(container);
+    controller.registerEventListeners();
+    controller.registerListNavigationEventListeners();
+});
+{{/js}}