src/site/documentation/user-input/touch-input/_code/touch-demo-1.html

<!DOCTYPE html>
<html>
  <head>
    <!-- // [TEMPLATE header_full] -->

    <!-- IE Specific to remove tap highlight -->
    <meta name="msapplication-tap-highlight" content="no">

    <title>Touch Example 1</title>
    
    <style>
      html, body {
        width: 100%;
        height: 100%;
        
        margin: 0;
        padding: 0;
      }

      body {
        width: 100%;
        height: 100%;
        
        background-color: #d3e2fc;
        
        font-family: 'Roboto', sans-serif;
        color: #ecf0f1;
      }

      .content {
        padding: 32px;
        box-sizing: border-box;
        
        overflow: hidden;
      }

      .swipe-element {
        position: relative;
        
        width: 100%;
        height: 60px;
      }

      .swipe-front {
        position: absolute;
        
        width: 100%;
        height: 60px;
        
        left: 0;
        top: 0;
        
        margin: 0;
        padding: 8px;
        box-sizing: border-box;
        
        text-align: center;
        
        color: #ecf0f1;
        line-height: 44px;
        vertical-align: center;
        
        background-color: #4285f4;
        
        z-index: 2;
        
        /* // [START touch-action-example] */
        /* Pass all touches to javascript */
        -ms-touch-action: none;
        touch-action: none;
        /* // [END touch-action-example] */
      }

      .swipe-back {
        position: absolute;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        
        width: 100%;
        height: 60px;
        
        left: 0;
        top: 0;
        
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;
        
        -ms-flex-pack: justify;
        -webkit-justify-content: space-around;
        justify-content: space-around;
        
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        
        padding: 0 10px;
        box-sizing: border-box;
      }

      .swipe-back button {
        display: inline-block;
        
        width: 40px;
        height: 40px;
        
        background-color: #4285f4;
        
        border-radius: 100%;
        border-style: none;
      }

      .swipe-back button:nth-child(2) {
        background-color: #0f9d58;
      }

      .swipe-back button:nth-child(3) {
        background-color: #cb4437;
      }

      .swipe-back button:nth-child(4) {
        background-color: #f4b400;
      }

      .promote-layer {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
      }
    </style>
  </head>

  <body>

    <section class="content">
      <div class="swipe-element">
        <div class="swipe-back">
          <button></button>
          <button></button>
          <button></button>
          <button></button>
        </div>
        <p class="swipe-front promote-layer">Swipe Me</p>
      </div>
    </section>

    <section class="content">
      <div class="swipe-element">
        <div class="swipe-back">
          <button></button>
          <button></button>
          <button></button>
          <button></button>
        </div>
        <p class="swipe-front promote-layer">Swipe Me Too</p>
      </div>
    </section>

    <script>
      // Shim for requestAnimationFrame from Paul Irishpaul ir
      // http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/ 
      window.requestAnimFrame = (function(){
        return  window.requestAnimationFrame       ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame    ||
                function( callback ){
                  window.setTimeout(callback, 1000 / 60);
                };
      })();

      function SwipeRevealItem(element) {
        // Gloabl state variables
        var STATE_DEFAULT = 1;
        var STATE_LEFT_SIDE = 2;
        var STATE_RIGHT_SIDE = 3;
        
        var swipeFrontElement = element.querySelector('.swipe-front');
        var swipeBack = element.querySelector('.swipe-back');
        var isAnimating = false;
        var initialTouchPos = null;
        var lastTouchPos = null;
        var currentXPosition = 0;
        var currentState = STATE_DEFAULT;
        var handleSize = 10;
        
        // Perform client width here as this can be expensive and doens't 
        // change until window.onresize
        var itemWidth = swipeFrontElement.clientWidth;
        var slopValue = itemWidth * (1/4);

        // On resize, change the slop value
        this.resize = function() {
          itemWidth = swipeFrontElement.clientWidth;
          slopValue = itemWidth * (1/4);
        }

        /* // [START handle-start-gesture] */
        // Handle the start of gestures
        this.handleGestureStart = function(evt) {
          evt.preventDefault();

          if(evt.touches && evt.touches.length > 1) {
            return;
          }

          // Add the move and end listeners
          if (window.navigator.msPointerEnabled) {
            // Pointer events are supported.
            document.addEventListener('MSPointerMove', this.handleGestureMove, true);
            document.addEventListener('MSPointerUp', this.handleGestureEnd, true);
          } else {
            // Add Touch Listeners
            document.addEventListener('touchmove', this.handleGestureMove, true);
            document.addEventListener('touchend', this.handleGestureEnd, true);
            document.addEventListener('touchcancel', this.handleGestureEnd, true);
          
            // Add Mouse Listeners
            document.addEventListener('mousemove', this.handleGestureMove, true);
            document.addEventListener('mouseup', this.handleGestureEnd, true);
          }
          
          initialTouchPos = getGesturePointFromEvent(evt);

          swipeFrontElement.style.transition = 'initial';
        }.bind(this);
        /* // [END handle-start-gesture] */

        // Handle move gestures
        this.handleGestureMove = function (evt) {
          evt.preventDefault();

          console.log('handleGestureMove');

          lastTouchPos = getGesturePointFromEvent(evt);
          
          if(isAnimating) {
            return;
          }
          
          isAnimating = true;
          
          window.requestAnimFrame(onAnimFrame);
        }.bind(this);

        /* // [START handle-end-gesture] */
        // Handle end gestures
        this.handleGestureEnd = function(evt) {
          evt.preventDefault();

          if(evt.touches && evt.touches.length > 0) {
            return;
          }

          isAnimating = false;
          
          // Remove Event Listeners
          if (window.navigator.msPointerEnabled) {
            // Remove Pointer Event Listeners
            document.removeEventListener('MSPointerMove', this.handleGestureMove, true);
            document.removeEventListener('MSPointerUp', this.handleGestureEnd, true);
          } else {
            // Remove Touch Listeners
            document.removeEventListener('touchmove', this.handleGestureMove, true);
            document.removeEventListener('touchend', this.handleGestureEnd, true);
            document.removeEventListener('touchcancel', this.handleGestureEnd, true);
          
            // Remove Mouse Listeners
            document.removeEventListener('mousemove', this.handleGestureMove, true);
            document.removeEventListener('mouseup', this.handleGestureEnd, true);
          }
          
          updateSwipeRestPosition();
        }.bind(this);
        /* // [END handle-end-gesture] */
        
        function updateSwipeRestPosition() {
          var differenceInX = initialTouchPos.x - lastTouchPos.x;
          currentXPosition = currentXPosition - differenceInX;
        
          // Go to the default state and change
          var newState = STATE_DEFAULT;

          // Check if we need to change state to left or right based on slop value
          if(Math.abs(differenceInX) > slopValue) {
            if(currentState == STATE_DEFAULT) {
              if(differenceInX > 0) {
                newState = STATE_LEFT_SIDE;
              } else {
                newState = STATE_RIGHT_SIDE;
              }
            } else {
              if(currentState == STATE_LEFT_SIDE && differenceInX > 0) {
                newState = STATE_DEFAULT;
              } else if(currentState == STATE_RIGHT_SIDE && differenceInX < 0) {
                newState = STATE_DEFAULT;
              }
            }
          } else {
            newState = currentState;
          }
          
          changeState(newState);
          
          swipeFrontElement.style.transition = 'all 150ms ease-out';
        }

        function changeState(newState) {
          var transformStyle;
          switch(newState) {
            case STATE_DEFAULT:
              currentXPosition = 0;
              break;
            case STATE_LEFT_SIDE:
              currentXPosition = -(itemWidth - handleSize);
              break;
            case STATE_RIGHT_SIDE:
              currentXPosition = itemWidth - handleSize;
              break;
          }
          
          transformStyle = 'translateX('+currentXPosition+'px)';
          
          swipeFrontElement.style.msTransform = transformStyle;
          swipeFrontElement.style.MozTransform = transformStyle;
          swipeFrontElement.style.webkitTransform = transformStyle;
          swipeFrontElement.style.transform = transformStyle;

          currentState = newState;
        }
        
        function getGesturePointFromEvent(evt) {
          var point = {};

          if(evt.targetTouches) {
            point.x = evt.targetTouches[0].clientX;
            point.y = evt.targetTouches[0].clientY;
          } else {
            // Either Mouse event or Pointer Event
            point.x = evt.clientX;
            point.y = evt.clientY;
          }

          return point;
        }
        
        function onAnimFrame() {
          if(!isAnimating) {
            return;
          }
          
          var differenceInX = initialTouchPos.x - lastTouchPos.x;
          
          var newXTransform = (currentXPosition - differenceInX)+'px';
          var transformStyle = 'translateX('+newXTransform+')';
          swipeFrontElement.style['-webkit-transform'] = transformStyle;
          swipeFrontElement.style['-moz-transform'] = transformStyle;
          swipeFrontElement.style.transform = transformStyle;
          
          isAnimating = false;
        }

        /* // [START addlisteners] */
        // Check if pointer events are supported.
        if (window.navigator.msPointerEnabled) {
          // Add Pointer Event Listener
          swipeFrontElement.addEventListener('MSPointerDown', this.handleGestureStart, true);
        } else {
          // Add Touch Listener
          swipeFrontElement.addEventListener('touchstart', this.handleGestureStart, true);
          
          // Add Mouse Listener
          swipeFrontElement.addEventListener('mousedown', this.handleGestureStart, true);
        }
        /* // [END addlisteners] */
      }

      var swipeRevealItems = [];

      window.onload = function () {
        var swipeRevealItemElements = document.querySelectorAll('.swipe-element');
        for(var i = 0; i < swipeRevealItemElements.length; i++) {
          swipeRevealItems.push(new SwipeRevealItem(swipeRevealItemElements[i]));
        }

        window.onload = function() {
          if(/iP(hone|ad)/.test(window.navigator.userAgent)) {
            document.body.addEventListener('touchstart', function() {}, false);
          }
        };
      };

      window.onresize = function () {
        for(var i = 0; i < swipeRevealItems.length; i++) {
          swipeRevealItems[i].resize();
        }
      };
    </script>

    <script>
      var swipeFronts = document.querySelectorAll('.swipe-front');
      for(var i = 0; i < swipeFronts.length; i++) {
        swipeFronts[i].addEventListener('touchstart', function(){
          sampleCompleted('touch-demo-1.html-SwipeFrontTouch');
        });
      }
    </script>

    <!-- // [TEMPLATE footer] -->
  </body>
</html>