react-baron
Version:
React component for baron scrollbar library
1 lines • 17.4 kB
JavaScript
!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("react"));else if("function"==typeof define&&define.amd)define(["react"],e);else{var r="object"==typeof exports?e(require("react")):e(t.react);for(var i in r)("object"==typeof exports?exports:t)[i]=r[i]}}(window,function(t){return function(t){var e={};function r(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=t,r.c=e,r.d=function(t,e,i){r.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:i})},r.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},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=7)}([function(t,e,r){"use strict";var i=!1;try{var o=Object.defineProperty({},"passive",{get:function(){i=!0}});window.addEventListener("test",null,o)}catch(t){}function s(t,e){for(var r in t)t.hasOwnProperty(r)&&e(r,t[r])}t.exports.event=function(t,e,r,o){var s=e.split(" "),n="on"==o?"add":"remove";s.forEach(function(e){var o=!1;-1!=["scroll","touchstart","touchmove"].indexOf(e)&&i&&(o={passive:!0}),t[n+"EventListener"](e,r,o)})},t.exports.css=function(t,e,r){var i;if(void 0===r){if("string"==typeof e)return t.style[e];i=e}else(i={})[e]=r;s(i,function(e,r){t.style[e]=r})},t.exports.add=function(t,e){e&&t.classList.add(e)},t.exports.rm=function(t,e){e&&t.classList.remove(e)},t.exports.has=function(t,e){return!!e&&t.classList.contains(e)},t.exports.clone=function(t){var e={};return s(t||{},function(t,r){e[t]=r}),e},t.exports.qs=function(t,e){return t instanceof HTMLElement?t:(e||document).querySelector(t)},t.exports.each=s},function(e,r){e.exports=t},function(t,e,r){"use strict";var i=function(){return this||(0,eval)("this")}(),o=i&&i.window||i,s=r(0).event,n=r(0).css,l=r(0).add,c=r(0).has,a=r(0).rm,h=r(0).clone,p=r(0).qs,u=y,f=["left","top","right","bottom","width","height"],d=[],v={v:{x:"Y",pos:f[1],oppos:f[3],crossPos:f[0],crossOpPos:f[2],size:f[5],crossSize:f[4],crossMinSize:"min-"+f[4],crossMaxSize:"max-"+f[4],client:"clientHeight",crossClient:"clientWidth",scrollEdge:"scrollLeft",offset:"offsetHeight",crossOffset:"offsetWidth",offsetPos:"offsetTop",scroll:"scrollTop",scrollSize:"scrollHeight"},h:{x:"X",pos:f[0],oppos:f[2],crossPos:f[1],crossOpPos:f[3],size:f[4],crossSize:f[5],crossMinSize:"min-"+f[5],crossMaxSize:"max-"+f[5],client:"clientWidth",crossClient:"clientHeight",scrollEdge:"scrollTop",offset:"offsetWidth",crossOffset:"offsetHeight",offsetPos:"offsetLeft",scroll:"scrollLeft",scrollSize:"scrollWidth"}},g=17,m=15,b=/[\s\S]*Macintosh[\s\S]*\) Gecko[\s\S]*/.test(o.navigator&&o.navigator.userAgent);function y(t){var e,r,i=t&&t[0]||t,n="string"==typeof t||i instanceof HTMLElement?{root:t}:h(t),l={direction:"v",barOnCls:"_scrollbar",resizeDebounce:0,event:s,cssGuru:!1,impact:"scroller",position:"static"};for(var c in n=n||{},l)null==n[c]&&(n[c]=l[c]);e=this&&this instanceof o.jQuery,n._chain?r=n.root:e?n.root=r=this[0]:r=p(n.root||n.scroller);var a=z(r,n.direction),u=+a;if(n.index=u,u==u&&null!==a&&d[u])return d[u];n.root&&n.scroller?n.scroller=p(n.scroller,r):n.scroller=r,n.root=r;var f=function(t){var e=new y.prototype.constructor(t);C(e,t.event,"on"),z(e.root,t.direction,"on",d.length),d.push(e),0;return e.update(),e}(n);return f.autoUpdate&&f.autoUpdate(),f}function x(){return(new Date).getTime()}function C(t,e,r){t._eventHandlers=t._eventHandlers||[{element:t.scroller,handler:function(e){t.scroll(e)},type:"scroll"},{element:t.root,handler:function(){t.update()},type:"transitionend animationend"},{element:t.scroller,handler:function(){t.update()},type:"keyup"},{element:t.bar,handler:function(e){e.preventDefault(),t.selection(),t.drag.now=1,t.draggingCls&&l(t.root,t.draggingCls)},type:"touchstart mousedown"},{element:document,handler:function(){t.selection(1),t.drag.now=0,t.draggingCls&&a(t.root,t.draggingCls)},type:"mouseup blur touchend"},{element:document,handler:function(e){2!=e.button&&t._pos0(e)},type:"touchstart mousedown"},{element:document,handler:function(e){t.drag.now&&t.drag(e)},type:"mousemove touchmove"},{element:o,handler:function(){t.update()},type:"resize"},{element:t.root,handler:function(){t.update()},type:"sizeChange"},{element:t.clipper,handler:function(){t.clipperOnScroll()},type:"scroll"}],function(t,e){var r=0,i=t;for(void 0!==i.length&&i!==o||(i=[i]);i[r];)e.call(this,i[r],r),r++}(t._eventHandlers,function(t){if(t.element)if(t.element.length&&t.element!==o)for(var i=0;i<t.element.length;i++)e(t.element[i],t.type,t.handler,r);else e(t.element,t.type,t.handler,r)})}function z(t,e,r,i){var o="data-baron-"+e+"-id";return"on"==r?t.setAttribute(o,i):"off"==r&&t.removeAttribute(o),t.getAttribute(o)}function w(t){if(this.events&&this.events[t])for(var e=0;e<this.events[t].length;e++){var r=Array.prototype.slice.call(arguments,1);this.events[t][e].apply(this,r)}}y.prototype={_debounce:function(t,e){var r,i,o=this,s=function s(){if(o._disposed)return clearTimeout(r),void(r=o=null);var n=x()-i;n<e&&n>=0?r=setTimeout(s,e-n):(r=null,t())};return function(){i=x(),r||(r=setTimeout(s,e))}},constructor:function(t){var e,r,i,s,h,u,f;function d(){return i[this.origin.client]-this.barTopLimit-this.bar[this.origin.offset]}function y(){return!1}if(u=x(),this.params=t,this.event=t.event,this.events={},this.root=t.root,this.scroller=p(t.scroller),this.bar=p(t.bar,this.root),i=this.track=p(t.track,this.root),!this.track&&this.bar&&(i=this.bar.parentNode),this.clipper=this.scroller.parentNode,this.direction=t.direction,this.rtl=t.rtl,this.origin=v[this.direction],this.barOnCls=t.barOnCls,this.scrollingCls=t.scrollingCls,this.draggingCls=t.draggingCls,this.impact=t.impact,this.position=t.position,this.rtl=t.rtl,this.barTopLimit=0,this.resizeDebounce=t.resizeDebounce,this.cursor=function(t){return t["client"+this.origin.x]||(((t.originalEvent||t).touches||{})[0]||{})["page"+this.origin.x]},this.pos=function(t){var e="page"+this.origin.x+"Offset",r=this.scroller[e]?e:this.origin.scroll;return void 0!==t&&(this.scroller[r]=t),this.scroller[r]},this.rpos=function(t){var e=this.scroller[this.origin.scrollSize]-this.scroller[this.origin.client];return(t?this.pos(t*e):this.pos())/(e||1)},this.barOn=function(t){if(this.barOnCls){var e=this.scroller[this.origin.client]>=this.scroller[this.origin.scrollSize];t||e?c(this.root,this.barOnCls)&&a(this.root,this.barOnCls):c(this.root,this.barOnCls)||l(this.root,this.barOnCls)}},this._pos0=function(t){r=this.cursor(t)-e},this.drag=function(t){var e=function(t){return(t-this.barTopLimit)/d.call(this)}.call(this,this.cursor(t)-r),i=this.scroller[this.origin.scrollSize]-this.scroller[this.origin.client];this.scroller[this.origin.scroll]=e*i},this.selection=function(t){this.event(document,"selectpos selectstart",y,t?"off":"on")},this.resize=function(){var t=this,e=void 0===t.resizeDebounce?300:t.resizeDebounce,r=0;function i(){var e,r=t.scroller[t.origin.crossOffset],i=t.scroller[t.origin.crossClient],o=0;if(b?o=m:i>0&&0===r&&(r=i+g),r)if(t.barOn(),"scroller"==t.impact){var s=r-i+o;if("static"==t.position)n(t.scroller,t.origin.crossSize)!=(e=t.clipper[t.origin.crossClient]+s+"px")&&t._setCrossSizes(t.scroller,e);else{var l={},c=t.rtl?"Left":"Right";"h"==t.direction&&(c="Bottom"),l["padding"+c]=s+"px",n(t.scroller,l)}}else n(t.clipper,t.origin.crossSize)!=(e=i+"px")&&t._setCrossSizes(t.clipper,e);Array.prototype.unshift.call(arguments,"resize"),w.apply(t,arguments),u=x()}x()-u<e&&(clearTimeout(s),r=e),r?s=setTimeout(i,r):i()},this.updatePositions=function(t){var r;this.bar&&(r=(i[this.origin.client]-this.barTopLimit)*this.scroller[this.origin.client]/this.scroller[this.origin.scrollSize],(t||parseInt(f,10)!=parseInt(r,10))&&(function(t){var e=this.barMinSize||20,r=t;r>0&&r<e&&(r=e),this.bar&&n(this.bar,this.origin.size,parseInt(r,10)+"px")}.call(this,r),f=r),e=function(t){return t*d.call(this)+this.barTopLimit}.call(this,this.rpos()),function(t){if(this.bar){var e=n(this.bar,this.origin.pos),r=+t+"px";r&&r!=e&&n(this.bar,this.origin.pos,r)}}.call(this,e)),Array.prototype.unshift.call(arguments,"scroll"),w.apply(this,arguments)},this.scroll=function(){var t=this;t.updatePositions(),t.scrollingCls&&(h||l(t.root,t.scrollingCls),clearTimeout(h),h=setTimeout(function(){a(t.root,t.scrollingCls),h=void 0},300))},this.clipperOnScroll=function(){this.rtl?this.clipper[this.origin.scrollEdge]=this.clipper[this.origin.scrollSize]:this.clipper[this.origin.scrollEdge]=0},this._setCrossSizes=function(t,e){var r={};r[this.origin.crossSize]=e,r[this.origin.crossMinSize]=e,r[this.origin.crossMaxSize]=e,n(t,r)},this._dumbCss=function(e){if(!t.cssGuru){var r=e?"hidden":null,i=e?"none":null;n(this.clipper,{overflow:r,msOverflowStyle:i,position:"static"==this.position?"":"relative"});var o=e?"scroll":null,s={};s["overflow-"+("v"==this.direction?"y":"x")]=o,s["box-sizing"]="border-box",s.margin="0",s.border="0","absolute"==this.position&&(s.position="absolute",s.top="0","h"==this.direction?s.left=s.right="0":(s.bottom="0",s.right=this.rtl?"0":"",s.left=this.rtl?"":"0")),n(this.scroller,s)}},this._dumbCss(!0),b){var C="paddingRight",z={},_=o.getComputedStyle(this.scroller)[[C]];"h"==t.direction?C="paddingBottom":t.rtl&&(C="paddingLeft");var O=parseInt(_,10);O!=O&&(O=0),z[C]=m+O+"px",n(this.scroller,z)}return this},update:function(t){return w.call(this,"upd",t),this.resize(1),this.updatePositions(1),this},dispose:function(){C(this,this.event,"off"),z(this.root,this.params.direction,"off"),"v"==this.params.direction?this._setCrossSizes(this.scroller,""):this._setCrossSizes(this.clipper,""),this._dumbCss(!1),this.barOn(!0),w.call(this,"dispose"),d[this.params.index]=null,this.params=null,this._disposed=!0},on:function(t,e,r){for(var i=t.split(" "),o=0;o<i.length;o++)"init"==i[o]?e.call(this,r):(this.events[i[o]]=this.events[i[o]]||[],this.events[i[o]].push(function(t){e.call(this,t||r)}))},baron:function(t){return t.root=this.params.root,t.scroller=this.params.scroller,t.direction="v"==this.params.direction?"h":"v",t._chain=!0,y(t)}},y.prototype.constructor.prototype=y.prototype,y.noConflict=function(){return o.baron=u,y},y.version="3.0.1",y.prototype.autoUpdate=r(6)(o),y.prototype.fix=r(5),y.prototype.controls=r(3),t.exports=y},function(t,e,r){"use strict";var i=r(0).qs;t.exports=function(t){var e,r,o,s=this;r=t.screen||.9,t.forward&&(o={element:i(t.forward,this.clipper),handler:function(){var e=s.pos()+(t.delta||30);s.pos(e)},type:"click"},this._eventHandlers.push(o),this.event(o.element,o.type,o.handler,"on")),t.backward&&(o={element:i(t.backward,this.clipper),handler:function(){var e=s.pos()-(t.delta||30);s.pos(e)},type:"click"},this._eventHandlers.push(o),this.event(o.element,o.type,o.handler,"on")),t.track&&(e=!0===t.track?this.track:i(t.track,this.clipper))&&(o={element:e,handler:function(t){if(t.target==e){var i=t["offset"+s.origin.x],o=s.bar[s.origin.offsetPos],n=0;i<o?n=-1:i>o+s.bar[s.origin.offset]&&(n=1);var l=s.pos()+n*r*s.scroller[s.origin.client];s.pos(l)}},type:"mousedown"},this._eventHandlers.push(o),this.event(o.element,o.type,o.handler,"on"))}},function(t,e){t.exports=function(t,e,r){var i=console[t]||console.log,o=["Baron: "+e,r];Function.prototype.apply.call(i,console,o)}},function(t,e,r){"use strict";r(4);var i=r(0).css,o=r(0).add,s=r(0).rm;t.exports=function(t){var e,r,n={outside:"",inside:"",before:"",after:"",past:"",future:"",radius:0,minView:0},l=[],c=[],a=[],h=this.scroller,p=this.event,u=this;function f(t,l,c){var a=l,h=1==c?"pos":"oppos";r<(n.minView||0)&&(a=void 0),i(e[t],this.origin.pos,""),i(e[t],this.origin.oppos,""),s(e[t],n.outside),void 0!==a&&(a+="px",i(e[t],this.origin[h],a),o(e[t],n.outside))}function d(t){try{var e=document.createEvent("WheelEvent");e.initWebKitWheelEvent(t.originalEvent.wheelDeltaX,t.originalEvent.wheelDeltaY),h.dispatchEvent(e),t.preventDefault()}catch(t){}}function v(t){var o;for(var s in t)n[s]=t[s];if(n.elements instanceof HTMLElement?e=[n.elements]:"string"==typeof n.elements?e=this.scroller.querySelectorAll(n.elements):n.elements&&n.elements[0]instanceof HTMLElement&&(e=n.elements),e){r=this.scroller[this.origin.client];for(var h=0;h<e.length;h++)(o={})[this.origin.size]=e[h][this.origin.offset]+"px",e[h].parentNode!==this.scroller&&i(e[h].parentNode,o),(o={})[this.origin.crossSize]=e[h].parentNode[this.origin.crossClient]+"px",i(e[h],o),r-=e[h][this.origin.offset],a[h]=e[h].parentNode[this.origin.offsetPos],l[h]=l[h-1]||0,c[h]=c[h-1]||Math.min(a[h],0),e[h-1]&&(l[h]+=e[h-1][this.origin.offset],c[h]+=e[h-1][this.origin.offset]),0==h&&0==a[h]||(this.event(e[h],"mousewheel",d,"off"),this.event(e[h],"mousewheel",d));n.limiter&&e[0]&&(this.track&&this.track!=this.scroller?((o={})[this.origin.pos]=e[0].parentNode[this.origin.offset]+"px",i(this.track,o)):this.barTopLimit=e[0].parentNode[this.origin.offset],this.scroll()),!1===n.limiter&&(this.barTopLimit=0)}var f={element:e,handler:function(){for(var t,r=this.parentNode.offsetTop,i=0;i<e.length;i++)e[i]===this&&(t=i);var o=r-l[t];n.scroll?n.scroll({x1:u.scroller.scrollTop,x2:o}):u.scroller.scrollTop=o},type:"click"};if(n.clickable){this._eventHandlers.push(f);for(var v=0;v<f.element.length;v++)p(f.element[v],f.type,f.handler,"on")}}this.on("init",v,t);var g=[],m=[];return this.on("init scroll",function(){var t,i,h,p;if(e){var u;for(p=0;p<e.length;p++)t=0,a[p]-this.pos()<c[p]+n.radius?(t=1,i=l[p]):a[p]-this.pos()>c[p]+r-n.radius?(t=2,i=this.scroller[this.origin.client]-e[p][this.origin.offset]-l[p]-r):(t=3,i=void 0),h=!1,(a[p]-this.pos()<c[p]||a[p]-this.pos()>c[p]+r)&&(h=!0),t==g[p]&&h==m[p]||(f.call(this,p,i,t),g[p]=t,m[p]=h,u=!0);if(u)for(p=0;p<e.length;p++)1==g[p]&&n.past&&(o(e[p],n.past),s(e[p],n.future)),2==g[p]&&n.future&&(o(e[p],n.future),s(e[p],n.past)),3==g[p]&&(s(e[p],n.past),s(e[p],n.future),o(e[p],n.inside)),g[p]!=g[p+1]&&1==g[p]?(o(e[p],n.before),s(e[p],n.after)):g[p]!=g[p-1]&&2==g[p]?(o(e[p],n.after),s(e[p],n.before)):(s(e[p],n.before),s(e[p],n.after)),n.grad&&(m[p]?o(e[p],n.grad):s(e[p],n.grad))}}),this.on("resize upd",function(t){v.call(this,t&&t.fix)}),this}},function(t,e,r){"use strict";function i(t){var e,r=this;if(!this._au){var i=r._debounce(function(){r.update()},300);this._observer=new t(function(){o(),r.update(),i()}),this.on("init",function(){r._observer.observe(r.root,{childList:!0,subtree:!0,characterData:!0}),o()}),this.on("dispose",function(){r._observer.disconnect(),s(),delete r._observer}),this._au=!0}function o(){r.root[r.origin.offset]?s():function(){if(e)return;e=setInterval(function(){r.root[r.origin.offset]&&(s(),r.update())},300)}()}function s(){clearInterval(e),e=null}}t.exports=function(t){var e=t.MutationObserver||t.WebKitMutationObserver||t.MozMutationObserver||null;return function(){return e?(i.call(this,e),this):this}}},function(t,e,r){"use strict";r.r(e);var i=r(1),o=r.n(i),s=r(2),n=r.n(s);function l(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}const c={clipper:"clipper",scroller:"scroller",track:"track",bar:"bar",baron:"baron"};var a={barOnCls:c.baron,direction:"v"},h=function(t){function e(){var r,i;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);for(var o=arguments.length,s=Array(o),n=0;n<o;n++)s[n]=arguments[n];return r=i=l(this,t.call.apply(t,[this].concat(s))),i.scroller=null,i.clipper=null,i.track=null,i.bar=null,i.baron=null,i.baronParams={},l(i,r)}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}(e,t),e.prototype.componentDidMount=function(){for(var t in this.baronParams={root:this.clipper,scroller:this.scroller,track:this.track,bar:this.bar},this.props.params)this.baronParams[t]||(this.baronParams[t]=this.props.params[t]);for(var e in a)this.baronParams.hasOwnProperty(e)||(this.baronParams[e]=a[e]);this.baron=n()(this.baronParams)},e.prototype.componentDidUpdate=function(){this.baron&&this.baron.update()},e.prototype.componentWillUnmount=function(){this.baron&&this.baron.dispose()},e.prototype.render=function(){var t=this,e=this.props,r=e.clipperCls,i=e.scrollerCls,s=e.barCls,n=e.trackCls,l=e.hModifier,c=e.params,a=void 0===c?{}:c,h=e.children;return"h"===a.direction&&(s+=" "+l,n+=" "+l),o.a.createElement("div",{className:r,ref:function(e){return t.clipper=e}},o.a.createElement("div",{className:i,ref:function(e){return t.scroller=e}},h),o.a.createElement("div",{className:n,ref:function(e){return t.track=e}},o.a.createElement("div",{className:s,ref:function(e){return t.bar=e}})))},e.prototype.scrollToLast=function(){var t="v"===this.baronParams.direction?"scrollTop":"scrollLeft",e="v"===this.baronParams.direction?"scrollHeight":"scrollWidth";this.scroller instanceof HTMLElement&&(this.scroller[t]=this.scroller[e])},e.prototype.getScroller=function(){return this.scroller},e.prototype.getClipper=function(){return this.clipper},e}(i.Component);h.defaultProps={clipperCls:c.clipper,scrollerCls:c.scroller,trackCls:c.track,barCls:c.bar,hModifier:c._h},e.default=h}])});