210 lines
		
	
	
		
			7.7 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
		
		
			
		
	
	
			210 lines
		
	
	
		
			7.7 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
|  | /* | ||
|  |  * Tiny Scrollbar 1.8 | ||
|  |  * http://www.baijs.nl/tinyscrollbar/
 | ||
|  |  * | ||
|  |  * Copyright 2012, Maarten Baijs | ||
|  |  * Dual licensed under the MIT or GPL Version 2 licenses. | ||
|  |  * http://www.opensource.org/licenses/mit-license.php
 | ||
|  |  * http://www.opensource.org/licenses/gpl-2.0.php
 | ||
|  |  * | ||
|  |  * Date: 26 / 07 / 2012 | ||
|  |  * Depends on library: jQuery | ||
|  |  * | ||
|  |  */ | ||
|  | ( function( $ )  | ||
|  | { | ||
|  |     $.tiny = $.tiny || { }; | ||
|  | 
 | ||
|  |     $.tiny.scrollbar = { | ||
|  |         options: { | ||
|  |                 axis       : 'y'    // vertical or horizontal scrollbar? ( x || y ).
 | ||
|  |             ,   wheel      : 40     // how many pixels must the mouswheel scroll at a time.
 | ||
|  |             ,   scroll     : true   // enable or disable the mousewheel.
 | ||
|  |             ,   lockscroll : true   // return scrollwheel to browser if there is no more content.
 | ||
|  |             ,   size       : 'auto' // set the size of the scrollbar to auto or a fixed number.
 | ||
|  |             ,   sizethumb  : 'auto' // set the size of the thumb to auto or a fixed number.
 | ||
|  |             ,   onMove     : function(){} | ||
|  |         } | ||
|  |     }; | ||
|  | 
 | ||
|  |     $.fn.tinyscrollbar = function( params ) | ||
|  |     { | ||
|  |         var options = $.extend( {}, $.tiny.scrollbar.options, params ); | ||
|  |          | ||
|  |         this.each( function() | ||
|  |         {  | ||
|  |             $( this ).data('tsb', new Scrollbar( $( this ), options ) );  | ||
|  |         }); | ||
|  | 
 | ||
|  |         return this; | ||
|  |     }; | ||
|  | 
 | ||
|  |     $.fn.tinyscrollbar_update = function(sScroll) | ||
|  |     { | ||
|  |         return $( this ).data( 'tsb' ).update( sScroll );  | ||
|  |     }; | ||
|  | 
 | ||
|  |     function Scrollbar( root, options ) | ||
|  |     { | ||
|  |         var oSelf       = this | ||
|  |         ,   oWrapper    = root | ||
|  |         ,   oViewport   = { obj: $( '.viewport', root ) } | ||
|  |         ,   oContent    = { obj: $( '.overview', root ) } | ||
|  |         ,   oScrollbar  = { obj: $( '.scrollbar', root ) } | ||
|  |         ,   oTrack      = { obj: $( '.track', oScrollbar.obj ) } | ||
|  |         ,   oThumb      = { obj: $( '.thumb', oScrollbar.obj ) } | ||
|  |         ,   sAxis       = options.axis === 'x' | ||
|  |         ,   sDirection  = sAxis ? 'left' : 'top' | ||
|  |         ,   sSize       = sAxis ? 'Width' : 'Height' | ||
|  |         ,   iScroll     = 0 | ||
|  |         ,   iPosition   = { start: 0, now: 0 } | ||
|  |         ,   iMouse      = {} | ||
|  |         ,   touchEvents = ( 'ontouchstart' in document.documentElement ) ? true : false | ||
|  |         ; | ||
|  | 
 | ||
|  |         function initialize() | ||
|  |         { | ||
|  |             oSelf.update(); | ||
|  |             setEvents(); | ||
|  |             return oSelf; | ||
|  |         } | ||
|  | 
 | ||
|  |         this.update = function( sScroll ) | ||
|  |         { | ||
|  |             oViewport[ options.axis ] = oViewport.obj[0][ 'offset'+ sSize ]; | ||
|  |             oContent[ options.axis ]  = oContent.obj[0][ 'scroll'+ sSize ]; | ||
|  |             oContent.ratio            = oViewport[ options.axis ] / oContent[ options.axis ]; | ||
|  | 
 | ||
|  |             oScrollbar.obj.toggleClass( 'disable', oContent.ratio >= 1 ); | ||
|  | 
 | ||
|  |             oTrack[ options.axis ] = options.size === 'auto' ? oViewport[ options.axis ] : options.size; | ||
|  |             oThumb[ options.axis ] = Math.min( oTrack[ options.axis ], Math.max( 0, ( options.sizethumb === 'auto' ? ( oTrack[ options.axis ] * oContent.ratio ) : options.sizethumb ) ) ); | ||
|  |          | ||
|  |             oScrollbar.ratio = options.sizethumb === 'auto' ? ( oContent[ options.axis ] / oTrack[ options.axis ] ) : ( oContent[ options.axis ] - oViewport[ options.axis ] ) / ( oTrack[ options.axis ] - oThumb[ options.axis ] ); | ||
|  |              | ||
|  |             iScroll = ( sScroll === 'relative' && oContent.ratio <= 1 ) ? Math.min( ( oContent[ options.axis ] - oViewport[ options.axis ] ), Math.max( 0, iScroll )) : 0; | ||
|  |             iScroll = ( sScroll === 'bottom' && oContent.ratio <= 1 ) ? ( oContent[ options.axis ] - oViewport[ options.axis ] ) : isNaN( parseInt( sScroll, 10 ) ) ? iScroll : parseInt( sScroll, 10 ); | ||
|  |              | ||
|  |             setSize(); | ||
|  |         }; | ||
|  | 
 | ||
|  |         function setSize() | ||
|  |         { | ||
|  |             var sCssSize = sSize.toLowerCase(); | ||
|  | 
 | ||
|  |             oThumb.obj.css( sDirection, iScroll / oScrollbar.ratio ); | ||
|  |             oContent.obj.css( sDirection, -iScroll ); | ||
|  |             iMouse.start = oThumb.obj.offset()[ sDirection ]; | ||
|  | 
 | ||
|  |             oScrollbar.obj.css( sCssSize, oTrack[ options.axis ] ); | ||
|  |             oTrack.obj.css( sCssSize, oTrack[ options.axis ] ); | ||
|  |             oThumb.obj.css( sCssSize, oThumb[ options.axis ] ); | ||
|  |         } | ||
|  | 
 | ||
|  |         function setEvents() | ||
|  |         { | ||
|  |             if( ! touchEvents ) | ||
|  |             { | ||
|  |                 oThumb.obj.bind( 'mousedown', start ); | ||
|  |                 oTrack.obj.bind( 'mouseup', drag ); | ||
|  |             } | ||
|  |             else | ||
|  |             { | ||
|  |                 oViewport.obj[0].ontouchstart = function( event ) | ||
|  |                 {    | ||
|  |                     if( 1 === event.touches.length ) | ||
|  |                     { | ||
|  |                         start( event.touches[ 0 ] ); | ||
|  |                         event.stopPropagation(); | ||
|  |                     } | ||
|  |                 }; | ||
|  |             } | ||
|  | 
 | ||
|  |             if( options.scroll && window.addEventListener ) | ||
|  |             { | ||
|  |                 oWrapper[0].addEventListener( 'DOMMouseScroll', wheel, false ); | ||
|  |                 oWrapper[0].addEventListener( 'mousewheel', wheel, false ); | ||
|  |             } | ||
|  |             else if( options.scroll ) | ||
|  |             { | ||
|  |                 oWrapper[0].onmousewheel = wheel; | ||
|  |             } | ||
|  |         } | ||
|  | 
 | ||
|  |         function start( event ) | ||
|  |         { | ||
|  |             var oThumbDir   = parseInt( oThumb.obj.css( sDirection ), 10 ); | ||
|  |             iMouse.start    = sAxis ? event.pageX : event.pageY; | ||
|  |             iPosition.start = oThumbDir == 'auto' ? 0 : oThumbDir; | ||
|  |              | ||
|  |             if( ! touchEvents ) | ||
|  |             { | ||
|  |                 $( document ).bind( 'mousemove', drag ); | ||
|  |                 $( document ).bind( 'mouseup', end ); | ||
|  |                 oThumb.obj.bind( 'mouseup', end ); | ||
|  |             } | ||
|  |             else | ||
|  |             { | ||
|  |                 document.ontouchmove = function( event ) | ||
|  |                 { | ||
|  |                     event.preventDefault(); | ||
|  |                     drag( event.touches[ 0 ] ); | ||
|  |                 }; | ||
|  |                 document.ontouchend = end;         | ||
|  |             } | ||
|  |         } | ||
|  | 
 | ||
|  |         function wheel( event ) | ||
|  |         { | ||
|  |             if( oContent.ratio < 1 ) | ||
|  |             { | ||
|  |                 var oEvent = event || window.event | ||
|  |                 ,   iDelta = oEvent.wheelDelta ? oEvent.wheelDelta / 120 : -oEvent.detail / 3 | ||
|  |                 ; | ||
|  | 
 | ||
|  |                 iScroll -= iDelta * options.wheel; | ||
|  |                 iScroll = Math.min( ( oContent[ options.axis ] - oViewport[ options.axis ] ), Math.max( 0, iScroll )); | ||
|  | 
 | ||
|  |                 oThumb.obj.css( sDirection, iScroll / oScrollbar.ratio ); | ||
|  |                 oContent.obj.css( sDirection, -iScroll ); | ||
|  | 
 | ||
|  |                 if( options.lockscroll || ( iScroll !== ( oContent[ options.axis ] - oViewport[ options.axis ] ) && iScroll !== 0 ) ) | ||
|  |                 { | ||
|  |                     oEvent = $.event.fix( oEvent ); | ||
|  |                     oEvent.preventDefault(); | ||
|  |                 } | ||
|  |             } | ||
|  |             options.onMove.call(this,iScroll); | ||
|  |         } | ||
|  | 
 | ||
|  |         function drag( event ) | ||
|  |         { | ||
|  |             if( oContent.ratio < 1 ) | ||
|  |             { | ||
|  |                 if( ! touchEvents ) | ||
|  |                 { | ||
|  |                     iPosition.now = Math.min( ( oTrack[ options.axis ] - oThumb[ options.axis ] ), Math.max( 0, ( iPosition.start + ( ( sAxis ? event.pageX : event.pageY ) - iMouse.start)))); | ||
|  |                 } | ||
|  |                 else | ||
|  |                 { | ||
|  |                     iPosition.now = Math.min( ( oTrack[ options.axis ] - oThumb[ options.axis ] ), Math.max( 0, ( iPosition.start + ( iMouse.start - ( sAxis ? event.pageX : event.pageY ) )))); | ||
|  |                 } | ||
|  | 
 | ||
|  |                 iScroll = iPosition.now * oScrollbar.ratio; | ||
|  |                 oContent.obj.css( sDirection, -iScroll ); | ||
|  |                 oThumb.obj.css( sDirection, iPosition.now ); | ||
|  |             } | ||
|  |         } | ||
|  |          | ||
|  |         function end() | ||
|  |         { | ||
|  |             $( document ).unbind( 'mousemove', drag ); | ||
|  |             $( document ).unbind( 'mouseup', end ); | ||
|  |             oThumb.obj.unbind( 'mouseup', end ); | ||
|  |             document.ontouchmove = document.ontouchend = null; | ||
|  |         } | ||
|  | 
 | ||
|  |         return initialize(); | ||
|  |     } | ||
|  | 
 | ||
|  | }(jQuery)); |