cf-platform/Public/Mobile/js/slip.js

// Generated by CoffeeScript 1.7.1
(function(WIN, DOC) {
  var CSS_PREFIX_MAP, DOWN, END_EVENT, IsTouch, LEFT, MAX_OPP_ALLOW_DISTANCE, MIN_ALLOW_DISTANCE, MOVE_EVENT, NULL, NUMBER_REG, RIGHT, START_EVENT, Slip, UNDEFINED, UP, WINDOW_HEIGHT, WINDOW_WIDTH, X, XY, Y, entry, getTranslate, noop, setTransition, setTranslate;
  UNDEFINED = void 0;
  NULL = null;
  X = "x";
  Y = "y";
  XY = "xy";
  LEFT = "left";
  RIGHT = "right";
  UP = "up";
  DOWN = "down";
  MIN_ALLOW_DISTANCE = 10;
  MAX_OPP_ALLOW_DISTANCE = 40;
  CSS_PREFIX_MAP = ["webkit", "moz", "ms", "o", ""];
  NUMBER_REG = /\-?[0-9]+\.?[0-9]*/g;
  IsTouch = 'ontouchend' in WIN;
  START_EVENT = IsTouch ? 'touchstart' : 'mousedown';
  MOVE_EVENT = IsTouch ? 'touchmove' : 'mousemove';
  END_EVENT = IsTouch ? 'touchend' : 'mouseup';
  WINDOW_HEIGHT = WIN['innerHeight'];
  WINDOW_WIDTH = WIN['innerWidth'];
  noop = function() {};
  setTransition = function(ele, css) {
    var name, prefix, _i, _len, _results;
    _results = [];
    for (_i = 0, _len = CSS_PREFIX_MAP.length; _i < _len; _i++) {
      prefix = CSS_PREFIX_MAP[_i];
      name = prefix ? "" + prefix + "Transition" : "transition";
      _results.push(ele.style[name] = css);
    }
    return _results;
  };
  setTranslate = function(ele, x, y, z) {
    var name, prefix, _i, _len, _results;
    _results = [];
    for (_i = 0, _len = CSS_PREFIX_MAP.length; _i < _len; _i++) {
      prefix = CSS_PREFIX_MAP[_i];
      name = prefix ? "" + prefix + "Transform" : "transform";
      _results.push(ele.style[name] = "translate3d(" + (x || 0) + "px, " + (y || 0) + "px, " + (z || 0) + "px)");
    }
    return _results;
  };
  getTranslate = function(ele) {
    var coord, css, name, prefix, translate, _i, _len;
    translate = [];
    css = '';
    coord = '';
    for (_i = 0, _len = CSS_PREFIX_MAP.length; _i < _len; _i++) {
      prefix = CSS_PREFIX_MAP[_i];
      name = prefix ? "" + prefix + "Transform" : "transform";
      css = ele.style[name];
      if (css && typeof css === 'string') {
        coord = css.match(/\((.*)\)/g)[0];
        translate = coord && coord.match(NUMBER_REG);
        break;
      }
    }
    if (translate.length) {
      return {
        x: translate[0] || 0,
        y: translate[1] || 0,
        z: translate[2] || 0
      };
    }
  };
  Slip = (function() {
    var getCoordinates, getCoordinatesArray;

    getCoordinatesArray = [
      function(event) {
        var e, touches;
        touches = event.touches && (event.touches.length ? event.touches : [event]);
        e = (event.changedTouches && event.changedTouches[0]) || (event.originalEvent && event.originalEvent.changedTouches && event.originalEvent.changedTouches[0]) || touches[0].originalEvent || touches[0];
        return {
          "x": e.clientX,
          "y": e.clientY
        };
      }, function(event) {
        var e;
        e = event;
        return {
          "x": e.clientX,
          "y": e.clientY
        };
      }
    ];

    getCoordinates = IsTouch ? getCoordinatesArray[0] : getCoordinatesArray[1];

    function Slip(ele, direction) {
      this.ele = ele;
      this.direction = direction;
      this._isPressed = false;
      this.onStart = this.onMove = this.onEnd = noop;
      this.coord = this.eventCoords = this.cacheCoords = this.finger = this.absFinger = NULL;
      this.orient = [];
      this.isSlider = false;
      this.isWebapp = false;
      this.duration = "400";
    }

    Slip.prototype.start = function(fn) {
      return (this.onStart = fn) && this;
    };

    Slip.prototype.move = function(fn) {
      return (this.onMove = fn) && this;
    };

    Slip.prototype.end = function(fn) {
      return (this.onEnd = fn) && this;
    };

    Slip.prototype.setCoord = function(userCoords) {
      var attr, coords, ele;
      coords = this.coord = {
        "x": userCoords[X] || 0,
        "y": userCoords[Y] || 0
      };
      ele = this.ele;
      setTranslate(ele, coords[X], coords[Y]);
      for (attr in coords) {
        ele.setAttribute(attr, coords[attr]);
      }
      return this;
    };

    Slip.prototype.onTouchStart = function(event) {
      var ret;
      this._isPressed = true;
      this.eventCoords = getCoordinates(event);
      this.cacheCoords = this.coord;
      this.finger = this.absFinger = NULL;
      if (this.isSlider) {
        this.onSliderStart(event);
      }
      return ret = this.onStart.apply(this, [event]);
    };

    Slip.prototype.onTouchMove = function(event) {
      var absFinger, attr, direction, ele, eleMove, finger, moveCoords, oppDirection, orient, ret, _results;
      event.preventDefault();
      if (!this._isPressed) {
        return false;
      }
      moveCoords = getCoordinates(event);
      direction = this.direction;
      finger = this.finger = {
        x: moveCoords.x - this.eventCoords.x,
        y: moveCoords.y - this.eventCoords.y
      };
      absFinger = this.absFinger = {
        x: Math.abs(finger.x),
        y: Math.abs(finger.y)
      };
      if (direction !== XY) {
        oppDirection = direction === X ? Y : X;
        if (absFinger[direction] < MIN_ALLOW_DISTANCE || absFinger[oppDirection] > MAX_OPP_ALLOW_DISTANCE) {
          return false;
        }
      }
      orient = [];
      if (absFinger.x > MIN_ALLOW_DISTANCE) {
        orient.push(finger.x < 0 ? LEFT : RIGHT);
      }
      if (absFinger.y > MIN_ALLOW_DISTANCE) {
        orient.push(finger.y < 0 ? UP : DOWN);
      }
      this.orient = orient;
      ret = this.onMove.apply(this, [event]);
      if (ret === false) {
        return false;
      }
      ele = this.ele;
      eleMove = this.coord = {
        "x": direction.indexOf(X) < 0 ? this.cacheCoords[X] : this.cacheCoords[X] - 0 + finger.x,
        "y": direction.indexOf(Y) < 0 ? this.cacheCoords[Y] : this.cacheCoords[Y] - 0 + finger.y
      };
      setTranslate(ele, eleMove[X], eleMove[Y]);
      _results = [];
      for (attr in eleMove) {
        _results.push(ele.setAttribute(attr, eleMove[attr]));
      }
      return _results;
    };

    Slip.prototype.onTouchEnd = function(event) {
      var ele, trans;
      this._isPressed = false;
      ele = this.ele;
      if (this.isSlider) {
        this.onSliderEnd(event);
      }
      trans = getTranslate(this.ele);
      if (trans) {
        this.setCoord(trans);
      }
      return this.orient = [];
    };

    Slip.prototype.onSliderStart = function(event) {
      return setTransition(this.ele, NULL);
    };

    Slip.prototype.onSliderEnd = function(event, data) {
      var absFinger, duration, ele, isDown, isJump, isLeft, isOut, isRight, isUp, isVerticalWebapp, jumpPage, orient, page, pageNum, ret, trans;
      if (data == null) {
        data = {};
      }
      jumpPage = data.jumpPage;
      isJump = jumpPage;
      orient = this.orient.join("");
      trans = 0;
      isOut = false;
      page = this.page;
      pageNum = this.pageNum;
      ele = this.ele;
      duration = this.duration;
      absFinger = this.absFinger;
      isUp = orient.indexOf(UP) > -1;
      isDown = orient.indexOf(DOWN) > -1;
      isLeft = orient.indexOf(LEFT) > -1;
      isRight = orient.indexOf(RIGHT) > -1;
      isVerticalWebapp = this.direction === Y;
      if (jumpPage !== UNDEFINED) {
        page = jumpPage;
      } else {
        if (isVerticalWebapp) {
          if (isUp) {
            page++;
          }
          if (isDown) {
            page--;
          }
        } else {
          if (isLeft) {
            page++;
          }
          if (isRight) {
            page--;
          }
        }
      }
      if (page >= pageNum) {
        page = pageNum - 1;
        isOut = true;
      }
      if (page < 0) {
        page = 0;
        isOut = true;
      }
      if (isOut === true && !isJump) {
        duration *= isVerticalWebapp ? absFinger[Y] / this.pageHeight : absFinger[X] / this.pageWidth;
      }
      setTransition(ele, "all " + duration + "ms ease-in");
      if (isVerticalWebapp) {
        trans = "-" + (page * this.pageHeight);
        setTranslate(ele, 0, trans, 0);
      } else {
        trans = "-" + (page * this.pageWidth);
        setTranslate(ele, trans, 0, 0);
      }
      this.page = page;
      if (isJump) {
        this.onTouchEnd.call(this, NULL);
      }
      ret = this.onEnd.apply(this, [event]);
      return this;
    };

    Slip.prototype.init = function() {
      var attr, direction, ele, initMove, onTouchEnd, onTouchMove, onTouchStart;
      this.coord = {
        "x": 0,
        "y": 0
      };
      onTouchStart = this._onTouchStart = (function(_this) {
        return function(event) {
          return _this.onTouchStart(event);
        };
      })(this);
      onTouchMove = this._onTouchMove = (function(_this) {
        return function(event) {
          return _this.onTouchMove(event);
        };
      })(this);
      onTouchEnd = this._onTouchEnd = (function(_this) {
        return function(event) {
          return _this.onTouchEnd(event);
        };
      })(this);
      ele = this.ele;
      ele.addEventListener(START_EVENT, onTouchStart, false);
      ele.addEventListener(MOVE_EVENT, onTouchMove, false);
      ele.addEventListener(END_EVENT, onTouchEnd, false);
      initMove = this.coord = {
        "x": 0,
        "y": 0
      };
      direction = this.direction;
      setTranslate(ele, initMove[X], initMove[Y]);
      for (attr in initMove) {
        ele.setAttribute(attr, initMove[attr]);
      }
      return this;
    };

    Slip.prototype.destroy = function() {
      var ele;
      ele = this.ele;
      ele.removeEventListener(START_EVENT, this._onTouchStart, false);
      ele.removeEventListener(MOVE_EVENT, this._onTouchMove, false);
      ele.removeEventListener(END_EVENT, this._onTouchEnd, false);
      return this;
    };

    Slip.prototype.slider = function(elPages) {
      var elChild, elChilds, elPage, elPagesLen, ele, pageNum, _i, _j, _len, _len1;
      ele = this.ele;
      if (typeof elPages === "string") {
        elPages = ele.querySelectorAll(elPages);
      } else if (!elPages) {
        elPages = [];
        elChilds = ele.childNodes;
        for (_i = 0, _len = elChilds.length; _i < _len; _i++) {
          elChild = elChilds[_i];
          if (elChild.nodeType === 1) {
            elPages.push(elChild);
          }
        }
      }
      this.isSlider = true;
      this.page = 0;
      this.elPages = elPages;
      elPagesLen = elPages.length;
      pageNum = this.pageNum = elPagesLen ? elPagesLen : 0;
      if (this.direction === X) {
        for (_j = 0, _len1 = elPages.length; _j < _len1; _j++) {
          elPage = elPages[_j];
          elPage.style.cssFloat = LEFT;
        }
      }
      return this;
    };

    Slip.prototype.webapp = function(elPages) {
      var ele, pageNum;
      this.isWebapp = true;
      this.slider(elPages).fullscreen();
      elPages = this.elPages;
      ele = this.ele;
      pageNum = this.pageNum;
      ele.style.height = "" + (WINDOW_HEIGHT * pageNum) + "px";
      this.height(WINDOW_HEIGHT);
      if (this.direction === X) {
        this.width(WINDOW_WIDTH);
      }
      return this;
    };

    Slip.prototype.height = function(num) {
      var elPage, elPages, ele, pageNum, _i, _len;
      ele = this.ele;
      elPages = this.elPages;
      pageNum = this.pageNum;
      num = String(num).replace("px", "");
      if (num === "100%") {
        num = WINDOW_HEIGHT;
      }
      this.pageHeight = num;
      if (this.direction === X) {
        ele.style.height = "" + num + "px";
      }
      for (_i = 0, _len = elPages.length; _i < _len; _i++) {
        elPage = elPages[_i];
        elPage.style.height = "" + num + "px";
      }
      return this;
    };

    Slip.prototype.width = function(num) {
      var elPage, elPages, ele, pageNum, _i, _len;
      ele = this.ele;
      elPages = this.elPages;
      pageNum = this.pageNum;
      num = String(num).replace("px", "");
      if (num === "100%") {
        num = WINDOW_WIDTH;
      }
      this.pageWidth = num;
      if (this.direction === X) {
        ele.style.width = "" + (num * pageNum) + "px";
      }
      for (_i = 0, _len = elPages.length; _i < _len; _i++) {
        elPage = elPages[_i];
        elPage.style.width = "" + num + "px";
      }
      return this;
    };

    Slip.prototype.fullscreen = function() {
      var child, ele, parent;
      ele = this.ele;
      child = ele;
      while (parent = child.parentNode) {
        if (parent.nodeType === 1) {
          parent.style.height = "100%";
          parent.style.overflow = "hidden";
        }
        child = parent;
      }
      return this;
    };

    Slip.prototype.time = function(duration) {
      this.duration = String(duration).replace("ms", "");
      return this;
    };

    Slip.prototype.jump = function(page) {
      this.onSliderEnd(NULL, {
        jumpPage: page
      });
      return this;
    };

    return Slip;

  })();
  entry = function(ele, direction) {
    var instance;
    instance = new Slip(ele, direction || X);
    return instance.init();
  };
  if (typeof define === "function") {
    return define("binnng/slip.js", function(require, exports, module) {
      return entry;
    });
  } else {
    return WIN["Slip"] = entry;
  }
})(window, document);