ratchet/lib/js/pulltorefresh.js

/* ----------------------------------
 * PullToRefresh v0.004
 * By Simon Waldherr
 * https://github.com/SimonWaldherr/PullToRefresh
 * Licensed under The MIT License
 * http://opensource.org/licenses/MIT
 * ---------------------------------- */

var ptr_scrollable_parent = false;

function ptr_init() {
  "use strict";
  var  ptr_box, ptr_container, ptr_image, ptr_text, i = 0, scrollables = document.getElementsByClassName('scrollable');
  if ((window.hasOwnProperty('ontouchstart')) || (window.navigator.msPointerEnabled)) {
    document.getElementsByTagName('body')[0].className += ' touch';
  } else {
    document.getElementsByTagName('body')[0].className += ' notouch';
  }

  for (i = 0; i < scrollables.length; i += 1) {
    if (scrollables[i].hasAttribute('data-url') !== false) {
      ptr_box = document.createElement('div');
      ptr_container = document.createElement('div');
      ptr_image = document.createElement('div');
      ptr_text = document.createElement('div');

      ptr_box.appendChild(ptr_container);
      ptr_container.appendChild(ptr_image);
      ptr_container.appendChild(ptr_text);
      ptr_text.innerHTML = 'Pull to refresh';

      ptr_box.className = 'ptr_box';
      ptr_container.className = 'ptr_container';
      ptr_image.className = 'ptr_image';
      ptr_text.className = 'ptr_text';

      scrollables[i].firstElementChild.insertBefore(ptr_box, scrollables[i].firstElementChild.firstChild);
    }
  }

  document.addEventListener('touchstart', function (e) {
    var ptr_box, ptr_container, ptr_image, ptr_text, parent = e.target, i = 0;

    if (parent.className === undefined) {
      return false;
    }

    for (i = 0; i < 10; i += 1) {
      if (parent.className !== undefined) {

        if (parent.className.match('scrollable')) {

          ptr_scrollable_parent = i;
          i = 10;

          if (parent.hasAttribute('data-url') !== false) {
            if (parent.getElementsByClassName('ptr_box')[0] === undefined) {
              ptr_box = document.createElement('div');
              ptr_container = document.createElement('div');
              ptr_image = document.createElement('div');
              ptr_text = document.createElement('div');

              ptr_box.appendChild(ptr_container);
              ptr_container.appendChild(ptr_image);
              ptr_container.appendChild(ptr_text);
              ptr_text.innerHTML = 'Pull to refresh';

              ptr_box.className = 'ptr_box';
              ptr_container.className = 'ptr_container';
              ptr_image.className = 'ptr_image';
              ptr_text.className = 'ptr_text';

              parent.firstElementChild.insertBefore(ptr_box, parent.firstElementChild.firstChild);
            }
          } else if (parent.getElementsByClassName('ptr_box')[0] !== undefined) {
            parent.removeChild(parent.getElementsByClassName('ptr_box')[0]);
          }

          if (parent.scrollTop === 0) {
            parent.scrollTop = 1;
          } else if ((parent.scrollTop + parent.offsetHeight) === parent.scrollHeight) {
            parent.scrollTop = parent.scrollTop - 1;
          }
        }
      }

      if ((parent.parentNode.tagName === undefined)) {
        i = 10;
        return false;
      }
      if ((parent.parentNode.tagName === 'BODY') || (parent.parentNode.tagName === 'HTML')) {
        i = 10;
        return false;
      }

      parent = parent.parentNode;
    }
  });

  document.addEventListener('touchmove', function (e) {
    var parent = e.target, scroll = false, rotate = 90, i = 0, ptr_element, ptr_wrapelement, top, ptr, scrolldistance, ptr_eleId, time, ptrbox, insert, inserted;
    if (ptr_scrollable_parent === false) {
      e.preventDefault();
      return false;
    }

    for (i = 0; i < ptr_scrollable_parent; i += 1) {
      parent = parent.parentNode;
    }

    if ((ptr_scrollable_parent !== false) && (parent.hasAttribute('data-url') !== false)) {

      scroll = true;

      ptr_element = parent;
      ptr_wrapelement = ptr_element.getElementsByClassName('wrap')[0];
      top = ptr_element.scrollTop;
      ptr = ptr_element.getElementsByClassName('ptr_box')[0];
      scrolldistance = Math.abs(parseInt(ptr_element.scrollTop, 10));

      if ((ptr_wrapelement.className.indexOf(' active') === -1) && (!ptr_wrapelement.getElementsByClassName('ptr_image')[0].className.match('loading')) && (ptr_element.scrollTop < 1)) {
        if (ptr_element.scrollTop < -25) {
          rotate = (top < -40) ? -90 : 130 + (top * 12 + 270);
        }

        if (ptr_element.scrollTop < 0) {
          ptr.style.height = (scrolldistance < 55) ? scrolldistance + 'px' : '55px';
          ptr.style.top = (scrolldistance < 55) ? '-' + scrolldistance + 'px' : '-55px';

          ptr_wrapelement.getElementsByClassName('ptr_image')[0].style['-webkit-transform'] = "scale(1) rotate(" + rotate + "deg)";
        }

        if (ptr_element.scrollTop < -51) {
          if (ptr_wrapelement.className.indexOf(' active') === -1) {
            ptr_wrapelement.className += ' active';
            ptr_wrapelement.getElementsByClassName('ptr_text')[0].innerHTML = 'Loading ...';
            ptr_wrapelement.getElementsByClassName('ptr_image')[0].className += ' loading';

            if (parent.getAttribute('data-url') === 'reload') {
              window.location.reload(true);
              return false;
            }

            ptr_element = parent;
            ptr_wrapelement = ptr_element.getElementsByClassName('wrap')[0];
            ptr_eleId = parent.id;
            time = new Date();

            reqwest({
              url: parent.getAttribute('data-url') + '?rt=' + time.getTime(),
              type: 'html',
              method: 'post',
              data: {
                usertime: time.getTime()
              },
              error: function () {
                alert('Could not connect');
                ptr_wrapelement.style.top = '0px';
                ptr.getElementsByClassName('ptr_image')[0].className = ptr.getElementsByClassName('ptr_image')[0].className.replace(' loading', '');
                ptr_wrapelement.className = ptr_wrapelement.className.replace(' active', '');
              },
              success: function (resp) {
                ptrbox = document.getElementById(ptr_eleId).getElementsByClassName('ptr_box')[0];
                insert = document.createElement('div');
                insert.innerHTML = resp;
                insert.className = 'inserted';

                ptr_wrapelement.insertBefore(insert, ptrbox.nextSibling);
                ptr_wrapelement.style.top = '0px';
                ptr.getElementsByClassName('ptr_image')[0].className = ptr.getElementsByClassName('ptr_image')[0].className.replace(' loading', '');
                ptr_wrapelement.className = ptr_wrapelement.className.replace(' active', '');
                inserted = document.getElementsByClassName('inserted')[0];
                ptr_element.scrollTop = inserted.clientHeight - 51;
                ptr_wrapelement.getElementsByClassName('ptr_text')[0].innerHTML = '';
                ptr.style.opacity = 0.0;

                ptr_wrapelement.getElementsByClassName('ptr_image')[0].className = ptr_wrapelement.getElementsByClassName('ptr_image')[0].className.replace(' loading', '');
                ptr_wrapelement.style.top = '0px';

                ptr_scrollable_parent = false;
              }
            });
          }
        } else if (ptr_element.scrollTop !== 0) {
          ptr_wrapelement.className = ptr_wrapelement.className.replace(' active', '');
          ptr_wrapelement.getElementsByClassName('ptr_text')[0].innerHTML = 'Pull to refresh';
        }
      }
    } else if ((ptr_scrollable_parent !== false)) {
      scroll = true;
    }

    if (scroll === false) {
      e.preventDefault();
    }
  });

  document.addEventListener('touchend', function (e) {
    var parent = e.target, i = 0, ptr_element, ptr_wrapelement, ptr_eleId, top, ptr;

    for (i = 0; i < ptr_scrollable_parent; i += 1) {
      parent = parent.parentNode;
    }

    if ((parent.hasAttribute('data-url') !== false) && (ptr_scrollable_parent !== false)) {
      if ((parent.hasAttribute('data-url') !== false)) {
        ptr_element = parent;
        ptr_wrapelement = ptr_element.getElementsByClassName('wrap')[0];
        ptr_eleId = parent.id;
        top = ptr_element.scrollTop;
        ptr = ptr_element.getElementsByClassName('ptr_box')[0];

        if (ptr_wrapelement.getElementsByClassName('ptr_image')[0].className.match('loading')) {
          ptr_wrapelement.className = ptr_wrapelement.className.replace(' active', '');
          ptr_wrapelement.style.top = '51px';
        } else {
          ptr.style.height = '0px';
          ptr.style.top = '0px';
        }
      }
    }

    ptr_scrollable_parent = false;
  });
}
window.onload = function() {
  ptr_init();
}