11 lines
6.3 KiB
JavaScript
11 lines
6.3 KiB
JavaScript
/**
|
|
*
|
|
* @authors yutent (yutent.io@gmail.com)
|
|
* @date 2022-06-23 15:46:28
|
|
* @version v1.0.6
|
|
*
|
|
*/
|
|
|
|
var w=Object.defineProperty;var E=(g,f,t)=>f in g?w(g,f,{enumerable:!0,configurable:!0,writable:!0,value:t}):g[f]=t;var y=(g,f,t)=>(E(g,typeof f!="symbol"?f+"":f,t),t);import o from"../utils.js";const W=["x","y","xy"];class P extends HTMLElement{constructor(){super();y(this,"props",{axis:"xy",delay:1e3,distance:1});y(this,"state",{width:0,height:0,widthFixed:0,heightFixed:0,scrollWidth:0,scrollHeight:0,xBar:0,yBar:0,thumbX:0,thumbY:0});Object.defineProperty(this,"root",{value:this.attachShadow({mode:"open"}),writable:!0,enumerable:!1,configurable:!0}),this.root.innerHTML='<style>*{box-sizing:border-box;margin:0;padding:0}::before,::after{box-sizing:border-box}:host{position:relative;display:block;width:100%;height:100%}:host .container{overflow:hidden;position:relative;width:100%;height:100%}:host .wrapper{overflow:auto;scrollbar-width:none;width:100%;height:100%}:host .wrapper::-webkit-scrollbar{display:none}.is-horizontal,.is-vertical{display:none;visibility:hidden;position:absolute;display:flex;justify-content:flex-end;z-index:10240;opacity:0;user-select:none;transition:opacity .3s linear,visibility .3s linear}.is-horizontal .thumb,.is-vertical .thumb{display:block;border-radius:5px;background:rgba(44,47,53,.25);cursor:default;transition:width .1s linear,height .1s linear}.is-horizontal .thumb:hover,.is-vertical .thumb:hover{background:rgba(44,47,53,.5)}.is-horizontal{flex-direction:column;left:0;bottom:0;width:100%;height:10px}.is-horizontal .thumb{width:0;height:6px}.is-horizontal .thumb:hover{height:10px}.is-vertical{top:0;right:0;width:10px;height:100%}.is-vertical .thumb{width:6px;height:0}.is-vertical .thumb:hover{width:10px}:host(:hover) .is-horizontal,:host(:hover) .is-vertical{visibility:visible;opacity:1}:host([axis=x]) .wrapper{overflow-y:hidden}:host([axis=x]) .is-vertical{display:none}:host([axis=y]) .wrapper{overflow-x:hidden}:host([axis=y]) .is-horizontal{display:none}:host([disabled]) .wrapper{overflow:hidden}:host([disabled]) .is-vertical,:host([disabled]) .is-horizontal{display:none}</style> <div class="container"> <div class="wrapper"> <div class="content"><slot /></div> </div> </div> <div class="is-horizontal"><span class="thumb"></span></div> <div class="is-vertical"><span class="thumb"></span></div> ',this.__WRAPPER__=this.root.children[1].children[0],this.__CONTENT__=this.__WRAPPER__.firstElementChild,this.__X__=this.root.children[2].children[0],this.__Y__=this.root.children[3].children[0],this.__last__=0}static get observedAttributes(){return["axis","delay","distance"]}get scrollTop(){return this.__WRAPPER__.scrollTop}set scrollTop(t){t=+t,t===t&&(this.__WRAPPER__.scrollTop=t)}get scrollLeft(){return this.__WRAPPER__.scrollLeft}set scrollLeft(t){t=+t,t===t&&(this.__WRAPPER__.scrollLeft=t)}get scrollHeight(){return this.__WRAPPER__.scrollHeight}get scrollWidth(){return this.__WRAPPER__.scrollWidth}_fetchScrollX(t){var{scrollWidth:s,width:i,xBar:r}=this.state;return t<0?t=0:t>i-r&&(t=i-r),this.__WRAPPER__.scrollLeft=(s-i)*(t/(i-r)),this.__X__.style.transform=`translateX(${t}px)`,t}_fetchScrollY(t){var{scrollHeight:s,height:i,yBar:r}=this.state;return t<0?t=0:t>i-r&&(t=i-r),this.__WRAPPER__.scrollTop=(s-i)*(t/(i-r)),this.__Y__.style.transform=`translateY(${t}px)`,t}_fireReachEnd(t="reach-bottom"){var{delay:s}=this.props,{scrollHeight:i,height:r}=this.state,m=this.__WRAPPER__.scrollTop,v=Date.now();if(v-this.__last__>s){if(t==="reach-bottom"){if(r+m<i)return}else if(m>0)return;this.__last__=v,this.dispatchEvent(new CustomEvent(t))}}connectedCallback(){this._initFn=a=>{let h=this.offsetWidth,l=this.offsetHeight,b=this.__WRAPPER__.clientWidth,R=this.__WRAPPER__.clientHeight,d=this.__WRAPPER__.scrollWidth,x=this.__WRAPPER__.scrollHeight,c=50,_=50,{widthFixed:n,heightFixed:p}=this.state,u=!1,e="";n>0?(u=x===R,n=u?0:n):x>R&&(u=!0,n=h+(h-b)),p>0?(u=d===b,p=u?0:p):d>b&&(u=!0,p=l+(l-R)),this.state.widthFixed=n,this.state.heightFixed=p,u&&(n>0&&(e+=`width:${n}px;`),p>0&&(e+=`height:${p}px;`),this.__WRAPPER__.style.cssText=e,d=this.__WRAPPER__.scrollWidth,x=this.__WRAPPER__.scrollHeight),this.__WRAPPER__.parentNode.scrollTop=0,c=l*(l/x)>>0,_=h*(h/d)>>0,c<50&&(c=50),_<50&&(_=50),_>=h&&(_=0),c>=l&&(c=0),this.state.height=l,this.state.width=h,this.state.scrollHeight=x,this.state.scrollWidth=d,this.state.yBar=c,this.state.xBar=_,this.__X__.style.width=_+"px",this.__Y__.style.height=c+"px"},this._scrollFn=o.catch(this.__WRAPPER__,"scroll",a=>{if(!this._active){var{axis:h}=this.props,{xBar:l,yBar:b,thumbX:R,thumbY:d,scrollHeight:x,scrollWidth:c,width:_,height:n}=this.state,p=this.__WRAPPER__.scrollTop,u=this.__WRAPPER__.scrollLeft;if(!(l===0&&b===0)){if((h==="y"||h==="xy")&&b){let e=p/(x-n)*(n-b);e=e>>0,e!==d&&(this.state.thumbY=e,this.__Y__.style.transform=`translateY(${e}px)`,Math.abs(e-d)>this.props.distance&&this._fireReachEnd(e>d?"reach-bottom":"reach-top"))}if((h==="x"||h==="xy")&&l){let e=u/(c-_)*(_-l);e=e>>0,e!==R&&(this.state.thumbX=e,this.__X__.style.transform=`translateX(${e}px)`)}this.dispatchEvent(new CustomEvent("scroll"))}}});let t,s,i,r,m=a=>{let{thumbY:h,thumbX:l}=this.state;t!==void 0&&(i=this._fetchScrollX(l+a.pageX-t)),s!==void 0&&(r=this._fetchScrollY(h+a.pageY-s))},v=a=>{Math.abs(a.pageY-s)>this.props.distance&&this._fireReachEnd(a.pageY>s?"reach-bottom":"reach-top"),t=void 0,s=void 0,this.state.thumbX=i||0,this.state.thumbY=r||0,delete this._active,o.unbind(document,"mousemove",m),o.unbind(document,"mouseup",v)};this._yBarFn=o.bind(this.__Y__,"mousedown",a=>{s=a.pageY,this._active=!0,o.bind(document,"mousemove",m),o.bind(document,"mouseup",v)}),this._xBarFn=o.bind(this.__X__,"mousedown",a=>{t=a.pageX,this._active=!0,o.bind(document,"mousemove",m),o.bind(document,"mouseup",v)}),this.__observer=new ResizeObserver(this._initFn),this.__observer.observe(this.__CONTENT__)}disconnectedCallback(){this.__observer.disconnect(),o.unbind(this.__X__,"mousedown",this._xBarFn),o.unbind(this.__Y__,"mousedown",this._yBarFn),o.unbind(this.__WRAPPER__,"scroll",this._scrollFn)}attributeChangedCallback(t,s,i){if(s!==i)switch(t){case"axis":i?W.includes(i)?this.props.axis=i:this.removeAttribute(t):this.props.axis="xy";break;case"delay":this.props.delay=+i||1e3;break;case"distance":this.props.distance=+i||1;break}}}customElements.get("wc-scroll")||customElements.define("wc-scroll",P);export{P as default};
|
|
|