Separate initialize, update and destroy functions.

src/js/plugin/initialize.js

@@ -0,0 +1,626 @@
+/* Copyright (c) 2015 Hyunje Alex Jun and other contributors
+ * Licensed under the MIT License
+ */
+'use strict';
+
+var cls = require('../lib/class')
+  , d = require('../lib/dom')
+  , evt = require('../lib/event')
+  , h = require('../lib/helper')
+  , instances = require('./instances')
+  , updateGeometry = require('./update');
+
+module.exports = function (element, userSettings) {
+  userSettings = typeof userSettings === 'object' ? userSettings : {};
+
+  cls.add(element, 'ps-container');
+
+  // Create a plugin instance.
+  var i = instances.add(element);
+
+  i.settings = h.extend(i.settings, userSettings);
+
+  function updateScrollTop(currentTop, deltaY) {
+    var newTop = currentTop + deltaY;
+    var maxTop = i.containerHeight - i.scrollbarYHeight;
+
+    if (newTop < 0) {
+      i.scrollbarYTop = 0;
+    } else if (newTop > maxTop) {
+      i.scrollbarYTop = maxTop;
+    } else {
+      i.scrollbarYTop = newTop;
+    }
+
+    var scrollTop = h.toInt(i.scrollbarYTop * (i.contentHeight - i.containerHeight) / (i.containerHeight - i.scrollbarYHeight));
+    element.scrollTop = scrollTop;
+  }
+
+  function updateScrollLeft(currentLeft, deltaX) {
+    var newLeft = currentLeft + deltaX;
+    var maxLeft = i.containerWidth - i.scrollbarXWidth;
+
+    if (newLeft < 0) {
+      i.scrollbarXLeft = 0;
+    } else if (newLeft > maxLeft) {
+      i.scrollbarXLeft = maxLeft;
+    } else {
+      i.scrollbarXLeft = newLeft;
+    }
+
+    var scrollLeft = h.toInt(i.scrollbarXLeft * (i.contentWidth - i.containerWidth) / (i.containerWidth - i.scrollbarXWidth));
+    element.scrollLeft = scrollLeft;
+  }
+
+  function bindMouseScrollXHandler() {
+    var currentLeft;
+    var currentPageX;
+
+    var mouseMoveHandler = function (e) {
+      updateScrollLeft(currentLeft, e.pageX - currentPageX);
+      updateGeometry(element);
+      e.stopPropagation();
+      e.preventDefault();
+    };
+
+    var mouseUpHandler = function (e) {
+      cls.remove(element, 'ps-x');
+      cls.remove(element, 'ps-in-scrolling');
+      $(i.ownerDocument).unbind(i.eventClass('mousemove'), mouseMoveHandler);
+    };
+
+    $(i.scrollbarX).bind(i.eventClass('mousedown'), function (e) {
+      currentPageX = e.pageX;
+      currentLeft = h.toInt(d.css(i.scrollbarX, 'left'));
+      cls.add(element, 'ps-in-scrolling');
+      cls.add(element, 'ps-x');
+
+      $(i.ownerDocument).bind(i.eventClass('mousemove'), mouseMoveHandler);
+      evt.once(i.ownerDocument, 'mouseup', mouseUpHandler);
+
+      e.stopPropagation();
+      e.preventDefault();
+    });
+
+    currentLeft =
+    currentPageX = null;
+  }
+
+  function bindMouseScrollYHandler() {
+    var currentTop;
+    var currentPageY;
+
+    var mouseMoveHandler = function (e) {
+      updateScrollTop(currentTop, e.pageY - currentPageY);
+      updateGeometry(element);
+      e.stopPropagation();
+      e.preventDefault();
+    };
+
+    var mouseUpHandler = function (e) {
+      cls.remove(element, 'ps-y');
+      cls.remove(element, 'ps-in-scrolling');
+      $(i.ownerDocument).unbind(i.eventClass('mousemove'), mouseMoveHandler);
+    };
+
+    $(i.scrollbarY).bind(i.eventClass('mousedown'), function (e) {
+      currentPageY = e.pageY;
+      currentTop = h.toInt(d.css(i.scrollbarY, 'top'));
+      cls.add(element, 'ps-in-scrolling');
+      cls.add(element, 'ps-y');
+
+      $(i.ownerDocument).bind(i.eventClass('mousemove'), mouseMoveHandler);
+      evt.once(i.ownerDocument, 'mouseup', mouseUpHandler);
+
+      e.stopPropagation();
+      e.preventDefault();
+    });
+
+    currentTop =
+    currentPageY = null;
+  }
+
+  function shouldPreventWheel(deltaX, deltaY) {
+    var scrollTop = element.scrollTop;
+    if (deltaX === 0) {
+      if (!i.scrollbarYActive) {
+        return false;
+      }
+      if ((scrollTop === 0 && deltaY > 0) || (scrollTop >= i.contentHeight - i.containerHeight && deltaY < 0)) {
+        return !i.settings.wheelPropagation;
+      }
+    }
+
+    var scrollLeft = element.scrollLeft;
+    if (deltaY === 0) {
+      if (!i.scrollbarXActive) {
+        return false;
+      }
+      if ((scrollLeft === 0 && deltaX < 0) || (scrollLeft >= i.contentWidth - i.containerWidth && deltaX > 0)) {
+        return !i.settings.wheelPropagation;
+      }
+    }
+    return true;
+  }
+
+  function shouldPreventSwipe(deltaX, deltaY) {
+    var scrollTop = element.scrollTop;
+    var scrollLeft = element.scrollLeft;
+    var magnitudeX = Math.abs(deltaX);
+    var magnitudeY = Math.abs(deltaY);
+
+    if (magnitudeY > magnitudeX) {
+      // user is perhaps trying to swipe up/down the page
+
+      if (((deltaY < 0) && (scrollTop === i.contentHeight - i.containerHeight)) ||
+          ((deltaY > 0) && (scrollTop === 0))) {
+        return !i.settings.swipePropagation;
+      }
+    } else if (magnitudeX > magnitudeY) {
+      // user is perhaps trying to swipe left/right across the page
+
+      if (((deltaX < 0) && (scrollLeft === i.contentWidth - i.containerWidth)) ||
+          ((deltaX > 0) && (scrollLeft === 0))) {
+        return !i.settings.swipePropagation;
+      }
+    }
+
+    return true;
+  }
+
+  function bindMouseWheelHandler() {
+    var shouldPrevent = false;
+
+    function getDeltaFromEvent(e) {
+      var deltaX = e.originalEvent.deltaX;
+      var deltaY = -1 * e.originalEvent.deltaY;
+
+      if (typeof deltaX === "undefined" || typeof deltaY === "undefined") {
+        // OS X Safari
+        deltaX = -1 * e.originalEvent.wheelDeltaX / 6;
+        deltaY = e.originalEvent.wheelDeltaY / 6;
+      }
+
+      if (e.originalEvent.deltaMode && e.originalEvent.deltaMode === 1) {
+        // Firefox in deltaMode 1: Line scrolling
+        deltaX *= 10;
+        deltaY *= 10;
+      }
+
+      if (deltaX !== deltaX && deltaY !== deltaY/* NaN checks */) {
+        // IE in some mouse drivers
+        deltaX = 0;
+        deltaY = e.originalEvent.wheelDelta;
+      }
+
+      return [deltaX, deltaY];
+    }
+
+    function mousewheelHandler(e) {
+      // FIXME: this is a quick fix for the select problem in FF and IE.
+      // If there comes an effective way to deal with the problem,
+      // this lines should be removed.
+      if (!h.env.isWebKit && element.querySelector('select:focus')) {
+        return;
+      }
+
+      var delta = getDeltaFromEvent(e);
+
+      var deltaX = delta[0];
+      var deltaY = delta[1];
+
+      shouldPrevent = false;
+      if (!i.settings.useBothWheelAxes) {
+        // deltaX will only be used for horizontal scrolling and deltaY will
+        // only be used for vertical scrolling - this is the default
+        element.scrollTop = element.scrollTop - (deltaY * i.settings.wheelSpeed);
+        element.scrollLeft = element.scrollLeft + (deltaX * i.settings.wheelSpeed);
+      } else if (i.scrollbarYActive && !i.scrollbarXActive) {
+        // only vertical scrollbar is active and useBothWheelAxes option is
+        // active, so let's scroll vertical bar using both mouse wheel axes
+        if (deltaY) {
+          element.scrollTop = element.scrollTop() - (deltaY * i.settings.wheelSpeed);
+        } else {
+          element.scrollTop = element.scrollTop() + (deltaX * i.settings.wheelSpeed);
+        }
+        shouldPrevent = true;
+      } else if (i.scrollbarXActive && !i.scrollbarYActive) {
+        // useBothWheelAxes and only horizontal bar is active, so use both
+        // wheel axes for horizontal bar
+        if (deltaX) {
+          element.scrollLeft = element.scrollLeft() + (deltaX * i.settings.wheelSpeed);
+        } else {
+          element.scrollLeft = element.scrollLeft() - (deltaY * i.settings.wheelSpeed);
+        }
+        shouldPrevent = true;
+      }
+
+      updateGeometry(element);
+
+      shouldPrevent = (shouldPrevent || shouldPreventWheel(deltaX, deltaY));
+      if (shouldPrevent) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    }
+
+    if (typeof window.onwheel !== "undefined") {
+      $(element).bind(i.eventClass('wheel'), mousewheelHandler);
+    } else if (typeof window.onmousewheel !== "undefined") {
+      $(element).bind(i.eventClass('mousewheel'), mousewheelHandler);
+    }
+  }
+
+  function bindKeyboardHandler() {
+    var hovered = false;
+    $(element).bind(i.eventClass('mouseenter'), function (e) {
+      hovered = true;
+    });
+    $(element).bind(i.eventClass('mouseleave'), function (e) {
+      hovered = false;
+    });
+
+    var shouldPrevent = false;
+    $(i.ownerDocument).bind(i.eventClass('keydown'), function (e) {
+      if (e.isDefaultPrevented && e.isDefaultPrevented()) {
+        return;
+      }
+
+      if (!hovered) {
+        return;
+      }
+
+      var activeElement = document.activeElement ? document.activeElement : i.ownerDocument.activeElement;
+      // go deeper if element is a webcomponent
+      while (activeElement.shadowRoot) {
+        activeElement = activeElement.shadowRoot.activeElement;
+      }
+      if (h.isEditable(activeElement)) {
+        return;
+      }
+
+      var deltaX = 0;
+      var deltaY = 0;
+
+      switch (e.which) {
+      case 37: // left
+        deltaX = -30;
+        break;
+      case 38: // up
+        deltaY = 30;
+        break;
+      case 39: // right
+        deltaX = 30;
+        break;
+      case 40: // down
+        deltaY = -30;
+        break;
+      case 33: // page up
+        deltaY = 90;
+        break;
+      case 32: // space bar
+      case 34: // page down
+        deltaY = -90;
+        break;
+      case 35: // end
+        if (e.ctrlKey) {
+          deltaY = -i.contentHeight;
+        } else {
+          deltaY = -i.containerHeight;
+        }
+        break;
+      case 36: // home
+        if (e.ctrlKey) {
+          deltaY = element.scrollTop;
+        } else {
+          deltaY = i.containerHeight;
+        }
+        break;
+      default:
+        return;
+      }
+
+      element.scrollTop = element.scrollTop - deltaY;
+      element.scrollLeft = element.scrollLeft + deltaX;
+
+      shouldPrevent = shouldPreventWheel(deltaX, deltaY);
+      if (shouldPrevent) {
+        e.preventDefault();
+      }
+    });
+  }
+
+  function bindRailClickHandler() {
+    function stopPropagation(e) { e.stopPropagation(); }
+
+    $(i.scrollbarY).bind(i.eventClass('click'), stopPropagation);
+    $(i.scrollbarYRail).bind(i.eventClass('click'), function (e) {
+      var halfOfScrollbarLength = h.toInt(i.scrollbarYHeight / 2);
+      var positionTop = e.pageY - i.scrollbarYRail.offsetTop - halfOfScrollbarLength;
+      var maxPositionTop = i.containerHeight - i.scrollbarYHeight;
+      var positionRatio = positionTop / maxPositionTop;
+
+      if (positionRatio < 0) {
+        positionRatio = 0;
+      } else if (positionRatio > 1) {
+        positionRatio = 1;
+      }
+
+      element.scrollTop = (i.contentHeight - i.containerHeight) * positionRatio;
+    });
+
+    $(i.scrollbarX).bind(i.eventClass('click'), stopPropagation);
+    $(i.scrollbarXRail).bind(i.eventClass('click'), function (e) {
+      var halfOfScrollbarLength = h.toInt(i.scrollbarXWidth / 2);
+      var positionLeft = e.pageX - i.scrollbarXRail.offsetLeft - halfOfScrollbarLength;
+      var maxPositionLeft = i.containerWidth - i.scrollbarXWidth;
+      var positionRatio = positionLeft / maxPositionLeft;
+
+      if (positionRatio < 0) {
+        positionRatio = 0;
+      } else if (positionRatio > 1) {
+        positionRatio = 1;
+      }
+
+      element.scrollLeft = (i.contentWidth - i.containerWidth) * positionRatio;
+    });
+  }
+
+  function bindSelectionHandler() {
+    function getRangeNode() {
+      var selection = window.getSelection ? window.getSelection() :
+                      document.getSlection ? document.getSlection() : {rangeCount: 0};
+      if (selection.rangeCount === 0) {
+        return null;
+      } else {
+        return selection.getRangeAt(0).commonAncestorContainer;
+      }
+    }
+
+    var scrollingLoop = null;
+    var scrollDiff = {top: 0, left: 0};
+    function startScrolling() {
+      if (!scrollingLoop) {
+        scrollingLoop = setInterval(function () {
+          if (!instances.get(element)) {
+            clearInterval(scrollingLoop);
+            return;
+          }
+
+          element.scrollTop = element.scrollTop + scrollDiff.top;
+          element.scrollLeft = element.scrollLeft + scrollDiff.left;
+          updateGeometry(element);
+        }, 50); // every .1 sec
+      }
+    }
+    function stopScrolling() {
+      if (scrollingLoop) {
+        clearInterval(scrollingLoop);
+        scrollingLoop = null;
+      }
+      cls.remove(element, 'ps-in-scrolling');
+      cls.remove(element, 'ps-in-scrolling');
+    }
+
+    var isSelected = false;
+    $(i.ownerDocument).bind(i.eventClass('selectionchange'), function (e) {
+      if ($.contains(element, getRangeNode())) {
+        isSelected = true;
+      } else {
+        isSelected = false;
+        stopScrolling();
+      }
+    });
+    $(window).bind(i.eventClass('mouseup'), function (e) {
+      if (isSelected) {
+        isSelected = false;
+        stopScrolling();
+      }
+    });
+
+    $(window).bind(i.eventClass('mousemove'), function (e) {
+      if (isSelected) {
+        var mousePosition = {x: e.pageX, y: e.pageY};
+        var containerGeometry = {
+          left: element.offsetLeft,
+          right: element.offsetLeft + element.offsetWidth,
+          top: element.offsetTop,
+          bottom: element.offsetTop + element.offsetHeight
+        };
+
+        if (mousePosition.x < containerGeometry.left + 3) {
+          scrollDiff.left = -5;
+          cls.add(element, 'ps-in-scrolling');
+        } else if (mousePosition.x > containerGeometry.right - 3) {
+          scrollDiff.left = 5;
+          cls.add(element, 'ps-in-scrolling');
+        } else {
+          scrollDiff.left = 0;
+        }
+
+        if (mousePosition.y < containerGeometry.top + 3) {
+          if (containerGeometry.top + 3 - mousePosition.y < 5) {
+            scrollDiff.top = -5;
+          } else {
+            scrollDiff.top = -20;
+          }
+          cls.add(element, 'ps-in-scrolling');
+        } else if (mousePosition.y > containerGeometry.bottom - 3) {
+          if (mousePosition.y - containerGeometry.bottom + 3 < 5) {
+            scrollDiff.top = 5;
+          } else {
+            scrollDiff.top = 20;
+          }
+          cls.add(element, 'ps-in-scrolling');
+        } else {
+          scrollDiff.top = 0;
+        }
+
+        if (scrollDiff.top === 0 && scrollDiff.left === 0) {
+          stopScrolling();
+        } else {
+          startScrolling();
+        }
+      }
+    });
+  }
+
+  function bindTouchHandler(supportsTouch, supportsIePointer) {
+    function applyTouchMove(differenceX, differenceY) {
+      element.scrollTop = element.scrollTop - differenceY;
+      element.scrollLeft = element.scrollLeft() - differenceX;
+
+      updateGeometry(element);
+    }
+
+    var startOffset = {};
+    var startTime = 0;
+    var speed = {};
+    var easingLoop = null;
+    var inGlobalTouch = false;
+    var inLocalTouch = false;
+
+    function globalTouchStart(e) {
+      inGlobalTouch = true;
+    }
+    function globalTouchEnd(e) {
+      inGlobalTouch = false;
+    }
+
+    function getTouch(e) {
+      if (e.originalEvent.targetTouches) {
+        return e.originalEvent.targetTouches[0];
+      } else {
+        // Maybe IE pointer
+        return e.originalEvent;
+      }
+    }
+    function shouldHandle(e) {
+      var event = e.originalEvent;
+      if (event.targetTouches && event.targetTouches.length === 1) {
+        return true;
+      }
+      if (event.pointerType && event.pointerType !== 'mouse' && event.pointerType !== event.MSPOINTER_TYPE_MOUSE) {
+        return true;
+      }
+      return false;
+    }
+    function touchStart(e) {
+      if (shouldHandle(e)) {
+        inLocalTouch = true;
+
+        var touch = getTouch(e);
+
+        startOffset.pageX = touch.pageX;
+        startOffset.pageY = touch.pageY;
+
+        startTime = (new Date()).getTime();
+
+        if (easingLoop !== null) {
+          clearInterval(easingLoop);
+        }
+
+        e.stopPropagation();
+      }
+    }
+    function touchMove(e) {
+      if (!inGlobalTouch && inLocalTouch && shouldHandle(e)) {
+        var touch = getTouch(e);
+
+        var currentOffset = {pageX: touch.pageX, pageY: touch.pageY};
+
+        var differenceX = currentOffset.pageX - startOffset.pageX;
+        var differenceY = currentOffset.pageY - startOffset.pageY;
+
+        applyTouchMove(differenceX, differenceY);
+        startOffset = currentOffset;
+
+        var currentTime = (new Date()).getTime();
+
+        var timeGap = currentTime - startTime;
+        if (timeGap > 0) {
+          speed.x = differenceX / timeGap;
+          speed.y = differenceY / timeGap;
+          startTime = currentTime;
+        }
+
+        if (shouldPreventSwipe(differenceX, differenceY)) {
+          e.stopPropagation();
+          e.preventDefault();
+        }
+      }
+    }
+    function touchEnd(e) {
+      if (!inGlobalTouch && inLocalTouch) {
+        inLocalTouch = false;
+
+        clearInterval(easingLoop);
+        easingLoop = setInterval(function () {
+          if (!instances.get(element)) {
+            clearInterval(easingLoop);
+            return;
+          }
+
+          if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) {
+            clearInterval(easingLoop);
+            return;
+          }
+
+          applyTouchMove(speed.x * 30, speed.y * 30);
+
+          speed.x *= 0.8;
+          speed.y *= 0.8;
+        }, 10);
+      }
+    }
+
+    if (supportsTouch) {
+      $(window).bind(i.eventClass("touchstart"), globalTouchStart);
+      $(window).bind(i.eventClass("touchend"), globalTouchEnd);
+      $(element).bind(i.eventClass("touchstart"), touchStart);
+      $(element).bind(i.eventClass("touchmove"), touchMove);
+      $(element).bind(i.eventClass("touchend"), touchEnd);
+    }
+
+    if (supportsIePointer) {
+      if (window.PointerEvent) {
+        $(window).bind(i.eventClass("pointerdown"), globalTouchStart);
+        $(window).bind(i.eventClass("pointerup"), globalTouchEnd);
+        $(element).bind(i.eventClass("pointerdown"), touchStart);
+        $(element).bind(i.eventClass("pointermove"), touchMove);
+        $(element).bind(i.eventClass("pointerup"), touchEnd);
+      } else if (window.MSPointerEvent) {
+        $(window).bind(i.eventClass("MSPointerDown"), globalTouchStart);
+        $(window).bind(i.eventClass("MSPointerUp"), globalTouchEnd);
+        $(element).bind(i.eventClass("MSPointerDown"), touchStart);
+        $(element).bind(i.eventClass("MSPointerMove"), touchMove);
+        $(element).bind(i.eventClass("MSPointerUp"), touchEnd);
+      }
+    }
+  }
+
+  function bindScrollHandler() {
+    $(element).bind(i.eventClass('scroll'), function (e) {
+      updateGeometry(element);
+    });
+  }
+
+  function initialize() {
+    updateGeometry(element);
+    bindScrollHandler();
+    bindMouseScrollXHandler();
+    bindMouseScrollYHandler();
+    bindRailClickHandler();
+    bindSelectionHandler();
+    bindMouseWheelHandler();
+
+    if (h.env.supportsTouch || h.env.supportsIePointer) {
+      bindTouchHandler(h.env.supportsTouch, h.env.supportsIePointer);
+    }
+    if (i.settings.useKeyboard) {
+      bindKeyboardHandler();
+    }
+  }
+
+  initialize();
+};