dumogu-dropdown-menu/dist/dumogu-scrollbar.cjs.js

A simple custom scrollbar plugin

/*!
 * dumogu-dropdown-menu v0.0.3
 * Copyright 2025 wuzhanggui https://github.com/wurencaideli
 * Licensed under MIT
 */
"use strict";class t{isMounted=!0;isDestroyed=!1;constructor(){}destroy(){this.isDestroyed=!0}mount(){this.isMounted=!0}unmount(){this.isMounted=!1}}class e extends t{targetEl;railEl;railContainerEl;thumbEl;targetIsWidow=!1;isX__=!0;keepShow__=!1;stopClickPropagation=!1;isTransitioning=!1;isDragging__=!1;isHover__=!1;isTargetHover__=!1;proportion__=0;startX=0;startY=0;handleMousedown_;handleMouseMove_;handleMouseUp_;handleClick_;handleScroll_;handleMouseEnter_;handleMouseLeave_;handleTargetMouseEnter_;handleTargetMouseLeave_;constructor(t){super(),this.railEl=document.createElement("div"),this.railContainerEl=document.createElement("div"),this.thumbEl=document.createElement("div"),this.railEl.classList.add("dumogu-dropdown-menu-target-rail"),this.railContainerEl.classList.add("dumogu-dropdown-menu-target-rail-container"),this.thumbEl.classList.add("dumogu-dropdown-menu-target-thumb"),this.railEl.classList.add("hidden"),this.railEl.appendChild(this.railContainerEl),this.railContainerEl.appendChild(this.thumbEl),this.stopClickPropagation=t.stopClickPropagation,this.isX=t.isX,this.keepShow=t.keepShow}bind(t){this.targetEl=t,this.targetIsWidow=!t,this.removeEventListener(),this.addEventListener()}set isX(t){this.isX__=t,this.setupActionClass()}get isX(){return this.isX__}set keepShow(t){this.keepShow__=t,this.setupActionClass()}get keepShow(){return this.keepShow__}set isDragging(t){this.isDragging__=t,this.setupActionClass()}get isDragging(){return this.isDragging__}set isHover(t){this.isHover__=t,this.setupActionClass()}get isHover(){return this.isHover__}set isTargetHover(t){this.isTargetHover__=t,this.setupActionClass()}get isTargetHover(){return this.isTargetHover__}set proportion(t){this.proportion__=t,this.setupHidden(),this.setupPosition()}get proportion(){return this.proportion__}setupHidden(){const t=this.railEl;this.proportion>=1?t.classList.add("hidden"):t.classList.remove("hidden")}setupActionClass(){const t=this.railEl,e=this.railContainerEl,s=this.thumbEl;this.keepShow?t.classList.add("keep-show"):t.classList.remove("keep-show"),this.isDragging?t.classList.add("dragging"):t.classList.remove("dragging"),this.isHover?t.classList.add("hover"):t.classList.remove("hover"),this.isTargetHover?t.classList.add("target-hover"):t.classList.remove("target-hover"),this.isX?(t.classList.remove("y"),e.classList.remove("y"),s.classList.remove("y"),t.classList.add("x"),e.classList.add("x"),s.classList.add("x")):(t.classList.remove("x"),e.classList.remove("x"),s.classList.remove("x"),t.classList.add("y"),e.classList.add("y"),s.classList.add("y"))}getTargetAttributes(){const t=this.targetEl;let e=0,s=0,i=0;return this.isX?(e=this.targetIsWidow?window.innerWidth:t.clientWidth,s=this.targetIsWidow?document.documentElement.scrollWidth:t.scrollWidth,i=this.targetIsWidow?window.scrollX:t.scrollLeft):(e=this.targetIsWidow?window.innerHeight:t.clientHeight,s=this.targetIsWidow?document.documentElement.scrollHeight:t.scrollHeight,i=this.targetIsWidow?window.scrollY:t.scrollTop),{clientSize:e,scrollSize:s,scrollStart:i}}targetScrollTo(t){const e=this.targetEl;this.isX?this.targetIsWidow?window.scrollTo(t,window.scrollY):e.scrollLeft=t:this.targetIsWidow?window.scrollTo(window.scrollX,t):e.scrollTop=t}computedProportion(){if(this.isDestroyed)return;const t=this.getTargetAttributes();let e=0,s=0;e=t.clientSize/t.scrollSize,s=t.scrollStart/(t.scrollSize-t.clientSize),this.scrollProportion=Math.min(s,1),this.proportion=Math.min(e,1)}setupPosition(){const t=this.railContainerEl,e=this.thumbEl,s=this.proportion,i=this.scrollProportion,o=this.isX?t.clientWidth:t.clientHeight,r=Math.max(o*s,30),n=(o-r)*i/o*100;this.isX?(e.style.width=r+"px",e.style.left=n+"%"):(e.style.height=r+"px",e.style.top=n+"%")}handleMousedown(t){this.isDestroyed||(this.isDragging=!0,this.startX=t.x,this.startY=t.y)}handleMouseMove(t){if(this.isDestroyed)return;if(!this.isDragging)return;const e=this.getTargetAttributes(),s=this.railContainerEl,i=s.getBoundingClientRect(),o=this.thumbEl;let r=0;const n=t.x,l=t.y;if(this.isX){if(r=n-this.startX,this.startX=n,0==e.scrollStart&&n<i.x)return;if(e.scrollStart+e.clientSize>=e.scrollSize&&n>=i.x+i.width)return;const t=r/(s.clientWidth-o.offsetWidth)*(e.scrollSize-e.clientSize);this.targetScrollTo(e.scrollStart+t)}else{if(r=l-this.startY,this.startY=l,0==e.scrollStart&&l<i.y)return;if(e.scrollStart+e.clientSize>=e.scrollSize&&l>=i.y+i.height)return;const t=r/(s.clientHeight-o.offsetHeight)*(e.scrollSize-e.clientSize);this.targetScrollTo(e.scrollStart+t)}}handleMouseUp(){this.isDestroyed||(this.isDragging=!1)}handleScroll(){this.isDestroyed||this.computedProportion()}handleClick(t){this.stopClickPropagation&&t.stopPropagation();const e=this.getTargetAttributes(),s=this.thumbEl.getBoundingClientRect();let i=!1;this.isX?t.x>s.x+s.width&&(i=!0):t.y>s.y+s.width&&(i=!0),i?this.targetScrollTo(e.scrollStart+e.clientSize):this.targetScrollTo(e.scrollStart-e.clientSize)}handleMouseEnter(){this.isHover=!0,this.computedProportion()}handleMouseLeave(){this.isHover=!1,this.computedProportion()}handleTransitionStart(t){const e=this.railEl;t&&t.target===e&&(this.isTransitioning=!0,this.computedProportion())}handleTransitionEnd(t){const e=this.railEl;t&&t.target===e&&(this.isTransitioning=!1,this.computedProportion())}handleTargetMouseEnter(){this.isTargetHover=!0,this.computedProportion()}handleTargetMouseLeave(){this.isTargetHover=!1,this.computedProportion()}addEventListener(){const t=this.targetEl,e=this.railEl,s=this.thumbEl,i=this.railContainerEl,o=this;o.handleMousedown_=function(t){o.handleMousedown(t)},o.handleMouseMove_=function(t){o.handleMouseMove(t)},o.handleMouseUp_=function(t){o.handleMouseUp(t)},o.handleScroll_=function(t){o.handleScroll(t)},o.handleClick_=function(t){o.handleClick(t)},o.handleMouseEnter_=function(t){o.handleMouseEnter(t)},o.handleMouseLeave_=function(t){o.handleMouseLeave(t)},o.handleTransitionStart_=function(t){o.handleTransitionStart(t)},o.handleTransitionEnd_=function(t){o.handleTransitionEnd(t)},o.handleTargetMouseEnter_=function(t){o.handleTargetMouseEnter(t)},o.handleTargetMouseLeave_=function(t){o.handleTargetMouseLeave(t)},s.addEventListener("mousedown",o.handleMousedown_),document.addEventListener("mousemove",o.handleMouseMove_),document.addEventListener("mouseup",o.handleMouseUp_),i.addEventListener("click",o.handleClick_),this.targetIsWidow?(window.addEventListener("scroll",o.handleScroll_),document.addEventListener("mouseenter",o.handleTargetMouseEnter_),document.addEventListener("mouseleave",o.handleTargetMouseLeave_)):(t.addEventListener("scroll",o.handleScroll_),t.addEventListener("mouseenter",o.handleTargetMouseEnter_),t.addEventListener("mouseleave",o.handleTargetMouseLeave_)),e.addEventListener("mouseenter",o.handleMouseEnter_),e.addEventListener("mouseleave",o.handleMouseLeave_),e.addEventListener("transitionstart",o.handleTransitionStart_),e.addEventListener("transitionend",o.handleTransitionEnd_)}removeEventListener(){const t=this.targetEl,e=this.railEl,s=this.thumbEl,i=this.railContainerEl;s.removeEventListener("mousedown",this.handleMousedown_),document.removeEventListener("mousemove",this.handleMouseMove_),document.removeEventListener("mouseup",this.handleMouseUp_),i.removeEventListener("click",this.handleClick_),this.targetIsWidow?(window.removeEventListener("scroll",this.handleScroll_),document.removeEventListener("mouseenter",this.handleTargetMouseEnter_),document.removeEventListener("mouseleave",this.handleTargetMouseLeave_)):(t.removeEventListener("scroll",this.handleScroll_),t.removeEventListener("mouseenter",this.handleTargetMouseEnter_),t.removeEventListener("mouseleave",this.handleTargetMouseLeave_)),e.removeEventListener("mouseenter",this.handleMouseEnter_),e.removeEventListener("mouseleave",this.handleMouseLeave_),e.removeEventListener("transitionstart",this.handleTransitionStart_),e.removeEventListener("transitionend",this.handleTransitionEnd_)}destroy(){this.unmount(),this.removeEventListener(),this.railEl=void 0,this.railContainerEl=void 0,this.thumbEl=void 0,this.isDestroyed=!0}}exports.DumoguScrollbar=class extends t{targetEl;mountContainerEl;mountedToBody=!0;targetIsWidow=!0;scrollbarEl;scrollbarTargetEl;railX;railY;constructor(t={}){super(),this.scrollbarEl=document.createElement("div"),this.scrollbarTargetEl=document.createElement("div"),this.scrollbarEl.classList.add("dumogu-dropdown-menu"),this.scrollbarTargetEl.classList.add("dumogu-dropdown-menu-target"),this.railX=new e({isX:!0,keepShow:t.keepShow,stopClickPropagation:t.stopClickPropagation}),this.railY=new e({isX:!1,keepShow:t.keepShow,stopClickPropagation:t.stopClickPropagation}),this.scrollbarTargetEl.appendChild(this.railX.railEl),this.scrollbarTargetEl.appendChild(this.railY.railEl),this.scrollbarEl.appendChild(this.scrollbarTargetEl)}bind(t){this.targetEl=t,this.targetIsWidow=!t,this.railX.bind(t),this.railY.bind(t)}mount(t){super.mount(),this.mountContainerEl=t,t?(t.appendChild(this.scrollbarEl),this.mountedToBody=!1):(document.body.appendChild(this.scrollbarEl),this.mountedToBody=!0),this.setupActionClass()}unmount(){super.unmount(),removeElement(this.scrollbarEl)}setupActionClass(){const t=this.scrollbarEl;this.mountedToBody?t.classList.add("mounted-to-body"):t.classList.remove("mounted-to-body"),this.targetIsWidow?t.classList.add("is-window"):t.classList.remove("is-window")}update(){this.isDestroyed||(this.computedPosition(),this.railX.isDragging||this.railX.computedProportion(),this.railY.isDragging||this.railY.computedProportion())}computedPosition(){const t=this.targetEl,e=this.mountContainerEl,s=this.scrollbarEl,i=this.scrollbarTargetEl;if(this.targetIsWidow)return i.style.width="100%",void(i.style.height="100%");if(this.mountedToBody){const e=t.getBoundingClientRect();return i.style.width=e.width+"px",i.style.height=e.height+"px",i.style.top=e.y+"px",void(i.style.left=e.x+"px")}const o=s.getBoundingClientRect(),r=t.getBoundingClientRect(),n=e.getBoundingClientRect();i.style.width=r.width+"px",i.style.height=r.height+"px",i.style.top=r.y-n.y-(o.y-n.y)+"px",i.style.left=r.x-n.x-(o.x-n.x)+"px"}destroy(){super.destroy(),this.railX.destroy(),this.railY.destroy(),this.railX=void 0,this.railY=void 0,this.unmount(),this.targetEl=void 0,this.mountContainerEl=void 0,this.scrollbarEl=void 0,this.scrollbarTargetEl=void 0}},exports.Rail=e;
//# sourceMappingURL=dumogu-dropdown-menu.cjs.js.map