angular-stackables - npm Package Compare versions

Comparing version 1.2.2 to 1.2.3

CHANGELOG.md

 # angular-stackables ChangeLog
 
+## 1.2.3 - 2017-06-01
+
+### Fixed
+- Replace some usage of jquery functions that are not present in jqLite.
+
 ## 1.2.2 - 2017-05-30
@@ -4,0 +9,0 @@

index.js

@@ -63,3 +63,3 @@ /*!
 
-/** DIALOG POLYFILL **/
+/** POLYFILLS **/
 
@@ -72,13 +72,22 @@ var usePolyfill = angular.element('<dialog></dialog>');
   Element.prototype.closest = function(s) {
-    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
-      i,
-      el = this;
-    do {
-      i = matches.length;
-      while (--i >= 0 && matches.item(i) !== el) {}
-    } while ((i < 0) && (el = el.parentElement));
-    return el;
+    return _closestElement(this, s);
   };
 }
 
+function _closestElement(element, s) {
+  var matches;
+  if(typeof s === 'string') {
+    matches = (element.document || element.ownerDocument).querySelectorAll(s);
+  } else {
+    matches = [s];
+    matches.item = function() { return s; };
+  }
+  var i, el = element;
+  do {
+    i = matches.length;
+    while (--i >= 0 && matches.item(i) !== el) {}
+  } while ((i < 0) && (el = el.parentElement));
+  return el;
+}
+
 /** HISTORY MANAGEMENT **/
@@ -453,3 +462,4 @@
     scope.onContentLinked = function() {
-      var content = element.find('.stackable-popover-content');
+      var content = angular.element(
+        element[0].querySelector('.stackable-popover-content'));
       // clear `none` display style that was set in the popover template (it
@@ -483,3 +493,3 @@ // was used to prevent flash of content); it must be cleared to allow the
           // or clicking away
-          doc.keyup(closeOnEscape).click(closeOnClick);
+          doc.on('keyup', closeOnEscape).on('click', closeOnClick);
         }
@@ -503,6 +513,5 @@ if(contentLinked) {
       // (also clear trigger click status)
-      var target = angular.element(e.target);
       var triggerClicked = scope.state.triggerClicked;
       scope.state.triggerClicked = false;
-      if(!triggerClicked && target.closest(element).length === 0) {
+      if(!triggerClicked && !_closestElement(e.target, element)) {
         scope.state.show = false;
@@ -523,11 +532,12 @@ scope.$apply();
       if(!content) {
-        content = element.find('.stackable-popover-content');
+        content = angular.element(
+          element[0].querySelector('.stackable-popover-content'));
       }
 
-      var width = content.outerWidth(false);
-      var height = content.outerHeight(false);
+      var width = _getOuterWidth(content[0], false);
+      var height = _getOuterHeight(content[0], false);
 
       // ensure z-index is above parent dialog
-      var parentDialog = content.parent().closest('dialog');
-      // JQuery in WebKit browsers does not give back a z-index value if
+      var parentDialog = content.parent()[0].closest('dialog');
+      // WebKit browsers does not give back a z-index value if
       // an element's position is not explicitly set. Retrieve it from
@@ -537,4 +547,4 @@ // the style instead.
       //var zIndex = parentDialog.css('z-index');
-      var zIndex = parentDialog.prop('style')['zIndex'];
-      var zIndexInt = parseInt(zIndex, 10);
+      var zIndex = window.getComputedStyle(parentDialog).zIndex;
+      var zIndexInt = parseInt(zIndex, 10) + 1;
       if(zIndexInt.toString() !== zIndex) {
@@ -547,8 +557,8 @@ zIndex = 0;
       content.css({
-        top: scope.state.position.top,
-        left: scope.state.position.left,
+        top: scope.state.position.top + 'px',
+        left: scope.state.position.left + 'px',
         'z-index': zIndex + 1
       });
-      var offset = content.offset();
-      var position = content.position();
+      var offset = _getOffset(content[0]);
+      var position = _getPosition(content[0]);
       var delta = {
@@ -663,3 +673,3 @@ top: (scope.state.position.top - offset.top) +
     // update element position when window resized
-    angular.element(window).resize(resize);
+    angular.element(window).on('resize', resize);
 
@@ -726,11 +736,11 @@ var toggleEvent = attrs.stackableToggle || 'click';
     function updateState(state) {
-      var offset = element.offset();
-      var scrollOffset = angular.element(document).scrollTop();
+      var el = element[0];
+      var offset = _getOffset(el);
       state.position = {
         top: offset.top,
         left: offset.left,
-        height: element.outerHeight(false),
-        width: element.outerWidth(false),
-        heightWithMargin: element.outerHeight(true),
-        widthWithMargin: element.outerWidth(true)
+        height: _getOuterHeight(el, false),
+        width: _getOuterWidth(el, false),
+        heightWithMargin: _getOuterHeight(el, true),
+        widthWithMargin: _getOuterWidth(el, true)
       };
@@ -741,2 +751,78 @@ }
 
+/** UTILS **/
+
+function _getOffset(element) {
+  if(!element.getClientRects().length) {
+    return {top: 0, left: 0};
+  }
+
+  var rect = element.getBoundingClientRect();
+  var doc = element.ownerDocument;
+  var docElem = doc.documentElement;
+  var win = doc.defaultView;
+
+  return {
+    top: rect.top + win.pageYOffset - docElem.clientTop,
+    left: rect.left + win.pageXOffset - docElem.clientLeft
+  };
+}
+
+function _getOuterWidth(element, withMargin) {
+  var width = element.offsetWidth;
+  if(withMargin) {
+    var style = window.getComputedStyle(element);
+    width += parseInt(style.marginLeft, 10) + parseInt(style.marginRight, 10);
+  }
+  return width;
+}
+
+function _getOuterHeight(element, withMargin) {
+  var height = element.offsetHeight;
+  if(withMargin) {
+    var style = window.getComputedStyle(element);
+    height += parseInt(style.marginTop, 10) + parseInt(style.marginBottom, 10);
+  }
+  return height;
+}
+
+function _getPosition(element) {
+  // partially cribbed from jQuery
+  var offsetParent;
+  var offset;
+  var parentOffset = {
+    top: 0, left: 0
+  };
+
+  var style = window.getComputedStyle(element);
+
+  if(style.position === 'fixed') {
+    offset = element.getBoundingClientRect();
+  } else {
+    offsetParent = _getOffsetParent(element);
+    var offsetParentStyle = window.getComputedStyle(offsetParent);
+    offset = _getOffset(element);
+    parentOffset = _getOffset(offsetParent);
+    // add offset parent borders
+    parentOffset = {
+      top: parentOffset.top + parseInt(offsetParentStyle.borderTopWidth, 10),
+      left: parentOffset.left + parseInt(offsetParentStyle.borderLeftWidth, 10)
+    };
+  }
+
+  // subtract parent offsets and element margins
+  return {
+    top: offset.top - parentOffset.top - parseInt(style.marginTop, 10),
+    left: offset.left - parentOffset.left - parseInt(style.marginLeft, 10)
+  };
+}
+
+function _getOffsetParent(element) {
+  var offsetParent = element.offsetParent;
+  while(offsetParent &&
+    window.getComputedStyle(offsetParent).position === 'static') {
+    offsetParent = offsetParent.offsetParent;
+  }
+  return offsetParent || document.documentElement;
+}
+
 } // end init() definition
@@ -743,0 +829,0 @@

package.json

 {
   "name": "angular-stackables",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "angular-stackables",
@@ -5,0 +5,0 @@ "main": "index.js",

No alert changes

Improved metrics

Total package byte prevSize

38994

increased by6.75%

Lines of code

1025

increased by7.78%

No dependency changes