index.js

// Generated by CoffeeScript 1.3.3
(function() {
  var Emitter, ResizableElement, classes, handleDirs,
    __slice = [].slice,
    __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; };

  Emitter = require("emitter");

  classes = require("classes");

  handleDirs = {
    n: {
      cursor: "n",
      n: true
    },
    s: {
      cursor: "s",
      s: true
    },
    e: {
      cursor: "e",
      e: true
    },
    w: {
      cursor: "w",
      w: true
    },
    ne: {
      cursor: "ne",
      n: true,
      e: true
    },
    se: {
      cursor: "se",
      s: true,
      e: true
    },
    sw: {
      cursor: "sw",
      s: true,
      w: true
    },
    nw: {
      cursor: "nw",
      n: true,
      w: true
    }
  };

  ResizableElement = function(element) {
    var details, handleDir, self, startH, startW, startX, startY, _fn;
    this.element = element;
    this._handles = {};
    self = this;
    startX = 0;
    startY = 0;
    startW = 0;
    startH = 0;
    _fn = function(handleDir, details) {
      self._handles[handleDir] = document.createElement("div");
      classes(self._handles[handleDir]).add("resize-handle").add("resize-handle-" + handleDir);
      element.appendChild(self._handles[handleDir]);
      return self._handles[handleDir].addEventListener("mousedown", function(e) {
        var resizeMove, resizeStop, style;
        e.stopPropagation();
        startX = e.pageX;
        startY = e.pageY;
        style = window.getComputedStyle(element);
        startW = parseInt(style.width);
        startH = parseInt(style.height);
        self.emit("resizestart", {
          element: element,
          handleDir: handleDir
        });
        document.addEventListener("mousemove", resizeMove = function(e) {
          if (details.n) {
            element.style.top = e.pageY + "px";
            element.style.height = (startH + (startY - e.pageY)) + "px";
          }
          if (details.e) {
            element.style.width = (startW + (e.pageX - startX)) + "px";
          }
          if (details.s) {
            element.style.height = (startH + (e.pageY - startY)) + "px";
          }
          if (details.w) {
            element.style.left = e.pageX + "px";
            element.style.width = (startW + (startX - e.pageX)) + "px";
          }
          return self.emit("resize", {
            element: element,
            handleDir: handleDir
          });
        });
        return document.addEventListener("mouseup", resizeStop = function(e) {
          document.removeEventListener("mousemove", resizeMove);
          document.removeEventListener("mouseup", resizeStop);
          return self.emit("resizestop", {
            element: element,
            handleDir: handleDir
          });
        });
      });
    };
    for (handleDir in handleDirs) {
      details = handleDirs[handleDir];
      _fn(handleDir, details);
    }
    return self;
  };

  ResizableElement.prototype.handles = function() {
    var dir, dirs, el, _ref;
    dirs = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
    _ref = this._handles;
    for (dir in _ref) {
      el = _ref[dir];
      if (__indexOf.call(dirs, dir) >= 0) {
        classes(el).remove("resize-handle-hidden");
      } else {
        classes(el).add("resize-handle-hidden");
      }
    }
    return this;
  };

  Emitter(ResizableElement.prototype);

  module.exports = function(element) {
    return new ResizableElement(element);
  };

}).call(this);