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)); |