Resizable

JAVASCRIPT

http://storehouse.sakura.ne.jp/resizable/resizable.htm
これ見て「すごいなー」と思ったので、prototype.jsで実装してみた。
Operaだとイマイチな動作。

<html>
  <head>
    <script src="prototype.js" type="text/javascript"></script>
    <script type="text/javascript">
var Resizable = Class.create();
Resizable.prototype = {
  initialize: function(element, options) {
    this.options = Object.extend({ margin:16 }, options || {});
    this.element = $(element);
    this.observe();
  },

  observe: function() {
    var resize = null;

    this.element.observe('mousemove', function(e) {
      if (resize) { return true; }
      var edge = this.edge(e);
      var style_cursor = edge ? (edge + '-resize') : 'auto';
      this.element.setStyle({ cursor:style_cursor });
      return true;
    }.bindAsEventListener(this));

    Element.observe(document, 'mousemove', function(e) {
      if (!resize) { return true; }
      e.stop();
      resize(e);
      return false;
    }.bindAsEventListener(this));

    Element.observe(document, 'mouseup', function(e) {
      if (!resize) { return true; }
      e.stop();
      resize = null;
      Element.setStyle(document.documentElement || document.body || this.element, { cursor:'auto' });
      return false;
    }.bindAsEventListener(this));

    this.element.observe('mousedown', function(e) {
      var edge = this.edge(e);
      if (!edge) { return true; }
      e.stop();
      Element.setStyle(document.documentElement || document.body || this.element, { cursor:(edge + '-resize') });
      resize = this.make_resize(e.pointer(), this.element.getDimensions(), edge);
      return false;
    }.bindAsEventListener(this));
  },

  make_resize: function(origin_pnt, origin_dim, edge) {
    return (function(e) {
      var pnt = e.pointer();
      var style = {};

      if (edge.indexOf('s') >= 0) {
        style.height = origin_dim.height + pnt.y - origin_pnt.y;
      }

      if (edge.indexOf('e') >= 0) {
        style.width = origin_dim.width + pnt.x - origin_pnt.x;
      }

      this.element.setStyle(style);
    }.bind(this));
  },

  edge: function(e) {
    var pos = this.element.positionedOffset();
    var dim = this.element.getDimensions();
    var pnt = e.pointer();
    var south = ((pos.top + dim.height - pnt.y) < this.options.margin) ? 's' : '';
    var east = ((pos.left + dim.width - pnt.x) < this.options.margin) ? 'e' : '';
    return (south + east);
  }
};
    </script>
  </head>
  <body>
    <div id="foo" style="width:100px; height:100px; border:1px solid black;"></div>
    <textarea id="bar"></textarea>
    <script type="text/javascript">
      new Resizable('foo');
      new Resizable('bar');
    </script>
  </body>
</html>

ぜんぜん関係ないけど、「$('foo').setStyle(...)」の書き方ってあんまり普及していないのかなぁ？