jquery.guillotine.js

// Generated by CoffeeScript 1.7.0

/*
 * jQuery Guillotine Plugin v1.0.0
 * http://matiasgagliano.github.com/guillotine/
 *
 * Copyright 2014, Matías Gagliano.
 * Dual licensed under the MIT or GPLv3 licenses.
 * http://opensource.org/licenses/MIT
 * http://opensource.org/licenses/GPL-3.0
 *
 */

(function() {
  "use strict";
  var $, Guillotine, canTransform, defaults, events, getCursorPosition, isPointerEventCompatible, isTouch, pluginName, scope, validEvent,
    __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; },
    __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

  $ = jQuery;

  pluginName = 'guillotine';

  scope = 'guillotine';

  events = {
    start: "MSPointerDown." + scope + " touchstart." + scope + " mousedown." + scope,
    move: "MSPointerMove." + scope + " touchmove." + scope + " mousemove." + scope,
    stop: "MSPointerUp." + scope + " touchend." + scope + " mouseup." + scope
  };

  defaults = {
    width: 400,
    height: 300,
    zoomStep: 0.1,
    eventOnChange: null,
    onChange: null
  };

  isTouch = function(e) {
    return e.type.search('touch') > -1;
  };

  isPointerEventCompatible = function() {
    return __indexOf.call(window, 'MSPointerEvent') >= 0;
  };

  validEvent = function(e) {
    if (isPointerEventCompatible() || !isTouch(e)) {
      validEvent = function(e) {
        return (e.which != null) && e.which === 1;
      };
    } else {
      validEvent = function() {
        var _ref, _ref1;
        return ((_ref = e.originalEvent) != null ? (_ref1 = _ref.touches) != null ? _ref1.length : void 0 : void 0) === 1;
      };
    }
    return validEvent(e);
  };

  getCursorPosition = function(e) {
    if (isPointerEventCompatible() || !isTouch(e)) {
      getCursorPosition = function(e) {
        return {
          x: e.pageX,
          y: e.pageY
        };
      };
    } else {
      getCursorPosition = function(e) {
        e = e.originalEvent.touches[0];
        return {
          x: e.pageX,
          y: e.pageY
        };
      };
    }
    return getCursorPosition(e);
  };

  canTransform = function() {
    var hasTransform, helper, prefix, prefixes, prop, test, tests, value, _i, _len;
    hasTransform = false;
    prefixes = 'webkit,Moz,O,ms,Khtml'.split(',');
    tests = {
      transform: 'transform'
    };
    for (_i = 0, _len = prefixes.length; _i < _len; _i++) {
      prefix = prefixes[_i];
      tests[prefix + 'Transform'] = "-" + (prefix.toLowerCase()) + "-transform";
    }
    helper = document.createElement('img');
    document.body.insertBefore(helper, null);
    for (test in tests) {
      prop = tests[test];
      if (helper.style[test] === void 0) {
        continue;
      }
      helper.style[test] = 'rotate(90deg)';
      value = window.getComputedStyle(helper).getPropertyValue(prop);
      if ((value != null) && value.length && value !== 'none') {
        hasTransform = true;
        break;
      }
    }
    document.body.removeChild(helper);
    if (hasTransform) {
      canTransform = function() {
        return true;
      };
    } else {
      canTransform = function() {
        return false;
      };
    }
    return canTransform();
  };

  Guillotine = (function() {
    function Guillotine(element, options) {
      this.disable = __bind(this.disable, this);
      this.enable = __bind(this.enable, this);
      this.getData = __bind(this.getData, this);
      this.zoomOut = __bind(this.zoomOut, this);
      this.zoomIn = __bind(this.zoomIn, this);
      this.fit = __bind(this.fit, this);
      this.center = __bind(this.center, this);
      this.rotateRight = __bind(this.rotateRight, this);
      this.rotateLeft = __bind(this.rotateLeft, this);
      this._transform = __bind(this._transform, this);
      this._rotate = __bind(this._rotate, this);
      this._center = __bind(this._center, this);
      this._fit = __bind(this._fit, this);
      this._zoom = __bind(this._zoom, this);
      this._drag = __bind(this._drag, this);
      this._trigger = __bind(this._trigger, this);
      this._unbind = __bind(this._unbind, this);
      this._bind = __bind(this._bind, this);
      this._start = __bind(this._start, this);
      this._unwrap = __bind(this._unwrap, this);
      this._wrap = __bind(this._wrap, this);
      this.op = $.extend(true, {}, defaults, options, $.data(this, pluginName));
      this.zoomInFactor = 1 + this.op.zoomStep;
      this.zoomOutFactor = 1 / this.zoomInFactor;
      this.enabled = true;
      this.angle = 0;
      this.data = {
        scale: 1,
        angle: 0,
        x: 0,
        y: 0,
        w: this.op.width,
        h: this.op.height
      };
      this._wrap(element);
      if (this.el.offsetWidth < this.op.width || this.el.offsetHeight < this.op.height) {
        this._fit() && this._center();
      }
      this.$el.on(events.start, this._start);
    }

    Guillotine.prototype._wrap = function(element) {
      var canvas, el, guillotine, height, img, width, _ref, _ref1;
      el = $(element);
      if (el.prop('tagName') === 'IMG') {
        img = document.createElement('img');
        img.setAttribute('src', el.attr('src'));
        _ref = [img.width, img.height], width = _ref[0], height = _ref[1];
      } else {
        _ref1 = [el.width(), el.height()], width = _ref1[0], height = _ref1[1];
      }
      canvas = $('<div>').addClass('guillotine-canvas');
      canvas.css({
        width: width,
        height: height,
        top: 0,
        left: 0
      });
      canvas = el.wrap(canvas).parent();
      guillotine = $('<div>').addClass('guillotine-window');
      guillotine.css({
        width: this.op.width,
        height: this.op.height
      });
      guillotine = canvas.wrap(guillotine).parent();
      this.$el = el;
      this.el = el[0];
      this.$canvas = canvas;
      this.canvas = canvas[0];
      this.$gllt = guillotine;
      this.gllt = guillotine[0];
      return this.$document = $(element.ownerDocument);
    };

    Guillotine.prototype._unwrap = function() {
      this.$el.removeAttr('style');
      this.$el.insertBefore(this.gllt);
      return this.$gllt.remove();
    };

    Guillotine.prototype._start = function(e) {
      if (!(this.enabled && validEvent(e))) {
        return;
      }
      e.preventDefault();
      e.stopImmediatePropagation();
      this.p = getCursorPosition(e);
      return this._bind();
    };

    Guillotine.prototype._bind = function() {
      this.$document.on(events.move, this._drag);
      return this.$document.on(events.stop, this._unbind);
    };

    Guillotine.prototype._unbind = function(e) {
      this.$document.off(events.move, this._drag);
      this.$document.off(events.stop, this._unbind);
      if (e != null) {
        return this._trigger('drag');
      }
    };

    Guillotine.prototype._trigger = function(action) {
      if (this.op.eventOnChange != null) {
        this.$el.trigger(this.op.eventOnChange, [this.data, action]);
      }
      if (typeof this.op.onChange === 'function') {
        return this.op.onChange.call(this.el, this.data, action);
      }
    };

    Guillotine.prototype._drag = function(e) {
      var dx, dy, gap, offsetLeft, offsetTop, p;
      e.preventDefault();
      e.stopImmediatePropagation();
      p = getCursorPosition(e);
      dx = p.x - this.p.x;
      dy = p.y - this.p.y;
      this.p = p;
      if (dx !== 0) {
        offsetLeft = this.canvas.offsetLeft;
        gap = -offsetLeft;
        if (dx < 0) {
          gap = this.gllt.offsetWidth - (offsetLeft + this.canvas.offsetWidth);
        }
        if (Math.abs(dx) > Math.abs(gap)) {
          dx = gap;
        }
        offsetLeft += dx;
        this.canvas.style.left = offsetLeft + 'px';
        this.data.x = -offsetLeft;
      }
      if (dy !== 0) {
        offsetTop = this.canvas.offsetTop;
        gap = -offsetTop;
        if (dy < 0) {
          gap = this.gllt.offsetHeight - (offsetTop + this.canvas.offsetHeight);
        }
        if (Math.abs(dy) > Math.abs(gap)) {
          dy = gap;
        }
        offsetTop += dy;
        this.canvas.style.top = offsetTop + 'px';
        return this.data.y = -offsetTop;
      }
    };

    Guillotine.prototype._zoom = function(factor) {
      var height, left, newHeight, newWidth, scaledHeight, scaledWidth, top, width, _ref, _ref1, _ref2;
      if (factor <= 0 || factor === 1) {
        return;
      }
      _ref = [this.canvas.offsetWidth, this.canvas.offsetHeight], width = _ref[0], height = _ref[1];
      _ref1 = [width * factor, height * factor], scaledWidth = _ref1[0], scaledHeight = _ref1[1];
      if (scaledWidth > this.op.width && scaledHeight > this.op.height) {
        this.canvas.style.width = scaledWidth + 'px';
        this.canvas.style.height = scaledHeight + 'px';
        this.data.scale *= factor;
      } else {
        this._fit();
      }
      _ref2 = [this.canvas.offsetWidth, this.canvas.offsetHeight], newWidth = _ref2[0], newHeight = _ref2[1];
      top = this.canvas.offsetTop + (height - newHeight) / 2;
      if (top + newHeight < this.op.height) {
        top = this.canvas.offsetTop + (height - newHeight);
      }
      if (top > 0) {
        top = 0;
      }
      left = this.canvas.offsetLeft + (width - newWidth) / 2;
      if (left + newWidth < this.op.width) {
        left = this.canvas.offsetLeft + (width - newWidth);
      }
      if (left > 0) {
        left = 0;
      }
      this.canvas.style.top = top + 'px';
      this.canvas.style.left = left + 'px';
      this.data.x = -left;
      this.data.y = -top;
      return this._transform();
    };

    Guillotine.prototype._fit = function() {
      var h, height, ratio, w, width, _ref;
      _ref = [this.canvas.offsetWidth, this.canvas.offsetHeight], w = _ref[0], h = _ref[1];
      ratio = h / w;
      if (ratio > this.op.height / this.op.width) {
        width = this.op.width;
        height = this.op.width * ratio;
      } else {
        width = this.op.height / ratio;
        height = this.op.height;
      }
      this.canvas.style.width = width + 'px';
      this.canvas.style.height = height + 'px';
      this._transform();
      return this.data.scale *= width / w;
    };

    Guillotine.prototype._center = function() {
      var left, top;
      top = -(this.canvas.offsetHeight - this.op.height) / 2;
      left = -(this.canvas.offsetWidth - this.op.width) / 2;
      this.canvas.style.top = top + 'px';
      this.canvas.style.left = left + 'px';
      this.data.x = -left;
      return this.data.y = -top;
    };

    Guillotine.prototype._rotate = function(angle) {
      var h, ratio, w, width, _ref;
      if (!(canTransform() && angle % 90 === 0)) {
        return;
      }
      this.angle = (this.angle + angle) % 360;
      if (this.angle < 0) {
        this.angle = 360 + this.angle;
      }
      width = this.canvas.style.width;
      this.canvas.style.width = this.canvas.style.height;
      this.canvas.style.height = width;
      _ref = [this.canvas.offsetWidth, this.canvas.offsetHeight], w = _ref[0], h = _ref[1];
      ratio = this.angle % 180 === 0 ? 1 : h / w;
      this.el.style.width = ratio * 100 + '%';
      this.el.style.height = 100 / ratio + '%';
      this._transform();
      if (h < this.op.height || w < this.op.width) {
        this._fit();
      }
      this._center();
      return this.data.angle = this.angle;
    };

    Guillotine.prototype._transform = function() {
      var x, y, _ref;
      x = (0 < (_ref = this.angle) && _ref < 270) ? this.canvas.offsetWidth : 0;
      y = this.angle > 90 ? this.canvas.offsetHeight : 0;
      return this.$el.css({
        'transform-origin': '0px 0px',
        'transform': "translate(" + x + "px, " + y + "px) rotate(" + this.angle + "deg)"
      });
    };

    Guillotine.prototype.rotateLeft = function() {
      return this.enabled && (this._rotate(-90), this._trigger('rotateLeft'));
    };

    Guillotine.prototype.rotateRight = function() {
      return this.enabled && (this._rotate(90), this._trigger('rotateRight'));
    };

    Guillotine.prototype.center = function() {
      return this.enabled && (this._center(), this._trigger('center'));
    };

    Guillotine.prototype.fit = function() {
      return this.enabled && (this._fit(), this._center(), this._trigger('fit'));
    };

    Guillotine.prototype.zoomIn = function() {
      return this.enabled && (this._zoom(this.zoomInFactor), this._trigger('zoomIn'));
    };

    Guillotine.prototype.zoomOut = function() {
      return this.enabled && (this._zoom(this.zoomOutFactor), this._trigger('zoomOut'));
    };

    Guillotine.prototype.getData = function() {
      return this.data;
    };

    Guillotine.prototype.enable = function() {
      return this.enabled = true;
    };

    Guillotine.prototype.disable = function() {
      return this.enabled = false;
    };

    return Guillotine;

  })();

  $.fn[pluginName] = function(options) {
    var method, _ref;
    if (typeof options !== 'string') {
      return this.each(function() {
        var guillotine;
        if (!$.data(this, pluginName + 'Instance')) {
          guillotine = new Guillotine(this, options);
          return $.data(this, pluginName + 'Instance', guillotine);
        }
      });
    } else {
      switch (method = options) {
        case 'instance':
          return $.data(this[0], pluginName + 'Instance');
        case 'remove':
          return this.each(function() {
            var guillotine;
            guillotine = $.data(this, pluginName + 'Instance');
            if (guillotine == null) {
              return;
            }
            guillotine._unbind();
            guillotine._unwrap();
            guillotine.disable();
            guillotine.$el.off(events.start, guillotine._start);
            return guillotine.$el.removeData(pluginName + 'Instance');
          });
        case 'getData':
          return (_ref = $.data(this[0], pluginName + 'Instance')) != null ? _ref['getData'].call() : void 0;
        case 'rotateLeft':
        case 'rotateRight':
        case 'center':
        case 'fit':
        case 'zoomIn':
        case 'zoomOut':
        case 'enable':
        case 'disable':
          return this.each(function() {
            var guillotine;
            guillotine = $.data(this, pluginName + 'Instance');
            if (guillotine == null) {
              return;
            }
            return guillotine[method].call();
          });
      }
    }
  };

}).call(this);