primevue/scrollpanel/scrollpanel.min.js

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

this.primevue=this.primevue||{},this.primevue.scrollpanel=function(e,t,o){"use strict";function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n={name:"ScrollPanel",extends:s(e).default,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.UniqueComponentId(),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),o=getComputedStyle(this.$refs.xBar),s=t.DomHandler.getHeight(this.$el)-parseInt(o.height,10);"none"!==e["max-height"]&&0===s&&(this.$refs.content.offsetHeight+parseInt(o.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,o=this.$refs.content.clientWidth,s=-1*(this.$el.clientHeight-this.$refs.xBar.clientHeight);this.scrollXRatio=o/e;let n=this.$refs.content.scrollHeight,r=this.$refs.content.clientHeight,i=-1*(this.$el.clientWidth-this.$refs.yBar.clientWidth);this.scrollYRatio=r/n,this.frame=this.requestAnimationFrame((()=>{this.scrollXRatio>=1?t.DomHandler.addClass(this.$refs.xBar,"p-scrollpanel-hidden"):(t.DomHandler.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:"+s+"px;"),this.scrollYRatio>=1?t.DomHandler.addClass(this.$refs.yBar,"p-scrollpanel-hidden"):(t.DomHandler.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/n*100+"% - "+this.$refs.xBar.clientHeight+"px);right:"+i+"px;")}))},onYBarMouseDown(e){this.isYBarClicked=!0,this.$refs.yBar.focus(),this.lastPageY=e.pageY,t.DomHandler.addClass(this.$refs.yBar,"p-scrollpanel-grabbed"),t.DomHandler.addClass(document.body,"p-scrollpanel-grabbed"),this.bindDocumentMouseListeners(),e.preventDefault()},onXBarMouseDown(e){this.isXBarClicked=!0,this.$refs.xBar.focus(),this.lastPageX=e.pageX,t.DomHandler.addClass(this.$refs.xBar,"p-scrollpanel-grabbed"),t.DomHandler.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(){t.DomHandler.removeClass(this.$refs.yBar,"p-scrollpanel-grabbed"),t.DomHandler.removeClass(this.$refs.xBar,"p-scrollpanel-grabbed"),t.DomHandler.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 r=["aria-valuenow"],i=["aria-valuenow"];return function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var s=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===o&&s.firstChild?s.insertBefore(n,s.firstChild):s.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.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"),n.render=function(e,t,s,n,l,a){return o.openBlock(),o.createElementBlock("div",o.mergeProps({class:"p-scrollpanel p-component"},e.ptm("root")),[o.createElementVNode("div",o.mergeProps({class:"p-scrollpanel-wrapper"},e.ptm("wrapper")),[o.createElementVNode("div",o.mergeProps({ref:"content",class:"p-scrollpanel-content",onScroll:t[0]||(t[0]=(...e)=>a.onScroll&&a.onScroll(...e)),onMouseenter:t[1]||(t[1]=(...e)=>a.moveBar&&a.moveBar(...e))},e.ptm("content")),[o.renderSlot(e.$slots,"default")],16)],16),o.createElementVNode("div",o.mergeProps({ref:"xBar",class:"p-scrollpanel-bar p-scrollpanel-bar-x",tabindex:"0",role:"scrollbar","aria-orientation":"horizontal","aria-valuenow":l.lastScrollLeft,onMousedown:t[2]||(t[2]=(...e)=>a.onXBarMouseDown&&a.onXBarMouseDown(...e)),onKeydown:t[3]||(t[3]=e=>a.onKeyDown(e)),onKeyup:t[4]||(t[4]=(...e)=>a.onKeyUp&&a.onKeyUp(...e)),onFocus:t[5]||(t[5]=(...e)=>a.onFocus&&a.onFocus(...e)),onBlur:t[6]||(t[6]=(...e)=>a.onBlur&&a.onBlur(...e))},e.ptm("barx")),null,16,r),o.createElementVNode("div",o.mergeProps({ref:"yBar",class:"p-scrollpanel-bar p-scrollpanel-bar-y",tabindex:"0",role:"scrollbar","aria-orientation":"vertical","aria-valuenow":l.lastScrollTop,onMousedown:t[7]||(t[7]=(...e)=>a.onYBarMouseDown&&a.onYBarMouseDown(...e)),onKeydown:t[8]||(t[8]=e=>a.onKeyDown(e)),onKeyup:t[9]||(t[9]=(...e)=>a.onKeyUp&&a.onKeyUp(...e)),onFocus:t[10]||(t[10]=(...e)=>a.onFocus&&a.onFocus(...e))},e.ptm("bary")),null,16,i)],16)},n}(primevue.basecomponent,primevue.utils,Vue);