primevue/scrollpanel/scrollpanel.esm.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [![Discord Chat](https://img.shields.io/discord/55794023

import e from"primevue/basecomponent";import{UniqueComponentId as t,DomHandler as s}from"primevue/utils";import{openBlock as o,createElementBlock as i,mergeProps as n,createElementVNode as r,renderSlot as l}from"vue";var a={name:"ScrollPanel",extends:e,props:{step:{type:Number,default:5}},initialized:!1,documentResizeListener:null,documentMouseMoveListener:null,documentMouseUpListener:null,frame:null,scrollXRatio:null,scrollYRatio:null,isXBarClicked:!1,isYBarClicked:!1,lastPageX:null,lastPageY:null,timer:null,outsideClickListener:null,data:()=>({id:t(),orientation:"vertical",lastScrollTop:0,lastScrollLeft:0}),mounted(){this.$el.offsetParent&&this.initialize()},updated(){!this.initialized&&this.$el.offsetParent&&this.initialize()},beforeUnmount(){this.unbindDocumentResizeListener(),this.frame&&window.cancelAnimationFrame(this.frame)},methods:{initialize(){this.moveBar(),this.bindDocumentResizeListener(),this.calculateContainerHeight()},calculateContainerHeight(){let e=getComputedStyle(this.$el),t=getComputedStyle(this.$refs.xBar),o=s.getHeight(this.$el)-parseInt(t.height,10);"none"!==e["max-height"]&&0===o&&(this.$refs.content.offsetHeight+parseInt(t.height,10)>parseInt(e["max-height"],10)?this.$el.style.height=e["max-height"]:this.$el.style.height=this.$refs.content.offsetHeight+parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)+parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth)+"px")},moveBar(){let e=this.$refs.content.scrollWidth,t=this.$refs.content.clientWidth,o=-1*(this.$el.clientHeight-this.$refs.xBar.clientHeight);this.scrollXRatio=t/e;let i=this.$refs.content.scrollHeight,n=this.$refs.content.clientHeight,r=-1*(this.$el.clientWidth-this.$refs.yBar.clientWidth);this.scrollYRatio=n/i,this.frame=this.requestAnimationFrame((()=>{this.scrollXRatio>=1?s.addClass(this.$refs.xBar,"p-scrollpanel-hidden"):(s.removeClass(this.$refs.xBar,"p-scrollpanel-hidden"),this.$refs.xBar.style.cssText="width:"+Math.max(100*this.scrollXRatio,10)+"%; left:"+this.$refs.content.scrollLeft/e*100+"%;bottom:"+o+"px;"),this.scrollYRatio>=1?s.addClass(this.$refs.yBar,"p-scrollpanel-hidden"):(s.removeClass(this.$refs.yBar,"p-scrollpanel-hidden"),this.$refs.yBar.style.cssText="height:"+Math.max(100*this.scrollYRatio,10)+"%; top: calc("+this.$refs.content.scrollTop/i*100+"% - "+this.$refs.xBar.clientHeight+"px);right:"+r+"px;")}))},onYBarMouseDown(e){this.isYBarClicked=!0,this.$refs.yBar.focus(),this.lastPageY=e.pageY,s.addClass(this.$refs.yBar,"p-scrollpanel-grabbed"),s.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),e.preventDefault()},onXBarMouseDown(e){this.isXBarClicked=!0,this.$refs.xBar.focus(),this.lastPageX=e.pageX,s.addClass(this.$refs.xBar,"p-scrollpanel-grabbed"),s.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),e.preventDefault()},onScroll(e){this.lastScrollLeft!==e.target.scrollLeft?(this.lastScrollLeft=e.target.scrollLeft,this.orientation="horizontal"):this.lastScrollTop!==e.target.scrollTop&&(this.lastScrollTop=e.target.scrollTop,this.orientation="vertical"),this.moveBar()},onKeyDown(e){if("vertical"===this.orientation)switch(e.code){case"ArrowDown":this.setTimer("scrollTop",this.step),e.preventDefault();break;case"ArrowUp":this.setTimer("scrollTop",-1*this.step),e.preventDefault();break;case"ArrowLeft":case"ArrowRight":e.preventDefault()}else if("horizontal"===this.orientation)switch(e.code){case"ArrowRight":this.setTimer("scrollLeft",this.step),e.preventDefault();break;case"ArrowLeft":this.setTimer("scrollLeft",-1*this.step),e.preventDefault();break;case"ArrowDown":case"ArrowUp":e.preventDefault()}},onKeyUp(){this.clearTimer()},repeat(e,t){this.$refs.content[e]+=t,this.moveBar()},setTimer(e,t){this.clearTimer(),this.timer=setTimeout((()=>{this.repeat(e,t)}),40)},clearTimer(){this.timer&&clearTimeout(this.timer)},onDocumentMouseMove(e){this.isXBarClicked?this.onMouseMoveForXBar(e):(this.isYBarClicked||this.onMouseMoveForXBar(e),this.onMouseMoveForYBar(e))},onMouseMoveForXBar(e){let t=e.pageX-this.lastPageX;this.lastPageX=e.pageX,this.frame=this.requestAnimationFrame((()=>{this.$refs.content.scrollLeft+=t/this.scrollXRatio}))},onMouseMoveForYBar(e){let t=e.pageY-this.lastPageY;this.lastPageY=e.pageY,this.frame=this.requestAnimationFrame((()=>{this.$refs.content.scrollTop+=t/this.scrollYRatio}))},onFocus(e){this.$refs.xBar.isSameNode(e.target)?this.orientation="horizontal":this.$refs.yBar.isSameNode(e.target)&&(this.orientation="vertical")},onBlur(){"horizontal"===this.orientation&&(this.orientation="vertical")},onDocumentMouseUp(){s.removeClass(this.$refs.yBar,"p-scrollpanel-grabbed"),s.removeClass(this.$refs.xBar,"p-scrollpanel-grabbed"),s.removeClass(document.body,"p-scrollpanel-grabbed"),this.unbindDocumentMouseListeners(),this.isXBarClicked=!1,this.isYBarClicked=!1},requestAnimationFrame(e){return(window.requestAnimationFrame||this.timeoutFrame)(e)},refresh(){this.moveBar()},scrollTop(e){let t=this.$refs.content.scrollHeight-this.$refs.content.clientHeight;e=e>t?t:e>0?e:0,this.$refs.content.scrollTop=e},timeoutFrame(e){setTimeout(e,0)},bindDocumentMouseListeners(){this.documentMouseMoveListener||(this.documentMouseMoveListener=e=>{this.onDocumentMouseMove(e)},document.addEventListener("mousemove",this.documentMouseMoveListener)),this.documentMouseUpListener||(this.documentMouseUpListener=e=>{this.onDocumentMouseUp(e)},document.addEventListener("mouseup",this.documentMouseUpListener))},unbindDocumentMouseListeners(){this.documentMouseMoveListener&&(document.removeEventListener("mousemove",this.documentMouseMoveListener),this.documentMouseMoveListener=null),this.documentMouseUpListener&&(document.removeEventListener("mouseup",this.documentMouseUpListener),this.documentMouseUpListener=null)},bindDocumentResizeListener(){this.documentResizeListener||(this.documentResizeListener=()=>{this.moveBar()},window.addEventListener("resize",this.documentResizeListener))},unbindDocumentResizeListener(){this.documentResizeListener&&(window.removeEventListener("resize",this.documentResizeListener),this.documentResizeListener=null)}}};const c=["aria-valuenow"],h=["aria-valuenow"];!function(e,t){void 0===t&&(t={});var s=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===s&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-scrollpanel-wrapper {\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n    position: relative;\n    z-index: 1;\n    float: left;\n}\n.p-scrollpanel-content {\n    height: calc(100% + 18px);\n    width: calc(100% + 18px);\n    padding: 0 18px 18px 0;\n    position: relative;\n    overflow: scroll;\n    box-sizing: border-box;\n    scrollbar-width: none;\n}\n.p-scrollpanel-content::-webkit-scrollbar {\n    display: none;\n}\n.p-scrollpanel-bar {\n    position: relative;\n    background: #c1c1c1;\n    border-radius: 3px;\n    z-index: 2;\n    cursor: pointer;\n    opacity: 0;\n    transition: opacity 0.25s linear;\n}\n.p-scrollpanel-bar-y {\n    width: 9px;\n    top: 0;\n}\n.p-scrollpanel-bar-x {\n    height: 9px;\n    bottom: 0;\n}\n.p-scrollpanel-hidden {\n    visibility: hidden;\n}\n.p-scrollpanel:hover .p-scrollpanel-bar,\n.p-scrollpanel:active .p-scrollpanel-bar {\n    opacity: 1;\n}\n.p-scrollpanel-grabbed {\n    user-select: none;\n}\n"),a.render=function(e,t,s,a,p,u){return o(),i("div",n({class:"p-scrollpanel p-component"},e.ptm("root")),[r("div",n({class:"p-scrollpanel-wrapper"},e.ptm("wrapper")),[r("div",n({ref:"content",class:"p-scrollpanel-content",onScroll:t[0]||(t[0]=(...e)=>u.onScroll&&u.onScroll(...e)),onMouseenter:t[1]||(t[1]=(...e)=>u.moveBar&&u.moveBar(...e))},e.ptm("content")),[l(e.$slots,"default")],16)],16),r("div",n({ref:"xBar",class:"p-scrollpanel-bar p-scrollpanel-bar-x",tabindex:"0",role:"scrollbar","aria-orientation":"horizontal","aria-valuenow":p.lastScrollLeft,onMousedown:t[2]||(t[2]=(...e)=>u.onXBarMouseDown&&u.onXBarMouseDown(...e)),onKeydown:t[3]||(t[3]=e=>u.onKeyDown(e)),onKeyup:t[4]||(t[4]=(...e)=>u.onKeyUp&&u.onKeyUp(...e)),onFocus:t[5]||(t[5]=(...e)=>u.onFocus&&u.onFocus(...e)),onBlur:t[6]||(t[6]=(...e)=>u.onBlur&&u.onBlur(...e))},e.ptm("barx")),null,16,c),r("div",n({ref:"yBar",class:"p-scrollpanel-bar p-scrollpanel-bar-y",tabindex:"0",role:"scrollbar","aria-orientation":"vertical","aria-valuenow":p.lastScrollTop,onMousedown:t[7]||(t[7]=(...e)=>u.onYBarMouseDown&&u.onYBarMouseDown(...e)),onKeydown:t[8]||(t[8]=e=>u.onKeyDown(e)),onKeyup:t[9]||(t[9]=(...e)=>u.onKeyUp&&u.onKeyUp(...e)),onFocus:t[10]||(t[10]=(...e)=>u.onFocus&&u.onFocus(...e))},e.ptm("bary")),null,16,h)],16)};export{a as default};