--- /dev/null
+/*! Copyright (c) 2011 Piotr Rochala (http://rocha.la)
+ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
+ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+ *
+ * Version: 1.3.8
+ *
+ */
+(function($) {
+
+ $.fn.extend({
+ slimScroll: function(options) {
+
+ var defaults = {
+
+ // width in pixels of the visible scroll area
+ width : 'auto',
+
+ // height in pixels of the visible scroll area
+ height : '250px',
+
+ // width in pixels of the scrollbar and rail
+ size : '7px',
+
+ // scrollbar color, accepts any hex/color value
+ color: '#000',
+
+ // scrollbar position - left/right
+ position : 'right',
+
+ // distance in pixels between the side edge and the scrollbar
+ distance : '1px',
+
+ // default scroll position on load - top / bottom / $('selector')
+ start : 'top',
+
+ // sets scrollbar opacity
+ opacity : .4,
+
+ // enables always-on mode for the scrollbar
+ alwaysVisible : false,
+
+ // check if we should hide the scrollbar when user is hovering over
+ disableFadeOut : false,
+
+ // sets visibility of the rail
+ railVisible : false,
+
+ // sets rail color
+ railColor : '#333',
+
+ // sets rail opacity
+ railOpacity : .2,
+
+ // whether we should use jQuery UI Draggable to enable bar dragging
+ railDraggable : true,
+
+ // defautlt CSS class of the slimscroll rail
+ railClass : 'slimScrollRail',
+
+ // defautlt CSS class of the slimscroll bar
+ barClass : 'slimScrollBar',
+
+ // defautlt CSS class of the slimscroll wrapper
+ wrapperClass : 'slimScrollDiv',
+
+ // check if mousewheel should scroll the window if we reach top/bottom
+ allowPageScroll : false,
+
+ // scroll amount applied to each mouse wheel step
+ wheelStep : 20,
+
+ // scroll amount applied when user is using gestures
+ touchScrollStep : 200,
+
+ // sets border radius
+ borderRadius: '7px',
+
+ // sets border radius of the rail
+ railBorderRadius : '7px'
+ };
+
+ var o = $.extend(defaults, options);
+
+ // do it for every element that matches selector
+ this.each(function(){
+
+ var isOverPanel, isOverBar, isDragg, queueHide, touchDif,
+ barHeight, percentScroll, lastScroll,
+ divS = '<div></div>',
+ minBarHeight = 30,
+ releaseScroll = false;
+
+ // used in event handlers and for better minification
+ var me = $(this);
+
+ // ensure we are not binding it again
+ if (me.parent().hasClass(o.wrapperClass))
+ {
+ // start from last bar position
+ var offset = me.scrollTop();
+
+ // find bar and rail
+ bar = me.siblings('.' + o.barClass);
+ rail = me.siblings('.' + o.railClass);
+
+ getBarHeight();
+
+ // check if we should scroll existing instance
+ if ($.isPlainObject(options))
+ {
+ // Pass height: auto to an existing slimscroll object to force a resize after contents have changed
+ if ( 'height' in options && options.height == 'auto' ) {
+ me.parent().css('height', 'auto');
+ me.css('height', 'auto');
+ var height = me.parent().parent().height();
+ me.parent().css('height', height);
+ me.css('height', height);
+ } else if ('height' in options) {
+ var h = options.height;
+ me.parent().css('height', h);
+ me.css('height', h);
+ }
+
+ if ('scrollTo' in options)
+ {
+ // jump to a static point
+ offset = parseInt(o.scrollTo);
+ }
+ else if ('scrollBy' in options)
+ {
+ // jump by value pixels
+ offset += parseInt(o.scrollBy);
+ }
+ else if ('destroy' in options)
+ {
+ // remove slimscroll elements
+ bar.remove();
+ rail.remove();
+ me.unwrap();
+ return;
+ }
+
+ // scroll content by the given offset
+ scrollContent(offset, false, true);
+ }
+
+ return;
+ }
+ else if ($.isPlainObject(options))
+ {
+ if ('destroy' in options)
+ {
+ return;
+ }
+ }
+
+ // optionally set height to the parent's height
+ o.height = (o.height == 'auto') ? me.parent().height() : o.height;
+
+ // wrap content
+ var wrapper = $(divS)
+ .addClass(o.wrapperClass)
+ .css({
+ position: 'relative',
+ overflow: 'hidden',
+ width: o.width,
+ height: o.height
+ });
+
+ // update style for the div
+ me.css({
+ overflow: 'hidden',
+ width: o.width,
+ height: o.height
+ });
+
+ // create scrollbar rail
+ var rail = $(divS)
+ .addClass(o.railClass)
+ .css({
+ width: o.size,
+ height: '100%',
+ position: 'absolute',
+ top: 0,
+ display: (o.alwaysVisible && o.railVisible) ? 'block' : 'none',
+ 'border-radius': o.railBorderRadius,
+ background: o.railColor,
+ opacity: o.railOpacity,
+ zIndex: 90
+ });
+
+ // create scrollbar
+ var bar = $(divS)
+ .addClass(o.barClass)
+ .css({
+ background: o.color,
+ width: o.size,
+ position: 'absolute',
+ top: 0,
+ opacity: o.opacity,
+ display: o.alwaysVisible ? 'block' : 'none',
+ 'border-radius' : o.borderRadius,
+ BorderRadius: o.borderRadius,
+ MozBorderRadius: o.borderRadius,
+ WebkitBorderRadius: o.borderRadius,
+ zIndex: 99
+ });
+
+ // set position
+ var posCss = (o.position == 'right') ? { right: o.distance } : { left: o.distance };
+ rail.css(posCss);
+ bar.css(posCss);
+
+ // wrap it
+ me.wrap(wrapper);
+
+ // append to parent div
+ me.parent().append(bar);
+ me.parent().append(rail);
+
+ // make it draggable and no longer dependent on the jqueryUI
+ if (o.railDraggable){
+ bar.bind("mousedown", function(e) {
+ var $doc = $(document);
+ isDragg = true;
+ t = parseFloat(bar.css('top'));
+ pageY = e.pageY;
+
+ $doc.bind("mousemove.slimscroll", function(e){
+ currTop = t + e.pageY - pageY;
+ bar.css('top', currTop);
+ scrollContent(0, bar.position().top, false);// scroll content
+ });
+
+ $doc.bind("mouseup.slimscroll", function(e) {
+ isDragg = false;hideBar();
+ $doc.unbind('.slimscroll');
+ });
+ return false;
+ }).bind("selectstart.slimscroll", function(e){
+ e.stopPropagation();
+ e.preventDefault();
+ return false;
+ });
+ }
+
+ // on rail over
+ rail.hover(function(){
+ showBar();
+ }, function(){
+ hideBar();
+ });
+
+ // on bar over
+ bar.hover(function(){
+ isOverBar = true;
+ }, function(){
+ isOverBar = false;
+ });
+
+ // show on parent mouseover
+ me.hover(function(){
+ isOverPanel = true;
+ showBar();
+ hideBar();
+ }, function(){
+ isOverPanel = false;
+ hideBar();
+ });
+
+ // support for mobile
+ me.bind('touchstart', function(e,b){
+ if (e.originalEvent.touches.length)
+ {
+ // record where touch started
+ touchDif = e.originalEvent.touches[0].pageY;
+ }
+ });
+
+ me.bind('touchmove', function(e){
+ // prevent scrolling the page if necessary
+ if(!releaseScroll)
+ {
+ e.originalEvent.preventDefault();
+ }
+ if (e.originalEvent.touches.length)
+ {
+ // see how far user swiped
+ var diff = (touchDif - e.originalEvent.touches[0].pageY) / o.touchScrollStep;
+ // scroll content
+ scrollContent(diff, true);
+ touchDif = e.originalEvent.touches[0].pageY;
+ }
+ });
+
+ // set up initial height
+ getBarHeight();
+
+ // check start position
+ if (o.start === 'bottom')
+ {
+ // scroll content to bottom
+ bar.css({ top: me.outerHeight() - bar.outerHeight() });
+ scrollContent(0, true);
+ }
+ else if (o.start !== 'top')
+ {
+ // assume jQuery selector
+ scrollContent($(o.start).position().top, null, true);
+
+ // make sure bar stays hidden
+ if (!o.alwaysVisible) { bar.hide(); }
+ }
+
+ // attach scroll events
+ attachWheel(this);
+
+ function _onWheel(e)
+ {
+ // use mouse wheel only when mouse is over
+ if (!isOverPanel) { return; }
+
+ var e = e || window.event;
+
+ var delta = 0;
+ if (e.wheelDelta) { delta = -e.wheelDelta/120; }
+ if (e.detail) { delta = e.detail / 3; }
+
+ var target = e.target || e.srcTarget || e.srcElement;
+ if ($(target).closest('.' + o.wrapperClass).is(me.parent())) {
+ // scroll content
+ scrollContent(delta, true);
+ }
+
+ // stop window scroll
+ if (e.preventDefault && !releaseScroll) { e.preventDefault(); }
+ if (!releaseScroll) { e.returnValue = false; }
+ }
+
+ function scrollContent(y, isWheel, isJump)
+ {
+ releaseScroll = false;
+ var delta = y;
+ var maxTop = me.outerHeight() - bar.outerHeight();
+
+ if (isWheel)
+ {
+ // move bar with mouse wheel
+ delta = parseInt(bar.css('top')) + y * parseInt(o.wheelStep) / 100 * bar.outerHeight();
+
+ // move bar, make sure it doesn't go out
+ delta = Math.min(Math.max(delta, 0), maxTop);
+
+ // if scrolling down, make sure a fractional change to the
+ // scroll position isn't rounded away when the scrollbar's CSS is set
+ // this flooring of delta would happened automatically when
+ // bar.css is set below, but we floor here for clarity
+ delta = (y > 0) ? Math.ceil(delta) : Math.floor(delta);
+
+ // scroll the scrollbar
+ bar.css({ top: delta + 'px' });
+ }
+
+ // calculate actual scroll amount
+ percentScroll = parseInt(bar.css('top')) / (me.outerHeight() - bar.outerHeight());
+ delta = percentScroll * (me[0].scrollHeight - me.outerHeight());
+
+ if (isJump)
+ {
+ delta = y;
+ var offsetTop = delta / me[0].scrollHeight * me.outerHeight();
+ offsetTop = Math.min(Math.max(offsetTop, 0), maxTop);
+ bar.css({ top: offsetTop + 'px' });
+ }
+
+ // scroll content
+ me.scrollTop(delta);
+
+ // fire scrolling event
+ me.trigger('slimscrolling', ~~delta);
+
+ // ensure bar is visible
+ showBar();
+
+ // trigger hide when scroll is stopped
+ hideBar();
+ }
+
+ function attachWheel(target)
+ {
+ if (window.addEventListener)
+ {
+ target.addEventListener('DOMMouseScroll', _onWheel, false );
+ target.addEventListener('mousewheel', _onWheel, false );
+ }
+ else
+ {
+ document.attachEvent("onmousewheel", _onWheel)
+ }
+ }
+
+ function getBarHeight()
+ {
+ // calculate scrollbar height and make sure it is not too small
+ barHeight = Math.max((me.outerHeight() / me[0].scrollHeight) * me.outerHeight(), minBarHeight);
+ bar.css({ height: barHeight + 'px' });
+
+ // hide scrollbar if content is not long enough
+ var display = barHeight == me.outerHeight() ? 'none' : 'block';
+ bar.css({ display: display });
+ }
+
+ function showBar()
+ {
+ // recalculate bar height
+ getBarHeight();
+ clearTimeout(queueHide);
+
+ // when bar reached top or bottom
+ if (percentScroll == ~~percentScroll)
+ {
+ //release wheel
+ releaseScroll = o.allowPageScroll;
+
+ // publish approporiate event
+ if (lastScroll != percentScroll)
+ {
+ var msg = (~~percentScroll == 0) ? 'top' : 'bottom';
+ me.trigger('slimscroll', msg);
+ }
+ }
+ else
+ {
+ releaseScroll = false;
+ }
+ lastScroll = percentScroll;
+
+ // show only when required
+ if(barHeight >= me.outerHeight()) {
+ //allow window scroll
+ releaseScroll = true;
+ return;
+ }
+ bar.stop(true,true).fadeIn('fast');
+ if (o.railVisible) { rail.stop(true,true).fadeIn('fast'); }
+ }
+
+ function hideBar()
+ {
+ // only hide when options allow it
+ if (!o.alwaysVisible)
+ {
+ queueHide = setTimeout(function(){
+ if (!(o.disableFadeOut && isOverPanel) && !isOverBar && !isDragg)
+ {
+ bar.fadeOut('slow');
+ rail.fadeOut('slow');
+ }
+ }, 1000);
+ }
+ }
+
+ });
+
+ // maintain chainability
+ return this;
+ }
+ });
+
+ $.fn.extend({
+ slimscroll: $.fn.slimScroll
+ });
+
+})(jQuery);
Code Review / stor4nfv.git / blobdiff