Fix elevator mobile

js/elevator.js

@@ -9,7 +9,7 @@
  * Elevator.js
  *********************************************/
 
-var Elevator = function(options) {
+var Elevator = function (options) {
 
     'use strict';
 
@@ -39,17 +39,17 @@ var Elevator = function(options) {
      */
 
     // Thanks Mr Penner - http://robertpenner.com/easing/
-    function easeInOutQuad( t, b, c, d ) {
+    function easeInOutQuad(t, b, c, d) {
         t /= d / 2;
-        if ( t < 1 ) return c / 2 * t * t + b;
+        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){
+    function extendParameters(options, defaults) {
-        for( var option in defaults ){
+        for (var option in defaults) {
             var t = options[option] === undefined && typeof option !== "function";
-            if(t){
+            if (t) {
                 options[option] = defaults[option];
             }
         }
@@ -58,20 +58,31 @@ var Elevator = function(options) {
 
     function getVerticalOffset(element) {
         var verticalOffset = 0;
-        while( element ){
+        while (element) {
             verticalOffset += element.offsetTop || 0;
             element = element.offsetParent;
         }
         return verticalOffset;
     }
 
+    function getScrollTop() {
+        return window.pageYOffset || document.documentElement.scrollTop || body.scrollTop || 0;
+    }
+
+    function playAudio(audio) {
+        var playPromise = audio.play();
+        if (playPromise && playPromise.catch) {
+            playPromise.catch(() => 0);
+        }
+    }
+
     /**
      * Main
      */
 
     // Time is passed through requestAnimationFrame, what a world!
-    function animateLoop( time ) {
+    function animateLoop(time) {
-        if ( !startTime ) {
+        if (!startTime) {
             startTime = time;
         }
 
@@ -80,7 +91,7 @@ var Elevator = function(options) {
 
         window.scrollTo(0, easedPosition);
 
-        if( timeSoFar < duration ) {
+        if (timeSoFar < duration) {
             animation = requestAnimationFrame(animateLoop);
         } else {
             animationFinished();
@@ -100,27 +111,26 @@ var Elevator = function(options) {
 //     C  O  O  O  D
 //     C__O__O__O__D
 //    [_____________]
-    this.elevate = function() {
+    this.elevate = function () {
-
+        if (elevating) {
-        if( elevating ) {
             return;
         }
 
         elevating = true;
-        startPosition = (document.documentElement.scrollTop || body.scrollTop);
+        startPosition = getScrollTop();
 
         // No custom duration set, so we travel at pixels per millisecond. (0.75px per ms)
-        if( !customDuration ) {
+        if (!customDuration) {
             duration = (startPosition * 1.5);
         }
 
-        requestAnimationFrame( animateLoop );
+        requestAnimationFrame(animateLoop);
 
         loadAudio();
 
         // Start music!
-        if( mainAudio ) {
+        if (mainAudio) {
-            mainAudio.play();
+            playAudio(mainAudio);
         }
     };
 
@@ -139,25 +149,24 @@ var Elevator = function(options) {
         resetPositions();
 
         // Stop music!
-        if( mainAudio ) {
+        if (mainAudio) {
             mainAudio.pause();
             mainAudio.currentTime = 0;
         }
 
-        if( endAudio ) {
+        if (endAudio) {
-            endAudio.play();
+            playAudio(endAudio);
         }
     }
 
     function onWindowBlur() {
 
         // If animating, go straight to the top. And play no more music.
-        if( elevating ) {
+        if (elevating) {
-
+            cancelAnimationFrame(animation);
-            cancelAnimationFrame( animation );
             resetPositions();
 
-            if( mainAudio ) {
+            if (mainAudio) {
                 mainAudio.pause();
                 mainAudio.currentTime = 0;
             }
@@ -166,12 +175,19 @@ var Elevator = function(options) {
         }
     }
 
-    function bindElevateToElement( element ) {
+    function handleElevate(event) {
-        if( element.addEventListener ) {
+        if (event && event.type === 'touchend')
-            element.addEventListener('click', that.elevate, false);
+            event.preventDefault();
+        that.elevate();
+    }
+
+    function bindElevateToElement(element) {
+        if (element.addEventListener) {
+            element.addEventListener('click', handleElevate, false);
+            element.addEventListener('touchend', handleElevate, false);
         } else {
             // Older browsers
-            element.attachEvent('onclick', function() {
+            element.attachEvent('onclick', function () {
                 document.documentElement.scrollTop = endPosition;
                 document.body.scrollTop = endPosition;
                 window.scroll(0, endPosition);
@@ -180,19 +196,19 @@ var Elevator = function(options) {
     }
 
     function loadAudio() {
-        if( !mainAudio && mainAudioPath ) {
+        if (!mainAudio && mainAudioPath) {
-            mainAudio = new Audio( mainAudioPath );
+            mainAudio = new Audio(mainAudioPath);
-            mainAudio.setAttribute( 'preload', preloadAudio );
+            mainAudio.setAttribute('preload', preloadAudio);
-            mainAudio.setAttribute( 'loop', loopAudio );
+            mainAudio.setAttribute('loop', loopAudio);
         }
 
-        if( !endAudio && endAudioPath ) {
+        if (!endAudio && endAudioPath) {
-            endAudio = new Audio( endAudioPath );
+            endAudio = new Audio(endAudioPath);
-            endAudio.setAttribute( 'preload', 'auto' );
+            endAudio.setAttribute('preload', 'auto');
         }
     }
 
-    function init( _options ) {
+    function init(_options) {
         // Bind to element click event, if need be.
         body = document.body;
 
@@ -206,25 +222,25 @@ var Elevator = function(options) {
 
         _options = extendParameters(_options, defaults);
 
-        if( _options.elements ) {
+        if (_options.elements) {
-            for( var i = 0; i < _options.elements.length; i++ ) {
+            for (var i = 0; i < _options.elements.length; i++) {
-                bindElevateToElement( _options.elements[i] );
+                bindElevateToElement(_options.elements[i]);
             }
-        } else if( _options.element ) {
+        } else if (_options.element) {
-            bindElevateToElement( _options.element );
+            bindElevateToElement(_options.element);
         }
 
         // Take the stairs instead
-        if( !browserMeetsRequirements() ) {
+        if (!browserMeetsRequirements()) {
             return;
         }
 
-        if( _options.duration ) {
+        if (_options.duration) {
             customDuration = true;
             duration = _options.duration;
         }
 
-        if( _options.targetElement ) {
+        if (_options.targetElement) {
             endPosition = getVerticalOffset(_options.targetElement);
         }
 

js/elevator.min.js

@@ -1 +0,0 @@
-var Elevator=function(){"use strict";function n(n,e){for(var t in e)t in n||(n[t]=e[t]);return n}function e(n,e,t,u){return n/=u/2,1>n?t/2*n*n+e:(n--,-t/2*(n*(n-2)-1)+e)}function t(n){p||(p=n);var u=n-p,o=e(u,v,-v,A);window.scrollTo(0,o),A>u?s=requestAnimationFrame(t):i()}function u(){w||(w=!0,v=document.documentElement.scrollTop||m.scrollTop,f||(A=1.5*v),requestAnimationFrame(t),c&&c.play())}function o(){p=null,v=null,w=!1}function i(){o(),c&&(c.pause(),c.currentTime=0),d&&d.play()}function r(){w&&(cancelAnimationFrame(s),o(),c&&(c.pause(),c.currentTime=0),window.scrollTo(0,0))}function l(n){n.addEventListener("click",u,!1)}function a(n){m=document.body,n.element&&l(n.element),n.duration&&(f=!0,A=n.duration),n.mainAudio&&(c=new Audio(n.mainAudio),c.setAttribute("preload","true"),c.setAttribute("loop","true")),n.endAudio&&(d=new Audio(n.endAudio),d.setAttribute("preload","true")),window.addEventListener("blur",r,!1)}var c,d,m=null,s=null,A=null,f=!1,p=null,v=null,w=!1;return n(a,{elevate:u})}();