element-gui/lib/scrollbar.js

A Component Library for Vue.js.

module.exports=function(t){var e={};function i(r){if(e[r])return e[r].exports;var s=e[r]={i:r,l:!1,exports:{}};return t[r].call(s.exports,s,s.exports,i),s.l=!0,s.exports}return i.m=t,i.c=e,i.d=function(t,e,r){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var s in t)i.d(r,s,function(e){return t[e]}.bind(null,s));return r},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="/dist/",i(i.s=149)}({149:function(t,e,i){"use strict";i.r(e);var r=i(15),s=i(39),o=i.n(s),a=i(2),n=i(3),l={vertical:{offset:"offsetHeight",scroll:"scrollTop",scrollSize:"scrollHeight",size:"height",key:"vertical",axis:"Y",client:"clientY",direction:"top"},horizontal:{offset:"offsetWidth",scroll:"scrollLeft",scrollSize:"scrollWidth",size:"width",key:"horizontal",axis:"X",client:"clientX",direction:"left"}};function h(t){var e=t.move,i=t.size,r=t.bar,s={},o="translate"+r.axis+"("+e+"%)";return s[r.size]=i,s.transform=o,s.msTransform=o,s.webkitTransform=o,s}var c={name:"Bar",props:{vertical:Boolean,size:[String,Number],move:Number,ratio:Number},computed:{bar:function(){return l[this.vertical?"vertical":"horizontal"]},wrap:function(){return this.$parent.wrap},offsetRatio:function(){return Math.pow(this.$refs.instance[this.bar.offset],2)/this.wrap[this.bar.scrollSize]/this.ratio/this.$refs.thumb[this.bar.offset]}},render:function(t){var e=this.size,i=this.move,r=this.bar;return t("div",{ref:"instance",class:["el-scrollbar__bar","is-"+r.key],on:{mousedown:this.clickTrackHandler}},[t("div",{ref:"thumb",class:"el-scrollbar__thumb",on:{mousedown:this.clickThumbHandler},style:h({size:e,move:i,bar:r})})])},methods:{clickThumbHandler:function(t){t.ctrlKey||2===t.button||(this.startDrag(t),this[this.bar.axis]=t.currentTarget[this.bar.offset]-(t[this.bar.client]-t.currentTarget.getBoundingClientRect()[this.bar.direction]))},clickTrackHandler:function(t){var e=100*(Math.abs(t.target.getBoundingClientRect()[this.bar.direction]-t[this.bar.client])-this.$refs.thumb[this.bar.offset]/2)*this.offsetRatio/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=e*this.wrap[this.bar.scrollSize]/100},startDrag:function(t){t.stopImmediatePropagation(),this.cursorDown=!0,Object(n.on)(document,"mousemove",this.mouseMoveDocumentHandler),Object(n.on)(document,"mouseup",this.mouseUpDocumentHandler),document.onselectstart=function(){return!1}},mouseMoveDocumentHandler:function(t){if(!1!==this.cursorDown){var e=this[this.bar.axis];if(e){var i=100*(-1*(this.$el.getBoundingClientRect()[this.bar.direction]-t[this.bar.client])-(this.$refs.thumb[this.bar.offset]-e))*this.offsetRatio/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=i*this.wrap[this.bar.scrollSize]/100}}},mouseUpDocumentHandler:function(t){this.cursorDown=!1,this[this.bar.axis]=0,Object(n.off)(document,"mousemove",this.mouseMoveDocumentHandler),document.onselectstart=null}},destroyed:function(){Object(n.off)(document,"mouseup",this.mouseUpDocumentHandler)}},u={name:"ElScrollbar",components:{Bar:c},props:{height:String,maxHeight:String,native:Boolean,wrapStyle:{},wrapClass:{},viewClass:{},viewStyle:{},noresize:Boolean,scrollBehavior:{type:String,default:"smooth"},tag:{type:String,default:"div"},always:Boolean,minSize:{type:Number,default:20}},data:function(){return{gap:0,sizeWidth:0,sizeHeight:0,moveX:0,moveY:0,ratioX:0,ratioY:0}},computed:{wrap:function(){return this.$refs.wrap},view:function(){return this.$refs.resize}},render:function(t){var e=this.gap,i=this.wrapStyle;if(e){var r="-"+e+"px",s="margin-bottom: "+r+"; margin-right: "+r+";";Array.isArray(this.wrapStyle)?((i=Object(a.toObject)(this.wrapStyle)).marginRight=i.marginBottom=r,this.maxHeight&&(i.maxHeight="calc("+this.maxHeight+" - "+r+")"),this.height&&(i.height="height: calc(100% - "+r+");")):"string"==typeof this.wrapStyle?(i+=s,this.maxHeight&&(i+="max-height: calc("+this.maxHeight+" - "+r+");"),this.height&&(i+="height: calc(100% - "+r+");")):(i=s,this.maxHeight&&(i+="max-height: calc("+this.maxHeight+" - "+r+");"),this.height&&(i+="height: calc(100% - "+r+");"))}var o=t(this.tag,{class:["el-scrollbar__view",this.viewClass],style:this.viewStyle,ref:"resize"},this.$slots.default),n=t("div",{ref:"wrap",style:i,on:{scroll:this.handleScroll},class:[this.wrapClass,"el-scrollbar__wrap",e?"":"el-scrollbar__wrap--hidden-default"]},[[o]]),l=void 0;return l=this.native?[t("div",{ref:"wrap",class:[this.wrapClass,"el-scrollbar__wrap"],style:i},[[o]])]:[n,t(c,{attrs:{move:this.moveX,size:this.sizeWidth,ratio:this.ratioX}}),t(c,{attrs:{vertical:!0,move:this.moveY,size:this.sizeHeight,ratio:this.ratioY}})],t("div",{class:["el-scrollbar",this.always?"is-always":""],style:{height:this.height?this.height:""}},l)},methods:{handleScroll:function(t){var e=this.gap+4,i=this.wrap,r=i.offsetHeight-e,s=i.offsetWidth-e;this.moveY=100*i.scrollTop/r*this.ratioY,this.moveX=100*i.scrollLeft/s*this.ratioX,this.$emit("doScroll",{moveY:this.moveY,moveX:this.moveX,event:t})},setScrollTop:function(t){this.wrap.scrollTo({top:t,behavior:this.scrollBehavior})},setScrollLeft:function(t){this.wrap.scrollTo({left:t,behavior:this.scrollBehavior})},setScrollTo:function(t,e){this.wrap.scrollTo({top:t,left:e,behavior:this.scrollBehavior})},update:function(){var t=this.gap+4,e=this.wrap;if(e){var i=e.offsetHeight-t,r=e.offsetWidth-t,s=Math.pow(i,2)/e.scrollHeight,o=Math.pow(r,2)/e.scrollWidth,a=Math.max(s,this.minSize),n=Math.max(o,this.minSize);this.ratioY=s/(i-s)/(a/(i-a)),this.ratioX=o/(r-o)/(n/(r-n)),this.sizeHeight=a+t-4<i?a+"px":"0px",this.sizeWidth=n+t-4<r?n+"px":"0px"}}},mounted:function(){this.native||(this.gap=o()(),this.$nextTick(this.update),this.noresize||(Object(r.addResizeListener)(this.$refs.resize,this.update),Object(r.addResizeListener)(this.$refs.wrap,this.update)))},beforeDestroy:function(){this.native||this.noresize||(Object(r.removeResizeListener)(this.$refs.resize,this.update),Object(r.removeResizeListener)(this.$refs.wrap,this.update))},install:function(t){t.component(u.name,u)}};e.default=u},15:function(t,e){t.exports=require("element-gui/lib/utils/resize-event")},2:function(t,e){t.exports=require("element-gui/lib/utils/util")},3:function(t,e){t.exports=require("element-gui/lib/utils/dom")},39:function(t,e){t.exports=require("element-gui/lib/utils/scrollbar-width")}});