// Generated by github.com/steida/coffee2closure 0.1.12
goog.provide('spark.components.DraggableView');
goog.require('spark.core.View');
goog.require('goog.fx.Dragger');
goog.require('goog.style');
goog.require('goog.dom');
/**
Draggable view for Spark Framework. It uses battle tested goog.fx.Dragger
as a drag engine but comes with more fancy methods like containers.
If you pass a container parameter which should be a DOM element or a View
instance then the drag will only be allowed inside that container element
or view. Draggable view listens for window resize and sets its limit again
to not allow dragging offset of the container. You can also want to unset
the container if you don't want to force dragging inside an element.
By default, dragging will be allowed for all element. If you want to use a
handle pass handle option either a view instance or an element.
@constructor
@export
@param {Object=} options Class options.
@param {*=} data Class data
@extends {spark.core.View}
*/
spark.components.DraggableView = function(options, data) {
if (options == null) {
options = {};
}
this.getCssClass(options, 'draggable');
/**
If you want to constrain drag inside an element, pass this option either
a View instance or a DOM element.
*/
options.container || (options.container = options['container'] || null);
/**
To create a handle for draggable element, pass a View instance or DOM
element to handle option. Make sure that, you appended handle view/element
to this component. For now Spark won't append it for you.
*/
options.handle || (options.handle = options['handle'] || null);
/**
To constrain dragging only one axis, pass this option either x or y.
Orientation can be `x` or `y`. If you want to allow dragging in both way
you can call `@setAxis` with `null` parameter.
*/
options.axis || (options.axis = options['axis'] || null);
spark.components.DraggableView.superClass_.constructor.call(this, options, data);
this.createDragger_();
this.setAxis(options.axis);
if (options.container) {
this.setContainer(options.container);
}
this.windowResizeListener = goog.events.listen(window, 'resize', (function(_this) {
return function() {
return _this.setLimits_();
};
})(this));
this.once('ViewHasParent', (function(_this) {
return function() {
return _this.setLimits_();
};
})(this));
}
goog.inherits(spark.components.DraggableView, spark.core.View);
/**
Sets drag limits relative to container element. This means dragging won't be
available outside of that container element.
@private
*/
spark.components.DraggableView.prototype.setLimits_ = function() {
var bounds, container, element, sizes;
if (!this.getContainer()) {
return;
}
element = this.getElement();
if (!element.parentNode) {
return;
}
container = this.getContainer();
sizes = goog.style.getSize(element);
bounds = goog.style.getBounds(container);
bounds.width = bounds.width - sizes.width;
bounds.height = bounds.height - sizes.height;
return this.dragger_.setLimits(bounds);
};
/**
Set container to force dragging inside that container element.
@export
@param {spark.core.View|Node} container Container to force dragging.
*/
spark.components.DraggableView.prototype.setContainer = function(container) {
if (container instanceof spark.core.View) {
this.container = container.getElement();
} else if (goog.dom.isElement(container)) {
this.container = container;
} else {
throw new Error('Drag container must be a View instance or a DOM element.');
}
return this.setLimits_();
};
/**
Unset container to free dragging area.
@export
*/
spark.components.DraggableView.prototype.unsetContainer = function() {
this.container = null;
return this.dragger_.setLimits(new goog.math.Rect(NaN, NaN, NaN, NaN));
};
/**
Returns drag container.
@export
@return {Element}
*/
spark.components.DraggableView.prototype.getContainer = function() {
return this.container;
};
/**
Set dragging enabled.
@export
*/
spark.components.DraggableView.prototype.enableDrag = function() {
return this.dragger_.setEnabled(true);
};
/**
Set dragging disabled. Users won't be able to drag the element unless
`enableDrag` called.
@export
*/
spark.components.DraggableView.prototype.disableDrag = function() {
return this.dragger_.setEnabled(false);
};
/**
Returns handle element if exists.
@private
@return {Element|null}
*/
spark.components.DraggableView.prototype.getHandleElement_ = function() {
var handle;
handle = this.getOptions().handle;
if (handle instanceof spark.core.View) {
return handle.getElement();
} else if (goog.dom.isElement(handle)) {
return handle;
}
return handle;
};
/**
Creates an instance of `goog.fx.Dragger` to operate on it.
@private
*/
spark.components.DraggableView.prototype.createDragger_ = function() {
var element;
this.dragger_ = new goog.fx.Dragger(this.getElement(), this.getHandleElement_());
element = this.getElement();
/*
Override default action to constrain dragging in only one axis.
*/
return this.dragger_.defaultAction = (function(_this) {
return function(dragX, dragY) {
var axis, position, x, y, _ref;
axis = _this.getAxis();
_ref = spark.components.DraggableView.Axes, x = _ref.x, y = _ref.y;
position = goog.style.getPosition(element);
if (axis === y) {
dragX = position.x;
} else if (axis === x) {
dragY = position.y;
}
return goog.style.setPosition(element, dragX, dragY);
};
})(this);
};
/**
Set allowed drag axis. Orientation should be `x` or `y`.
If you want to remove axis lock after set the axis you can
call this method with a `null` parameter.
@export
@param {spark.components.DraggableView.Axes|null} axis Allowed
drag axis. Use `null` to remove axis lock.
*/
spark.components.DraggableView.prototype.setAxis = function(axis) {
return this.axis = axis || null;
};
/**
Returns draw allowed axis. If it returns `null` drag will be allowed
in both way.
@export
@return {spark.components.DraggableView.Axes|null} axis Drag
allowed axis.
*/
spark.components.DraggableView.prototype.getAxis = function() {
return this.axis;
};
/**
Destroyes the component and removes the resize listener binded to window
and disposes the goog.fx.Dragger instance to make sure there is no leaking
event listeners.
@override
@export
*/
spark.components.DraggableView.prototype.destroy = function() {
if (!this.isDestroyed()) {
this.dragger_.disposeInternal();
this.dragger_ = null;
goog.events.unlistenByKey(this.windowResizeListener);
}
return spark.components.DraggableView.superClass_.destroy.apply(this, arguments);
};
/**
Orientatons enum.
@enum {string}
@export
*/
spark.components.DraggableView.Axes = {
'x': 'x',
'y': 'y'
};