jiku-ui/lib/scrollbar.js

A Component Library for Vue.js.

module.exports=function(t){var e={};function r(i){if(e[i])return e[i].exports;var s=e[i]={i:i,l:!1,exports:{}};return t[i].call(s.exports,s,s.exports,r),s.l=!0,s.exports}return r.m=t,r.c=e,r.d=function(t,e,i){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(r.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var s in t)r.d(i,s,function(e){return t[e]}.bind(null,s));return i},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=148)}({148:function(t,e,r){"use strict";r.r(e);var i=r(15),s=r(40),n=r.n(s),o=r(3),a=r(2),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 c(t){var e=t.move,r=t.size,i=t.bar,s={},n="translate"+i.axis+"("+e+"%)";return s[i.size]=r,s.transform=n,s.msTransform=n,s.webkitTransform=n,s}var u={name:"Bar",props:{vertical:Boolean,size:String,move:Number},computed:{bar:function(){return l[this.vertical?"vertical":"horizontal"]},wrap:function(){return this.$parent.wrap}},render:function(t){var e=this.size,r=this.move,i=this.bar;return t("div",{class:["hn-scrollbar__bar","is-"+i.key],on:{mousedown:this.clickTrackHandler}},[t("div",{ref:"thumb",class:"hn-scrollbar__thumb",on:{mousedown:this.clickThumbHandler},style:c({size:e,move:r,bar:i})})])},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.$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(a.on)(document,"mousemove",this.mouseMoveDocumentHandler),Object(a.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 r=100*(-1*(this.$el.getBoundingClientRect()[this.bar.direction]-t[this.bar.client])-(this.$refs.thumb[this.bar.offset]-e))/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=r*this.wrap[this.bar.scrollSize]/100}}},mouseUpDocumentHandler:function(t){this.cursorDown=!1,this[this.bar.axis]=0,Object(a.off)(document,"mousemove",this.mouseMoveDocumentHandler),document.onselectstart=null}},destroyed:function(){Object(a.off)(document,"mouseup",this.mouseUpDocumentHandler)}},h={name:"HnScrollbar",components:{Bar:u},props:{native:Boolean,wrapStyle:{},wrapClass:{},viewClass:{},viewStyle:{},noresize:Boolean,tag:{type:String,default:"div"}},data:function(){return{sizeWidth:"0",sizeHeight:"0",moveX:0,moveY:0}},computed:{wrap:function(){return this.$refs.wrap}},render:function(t){var e=n()(),r=this.wrapStyle;if(e){var i="-"+e+"px",s="margin-bottom: "+i+"; margin-right: "+i+";";Array.isArray(this.wrapStyle)?(r=Object(o.toObject)(this.wrapStyle)).marginRight=r.marginBottom=i:"string"==typeof this.wrapStyle?r+=s:r=s}var a=t(this.tag,{class:["hn-scrollbar__view",this.viewClass],style:this.viewStyle,ref:"resize"},this.$slots.default),l=t("div",{ref:"wrap",style:r,on:{scroll:this.handleScroll},class:[this.wrapClass,"hn-scrollbar__wrap",e?"":"hn-scrollbar__wrap--hidden-default"]},[[a]]),c=void 0;return c=this.native?[t("div",{ref:"wrap",class:[this.wrapClass,"hn-scrollbar__wrap"],style:r},[[a]])]:[l,t(u,{attrs:{move:this.moveX,size:this.sizeWidth}}),t(u,{attrs:{vertical:!0,move:this.moveY,size:this.sizeHeight}})],t("div",{class:"hn-scrollbar"},c)},methods:{handleScroll:function(){var t=this.wrap;this.moveY=100*t.scrollTop/t.clientHeight,this.moveX=100*t.scrollLeft/t.clientWidth},update:function(){var t,e,r=this.wrap;r&&(t=100*r.clientHeight/r.scrollHeight,e=100*r.clientWidth/r.scrollWidth,this.sizeHeight=t<100?t+"%":"",this.sizeWidth=e<100?e+"%":"")}},mounted:function(){this.native||(this.$nextTick(this.update),!this.noresize&&Object(i.addResizeListener)(this.$refs.resize,this.update))},beforeDestroy:function(){this.native||!this.noresize&&Object(i.removeResizeListener)(this.$refs.resize,this.update)},install:function(t){t.component(h.name,h)}};e.default=h},15:function(t,e){t.exports=require("jiku-ui/lib/utils/resize-event")},2:function(t,e){t.exports=require("jiku-ui/lib/utils/dom")},3:function(t,e){t.exports=require("jiku-ui/lib/utils/util")},40:function(t,e){t.exports=require("jiku-ui/lib/utils/scrollbar-width")}}).default;