audero-sticky - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

bower.json

 {
    "name": "audero-sticky",
-   "version": "0.3.0",
+   "version": "0.3.1",
    "description": "Audero Sticky is a polyfill for the CSS position: sticky with no dependencies and support for multiple module systems.",
@@ -5,0 +5,0 @@ "main": "src/audero-sticky.js",

dist/audero-sticky.min.js

@@ -1,3 +0,3 @@
-/*! audero-sticky.js 0.3.0 | Aurelio De Rosa (@AurelioDeRosa) | MIT/GPL-3.0 Licensed */
-!function(a,b){"use strict";"function"==typeof define&&define.amd?define(b):"object"==typeof module&&module.exports?module.exports=b():a.Sticky=b()}(this,function(){"use strict";function a(a,b){return a[w]&&b?a[w][b]:a[w]}function b(a,b,c){if(a[w]||(a[w]={}),"string"==typeof b)return void(a[w][b]=c);for(var d in b)b.hasOwnProperty(d)&&(a[w][d]=b[d])}function c(a){delete a[w]}function d(a,b,c){var d=document.createEvent("Event");d.initEvent(b,!0,!0);for(var e in c)c.hasOwnProperty(e)&&(d[e]=c[e]);a.dispatchEvent(d)}function e(a){var b={};a=a||{};for(var c in u)u.hasOwnProperty(c)&&(b[c]=a[c]||u[c]);return b}function f(a,b){var c=new RegExp("\\b"+b+"\\b");c.test(a.className)||(a.className+=" "+b)}function g(a,b){var c=new RegExp("\\b"+b+"\\b");a.className=a.className.replace(c,"").trim()}function h(a){var b,c;return f(a.element,a.settings.activeClass),b=window.getComputedStyle(a.element),c={marginBottom:b.marginBottom,marginTop:b.marginTop},g(a.element,a.settings.activeClass),c}function i(a,b){b.forEach(function(b){a[b]=""})}function j(a,b,c){c||(c=Object.keys(b)),c.forEach(function(c){a[c]=b[c]})}function k(a,b){var c=[].slice.call(document.querySelectorAll(b));return c.indexOf(a)+1}function l(a){var b={};for(var c in a)b[c]=a[c]+"px";return b}function m(b){var c=a(b.element);i(b.element.style,v.concat(["marginTop","marginBottom"])),b.element.style.position=c.position,c.placeholder&&c.placeholder.parentNode&&c.placeholder.parentNode.removeChild(c.placeholder)}function n(a,b){var c={},d=window.getComputedStyle(a),e=a.parentNode.getBoundingClientRect();return"auto"!==d.top?(c.start=a.getBoundingClientRect().top-parseFloat(d.top),c.end=e.bottom-(parseFloat(b.marginBottom)||0)):(c.start=a.getBoundingClientRect().bottom+parseFloat(d.bottom),c.end=e.top+(parseFloat(b.marginTop)||0)),c.start+=window.pageYOffset,c.end+=window.pageYOffset,c}function o(b){var c=b.element.getBoundingClientRect(),d=a(b.element,"placeholder");j(d.style,window.getComputedStyle(b.element),["top","bottom","marginTop","marginBottom","marginLeft","marginRight"]),j(d.style,l(c),["width","height","left"])}function p(c){function e(){o(c),b(c.element,"position",c.element.style.position),j(c.element.style,{position:"fixed"}),j(c.element.style,s.placeholder.style,v),c.element.parentNode.insertBefore(s.placeholder,c.element),d(c.element,"stickystart"),f(c.element,c.settings.activeClass)}function i(){m(c),d(c.element,"stickyend"),g(c.element,c.settings.activeClass)}function k(){var a=s.placeholder.parentNode;q=a?n(s.placeholder,p):n(c.element,p);var b=parseFloat(window.getComputedStyle(c.element).height)||0,d=q.end-b-window.pageYOffset,f=window.pageYOffset>=q.start&&window.pageYOffset<=q.end;f?(a||e(),c.element.style.top=d-t>=0?"":d+"px"):a&&i()}function l(){var a=s.placeholder.parentNode;q=a?n(s.placeholder,p):n(c.element,p);var b=parseFloat(window.getComputedStyle(c.element).height)||0,d=window.pageYOffset+window.innerHeight,f=q.end+b-d,g=d<=q.start&&d>=q.end;g?(a||e(),c.element.style.bottom=0>=f+t?"":-f+"px"):a&&i()}var p=h(c),q=n(c.element,p),r=window.getComputedStyle(c.element),s=a(c.element),t="auto"!==r.top?parseFloat(r.top):parseFloat(r.bottom);return"auto"!==r.top?k:l}function q(b){return function(){b.destroy(),b.init(),a(b.element,"handlers").scroll()}}function r(b){var c=a(b.element,"handlers");window.addEventListener("load",c.scroll),window.addEventListener("scroll",c.scroll),window.addEventListener("resize",c.resize)}function s(b){var c=a(b.element,"handlers");window.removeEventListener("load",c.scroll),window.removeEventListener("scroll",c.scroll),window.removeEventListener("resize",c.resize)}function t(a,b){this.element=a,this.settings=e(b)}var u={selector:".sticky",activeClass:"sticky--active"},v=["width","height","left","marginLeft","marginRight","zIndex"],w="auderoSticky";return t.isFeatureSupported=function(){var a=["ms","webkit"],b="position:sticky;",c=document.createElement("div");return a.forEach(function(a){b+="position:-"+a+"-sticky;"}),c.style.cssText=b,!!c.style.position},t.autoInit=function(a){var b=a&&a.selector?a.selector:u.selector;[].forEach.call(document.querySelectorAll(b),function(b){var c=new t(b,a);c.init()})},t.prototype.init=function(){if(a(this.element))throw new Error("This element has already been initialized");var c=document.createElement(this.element.nodeName);b(this.element,"placeholder",c),b(this.element,"handlers",{scroll:p(this),resize:q(this)}),j(c.style,{visibility:"hidden",zIndex:k(this.element,this.settings.selector)}),o(this),r(this)},t.prototype.destroy=function(){m(this),s(this),c(this.element)},t});
+/*! audero-sticky.js 0.3.1 | Aurelio De Rosa (@AurelioDeRosa) | MIT/GPL-3.0 Licensed */
+!function(a,b){"use strict";"function"==typeof define&&define.amd?define(b):"object"==typeof module&&module.exports?module.exports=b():a.Sticky=b()}(this,function(){"use strict";function a(a,b){return a[x]&&b?a[x][b]:a[x]}function b(a,b,c){if(a[x]||(a[x]={}),"string"==typeof b)return void(a[x][b]=c);for(var d in b)b.hasOwnProperty(d)&&(a[x][d]=b[d])}function c(a){delete a[x]}function d(a,b,c){var d=document.createEvent("Event");d.initEvent(b,!0,!0);for(var e in c)c.hasOwnProperty(e)&&(d[e]=c[e]);a.dispatchEvent(d)}function e(a){var b={};a=a||{};for(var c in v)v.hasOwnProperty(c)&&(b[c]=a[c]||v[c]);return b}function f(a,b){var c=new RegExp("\\b"+b+"\\b");c.test(a.className)||(a.className+=" "+b)}function g(a,b){var c=new RegExp("\\b"+b+"\\b");a.className=a.className.replace(c,"").trim()}function h(a){var b,c;return f(a.element,a.settings.activeClass),b=window.getComputedStyle(a.element),c={marginBottom:b.marginBottom,marginTop:b.marginTop},g(a.element,a.settings.activeClass),c}function i(a,b){b.forEach(function(b){a[b]=""})}function j(a,b,c){c||(c=Object.keys(b)),c.forEach(function(c){a[c]=b[c]})}function k(a){var b=a.style.position;a.style.position="relative";var c=Number(window.getComputedStyle(a).zIndex);return a.style.position=b,isNaN(c)?void 0:c}function l(a,b){var c=k(a);if(void 0!==c)return c;var d=[].slice.call(document.querySelectorAll(b));return d.indexOf(a)+1}function m(a){var b={};for(var c in a)b[c]=a[c]+"px";return b}function n(b){var c=a(b.element);i(b.element.style,w.concat(["marginTop","marginBottom"])),b.element.style.position=c.position,c.placeholder&&c.placeholder.parentNode&&c.placeholder.parentNode.removeChild(c.placeholder)}function o(a,b){var c={},d=window.getComputedStyle(a),e=a.parentNode.getBoundingClientRect();return"auto"!==d.top?(c.start=a.getBoundingClientRect().top-parseFloat(d.top),c.end=e.bottom-(parseFloat(b.marginBottom)||0)):(c.start=a.getBoundingClientRect().bottom+parseFloat(d.bottom),c.end=e.top+(parseFloat(b.marginTop)||0)),c.start+=window.pageYOffset,c.end+=window.pageYOffset,c}function p(b){var c=b.element.getBoundingClientRect(),d=a(b.element,"placeholder");j(d.style,window.getComputedStyle(b.element),["top","bottom","marginTop","marginBottom","marginLeft","marginRight"]),j(d.style,m(c),["width","height","left"])}function q(c){function e(){p(c),b(c.element,"position",c.element.style.position),j(c.element.style,{position:"fixed"}),j(c.element.style,s.placeholder.style,w),c.element.parentNode.insertBefore(s.placeholder,c.element),d(c.element,"stickystart"),f(c.element,c.settings.activeClass)}function i(){n(c),d(c.element,"stickyend"),g(c.element,c.settings.activeClass)}function k(){var a=s.placeholder.parentNode;q=a?o(s.placeholder,m):o(c.element,m);var b=parseFloat(window.getComputedStyle(c.element).height)||0,d=q.end-b-window.pageYOffset,f=window.pageYOffset>=q.start&&window.pageYOffset<=q.end;f?(a||e(),c.element.style.top=d-t>=0?"":d+"px"):a&&i()}function l(){var a=s.placeholder.parentNode;q=a?o(s.placeholder,m):o(c.element,m);var b=parseFloat(window.getComputedStyle(c.element).height)||0,d=window.pageYOffset+window.innerHeight,f=q.end+b-d,g=d<=q.start&&d>=q.end;g?(a||e(),c.element.style.bottom=0>=f+t?"":-f+"px"):a&&i()}var m=h(c),q=o(c.element,m),r=window.getComputedStyle(c.element),s=a(c.element),t="auto"!==r.top?parseFloat(r.top):parseFloat(r.bottom);return"auto"!==r.top?k:l}function r(b){return function(){b.destroy(),b.init(),a(b.element,"handlers").scroll()}}function s(b){var c=a(b.element,"handlers");window.addEventListener("load",c.scroll),window.addEventListener("scroll",c.scroll),window.addEventListener("resize",c.resize)}function t(b){var c=a(b.element,"handlers");window.removeEventListener("load",c.scroll),window.removeEventListener("scroll",c.scroll),window.removeEventListener("resize",c.resize)}function u(a,b){this.element=a,this.settings=e(b)}var v={selector:".sticky",activeClass:"sticky--active"},w=["width","height","left","marginLeft","marginRight","zIndex"],x="auderoSticky";return u.isFeatureSupported=function(){var a=["ms","webkit"],b="position:sticky;",c=document.createElement("div");return a.forEach(function(a){b+="position:-"+a+"-sticky;"}),c.style.cssText=b,!!c.style.position},u.autoInit=function(a){var b=a&&a.selector?a.selector:v.selector;[].forEach.call(document.querySelectorAll(b),function(b){var c=new u(b,a);c.init()})},u.prototype.init=function(){if(a(this.element))throw new Error("This element has already been initialized");var c=document.createElement(this.element.nodeName);b(this.element,"placeholder",c),b(this.element,"handlers",{scroll:q(this),resize:r(this)}),j(c.style,{visibility:"hidden",zIndex:l(this.element,this.settings.selector)}),p(this),s(this),a(this.element,"handlers").scroll()},u.prototype.destroy=function(){n(this),t(this),c(this.element)},u});
 //# sourceMappingURL=audero-sticky.min.js.map

package.json

 {
   "name": "audero-sticky",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Audero Sticky is a polyfill for the CSS position: sticky with no dependencies and support for multiple module systems.",
@@ -5,0 +5,0 @@ "main": "src/audero-sticky.js",

src/audero-sticky.js

@@ -236,3 +236,26 @@ (function(root, factory) {
    /**
-    * Calculates the z-index value of an element based
+    * Returns the z-index value of the element if one is defined;
+    * <code>undefined</code> otherwise
+    *
+    * @param {HTMLElement} element The element whose z-index value must be calculated
+    *
+    * @return {number|undefined}
+    */
+   function getComputedZIndex(element) {
+      var position = element.style.position;
+
+      // Set the position to relative to address a bug in WebKit browsers (issue #15562)
+      // https://bugs.webkit.org/show_bug.cgi?id=15562
+      element.style.position = 'relative';
+
+      var zIndex = Number(window.getComputedStyle(element).zIndex);
+
+      element.style.position = position;
+
+      return !isNaN(zIndex) ? zIndex : undefined;
+   }
+
+   /**
+    * Returns the z-index value of the element if one is defined.
+    * Otherwise, it calculates the z-index value of an element based
     * on its position in the DOM, among other elements selected
@@ -247,2 +270,8 @@ * by the CSS selector provided
    function getZIndex(element, selector) {
+      var zIndex = getComputedZIndex(element);
+
+      if (zIndex !== undefined) {
+         return zIndex;
+      }
+
       var stickyElements = [].slice.call(document.querySelectorAll(selector));
@@ -575,2 +604,6 @@
       bindEvents(this);
+
+      // Execute the scroll handler to position the element if it
+      // should stick when the page is loaded
+      getData(this.element, 'handlers').scroll();
    };
@@ -577,0 +610,0 @@

No alert changes

Improved metrics

Total package byte prevSize

97443

increased by1.7%

Lines of code

646

increased by4.19%

No dependency changes