@odopod/odo-affix - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/odo-affix.esm.js

@@ -40,3 +40,3 @@ import OdoWindowEvents from '@odopod/odo-window-events';
      * Main element.
-     * @type {Element}
+     * @type {HTMLElement}
      */
@@ -75,7 +75,10 @@ this.element = element;
     /**
-     * Custom overlap getter. Can be overridden by setting `uiOverlap`.
-     * @type {?function}
+     * The amount that the ui overlaps the top of the page. A sticky navigation,
+     * for example, would cause an overlap equal to its height.
+     * @type {function():number}
      * @private
      */
-    this._customOverlap = null;
+    this._getUiOverlap = function () {
+      return 0;
+    };
 
@@ -162,3 +165,3 @@ /**
 
-    this._overlap = this.uiOverlap;
+    this._overlap = this._getUiOverlap();
     this._maxHeight = viewportHeight - this._overlap - this._marginTop - this._marginBottom;
@@ -212,2 +215,7 @@
 
+  /**
+   * Whether the browser's scroll position is within promotion range.
+   */
+
+
   Affix.prototype.isInPromotionRange = function isInPromotionRange(scrollTop) {
@@ -287,5 +295,4 @@ return scrollTop >= this.top - Affix.PROMOTION_RANGE && scrollTop <= this.bottom + Affix.PROMOTION_RANGE;
   /**
-   * The amount that the ui overlaps the top of the page. A sticky navigation,
-   * for example, would cause an overlap equal to its height.
-   * @return {number}
+   * TODO(glen): remove getter/setter.
+   * @return {function():number}
    */
@@ -323,3 +330,2 @@
     this._anchor = null;
-    OdoWindowEvents.remove(this._resizeId);
     OdoScrollAnimation.remove(this._scrollId);
@@ -427,16 +433,12 @@ Affix.arrayRemove(Affix.instances, this);
     get: function get$$1() {
-      if (this._customOverlap) {
-        return this._customOverlap();
-      }
-
-      return 0;
+      return this._getUiOverlap;
     }
 
     /**
-    * Define a custom getter to determine overlap.
-    * @param {function():number} fn
-    */
+     * Define a custom getter to determine overlap.
+     * @param {function():number} fn
+     */
     ,
     set: function set$$1(fn) {
-      this._customOverlap = fn;
+      this._getUiOverlap = fn;
       this.update();
@@ -443,0 +445,0 @@ }

dist/odo-affix.js

@@ -46,3 +46,3 @@ (function (global, factory) {
      * Main element.
-     * @type {Element}
+     * @type {HTMLElement}
      */
@@ -81,7 +81,10 @@ this.element = element;
     /**
-     * Custom overlap getter. Can be overridden by setting `uiOverlap`.
-     * @type {?function}
+     * The amount that the ui overlaps the top of the page. A sticky navigation,
+     * for example, would cause an overlap equal to its height.
+     * @type {function():number}
      * @private
      */
-    this._customOverlap = null;
+    this._getUiOverlap = function () {
+      return 0;
+    };
 
@@ -168,3 +171,3 @@ /**
 
-    this._overlap = this.uiOverlap;
+    this._overlap = this._getUiOverlap();
     this._maxHeight = viewportHeight - this._overlap - this._marginTop - this._marginBottom;
@@ -218,2 +221,7 @@
 
+  /**
+   * Whether the browser's scroll position is within promotion range.
+   */
+
+
   Affix.prototype.isInPromotionRange = function isInPromotionRange(scrollTop) {
@@ -293,5 +301,4 @@ return scrollTop >= this.top - Affix.PROMOTION_RANGE && scrollTop <= this.bottom + Affix.PROMOTION_RANGE;
   /**
-   * The amount that the ui overlaps the top of the page. A sticky navigation,
-   * for example, would cause an overlap equal to its height.
-   * @return {number}
+   * TODO(glen): remove getter/setter.
+   * @return {function():number}
    */
@@ -329,3 +336,2 @@
     this._anchor = null;
-    OdoWindowEvents.remove(this._resizeId);
     OdoScrollAnimation.remove(this._scrollId);
@@ -433,16 +439,12 @@ Affix.arrayRemove(Affix.instances, this);
     get: function get$$1() {
-      if (this._customOverlap) {
-        return this._customOverlap();
-      }
-
-      return 0;
+      return this._getUiOverlap;
     }
 
     /**
-    * Define a custom getter to determine overlap.
-    * @param {function():number} fn
-    */
+     * Define a custom getter to determine overlap.
+     * @param {function():number} fn
+     */
     ,
     set: function set$$1(fn) {
-      this._customOverlap = fn;
+      this._getUiOverlap = fn;
       this.update();
@@ -449,0 +451,0 @@ }

dist/odo-affix.min.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("@odopod/odo-window-events"),require("@odopod/odo-scroll-animation")):"function"==typeof define&&define.amd?define(["@odopod/odo-window-events","@odopod/odo-scroll-animation"],e):t.OdoAffix=e(t.OdoWindowEvents,t.OdoScrollAnimation)}(this,function(t,e){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t,e=e&&e.hasOwnProperty("default")?e.default:e;var i=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},o=function(){function t(t,e){for(var i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,i,o){return i&&t(e.prototype,i),o&&t(e,o),e}}(),s=function(){function s(t){if(i(this,s),this.element=t,this._anchor=document.getElementById(t.getAttribute("data-anchor")),!this._anchor)throw new Error('Unable to find element with id="'+t.getAttribute("data-anchor")+'"');this.isStuck=!1,this.isAtBottom=!1,this.isPromoted=!1,this._customOverlap=null,this._overlap=0,this._maxHeight=0,this._marginTop=0,this._marginBottom=0,this._top=0,this._bottom=0,this.containerHeight=0,this._scrollId=e.add(this.process.bind(this)),this.element.classList.add(s.Classes.BASE),this.element.style.overflowY="auto",s.instances.push(this),this.update()}return s.prototype.read=function(){var t=this._anchor.getBoundingClientRect(),e=window.pageYOffset,i=window.innerHeight,o=this.element.offsetHeight;this._asideWidth=this.element.offsetWidth;var s=getComputedStyle(this.element,null);this._marginTop=parseFloat(s.marginTop),this._marginBottom=parseFloat(s.marginBottom),this._overlap=this.uiOverlap,this._maxHeight=i-this._overlap-this._marginTop-this._marginBottom,this.containerHeight=Math.round(t.height),this._top=t.top+e,this._bottom=t.bottom+e-Math.min(o,this._maxHeight)},s.prototype.write=function(){this.element.style.maxHeight=this._maxHeight+"px",this.element.style.width=this._asideWidth+"px"},s.prototype.process=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:window.pageYOffset;!this.isStuck&&t>=this.top&&t<this.bottom||this.isAtBottom&&t<this.bottom?this.stick():!this.isAtBottom&&t>=this.bottom?this.stickToBottom():this.isStuck&&t<this.top&&this.unstick();var e=this.isInPromotionRange(t);!this.isPromoted&&e?this.layerPromote():this.isPromoted&&!e&&this.layerDemote()},s.prototype.isInPromotionRange=function(t){return t>=this.top-s.PROMOTION_RANGE&&t<=this.bottom+s.PROMOTION_RANGE},s.prototype.stick=function(){this.element.style.position="fixed",this.element.style.top=Math.round(this._overlap)+"px",this.element.classList.remove(s.Classes.AT_BOTTOM),this.element.classList.remove(s.Classes.AT_TOP),this.isStuck=!0,this.isAtBottom=!1},s.prototype.stickToBottom=function(){this.element.style.position="absolute",this.element.style.top=Math.round(this._bottom-this._top-this._marginBottom)+"px",this.element.classList.remove(s.Classes.AT_TOP),this.element.classList.add(s.Classes.AT_BOTTOM),this.isAtBottom=!0},s.prototype.unstick=function(){this.element.style.position="",this.element.classList.add(s.Classes.AT_TOP),this.element.classList.remove(s.Classes.AT_BOTTOM),this.isStuck=!1,this.isAtBottom=!1},s.prototype.layerPromote=function(){this.element.style.willChange="position",this.element.style.transform="translateZ(0)",this.isPromoted=!0},s.prototype.layerDemote=function(){this.element.style.willChange="",this.element.style.transform="",this.isPromoted=!1},s.prototype.reset=function(){this.element.style.maxHeight="",this.element.style.width=""},s.prototype.update=function(){var t=this.element.scrollTop;this.unstick(),this.reset(),this.read(),this.write(),this.process(),this.element.scrollTop=t},s.prototype.dispose=function(){this.layerDemote(),this.element.classList.remove(s.Classes.BASE),this.element.style.position="",this.element.style.top="",this.element.style.maxHeight="",this.element.style.width="",this.element.style.overflowY="",this.element=null,this._anchor=null,t.remove(this._resizeId),e.remove(this._scrollId),s.arrayRemove(s.instances,this)},s._addImageLoadHandlers=function(){for(var t=document.getElementsByTagName("img"),e=0,i=t.length;e<i;e++)t[e].addEventListener("load",s._scheduleUpdate,!1)},s._scheduleUpdate=function(){window.removeEventListener("load",s._scheduleUpdate),s._updateId&&window.cancelAnimationFrame(s._updateId),s._updateId=window.requestAnimationFrame(s._handleImageLoad)},s._handleImageLoad=function(){s._updateId=null,s.documentHeight=document.body.offsetHeight,s.viewportHeight=window.innerHeight,s.update()},s.update=function(){var t=window.pageYOffset,e=s.instances.map(function(t){return t.element.scrollTop});s.instances.forEach(function(t){t.unstick(),t.reset()}),s.instances.forEach(function(t){t.read()}),s.instances.forEach(function(e){e.write(),e.process(t)}),s.instances.forEach(function(t,i){t.element.scrollTop=e[i]})},s.arrayRemove=function(t,e){var i=t.indexOf(e);return t.splice(i,1),e},o(s,[{key:"uiOverlap",get:function(){return this._customOverlap?this._customOverlap():0},set:function(t){this._customOverlap=t,this.update()}},{key:"top",get:function(){return this._top-this._overlap}},{key:"bottom",get:function(){return this._bottom-this._marginBottom}}]),s}();return s.PROMOTION_RANGE=200,s.instances=[],s._updateId=null,s.documentHeight=document.body.offsetHeight,s.viewportHeight=window.innerHeight,s._addImageLoadHandlers(),s._resizeId=t.onResize(s._scheduleUpdate),window.addEventListener("load",s._scheduleUpdate),s.Classes={BASE:"odo-affix",AT_TOP:"odo-affix--at-top",AT_BOTTOM:"odo-affix--at-bottom"},s});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("@odopod/odo-window-events"),require("@odopod/odo-scroll-animation")):"function"==typeof define&&define.amd?define(["@odopod/odo-window-events","@odopod/odo-scroll-animation"],e):t.OdoAffix=e(t.OdoWindowEvents,t.OdoScrollAnimation)}(this,function(t,e){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t,e=e&&e.hasOwnProperty("default")?e.default:e;var i=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},o=function(){function t(t,e){for(var i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,i,o){return i&&t(e.prototype,i),o&&t(e,o),e}}(),s=function(){function t(o){if(i(this,t),this.element=o,this._anchor=document.getElementById(o.getAttribute("data-anchor")),!this._anchor)throw new Error('Unable to find element with id="'+o.getAttribute("data-anchor")+'"');this.isStuck=!1,this.isAtBottom=!1,this.isPromoted=!1,this._getUiOverlap=function(){return 0},this._overlap=0,this._maxHeight=0,this._marginTop=0,this._marginBottom=0,this._top=0,this._bottom=0,this.containerHeight=0,this._scrollId=e.add(this.process.bind(this)),this.element.classList.add(t.Classes.BASE),this.element.style.overflowY="auto",t.instances.push(this),this.update()}return t.prototype.read=function(){var t=this._anchor.getBoundingClientRect(),e=window.pageYOffset,i=window.innerHeight,o=this.element.offsetHeight;this._asideWidth=this.element.offsetWidth;var s=getComputedStyle(this.element,null);this._marginTop=parseFloat(s.marginTop),this._marginBottom=parseFloat(s.marginBottom),this._overlap=this._getUiOverlap(),this._maxHeight=i-this._overlap-this._marginTop-this._marginBottom,this.containerHeight=Math.round(t.height),this._top=t.top+e,this._bottom=t.bottom+e-Math.min(o,this._maxHeight)},t.prototype.write=function(){this.element.style.maxHeight=this._maxHeight+"px",this.element.style.width=this._asideWidth+"px"},t.prototype.process=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:window.pageYOffset;!this.isStuck&&t>=this.top&&t<this.bottom||this.isAtBottom&&t<this.bottom?this.stick():!this.isAtBottom&&t>=this.bottom?this.stickToBottom():this.isStuck&&t<this.top&&this.unstick();var e=this.isInPromotionRange(t);!this.isPromoted&&e?this.layerPromote():this.isPromoted&&!e&&this.layerDemote()},t.prototype.isInPromotionRange=function(e){return e>=this.top-t.PROMOTION_RANGE&&e<=this.bottom+t.PROMOTION_RANGE},t.prototype.stick=function(){this.element.style.position="fixed",this.element.style.top=Math.round(this._overlap)+"px",this.element.classList.remove(t.Classes.AT_BOTTOM),this.element.classList.remove(t.Classes.AT_TOP),this.isStuck=!0,this.isAtBottom=!1},t.prototype.stickToBottom=function(){this.element.style.position="absolute",this.element.style.top=Math.round(this._bottom-this._top-this._marginBottom)+"px",this.element.classList.remove(t.Classes.AT_TOP),this.element.classList.add(t.Classes.AT_BOTTOM),this.isAtBottom=!0},t.prototype.unstick=function(){this.element.style.position="",this.element.classList.add(t.Classes.AT_TOP),this.element.classList.remove(t.Classes.AT_BOTTOM),this.isStuck=!1,this.isAtBottom=!1},t.prototype.layerPromote=function(){this.element.style.willChange="position",this.element.style.transform="translateZ(0)",this.isPromoted=!0},t.prototype.layerDemote=function(){this.element.style.willChange="",this.element.style.transform="",this.isPromoted=!1},t.prototype.reset=function(){this.element.style.maxHeight="",this.element.style.width=""},t.prototype.update=function(){var t=this.element.scrollTop;this.unstick(),this.reset(),this.read(),this.write(),this.process(),this.element.scrollTop=t},t.prototype.dispose=function(){this.layerDemote(),this.element.classList.remove(t.Classes.BASE),this.element.style.position="",this.element.style.top="",this.element.style.maxHeight="",this.element.style.width="",this.element.style.overflowY="",this.element=null,this._anchor=null,e.remove(this._scrollId),t.arrayRemove(t.instances,this)},t._addImageLoadHandlers=function(){for(var e=document.getElementsByTagName("img"),i=0,o=e.length;i<o;i++)e[i].addEventListener("load",t._scheduleUpdate,!1)},t._scheduleUpdate=function(){window.removeEventListener("load",t._scheduleUpdate),t._updateId&&window.cancelAnimationFrame(t._updateId),t._updateId=window.requestAnimationFrame(t._handleImageLoad)},t._handleImageLoad=function(){t._updateId=null,t.documentHeight=document.body.offsetHeight,t.viewportHeight=window.innerHeight,t.update()},t.update=function(){var e=window.pageYOffset,i=t.instances.map(function(t){return t.element.scrollTop});t.instances.forEach(function(t){t.unstick(),t.reset()}),t.instances.forEach(function(t){t.read()}),t.instances.forEach(function(t){t.write(),t.process(e)}),t.instances.forEach(function(t,e){t.element.scrollTop=i[e]})},t.arrayRemove=function(t,e){var i=t.indexOf(e);return t.splice(i,1),e},o(t,[{key:"uiOverlap",get:function(){return this._getUiOverlap},set:function(t){this._getUiOverlap=t,this.update()}},{key:"top",get:function(){return this._top-this._overlap}},{key:"bottom",get:function(){return this._bottom-this._marginBottom}}]),t}();return s.PROMOTION_RANGE=200,s.instances=[],s._updateId=null,s.documentHeight=document.body.offsetHeight,s.viewportHeight=window.innerHeight,s._addImageLoadHandlers(),s._resizeId=t.onResize(s._scheduleUpdate),window.addEventListener("load",s._scheduleUpdate),s.Classes={BASE:"odo-affix",AT_TOP:"odo-affix--at-top",AT_BOTTOM:"odo-affix--at-bottom"},s});
 //# sourceMappingURL=odo-affix.min.js.map

package.json

 {
   "name": "@odopod/odo-affix",
   "description": "Makes an element fixed position while its within a container.",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "main": "dist/odo-affix.js",
   "module": "dist/odo-affix.esm.js",
   "odoModule": "src/affix.js",
+  "types": "index.d.ts",
   "sideEffects": false,
@@ -17,4 +18,4 @@ "author": "Odopod",
   "dependencies": {
-    "@odopod/odo-scroll-animation": "^1.1.0",
-    "@odopod/odo-window-events": "^1.1.0"
+    "@odopod/odo-scroll-animation": "^1.2.0",
+    "@odopod/odo-window-events": "^1.2.0"
   },
@@ -25,3 +26,4 @@ "homepage": "https://github.com/odopod/code-library/tree/master/packages/odo-affix",
     "dist",
-    "src"
+    "src",
+    "index.d.ts"
   ],
@@ -28,0 +30,0 @@ "odoKeywords": [

src/affix.js

@@ -14,3 +14,3 @@ /**
      * Main element.
-     * @type {Element}
+     * @type {HTMLElement}
      */
@@ -49,7 +49,8 @@ this.element = element;
     /**
-     * Custom overlap getter. Can be overridden by setting `uiOverlap`.
-     * @type {?function}
+     * The amount that the ui overlaps the top of the page. A sticky navigation,
+     * for example, would cause an overlap equal to its height.
+     * @type {function():number}
      * @private
      */
-    this._customOverlap = null;
+    this._getUiOverlap = () => 0;
 
@@ -134,3 +135,3 @@ /**
 
-    this._overlap = this.uiOverlap;
+    this._overlap = this._getUiOverlap();
     this._maxHeight = viewportHeight - this._overlap - this._marginTop - this._marginBottom;
@@ -179,2 +180,5 @@
 
+  /**
+   * Whether the browser's scroll position is within promotion range.
+   */
   isInPromotionRange(scrollTop) {
@@ -243,20 +247,15 @@ return scrollTop >= this.top - Affix.PROMOTION_RANGE &&
   /**
-   * The amount that the ui overlaps the top of the page. A sticky navigation,
-   * for example, would cause an overlap equal to its height.
-   * @return {number}
+   * TODO(glen): remove getter/setter.
+   * @return {function():number}
    */
   get uiOverlap() {
-    if (this._customOverlap) {
-      return this._customOverlap();
-    }
-
-    return 0;
+    return this._getUiOverlap;
   }
 
   /**
-  * Define a custom getter to determine overlap.
-  * @param {function():number} fn
-  */
+   * Define a custom getter to determine overlap.
+   * @param {function():number} fn
+   */
   set uiOverlap(fn) {
-    this._customOverlap = fn;
+    this._getUiOverlap = fn;
     this.update();
@@ -307,3 +306,2 @@ }
     this._anchor = null;
-    OdoWindowEvents.remove(this._resizeId);
     OdoScrollAnimation.remove(this._scrollId);
@@ -310,0 +308,0 @@ Affix.arrayRemove(Affix.instances, this);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

105880

increased by2.94%

Number of package files

11

increased by10%

Lines of code

1271

increased by11%

Dependency changes

• Updated@odopod/odo-scroll-animation@^1.2.0

• Updated@odopod/odo-window-events@^1.2.0