audero-sticky - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

bower.json

 {
    "name": "audero-sticky",
-   "version": "0.1.1",
+   "version": "0.1.2",
    "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.1.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,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 b(a,b){b.forEach(function(b){a[b]=""})}function c(a,b,c){c||(c=Object.keys(b)),c.forEach(function(c){a[c]=b[c]})}function d(a,b){var c=[].slice.call(document.querySelectorAll(b));return c.indexOf(a)+1}function e(a){var b={};for(var c in a)b[c]=a[c]+"px";return b}function f(a){b(a.element.style,m.concat(["marginTop","marginBottom"])),a.element.style.position=a._position,a._placeholder&&a._placeholder.parentNode&&a._placeholder.parentNode.removeChild(a._placeholder)}function g(a){var b={},c=window.getComputedStyle(a.element);return"auto"!==c.top?(b.start=a.element.getBoundingClientRect().top-parseFloat(c.top),b.end=a.element.parentNode.getBoundingClientRect().bottom):(b.start=a.element.getBoundingClientRect().bottom+parseFloat(c.bottom),b.end=a.element.parentNode.getBoundingClientRect().top),b.start+=window.pageYOffset,b.end+=window.pageYOffset,b}function h(b){function d(){b._position=b.element.style.position,c(b.element.style,{position:"fixed",marginTop:0,marginBottom:0}),c(b.element.style,b._placeholder.style,m),b.element.parentNode.insertBefore(b._placeholder,b.element),j=!0,a(b.element,"stickystart")}function e(){f(b),j=!1,a(b.element,"stickyend")}function h(){var a=parseFloat(window.getComputedStyle(b.element).height)||0,c=g(b),f=c.end-a-window.pageYOffset,h=window.pageYOffset>=c.start&&window.pageYOffset<=c.end;h?(j||d(),b.element.style.top=f-l>=0?"":f+"px"):j&&e()}function i(){var a=parseFloat(window.getComputedStyle(b.element).height)||0,c=g(b),f=window.pageYOffset+window.innerHeight,h=c.end+a-f,i=f<=c.start&&f>=c.end;i?(j||d(),b.element.style.bottom=0>=h+l?"":-h+"px"):j&&e()}var j=!1,k=window.getComputedStyle(b.element),l="auto"!==k.top?parseFloat(k.top):parseFloat(k.bottom);return"auto"!==k.top?h:i}function i(a){return function(){window.removeEventListener("resize",a._handlers.resize),a.destroy(),a.init(),a._handlers.scroll()}}function j(a){window.addEventListener("load",a._handlers.scroll),window.addEventListener("scroll",a._handlers.scroll),window.addEventListener("resize",a._handlers.resize)}function k(a,b){this.element=a,this.settings=b||l,this._placeholder=null,this._position="",this._handlers={}}var l={selector:".sticky"},m=["width","height","left","marginLeft","marginRight","zIndex"];return k.isFeatureSupported=function(){var a=document.createElement("div");return a.style.cssText="position:sticky",!!a.style.position},k.autoInit=function(a){a=a||l,[].forEach.call(document.querySelectorAll(a.selector),function(b){var c=new k(b,a);c.init()})},k.prototype.init=function(){var a=this.element.getBoundingClientRect();this._placeholder=document.createElement("div"),this._handlers.scroll=h(this),this._handlers.resize=i(this),this._placeholder.style.zIndex=d(this.element,this.settings.selector),c(this._placeholder.style,window.getComputedStyle(this.element),["top","bottom","marginTop","marginBottom","marginLeft","marginRight"]),c(this._placeholder.style,e(a),["width","height","left"]),j(this)},k.prototype.destroy=function(){f(this),window.removeEventListener("scroll",this._handlers.scroll),window.removeEventListener("resize",this._handlers.resize),this._handlers={},this._position="",this._placeholder=null},k});
+/*! audero-sticky.js 0.1.2 | 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,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 b(a,b){b.forEach(function(b){a[b]=""})}function c(a,b,c){c||(c=Object.keys(b)),c.forEach(function(c){a[c]=b[c]})}function d(a,b){var c=[].slice.call(document.querySelectorAll(b));return c.indexOf(a)+1}function e(a){var b={};for(var c in a)b[c]=a[c]+"px";return b}function f(a){b(a.element.style,m.concat(["marginTop","marginBottom"])),a.element.style.position=a._position,a._placeholder&&a._placeholder.parentNode&&a._placeholder.parentNode.removeChild(a._placeholder)}function g(a){var b={},c=window.getComputedStyle(a),d=a.parentNode.getBoundingClientRect();return"auto"!==c.top?(b.start=a.getBoundingClientRect().top-parseFloat(c.top),b.end=d.bottom):(b.start=a.getBoundingClientRect().bottom+parseFloat(c.bottom),b.end=d.top),b.start+=window.pageYOffset,b.end+=window.pageYOffset,b}function h(b){function d(){b._position=b.element.style.position,c(b.element.style,{position:"fixed",marginTop:0,marginBottom:0}),c(b.element.style,b._placeholder.style,m),b.element.parentNode.insertBefore(b._placeholder,b.element),j=!0,a(b.element,"stickystart")}function e(){f(b),j=!1,a(b.element,"stickyend")}function h(){k=g(j?b._placeholder:b.element);var a=~~parseFloat(window.getComputedStyle(b.element).height),c=k.end-a-window.pageYOffset,f=window.pageYOffset>=k.start&&window.pageYOffset<=k.end;f?(j||d(),b.element.style.top=c-n>=0?"":c+"px"):j&&e()}function i(){k=g(j?b._placeholder:b.element);var a=~~parseFloat(window.getComputedStyle(b.element).height),c=window.pageYOffset+window.innerHeight,f=k.end+a-c,h=c<=k.start&&c>=k.end;h?(j||d(),b.element.style.bottom=0>=f+n?"":-f+"px"):j&&e()}var j=!1,k=g(b.element),l=window.getComputedStyle(b.element),n="auto"!==l.top?parseFloat(l.top):parseFloat(l.bottom);return"auto"!==l.top?h:i}function i(a){return function(){window.removeEventListener("resize",a._handlers.resize),a.destroy(),a.init(),a._handlers.scroll()}}function j(a){window.addEventListener("load",a._handlers.scroll),window.addEventListener("scroll",a._handlers.scroll),window.addEventListener("resize",a._handlers.resize)}function k(a,b){this.element=a,this.settings=b||l,this._placeholder=null,this._position="",this._handlers={}}var l={selector:".sticky"},m=["width","height","left","marginLeft","marginRight","zIndex"];return k.isFeatureSupported=function(){var a=document.createElement("div");return a.style.cssText="position:sticky",!!a.style.position},k.autoInit=function(a){a=a||l,[].forEach.call(document.querySelectorAll(a.selector),function(b){var c=new k(b,a);c.init()})},k.prototype.init=function(){var a=this.element.getBoundingClientRect();this._placeholder=document.createElement("div"),this._handlers.scroll=h(this),this._handlers.resize=i(this),this._placeholder.style.zIndex=d(this.element,this.settings.selector),c(this._placeholder.style,window.getComputedStyle(this.element),["top","bottom","marginTop","marginBottom","marginLeft","marginRight"]),c(this._placeholder.style,e(a),["width","height","left"]),j(this)},k.prototype.destroy=function(){f(this),window.removeEventListener("scroll",this._handlers.scroll),window.removeEventListener("resize",this._handlers.resize),this._handlers={},this._position="",this._placeholder=null},k});
 //# sourceMappingURL=audero-sticky.min.js.map

package.json

 {
   "name": "audero-sticky",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "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",

README.md

@@ -22,2 +22,4 @@ # Audero Sticky
 * [Multiple bottom sticky elements](http://htmlpreview.github.io/?https://github.com/AurelioDeRosa/audero-sticky/blob/master/demo/bottom-multiple-sticky-elements.html)
+* [Top sticky element with the parent changing height after initialization](http://htmlpreview.github.io/?https://github.com/AurelioDeRosa/audero-sticky/blob/master/demo/top-sticky-element-parent-dynamic-height.html)
+* [Bottom sticky element with the parent changing height after initialization](http://htmlpreview.github.io/?https://github.com/AurelioDeRosa/audero-sticky/blob/master/demo/bottom-sticky-element-parent-dynamic-height.html)
 
@@ -24,0 +26,0 @@ ## Compatibility

src/audero-sticky.js

@@ -153,9 +153,10 @@ (function(root, factory) {
     *
-    * @param {Sticky} sticky An instance of a Sticky object
+    * @param {HTMLElement} element The element based on which the boundaries are calculated
     *
     * @return {Object}
     */
-   function calculateBoundaries(sticky) {
+   function calculateBoundaries(element) {
       var boundaries = {};
-      var elementStyle = window.getComputedStyle(sticky.element);
+      var elementStyle = window.getComputedStyle(element);
+      var parentStyle = element.parentNode.getBoundingClientRect();
 
@@ -165,7 +166,7 @@ // If the value of the "top" property is defined, in which case it has
       if (elementStyle.top !== 'auto') {
-         boundaries.start = sticky.element.getBoundingClientRect().top - parseFloat(elementStyle.top);
-         boundaries.end = sticky.element.parentNode.getBoundingClientRect().bottom;
+         boundaries.start = element.getBoundingClientRect().top - parseFloat(elementStyle.top);
+         boundaries.end = parentStyle.bottom;
       } else {
-         boundaries.start = sticky.element.getBoundingClientRect().bottom + parseFloat(elementStyle.bottom);
-         boundaries.end = sticky.element.parentNode.getBoundingClientRect().top;
+         boundaries.start = element.getBoundingClientRect().bottom + parseFloat(elementStyle.bottom);
+         boundaries.end = parentStyle.top;
       }
@@ -192,2 +193,3 @@
       var isAdded = false;
+      var boundaries = calculateBoundaries(sticky.element);
       var elementStyle = window.getComputedStyle(sticky.element);
@@ -221,4 +223,8 @@ var distanceFromSide = elementStyle.top !== 'auto' ?
       function stickToTop() {
-         var height = parseFloat(window.getComputedStyle(sticky.element).height) || 0;
-         var boundaries = calculateBoundaries(sticky);
+         // The boundaries are calculated based on the element itself if it's not stickying;
+         // otherwise the placeholder is used.
+         boundaries = isAdded ? calculateBoundaries(sticky._placeholder) : calculateBoundaries(sticky.element);
+
+         // Same as value || 0
+         var height = ~~parseFloat(window.getComputedStyle(sticky.element).height);
          var gap = boundaries.end - height - window.pageYOffset;
@@ -239,4 +245,8 @@ var isInRange = window.pageYOffset >= boundaries.start && window.pageYOffset <= boundaries.end;
       function stickToBottom() {
-         var height = parseFloat(window.getComputedStyle(sticky.element).height) || 0;
-         var boundaries = calculateBoundaries(sticky);
+         // The boundaries are calculated based on the element itself if it's not stickying;
+         // otherwise the placeholder is used.
+         boundaries = isAdded ? calculateBoundaries(sticky._placeholder) : calculateBoundaries(sticky.element);
+
+         // Same as value || 0
+         var height = ~~parseFloat(window.getComputedStyle(sticky.element).height);
          var windowBottom = window.pageYOffset + window.innerHeight;
@@ -243,0 +253,0 @@ var gap = boundaries.end + height - windowBottom;

No alert changes

Improved metrics

Total package byte prevSize

86149

increased by32.25%

Number of package files

19

increased by11.76%

Lines of code

451

increased by1.81%

Number of lines in readme file

212

increased by0.95%

No dependency changes