refs #4179 render a simple dom node for each notification

matomo-org · Oct 26, 2013 · 2220899 · 2220899
1 parent c7ffd57
commit 2220899
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 22 deletions.
diff --git a/plugins/CoreHome/javascripts/notification.js b/plugins/CoreHome/javascripts/notification.js
@@ -12,8 +12,9 @@
     var Notification = function () {
     };
 
-    Notification.notify = function (title, message, options) {
-        // render dom node
+    Notification.prototype.notify = function (title, message, options) {
+        var template = '<div class="alert alert-' + options.context + ' ">' + options.type + '</div>';
+        $(template).appendTo('#notificationContainer');
     };
 
     exports.Notification = Notification;

diff --git a/plugins/CoreHome/javascripts/notificationparser.js b/plugins/CoreHome/javascripts/notificationparser.js
@@ -5,14 +5,21 @@
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
  */
 
-$(document).ready(function () {
-    var $notificationNodes = $('[data-role="notification"]');
+$(document).ready((function ($, require) {
+    return function () {
 
-    $notificationNodes.each(function (index, notificationNode) {
-        $notificationNode = $(notificationNode);
-        var attributes = $notificationNode.data();
+        var UI = require('piwik/UI');
 
-        // Notification.notify(attributes.title, attributes.message, attributes);
-    });
+        var $notificationNodes = $('[data-role="notification"]');
 
-});
+        $notificationNodes.each(function (index, notificationNode) {
+            $notificationNode = $(notificationNode);
+            var attributes = $notificationNode.data();
+
+            var notification = new UI.Notification();
+            notification.notify(attributes.title, attributes.message, attributes);
+        });
+
+    }
+
+})(jQuery, require));
diff --git a/plugins/CoreHome/templates/_notifications.twig b/plugins/CoreHome/templates/_notifications.twig
@@ -1,12 +1,18 @@
-<div style="display:hidden">
-    {% for notificationId, notification in notifications %}
-        <div data-id="{{ notificationId }}"
-             data-role="notification"
-             data-type="{{ notification.type }}"
-             data-title="{{ notification.title }}"
-             data-message="{{ notification.message }}"
-             data-noclear="{{ notification.hasNoClear }}"
-             data-context="{{ notification.context }}"
-             data-priority="{{ notification.priority }}"></div>
-    {% endfor %}
-</div>
+
+{% if notifications|length %}
+    <div id="notificationContainer">
+
+    </div>
+    <div style="display:hidden">
+        {% for notificationId, notification in notifications %}
+            <div data-id="{{ notificationId }}"
+                 data-role="notification"
+                 data-type="{{ notification.type }}"
+                 data-title="{{ notification.title }}"
+                 data-message="{{ notification.message }}"
+                 data-noclear="{{ notification.hasNoClear }}"
+                 data-context="{{ notification.context }}"
+                 data-priority="{{ notification.priority }}"></div>
+        {% endfor %}
+    </div>
+{% endif %}