baron - npm Package Compare versions

Comparing version 1.2.1 to 2.0.0

baron.js

@@ -32,2 +32,9 @@ (function(window, undefined) {
 
+    // Some ugly vars
+    var opera12maxScrollbarSize = 17;
+    // I hate you https://github.com/Diokuz/baron/issues/110
+    var macmsxffScrollbarSize = 15;
+    var macosxffRe = /[\s\S]*Macintosh[\s\S]*\) Gecko[\s\S]*/;
+    var isMacFF = macosxffRe.test(window.navigator.userAgent);
+
     // window.baron and jQuery.fn.baron points to this function
@@ -37,7 +44,7 @@ function baron(params) {
         var roots;
-        var empty = !params;
+        var withParams = !!params;
         var defaultParams = {
             $: window.jQuery,
             direction: 'v',
-            barOnCls: 'baron',
+            barOnCls: '_scrollbar',
             resizeDebounce: 0,
@@ -47,3 +54,4 @@ event: function(elem, event, func, mode) {
             },
-            cssGuru: false
+            cssGuru: false,
+            impact: 'scroller'
         };
@@ -68,5 +76,5 @@
 
-        var instance = new baron.fn.constructor(roots, params, empty);
+        var instance = new baron.fn.constructor(roots, params, withParams);
 
-        if (instance.autoUpdate && !empty) {
+        if (instance.autoUpdate) {
             instance.autoUpdate();
@@ -97,3 +105,3 @@ }
     baron.fn = {
-        constructor: function(roots, totalParams, noUserParams) {
+        constructor: function(roots, totalParams, withParams) {
             var params = clone(totalParams);
@@ -114,5 +122,10 @@
 
-                // baron() without params can return existing instances,
-                // but baron(params) will throw an Error as a second initialization
-                if (id == id && attr != undefined && instances[id] && noUserParams) {
+                // baron() can return existing instances,
+                // @TODO update params on-the-fly
+                // https://github.com/Diokuz/baron/issues/124
+                if (id == id && attr != undefined && instances[id]) {
+                    if (withParams) {
+                        console.log('Error! Baron for this node already initialized', totalParams.root);
+                    }
+
                     this[i] = instances[id];
@@ -126,3 +139,4 @@ } else {
                         if (!perInstanceParams.scroller.length) {
-                            perInstanceParams.scroller = root;
+                            console.log('Scroller not found!', root, params.scroller);
+                            return;
                         }
@@ -215,3 +229,3 @@ } else {
                     if (item.draggingCls) {
-                        $(item.bar).addClass(item.draggingCls);
+                        $(item.root).addClass(item.draggingCls);
                     }
@@ -229,3 +243,3 @@ },
                     if (item.draggingCls) {
-                        $(item.bar).removeClass(item.draggingCls);
+                        $(item.root).removeClass(item.draggingCls);
                     }
@@ -324,6 +338,2 @@ },
     function init(params) {
-        if (manageAttr(params.root, params.direction)) {
-            console.log('Error! Baron for this node already initialized', params.root);
-        }
-
         // __proto__ of returning object is baron.prototype
@@ -597,5 +607,10 @@ var out = new item.prototype.constructor(params);
                     var client = self.scroller[self.origin.crossClient];
+                    var padding = 0;
 
+                    // https://github.com/Diokuz/baron/issues/110
+                    if (isMacFF) {
+                        padding = macmsxffScrollbarSize;
+
                     // Opera 12 bug https://github.com/Diokuz/baron/issues/105
-                    if (client > 0 && offset === 0) {
+                    } else if (client > 0 && offset === 0) {
                         // Only Opera 12 in some rare nested flexbox cases goes here
@@ -606,3 +621,3 @@ // Sorry guys for magic,
                         // 17px for Windows XP-8.1, 15px for Mac (really rare).
-                        offset = client + 17;
+                        offset = client + opera12maxScrollbarSize;
                     }
@@ -614,11 +629,6 @@
 
-                        // Two different appropches
-                        var fixScroller = self.impact ?
-                            (self.impact == 'scroller') :
-                            (self.direction == 'v');
+                        if (self.impact == 'scroller') { // scroller
+                            var delta = offset - client + padding;
 
-                        if (fixScroller) { // scroller
-                            var delta = offset - client;
-
-                            was = $(self.clipper).css(self.origin.crossSize);
+                            was = $(self.scroller).css(self.origin.crossSize);
                             will = self.clipper[self.origin.crossClient] + delta + 'px';
@@ -700,3 +710,3 @@
 
-                // clipper.scrollLeft = initial scroll position (0 for ltr, 17 for rtl)
+                // clipper.scrollLeft = initial scroll position (0 for ltr, 20 for rtl)
                 this.clipper[this.origin.scrollEdge] = this.scrollEdge;
@@ -741,2 +751,25 @@ };
 
+            // onInit actions
+            this._dumbCss(true);
+
+            if (isMacFF) {
+                var padding = 'paddingRight';
+                var css = {};
+                var paddingWas = window.getComputedStyle(this.scroller)[[padding]];
+                var delta = this.scroller[this.origin.crossOffset] -
+                            this.scroller[this.origin.crossClient];
+
+                if (params.direction == 'h') {
+                    padding = 'paddingBottom';
+                } else if (params.rtl) {
+                    padding = 'paddingLeft';
+                }
+
+                // getComputedStyle is ie9+, but we here only in f ff
+                var numWas = parseInt(paddingWas, 10);
+                if (numWas != numWas) numWas = 0;
+                css[padding] = (macmsxffScrollbarSize + numWas) + 'px';
+                $(this.scroller).css(css);
+            }
+
             return this;
@@ -749,3 +782,2 @@ },
 
-            this._dumbCss(true);
             this.resize(1);
@@ -799,3 +831,3 @@ this.updatePositions();
 
-    baron.version = '1.2.1';
+    baron.version = '2.0.0';
 
@@ -1062,2 +1094,6 @@ if ($ && $.fn) { // Adding baron to jQuery as plugin
 
+        if (this._au) {
+            return;
+        }
+
         function actualizeWatcher() {
@@ -1118,2 +1154,4 @@ if (!self.root[self.origin.offset]) {
         });
+
+        this._au = true;
     };
@@ -1230,154 +1268,2 @@
     };
-})(window);
-/* Pull to load plugin for baron 0.6+ */
-(function(window, undefined) {
-    var pull = function(params) {
-        var block = this.$(params.block),
-            size = params.size || this.origin.size,
-            limit = params.limit || 80,
-            onExpand = params.onExpand,
-            elements = params.elements || [],
-            inProgress = params.inProgress || '',
-            self = this,
-            _insistence = 0,
-            _zeroXCount = 0,
-            _interval,
-            _timer,
-            _x = 0,
-            _onExpandCalled,
-            _waiting = params.waiting || 500,
-            _on;
-
-        function getSize() {
-            return self.scroller[self.origin.scroll] + self.scroller[self.origin.offset];
-        }
-
-        // Scroller content height
-        function getContentSize() {
-            return self.scroller[self.origin.scrollSize];
-        }
-
-        // Scroller height
-        function getScrollerSize() {
-            return self.scroller[self.origin.client];
-        }
-
-        function step(x, force) {
-            var k = x * 0.0005;
-
-            return Math.floor(force - k * (x + 550));
-        }
-
-        function toggle(on) {
-            _on = on;
-
-            if (on) {
-                update(); // First time with no delay
-                _interval = setInterval(update, 200);
-            } else {
-                clearInterval(_interval);
-            }
-        }
-
-        function update() {
-            var pos = {},
-                height = getSize(),
-                scrollHeight = getContentSize(),
-                dx,
-                op4,
-                scrollInProgress = _insistence == 1;
-
-            op4 = 0; // Возвращающая сила
-            if (_insistence > 0) {
-                op4 = 40;
-            }
-            //if (_insistence > -1) {
-                dx = step(_x, op4);
-                if (height >= scrollHeight - _x && _insistence > -1) {
-                    if (scrollInProgress) {
-                        _x += dx;
-                    }
-                } else {
-                    _x = 0;
-                }
-
-                if (_x < 0) _x = 0;
-
-                pos[size] = _x + 'px';
-                if (getScrollerSize() <= getContentSize()) {
-                    self.$(block).css(pos);
-                    for (var i = 0 ; i < elements.length ; i++) {
-                        self.$(elements[i].self).css(elements[i].property, Math.min(_x / limit * 100, 100) + '%');
-                    }
-                }
-
-                if (inProgress && _x) {
-                    self.$(self.root).addClass(inProgress);
-                }
-
-                if (_x == 0) {
-                    if (params.onCollapse) {
-                        params.onCollapse();
-                    }
-                }
-
-                _insistence = 0;
-                _timer = setTimeout(function() {
-                    _insistence = -1;
-                }, _waiting);
-            //}
-
-            if (onExpand && _x > limit && !_onExpandCalled) {
-                onExpand();
-                _onExpandCalled = true;
-            }
-
-            if (_x == 0) {
-                _zeroXCount++;
-            } else {
-                _zeroXCount = 0;
-            }
-            if (_zeroXCount > 1) {
-                toggle(false);
-                _onExpandCalled = false;
-                if (inProgress) {
-                    self.$(self.root).removeClass(inProgress);
-                }
-            }
-        }
-
-        this.on('init', function() {
-            toggle(true);
-        });
-
-        this.on('dispose', function() {
-            toggle(false);
-        });
-
-        this.event(this.scroller, 'mousewheel DOMMouseScroll', function(e) {
-            var down = e.wheelDelta < 0 || (e.originalEvent && e.originalEvent.wheelDelta < 0) || e.detail > 0;
-
-            if (down) {
-                _insistence = 1;
-                clearTimeout(_timer);
-                if (!_on && getSize() >= getContentSize()) {
-                    toggle(true);
-                }
-            }
-            //  else {
-            //     toggle(false);
-            // }
-        });
-    };
-
-    baron.fn.pull = function(params) {
-        var i = 0;
-
-        while (this[i]) {
-            pull.call(this[i], params);
-            i++;
-        }
-
-        return this;
-    };
 })(window);

baron.min.js

@@ -1,1 +0,1 @@
-!function(t,i){"use strict";function s(e){var r,o,n=!e,l={$:t.jQuery,direction:"v",barOnCls:"baron",resizeDebounce:0,event:function(t,i,s,r){e.$(t)[r||"on"](i,s)},cssGuru:!1};e=e||{};for(var c in l)e[c]===i&&(e[c]=l[c]);r=this instanceof e.$,r?e.root=o=this:o=e.$(e.root||e.scroller);var a=new s.fn.constructor(o,e,n);return a.autoUpdate&&!n&&a.autoUpdate(),a}function e(s,e){var r=0;for((s.length===i||s===t)&&(s=[s]);s[r];)e.call(this,s[r],r),r++}function r(){return(new Date).getTime()}function o(i,s,r){i._eventHandlers=i._eventHandlers||[{element:i.scroller,handler:function(t){i.scroll(t)},type:"scroll"},{element:i.root,handler:function(){i.update()},type:"transitionend animationend"},{element:i.scroller,handler:function(){i.update()},type:"keyup"},{element:i.bar,handler:function(t){t.preventDefault(),i.selection(),i.drag.now=1,i.draggingCls&&h(i.bar).addClass(i.draggingCls)},type:"touchstart mousedown"},{element:document,handler:function(){i.selection(1),i.drag.now=0,i.draggingCls&&h(i.bar).removeClass(i.draggingCls)},type:"mouseup blur touchend"},{element:document,handler:function(t){2!=t.button&&i._pos0(t)},type:"touchstart mousedown"},{element:document,handler:function(t){i.drag.now&&i.drag(t)},type:"mousemove touchmove"},{element:t,handler:function(){i.update()},type:"resize"},{element:i.root,handler:function(){i.update()},type:"sizeChange"},{element:i.clipper,handler:function(){i.clipperOnScroll()},type:"scroll"}],e(i._eventHandlers,function(t){t.element&&s(t.element,t.type,t.handler,r)})}function n(t,i,s,e){var r="data-baron-"+i+"-id";if("on"==s)t.setAttribute(r,e);else{if("off"!=s)return t.getAttribute(r);t.removeAttribute(r)}}function l(t){n(t.root,t.direction)&&console.log("Error! Baron for this node already initialized",t.root);var i=new v.prototype.constructor(t);return o(i,t.event,"on"),n(i.root,t.direction,"on",p.length),p.push(i),i.update(),i.scrollEdge=0,t.rtl&&(i.scrollEdge=i.clipper[i.origin.scrollEdge]),i}function c(t){var i={};t=t||{};for(var s in t)t.hasOwnProperty(s)&&(i[s]=t[s]);return i}function a(t){if(this.events&&this.events[t])for(var i=0;i<this.events[t].length;i++){var s=Array.prototype.slice.call(arguments,1);this.events[t][i].apply(this,s)}}if(t){var h=t.$,u=s,f=["left","top","right","bottom","width","height"],p=[],d={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"}};s._instances=p,s.fn={constructor:function(t,s,r){var o=c(s);o.event=function(t,i,r,o){e(t,function(t){s.event(t,i,r,o)})},this.length=0,e.call(this,t,function(t,s){var e=n(t,o.direction),a=+e;if(a==a&&e!=i&&p[a]&&r)this[s]=p[a];else{var h=c(o);o.root&&o.scroller?(h.scroller=o.$(o.scroller,t),h.scroller.length||(h.scroller=t)):h.scroller=t,h.root=t,this[s]=l(h)}this.length=s+1}),this.params=o},dispose:function(){var t=this.params;e(this,function(i){i.dispose(t)}),this.params=null},update:function(){for(var t=0;this[t];)this[t].update.apply(this[t],arguments),t++},baron:function(t){return t.root=[],t.scroller=this.params.scroller,e.call(this,this,function(i){t.root.push(i.root)}),t.direction="v"==this.params.direction?"h":"v",t._chain=!0,s(t)}};var v={};v.prototype={_debounce:function(t,s){var e,o,n=this,l=function(){if(n._disposed)return clearTimeout(e),e=n=null,i;var c=r()-o;s>c&&c>=0?e=setTimeout(l,s-c):(e=null,t())};return function(){o=r(),e||(e=setTimeout(l,s))}},constructor:function(t){function s(t,i){return u(t,i)[0]}function e(t){var i=this.barMinSize||20;t>0&&i>t&&(t=i),this.bar&&u(this.bar).css(this.origin.size,parseInt(t,10)+"px")}function o(t){if(this.bar){var i=u(this.bar).css(this.origin.pos),s=+t+"px";s&&s!=i&&u(this.bar).css(this.origin.pos,s)}}function n(){return v[this.origin.client]-this.barTopLimit-this.bar[this.origin.offset]}function l(t){return t*n.call(this)+this.barTopLimit}function c(t){return(t-this.barTopLimit)/n.call(this)}function h(){return!1}var u,f,p,v,g,m,b,C,z;return C=b=r(),u=this.$=t.$,this.event=t.event,this.events={},this.root=t.root,this.scroller=s(t.scroller),this.bar=s(t.bar,this.root),v=this.track=s(t.track,this.root),!this.track&&this.bar&&(v=this.bar.parentNode),this.clipper=this.scroller.parentNode,this.direction=t.direction,this.origin=d[this.direction],this.barOnCls=t.barOnCls||"_baron",this.scrollingCls=t.scrollingCls,this.draggingCls=t.draggingCls,this.impact=t.impact,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 s="page"+this.origin.x+"Offset",e=this.scroller[s]?s:this.origin.scroll;return t!==i&&(this.scroller[e]=t),this.scroller[e]},this.rpos=function(t){var i,s=this.scroller[this.origin.scrollSize]-this.scroller[this.origin.client];return i=t?this.pos(t*s):this.pos(),i/(s||1)},this.barOn=function(t){this.barOnCls&&(t||this.scroller[this.origin.client]>=this.scroller[this.origin.scrollSize]?u(this.root).hasClass(this.barOnCls)&&u(this.root).removeClass(this.barOnCls):u(this.root).hasClass(this.barOnCls)||u(this.root).addClass(this.barOnCls))},this._pos0=function(t){p=this.cursor(t)-f},this.drag=function(t){var i=c.call(this,this.cursor(t)-p),s=this.scroller[this.origin.scrollSize]-this.scroller[this.origin.client];this.scroller[this.origin.scroll]=i*s},this.selection=function(t){this.event(document,"selectpos selectstart",h,t?"off":"on")},this.resize=function(){function t(){var t,i,e=s.scroller[s.origin.crossOffset],o=s.scroller[s.origin.crossClient];if(o>0&&0===e&&(e=o+17),e){s.barOn(),o=s.scroller[s.origin.crossClient];var n=s.impact?"scroller"==s.impact:"v"==s.direction;if(n){var l=e-o;t=u(s.clipper).css(s.origin.crossSize),i=s.clipper[s.origin.crossClient]+l+"px",t!=i&&s._setCrossSizes(s.scroller,i)}else t=u(s.clipper).css(s.origin.crossSize),i=o+"px",t!=i&&s._setCrossSizes(s.clipper,i)}Array.prototype.unshift.call(arguments,"resize"),a.apply(s,arguments),C=r()}var s=this,e=s.resizeDebounce===i?300:s.resizeDebounce,o=0;r()-C<e&&(clearTimeout(g),o=e),o?g=setTimeout(t,o):t()},this.updatePositions=function(){var t,i=this;i.bar&&(t=(v[i.origin.client]-i.barTopLimit)*i.scroller[i.origin.client]/i.scroller[i.origin.scrollSize],parseInt(z,10)!=parseInt(t,10)&&(e.call(i,t),z=t),f=l.call(i,i.rpos()),o.call(i,f)),Array.prototype.unshift.call(arguments,"scroll"),a.apply(i,arguments),b=r()},this.scroll=function(){var t=this;t.updatePositions(),t.scrollingCls&&(m||t.$(t.root).addClass(t.scrollingCls),clearTimeout(m),m=setTimeout(function(){t.$(t.root).removeClass(t.scrollingCls),m=i},300))},this.clipperOnScroll=function(){"h"!=this.direction&&(this.clipper[this.origin.scrollEdge]=this.scrollEdge)},this._setCrossSizes=function(t,i){var s={};s[this.origin.crossSize]=i,s[this.origin.crossMinSize]=i,s[this.origin.crossMaxSize]=i,this.$(t).css(s)},this._dumbCss=function(i){if(!t.cssGuru){var s=i?"hidden":null,e=i?"none":null;this.$(this.clipper).css({overflow:s,msOverflowStyle:e});var r=i?"scroll":null,o="v"==this.direction?"y":"x",n={};n["overflow-"+o]=r,n["box-sizing"]="border-box",n.margin="0",n.border="0",this.$(this.scroller).css(n)}},this},update:function(t){return a.call(this,"upd",t),this._dumbCss(!0),this.resize(1),this.updatePositions(),this},dispose:function(t){o(this,this.event,"off"),n(this.root,t.direction,"off"),"v"==t.direction?this._setCrossSizes(this.scroller,""):this._setCrossSizes(this.clipper,""),this._dumbCss(!1),this.barOn(!0),a.call(this,"dispose"),this._disposed=!0},on:function(t,i,s){for(var e=t.split(" "),r=0;r<e.length;r++)"init"==e[r]?i.call(this,s):(this.events[e[r]]=this.events[e[r]]||[],this.events[e[r]].push(function(t){i.call(this,t||s)}))}},s.fn.constructor.prototype=s.fn,v.prototype.constructor.prototype=v.prototype,s.noConflict=function(){return t.baron=u,s},s.version="1.2.1",h&&h.fn&&(h.fn.baron=s),t.baron=s,"undefined"!=typeof module&&(module.exports=s.noConflict())}}(window),function(t,s){var e=function(t){function e(t,i,e){var r=1==e?"pos":"oppos";l<(c.minView||0)&&(i=s),this.$(n[t]).css(this.origin.pos,"").css(this.origin.oppos,"").removeClass(c.outside),i!==s&&(i+="px",this.$(n[t]).css(this.origin[r],i).addClass(c.outside))}function r(t){try{i=document.createEvent("WheelEvent"),i.initWebKitWheelEvent(t.originalEvent.wheelDeltaX,t.originalEvent.wheelDeltaY),f.dispatchEvent(i),t.preventDefault()}catch(t){}}function o(t){var i;for(var s in t)c[s]=t[s];if(n=this.$(c.elements,this.scroller)){l=this.scroller[this.origin.client];for(var e=0;e<n.length;e++)i={},i[this.origin.size]=n[e][this.origin.offset],n[e].parentNode!==this.scroller&&this.$(n[e].parentNode).css(i),i={},i[this.origin.crossSize]=n[e].parentNode[this.origin.crossClient],this.$(n[e]).css(i),l-=n[e][this.origin.offset],u[e]=n[e].parentNode[this.origin.offsetPos],a[e]=a[e-1]||0,h[e]=h[e-1]||Math.min(u[e],0),n[e-1]&&(a[e]+=n[e-1][this.origin.offset],h[e]+=n[e-1][this.origin.offset]),(0!=e||0!=u[e])&&(this.event(n[e],"mousewheel",r,"off"),this.event(n[e],"mousewheel",r));c.limiter&&n[0]&&(this.track&&this.track!=this.scroller?(i={},i[this.origin.pos]=n[0].parentNode[this.origin.offset],this.$(this.track).css(i)):this.barTopLimit=n[0].parentNode[this.origin.offset],this.scroll()),c.limiter===!1&&(this.barTopLimit=0)}var o={element:n,handler:function(){for(var t,i=d(this)[0].parentNode,s=i.offsetTop,e=0;e<n.length;e++)n[e]===this&&(t=e);var r=s-a[t];c.scroll?c.scroll({x1:v.scroller.scrollTop,x2:r}):v.scroller.scrollTop=r},type:"click"};c.clickable&&(this._eventHandlers.push(o),p(o.element,o.type,o.handler,"on"))}var n,l,c={outside:"",inside:"",before:"",after:"",past:"",future:"",radius:0,minView:0},a=[],h=[],u=[],f=this.scroller,p=this.event,d=this.$,v=this;this.on("init",o,t);var g=[],m=[];this.on("init scroll",function(){var t,i,r;if(n){for(var o,f=0;f<n.length;f++)t=0,u[f]-this.pos()<h[f]+c.radius?(t=1,i=a[f]):u[f]-this.pos()>h[f]+l-c.radius?(t=2,i=this.scroller[this.origin.client]-n[f][this.origin.offset]-a[f]-l):(t=3,i=s),r=!1,(u[f]-this.pos()<h[f]||u[f]-this.pos()>h[f]+l)&&(r=!0),(t!=g[f]||r!=m[f])&&(e.call(this,f,i,t),g[f]=t,m[f]=r,o=!0);if(o)for(f=0;f<n.length;f++)1==g[f]&&c.past&&this.$(n[f]).addClass(c.past).removeClass(c.future),2==g[f]&&c.future&&this.$(n[f]).addClass(c.future).removeClass(c.past),3==g[f]?((c.future||c.past)&&this.$(n[f]).removeClass(c.past).removeClass(c.future),c.inside&&this.$(n[f]).addClass(c.inside)):c.inside&&this.$(n[f]).removeClass(c.inside),g[f]!=g[f+1]&&1==g[f]&&c.before?this.$(n[f]).addClass(c.before).removeClass(c.after):g[f]!=g[f-1]&&2==g[f]&&c.after?this.$(n[f]).addClass(c.after).removeClass(c.before):this.$(n[f]).removeClass(c.before).removeClass(c.after),c.grad&&(m[f]?this.$(n[f]).addClass(c.grad):this.$(n[f]).removeClass(c.grad))}}),this.on("resize upd",function(t){o.call(this,t&&t.fix)})};baron.fn.fix=function(t){for(var i=0;this[i];)e.call(this[i],t),i++;return this}}(window),function(t){var i=t.MutationObserver||t.WebKitMutationObserver||t.MozMutationObserver||null,s=function(){function t(){o.root[o.origin.offset]?e():s()}function s(){r||(r=setInterval(function(){o.root[o.origin.offset]&&(e(),o.update())},300))}function e(){clearInterval(r),r=null}var r,o=this,n=o._debounce(function(){o.update()},300);this._observer=new i(function(){t(),o.update(),n()}),this.on("init",function(){o._observer.observe(o.root,{childList:!0,subtree:!0,characterData:!0}),t()}),this.on("dispose",function(){o._observer.disconnect(),e(),delete o._observer})};baron.fn.autoUpdate=function(t){if(!i)return this;for(var e=0;this[e];)s.call(this[e],t),e++;return this}}(window),function(t,i){var s=function(t){var i,s,e,r,o,n=this;r=t.screen||.9,t.forward&&(i=this.$(t.forward,this.clipper),o={element:i,handler:function(){var i=n.pos()+(t.delta||30);n.pos(i)},type:"click"},this._eventHandlers.push(o),this.event(o.element,o.type,o.handler,"on")),t.backward&&(s=this.$(t.backward,this.clipper),o={element:s,handler:function(){var i=n.pos()-(t.delta||30);n.pos(i)},type:"click"},this._eventHandlers.push(o),this.event(o.element,o.type,o.handler,"on")),t.track&&(e=t.track===!0?this.track:this.$(t.track,this.clipper)[0],e&&(o={element:e,handler:function(t){if(t.target==e){var i=t["offset"+n.origin.x],s=n.bar[n.origin.offsetPos],o=0;s>i?o=-1:i>s+n.bar[n.origin.offset]&&(o=1);var l=n.pos()+o*r*n.scroller[n.origin.client];n.pos(l)}},type:"mousedown"},this._eventHandlers.push(o),this.event(o.element,o.type,o.handler,"on")))};baron.fn.controls=function(t){for(var i=0;this[i];)s.call(this[i],t),i++;return this}}(window),function(t,i){var s=function(t){function i(){return m.scroller[m.origin.scroll]+m.scroller[m.origin.offset]}function s(){return m.scroller[m.origin.scrollSize]}function e(){return m.scroller[m.origin.client]}function r(t,i){var s=5e-4*t;return Math.floor(i-s*(t+550))}function o(t){h=t,t?(n(),l=setInterval(n,200)):clearInterval(l)}function n(){var n,l,h={},w=i(),$=s(),S=1==b;if(l=0,b>0&&(l=40),n=r(z,l),w>=$-z&&b>-1?S&&(z+=n):z=0,0>z&&(z=0),h[f]=z+"px",e()<=s()){m.$(u).css(h);for(var _=0;_<v.length;_++)m.$(v[_].self).css(v[_].property,Math.min(z/p*100,100)+"%")}g&&z&&m.$(m.root).addClass(g),0==z&&t.onCollapse&&t.onCollapse(),b=0,c=setTimeout(function(){b=-1},y),d&&z>p&&!a&&(d(),a=!0),0==z?C++:C=0,C>1&&(o(!1),a=!1,g&&m.$(m.root).removeClass(g))}var l,c,a,h,u=this.$(t.block),f=t.size||this.origin.size,p=t.limit||80,d=t.onExpand,v=t.elements||[],g=t.inProgress||"",m=this,b=0,C=0,z=0,y=t.waiting||500;this.on("init",function(){o(!0)}),this.on("dispose",function(){o(!1)}),this.event(this.scroller,"mousewheel DOMMouseScroll",function(t){var e=t.wheelDelta<0||t.originalEvent&&t.originalEvent.wheelDelta<0||t.detail>0;e&&(b=1,clearTimeout(c),!h&&i()>=s()&&o(!0))})};baron.fn.pull=function(t){for(var i=0;this[i];)s.call(this[i],t),i++;return this}}(window);
+!function(t,s){"use strict";function i(e){var r,o,n=!!e,l={$:t.jQuery,direction:"v",barOnCls:"_scrollbar",resizeDebounce:0,event:function(t,s,i,r){e.$(t)[r||"on"](s,i)},cssGuru:!1,impact:"scroller"};e=e||{};for(var c in l)e[c]===s&&(e[c]=l[c]);r=this instanceof e.$,r?e.root=o=this:o=e.$(e.root||e.scroller);var a=new i.fn.constructor(o,e,n);return a.autoUpdate&&a.autoUpdate(),a}function e(i,e){var r=0;for((i.length===s||i===t)&&(i=[i]);i[r];)e.call(this,i[r],r),r++}function r(){return(new Date).getTime()}function o(s,i,r){s._eventHandlers=s._eventHandlers||[{element:s.scroller,handler:function(t){s.scroll(t)},type:"scroll"},{element:s.root,handler:function(){s.update()},type:"transitionend animationend"},{element:s.scroller,handler:function(){s.update()},type:"keyup"},{element:s.bar,handler:function(t){t.preventDefault(),s.selection(),s.drag.now=1,s.draggingCls&&h(s.root).addClass(s.draggingCls)},type:"touchstart mousedown"},{element:document,handler:function(){s.selection(1),s.drag.now=0,s.draggingCls&&h(s.root).removeClass(s.draggingCls)},type:"mouseup blur touchend"},{element:document,handler:function(t){2!=t.button&&s._pos0(t)},type:"touchstart mousedown"},{element:document,handler:function(t){s.drag.now&&s.drag(t)},type:"mousemove touchmove"},{element:t,handler:function(){s.update()},type:"resize"},{element:s.root,handler:function(){s.update()},type:"sizeChange"},{element:s.clipper,handler:function(){s.clipperOnScroll()},type:"scroll"}],e(s._eventHandlers,function(t){t.element&&i(t.element,t.type,t.handler,r)})}function n(t,s,i,e){var r="data-baron-"+s+"-id";if("on"==i)t.setAttribute(r,e);else{if("off"!=i)return t.getAttribute(r);t.removeAttribute(r)}}function l(t){var s=new C.prototype.constructor(t);return o(s,t.event,"on"),n(s.root,t.direction,"on",p.length),p.push(s),s.update(),s.scrollEdge=0,t.rtl&&(s.scrollEdge=s.clipper[s.origin.scrollEdge]),s}function c(t){var s={};t=t||{};for(var i in t)t.hasOwnProperty(i)&&(s[i]=t[i]);return s}function a(t){if(this.events&&this.events[t])for(var s=0;s<this.events[t].length;s++){var i=Array.prototype.slice.call(arguments,1);this.events[t][s].apply(this,i)}}if(t){var h=t.$,u=i,f=["left","top","right","bottom","width","height"],p=[],d={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,v=15,m=/[\s\S]*Macintosh[\s\S]*\) Gecko[\s\S]*/,b=m.test(t.navigator.userAgent);i._instances=p,i.fn={constructor:function(t,i,r){var o=c(i);o.event=function(t,s,r,o){e(t,function(t){i.event(t,s,r,o)})},this.length=0,e.call(this,t,function(t,e){var a=n(t,o.direction),h=+a;if(h==h&&a!=s&&p[h])r&&console.log("Error! Baron for this node already initialized",i.root),this[e]=p[h];else{var u=c(o);if(o.root&&o.scroller){if(u.scroller=o.$(o.scroller,t),!u.scroller.length)return console.log("Scroller not found!",t,o.scroller),s}else u.scroller=t;u.root=t,this[e]=l(u)}this.length=e+1}),this.params=o},dispose:function(){var t=this.params;e(this,function(s){s.dispose(t)}),this.params=null},update:function(){for(var t=0;this[t];)this[t].update.apply(this[t],arguments),t++},baron:function(t){return t.root=[],t.scroller=this.params.scroller,e.call(this,this,function(s){t.root.push(s.root)}),t.direction="v"==this.params.direction?"h":"v",t._chain=!0,i(t)}};var C={};C.prototype={_debounce:function(t,i){var e,o,n=this,l=function(){if(n._disposed)return clearTimeout(e),e=n=null,s;var c=r()-o;i>c&&c>=0?e=setTimeout(l,i-c):(e=null,t())};return function(){o=r(),e||(e=setTimeout(l,i))}},constructor:function(i){function e(t,s){return f(t,s)[0]}function o(t){var s=this.barMinSize||20;t>0&&s>t&&(t=s),this.bar&&f(this.bar).css(this.origin.size,parseInt(t,10)+"px")}function n(t){if(this.bar){var s=f(this.bar).css(this.origin.pos),i=+t+"px";i&&i!=s&&f(this.bar).css(this.origin.pos,i)}}function l(){return C[this.origin.client]-this.barTopLimit-this.bar[this.origin.offset]}function c(t){return t*l.call(this)+this.barTopLimit}function h(t){return(t-this.barTopLimit)/l.call(this)}function u(){return!1}var f,p,m,C,y,z,w,$,S;if($=w=r(),f=this.$=i.$,this.event=i.event,this.events={},this.root=i.root,this.scroller=e(i.scroller),this.bar=e(i.bar,this.root),C=this.track=e(i.track,this.root),!this.track&&this.bar&&(C=this.bar.parentNode),this.clipper=this.scroller.parentNode,this.direction=i.direction,this.origin=d[this.direction],this.barOnCls=i.barOnCls||"_baron",this.scrollingCls=i.scrollingCls,this.draggingCls=i.draggingCls,this.impact=i.impact,this.barTopLimit=0,this.resizeDebounce=i.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 i="page"+this.origin.x+"Offset",e=this.scroller[i]?i:this.origin.scroll;return t!==s&&(this.scroller[e]=t),this.scroller[e]},this.rpos=function(t){var s,i=this.scroller[this.origin.scrollSize]-this.scroller[this.origin.client];return s=t?this.pos(t*i):this.pos(),s/(i||1)},this.barOn=function(t){this.barOnCls&&(t||this.scroller[this.origin.client]>=this.scroller[this.origin.scrollSize]?f(this.root).hasClass(this.barOnCls)&&f(this.root).removeClass(this.barOnCls):f(this.root).hasClass(this.barOnCls)||f(this.root).addClass(this.barOnCls))},this._pos0=function(t){m=this.cursor(t)-p},this.drag=function(t){var s=h.call(this,this.cursor(t)-m),i=this.scroller[this.origin.scrollSize]-this.scroller[this.origin.client];this.scroller[this.origin.scroll]=s*i},this.selection=function(t){this.event(document,"selectpos selectstart",u,t?"off":"on")},this.resize=function(){function t(){var t,s,e=i.scroller[i.origin.crossOffset],o=i.scroller[i.origin.crossClient],n=0;if(b?n=v:o>0&&0===e&&(e=o+g),e)if(i.barOn(),o=i.scroller[i.origin.crossClient],"scroller"==i.impact){var l=e-o+n;t=f(i.scroller).css(i.origin.crossSize),s=i.clipper[i.origin.crossClient]+l+"px",t!=s&&i._setCrossSizes(i.scroller,s)}else t=f(i.clipper).css(i.origin.crossSize),s=o+"px",t!=s&&i._setCrossSizes(i.clipper,s);Array.prototype.unshift.call(arguments,"resize"),a.apply(i,arguments),$=r()}var i=this,e=i.resizeDebounce===s?300:i.resizeDebounce,o=0;r()-$<e&&(clearTimeout(y),o=e),o?y=setTimeout(t,o):t()},this.updatePositions=function(){var t,s=this;s.bar&&(t=(C[s.origin.client]-s.barTopLimit)*s.scroller[s.origin.client]/s.scroller[s.origin.scrollSize],parseInt(S,10)!=parseInt(t,10)&&(o.call(s,t),S=t),p=c.call(s,s.rpos()),n.call(s,p)),Array.prototype.unshift.call(arguments,"scroll"),a.apply(s,arguments),w=r()},this.scroll=function(){var t=this;t.updatePositions(),t.scrollingCls&&(z||t.$(t.root).addClass(t.scrollingCls),clearTimeout(z),z=setTimeout(function(){t.$(t.root).removeClass(t.scrollingCls),z=s},300))},this.clipperOnScroll=function(){"h"!=this.direction&&(this.clipper[this.origin.scrollEdge]=this.scrollEdge)},this._setCrossSizes=function(t,s){var i={};i[this.origin.crossSize]=s,i[this.origin.crossMinSize]=s,i[this.origin.crossMaxSize]=s,this.$(t).css(i)},this._dumbCss=function(t){if(!i.cssGuru){var s=t?"hidden":null,e=t?"none":null;this.$(this.clipper).css({overflow:s,msOverflowStyle:e});var r=t?"scroll":null,o="v"==this.direction?"y":"x",n={};n["overflow-"+o]=r,n["box-sizing"]="border-box",n.margin="0",n.border="0",this.$(this.scroller).css(n)}},this._dumbCss(!0),b){var _="paddingRight",x={},O=t.getComputedStyle(this.scroller)[[_]];this.scroller[this.origin.crossOffset]-this.scroller[this.origin.crossClient];"h"==i.direction?_="paddingBottom":i.rtl&&(_="paddingLeft");var T=parseInt(O,10);T!=T&&(T=0),x[_]=v+T+"px",f(this.scroller).css(x)}return this},update:function(t){return a.call(this,"upd",t),this.resize(1),this.updatePositions(),this},dispose:function(t){o(this,this.event,"off"),n(this.root,t.direction,"off"),"v"==t.direction?this._setCrossSizes(this.scroller,""):this._setCrossSizes(this.clipper,""),this._dumbCss(!1),this.barOn(!0),a.call(this,"dispose"),this._disposed=!0},on:function(t,s,i){for(var e=t.split(" "),r=0;r<e.length;r++)"init"==e[r]?s.call(this,i):(this.events[e[r]]=this.events[e[r]]||[],this.events[e[r]].push(function(t){s.call(this,t||i)}))}},i.fn.constructor.prototype=i.fn,C.prototype.constructor.prototype=C.prototype,i.noConflict=function(){return t.baron=u,i},i.version="2.0.0",h&&h.fn&&(h.fn.baron=i),t.baron=i,"undefined"!=typeof module&&(module.exports=i.noConflict())}}(window),function(t,s){var e=function(t){function e(t,i,e){var r=1==e?"pos":"oppos";l<(c.minView||0)&&(i=s),this.$(n[t]).css(this.origin.pos,"").css(this.origin.oppos,"").removeClass(c.outside),i!==s&&(i+="px",this.$(n[t]).css(this.origin[r],i).addClass(c.outside))}function r(t){try{i=document.createEvent("WheelEvent"),i.initWebKitWheelEvent(t.originalEvent.wheelDeltaX,t.originalEvent.wheelDeltaY),f.dispatchEvent(i),t.preventDefault()}catch(t){}}function o(t){var s;for(var i in t)c[i]=t[i];if(n=this.$(c.elements,this.scroller)){l=this.scroller[this.origin.client];for(var e=0;e<n.length;e++)s={},s[this.origin.size]=n[e][this.origin.offset],n[e].parentNode!==this.scroller&&this.$(n[e].parentNode).css(s),s={},s[this.origin.crossSize]=n[e].parentNode[this.origin.crossClient],this.$(n[e]).css(s),l-=n[e][this.origin.offset],u[e]=n[e].parentNode[this.origin.offsetPos],a[e]=a[e-1]||0,h[e]=h[e-1]||Math.min(u[e],0),n[e-1]&&(a[e]+=n[e-1][this.origin.offset],h[e]+=n[e-1][this.origin.offset]),(0!=e||0!=u[e])&&(this.event(n[e],"mousewheel",r,"off"),this.event(n[e],"mousewheel",r));c.limiter&&n[0]&&(this.track&&this.track!=this.scroller?(s={},s[this.origin.pos]=n[0].parentNode[this.origin.offset],this.$(this.track).css(s)):this.barTopLimit=n[0].parentNode[this.origin.offset],this.scroll()),c.limiter===!1&&(this.barTopLimit=0)}var o={element:n,handler:function(){for(var t,s=d(this)[0].parentNode,i=s.offsetTop,e=0;e<n.length;e++)n[e]===this&&(t=e);var r=i-a[t];c.scroll?c.scroll({x1:g.scroller.scrollTop,x2:r}):g.scroller.scrollTop=r},type:"click"};c.clickable&&(this._eventHandlers.push(o),p(o.element,o.type,o.handler,"on"))}var n,l,c={outside:"",inside:"",before:"",after:"",past:"",future:"",radius:0,minView:0},a=[],h=[],u=[],f=this.scroller,p=this.event,d=this.$,g=this;this.on("init",o,t);var v=[],m=[];this.on("init scroll",function(){var t,i,r;if(n){for(var o,f=0;f<n.length;f++)t=0,u[f]-this.pos()<h[f]+c.radius?(t=1,i=a[f]):u[f]-this.pos()>h[f]+l-c.radius?(t=2,i=this.scroller[this.origin.client]-n[f][this.origin.offset]-a[f]-l):(t=3,i=s),r=!1,(u[f]-this.pos()<h[f]||u[f]-this.pos()>h[f]+l)&&(r=!0),(t!=v[f]||r!=m[f])&&(e.call(this,f,i,t),v[f]=t,m[f]=r,o=!0);if(o)for(f=0;f<n.length;f++)1==v[f]&&c.past&&this.$(n[f]).addClass(c.past).removeClass(c.future),2==v[f]&&c.future&&this.$(n[f]).addClass(c.future).removeClass(c.past),3==v[f]?((c.future||c.past)&&this.$(n[f]).removeClass(c.past).removeClass(c.future),c.inside&&this.$(n[f]).addClass(c.inside)):c.inside&&this.$(n[f]).removeClass(c.inside),v[f]!=v[f+1]&&1==v[f]&&c.before?this.$(n[f]).addClass(c.before).removeClass(c.after):v[f]!=v[f-1]&&2==v[f]&&c.after?this.$(n[f]).addClass(c.after).removeClass(c.before):this.$(n[f]).removeClass(c.before).removeClass(c.after),c.grad&&(m[f]?this.$(n[f]).addClass(c.grad):this.$(n[f]).removeClass(c.grad))}}),this.on("resize upd",function(t){o.call(this,t&&t.fix)})};baron.fn.fix=function(t){for(var s=0;this[s];)e.call(this[s],t),s++;return this}}(window),function(t){var s=t.MutationObserver||t.WebKitMutationObserver||t.MozMutationObserver||null,i=function(){function t(){o.root[o.origin.offset]?e():i()}function i(){r||(r=setInterval(function(){o.root[o.origin.offset]&&(e(),o.update())},300))}function e(){clearInterval(r),r=null}var r,o=this;if(!this._au){var n=o._debounce(function(){o.update()},300);this._observer=new s(function(){t(),o.update(),n()}),this.on("init",function(){o._observer.observe(o.root,{childList:!0,subtree:!0,characterData:!0}),t()}),this.on("dispose",function(){o._observer.disconnect(),e(),delete o._observer}),this._au=!0}};baron.fn.autoUpdate=function(t){if(!s)return this;for(var e=0;this[e];)i.call(this[e],t),e++;return this}}(window),function(t,s){var i=function(t){var s,i,e,r,o,n=this;r=t.screen||.9,t.forward&&(s=this.$(t.forward,this.clipper),o={element:s,handler:function(){var s=n.pos()+(t.delta||30);n.pos(s)},type:"click"},this._eventHandlers.push(o),this.event(o.element,o.type,o.handler,"on")),t.backward&&(i=this.$(t.backward,this.clipper),o={element:i,handler:function(){var s=n.pos()-(t.delta||30);n.pos(s)},type:"click"},this._eventHandlers.push(o),this.event(o.element,o.type,o.handler,"on")),t.track&&(e=t.track===!0?this.track:this.$(t.track,this.clipper)[0],e&&(o={element:e,handler:function(t){if(t.target==e){var s=t["offset"+n.origin.x],i=n.bar[n.origin.offsetPos],o=0;i>s?o=-1:s>i+n.bar[n.origin.offset]&&(o=1);var l=n.pos()+o*r*n.scroller[n.origin.client];n.pos(l)}},type:"mousedown"},this._eventHandlers.push(o),this.event(o.element,o.type,o.handler,"on")))};baron.fn.controls=function(t){for(var s=0;this[s];)i.call(this[s],t),s++;return this}}(window);

changelog.md

@@ -0,1 +1,8 @@
+## 2.0.0
+
+ - `impact` default value now always `scroller`.
+ - Mac OS X Firefox support
+ - draggingCls now adds to `root`, not `bar`
+ - second baron init for same direction now always returns existing instance
+
 ## 1.2.1
@@ -2,0 +9,0 @@

package.json

 {
   "name": "baron",
   "description": "A small, fast and crossbrowser custom scrollbar with native system scroll mechanic.",
-  "version": "1.2.1",
+  "version": "2.0.0",
   "readmeFilename": "README.md",
@@ -6,0 +6,0 @@ "homepage": "https://github.com/Diokuz/baron",

readme.md

@@ -13,2 +13,4 @@ [![Build Status](https://travis-ci.org/Diokuz/baron.svg)](https://travis-ci.org/Diokuz/baron)
 
+## [Skins](skins/)
+
 ## Features
@@ -23,103 +25,56 @@
 - Infinite scroll
+- Nested scrollers
 
 Baron just hides the system scrollbar, without removing it. This guarantees scrolling will work on any system.
 
-## Browsers support
+## Simple usage
 
-Baron uses two old `CSS 2.1` technologies: 1) `overflow: scroll` 2) `overflow: hidden`.
+* Include either the development or minified version of `baron.js`:
 
-| <img src="http://diokuz.github.io/pics/chrome.png" width="48px" height="48px" alt="Chrome logo"> | <img src="http://diokuz.github.io/pics/firefox.png" width="48px" height="48px" alt="Firefox logo"> | <img src="http://diokuz.github.io/pics/ie.png" width="48px" height="48px" alt="Internet Explorer logo"> | <img src="http://diokuz.github.io/pics/opera.png" width="48px" height="48px" alt="Opera logo"> | <img src="http://diokuz.github.io/pics/safari.png" width="48px" height="48px" alt="Safari logo"> | <img src="http://diokuz.github.io/pics/android.png" width="48px" height="48px" alt="Android browser logo"> |
-|:---:|:---:|:---:|:---:|:---:|:---:|
-| 1+ ✔ | 1+ ✔ | 6+ ✔ | 9+ ✔ | 5+ ✔ | 4+ ✔ |
+```html
+<script src="baron.js"></script>
+```
 
-`overflow: scroll` not supported by Opera mini and old versions of Android browser (2-). That means, you cannot make scrollable html-elements for them anyway.
+* Initialize baron:
 
-! Also, **Firefox for Mac OS X**, in default non-persistant scrollbar mode [is not supported](https://github.com/Diokuz/baron/issues/110).
+```js
+$('.myScroller').baron();
+```
 
-## 1.0 migration
+## Advanced usage
 
-If you have any problems, just set [`cssGuru`](docs/api.md) option to `true`.
+You can do everything you want with CSS of your custom scrollbar. There some required and recommended css rules (see [base css](baron.css)), dont forget to use them. You also can use predefined [sinks](skins/).
 
-## Simple usage
+## Nested scrollers
 
-If you want only to hide system scrollbar:
+Baron do support nested scrollers. To make scrollers happy, follow the rule:
 
-* Include either the development or minified version of baron.js:
+* Initialize baron instances from ancestor to descendant scrollers order.
 
-```html
-<script src="baron.js"></script>
-```
+Third World War will not begun if you break that rule, but there may be some bad user-experience with baron-instances updates (when size of one scroller depends on size of another). Use `/demo` as example.
 
-* Make some HTML:
+## Browsers support
 
-```html
-<div class="scroller">
-    Your scrollable content here
-</div>
-```
+Baron uses two old `CSS 2.1` technologies: 1) `overflow: scroll` 2) `overflow: hidden`.
 
-* And CSS
+| <img src="http://diokuz.github.io/pics/chrome.png" width="48px" height="48px" alt="Chrome logo"> | <img src="http://diokuz.github.io/pics/firefox.png" width="48px" height="48px" alt="Firefox logo"> | <img src="http://diokuz.github.io/pics/ie.png" width="48px" height="48px" alt="Internet Explorer logo"> | <img src="http://diokuz.github.io/pics/opera.png" width="48px" height="48px" alt="Opera logo"> | <img src="http://diokuz.github.io/pics/safari.png" width="48px" height="48px" alt="Safari logo"> | <img src="http://diokuz.github.io/pics/android.png" width="48px" height="48px" alt="Android browser logo"> |
+|:---:|:---:|:---:|:---:|:---:|:---:|
+| 1+ ✔ | 1+ ✔ | 6+ ✔ | 9+ ✔ | 5+ ✔ | 4+ ✔ |
 
-```css
-.scroller::-webkit-scrollbar { /* For Mac OS X styled scrollbars */
-    width: 0;
-}
-```
+`overflow: scroll` not supported by Opera mini and old versions of Android browser (2-). That means, you cannot make scrollable html-elements for them anyway.
 
-* Initialize baron:
+Firefox for Mac OS X now [supported](https://github.com/Diokuz/baron/issues/110).
 
-```js
-$('.scroller').baron();
-```
+## 2.0 migration
 
-## Advanced usage
+`impact` param default value changed to `scroller` for all directions. That impact horizontal scrollbars.
 
-```html
-<div class="scroller">
-    Your scrollable content here
-    <div class="scroller__track"><!-- Track is optional -->
-        <div class="scroller__bar"></div>
-    </div>
-</div>
-```
+If you use % cross-paddings (padding-left and padding-right for vertical direction) for scroller, it will be buggy in Mac OS X Firefox because of need for extra-padding to support it. Use pixels instead, or make html-container inside scroller.
 
-```css
-.scroller {
-    overflow-y: scroll;
-    -ms-overflow-style: none; /* better feel in ie10+ in some rare cases */
-    /* -webkit-overflow-scrolling: touch; *//* uncomment to accelerate scrolling on iOS */
-}
-.scroller::-webkit-scrollbar { /* For Mac OS X styled scrollbars */
-    width: 0;
-}
-.scroller__track {
-    display: none; /* Invisible by default */
-    position: absolute;
-    right: 4px;
-    top: 10px;
-    bottom: 4px;
-    width: 10px;
-    background: rgba(0, 0, 0, .1);
-}
-.baron > .scroller__track {
-    display: block; /* Visible when scrolling is possible */
-}
-.scroller__bar { /* The bar. You should define width, right position and background */
-    position: absolute;    
-    z-index: 1;
-    right: 0;
-    width: 10px;
-    background: #999;
-}
-```
+Also, checkout [changelog](changelog.md).
 
-You can specify some parameters on baron initialization:
+## 1.0 migration
 
-```js
-$('.scroller').baron(params);
+If you have any problems, just set [`cssGuru`](docs/api.md) option to `true`.
 
-// or
-var scroll = baron(params);
-```
-
 ## [Chaining](docs/chaining.md)
@@ -126,0 +81,0 @@

src/autoUpdate.js

@@ -9,2 +9,6 @@ /* Autoupdate plugin for baron 0.6+ */
 
+        if (this._au) {
+            return;
+        }
+
         function actualizeWatcher() {
@@ -65,2 +69,4 @@ if (!self.root[self.origin.offset]) {
         });
+
+        this._au = true;
     };
@@ -67,0 +73,0 @@

src/core.js

@@ -32,2 +32,9 @@ (function(window, undefined) {
 
+    // Some ugly vars
+    var opera12maxScrollbarSize = 17;
+    // I hate you https://github.com/Diokuz/baron/issues/110
+    var macmsxffScrollbarSize = 15;
+    var macosxffRe = /[\s\S]*Macintosh[\s\S]*\) Gecko[\s\S]*/;
+    var isMacFF = macosxffRe.test(window.navigator.userAgent);
+
     // window.baron and jQuery.fn.baron points to this function
@@ -37,7 +44,7 @@ function baron(params) {
         var roots;
-        var empty = !params;
+        var withParams = !!params;
         var defaultParams = {
             $: window.jQuery,
             direction: 'v',
-            barOnCls: 'baron',
+            barOnCls: '_scrollbar',
             resizeDebounce: 0,
@@ -47,3 +54,4 @@ event: function(elem, event, func, mode) {
             },
-            cssGuru: false
+            cssGuru: false,
+            impact: 'scroller'
         };
@@ -68,5 +76,5 @@
 
-        var instance = new baron.fn.constructor(roots, params, empty);
+        var instance = new baron.fn.constructor(roots, params, withParams);
 
-        if (instance.autoUpdate && !empty) {
+        if (instance.autoUpdate) {
             instance.autoUpdate();
@@ -97,3 +105,3 @@ }
     baron.fn = {
-        constructor: function(roots, totalParams, noUserParams) {
+        constructor: function(roots, totalParams, withParams) {
             var params = clone(totalParams);
@@ -114,5 +122,10 @@
 
-                // baron() without params can return existing instances,
-                // but baron(params) will throw an Error as a second initialization
-                if (id == id && attr != undefined && instances[id] && noUserParams) {
+                // baron() can return existing instances,
+                // @TODO update params on-the-fly
+                // https://github.com/Diokuz/baron/issues/124
+                if (id == id && attr != undefined && instances[id]) {
+                    if (withParams) {
+                        console.log('Error! Baron for this node already initialized', totalParams.root);
+                    }
+
                     this[i] = instances[id];
@@ -126,3 +139,4 @@ } else {
                         if (!perInstanceParams.scroller.length) {
-                            perInstanceParams.scroller = root;
+                            console.log('Scroller not found!', root, params.scroller);
+                            return;
                         }
@@ -215,3 +229,3 @@ } else {
                     if (item.draggingCls) {
-                        $(item.bar).addClass(item.draggingCls);
+                        $(item.root).addClass(item.draggingCls);
                     }
@@ -229,3 +243,3 @@ },
                     if (item.draggingCls) {
-                        $(item.bar).removeClass(item.draggingCls);
+                        $(item.root).removeClass(item.draggingCls);
                     }
@@ -324,6 +338,2 @@ },
     function init(params) {
-        if (manageAttr(params.root, params.direction)) {
-            console.log('Error! Baron for this node already initialized', params.root);
-        }
-
         // __proto__ of returning object is baron.prototype
@@ -597,5 +607,10 @@ var out = new item.prototype.constructor(params);
                     var client = self.scroller[self.origin.crossClient];
+                    var padding = 0;
 
+                    // https://github.com/Diokuz/baron/issues/110
+                    if (isMacFF) {
+                        padding = macmsxffScrollbarSize;
+
                     // Opera 12 bug https://github.com/Diokuz/baron/issues/105
-                    if (client > 0 && offset === 0) {
+                    } else if (client > 0 && offset === 0) {
                         // Only Opera 12 in some rare nested flexbox cases goes here
@@ -606,3 +621,3 @@ // Sorry guys for magic,
                         // 17px for Windows XP-8.1, 15px for Mac (really rare).
-                        offset = client + 17;
+                        offset = client + opera12maxScrollbarSize;
                     }
@@ -614,11 +629,6 @@
 
-                        // Two different appropches
-                        var fixScroller = self.impact ?
-                            (self.impact == 'scroller') :
-                            (self.direction == 'v');
+                        if (self.impact == 'scroller') { // scroller
+                            var delta = offset - client + padding;
 
-                        if (fixScroller) { // scroller
-                            var delta = offset - client;
-
-                            was = $(self.clipper).css(self.origin.crossSize);
+                            was = $(self.scroller).css(self.origin.crossSize);
                             will = self.clipper[self.origin.crossClient] + delta + 'px';
@@ -700,3 +710,3 @@
 
-                // clipper.scrollLeft = initial scroll position (0 for ltr, 17 for rtl)
+                // clipper.scrollLeft = initial scroll position (0 for ltr, 20 for rtl)
                 this.clipper[this.origin.scrollEdge] = this.scrollEdge;
@@ -741,2 +751,25 @@ };
 
+            // onInit actions
+            this._dumbCss(true);
+
+            if (isMacFF) {
+                var padding = 'paddingRight';
+                var css = {};
+                var paddingWas = window.getComputedStyle(this.scroller)[[padding]];
+                var delta = this.scroller[this.origin.crossOffset] -
+                            this.scroller[this.origin.crossClient];
+
+                if (params.direction == 'h') {
+                    padding = 'paddingBottom';
+                } else if (params.rtl) {
+                    padding = 'paddingLeft';
+                }
+
+                // getComputedStyle is ie9+, but we here only in f ff
+                var numWas = parseInt(paddingWas, 10);
+                if (numWas != numWas) numWas = 0;
+                css[padding] = (macmsxffScrollbarSize + numWas) + 'px';
+                $(this.scroller).css(css);
+            }
+
             return this;
@@ -749,3 +782,2 @@ },
 
-            this._dumbCss(true);
             this.resize(1);
@@ -799,3 +831,3 @@ this.updatePositions();
 
-    baron.version = '1.2.1';
+    baron.version = '2.0.0';
 
@@ -802,0 +834,0 @@ if ($ && $.fn) { // Adding baron to jQuery as plugin

No alert changes

Improved metrics

Total package byte prevSize

123733

increased by4.06%

Number of package files

15

increased by15.38%

Lines of code

2504

increased by7.93%

Worsened metrics

Number of lines in readme file

87

decreased by-34.09%

No dependency changes