@egjs/deview-infinite - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

declaration/Infinite.d.ts

@@ -6,3 +6,3 @@ import Component from "@egjs/component";
     private container;
-    options: Partial<InifniteOptions>;
+    options: InifniteOptions;
     private items;
@@ -9,0 +9,0 @@ private containerOffset;

declaration/types.d.ts

@@ -5,2 +5,3 @@ export interface InifniteOptions {
     margin: number;
+    threshold: number;
 }
@@ -7,0 +8,0 @@ export interface Item {

dist/infinite.cjs.js

@@ -7,3 +7,3 @@ /*
 repository: git+https://github.com/NAVER-FEPlatform/deview2019-demo.git
-version: 0.0.1
+version: 0.0.2
 */
@@ -51,3 +51,16 @@ 'use strict';
 }
+var __assign = function () {
+  __assign = Object.assign || function __assign(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
 
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
 function makeElement(html) {
@@ -72,3 +85,2 @@ var el = document.createElement("div");
     _this.container = container;
-    _this.options = options;
     _this.items = [];
@@ -80,5 +92,9 @@ _this.containerOffset = 0;
     _this.onScroll = function () {
-      var scrollTop = (_this.options.overflow ? _this.container.scrollTop : document.documentElement.scrollTop) - _this.containerOffset;
+      var _a = _this.options,
+          threshold = _a.threshold,
+          overflow = _a.overflow;
+      var scrollTop = overflow ? _this.container.scrollTop : document.documentElement.scrollTop;
+      var relativeScrollTop = scrollTop - _this.containerOffset;
 
-      if (scrollTop > _this.scrollHeight - _this.containerHeight - 100) {
+      if (relativeScrollTop > _this.scrollHeight - _this.containerHeight - threshold) {
         _this.trigger("append", {
@@ -101,2 +117,9 @@ requestIndex: _this.items.length
 
+    _this.options = __assign({
+      threshold: 100,
+      margin: 0,
+      renderExternal: false,
+      overflow: false
+    }, options);
+
     if (options.overflow) {
@@ -103,0 +126,0 @@ container.style.overflow = "scroll";

dist/infinite.esm.js

@@ -7,3 +7,3 @@ /*
 repository: git+https://github.com/NAVER-FEPlatform/deview2019-demo.git
-version: 0.0.1
+version: 0.0.2
 */
@@ -49,3 +49,16 @@ import Component from '@egjs/component';
 }
+var __assign = function () {
+  __assign = Object.assign || function __assign(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
 
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
 function makeElement(html) {
@@ -70,3 +83,2 @@ var el = document.createElement("div");
     _this.container = container;
-    _this.options = options;
     _this.items = [];
@@ -78,5 +90,9 @@ _this.containerOffset = 0;
     _this.onScroll = function () {
-      var scrollTop = (_this.options.overflow ? _this.container.scrollTop : document.documentElement.scrollTop) - _this.containerOffset;
+      var _a = _this.options,
+          threshold = _a.threshold,
+          overflow = _a.overflow;
+      var scrollTop = overflow ? _this.container.scrollTop : document.documentElement.scrollTop;
+      var relativeScrollTop = scrollTop - _this.containerOffset;
 
-      if (scrollTop > _this.scrollHeight - _this.containerHeight - 100) {
+      if (relativeScrollTop > _this.scrollHeight - _this.containerHeight - threshold) {
         _this.trigger("append", {
@@ -99,2 +115,9 @@ requestIndex: _this.items.length
 
+    _this.options = __assign({
+      threshold: 100,
+      margin: 0,
+      renderExternal: false,
+      overflow: false
+    }, options);
+
     if (options.overflow) {
@@ -101,0 +124,0 @@ container.style.overflow = "scroll";

dist/infinite.js

@@ -7,3 +7,3 @@ /*
 repository: git+https://github.com/NAVER-FEPlatform/deview2019-demo.git
-version: 0.0.1
+version: 0.0.2
 */
@@ -53,3 +53,16 @@ (function (global, factory) {
     }
+    var __assign = function () {
+      __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
 
+          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+
+        return t;
+      };
+
+      return __assign.apply(this, arguments);
+    };
+
     /*
@@ -365,3 +378,2 @@ Copyright (c) 2017 NAVER Corp.
         _this.container = container;
-        _this.options = options;
         _this.items = [];
@@ -373,5 +385,9 @@ _this.containerOffset = 0;
         _this.onScroll = function () {
-          var scrollTop = (_this.options.overflow ? _this.container.scrollTop : document.documentElement.scrollTop) - _this.containerOffset;
+          var _a = _this.options,
+              threshold = _a.threshold,
+              overflow = _a.overflow;
+          var scrollTop = overflow ? _this.container.scrollTop : document.documentElement.scrollTop;
+          var relativeScrollTop = scrollTop - _this.containerOffset;
 
-          if (scrollTop > _this.scrollHeight - _this.containerHeight - 100) {
+          if (relativeScrollTop > _this.scrollHeight - _this.containerHeight - threshold) {
             _this.trigger("append", {
@@ -394,2 +410,9 @@ requestIndex: _this.items.length
 
+        _this.options = __assign({
+          threshold: 100,
+          margin: 0,
+          renderExternal: false,
+          overflow: false
+        }, options);
+
         if (options.overflow) {
@@ -396,0 +419,0 @@ container.style.overflow = "scroll";

dist/infinite.min.js

@@ -7,5 +7,5 @@ /*
 repository: git+https://github.com/NAVER-FEPlatform/deview2019-demo.git
-version: 0.0.1
+version: 0.0.2
 */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Infinite=e()}(this,function(){"use strict";var i=function(t,e){return(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};function f(t){return void 0===t}return function(o){function t(t,e){void 0===e&&(e={});var n=o.call(this)||this;return n.container=t,n.options=e,n.items=[],n.containerOffset=0,n.containerHeight=0,n.scrollHeight=0,n.onScroll=function(){(n.options.overflow?n.container.scrollTop:document.documentElement.scrollTop)-n.containerOffset>n.scrollHeight-n.containerHeight-100&&n.trigger("append",{requestIndex:n.items.length})},n.onResize=function(){n.containerOffset=n.options.overflow?0:n.container.getBoundingClientRect().top,n.containerHeight=n.container.offsetHeight,n.items.forEach(function(t){t.size=0}),n.layout()},e.overflow&&(t.style.overflow="scroll"),(e.overflow?t:window).addEventListener("scroll",n.onScroll),window.addEventListener("resize",n.onResize),n.onResize(),n.onScroll(),n}!function(t,e){function n(){this.constructor=t}i(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}(t,o);var e=t.prototype;return e.insert=function(t,e){var n=this.options,o=this.items,i={el:"object"==typeof e?e:function(t){var e=document.createElement("div");return e.innerHTML=t,e.children[0]}(e),size:0,pos:0};if(o.splice(t,0,i),!n.renderExternal){var r=o[t+1];this.container.insertBefore(i.el,r?r.el:null),this.layout()}return i},e.remove=function(t){var e=this.options,n=this.items.splice(t,1)[0];return e.renderExternal||(this.container.removeChild(n.el),this.layout()),n},e.layout=function(){var t=this.options,e=t.overflow,n=t.margin,o=void 0===n?0:n,i=0;return this.items.forEach(function(t){t.size||(t.size=t.el.offsetHeight),t.pos=i,i+=t.size+o}),e||(this.container.style.height=i+"px"),this.scrollHeight=i,this.items.forEach(function(t){t.el.style.cssText+="position: absolute;top: "+t.pos+"px;"}),this.onScroll(),this},e.sync=function(t){var i=this,e=t.removed,n=t.ordered,o=t.added,r=t.list;return e.forEach(function(t){i.remove(t)}),n.forEach(function(t){var e=t[0],n=t[1],o=i.remove(e);i.insert(n,o.el).size=o.size}),o.forEach(function(t){i.insert(t,r[t])}),this.layout(),this},e.append=function(t){return this.insert(this.items.length,t),this},e.destroy=function(){(this.options.overflow?this.container:window).removeEventListener("scroll",this.onScroll),window.removeEventListener("resize",this.onResize)},t}(function(){var t=function(){function t(){this._eventHandler={},this.options={}}var e=t.prototype;return e.trigger=function(t,e){void 0===e&&(e={});var n=this._eventHandler[t]||[];if(!(0<n.length))return!0;n=n.concat(),e.eventType=t;var o=!1,i=[e],r=0;e.stop=function(){o=!0},e.currentTarget=this;for(var s=arguments.length,f=new Array(2<s?s-2:0),c=2;c<s;c++)f[c-2]=arguments[c];for(1<=f.length&&(i=i.concat(f)),r=0;n[r];r++)n[r].apply(this,i);return!o},e.once=function(i,r){if("object"==typeof i&&f(r)){var t,e=i;for(t in e)this.once(t,e[t]);return this}if("string"==typeof i&&"function"==typeof r){var s=this;this.on(i,function t(){for(var e=arguments.length,n=new Array(e),o=0;o<e;o++)n[o]=arguments[o];r.apply(s,n),s.off(i,t)})}return this},e.hasOn=function(t){return!!this._eventHandler[t]},e.on=function(t,e){if("object"==typeof t&&f(e)){var n,o=t;for(n in o)this.on(n,o[n]);return this}if("string"==typeof t&&"function"==typeof e){var i=this._eventHandler[t];f(i)&&(this._eventHandler[t]=[],i=this._eventHandler[t]),i.push(e)}return this},e.off=function(t,e){if(f(t))return this._eventHandler={},this;if(f(e)){if("string"==typeof t)return this._eventHandler[t]=void 0,this;var n,o=t;for(n in o)this.off(n,o[n]);return this}var i,r,s=this._eventHandler[t];if(s)for(i=0;void 0!==(r=s[i]);i++)if(r===e){s=s.splice(i,1);break}return this},t}();return t.VERSION="2.1.2",t}())});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Infinite=e()}(this,function(){"use strict";var r=function(t,e){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};var i=function(){return(i=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t}).apply(this,arguments)};function f(t){return void 0===t}return function(o){function t(t,e){void 0===e&&(e={});var n=o.call(this)||this;return n.container=t,n.items=[],n.containerOffset=0,n.containerHeight=0,n.scrollHeight=0,n.onScroll=function(){var t=n.options,e=t.threshold;(t.overflow?n.container.scrollTop:document.documentElement.scrollTop)-n.containerOffset>n.scrollHeight-n.containerHeight-e&&n.trigger("append",{requestIndex:n.items.length})},n.onResize=function(){n.containerOffset=n.options.overflow?0:n.container.getBoundingClientRect().top,n.containerHeight=n.container.offsetHeight,n.items.forEach(function(t){t.size=0}),n.layout()},n.options=i({threshold:100,margin:0,renderExternal:!1,overflow:!1},e),e.overflow&&(t.style.overflow="scroll"),(e.overflow?t:window).addEventListener("scroll",n.onScroll),window.addEventListener("resize",n.onResize),n.onResize(),n.onScroll(),n}!function(t,e){function n(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}(t,o);var e=t.prototype;return e.insert=function(t,e){var n=this.options,o=this.items,r={el:"object"==typeof e?e:function(t){var e=document.createElement("div");return e.innerHTML=t,e.children[0]}(e),size:0,pos:0};if(o.splice(t,0,r),!n.renderExternal){var i=o[t+1];this.container.insertBefore(r.el,i?i.el:null),this.layout()}return r},e.remove=function(t){var e=this.options,n=this.items.splice(t,1)[0];return e.renderExternal||(this.container.removeChild(n.el),this.layout()),n},e.layout=function(){var t=this.options,e=t.overflow,n=t.margin,o=void 0===n?0:n,r=0;return this.items.forEach(function(t){t.size||(t.size=t.el.offsetHeight),t.pos=r,r+=t.size+o}),e||(this.container.style.height=r+"px"),this.scrollHeight=r,this.items.forEach(function(t){t.el.style.cssText+="position: absolute;top: "+t.pos+"px;"}),this.onScroll(),this},e.sync=function(t){var r=this,e=t.removed,n=t.ordered,o=t.added,i=t.list;return e.forEach(function(t){r.remove(t)}),n.forEach(function(t){var e=t[0],n=t[1],o=r.remove(e);r.insert(n,o.el).size=o.size}),o.forEach(function(t){r.insert(t,i[t])}),this.layout(),this},e.append=function(t){return this.insert(this.items.length,t),this},e.destroy=function(){(this.options.overflow?this.container:window).removeEventListener("scroll",this.onScroll),window.removeEventListener("resize",this.onResize)},t}(function(){var t=function(){function t(){this._eventHandler={},this.options={}}var e=t.prototype;return e.trigger=function(t,e){void 0===e&&(e={});var n=this._eventHandler[t]||[];if(!(0<n.length))return!0;n=n.concat(),e.eventType=t;var o=!1,r=[e],i=0;e.stop=function(){o=!0},e.currentTarget=this;for(var s=arguments.length,f=new Array(2<s?s-2:0),c=2;c<s;c++)f[c-2]=arguments[c];for(1<=f.length&&(r=r.concat(f)),i=0;n[i];i++)n[i].apply(this,r);return!o},e.once=function(r,i){if("object"==typeof r&&f(i)){var t,e=r;for(t in e)this.once(t,e[t]);return this}if("string"==typeof r&&"function"==typeof i){var s=this;this.on(r,function t(){for(var e=arguments.length,n=new Array(e),o=0;o<e;o++)n[o]=arguments[o];i.apply(s,n),s.off(r,t)})}return this},e.hasOn=function(t){return!!this._eventHandler[t]},e.on=function(t,e){if("object"==typeof t&&f(e)){var n,o=t;for(n in o)this.on(n,o[n]);return this}if("string"==typeof t&&"function"==typeof e){var r=this._eventHandler[t];f(r)&&(this._eventHandler[t]=[],r=this._eventHandler[t]),r.push(e)}return this},e.off=function(t,e){if(f(t))return this._eventHandler={},this;if(f(e)){if("string"==typeof t)return this._eventHandler[t]=void 0,this;var n,o=t;for(n in o)this.off(n,o[n]);return this}var r,i,s=this._eventHandler[t];if(s)for(r=0;void 0!==(i=s[r]);r++)if(i===e){s=s.splice(r,1);break}return this},t}();return t.VERSION="2.1.2",t}())});
 //# sourceMappingURL=infinite.min.js.map

package.json

 {
 	"name": "@egjs/deview-infinite",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"description": "",
@@ -5,0 +5,0 @@ "main": "./dist/infinite.cjs.js",

src/Infinite.ts

@@ -13,2 +13,3 @@ import Component from "@egjs/component";
 export default class Infinite extends Component {
+    public options!: InifniteOptions;
     private items: Item[] = [];
@@ -20,5 +21,12 @@ private containerOffset = 0;
         private container: HTMLElement,
-        public options: Partial<InifniteOptions> = {},
+        options: Partial<InifniteOptions> = {},
     ) {
         super();
+        this.options = {
+            threshold: 100,
+            margin: 0,
+            renderExternal: false,
+            overflow: false,
+            ...options,
+        };
         if (options.overflow) {
@@ -111,5 +119,10 @@ container.style.overflow = "scroll";
     private onScroll = () => {
-        const scrollTop = (this.options.overflow ? this.container.scrollTop : document.documentElement.scrollTop) - this.containerOffset;
+        const {
+            threshold,
+            overflow,
+        } =  this.options;
+        const scrollTop = overflow ? this.container.scrollTop : document.documentElement.scrollTop;
+        const relativeScrollTop = scrollTop - this.containerOffset;
 
-        if (scrollTop > this.scrollHeight - this.containerHeight - 100) {
+        if (relativeScrollTop > this.scrollHeight - this.containerHeight - threshold) {
             this.trigger("append", {
@@ -116,0 +129,0 @@ requestIndex: this.items.length,

src/types.ts

 export interface InifniteOptions {
     renderExternal: boolean;
     overflow: boolean;
-    margin: number,
+    margin: number;
+    threshold: number;
 }
@@ -6,0 +7,0 @@ export interface Item {

No alert changes

Improved metrics

Total package byte prevSize

102330

increased by4.54%

Lines of code

1118

increased by6.99%

No dependency changes