adds animateAndAdvise support to notifications, plus removes addition…

…al animation call for static notifications that was causing infinite loops...
TVERIC · Dec 4, 2015 · bfda416 · bfda416
1 parent bfedeb9
commit bfda416
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 18 deletions.
diff --git a/js/angular/components/notification/notification-static.html b/js/angular/components/notification/notification-static.html
@@ -6,7 +6,7 @@
     <img ng-src="{{ image }}"/>
   </div>
   <div class="notification-content">
-    <h1 ng-bind-html="title"></h1>
+    <h1 ng-bind-html="trustedTitle"></h1>
     <p ng-transclude></p>
   </div>
 </div>
diff --git a/js/angular/components/notification/notification.html b/js/angular/components/notification/notification.html
@@ -6,7 +6,7 @@
     <img ng-src="{{ image }}"/>
   </div>
   <div class="notification-content">
-    <h1 ng-bind-html="title"></h1>
+    <h1 ng-bind-html="trustedTitle"> Blurb</h1>
     <p ng-transclude></p>
   </div>
 </div>
diff --git a/js/angular/components/notification/notification.js b/js/angular/components/notification/notification.js
@@ -102,9 +102,9 @@
     }
   }
 
-  zfNotification.$inject = ['FoundationApi'];
+  zfNotification.$inject = ['FoundationApi', '$sce'];
 
-  function zfNotification(foundationApi) {
+  function zfNotification(foundationApi, $sce) {
     var directive = {
       restrict: 'EA',
       templateUrl: 'components/notification/notification.html',
@@ -134,23 +134,31 @@
 
       function preLink(scope, iElement, iAttrs) {
         iAttrs.$set('zf-closable', 'notification');
+        if (iAttrs['title']) {
+          scope.$watch('title', function(value) {
+            if (value) {
+              scope.trustedTitle = $sce.trustAsHtml(value);
+            }
+          });
+        }
       }
 
       function postLink(scope, element, attrs, controller) {
         scope.active = false;
         var animationIn  = attrs.animationIn || 'fadeIn';
         var animationOut = attrs.animationOut || 'fadeOut';
+        var animate = attrs.hasOwnProperty('zfAdvise') ? foundationApi.animateAndAdvise : foundationApi.animate;
         var hammerElem;
 
         //due to dynamic insertion of DOM, we need to wait for it to show up and get working!
         setTimeout(function() {
           scope.active = true;
-          foundationApi.animate(element, scope.active, animationIn, animationOut);
+          animate(element, scope.active, animationIn, animationOut);
         }, 50);
 
         scope.hide = function() {
           scope.active = false;
-          foundationApi.animate(element, scope.active, animationIn, animationOut);
+          animate(element, scope.active, animationIn, animationOut);
           setTimeout(function() {
             controller.removeNotification(scope.notifId);
           }, 50);
@@ -186,9 +194,9 @@
     }
   }
 
-  zfNotificationStatic.$inject = ['FoundationApi'];
+  zfNotificationStatic.$inject = ['FoundationApi', '$sce'];
 
-  function zfNotificationStatic(foundationApi) {
+  function zfNotificationStatic(foundationApi, $sce) {
     var directive = {
       restrict: 'EA',
       templateUrl: 'components/notification/notification-static.html',
@@ -216,13 +224,17 @@
 
       function preLink(scope, iElement, iAttrs, controller) {
         iAttrs.$set('zf-closable', type);
+        if (iAttrs['title']) {
+          scope.trustedTitle = $sce.trustAsHtml(iAttrs['title']);
+        }
       }
 
       function postLink(scope, element, attrs, controller) {
         scope.position = attrs.position ? attrs.position.split(' ').join('-') : 'top-right';
 
         var animationIn = attrs.animationIn || 'fadeIn';
         var animationOut = attrs.animationOut || 'fadeOut';
+        var animateFn = attrs.hasOwnProperty('zfAdvise') ? foundationApi.animateAndAdvise : foundationApi.animate;
 
         //setup
         foundationApi.subscribe(attrs.id, function(msg) {
@@ -247,30 +259,26 @@
                   scope.toggle();
                 }
               }, parseInt(scope.autoclose));
-            };
+            }
           }
-
-          foundationApi.animate(element, scope.active, animationIn, animationOut);
-          scope.$apply();
-
           return;
         });
 
         scope.hide = function() {
           scope.active = false;
-          foundationApi.animate(element, scope.active, animationIn, animationOut);
+          animateFn(element, scope.active, animationIn, animationOut);
           return;
         };
 
         scope.show = function() {
           scope.active = true;
-          foundationApi.animate(element, scope.active, animationIn, animationOut);
+          animateFn(element, scope.active, animationIn, animationOut);
           return;
         };
 
         scope.toggle = function() {
           scope.active = !scope.active;
-          foundationApi.animate(element, scope.active, animationIn, animationOut);
+          animateFn(element, scope.active, animationIn, animationOut);
           return;
         };
 
@@ -309,9 +317,9 @@
     }
   }
 
-  NotificationFactory.$inject = ['$http', '$templateCache', '$rootScope', '$compile', '$timeout', 'FoundationApi'];
+  NotificationFactory.$inject = ['$http', '$templateCache', '$rootScope', '$compile', '$timeout', 'FoundationApi', '$sce'];
 
-  function NotificationFactory($http, $templateCache, $rootScope, $compile, $timeout, foundationApi) {
+  function NotificationFactory($http, $templateCache, $rootScope, $compile, $timeout, foundationApi, $sce) {
     return notificationFactory;
 
     function notificationFactory(config) {