first

plugins/pulltorefresh/0.1.19/index.esm.js

@@ -0,0 +1,390 @@
+var _shared = {
+  pullStartY: null,
+  pullMoveY: null,
+  handlers: [],
+  styleEl: null,
+  events: null,
+  dist: 0,
+  state: 'pending',
+  timeout: null,
+  distResisted: 0,
+  supportsPassive: false,
+  supportsPointerEvents: !!window.PointerEvent
+};
+
+try {
+  window.addEventListener('test', null, {
+    get passive() {
+      // eslint-disable-line getter-return
+      _shared.supportsPassive = true;
+    }
+
+  });
+} catch (e) {// do nothing
+}
+
+function setupDOM(handler) {
+  if (!handler.ptrElement) {
+    var ptr = document.createElement('div');
+
+    if (handler.mainElement !== document.body) {
+      handler.mainElement.parentNode.insertBefore(ptr, handler.mainElement);
+    } else {
+      document.body.insertBefore(ptr, document.body.firstChild);
+    }
+
+    ptr.classList.add(((handler.classPrefix) + "ptr"));
+    ptr.innerHTML = handler.getMarkup().replace(/__PREFIX__/g, handler.classPrefix);
+    handler.ptrElement = ptr;
+
+    if (typeof handler.onInit === 'function') {
+      handler.onInit(handler);
+    } // Add the css styles to the style node, and then
+    // insert it into the dom
+
+
+    if (!_shared.styleEl) {
+      _shared.styleEl = document.createElement('style');
+
+      _shared.styleEl.setAttribute('id', 'pull-to-refresh-js-style');
+
+      document.head.appendChild(_shared.styleEl);
+    }
+
+    _shared.styleEl.textContent = handler.getStyles().replace(/__PREFIX__/g, handler.classPrefix).replace(/\s+/g, ' ');
+  }
+
+  return handler;
+}
+
+function onReset(handler) {
+  handler.ptrElement.classList.remove(((handler.classPrefix) + "refresh"));
+  handler.ptrElement.style[handler.cssProp] = '0px';
+  setTimeout(function () {
+    // remove previous ptr-element from DOM
+    if (handler.ptrElement && handler.ptrElement.parentNode) {
+      handler.ptrElement.parentNode.removeChild(handler.ptrElement);
+      handler.ptrElement = null;
+    } // reset state
+
+
+    _shared.state = 'pending';
+  }, handler.refreshTimeout);
+}
+
+function update(handler) {
+  var iconEl = handler.ptrElement.querySelector(("." + (handler.classPrefix) + "icon"));
+  var textEl = handler.ptrElement.querySelector(("." + (handler.classPrefix) + "text"));
+
+  if (iconEl) {
+    if (_shared.state === 'refreshing') {
+      iconEl.innerHTML = handler.iconRefreshing;
+    } else {
+      iconEl.innerHTML = handler.iconArrow;
+    }
+  }
+
+  if (textEl) {
+    if (_shared.state === 'releasing') {
+      textEl.innerHTML = handler.instructionsReleaseToRefresh;
+    }
+
+    if (_shared.state === 'pulling' || _shared.state === 'pending') {
+      textEl.innerHTML = handler.instructionsPullToRefresh;
+    }
+
+    if (_shared.state === 'refreshing') {
+      textEl.innerHTML = handler.instructionsRefreshing;
+    }
+  }
+}
+
+var _ptr = {
+  setupDOM: setupDOM,
+  onReset: onReset,
+  update: update
+};
+
+var screenY = function screenY(event) {
+  if (_shared.pointerEventsEnabled && _shared.supportsPointerEvents) {
+    return event.screenY;
+  }
+
+  return event.touches[0].screenY;
+};
+
+var _setupEvents = (function () {
+  var _el;
+
+  function _onTouchStart(e) {
+    // here, we must pick a handler first, and then append their html/css on the DOM
+    var target = _shared.handlers.filter(function (h) { return h.contains(e.target); })[0];
+
+    _shared.enable = !!target;
+
+    if (target && _shared.state === 'pending') {
+      _el = _ptr.setupDOM(target);
+
+      if (target.shouldPullToRefresh()) {
+        _shared.pullStartY = screenY(e);
+      }
+
+      clearTimeout(_shared.timeout);
+
+      _ptr.update(target);
+    }
+  }
+
+  function _onTouchMove(e) {
+    if (!(_el && _el.ptrElement && _shared.enable)) {
+      return;
+    }
+
+    if (!_shared.pullStartY) {
+      if (_el.shouldPullToRefresh()) {
+        _shared.pullStartY = screenY(e);
+      }
+    } else {
+      _shared.pullMoveY = screenY(e);
+    }
+
+    if (_shared.state === 'refreshing') {
+      if (e.cancelable && _el.shouldPullToRefresh() && _shared.pullStartY < _shared.pullMoveY) {
+        e.preventDefault();
+      }
+
+      return;
+    }
+
+    if (_shared.state === 'pending') {
+      _el.ptrElement.classList.add(((_el.classPrefix) + "pull"));
+
+      _shared.state = 'pulling';
+
+      _ptr.update(_el);
+    }
+
+    if (_shared.pullStartY && _shared.pullMoveY) {
+      _shared.dist = _shared.pullMoveY - _shared.pullStartY;
+    }
+
+    _shared.distExtra = _shared.dist - _el.distIgnore;
+
+    if (_shared.distExtra > 0) {
+      if (e.cancelable) {
+        e.preventDefault();
+      }
+
+      _el.ptrElement.style[_el.cssProp] = (_shared.distResisted) + "px";
+      _shared.distResisted = _el.resistanceFunction(_shared.distExtra / _el.distThreshold) * Math.min(_el.distMax, _shared.distExtra);
+
+      if (_shared.state === 'pulling' && _shared.distResisted > _el.distThreshold) {
+        _el.ptrElement.classList.add(((_el.classPrefix) + "release"));
+
+        _shared.state = 'releasing';
+
+        _ptr.update(_el);
+      }
+
+      if (_shared.state === 'releasing' && _shared.distResisted < _el.distThreshold) {
+        _el.ptrElement.classList.remove(((_el.classPrefix) + "release"));
+
+        _shared.state = 'pulling';
+
+        _ptr.update(_el);
+      }
+    }
+  }
+
+  function _onTouchEnd() {
+    if (!(_el && _el.ptrElement && _shared.enable)) {
+      return;
+    }
+
+    if (_shared.state === 'releasing' && _shared.distResisted > _el.distThreshold) {
+      _shared.state = 'refreshing';
+      _el.ptrElement.style[_el.cssProp] = (_el.distReload) + "px";
+
+      _el.ptrElement.classList.add(((_el.classPrefix) + "refresh"));
+
+      _shared.timeout = setTimeout(function () {
+        var retval = _el.onRefresh(function () { return _ptr.onReset(_el); });
+
+        if (retval && typeof retval.then === 'function') {
+          retval.then(function () { return _ptr.onReset(_el); });
+        }
+
+        if (!retval && !_el.onRefresh.length) {
+          _ptr.onReset(_el);
+        }
+      }, _el.refreshTimeout);
+    } else {
+      if (_shared.state === 'refreshing') {
+        return;
+      }
+
+      _el.ptrElement.style[_el.cssProp] = '0px';
+      _shared.state = 'pending';
+    }
+
+    _ptr.update(_el);
+
+    _el.ptrElement.classList.remove(((_el.classPrefix) + "release"));
+
+    _el.ptrElement.classList.remove(((_el.classPrefix) + "pull"));
+
+    _shared.pullStartY = _shared.pullMoveY = null;
+    _shared.dist = _shared.distResisted = 0;
+  }
+
+  function _onScroll() {
+    if (_el) {
+      _el.mainElement.classList.toggle(((_el.classPrefix) + "top"), _el.shouldPullToRefresh());
+    }
+  }
+
+  var _passiveSettings = _shared.supportsPassive ? {
+    passive: _shared.passive || false
+  } : undefined;
+
+  if (_shared.pointerEventsEnabled && _shared.supportsPointerEvents) {
+    window.addEventListener('pointerup', _onTouchEnd);
+    window.addEventListener('pointerdown', _onTouchStart);
+    window.addEventListener('pointermove', _onTouchMove, _passiveSettings);
+  } else {
+    window.addEventListener('touchend', _onTouchEnd);
+    window.addEventListener('touchstart', _onTouchStart);
+    window.addEventListener('touchmove', _onTouchMove, _passiveSettings);
+  }
+
+  window.addEventListener('scroll', _onScroll);
+  return {
+    onTouchEnd: _onTouchEnd,
+    onTouchStart: _onTouchStart,
+    onTouchMove: _onTouchMove,
+    onScroll: _onScroll,
+
+    destroy: function destroy() {
+      if (_shared.pointerEventsEnabled && _shared.supportsPointerEvents) {
+        window.removeEventListener('pointerdown', _onTouchStart);
+        window.removeEventListener('pointerup', _onTouchEnd);
+        window.removeEventListener('pointermove', _onTouchMove, _passiveSettings);
+      } else {
+        window.removeEventListener('touchstart', _onTouchStart);
+        window.removeEventListener('touchend', _onTouchEnd);
+        window.removeEventListener('touchmove', _onTouchMove, _passiveSettings);
+      }
+
+      window.removeEventListener('scroll', _onScroll);
+    }
+
+  };
+});
+
+var _ptrMarkup = "\n<div class=\"__PREFIX__box\">\n  <div class=\"__PREFIX__content\">\n    <div class=\"__PREFIX__icon\"></div>\n    <div class=\"__PREFIX__text\"></div>\n  </div>\n</div>\n";
+
+var _ptrStyles = "\n.__PREFIX__ptr {\n  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.12);\n  pointer-events: none;\n  font-size: 0.85em;\n  font-weight: bold;\n  top: 0;\n  height: 0;\n  transition: height 0.3s, min-height 0.3s;\n  text-align: center;\n  width: 100%;\n  overflow: hidden;\n  display: flex;\n  align-items: flex-end;\n  align-content: stretch;\n}\n\n.__PREFIX__box {\n  padding: 10px;\n  flex-basis: 100%;\n}\n\n.__PREFIX__pull {\n  transition: none;\n}\n\n.__PREFIX__text {\n  margin-top: .33em;\n  color: rgba(0, 0, 0, 0.3);\n}\n\n.__PREFIX__icon {\n  color: rgba(0, 0, 0, 0.3);\n  transition: transform .3s;\n}\n\n/*\nWhen at the top of the page, disable vertical overscroll so passive touch\nlisteners can take over.\n*/\n.__PREFIX__top {\n  touch-action: pan-x pan-down pinch-zoom;\n}\n\n.__PREFIX__release {\n  .__PREFIX__icon {\n    transform: rotate(180deg);\n  }\n}\n";
+
+var _defaults = {
+  distThreshold: 60,
+  distMax: 80,
+  distReload: 50,
+  distIgnore: 0,
+  mainElement: 'body',
+  triggerElement: 'body',
+  ptrElement: '.ptr',
+  classPrefix: 'ptr--',
+  cssProp: 'min-height',
+  iconArrow: '&#8675;',
+  iconRefreshing: '&hellip;',
+  instructionsPullToRefresh: 'Pull down to refresh',
+  instructionsReleaseToRefresh: 'Release to refresh',
+  instructionsRefreshing: 'Refreshing',
+  refreshTimeout: 500,
+  getMarkup: function () { return _ptrMarkup; },
+  getStyles: function () { return _ptrStyles; },
+  onInit: function () {},
+  onRefresh: function () { return location.reload(); },
+  resistanceFunction: function (t) { return Math.min(1, t / 2.5); },
+  shouldPullToRefresh: function () { return !window.scrollY; }
+};
+
+var _methods = ['mainElement', 'ptrElement', 'triggerElement'];
+var _setupHandler = (function (options) {
+  var _handler = {}; // merge options with defaults
+
+  Object.keys(_defaults).forEach(function (key) {
+    _handler[key] = options[key] || _defaults[key];
+  }); // normalize timeout value, even if it is zero
+
+  _handler.refreshTimeout = typeof options.refreshTimeout === 'number' ? options.refreshTimeout : _defaults.refreshTimeout; // normalize elements
+
+  _methods.forEach(function (method) {
+    if (typeof _handler[method] === 'string') {
+      _handler[method] = document.querySelector(_handler[method]);
+    }
+  }); // attach events lazily
+
+
+  if (!_shared.events) {
+    _shared.events = _setupEvents();
+  }
+
+  _handler.contains = function (target) {
+    return _handler.triggerElement.contains(target);
+  };
+
+  _handler.destroy = function () {
+    // stop pending any pending callbacks
+    clearTimeout(_shared.timeout); // remove handler from shared state
+
+    var offset = _shared.handlers.indexOf(_handler);
+
+    _shared.handlers.splice(offset, 1);
+  };
+
+  return _handler;
+});
+
+var index = {
+  setPassiveMode: function setPassiveMode(isPassive) {
+    _shared.passive = isPassive;
+  },
+
+  setPointerEventsMode: function setPointerEventsMode(isEnabled) {
+    _shared.pointerEventsEnabled = isEnabled;
+  },
+
+  destroyAll: function destroyAll() {
+    if (_shared.events) {
+      _shared.events.destroy();
+
+      _shared.events = null;
+    }
+
+    _shared.handlers.forEach(function (h) {
+      h.destroy();
+    });
+  },
+
+  init: function init(options) {
+    if ( options === void 0 ) options = {};
+
+    var handler = _setupHandler(options);
+
+    _shared.handlers.push(handler);
+
+    return handler;
+  },
+
+  // export utils for testing
+  _: {
+    setupHandler: _setupHandler,
+    setupEvents: _setupEvents,
+    setupDOM: _ptr.setupDOM,
+    onReset: _ptr.onReset,
+    update: _ptr.update
+  }
+};
+
+export default index;

plugins/pulltorefresh/0.1.19/index.js

@@ -0,0 +1,392 @@
+'use strict';
+
+var _shared = {
+  pullStartY: null,
+  pullMoveY: null,
+  handlers: [],
+  styleEl: null,
+  events: null,
+  dist: 0,
+  state: 'pending',
+  timeout: null,
+  distResisted: 0,
+  supportsPassive: false,
+  supportsPointerEvents: !!window.PointerEvent
+};
+
+try {
+  window.addEventListener('test', null, {
+    get passive() {
+      // eslint-disable-line getter-return
+      _shared.supportsPassive = true;
+    }
+
+  });
+} catch (e) {// do nothing
+}
+
+function setupDOM(handler) {
+  if (!handler.ptrElement) {
+    var ptr = document.createElement('div');
+
+    if (handler.mainElement !== document.body) {
+      handler.mainElement.parentNode.insertBefore(ptr, handler.mainElement);
+    } else {
+      document.body.insertBefore(ptr, document.body.firstChild);
+    }
+
+    ptr.classList.add(((handler.classPrefix) + "ptr"));
+    ptr.innerHTML = handler.getMarkup().replace(/__PREFIX__/g, handler.classPrefix);
+    handler.ptrElement = ptr;
+
+    if (typeof handler.onInit === 'function') {
+      handler.onInit(handler);
+    } // Add the css styles to the style node, and then
+    // insert it into the dom
+
+
+    if (!_shared.styleEl) {
+      _shared.styleEl = document.createElement('style');
+
+      _shared.styleEl.setAttribute('id', 'pull-to-refresh-js-style');
+
+      document.head.appendChild(_shared.styleEl);
+    }
+
+    _shared.styleEl.textContent = handler.getStyles().replace(/__PREFIX__/g, handler.classPrefix).replace(/\s+/g, ' ');
+  }
+
+  return handler;
+}
+
+function onReset(handler) {
+  handler.ptrElement.classList.remove(((handler.classPrefix) + "refresh"));
+  handler.ptrElement.style[handler.cssProp] = '0px';
+  setTimeout(function () {
+    // remove previous ptr-element from DOM
+    if (handler.ptrElement && handler.ptrElement.parentNode) {
+      handler.ptrElement.parentNode.removeChild(handler.ptrElement);
+      handler.ptrElement = null;
+    } // reset state
+
+
+    _shared.state = 'pending';
+  }, handler.refreshTimeout);
+}
+
+function update(handler) {
+  var iconEl = handler.ptrElement.querySelector(("." + (handler.classPrefix) + "icon"));
+  var textEl = handler.ptrElement.querySelector(("." + (handler.classPrefix) + "text"));
+
+  if (iconEl) {
+    if (_shared.state === 'refreshing') {
+      iconEl.innerHTML = handler.iconRefreshing;
+    } else {
+      iconEl.innerHTML = handler.iconArrow;
+    }
+  }
+
+  if (textEl) {
+    if (_shared.state === 'releasing') {
+      textEl.innerHTML = handler.instructionsReleaseToRefresh;
+    }
+
+    if (_shared.state === 'pulling' || _shared.state === 'pending') {
+      textEl.innerHTML = handler.instructionsPullToRefresh;
+    }
+
+    if (_shared.state === 'refreshing') {
+      textEl.innerHTML = handler.instructionsRefreshing;
+    }
+  }
+}
+
+var _ptr = {
+  setupDOM: setupDOM,
+  onReset: onReset,
+  update: update
+};
+
+var screenY = function screenY(event) {
+  if (_shared.pointerEventsEnabled && _shared.supportsPointerEvents) {
+    return event.screenY;
+  }
+
+  return event.touches[0].screenY;
+};
+
+var _setupEvents = (function () {
+  var _el;
+
+  function _onTouchStart(e) {
+    // here, we must pick a handler first, and then append their html/css on the DOM
+    var target = _shared.handlers.filter(function (h) { return h.contains(e.target); })[0];
+
+    _shared.enable = !!target;
+
+    if (target && _shared.state === 'pending') {
+      _el = _ptr.setupDOM(target);
+
+      if (target.shouldPullToRefresh()) {
+        _shared.pullStartY = screenY(e);
+      }
+
+      clearTimeout(_shared.timeout);
+
+      _ptr.update(target);
+    }
+  }
+
+  function _onTouchMove(e) {
+    if (!(_el && _el.ptrElement && _shared.enable)) {
+      return;
+    }
+
+    if (!_shared.pullStartY) {
+      if (_el.shouldPullToRefresh()) {
+        _shared.pullStartY = screenY(e);
+      }
+    } else {
+      _shared.pullMoveY = screenY(e);
+    }
+
+    if (_shared.state === 'refreshing') {
+      if (e.cancelable && _el.shouldPullToRefresh() && _shared.pullStartY < _shared.pullMoveY) {
+        e.preventDefault();
+      }
+
+      return;
+    }
+
+    if (_shared.state === 'pending') {
+      _el.ptrElement.classList.add(((_el.classPrefix) + "pull"));
+
+      _shared.state = 'pulling';
+
+      _ptr.update(_el);
+    }
+
+    if (_shared.pullStartY && _shared.pullMoveY) {
+      _shared.dist = _shared.pullMoveY - _shared.pullStartY;
+    }
+
+    _shared.distExtra = _shared.dist - _el.distIgnore;
+
+    if (_shared.distExtra > 0) {
+      if (e.cancelable) {
+        e.preventDefault();
+      }
+
+      _el.ptrElement.style[_el.cssProp] = (_shared.distResisted) + "px";
+      _shared.distResisted = _el.resistanceFunction(_shared.distExtra / _el.distThreshold) * Math.min(_el.distMax, _shared.distExtra);
+
+      if (_shared.state === 'pulling' && _shared.distResisted > _el.distThreshold) {
+        _el.ptrElement.classList.add(((_el.classPrefix) + "release"));
+
+        _shared.state = 'releasing';
+
+        _ptr.update(_el);
+      }
+
+      if (_shared.state === 'releasing' && _shared.distResisted < _el.distThreshold) {
+        _el.ptrElement.classList.remove(((_el.classPrefix) + "release"));
+
+        _shared.state = 'pulling';
+
+        _ptr.update(_el);
+      }
+    }
+  }
+
+  function _onTouchEnd() {
+    if (!(_el && _el.ptrElement && _shared.enable)) {
+      return;
+    }
+
+    if (_shared.state === 'releasing' && _shared.distResisted > _el.distThreshold) {
+      _shared.state = 'refreshing';
+      _el.ptrElement.style[_el.cssProp] = (_el.distReload) + "px";
+
+      _el.ptrElement.classList.add(((_el.classPrefix) + "refresh"));
+
+      _shared.timeout = setTimeout(function () {
+        var retval = _el.onRefresh(function () { return _ptr.onReset(_el); });
+
+        if (retval && typeof retval.then === 'function') {
+          retval.then(function () { return _ptr.onReset(_el); });
+        }
+
+        if (!retval && !_el.onRefresh.length) {
+          _ptr.onReset(_el);
+        }
+      }, _el.refreshTimeout);
+    } else {
+      if (_shared.state === 'refreshing') {
+        return;
+      }
+
+      _el.ptrElement.style[_el.cssProp] = '0px';
+      _shared.state = 'pending';
+    }
+
+    _ptr.update(_el);
+
+    _el.ptrElement.classList.remove(((_el.classPrefix) + "release"));
+
+    _el.ptrElement.classList.remove(((_el.classPrefix) + "pull"));
+
+    _shared.pullStartY = _shared.pullMoveY = null;
+    _shared.dist = _shared.distResisted = 0;
+  }
+
+  function _onScroll() {
+    if (_el) {
+      _el.mainElement.classList.toggle(((_el.classPrefix) + "top"), _el.shouldPullToRefresh());
+    }
+  }
+
+  var _passiveSettings = _shared.supportsPassive ? {
+    passive: _shared.passive || false
+  } : undefined;
+
+  if (_shared.pointerEventsEnabled && _shared.supportsPointerEvents) {
+    window.addEventListener('pointerup', _onTouchEnd);
+    window.addEventListener('pointerdown', _onTouchStart);
+    window.addEventListener('pointermove', _onTouchMove, _passiveSettings);
+  } else {
+    window.addEventListener('touchend', _onTouchEnd);
+    window.addEventListener('touchstart', _onTouchStart);
+    window.addEventListener('touchmove', _onTouchMove, _passiveSettings);
+  }
+
+  window.addEventListener('scroll', _onScroll);
+  return {
+    onTouchEnd: _onTouchEnd,
+    onTouchStart: _onTouchStart,
+    onTouchMove: _onTouchMove,
+    onScroll: _onScroll,
+
+    destroy: function destroy() {
+      if (_shared.pointerEventsEnabled && _shared.supportsPointerEvents) {
+        window.removeEventListener('pointerdown', _onTouchStart);
+        window.removeEventListener('pointerup', _onTouchEnd);
+        window.removeEventListener('pointermove', _onTouchMove, _passiveSettings);
+      } else {
+        window.removeEventListener('touchstart', _onTouchStart);
+        window.removeEventListener('touchend', _onTouchEnd);
+        window.removeEventListener('touchmove', _onTouchMove, _passiveSettings);
+      }
+
+      window.removeEventListener('scroll', _onScroll);
+    }
+
+  };
+});
+
+var _ptrMarkup = "\n<div class=\"__PREFIX__box\">\n  <div class=\"__PREFIX__content\">\n    <div class=\"__PREFIX__icon\"></div>\n    <div class=\"__PREFIX__text\"></div>\n  </div>\n</div>\n";
+
+var _ptrStyles = "\n.__PREFIX__ptr {\n  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.12);\n  pointer-events: none;\n  font-size: 0.85em;\n  font-weight: bold;\n  top: 0;\n  height: 0;\n  transition: height 0.3s, min-height 0.3s;\n  text-align: center;\n  width: 100%;\n  overflow: hidden;\n  display: flex;\n  align-items: flex-end;\n  align-content: stretch;\n}\n\n.__PREFIX__box {\n  padding: 10px;\n  flex-basis: 100%;\n}\n\n.__PREFIX__pull {\n  transition: none;\n}\n\n.__PREFIX__text {\n  margin-top: .33em;\n  color: rgba(0, 0, 0, 0.3);\n}\n\n.__PREFIX__icon {\n  color: rgba(0, 0, 0, 0.3);\n  transition: transform .3s;\n}\n\n/*\nWhen at the top of the page, disable vertical overscroll so passive touch\nlisteners can take over.\n*/\n.__PREFIX__top {\n  touch-action: pan-x pan-down pinch-zoom;\n}\n\n.__PREFIX__release {\n  .__PREFIX__icon {\n    transform: rotate(180deg);\n  }\n}\n";
+
+var _defaults = {
+  distThreshold: 60,
+  distMax: 80,
+  distReload: 50,
+  distIgnore: 0,
+  mainElement: 'body',
+  triggerElement: 'body',
+  ptrElement: '.ptr',
+  classPrefix: 'ptr--',
+  cssProp: 'min-height',
+  iconArrow: '&#8675;',
+  iconRefreshing: '&hellip;',
+  instructionsPullToRefresh: 'Pull down to refresh',
+  instructionsReleaseToRefresh: 'Release to refresh',
+  instructionsRefreshing: 'Refreshing',
+  refreshTimeout: 500,
+  getMarkup: function () { return _ptrMarkup; },
+  getStyles: function () { return _ptrStyles; },
+  onInit: function () {},
+  onRefresh: function () { return location.reload(); },
+  resistanceFunction: function (t) { return Math.min(1, t / 2.5); },
+  shouldPullToRefresh: function () { return !window.scrollY; }
+};
+
+var _methods = ['mainElement', 'ptrElement', 'triggerElement'];
+var _setupHandler = (function (options) {
+  var _handler = {}; // merge options with defaults
+
+  Object.keys(_defaults).forEach(function (key) {
+    _handler[key] = options[key] || _defaults[key];
+  }); // normalize timeout value, even if it is zero
+
+  _handler.refreshTimeout = typeof options.refreshTimeout === 'number' ? options.refreshTimeout : _defaults.refreshTimeout; // normalize elements
+
+  _methods.forEach(function (method) {
+    if (typeof _handler[method] === 'string') {
+      _handler[method] = document.querySelector(_handler[method]);
+    }
+  }); // attach events lazily
+
+
+  if (!_shared.events) {
+    _shared.events = _setupEvents();
+  }
+
+  _handler.contains = function (target) {
+    return _handler.triggerElement.contains(target);
+  };
+
+  _handler.destroy = function () {
+    // stop pending any pending callbacks
+    clearTimeout(_shared.timeout); // remove handler from shared state
+
+    var offset = _shared.handlers.indexOf(_handler);
+
+    _shared.handlers.splice(offset, 1);
+  };
+
+  return _handler;
+});
+
+var index = {
+  setPassiveMode: function setPassiveMode(isPassive) {
+    _shared.passive = isPassive;
+  },
+
+  setPointerEventsMode: function setPointerEventsMode(isEnabled) {
+    _shared.pointerEventsEnabled = isEnabled;
+  },
+
+  destroyAll: function destroyAll() {
+    if (_shared.events) {
+      _shared.events.destroy();
+
+      _shared.events = null;
+    }
+
+    _shared.handlers.forEach(function (h) {
+      h.destroy();
+    });
+  },
+
+  init: function init(options) {
+    if ( options === void 0 ) options = {};
+
+    var handler = _setupHandler(options);
+
+    _shared.handlers.push(handler);
+
+    return handler;
+  },
+
+  // export utils for testing
+  _: {
+    setupHandler: _setupHandler,
+    setupEvents: _setupEvents,
+    setupDOM: _ptr.setupDOM,
+    onReset: _ptr.onReset,
+    update: _ptr.update
+  }
+};
+
+module.exports = index;

plugins/pulltorefresh/0.1.19/index.umd.js

@@ -0,0 +1,403 @@
+/*!
+ * pulltorefreshjs v0.1.18
+ * (c) Rafael Soto
+ * Released under the MIT License.
+ */
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = global || self, global.PullToRefresh = factory());
+}(this, function () { 'use strict';
+
+  var _shared = {
+    pullStartY: null,
+    pullMoveY: null,
+    handlers: [],
+    styleEl: null,
+    events: null,
+    dist: 0,
+    state: 'pending',
+    timeout: null,
+    distResisted: 0,
+    supportsPassive: false,
+    supportsPointerEvents: !!window.PointerEvent
+  };
+
+  try {
+    window.addEventListener('test', null, {
+      get passive() {
+        // eslint-disable-line getter-return
+        _shared.supportsPassive = true;
+      }
+
+    });
+  } catch (e) {// do nothing
+  }
+
+  function setupDOM(handler) {
+    if (!handler.ptrElement) {
+      var ptr = document.createElement('div');
+
+      if (handler.mainElement !== document.body) {
+        handler.mainElement.parentNode.insertBefore(ptr, handler.mainElement);
+      } else {
+        document.body.insertBefore(ptr, document.body.firstChild);
+      }
+
+      ptr.classList.add(((handler.classPrefix) + "ptr"));
+      ptr.innerHTML = handler.getMarkup().replace(/__PREFIX__/g, handler.classPrefix);
+      handler.ptrElement = ptr;
+
+      if (typeof handler.onInit === 'function') {
+        handler.onInit(handler);
+      } // Add the css styles to the style node, and then
+      // insert it into the dom
+
+
+      if (!_shared.styleEl) {
+        _shared.styleEl = document.createElement('style');
+
+        _shared.styleEl.setAttribute('id', 'pull-to-refresh-js-style');
+
+        document.head.appendChild(_shared.styleEl);
+      }
+
+      _shared.styleEl.textContent = handler.getStyles().replace(/__PREFIX__/g, handler.classPrefix).replace(/\s+/g, ' ');
+    }
+
+    return handler;
+  }
+
+  function onReset(handler) {
+    handler.ptrElement.classList.remove(((handler.classPrefix) + "refresh"));
+    handler.ptrElement.style[handler.cssProp] = '0px';
+    setTimeout(function () {
+      // remove previous ptr-element from DOM
+      if (handler.ptrElement && handler.ptrElement.parentNode) {
+        handler.ptrElement.parentNode.removeChild(handler.ptrElement);
+        handler.ptrElement = null;
+      } // reset state
+
+
+      _shared.state = 'pending';
+    }, handler.refreshTimeout);
+  }
+
+  function update(handler) {
+    var iconEl = handler.ptrElement.querySelector(("." + (handler.classPrefix) + "icon"));
+    var textEl = handler.ptrElement.querySelector(("." + (handler.classPrefix) + "text"));
+
+    if (iconEl) {
+      if (_shared.state === 'refreshing') {
+        iconEl.innerHTML = handler.iconRefreshing;
+      } else {
+        iconEl.innerHTML = handler.iconArrow;
+      }
+    }
+
+    if (textEl) {
+      if (_shared.state === 'releasing') {
+        textEl.innerHTML = handler.instructionsReleaseToRefresh;
+      }
+
+      if (_shared.state === 'pulling' || _shared.state === 'pending') {
+        textEl.innerHTML = handler.instructionsPullToRefresh;
+      }
+
+      if (_shared.state === 'refreshing') {
+        textEl.innerHTML = handler.instructionsRefreshing;
+      }
+    }
+  }
+
+  var _ptr = {
+    setupDOM: setupDOM,
+    onReset: onReset,
+    update: update
+  };
+
+  var screenY = function screenY(event) {
+    if (_shared.pointerEventsEnabled && _shared.supportsPointerEvents) {
+      return event.screenY;
+    }
+
+    return event.touches[0].screenY;
+  };
+
+  var _setupEvents = (function () {
+    var _el;
+
+    function _onTouchStart(e) {
+      // here, we must pick a handler first, and then append their html/css on the DOM
+      var target = _shared.handlers.filter(function (h) { return h.contains(e.target); })[0];
+
+      _shared.enable = !!target;
+
+      if (target && _shared.state === 'pending') {
+        _el = _ptr.setupDOM(target);
+
+        if (target.shouldPullToRefresh()) {
+          _shared.pullStartY = screenY(e);
+        }
+
+        clearTimeout(_shared.timeout);
+
+        _ptr.update(target);
+      }
+    }
+
+    function _onTouchMove(e) {
+      if (!(_el && _el.ptrElement && _shared.enable)) {
+        return;
+      }
+
+      if (!_shared.pullStartY) {
+        if (_el.shouldPullToRefresh()) {
+          _shared.pullStartY = screenY(e);
+        }
+      } else {
+        _shared.pullMoveY = screenY(e);
+      }
+
+      if (_shared.state === 'refreshing') {
+        if (e.cancelable && _el.shouldPullToRefresh() && _shared.pullStartY < _shared.pullMoveY) {
+          e.preventDefault();
+        }
+
+        return;
+      }
+
+      if (_shared.state === 'pending') {
+        _el.ptrElement.classList.add(((_el.classPrefix) + "pull"));
+
+        _shared.state = 'pulling';
+
+        _ptr.update(_el);
+      }
+
+      if (_shared.pullStartY && _shared.pullMoveY) {
+        _shared.dist = _shared.pullMoveY - _shared.pullStartY;
+      }
+
+      _shared.distExtra = _shared.dist - _el.distIgnore;
+
+      if (_shared.distExtra > 0) {
+        if (e.cancelable) {
+          e.preventDefault();
+        }
+
+        _el.ptrElement.style[_el.cssProp] = (_shared.distResisted) + "px";
+        _shared.distResisted = _el.resistanceFunction(_shared.distExtra / _el.distThreshold) * Math.min(_el.distMax, _shared.distExtra);
+
+        if (_shared.state === 'pulling' && _shared.distResisted > _el.distThreshold) {
+          _el.ptrElement.classList.add(((_el.classPrefix) + "release"));
+
+          _shared.state = 'releasing';
+
+          _ptr.update(_el);
+        }
+
+        if (_shared.state === 'releasing' && _shared.distResisted < _el.distThreshold) {
+          _el.ptrElement.classList.remove(((_el.classPrefix) + "release"));
+
+          _shared.state = 'pulling';
+
+          _ptr.update(_el);
+        }
+      }
+    }
+
+    function _onTouchEnd() {
+      if (!(_el && _el.ptrElement && _shared.enable)) {
+        return;
+      }
+
+      if (_shared.state === 'releasing' && _shared.distResisted > _el.distThreshold) {
+        _shared.state = 'refreshing';
+        _el.ptrElement.style[_el.cssProp] = (_el.distReload) + "px";
+
+        _el.ptrElement.classList.add(((_el.classPrefix) + "refresh"));
+
+        _shared.timeout = setTimeout(function () {
+          var retval = _el.onRefresh(function () { return _ptr.onReset(_el); });
+
+          if (retval && typeof retval.then === 'function') {
+            retval.then(function () { return _ptr.onReset(_el); });
+          }
+
+          if (!retval && !_el.onRefresh.length) {
+            _ptr.onReset(_el);
+          }
+        }, _el.refreshTimeout);
+      } else {
+        if (_shared.state === 'refreshing') {
+          return;
+        }
+
+        _el.ptrElement.style[_el.cssProp] = '0px';
+        _shared.state = 'pending';
+      }
+
+      _ptr.update(_el);
+
+      _el.ptrElement.classList.remove(((_el.classPrefix) + "release"));
+
+      _el.ptrElement.classList.remove(((_el.classPrefix) + "pull"));
+
+      _shared.pullStartY = _shared.pullMoveY = null;
+      _shared.dist = _shared.distResisted = 0;
+    }
+
+    function _onScroll() {
+      if (_el) {
+        _el.mainElement.classList.toggle(((_el.classPrefix) + "top"), _el.shouldPullToRefresh());
+      }
+    }
+
+    var _passiveSettings = _shared.supportsPassive ? {
+      passive: _shared.passive || false
+    } : undefined;
+
+    if (_shared.pointerEventsEnabled && _shared.supportsPointerEvents) {
+      window.addEventListener('pointerup', _onTouchEnd);
+      window.addEventListener('pointerdown', _onTouchStart);
+      window.addEventListener('pointermove', _onTouchMove, _passiveSettings);
+    } else {
+      window.addEventListener('touchend', _onTouchEnd);
+      window.addEventListener('touchstart', _onTouchStart);
+      window.addEventListener('touchmove', _onTouchMove, _passiveSettings);
+    }
+
+    window.addEventListener('scroll', _onScroll);
+    return {
+      onTouchEnd: _onTouchEnd,
+      onTouchStart: _onTouchStart,
+      onTouchMove: _onTouchMove,
+      onScroll: _onScroll,
+
+      destroy: function destroy() {
+        if (_shared.pointerEventsEnabled && _shared.supportsPointerEvents) {
+          window.removeEventListener('pointerdown', _onTouchStart);
+          window.removeEventListener('pointerup', _onTouchEnd);
+          window.removeEventListener('pointermove', _onTouchMove, _passiveSettings);
+        } else {
+          window.removeEventListener('touchstart', _onTouchStart);
+          window.removeEventListener('touchend', _onTouchEnd);
+          window.removeEventListener('touchmove', _onTouchMove, _passiveSettings);
+        }
+
+        window.removeEventListener('scroll', _onScroll);
+      }
+
+    };
+  });
+
+  var _ptrMarkup = "\n<div class=\"__PREFIX__box\">\n  <div class=\"__PREFIX__content\">\n    <div class=\"__PREFIX__icon\"></div>\n    <div class=\"__PREFIX__text\"></div>\n  </div>\n</div>\n";
+
+  var _ptrStyles = "\n.__PREFIX__ptr {\n  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.12);\n  pointer-events: none;\n  font-size: 0.85em;\n  font-weight: bold;\n  top: 0;\n  height: 0;\n  transition: height 0.3s, min-height 0.3s;\n  text-align: center;\n  width: 100%;\n  overflow: hidden;\n  display: flex;\n  align-items: flex-end;\n  align-content: stretch;\n}\n\n.__PREFIX__box {\n  padding: 10px;\n  flex-basis: 100%;\n}\n\n.__PREFIX__pull {\n  transition: none;\n}\n\n.__PREFIX__text {\n  margin-top: .33em;\n  color: rgba(0, 0, 0, 0.3);\n}\n\n.__PREFIX__icon {\n  color: rgba(0, 0, 0, 0.3);\n  transition: transform .3s;\n}\n\n/*\nWhen at the top of the page, disable vertical overscroll so passive touch\nlisteners can take over.\n*/\n.__PREFIX__top {\n  touch-action: pan-x pan-down pinch-zoom;\n}\n\n.__PREFIX__release {\n  .__PREFIX__icon {\n    transform: rotate(180deg);\n  }\n}\n";
+
+  var _defaults = {
+    distThreshold: 60,
+    distMax: 80,
+    distReload: 50,
+    distIgnore: 0,
+    mainElement: 'body',
+    triggerElement: 'body',
+    ptrElement: '.ptr',
+    classPrefix: 'ptr--',
+    cssProp: 'min-height',
+    iconArrow: '&#8675;',
+    iconRefreshing: '&hellip;',
+    instructionsPullToRefresh: 'Pull down to refresh',
+    instructionsReleaseToRefresh: 'Release to refresh',
+    instructionsRefreshing: 'Refreshing',
+    refreshTimeout: 500,
+    getMarkup: function () { return _ptrMarkup; },
+    getStyles: function () { return _ptrStyles; },
+    onInit: function () {},
+    onRefresh: function () { return location.reload(); },
+    resistanceFunction: function (t) { return Math.min(1, t / 2.5); },
+    shouldPullToRefresh: function () { return !window.scrollY; }
+  };
+
+  var _methods = ['mainElement', 'ptrElement', 'triggerElement'];
+  var _setupHandler = (function (options) {
+    var _handler = {}; // merge options with defaults
+
+    Object.keys(_defaults).forEach(function (key) {
+      _handler[key] = options[key] || _defaults[key];
+    }); // normalize timeout value, even if it is zero
+
+    _handler.refreshTimeout = typeof options.refreshTimeout === 'number' ? options.refreshTimeout : _defaults.refreshTimeout; // normalize elements
+
+    _methods.forEach(function (method) {
+      if (typeof _handler[method] === 'string') {
+        _handler[method] = document.querySelector(_handler[method]);
+      }
+    }); // attach events lazily
+
+
+    if (!_shared.events) {
+      _shared.events = _setupEvents();
+    }
+
+    _handler.contains = function (target) {
+      return _handler.triggerElement.contains(target);
+    };
+
+    _handler.destroy = function () {
+      // stop pending any pending callbacks
+      clearTimeout(_shared.timeout); // remove handler from shared state
+
+      var offset = _shared.handlers.indexOf(_handler);
+
+      _shared.handlers.splice(offset, 1);
+    };
+
+    return _handler;
+  });
+
+  var index = {
+    setPassiveMode: function setPassiveMode(isPassive) {
+      _shared.passive = isPassive;
+    },
+
+    setPointerEventsMode: function setPointerEventsMode(isEnabled) {
+      _shared.pointerEventsEnabled = isEnabled;
+    },
+
+    destroyAll: function destroyAll() {
+      if (_shared.events) {
+        _shared.events.destroy();
+
+        _shared.events = null;
+      }
+
+      _shared.handlers.forEach(function (h) {
+        h.destroy();
+      });
+    },
+
+    init: function init(options) {
+      if ( options === void 0 ) options = {};
+
+      var handler = _setupHandler(options);
+
+      _shared.handlers.push(handler);
+
+      return handler;
+    },
+
+    // export utils for testing
+    _: {
+      setupHandler: _setupHandler,
+      setupEvents: _setupEvents,
+      setupDOM: _ptr.setupDOM,
+      onReset: _ptr.onReset,
+      update: _ptr.update
+    }
+  };
+
+  return index;
+
+}));

plugins/pulltorefresh/LICENSE.txt

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2016 Box Factura
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

plugins/pulltorefresh/README.md

@@ -0,0 +1,206 @@
+![PulltoRefresh.js](img/pulltorefresh.gif)
+
+[![Build Status](https://travis-ci.org/BoxFactura/pulltorefresh.js.png)](https://travis-ci.org/BoxFactura/pulltorefresh.js)
+[![NPM version](https://badge.fury.io/js/pulltorefreshjs.png)](http://badge.fury.io/js/pulltorefreshjs)
+[![CDNJS](https://img.shields.io/cdnjs/v/pulltorefreshjs.svg)](https://cdnjs.com/libraries/pulltorefreshjs)
+
+[**PulltoRefresh.js**](http://www.boxfactura.com/pulltorefresh.js/) • [Demos](http://www.boxfactura.com/pulltorefresh.js/demos/basic.html)
+
+A small, but powerful Javascript library crafted to power your webapp's pull to refresh feature. No markup needed, highly customizable and dependency-free!
+
+---
+
+## Donations
+
+If you found this project helpful, please consider a donation.
+
+[![](https://www.paypalobjects.com/en_US/MX/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=WYS5CSZWWLNN4)
+
+
+## Installation
+
+Download PulltoRefresh either from the [NPM Registry](https://www.npmjs.com/package/pulltorefreshjs), [CDNJS](https://cdnjs.com/libraries/pulltorefreshjs) or [UNPKG](https://unpkg.com/pulltorefreshjs):
+
+```bash
+$ npm install pulltorefreshjs --save-dev
+$ wget -O pulltorefresh.js https://unpkg.com/pulltorefreshjs
+```
+
+Include the JS file in your webapp and initialize it:
+
+```js
+const ptr = PullToRefresh.init({
+  mainElement: 'body',
+  onRefresh() {
+    window.location.reload();
+  }
+});
+```
+
+Bundlers can consume `pulltorefreshjs` as CommonJS and ES6-modules syntax:
+
+```js
+import PullToRefresh from 'pulltorefreshjs';
+// or
+const PullToRefresh = require('pulltorefreshjs');
+```
+
+API
+---
+
+- **`init(options)`**
+  Will return a unique ptr-instance with a `destroy()` method.
+- **`destroyAll()`**
+  Stop and remove all registered ptr-instances.
+- **`setPassiveMode(isPassive)`**
+  Enable or disable passive mode for event handlers (new instances only).
+
+## Options
+
+- **`distThreshold`** (integer)
+  Minimum distance required to trigger the refresh.
+  <br />&mdash; Defaults to `60`
+- **`distMax`** (integer)
+  Maximum distance possible for the element.
+  <br />&mdash; Defaults to `80`
+- **`distReload`** (integer)
+  After the `distThreshold` is reached and released, the element will have this height.
+  <br />&mdash; Defaults to `50`
+- **`distIgnore`** (integer)
+  After which distance should we start pulling?
+  <br />&mdash; Defaults to `0`
+- **`mainElement`** (string)
+  Before which element the pull to refresh elements will be?
+  <br />&mdash; Defaults to `body`
+- **`triggerElement`** (string)
+  Which element should trigger the pull to refresh?
+  <br />&mdash; Defaults to `body`
+- **`ptrElement`** (string)
+  Which class will the main element have?
+  <br />&mdash; Defaults to `.ptr`
+- **`classPrefix`** (string)
+  Which class prefix for the elements?
+  <br />&mdash; Defaults to `ptr--`
+- **`cssProp`** (string)
+  Which property will be usedto calculate the element's proportions?
+  <br />&mdash; Defaults to `min-height`
+- **`iconArrow`** (string)
+  The icon for both `instructionsPullToRefresh` and `instructionsReleaseToRefresh`
+  <br />&mdash; Defaults to `&#8675;`
+- **`iconRefreshing`** (string)
+  The icon when the refresh is in progress.
+  <br />&mdash; Defaults to `&hellip;`
+- **`instructionsPullToRefresh`** (string)
+  The initial instructions string.
+  <br />&mdash; Defaults to `Pull down to refresh`
+- **`instructionsReleaseToRefresh`** (string)
+  The instructions string when the `distThreshold` has been reached.
+  <br />&mdash; Defaults to `Release to refresh`
+- **`instructionsRefreshing`** (string)
+  The refreshing text.
+  <br />&mdash; Defaults to `Refreshing`
+- **`refreshTimeout`** (integer)
+  The delay, in milliseconds before the `onRefresh` is triggered.
+  <br />&mdash; Defaults to `500`
+- **`getMarkup`** (function)
+  It returns the default HTML for the widget, `__PREFIX__` is replaced.
+  <br />&mdash; See [src/lib/markup.js](src/lib/markup.js)
+- **`getStyles`** (function)
+  It returns the default CSS for the widget, `__PREFIX__` is replaced.
+  <br />&mdash; See [src/lib/styles.js](src/lib/styles.js)
+- **`onInit`** (function)
+  The initialize function.
+- **`onRefresh`** (function)
+  What will the pull to refresh trigger? You can return a promise.
+  <br />&mdash; Defaults to `window.location.reload()`
+- **`resistanceFunction`** (function)
+  The resistance function, accepts one parameter, must return a number, capping at 1.
+  <br />&mdash; Defaults to `t => Math.min(1, t / 2.5)`
+- **`shouldPullToRefresh`** (function)
+  Which condition should be met for pullToRefresh to trigger?
+  <br />&mdash; Defaults to `!window.scrollY` • Please note that this default is useful whenever you're setting mainElement as the body of the document, if you need it in another element with overflow, use `!this.mainElement.scrollTop`. Refer to the [multiple instances demo](https://www.boxfactura.com/pulltorefresh.js/demos/multiple.html) for reference.
+
+## Use with React
+
+With [ReactDOMServer](https://reactjs.org/docs/react-dom-server.html) and `renderToString()` you can use components as
+icons instead of just strings.
+In this example we also use [Font Awesome](https://fontawesome.com/how-to-use/on-the-web/using-with/react) to get nice icons with animation, but you can
+use any React component you like.
+
+[Demo on codesandbox.io](https://codesandbox.io/s/21o9z8rrzy)
+
+```jsx harmony
+
+import React, { Component } from 'react';
+import ReactDOMServer from 'react-dom/server';
+import PullToRefresh from 'pulltorefreshjs';
+import { faSyncAlt} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+class App extends Component
+{
+    componentDidMount()
+    {
+        PullToRefresh.init({
+            mainElement: 'body',
+            onRefresh() {
+                window.location.reload();
+            },
+            iconArrow: ReactDOMServer.renderToString(
+                <FontAwesomeIcon icon={faSyncAlt} />
+            ),
+            iconRefreshing: ReactDOMServer.renderToString(
+                <FontAwesomeIcon icon={faSyncAlt} spin={true} />
+            ),
+        });
+    }
+
+    componentWillUnmount()
+    {
+        // Don't forget to destroy all instances on unmout
+        // or you will get some glitches.
+        PullToRefresh.destroyAll();
+    }
+
+    render()
+    {
+        return (
+            <div>
+                <h1>App</h1>
+            </div>
+        );
+    }
+}
+
+export default App;
+```
+
+## Contribute
+
+To quickly start the development workflow:
+
+1. Install NodeJS ([NVM](https://github.com/creationix/nvm/blob/master/nvm.sh))
+2. Run `nvm use 10 && npm install`
+3. Then `npm run dev`
+
+> This will watch and compile the bundle for browser usage.
+
+E2E tests are executed with Testcafé.
+
+- Run `npm test` to use standard Chrome
+- Run `npm pretest && npm run test:ci` to run Chrome in headless mode
+
+Advanced debug can be achieved with `testcafe-live`, e.g.
+
+```bash
+$ npm test --live chrome tests/e2e/cases --debug-on-fail
+```
+
+## Roadmap
+
+- [ ] More events: `onPullStart`, `onPullDown(direction, willRefresh)`, `onRelease(willRefresh)`
+- [ ] Fully customizable CSS
+- [ ] Gallery of use cases
+- [ ] Advanced demos
+- [x] Tests
+- [x] Minified releases