@json_web_component/infinitscrollpagination
Advanced tools
@json_web_component/infinitscrollpagination - npm Package Compare versions
Comparing version 0.0.3 to 0.0.5
@@ -12,9 +12,22 @@ declare interface InfinitScrollPaginationElement extends HTMLElement { | ||
| declare type InfinitScrollPaginationProps = React.HTMLAttributes<HTMLElement> & { | ||
| // declare type InfinitScrollPaginationProps = React.HTMLAttributes<HTMLElement> & { | ||
| // reverse?: boolean; | ||
| // loading?: boolean; | ||
| // ['has-more']?: boolean; | ||
| // class?: string; | ||
| // threshold?: number; | ||
| // height?: string; | ||
| // } | ||
| declare type CusElementAttr = { | ||
| class?: string; | ||
| style?: string; | ||
| } | ||
| declare type InfinitScrollPaginationAttr = CusElementAttr & { | ||
| reverse?: boolean; | ||
| loading?: boolean; | ||
| ['has-more']?: boolean; | ||
| class?: string; | ||
| threshold?: number; | ||
| height?: string; | ||
| } |
@@ -1,2 +0,9 @@ | ||
| declare class InfinitScrollPagination extends HTMLElement { | ||
| declare class CusElement extends HTMLElement { | ||
| constructor(); | ||
| connectedCallback(): void; | ||
| disconnectedCallback(): void; | ||
| attributeChangedCallback(name: string, oldValue: string, newValue: string): void; | ||
| static get observedAttributes(): string[]; | ||
| } | ||
| declare class InfinitScrollPagination extends CusElement { | ||
| private reverse; | ||
@@ -3,0 +10,0 @@ private page; |
| "use strict"; | ||
| class InfinitScrollPagination extends HTMLElement { | ||
| class CusElement extends HTMLElement { | ||
| constructor() { | ||
| super(); | ||
| } | ||
| connectedCallback() { | ||
| const classNames = this.getAttribute('class'); | ||
| // classNames && this.classList.add(...classNames.split(' ')); | ||
| classNames && this.setAttribute('class', classNames); | ||
| const styles = this.getAttribute('style'); | ||
| styles && this.setAttribute('style', styles); | ||
| } | ||
| disconnectedCallback() { | ||
| } | ||
| attributeChangedCallback(name, oldValue, newValue) { | ||
| // requestAnimationFrame(() => { | ||
| // }) | ||
| switch (name) { | ||
| case 'style': | ||
| this.setAttribute('style', newValue); | ||
| break; | ||
| case 'class': | ||
| this.setAttribute('class', newValue); | ||
| break; | ||
| default: | ||
| break; | ||
| } | ||
| } | ||
| static get observedAttributes() { | ||
| return ['style', 'class']; | ||
| } | ||
| } | ||
| class InfinitScrollPagination extends CusElement { | ||
| constructor() { | ||
| super(); | ||
| this.reverse = false; | ||
@@ -15,4 +46,2 @@ this.page = 0; | ||
| } | ||
| const classNames = this.getAttribute('class'); | ||
| classNames && this.classList.add(...classNames.split(' ')); | ||
| this.threshold = threshold; | ||
@@ -83,4 +112,4 @@ const loading = this.getAttribute('loading'); | ||
| break; | ||
| case 'class': | ||
| newValue && newValue !== oldValue && this.classList.add(...newValue.split(' ')); | ||
| // case 'class': | ||
| // newValue && newValue !== oldValue && this.classList.add(...newValue.split(' ')); | ||
| break; | ||
@@ -100,5 +129,5 @@ case 'has-more': | ||
| static get observedAttributes() { | ||
| return ['callback', 'reverse', 'loading', 'class', 'has-more', 'height']; | ||
| return ['callback', 'reverse', 'loading', 'has-more', 'height']; | ||
| } | ||
| } | ||
| customElements.define('infinit-scroll', InfinitScrollPagination); |
@@ -1,1 +0,1 @@ | ||
| !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.InfinitScrollPaginaiton=e():t.InfinitScrollPaginaiton=e()}(self,(()=>(()=>{"use strict";class t extends HTMLElement{constructor(){super(),this.reverse=!1,this.page=0,this.loading=!1,this.instance=null,this.hasMore=!0,this.reverse=!!this.getAttribute("reverse");const t=Number(this.getAttribute("threshold"))||0;if(t<0||t>1)throw new Error("Threshold values must be numbers between 0 and 1");const e=this.getAttribute("class");e&&this.classList.add(...e.split(" ")),this.threshold=t;const s=this.getAttribute("loading");this.loading="true"===s;const i=this.getAttribute("has-more");this.hasMore=null===i||"true"===i}callback(){const t=new CustomEvent("load",{detail:{page:this.page}});this.dispatchEvent(t)}setPage(t){this.page="number"==typeof t?t:t(this.page)}scrollToTop(t={}){this.scrollTo(Object.assign({top:0,left:0,behavior:"smooth"},t))}scrollToEnd(t={}){this.scrollTo(Object.assign({top:this.scrollHeight,left:0,behavior:"smooth"},t))}connectedCallback(){this.instance=new IntersectionObserver((t=>{if(t[0].isIntersecting){if(this.loading||!this.hasMore)return;this.setPage((t=>t+1)),this.callback()}}),{threshold:this.threshold});const t={display:"block",overflow:"auto",height:"100%"};for(const e in t)if(Object.hasOwnProperty.call(t,e)){const s=t[e];this.style[e]=s}const e=document.createElement("div"),s=this.getAttribute("height");s&&(this.style.height=s),this.reverse?this.prepend(e):this.append(e),this.instance.observe(e)}disconnectedCallback(){this.instance&&this.instance.disconnect()}attributeChangedCallback(t,e,s){switch(t){case"reverse":this.reverse="true"===s;break;case"loading":this.loading="true"===s;break;case"class":s&&s!==e&&this.classList.add(...s.split(" "));break;case"has-more":this.hasMore=null===s||"true"===s;break;case"height":s&&(this.style.height=s)}}static get observedAttributes(){return["callback","reverse","loading","class","has-more","height"]}}return customElements.define("infinit-scroll",t),{}})())); | ||
| !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.InfinitScrollPaginaiton=e():t.InfinitScrollPaginaiton=e()}(self,(()=>(()=>{"use strict";class t extends HTMLElement{constructor(){super()}connectedCallback(){const t=this.getAttribute("class");t&&this.setAttribute("class",t);const e=this.getAttribute("style");e&&this.setAttribute("style",e)}disconnectedCallback(){}attributeChangedCallback(t,e,s){switch(t){case"style":this.setAttribute("style",s);break;case"class":this.setAttribute("class",s)}}static get observedAttributes(){return["style","class"]}}return customElements.define("infinit-scroll",class extends t{constructor(){super(),this.reverse=!1,this.page=0,this.loading=!1,this.instance=null,this.hasMore=!0,this.reverse=!!this.getAttribute("reverse");const t=Number(this.getAttribute("threshold"))||0;if(t<0||t>1)throw new Error("Threshold values must be numbers between 0 and 1");this.threshold=t;const e=this.getAttribute("loading");this.loading="true"===e;const s=this.getAttribute("has-more");this.hasMore=null===s||"true"===s}callback(){const t=new CustomEvent("load",{detail:{page:this.page}});this.dispatchEvent(t)}setPage(t){this.page="number"==typeof t?t:t(this.page)}scrollToTop(t={}){this.scrollTo(Object.assign({top:0,left:0,behavior:"smooth"},t))}scrollToEnd(t={}){this.scrollTo(Object.assign({top:this.scrollHeight,left:0,behavior:"smooth"},t))}connectedCallback(){this.instance=new IntersectionObserver((t=>{if(t[0].isIntersecting){if(this.loading||!this.hasMore)return;this.setPage((t=>t+1)),this.callback()}}),{threshold:this.threshold});const t={display:"block",overflow:"auto",height:"100%"};for(const e in t)if(Object.hasOwnProperty.call(t,e)){const s=t[e];this.style[e]=s}const e=document.createElement("div"),s=this.getAttribute("height");s&&(this.style.height=s),this.reverse?this.prepend(e):this.append(e),this.instance.observe(e)}disconnectedCallback(){this.instance&&this.instance.disconnect()}attributeChangedCallback(t,e,s){switch(t){case"reverse":this.reverse="true"===s;break;case"loading":this.loading="true"===s;break;case"has-more":this.hasMore=null===s||"true"===s;break;case"height":s&&(this.style.height=s)}}static get observedAttributes(){return["callback","reverse","loading","has-more","height"]}}),{}})())); |
| { | ||
| "name": "@json_web_component/infinitscrollpagination", | ||
| "version": "0.0.3", | ||
| "version": "0.0.5", | ||
| "description": "一个国际化的web component库, 可无感切换语言; An internationalized web component library with senseless language switching.", | ||
@@ -5,0 +5,0 @@ "main": "dist/main.min.js", |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by9.16%
19001
- Lines of code
- increased by34.81%
182
No dependency changes