angular-stackables - npm Package Compare versions

Comparing version 0.0.14 to 0.0.15

bower.json

 {
   "name": "angular-stackables",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "AngularJS stackable widgets built on HTML5 dialog.",
@@ -5,0 +5,0 @@ "authors": [

package.json

 {
   "name": "angular-stackables",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "dependencies": {}
 }

README.md

@@ -61,7 +61,7 @@ angular-stackables
 <div ng-controller="TestController as test">
-  <a class="btn"
+  <button
     stackable-trigger="test.popoverState"
     stackable-toggle="'active'">
     <i class="caret"></i>
-  </a>
+  </button>
 
@@ -84,5 +84,5 @@ <div stackable-popover="test.popoverState"
 <div ng-controller="TestController as test">
-  <a class="btn" stackable-trigger="test.menuState">
+  <button stackable-trigger="test.menuState">
     <i class="caret"></i>
-  </a>
+  </button>
 
@@ -89,0 +89,0 @@ <div stackable-popover="test.menuState"

stackables.js

@@ -76,3 +76,3 @@ /*!
 
-    dialog.addEventListener('cancel', function(e) {
+    var cancelListener = function(e) {
       if(!!scope.disableEscape) {
@@ -84,5 +84,6 @@ e.preventDefault();
       }
-    });
+    };
+    dialog.addEventListener('cancel', cancelListener);
 
-    dialog.addEventListener('close', function(e) {
+    var closeListener = function(e) {
       e.stopPropagation();
@@ -102,3 +103,4 @@ scope.show = open = false;
       }
-    });
+    };
+    dialog.addEventListener('close', closeListener);
 
@@ -128,2 +130,7 @@ scope.$watch('show', function(value) {
     });
+
+    scope.$on('$destroy', function() {
+      dialog.removeEventListener(cancelListener);
+      dialog.removeEventListener(closeListener);
+    });
   }
@@ -137,5 +144,13 @@ }
     link: function(scope, element, attrs, ctrl) {
-      element.on('click', function() {
+      element.on('click', cancel);
+      scope.$on('$destroy', cleanup);
+      element.on('$destroy', cleanup);
+
+      function cancel() {
         ctrl.close('canceled', null);
-      });
+      }
+
+      function cleanup() {
+        element.off('click', cancel).off('$destroy', cleanup);
+      }
     }
@@ -161,4 +176,3 @@ };
         <div class="stackable-popover-content stackable-fadein" \
-          style="display: none" \
-          ng-show="positioned" \
+          style="display: none; opacity: 0" \
           ng-class="{ \
@@ -185,3 +199,3 @@ \'stackable-place-top\': !placement || placement == \'top\', \
     // popover not positioned yet
-    scope.positioned = false;
+    var positioned = false;
 
@@ -196,3 +210,3 @@ var doc = angular.element(document);
           doc.off('keyup', closeOnEscape).off('click', closeOnClick);
-          scope.positioned = false;
+          positioned = false;
         }
@@ -289,5 +303,5 @@ }
       content.css(position);
-      if(!scope.positioned) {
-        content.css('display', '');
-        scope.positioned = true;
+      if(!positioned) {
+        content.css({display: '', opacity: ''});
+        positioned = true;
         scope.$digest();
@@ -317,8 +331,2 @@ }
 
-    // update element position when window resized
-    angular.element(window).resize(resized);
-    scope.$on('$destroy', function() {
-      angular.element(window).off('resize', resized);
-    });
-
     // update state and add/remove toggle classes when state.show changes
@@ -338,33 +346,33 @@ scope.$watch(function() {
 
+    // ensure event handlers are cleaned up
+    scope.$on('$destroy', cleanup);
+    element.on('$destroy', cleanup);
+
+    // update element position when window resized
+    angular.element(window).resize(resize);
+
     var toggleEvent = attrs.stackableToggle || 'click';
     if(toggleEvent === 'hover') {
       // show on enter, hide on leave
-      element.hover(function() {
-        state.show = true;
-        updateState(state);
-        scope.$apply();
-      }, function() {
-        state.show = false;
-        updateState(state);
-        scope.$apply();
-      });
+      element.on('mouseenter', enter).on('mouseleave', leave);
     } else {
       // default to click
-      element.on('click', function() {
-        // clear any selection
-        if(document.selection && document.selection.empty) {
-          document.selection.empty();
-        } else if(window.getSelection) {
-          window.getSelection().removeAllRanges();
-        }
+      element.on('click', click);
+    }
 
-        // indicate trigger was clicked
-        state.triggerClicked = true;
-        state.show = !state.show;
-        updateState(state);
-        scope.$apply();
-      });
+    function resize() {
+      updateState(state);
+      scope.$apply();
     }
 
-    function resized() {
+    function enter() {
+      setVisible(true);
+    }
+
+    function leave() {
+      setVisible(false);
+    }
+
+    function setVisible(show) {
+      state.show = show;
       updateState(state);
@@ -374,2 +382,19 @@ scope.$apply();
 
+    function click() {
+      // indicate trigger was clicked
+      state.triggerClicked = true;
+      state.show = !state.show;
+      updateState(state);
+      scope.$apply();
+    }
+
+    function cleanup() {
+      angular.element(window).off('resize', resize);
+      element
+        .off('mouseenter', enter)
+        .off('mouseleave', leave)
+        .off('click', click)
+        .off('$destroy', cleanup);
+    }
+
     function initState(expr) {
@@ -399,3 +424,2 @@ var get = $parse(expr);
       };
-      return state;
     }
@@ -402,0 +426,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

24603

1.86%

Lines of code

703

2.33%

No dependency changes