var fieldList = document.getElementsByClassName('fieldlist')[0]

var FIELD_HEIGHT = null

​

var fields =  Array.prototype.slice.call( document.getElementsByClassName('field') )

​

var currentNode = fields[0]

​

var hammer = new Hammer.Manager(

  fieldList,

  {touchAction: 'pan-y'}

)

​

hammer.add(new Hammer.Swipe({

  direction: Hammer.DIRECTION_VERTICAL,

  enable: function (whatever, ev) {

    return canSwipe(ev)

  }

}))

​

​

hammer.on("swipe", function(ev) {

  if (canSwipe(ev)){

    snapToPoint(ev.direction)

  }

})

​

resolveFieldHeight()

​

document.getElementById('previous').onclick = function () {

  if (hasFieldAbove()) {

    snapToPoint(Hammer.DIRECTION_DOWN)

  }

}

​

document.getElementById('next').onclick = function () {

  console.log('next')

  if (hasFieldBelow()) {

    snapToPoint(Hammer.DIRECTION_UP)

  }

}

​

new ResizeSensor(fieldList, function () {

  resolveFieldHeight()

  resetScrollPosition()

})

​

function resolveFieldHeight () {

  fieldList.style.height = null // reset fieldList.clientHeight to calculated height

  fieldList.style.height = fieldList.clientHeight + 'px' // on chrome/android, maintain keyboard-closed client-height when keyboard open

  FIELD_HEIGHT = fieldList.clientHeight

}

​

function resetScrollPosition () {

  fieldList.scrollTop = fields.indexOf(currentNode) * FIELD_HEIGHT

}

​

function canSwipe (ev) {

    if (!ev) return true

    var enabled = ev.direction === Hammer.DIRECTION_UP && canSwipeUp() 

          || ev.direction === Hammer.DIRECTION_DOWN && canSwipeDown()

    return enabled

}

​

function hasFieldBelow () {

  return fields.indexOf(currentNode) !== fields.length - 1

}

​

function hasFieldAbove () {

  return fields.indexOf(currentNode) !== 0

}

​

function canSwipeUp () {

  var canSwipeUp = currentNode.scrollHeight - currentNode.scrollTop <= currentNode.clientHeight + 5

    && hasFieldBelow()

  return canSwipeUp 

}

​

function canSwipeDown () {

  return currentNode.scrollTop === 0 

    && hasFieldAbove()

}

​

function blurInputs () {

  Array.prototype.forEach.call(document.querySelectorAll('input[type=text], textarea'), function(input) {

    input.blur()

  })

}

​

function snapToPoint(direction){

  blurInputs()

  var newScrollPos = null

  var newField = null

  if (direction == Hammer.DIRECTION_UP) {

    newField = fields[fields.indexOf(currentNode) + 1]

  } else {

    newField = fields[fields.indexOf(currentNode) - 1]

  }

  newScrollPos = fields.indexOf(newField) * FIELD_HEIGHT

  currentNode = newField

  animatedScrollTo(fieldList, newScrollPos, 200, resetFieldScrolls)

}

​

​

function resetFieldScrolls () {

  fields.forEach(function(field) { 

    field.scrollTop = 0

  })

}

​

​

​

​

​

​

​

​

function logScrolls () {

  var thingsToLog = [ // getClientRects, getBoundingClientRect

    'scrollTop',

    'clientHeight',

    'offsetHeight',

    'clientTop',

    function (el) {

      var dimensions = el.getBoundingClientRect()

      return {

        'gbcr.bottom': dimensions.bottom,

        'gbcr.height': dimensions.height,

        'gbcr.top': dimensions.top

      }

    }

  ]

  var log = {}

  log.fieldList = {}

  thingsToLog.forEach(function (thingToLog) {

    if (typeof thingToLog === 'function') {

      Object.assign(log.fieldList, thingToLog(fieldList))

    } else {

      log.fieldList[thingToLog] = fieldList[thingToLog]

    }

  })

  fields.forEach(function (field, index) {

    elementLog = {}

    thingsToLog.forEach(function (thingToLog) {

      if (typeof thingToLog === 'function') {

        Object.assign(elementLog, thingToLog(field))

      } else {

        elementLog[thingToLog] = field[thingToLog]

      }

    })

    log['f' + index] = elementLog

  })

  console.table(log)

}

​

​

​

​

​

​

;(function (window) {

    var requestAnimFrame = (function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(callback){window.setTimeout(callback,1000/60);};})();

​

    var easeInOutQuad = function (t, b, c, d) {

        t /= d/2;

        if (t < 1) return c/2*t*t + b;

        t--;

        return -c/2 * (t*(t-2) - 1) + b;

    };

​

    var animatedScrollTo = function (element, to, duration, callback) {

        var start = element.scrollTop,

        change = to - start,

        animationStart = +new Date();

        var animating = true;

        var lastpos = null;

​

        var animateScroll = function() {

            if (!animating) {

                return;

            }

            requestAnimFrame(animateScroll);

            var now = +new Date();

            var val = Math.floor(easeInOutQuad(now - animationStart, start, change, duration));

            if (lastpos) {

                if (lastpos === element.scrollTop) {

                    lastpos = val;

                    element.scrollTop = val;

                } else {

                    animating = false;

                }

            } else {

                lastpos = val;

                element.scrollTop = val;

            }

            if (now > animationStart + duration) {

                element.scrollTop = to;

                animating = false;

                if (callback) { callback(); }

            }

        };

        requestAnimFrame(animateScroll);

    };

​

    if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {

        module.exports = animatedScrollTo;

    } else {

        window.animatedScrollTo = animatedScrollTo;

    }

})(window);

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

window.addEventListener('load', function() {

          var maybePreventPullToRefresh = false;

          var lastTouchY = 0;

          var touchstartHandler = function(e) {

            if (e.touches.length != 1) return;

            lastTouchY = e.touches[0].clientY;

            // Pull-to-refresh will only trigger if the scroll begins when the

            // document's Y offset is zero.

            maybePreventPullToRefresh =

                window.pageYOffset == 0;

          }

​

          var touchmoveHandler = function(e) {

            var touchY = e.touches[0].clientY;

            var touchYDelta = touchY - lastTouchY;

            lastTouchY = touchY;

​

            if (maybePreventPullToRefresh) {

              // To suppress pull-to-refresh it is sufficient to preventDefault the

              // first overscrolling touchmove.

              maybePreventPullToRefresh = false;

              if (touchYDelta > 0) {

                console.log()

                e.preventDefault();

                return;

              }

            }

          }

​

          document.addEventListener('touchstart', touchstartHandler, false);

          document.addEventListener('touchmove', touchmoveHandler, false);      });

​

​

​

​

​

​

​

​

​

/*! iNoBounce - v0.1.0

* https://github.com/lazd/iNoBounce/

* Copyright (c) 2013 Larry Davis <lazdnet@gmail.com>; Licensed BSD */

(function(global) {

  // Stores the Y position where the touch started

  var startY = 0;

​

  // Store enabled status

  var enabled = false;

​

  var handleTouchmove = function(evt) {

    // Get the element that was scrolled upon

    var el = evt.target;

​

    // Check all parent elements for scrollability

    while (el !== document.body) {

      // Get some style properties

      var style = window.getComputedStyle(el);

​

      if (!style) {

        // If we've encountered an element we can't compute the style for, get out

        break;

      }

​

      var scrolling = style.getPropertyValue('-webkit-overflow-scrolling');

      var overflowY = style.getPropertyValue('overflow-y');

      var height = parseInt(style.getPropertyValue('height'), 10);

​

      // Determine if the element should scroll

      var isScrollable = scrolling === 'touch' && (overflowY === 'auto' || overflowY === 'scroll');

      var canScroll = el.scrollHeight > el.offsetHeight;

​

      if (isScrollable && canScroll) {

        // Get the current Y position of the touch

        var curY = evt.touches ? evt.touches[0].screenY : evt.screenY;

​

        // Determine if the user is trying to scroll past the top or bottom

        // In this case, the window will bounce, so we have to prevent scrolling completely

        var isAtTop = (startY <= curY && el.scrollTop === 0);

        var isAtBottom = (startY >= curY && el.scrollHeight - el.scrollTop === height);

​

        // Stop a bounce bug when at the bottom or top of the scrollable element

        if (isAtTop || isAtBottom) {

          evt.preventDefault();

        }

​

        // No need to continue up the DOM, we've done our job

        return;

      }

​

      // Test the next parent

      el = el.parentNode;

    }

​

    // Stop the bouncing -- no parents are scrollable

    evt.preventDefault();

  };

​

  var handleTouchstart = function(evt) {

    // Store the first Y position of the touch

    startY = evt.touches ? evt.touches[0].screenY : evt.screenY;

  };

​

  var enable = function() {

    // Listen to a couple key touch events

    window.addEventListener('touchstart', handleTouchstart, false);

    window.addEventListener('touchmove', handleTouchmove, false);

    enabled = true;

  };

​

  var disable = function() {

    // Stop listening

    window.removeEventListener('touchstart', handleTouchstart, false);

    window.removeEventListener('touchmove', handleTouchmove, false);

    enabled = false;

  };

​

  var isEnabled = function() {

    return enabled;

  };

​

  // Enable by default if the browser supports -webkit-overflow-scrolling

  // Test this by setting the property with JavaScript on an element that exists in the DOM

  // Then, see if the property is reflected in the computed style

  var testDiv = document.createElement('div');

  document.documentElement.appendChild(testDiv);

  testDiv.style.WebkitOverflowScrolling = 'touch';

  var scrollSupport = 'getComputedStyle' in window && window.getComputedStyle(testDiv)['-webkit-overflow-scrolling'] === 'touch';

  document.documentElement.removeChild(testDiv);

​

  if (scrollSupport) {

    enable();

  }

​

  // A module to support enabling/disabling iNoBounce

  var iNoBounce = {

    enable: enable,

    disable: disable,

    isEnabled: isEnabled

  };

​

  if (typeof module !== 'undefined' && module.exports) {

    // Node.js Support

    module.exports = iNoBounce;

  }

  if (typeof global.define === 'function') {

    // AMD Support

    (function(define) {

      define(function() { return iNoBounce; });

    }(global.define));

  }

  else {

    // Browser support

    global.iNoBounce = iNoBounce;

  }

}(this));

​

​