este-library-oldschool/este/ui/resizer/handles.js

Library for github.com/steida/este.git

// Generated by github.com/steida/coffee2closure 900.1.18
/**
  @fileoverview este.ui.resizer.Handles'
 */
var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.superClass_ = parent.prototype; return child; },
  hasProp = {}.hasOwnProperty;
goog.provide('este.ui.resizer.Handles');
goog.provide('este.ui.resizer.Handles.create');
goog.require('este.ui.Component');
goog.require('goog.fx.Dragger');
goog.require('goog.math.Coordinate');
goog.require('este.ui.InvisibleOverlay.create');

/**
  @param {Function} draggerFactory
  @param {Function} invisibleOverlayFactory
  @constructor
  @extends {este.ui.Component}
 */
este.ui.resizer.Handles = function(draggerFactory1, invisibleOverlayFactory) {
  this.draggerFactory = draggerFactory1;
  this.invisibleOverlayFactory = invisibleOverlayFactory;
  este.ui.resizer.Handles.superClass_.constructor.call(this);
}
extend(este.ui.resizer.Handles, superClass);

/**
  @return {este.ui.resizer.Handles}
 */
este.ui.resizer.Handles.create = function() {
  var draggerFactory;
  draggerFactory = function() {
    var dragger;
    dragger = new goog.fx.Dragger(document.createElement('div'));
    return dragger;
  };
  return new este.ui.resizer.Handles(draggerFactory, este.ui.InvisibleOverlay.create);
};

/**
  @enum {string}
 */
este.ui.resizer.Handles.EventType = {
  MOUSEOUT: 'mouseout',
  START: 'start',
  DRAG: 'drag',
  END: 'end'
};

/**
  @type {Element}
 */
este.ui.resizer.Handles.prototype.vertical = null;

/**
  @type {Element}
 */
este.ui.resizer.Handles.prototype.horizontal = null;

/**
  @type {Element}
 */
este.ui.resizer.Handles.prototype.activeHandle = null;

/**
  @type {Function}
 */
este.ui.resizer.Handles.prototype.draggerFactory = null;

/**
  @type {Function}
 */
este.ui.resizer.Handles.prototype.invisibleOverlayFactory = null;

/**
  @type {goog.fx.Dragger}
 */
este.ui.resizer.Handles.prototype.dragger = null;

/**
  @type {goog.math.Coordinate}
 */
este.ui.resizer.Handles.prototype.dragMouseStart = null;

/**
  @type {este.ui.InvisibleOverlay}
 */
este.ui.resizer.Handles.prototype.invisibleOverlay = null;

/**
  @override
 */
este.ui.resizer.Handles.prototype.decorateInternal = function(element) {
  este.ui.resizer.Handles.superClass_.decorateInternal.call(this, element);
  this.createHandles();
  this.update();
};

/**
  @protected
 */
este.ui.resizer.Handles.prototype.createHandles = function() {
  var parent;
  this.vertical = this.dom_.createDom('div', 'e-ui-resizer-handle-vertical');
  this.horizontal = this.dom_.createDom('div', 'e-ui-resizer-handle-horizontal');
  parent = this.getElement().offsetParent || this.getElement();
  parent.appendChild(this.vertical);
  return parent.appendChild(this.horizontal);
};

/**
  Update handles bounds.
  @protected
 */
este.ui.resizer.Handles.prototype.update = function() {
  var el, left, top;
  el = this.getElement();
  left = el.offsetLeft;
  top = el.offsetTop;
  goog.style.setPosition(this.horizontal, left, top + el.offsetHeight);
  goog.style.setWidth(this.horizontal, el.offsetWidth);
  goog.style.setPosition(this.vertical, left + el.offsetWidth, top);
  return goog.style.setHeight(this.vertical, el.offsetHeight);
};

/**
  @override
 */
este.ui.resizer.Handles.prototype.enterDocument = function() {
  este.ui.resizer.Handles.superClass_.enterDocument.call(this);
  this.on(this.horizontal, 'mousedown', this.onHorizontalMouseDown);
  this.on(this.vertical, 'mousedown', this.onVerticalMouseDown);
  this.on(this.horizontal, 'mouseout', this.onMouseOut);
  this.on(this.vertical, 'mouseout', this.onMouseOut);
};

/**
  @param {goog.events.BrowserEvent} e
  @protected
 */
este.ui.resizer.Handles.prototype.onHorizontalMouseDown = function(e) {
  this.activeHandle = this.horizontal;
  return this.startDrag(e);
};

/**
  @param {goog.events.BrowserEvent} e
  @protected
 */
este.ui.resizer.Handles.prototype.onVerticalMouseDown = function(e) {
  this.activeHandle = this.vertical;
  return this.startDrag(e);
};

/**
  @param {goog.events.BrowserEvent} e
  @protected
 */
este.ui.resizer.Handles.prototype.onMouseOut = function(e) {
  return this.dispatchEvent(e);
};

/**
  @param {goog.events.BrowserEvent} e
  @protected
 */
este.ui.resizer.Handles.prototype.startDrag = function(e) {
  this.dragger = this.draggerFactory();
  this.on(this.dragger, 'start', this.onDragStart);
  this.on(this.dragger, 'drag', this.onDrag);
  this.on(this.dragger, 'end', this.onDragEnd);
  return this.dragger.startDrag(e);
};

/**
  @param {goog.fx.DragEvent} e
  @protected
 */
este.ui.resizer.Handles.prototype.onDragStart = function(e) {
  this.invisibleOverlay = this.invisibleOverlayFactory();
  this.addChild(this.invisibleOverlay, false);
  this.invisibleOverlay.render(this.dom_.getDocument().body);
  this.invisibleOverlay.getElement().style.cursor = goog.style.getComputedCursor(this.activeHandle);
  this.dragMouseStart = new goog.math.Coordinate(e.clientX, e.clientY);
  return this.dispatchEvent({
    element: this.getElement(),
    vertical: this.activeHandle === this.vertical,
    type: este.ui.resizer.Handles.EventType.START
  });
};

/**
  @param {goog.fx.DragEvent} e
  @protected
 */
este.ui.resizer.Handles.prototype.onDrag = function(e) {
  var difference, mouseCoord;
  mouseCoord = new goog.math.Coordinate(e.clientX, e.clientY);
  difference = goog.math.Coordinate.difference(mouseCoord, /** @type {!goog.math.Coordinate} */(this.dragMouseStart));
  this.dispatchEvent({
    element: this.getElement(),
    vertical: this.activeHandle === this.vertical,
    type: este.ui.resizer.Handles.EventType.DRAG,
    width: difference.x,
    height: difference.y
  });
  return this.update();
};

/**
  @param {goog.fx.DragEvent} e
  @protected
 */
este.ui.resizer.Handles.prototype.onDragEnd = function(e) {
  this.removeChild(this.invisibleOverlay, true);
  this.dragger.dispose();
  return this.dispatchEvent({
    element: this.getElement(),
    type: este.ui.resizer.Handles.EventType.END,
    close: this.shouldClose(e)
  });
};

/**
  @param {goog.fx.DragEvent} e
  @return {boolean}
  @protected
 */
este.ui.resizer.Handles.prototype.shouldClose = function(e) {
  var el;
  el = this.dom_.getDocument().elementFromPoint(e.clientX, e.clientY);
  return !(el === this.horizontal || el === this.vertical);
};

/**
  @param {Node} element
 */
este.ui.resizer.Handles.prototype.isHandle = function(element) {
  return element === this.vertical || element === this.horizontal;
};

/**
  @override
 */
este.ui.resizer.Handles.prototype.disposeInternal = function() {
  this.dom_.removeNode(this.horizontal);
  this.dom_.removeNode(this.vertical);
  if (this.dragger) {
    this.dragger.dispose();
  }
  este.ui.resizer.Handles.superClass_.disposeInternal.call(this);
};