pre/postlink refactor

Author: Null McNull

bower.json

@@ -44,7 +44,8 @@
     "showdown": "~0.3.1",
     "angular-mocks": "~1.2.22",
     "angular-inform": "~0.0.8",
-    "angular-animate": "~1.2.22"
+    "angular-animate": "~1.2.22",
+    "animate.css": "~3.2.0"
   },
   "overrides": {
     "respond": {

src/angular-block-ui/angular-block-ui.js

@@ -1,12 +1,12 @@
 var blkUI = angular.module('blockUI', []);
 
-blkUI.config(function($provide, $httpProvider) {
+blkUI.config(function ($provide, $httpProvider) {
 
   $provide.decorator('$exceptionHandler', ['$delegate', '$injector',
-    function($delegate, $injector) {
+    function ($delegate, $injector) {
       var blockUI, blockUIConfig;
 
-      return function(exception, cause) {
+      return function (exception, cause) {
 
         blockUIConfig = blockUIConfig || $injector.get('blockUIConfig');
 
@@ -23,8 +23,17 @@ blkUI.config(function($provide, $httpProvider) {
   $httpProvider.interceptors.push('blockUIHttpInterceptor');
 });
 
-blkUI.run(function($document, blockUIConfig, $templateCache) {
-  if(blockUIConfig.autoInjectBodyBlock) {
+blkUI.run(function ($document, blockUIConfig, $templateCache) {
+  if (blockUIConfig.autoInjectBodyBlock) {
     $document.find('body').attr('block-ui', 'main');
   }
+
+  if (blockUIConfig.template) {
+
+    // Swap the builtin template with the custom template.
+    // Create a magic cache key and place the template in the cache.
+
+    blockUIConfig.templateUrl = '$$block-ui-template$$';
+    $templateCache.put(blockUIConfig.templateUrl, blockUIConfig.template);
+  }
 });

src/angular-block-ui/block-ui-animations.css

@@ -1,118 +1,117 @@
 
 /* - - - - - - 8-< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
 
-.block-ui-fade > .block-ui-container {
+.block-ui-anim-fade > .block-ui-container {
   transition: height 0s ease 200ms, opacity 200ms ease;
 }
 
-.block-ui-fade > .block-ui-container.block-ui-visible {
+.block-ui-anim-fade > .block-ui-container.block-ui-visible {
   /*this resets the initial delay of the height */
   /*and sizes the block to full height at once at the start of the block. */
   transition-delay: 0s;
-  /*transition: height 0s ease 0s;*/
 }
 
 /* - - - - - - 8-< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
 
-@keyframes block-ui-bounce {
-  0%, 4%, 10%, 16%, 20% {
-    transform: translate3d(0,0,0);
-  }
+/*@keyframes block-ui-anim-bounce {*/
+  /*0%, 4%, 10%, 16%, 20% {*/
+    /*transform: translate3d(0,0,0);*/
+  /*}*/
 
-  8% {
-    transform: translate3d(0, -30px, 0);
-  }
+  /*8% {*/
+    /*transform: translate3d(0, -30px, 0);*/
+  /*}*/
 
-  14% {
-    transform: translate3d(0, -15px, 0);
-  }
+  /*14% {*/
+    /*transform: translate3d(0, -15px, 0);*/
+  /*}*/
 
-  18% {
-    transform: translate3d(0,-4px,0);
-  }
+  /*18% {*/
+    /*transform: translate3d(0,-4px,0);*/
+  /*}*/
 
-  21%, 100% {}
-}
+  /*21%, 100% {}*/
+/*}*/
 
-.block-ui-bounce > .block-ui-container.block-ui-visible .block-ui-message {
-  animation: block-ui-bounce 4s linear 0s infinite;
-}
+/*.block-ui-anim-bounce > .block-ui-container.block-ui-visible .block-ui-message {*/
+  /*animation: block-ui-bounce 4s linear 0s infinite;*/
+/*}*/
 
 /* - - - - - - 8-< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
 
-@keyframes block-ui-flash {
-  0%, 10%, 20% {
-    opacity: 1;
-  }
+/*@keyframes block-ui-anim-flash {*/
+  /*0%, 10%, 20% {*/
+    /*opacity: 1;*/
+  /*}*/
 
-  4%, 15% {
-    opacity: 0;
-  }
+  /*4%, 15% {*/
+    /*opacity: 0;*/
+  /*}*/
 
-  21%, 100% {}
-}
+  /*21%, 100% {}*/
+/*}*/
 
-.block-ui-flash > .block-ui-container.block-ui-visible .block-ui-message {
-  animation: block-ui-flash 3s linear 0s infinite;
-}
+/*.block-ui-flash > .block-ui-container.block-ui-visible .block-ui-message {*/
+  /*animation: block-ui-flash 3s linear 0s infinite;*/
+/*}*/
 
 /* - - - - - - 8-< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
 
-@keyframes block-ui-pulse {
-  0% {
-    transform: scale3d(1, 1, 1);
-  }
+/*@keyframes block-ui-anim-pulse {*/
+  /*0% {*/
+    /*transform: scale3d(1, 1, 1);*/
+  /*}*/
 
-  50% {
-    transform: scale3d(1.05, 1.05, 1.05);
-  }
+  /*50% {*/
+    /*transform: scale3d(1.05, 1.05, 1.05);*/
+  /*}*/
 
-  100% {
-    transform: scale3d(1, 1, 1);
-  }
-}
+  /*100% {*/
+    /*transform: scale3d(1, 1, 1);*/
+  /*}*/
+/*}*/
 
-.block-ui-pulse > .block-ui-container.block-ui-visible .block-ui-message {
-  animation: block-ui-pulse 1s ease 0s infinite;
-}
+/*.block-ui-anim-pulse > .block-ui-container.block-ui-visible .block-ui-message {*/
+  /*animation: block-ui-pulse 1s ease 0s infinite;*/
+/*}*/
 
 /* - - - - - - 8-< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
 
-@keyframes block-ui-bounce-in {
-  0%, 20%, 40%, 60%, 80%, 100% {
-    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-  }
-
-  0% {
-    opacity: 0;
-    transform: scale3d(.3, .3, .3);
-  }
-
-  20% {
-    transform: scale3d(1.1, 1.1, 1.1);
-  }
-
-  40% {
-    transform: scale3d(.9, .9, .9);
-  }
-
-  60% {
-    opacity: 1;
-    transform: scale3d(1.03, 1.03, 1.03);
-  }
-
-  80% {
-    transform: scale3d(.97, .97, .97);
-  }
-
-  100% {
-    opacity: 1;
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-.block-ui-bounce-in > .block-ui-container.block-ui-visible .block-ui-message {
-  animation: block-ui-bounce-in 1s ease 0s infinite;
-}
+/*@keyframes block-ui-anim-bounce-in {*/
+  /*0%, 20%, 40%, 60%, 80%, 100% {*/
+    /*transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);*/
+  /*}*/
+
+  /*0% {*/
+    /*opacity: 0;*/
+    /*transform: scale3d(.3, .3, .3);*/
+  /*}*/
+
+  /*20% {*/
+    /*transform: scale3d(1.1, 1.1, 1.1);*/
+  /*}*/
+
+  /*40% {*/
+    /*transform: scale3d(.9, .9, .9);*/
+  /*}*/
+
+  /*60% {*/
+    /*opacity: 1;*/
+    /*transform: scale3d(1.03, 1.03, 1.03);*/
+  /*}*/
+
+  /*80% {*/
+    /*transform: scale3d(.97, .97, .97);*/
+  /*}*/
+
+  /*100% {*/
+    /*opacity: 1;*/
+    /*transform: scale3d(1, 1, 1);*/
+  /*}*/
+/*}*/
+
+/*.block-ui-anim-bounce-in > .block-ui-container.block-ui-visible .block-ui-message {*/
+  /*animation: block-ui-bounce-in 1s ease 0s infinite;*/
+/*}*/
 
 /* - - - - - - 8-< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

src/angular-block-ui/block-ui-container-directive.js

@@ -5,16 +5,23 @@ blkUI.directive('blockUiContainer', function (blockUIConfig, blockUiContainerLin
     templateUrl: blockUIConfig.templateUrl,
     link: blockUiContainerLinkFn
   };
-}).factory('blockUiContainerLinkFn', function (blockUI, blockUIUtils) {
+}).factory('blockUiContainerLinkFn', function (blockUI, blockUIConfig, blockUIUtils) {
 
   return function ($scope, $element, $attrs) {
 
+    var ctrl = $ctrls[0];
+
     $element.addClass('block-ui-container');
 
-    var srvInstance = $element.inheritedData('block-ui');
+    var srvInstance = ctrl.instance;
+    var messageClass = ctrl.attrs.cssClassMessage;
+
+    if(messageClass) {
+      var $message = blockUIUtils.findElement($element, 'block-ui-message');
 
-    if (!srvInstance) {
-      throw new Error('No parent block-ui service instance located.');
+      if($message) {
+        $message.addClass(messageClass);
+      }
     }
 
     // Expose the state on the scope

src/angular-block-ui/block-ui-container-directive.test.js

@@ -56,6 +56,28 @@ describe('block-ui-container-directive', function() {
 
     });
 
+    describe('block-ui-message-class', function() {
+
+      it('should add classes defined at the parent level', function() {
+
+        var className = 'my-custom-class';
+        $parent.data('block-ui-message-class', className);
+
+        $element = $compile($element)($scope);
+        $scope.$digest();
+
+//        <div class="block-ui-overlay"></div>
+//        <div class="block-ui-message-container" aria-live="assertive" aria-atomic="true">
+//          <div class="block-ui-message">{{ state.message }}</div>
+//        </div>
+
+        var $message = $($($element.children()[1]).children()[0]);
+
+        expect($message.hasClass(className)).toBe(true);
+
+      });
+    });
+
   });
 
   describe('link', function() {
@@ -71,55 +93,59 @@ describe('block-ui-container-directive', function() {
       $parent.append($element);
     });
 
-    it('should expose the blockstate on the scope', function() {
+    describe('element classes', function() {
+      it('should set the block-ui-container class', function() {
 
-      linkFn($scope, $element, $attrs);
+        linkFn($scope, $element, $attrs);
 
-      expect($scope.state).toBeDefined();
-      expect($scope.state).toBe(blockInstance.state());
+        expect($element.hasClass('block-ui-container')).toBe(true);
 
-    });
+      });
 
-    it('should set the block-ui-container class', function() {
+      it('should set the block-ui-visible class when in blocking state', function() {
 
-      linkFn($scope, $element, $attrs);
+        linkFn($scope, $element, $attrs);
+        expect($element.hasClass('block-ui-visible')).toBe(false);
 
-      expect($element.hasClass('block-ui-container')).toBe(true);
+        blockInstance.start();
+        $timeout.flush();
+        $scope.$digest();
 
-    });
+        expect($element.hasClass('block-ui-visible')).toBe(true);
 
-    it('should set the block-ui-visible class when in blocking state', function() {
+        blockInstance.stop();
+        $scope.$digest();
 
-      linkFn($scope, $element, $attrs);
-      expect($element.hasClass('block-ui-visible')).toBe(false);
+        expect($element.hasClass('block-ui-visible')).toBe(false);
+      });
 
-      blockInstance.start();
-      $timeout.flush();
-      $scope.$digest();
+      it('should set the block-ui-active class when blockcount > 0', function() {
 
-      expect($element.hasClass('block-ui-visible')).toBe(true);
+        linkFn($scope, $element, $attrs);
+        expect($element.hasClass('block-ui-active')).toBe(false);
 
-      blockInstance.stop();
-      $scope.$digest();
+        blockInstance.start();
+        $scope.$digest();
 
-      expect($element.hasClass('block-ui-visible')).toBe(false);
-    });
+        expect($element.hasClass('block-ui-active')).toBe(true);
 
-    it('should set the block-ui-active class when blockcount > 0', function() {
+        blockInstance.stop();
+        $scope.$digest();
 
-      linkFn($scope, $element, $attrs);
-      expect($element.hasClass('block-ui-active')).toBe(false);
+        expect($element.hasClass('block-ui-active')).toBe(false);
+      });
+    }); // element classes
 
-      blockInstance.start();
-      $scope.$digest();
+    it('should expose the blockstate on the scope', function() {
 
-      expect($element.hasClass('block-ui-active')).toBe(true);
+      linkFn($scope, $element, $attrs);
 
-      blockInstance.stop();
-      $scope.$digest();
+      expect($scope.state).toBeDefined();
+      expect($scope.state).toBe(blockInstance.state());
 
-      expect($element.hasClass('block-ui-active')).toBe(false);
     });
 
+
+
   });
 });