forked from Chaospott/site
		
	added link to blogpost to blog headline, also some cleaning, we cant have more than 4 navigation points
This commit is contained in:
		
							
								
								
									
										131
									
								
								js/elevator.js
									
									
									
									
									
								
							
							
						
						
									
										131
									
								
								js/elevator.js
									
									
									
									
									
								
							@@ -9,7 +9,7 @@
 | 
			
		||||
 * Elevator.js
 | 
			
		||||
 *********************************************/
 | 
			
		||||
 | 
			
		||||
var Elevator = (function() {
 | 
			
		||||
var Elevator = function(options) {
 | 
			
		||||
 | 
			
		||||
    'use strict';
 | 
			
		||||
 | 
			
		||||
@@ -22,33 +22,44 @@ var Elevator = (function() {
 | 
			
		||||
    var customDuration = false;
 | 
			
		||||
    var startTime = null;
 | 
			
		||||
    var startPosition = null;
 | 
			
		||||
    var endPosition = 0;
 | 
			
		||||
    var elevating = false;
 | 
			
		||||
 | 
			
		||||
    var mainAudio;
 | 
			
		||||
    var endAudio;
 | 
			
		||||
 | 
			
		||||
    var elevating = false;
 | 
			
		||||
 | 
			
		||||
    var that = this;
 | 
			
		||||
    
 | 
			
		||||
    /**
 | 
			
		||||
     * Utils
 | 
			
		||||
     */
 | 
			
		||||
 | 
			
		||||
    // Soft object augmentation
 | 
			
		||||
    function extend( target, source ) {
 | 
			
		||||
        for ( var key in source ) {
 | 
			
		||||
            if ( !( key in target ) ) {
 | 
			
		||||
                target[ key ] = source[ key ];
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
        return target;
 | 
			
		||||
    };
 | 
			
		||||
 | 
			
		||||
    // Thanks Mr Penner - http://robertpenner.com/easing/
 | 
			
		||||
    function easeInOutQuad( t, b, c, d ) {
 | 
			
		||||
        t /= d/2;
 | 
			
		||||
        if (t < 1) return c/2*t*t + b;
 | 
			
		||||
        t /= d / 2;
 | 
			
		||||
        if ( t < 1 ) return c / 2 * t * t + b;
 | 
			
		||||
        t--;
 | 
			
		||||
        return -c/2 * (t*(t-2) - 1) + b;
 | 
			
		||||
    };
 | 
			
		||||
        return -c / 2 * ( t * ( t -2 ) - 1 ) + b;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    function extendParameters(options, defaults){
 | 
			
		||||
        for( var option in defaults ){
 | 
			
		||||
            var t = options[option] === undefined && typeof option !== "function";
 | 
			
		||||
            if(t){
 | 
			
		||||
                options[option] = defaults[option];
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
        return options;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    function getVerticalOffset(element) {
 | 
			
		||||
        var verticalOffset = 0;
 | 
			
		||||
        while( element ){
 | 
			
		||||
            verticalOffset += element.offsetTop || 0;
 | 
			
		||||
            element = element.offsetParent;
 | 
			
		||||
        }
 | 
			
		||||
        return verticalOffset;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    /**
 | 
			
		||||
     * Main
 | 
			
		||||
@@ -56,13 +67,13 @@ var Elevator = (function() {
 | 
			
		||||
 | 
			
		||||
    // Time is passed through requestAnimationFrame, what a world!
 | 
			
		||||
    function animateLoop( time ) {
 | 
			
		||||
        if (!startTime) {
 | 
			
		||||
        if ( !startTime ) {
 | 
			
		||||
            startTime = time;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        var timeSoFar = time - startTime;
 | 
			
		||||
        var easedPosition = easeInOutQuad(timeSoFar, startPosition, -startPosition, duration);                        
 | 
			
		||||
        
 | 
			
		||||
        var easedPosition = easeInOutQuad(timeSoFar, startPosition, endPosition - startPosition, duration);
 | 
			
		||||
 | 
			
		||||
        window.scrollTo(0, easedPosition);
 | 
			
		||||
 | 
			
		||||
        if( timeSoFar < duration ) {
 | 
			
		||||
@@ -70,7 +81,7 @@ var Elevator = (function() {
 | 
			
		||||
        } else {
 | 
			
		||||
            animationFinished();
 | 
			
		||||
        }
 | 
			
		||||
   };
 | 
			
		||||
     }
 | 
			
		||||
 | 
			
		||||
//            ELEVATE!
 | 
			
		||||
//              /
 | 
			
		||||
@@ -85,7 +96,7 @@ var Elevator = (function() {
 | 
			
		||||
//     C  O  O  O  D
 | 
			
		||||
//     C__O__O__O__D
 | 
			
		||||
//    [_____________]
 | 
			
		||||
    function elevate() {
 | 
			
		||||
    this.elevate = function() {
 | 
			
		||||
 | 
			
		||||
        if( elevating ) {
 | 
			
		||||
            return;
 | 
			
		||||
@@ -93,7 +104,7 @@ var Elevator = (function() {
 | 
			
		||||
 | 
			
		||||
        elevating = true;
 | 
			
		||||
        startPosition = (document.documentElement.scrollTop || body.scrollTop);
 | 
			
		||||
        
 | 
			
		||||
 | 
			
		||||
        // No custom duration set, so we travel at pixels per millisecond. (0.75px per ms)
 | 
			
		||||
        if( !customDuration ) {
 | 
			
		||||
            duration = (startPosition * 1.5);
 | 
			
		||||
@@ -105,6 +116,10 @@ var Elevator = (function() {
 | 
			
		||||
        if( mainAudio ) {
 | 
			
		||||
            mainAudio.play();
 | 
			
		||||
        }
 | 
			
		||||
    };
 | 
			
		||||
 | 
			
		||||
    function browserMeetsRequirements() {
 | 
			
		||||
        return window.requestAnimationFrame && window.Audio && window.addEventListener;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    function resetPositions() {
 | 
			
		||||
@@ -114,7 +129,7 @@ var Elevator = (function() {
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    function animationFinished() {
 | 
			
		||||
        
 | 
			
		||||
 | 
			
		||||
        resetPositions();
 | 
			
		||||
 | 
			
		||||
        // Stop music!
 | 
			
		||||
@@ -141,44 +156,68 @@ var Elevator = (function() {
 | 
			
		||||
                mainAudio.currentTime = 0;
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
            window.scrollTo(0, 0);
 | 
			
		||||
            window.scrollTo(0, endPosition);
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    //@TODO: Does this need tap bindings too?
 | 
			
		||||
    function bindElevateToElement( element ) {
 | 
			
		||||
        element.addEventListener('click', elevate, false);
 | 
			
		||||
        if( element.addEventListener ) {
 | 
			
		||||
            element.addEventListener('click', that.elevate, false);
 | 
			
		||||
        } else {
 | 
			
		||||
            // Older browsers
 | 
			
		||||
            element.attachEvent('onclick', function() {
 | 
			
		||||
                document.documentElement.scrollTop = endPosition;
 | 
			
		||||
                document.body.scrollTop = endPosition;
 | 
			
		||||
                window.scroll(0, endPosition);
 | 
			
		||||
            });
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    function main( options ) {
 | 
			
		||||
 | 
			
		||||
    function init( _options ) {
 | 
			
		||||
        // Bind to element click event, if need be.
 | 
			
		||||
        body = document.body;
 | 
			
		||||
 | 
			
		||||
        if( options.element ) {
 | 
			
		||||
            bindElevateToElement( options.element );
 | 
			
		||||
        var defaults = {
 | 
			
		||||
            duration: undefined,
 | 
			
		||||
            mainAudio: false,
 | 
			
		||||
            endAudio: false,
 | 
			
		||||
            preloadAudio: true,
 | 
			
		||||
            loopAudio: true,
 | 
			
		||||
        };
 | 
			
		||||
 | 
			
		||||
        _options = extendParameters(_options, defaults);
 | 
			
		||||
 | 
			
		||||
        if( _options.element ) {
 | 
			
		||||
            bindElevateToElement( _options.element );
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        if( options.duration ) {
 | 
			
		||||
        // Take the stairs instead
 | 
			
		||||
        if( !browserMeetsRequirements() ) {
 | 
			
		||||
            return;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        if( _options.duration ) {
 | 
			
		||||
            customDuration = true;
 | 
			
		||||
            duration = options.duration;
 | 
			
		||||
            duration = _options.duration;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        if( options.mainAudio ) {
 | 
			
		||||
            mainAudio = new Audio( options.mainAudio );
 | 
			
		||||
            mainAudio.setAttribute( 'preload', 'true' ); //@TODO: Option to not preload audio.
 | 
			
		||||
            mainAudio.setAttribute( 'loop', 'true' );
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        if( options.endAudio ) {
 | 
			
		||||
            endAudio = new Audio( options.endAudio );
 | 
			
		||||
            endAudio.setAttribute( 'preload', 'true' );
 | 
			
		||||
        if( _options.targetElement ) {
 | 
			
		||||
            endPosition = getVerticalOffset(_options.targetElement);
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        window.addEventListener('blur', onWindowBlur, false);
 | 
			
		||||
 | 
			
		||||
        if( _options.mainAudio ) {
 | 
			
		||||
            mainAudio = new Audio( _options.mainAudio );
 | 
			
		||||
            mainAudio.setAttribute( 'preload', _options.preloadAudio );
 | 
			
		||||
            mainAudio.setAttribute( 'loop', _options.loopAudio );
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        if( _options.endAudio ) {
 | 
			
		||||
            endAudio = new Audio( _options.endAudio );
 | 
			
		||||
            endAudio.setAttribute( 'preload', 'true' );
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    return extend(main, {
 | 
			
		||||
        elevate: elevate
 | 
			
		||||
    });
 | 
			
		||||
})();
 | 
			
		||||
    init(options);
 | 
			
		||||
};
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user