[Summary view] [Print] [Text view]

   1  /*! Copyright (c) 2011 Piotr Rochala (http://rocha.la)
   2   * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
   3   * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
   4   *
   5   * Version: 0.5.0
   6   * 
   7   */
   8  (function($) {
   9  
  10    jQuery.fn.extend({
  11      slimScroll: function(options) {
  12  
  13        var defaults = {
  14          wheelStep : 20,
  15          width : 'auto',
  16          height : '250px',
  17          size : '7px',
  18          color: '#000',
  19          position : 'right',
  20          distance : '1px',
  21          start : 'top',
  22          opacity : .4,
  23          alwaysVisible : false,
  24          railVisible : false,
  25          railColor : '#333',
  26          railOpacity : '0.2',
  27          railClass : 'slimScrollRail',
  28          barClass : 'slimScrollBar',
  29          wrapperClass : 'slimScrollDiv',
  30          allowPageScroll: false,
  31          scroll: 0
  32        };
  33  
  34        var o = ops = $.extend( defaults , options );
  35  
  36        // do it for every element that matches selector
  37        this.each(function(){
  38  
  39        var isOverPanel, isOverBar, isDragg, queueHide, barHeight, percentScroll,
  40          divS = '<div></div>',
  41          minBarHeight = 30,
  42          releaseScroll = false,
  43          wheelStep = parseInt(o.wheelStep),
  44          cwidth = o.width,
  45          cheight = o.height,
  46          size = o.size,
  47          color = o.color,
  48          position = o.position,
  49          distance = o.distance,
  50          start = o.start,
  51          opacity = o.opacity,
  52          alwaysVisible = o.alwaysVisible,
  53          railVisible = o.railVisible,
  54          railColor = o.railColor,
  55          railOpacity = o.railOpacity,
  56          allowPageScroll = o.allowPageScroll,
  57          scroll = o.scroll;
  58        
  59          // used in event handlers and for better minification
  60          var me = $(this);
  61  
  62          //ensure we are not binding it again
  63          if (me.parent().hasClass('slimScrollDiv'))
  64          {
  65              //check if we should scroll existing instance
  66              if (scroll)
  67              {
  68                  //find bar and rail
  69                  bar = me.parent().find('.slimScrollBar');
  70                  rail = me.parent().find('.slimScrollRail');
  71  
  72                  //scroll by given amount of pixels
  73                  scrollContent( me.scrollTop() + parseInt(scroll), false, true);
  74              }
  75  
  76              return;
  77          }
  78  
  79          // wrap content
  80          var wrapper = $(divS)
  81            .addClass( o.wrapperClass )
  82            .css({
  83              position: 'relative',
  84              overflow: 'hidden',
  85              width: cwidth,
  86              height: cheight
  87            });
  88  
  89          // update style for the div
  90          me.css({
  91            overflow: 'hidden',
  92            width: cwidth,
  93            height: cheight
  94          });
  95  
  96          // create scrollbar rail
  97          var rail  = $(divS)
  98            .addClass( o.railClass )
  99            .css({
 100              width: size,
 101              height: '100%',
 102              position: 'absolute',
 103              top: 0,
 104              display: (alwaysVisible && railVisible) ? 'block' : 'none',
 105              'border-radius': size,
 106              background: railColor,
 107              opacity: railOpacity,
 108              zIndex: 90
 109            });
 110  
 111          // create scrollbar
 112          var bar = $(divS)
 113            .addClass( o.barClass )
 114            .css({
 115              background: color,
 116              width: size,
 117              position: 'absolute',
 118              top: 0,
 119              opacity: opacity,
 120              display: alwaysVisible ? 'block' : 'none',
 121              'border-radius' : size,
 122              BorderRadius: size,
 123              MozBorderRadius: size,
 124              WebkitBorderRadius: size,
 125              zIndex: 99
 126            });
 127  
 128          // set position
 129          var posCss = (position == 'right') ? { right: distance } : { left: distance };
 130          rail.css(posCss);
 131          bar.css(posCss);
 132  
 133          // wrap it
 134          me.wrap(wrapper);
 135  
 136          // append to parent div
 137          me.parent().append(bar);
 138          me.parent().append(rail);
 139  
 140          // make it draggable
 141          bar.draggable({ 
 142            axis: 'y', 
 143            containment: 'parent',
 144            start: function() { isDragg = true; },
 145            stop: function() { isDragg = false; hideBar(); },
 146            drag: function(e) 
 147            { 
 148              // scroll content
 149              scrollContent(0, $(this).position().top, false);
 150            }
 151          });
 152  
 153          // on rail over
 154          rail.hover(function(){
 155            showBar();
 156          }, function(){
 157            hideBar();
 158          });
 159  
 160          // on bar over
 161          bar.hover(function(){
 162            isOverBar = true;
 163          }, function(){
 164            isOverBar = false;
 165          });
 166  
 167          // show on parent mouseover
 168          me.hover(function(){
 169            isOverPanel = true;
 170            showBar();
 171            //Vtiger Customization : So that the bar will not hide if you hover and stay on container
 172            //we should not hide the container
 173            //hideBar();
 174          }, function(){
 175            isOverPanel = false;
 176            hideBar();
 177          });
 178  
 179          var _onWheel = function(e)
 180          {
 181            // use mouse wheel only when mouse is over
 182            if (!isOverPanel) { return; }
 183  
 184            var e = e || window.event;
 185  
 186            var delta = 0;
 187            if (e.wheelDelta) { delta = -e.wheelDelta/120; }
 188            if (e.detail) { delta = e.detail / 3; }
 189  
 190            // scroll content
 191            scrollContent(delta, true);
 192  
 193            // stop window scroll
 194            if (e.preventDefault && !releaseScroll) { e.preventDefault(); }
 195            if (!releaseScroll) { e.returnValue = false; }
 196          }
 197  
 198          function scrollContent(y, isWheel, isJump)
 199          {
 200            var delta = y;
 201  
 202            if (isWheel)
 203            {
 204              // move bar with mouse wheel
 205              delta = parseInt(bar.css('top')) + y * wheelStep / 100 * bar.outerHeight();
 206  
 207              // move bar, make sure it doesn't go out
 208              var maxTop = me.outerHeight() - bar.outerHeight();
 209              delta = Math.min(Math.max(delta, 0), maxTop);
 210  
 211              // scroll the scrollbar
 212              bar.css({ top: delta + 'px' });
 213            }
 214  
 215            // calculate actual scroll amount
 216            percentScroll = parseInt(bar.css('top')) / (me.outerHeight() - bar.outerHeight());
 217            delta = percentScroll * (me[0].scrollHeight - me.outerHeight());
 218  
 219            if (isJump)
 220            {
 221              delta = y;
 222              var offsetTop = delta / me[0].scrollHeight * me.outerHeight();
 223              bar.css({ top: offsetTop + 'px' });
 224            }
 225  
 226            // scroll content
 227            me.scrollTop(delta);
 228  
 229            // ensure bar is visible
 230            showBar();
 231  
 232            // trigger hide when scroll is stopped
 233            //Vtiger Customization : So that the bar will not hide if you hover and stay on container
 234            //we should not hide the container
 235            //hideBar();
 236          }
 237  
 238          var attachWheel = function()
 239          {
 240            if (window.addEventListener)
 241            {
 242              this.addEventListener('DOMMouseScroll', _onWheel, false );
 243              this.addEventListener('mousewheel', _onWheel, false );
 244            } 
 245            else
 246            {
 247              document.attachEvent("onmousewheel", _onWheel)
 248            }
 249          }
 250  
 251          // attach scroll events
 252          attachWheel();
 253  
 254          function getBarHeight()
 255          {
 256            // calculate scrollbar height and make sure it is not too small
 257            barHeight = Math.max((me.outerHeight() / me[0].scrollHeight) * me.outerHeight(), minBarHeight);
 258            bar.css({ height: barHeight + 'px' });
 259          }
 260  
 261          // set up initial height
 262          getBarHeight();
 263  
 264          function showBar()
 265          {
 266            // recalculate bar height
 267            getBarHeight();
 268            clearTimeout(queueHide);
 269  
 270            // release wheel when bar reached top or bottom
 271            releaseScroll = allowPageScroll && percentScroll == ~~ percentScroll;
 272  
 273            // show only when required
 274            if(barHeight >= me.outerHeight()) {
 275              //allow window scroll
 276              releaseScroll = true;
 277              return;
 278            }
 279            bar.stop(true,true).fadeIn('fast');
 280            if (railVisible) { rail.stop(true,true).fadeIn('fast'); }
 281          }
 282  
 283          function hideBar()
 284          {
 285            // only hide when options allow it
 286            if (!alwaysVisible)
 287            {
 288              queueHide = setTimeout(function(){
 289                if (!isOverBar && !isDragg) 
 290                { 
 291                  bar.fadeOut('slow');
 292                  rail.fadeOut('slow');
 293                }
 294              }, 1000);
 295            }
 296          }
 297  
 298          // check start position
 299          if (start == 'bottom') 
 300          {
 301            // scroll content to bottom
 302            bar.css({ top: me.outerHeight() - bar.outerHeight() });
 303            scrollContent(0, true);
 304          }
 305          else if (typeof start == 'object')
 306          {
 307            // scroll content
 308            scrollContent($(start).position().top, null, true);
 309  
 310            // make sure bar stays hidden
 311            if (!alwaysVisible) { bar.hide(); }
 312          }
 313        });
 314        
 315        // maintain chainability
 316        return this;
 317      }
 318    });
 319  
 320    jQuery.fn.extend({
 321      slimscroll: jQuery.fn.slimScroll
 322    });
 323  
 324  })(jQuery);