Create angularjs directive for Piwik notifications and use in old Notificaction class.

plugins/CoreHome/CoreHome.php

@@ -69,6 +69,7 @@ class CoreHome extends \Piwik\Plugin
         $stylesheets[] = "plugins/CoreHome/angularjs/enrichedheadline/enrichedheadline.directive.less";
         $stylesheets[] = "plugins/CoreHome/angularjs/menudropdown/menudropdown.directive.less";
         $stylesheets[] = "plugins/CoreHome/angularjs/dialogtoggler/ngdialog.less";
+        $stylesheets[] = "plugins/CoreHome/angularjs/notification/notification.directive.less";
     }
 
     public function getJsFiles(&$jsFiles)
@@ -149,6 +150,9 @@ class CoreHome extends \Piwik\Plugin
         $jsFiles[] = "plugins/CoreHome/angularjs/dialogtoggler/dialogtoggler.directive.js";
         $jsFiles[] = "plugins/CoreHome/angularjs/dialogtoggler/dialogtoggler.controller.js";
         $jsFiles[] = "plugins/CoreHome/angularjs/dialogtoggler/dialogtoggler-urllistener.service.js";
+
+        $jsFiles[] = "plugins/CoreHome/angularjs/notification/notification.controller.js";
+        $jsFiles[] = "plugins/CoreHome/angularjs/notification/notification.directive.js";
     }
 
     public function getClientSideTranslationKeys(&$translationKeys)

plugins/CoreHome/angularjs/notification/notification.controller.js

+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+(function () {
+    angular.module('piwikApp').controller('NotificationController', NotificationController);
+
+    NotificationController.$inject = ['piwikApi'];
+
+    function NotificationController(piwikApi) {
+        /**
+         * Marks a persistent notification as read so it will not reappear on the next page
+         * load.
+         */
+        this.markNotificationAsRead = function () {
+            var notificationId = this.notificationId;
+            if (!notificationId) {
+                return;
+            }
+
+            piwikApi.post(
+                { // GET params
+                    module: 'CoreHome',
+                    action: 'markNotificationAsRead'
+                },
+                { // POST params
+                    notificationId: notificationId
+                }
+            );
+        };
+    }
+})();
\ No newline at end of file

plugins/CoreHome/angularjs/notification/notification.directive.html

+<div class="notification system">
+    <button type="button" class="close" data-dismiss="alert" ng-if="!noclear" ng-click="notification.markNotificationAsRead()">&times;</button>
+    <strong ng-if="title">{{ title }}</strong>
+
+    <!-- ng-transclude causes directive child elements to be added here -->
+    <div ng-transclude style="display:inline-block"></div>
+
+</div>
\ No newline at end of file

plugins/CoreHome/angularjs/notification/notification.directive.js

+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+/**
+ * Directive to show a notification.
+ *
+ * Note: using this directive is preferred over the Notification class (which uses jquery
+ * exclusively).
+ *
+ * Supports the following attributes:
+ *
+ * * **context**: Either 'success', 'error', 'info', 'warning'
+ * * **type**: Either 'toast', 'persistent', 'transient'
+ * * **noclear**: If truthy, no clear button is displayed. For persistent notifications, has no effect.
+ *
+ * Usage:
+ *
+ *     <div piwik-notification context="success" type="persistent" noclear="true">
+ *         <strong>Info: </strong>My notification message.
+ *     </div>
+ */
+(function () {
+    angular.module('piwikApp').directive('piwikNotification', piwikNotification);
+
+    piwikNotification.$inject = ['piwik', '$timeout'];
+
+    function piwikNotification(piwik, $timeout) {
+        return {
+            restrict: 'A',
+            scope: {
+                notificationId: '@?',
+                title: '@?notificationTitle', // TODO: shouldn't need this since the title can be specified within
+                                              //       HTML of the node that uses the directive.
+                context: '@?',
+                type: '@?',
+                noclear: '=?'
+            },
+            transclude: true,
+            templateUrl: 'plugins/CoreHome/angularjs/notification/notification.directive.html?cb=' + piwik.cacheBuster,
+            controller: 'NotificationController',
+            controllerAs: 'notification',
+            link: function (scope, element, attrs) {
+                if (scope.context) {
+                    element.children('.notification').addClass('notification-' + scope.context);
+                }
+
+                if (scope.type == 'persistent') {
+                    // otherwise it is never possible to dismiss the notification
+                    scope.noclear = false;
+                }
+
+                if (scope.notificationId) {
+                    closeExistingNotificationHavingSameIdIfNeeded();
+                }
+
+                if ('toast' == scope.type) {
+                    addToastEvent();
+                }
+
+                if (!scope.noclear) {
+                    addCloseEvent();
+                }
+
+                function closeExistingNotificationHavingSameIdIfNeeded() {
+                    // TODO: instead of doing a global query for notification, there should be a notification-container
+                    //       directive that manages notifications.
+                    var existingNode = angular.element('.system.notification[notification-id=' + attrs.id + ']');
+                    if (existingNode && existingNode.length) {
+                        existingNode.remove();
+                    }
+                }
+
+                function addToastEvent() {
+                    $timeout(function () {
+                        element.fadeOut('slow', function() {
+                            element.remove();
+                        });
+                    }, 12 * 1000);
+                }
+
+                function addCloseEvent() {
+                    element.on('click', '.close', function (event) {
+                        if (event && event.delegateTarget) {
+                            angular.element(event.delegateTarget).remove();
+                        }
+                    });
+                }
+            }
+        };
+    }
+})();
\ No newline at end of file

plugins/CoreHome/angularjs/notification/notification.directive.less

+.system.notification {
+  color: #9b7a44;
+  float: none;
+
+  padding: 15px 35px 15px 15px;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+  background-color: #ffffe0;
+  border: 1px solid #e6db55;
+  border-radius: 3px;
+  font-size: 14px;
+  margin: 0px;
+  margin-bottom: 16px;
+
+  a {
+    color: #9b7a44;
+    text-decoration: underline;
+  }
+
+  .close {
+    position: relative;
+    top: -5px;
+    right: -28px;
+    line-height: 20px;
+  }
+
+  button.close {
+    padding: 0;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    -webkit-appearance: none;
+  }
+  .close {
+    float: right;
+    font-size: 20px;
+    font-weight: bold;
+    line-height: 20px;
+    color: #000000;
+    text-shadow: 0 1px 0 #ffffff;
+    opacity: 0.2;
+    filter: alpha(opacity=20);
+  }
+
+  &.notification-success {
+    background-color: #dff0d8;
+    border-color: #c3d6b7;
+    color: #468847;
+
+    a {
+      color: #468847
+    }
+  }
+  &.notification-danger,
+  &.notification-error {
+    background-color: #f2dede;
+    border-color: #d5bfc4;
+    color: #b94a48;
+
+    a {
+      color: #b94a48
+    }
+  }
+  &.notification-info {
+    background-color: #d9edf7;
+    border-color: #a7d3e3;
+    color: #3a87ad;
+
+    a {
+      color: #3a87ad
+    }
+  }
+
+  &.notification-block {
+    padding-top: 14px;
+    padding-bottom: 14px;
+  }
+  &.notification-block > p,
+  &.notification-block > ul {
+    margin-bottom: 0;
+  }
+  &.notification-block p + p {
+    margin-top: 5px;
+  }
+}
\ No newline at end of file

plugins/CoreHome/javascripts/notification.js

@@ -50,26 +50,8 @@
             options = {};
         }
 
-        if ('persistent' == options.type) {
-            // otherwise it is never possible to dismiss the notification
-            options.noclear = false;
-        }
-
-        closeExistingNotificationHavingSameIdIfNeeded(options);
-
-        var template          = generateNotificationHtmlMarkup(options, message);
-        var $notificationNode = placeNotification(template, options);
-        this.$node = $notificationNode;
-
-        if ('persistent' == options.type) {
-            addPersistentEvent($notificationNode);
-        } else if ('toast' == options.type) {
-            addToastEvent($notificationNode);
-        }
-
-        if (!options.noclear) {
-            addCloseEvent($notificationNode);
-        }
+        var template = generateNotificationHtmlMarkup(options, message);
+        this.$node   = placeNotification(template, options);
     };
 
     Notification.prototype.scrollToNotification = function () {
@@ -80,69 +62,37 @@
 
     exports.Notification = Notification;
 
-    function closeExistingNotificationHavingSameIdIfNeeded(options)
-    {
-        if (!options.id) {
-            return;
-        }
-
-        var $existingNode = $('.system.notification[data-id=' + options.id + ']');
-        if ($existingNode && $existingNode.length) {
-            $existingNode.remove();
-        }
-    }
-
     function generateNotificationHtmlMarkup(options, message) {
-        var template = buildNotificationStart(options);
-
-        if (!options.noclear) {
-            template += buildClearButton();
-        }
-
-        if (options.title) {
-            template += buildTitle(options);
-        }
-
-        template += message;
-        template += buildNotificationEnd();
-
-        return template;
-    }
-
-    function buildNotificationStart(options) {
-        var template = '<div class="notification system';
-
-        if (options.context) {
-            template += ' notification-' + options.context;
-        }
-
-        template += '"';
-
-        if (options.id) {
-            template += ' data-id="' + options.id + '"';
+        var attributeMapping = {
+                id: 'notification-id',
+                title: 'notification-title',
+                context: 'context',
+                type: 'type',
+                noclear: 'noclear'
+            },
+            html = '<div piwik-notification';
+
+        for (var key in attributeMapping) {
+            if (attributeMapping.hasOwnProperty(key)
+                && options[key]
+            ) {
+                html += ' ' + attributeMapping[key] + '="' + options[key].toString().replace(/"/g, "&quot;") + '"';
+            }
         }
 
-        template += '>';
-
-        return template;
-    }
-
-    function buildNotificationEnd() {
-        return '</div>';
-    }
-
-    function buildClearButton() {
-        return '<button type="button" class="close" data-dismiss="alert">&times;</button>';
-    }
+        html += '>' + message + '</div>';
 
-    function buildTitle(options) {
-        return '<strong>' + options.title + '</strong> ';
+        return html;
     }
 
     function placeNotification(template, options) {
-
         var $notificationNode = $(template);
 
+        // compile the template in angular
+        angular.element(document).injector().invoke(function ($compile, $rootScope) {
+            $compile($notificationNode)($rootScope.$new(true));
+        });
+
         if (options.style) {
             $notificationNode.css(options.style);
         }
@@ -158,41 +108,4 @@
 
         return $notificationNode;
     }
-
-    function addToastEvent($notificationNode)
-    {
-        setTimeout(function () {
-            $notificationNode.fadeOut( 'slow', function() {
-                $notificationNode.remove();
-                $notificationNode = null;
-            });
-        }, 12 * 1000);
-    }
-
-    function addCloseEvent($notificationNode) {
-        $notificationNode.on('click', '.close', function (event) {
-            if (event && event.delegateTarget) {
-                $(event.delegateTarget).remove();
-            }
-        });
-    };
-
-    function addPersistentEvent($notificationNode) {
-        var notificationId = $notificationNode.data('id');
-
-        if (!notificationId) {
-            return;
-        }
-
-        $notificationNode.on('click', '.close', function (event) {
-            var ajaxHandler = new ajaxHelper();
-            ajaxHandler.addParams({
-                module: 'CoreHome',
-                action: 'markNotificationAsRead'
-            }, 'GET');
-            ajaxHandler.addParams({notificationId: notificationId}, 'POST');
-            ajaxHandler.send(true);
-        });
-    };
-
 })(jQuery, require);
\ No newline at end of file

plugins/CoreHome/stylesheets/notification.less

@@ -5,89 +5,4 @@
   .notification {
     margin: 10px;
   }
-}
-
-.system.notification {
-  color: #9b7a44;
-  float: none;
-
-  padding: 15px 35px 15px 15px;
-  text-shadow: 0 1px 0 rgba(255,255,255,.5);
-  background-color: #ffffe0;
-  border: 1px solid #e6db55;
-  border-radius: 3px;
-  font-size: 14px;
-  margin: 0px;
-  margin-bottom: 16px;
-
-  a {
-    color: #9b7a44;
-    text-decoration: underline;
-  }
-
-  .close {
-    position: relative;
-    top: -5px;
-    right: -28px;
-    line-height: 20px;
-  }
-
-  button.close {
-    padding: 0;
-    cursor: pointer;
-    background: transparent;
-    border: 0;
-    -webkit-appearance: none;
-  }
-  .close {
-    float: right;
-    font-size: 20px;
-    font-weight: bold;
-    line-height: 20px;
-    color: #000000;
-    text-shadow: 0 1px 0 #ffffff;
-    opacity: 0.2;
-    filter: alpha(opacity=20);
-  }
-
-  &.notification-success {
-    background-color: #dff0d8;
-    border-color: #c3d6b7;
-    color: #468847;
-
-    a {
-      color: #468847
-    }
-  }
-  &.notification-danger,
-  &.notification-error {
-    background-color: #f2dede;
-    border-color: #d5bfc4;
-    color: #b94a48;
-
-    a {
-      color: #b94a48
-    }
-  }
-  &.notification-info {
-    background-color: #d9edf7;
-    border-color: #a7d3e3;
-    color: #3a87ad;
-
-    a {
-      color: #3a87ad
-    }
-  }
-
-  &.notification-block {
-    padding-top: 14px;
-    padding-bottom: 14px;
-  }
-  &.notification-block > p,
-  &.notification-block > ul {
-    margin-bottom: 0;
-  }
-  &.notification-block p + p {
-    margin-top: 5px;
-  }
-}
+}
\ No newline at end of file

plugins/ExampleUI/templates/notifications.twig

@@ -4,6 +4,11 @@
     <h2>Inline notification example:</h2>
 
     <div style="display:inline-block;margin-top:10px;" id="exampleUI_notifications">
-        {{ 'This is an example for an inline notification. Have you noticed the success message disappeared after a few seconds?'|notification({'placeAt': '#exampleUI_notifications', 'title': 'Info: ', 'noclear': true, 'context': 'info'}) }}
+        <div piwik-notification
+             notification-title="Info:"
+             noclear="true"
+             context="info">
+            This is an example for an inline notification. Have you noticed the success message disappeared after a few seconds?
+        </div>
     </div>
 {% endblock %}
\ No newline at end of file