resizable.js
Summary
No overview generated for 'resizable.js'
Zapatec.Resizable = {};
Zapatec.Resizable.makeResizable = function() {
if (!this.requireInterface("Zapatec.Sizable")) {
return false;
}
if (!this.requireInterface("Zapatec.CommandEvent")) {
return false;
}
var hooks = Zapatec.Array(this._getResizableHooks());
var measurement = this.getSizableMeasurement();
var self = this, result = false;
var config = this.getResizeConfig();
if (/(vertical|horizontal|top|left|all)/.test(config.direction) && !this.hasInterface("Zapatec.Movable")) {
Zapatec.Log({description : "The object with ID '" + this.id + "' has no Zapatec.Movable interface so can not be resizable!"});
return false;
}
var listenersObj = this._getRestorer().getSavedProps()["resizeListeners"] = {
mousedown : function(ev) {
return self.resizeStart(ev);
},
hover : function(ev) {
if (!self.isResizing() && self.canResize()) {
self._toggleResizeCursor(ev);
}
},
mouseover : function(ev) {
if (self.hasInterface("Zapatec.Draggable")) {
self._setCanDrag(false);
}
},
mouseout : function(ev) {
if (self.hasInterface("Zapatec.Draggable")) {
self._setCanDrag(true);
}
}
};
hooks.each(function(index, hook) {
if (!Zapatec.isHtmlElement(hook)) {
return;
}
result = true;
if (Zapatec.is_gecko) {
hook.style.setProperty("-moz-user-select", "none", "");
}
Zapatec.Utils.addEvent(hook, 'mousedown', listenersObj.mousedown);
Zapatec.Utils.addEvent(hook, 'mouseover', listenersObj.mouseover);
Zapatec.Utils.addEvent(hook, 'mouseout', listenersObj.mouseout);
});
if (!result) {
if (!Zapatec.isHtmlElement(measurement)) {
return false;
}
result = true;
Zapatec.Utils.addEvent(measurement, 'mousedown', listenersObj.mousedown);
Zapatec.Utils.addEvent(measurement, 'mousemove', listenersObj.hover);
}
return result;
};
Zapatec.Resizable._toggleResizeCursor = function(ev) {
ev = ev || window.event;
var el = this.getSizableMeasurement();
var config = this.getResizeConfig();
var oPos = Zapatec.Utils.getMousePos(ev);
var posX = oPos.pageX;
var posY = oPos.pageY;
var pos = Zapatec.Utils.getElementOffset(el);
var left = pos.x, right = pos.x + Zapatec.Utils.getWidth(el);
var top = pos.y, bottom = pos.y + Zapatec.Utils.getHeight(el);
var borderThickness = config.borderThickness;
var cornerThickness = config.cornerThickness;
function inRect(x, y, left, top, right, bottom) {
if ((x > left) && (x < right) && (y > top) && (y < bottom)) {
return true;
}
return false;
}
function inRange(value, minVal, maxVal) {
if ((value > minVal) && (value < maxVal)) {
return true;
}
return false;
}
var self = this;
function toggleResizing(cursor) {
el.style.cursor = cursor;
if (self.hasInterface("Zapatec.Draggable")) {
self._setCanDrag((cursor === "") ? true : false);
}
}
switch (true) {
case (inRect(posX, posY, left, top, left + borderThickness, top + borderThickness)) : {
toggleResizing("nw-resize");
break;
}
case (inRect(posX, posY, right - cornerThickness, bottom - cornerThickness, right, bottom)) : {
toggleResizing("se-resize");
break;
}
case (inRect(posX, posY, right - cornerThickness, top, right, top + borderThickness)) : {
toggleResizing("ne-resize");
break;
}
case (inRect(posX, posY, left, bottom - cornerThickness, left + cornerThickness, bottom)) : {
toggleResizing("sw-resize");
break;
}
case (inRange(posX, left, left + borderThickness)) : {
toggleResizing("w-resize");
break;
}
case (inRange(posX, right - borderThickness, right)) : {
toggleResizing("e-resize");
break;
}
case (inRange(posY, top, top + borderThickness)) : {
toggleResizing("n-resize");
break;
}
case (inRange(posY, bottom - borderThickness, bottom)) : {
toggleResizing("s-resize");
break;
}
default : {
toggleResizing("");
break;
}
}
el.style.cursor = this._correctDirection(el.style.cursor);
if (el.style.cursor == "") {
if (this.hasInterface("Zapatec.Draggable")) {
this._setCanDrag(true);
}
}
};
Zapatec.Resizable._correctDirection = function(direction) {
var config = this.getResizeConfig();
direction = direction.replace("-resize", "");
for (var i = 0; i < direction.length; ++i) {
switch(direction.charAt(i)) {
case "n" : {
if (!/(all|vertical|top)/.test(config.direction)) {
direction = direction.replace("n", "");
}
}
case "s" : {
if (!/(all|vertical|bottom)/.test(config.direction)) {
direction = direction.replace("s", "");
}
}
case "w" : {
if (!/(all|horizontal|left)/.test(config.direction)) {
direction = direction.replace("w", "");
}
}
case "e" : {
if (!/(all|horizontal|right)/.test(config.direction)) {
direction = direction.replace("e", "");
}
}
}
}
if (direction != "") {
return direction + "-resize";
}
return "";
};
Zapatec.Resizable.resizeStart = function(ev, deb) {
if (!this.canResize()) {
return true;
}
ev = ev || window.event;
var iButton = ev.button || ev.which;
if (iButton > 1) {
return true;
}
var self = this;
var config = this.getResizeConfig();
var target = ev.currentTarget || ev.srcElement;
while(target != document.body && target.style.cursor.indexOf("resize") == -1) {
target = target.parentNode;
}
if (target.style.cursor.indexOf("resize") == -1) {
return true;
}
var direction = this._correctDirection(target.style.cursor);
if (direction == "") {
return true;
}
if (this.fireEvent("beforeResizeInit", ev) === false) {
return true;
}
if (Zapatec.GlobalEvents.fireEvent("beforeResizeInit", ev, this) === false) {
return true;
}
this._setResizing(true);
this._proceedResizableElements("resizeStart");
var oPos = Zapatec.Utils.getMousePos(ev);
var mouseX = oPos.pageX;
var mouseY = oPos.pageY;
this.makeSizable();
this.startSizing();
if (/(vertical|horizontal|top|left|all)/.test(config.direction)) {
this.makeMovable();
this.startMove();
}
Zapatec.Utils.cover.show(
1000001,
direction,
function(ev) {
return self.resizeMove(ev);
},
function(ev) {
return self.resizeEnd(ev);
}
);
this._setResizingPoint(mouseX, mouseY, direction.replace("-resize", ""));
this.fireEvent("onResizeInit", ev);
Zapatec.GlobalEvents.fireEvent("onResizeInit", ev, this);
if (config.stopEvent) {
return Zapatec.Utils.stopEvent(ev);
} else {
return true;
}
};
Zapatec.Resizable.resizeMove = function(ev){
if (!this.isResizing()) {
return true;
}
ev = ev || window.event;
if (this.fireEvent("beforeResize", ev) === false) {
return true;
}
if (Zapatec.GlobalEvents.fireEvent("beforeResize", ev, this) === false) {
return true;
}
var oPos = Zapatec.Utils.getMousePos(ev);
var x = oPos.pageX;
var y = oPos.pageY;
var movePoint = this.getResizingPoint();
var direction = Zapatec.Utils.cover.style.cursor;
direction = direction.replace("-resize", "");
if (direction.indexOf("w") > -1) {
var width = this.getWidth();
this.setWidth(width + (movePoint.x - x));
if (width != this.getWidth()) {
this.moveFor(width - this.getWidth(), null);
}
}
if (direction.indexOf("e") > -1) {
this.setWidth(this.getWidth() + (x - movePoint.x));
}
if (direction.indexOf("n") > -1) {
var height = this.getHeight();
this.setHeight(height + (movePoint.y - y));
if (height != this.getHeight()) {
this.moveFor(null, height - this.getHeight());
}
}
if (direction.indexOf("s") > -1) {
this.setHeight(this.getHeight() + (y - movePoint.y));
}
this._setResizingPoint(x, y, direction);
this.fireEvent("onResize", ev);
Zapatec.GlobalEvents.fireEvent("onResize", ev, this);
return Zapatec.Utils.stopEvent(ev);
};
Zapatec.Resizable.resizeEnd = function(ev){
if (!this.isResizing()) {
return true;
}
ev = ev || window.event;
var self = this;
var config = this.getResizeConfig();
if (this.fireEvent("beforeResizeEnd", ev) === false) {
return true;
}
if (Zapatec.GlobalEvents.fireEvent("beforeResizeEnd", ev, this) === false) {
return true;
}
this._proceedResizableElements("resizeEnd");
Zapatec.Utils.cover.hide();
this._setResizingPoint(null, null);
this._setResizing(false);
this.endSizing();
if (/(vertical|horizontal|top|left|all)/.test(config.direction)) {
this.endMove();
}
this.fireEvent("onResizeEnd", ev);
Zapatec.GlobalEvents.fireEvent("onResizeEnd", ev, this);
return Zapatec.Utils.stopEvent(ev);
};
Zapatec.Resizable.restoreOfResize = function() {
var config = this.getResizeConfig();
this.restoreOfSizing();
if (/(vertical|horizontal|top|left|all)/.test(config.direction)) {
this.restoreOfMove();
}
var hooks = Zapatec.Array(this._getResizableHooks());
var self = this;
var result = false;
var listenersObj = this._getRestorer().getSavedProps()["resizeListeners"];
hooks.each(function(index, hook) {
if (!Zapatec.isHtmlElement(hook)) {
return;
}
result = true;
if (Zapatec.is_gecko) {
hook.style.setProperty("-moz-user-select", "", "");
}
Zapatec.Utils.removeEvent(hook, 'mousedown', listenersObj.mousedown);
Zapatec.Utils.removeEvent(hook, 'mouseover', listenersObj.mouseover);
Zapatec.Utils.removeEvent(hook, 'mouseout', listenersObj.mouseout);
});
if (!result) {
var measurement = this.getSizableMeasurement();
if (!Zapatec.isHtmlElement(measurement)) {
return false
}
Zapatec.Utils.removeEvent(measurement, 'mousedown', listenersObj.mousedown);
Zapatec.Utils.removeEvent(measurement, 'mousemove', listenersObj.hover);
}
return true;
};
Zapatec.Resizable._getResizableHooks = function() {
if (this.getContainer) {
return this.getContainer();
} else {
return null;
}
};
Zapatec.Resizable.isResizing = function() {
return this.resizing;
};
Zapatec.Resizable.canResize = function() {
return this.canResize;
};
Zapatec.Resizable._setCanResize = function(on) {
this.canResize = on;
};
Zapatec.Resizable.getResizeConfig = function() {
return this.getConfiguration();
};
Zapatec.Resizable.setResizeConfig = function(config) {
this.reconfigure(config);
};
Zapatec.Resizable._setResizing = function(on) {
this.resizing = on;
};
Zapatec.Resizable._handleSizeOverflow = function(limit, dimension) {
if (!this.isResizing()) {
Zapatec.Sizable._handleSizeOverflow.call(this, limit, dimension);
}
return limit;
};
Zapatec.Resizable._getRestorer = function() {
if (!this.restorer || this.restorer.constructor != Zapatec.SRProp) {
this.restorer = new Zapatec.SRProp(this);
}
return this.restorer;
};
Zapatec.Resizable._proceedResizableElements = function(resizeState) {
var config = this.getResizeConfig(),
copy = null, measurement = null, self = this;
switch (config.method) {
case "copy" : {
if (resizeState == "resizeStart") {
var measurement = this.getSizableMeasurement();
if (!Zapatec.isHtmlElement(measurement)) {
return false;
}
copy = measurement.cloneNode(false);
measurement.parentNode.insertBefore(copy, measurement);
this._getRestorer().saveProp("getSizableElements");
this.getSizableElements = function() {
return copy;
};
this._getRestorer().saveProp("getSizableMeasurement");
this.getSizableMeasurement = function() {
return copy;
};
if (/(vertical|horizontal|top|left|all)/.test(config.direction)) {
this._getRestorer().saveProp("getMovableElements");
this.getMovableElements = function(resetArray) {
return copy;
};
this._getRestorer().saveProp("getMovableMeasurement");
this.getMovableMeasurement = function() {
return copy;
};
}
} else if (resizeState == "resizeEnd") {
copy = this.getMovableElements();
var width = this.getWidth();
var height = this.getHeight();
var pos = null;
if (/(vertical|horizontal|top|left|all)/.test(config.direction)) {
pos = this.getPosition();
}
copy.parentNode.removeChild(copy);
this._getRestorer().restoreProp("getSizableElements");
this._getRestorer().restoreProp("getSizableMeasurement");
this._getRestorer().restoreProp("getMovableElements");
this._getRestorer().restoreProp("getMovableMeasurement");
this.setWidth(width);
this.setHeight(height);
if (pos) {
this.setPosition(pos.x, pos.y);
}
}
break;
}
default : {
break;
}
}
};
Zapatec.Resizable._setResizingPoint = function(x, y, direction) {
var resizingPoint = this._getResizingPointObject();
if (x === null || y === null) {
resizingPoint.x = null;
resizingPoint.y = null;
resizingPoint.offsetX = null;
resizingPoint.offsetY = null;
return;
}
if (resizingPoint.x === null || resizingPoint.y === null) {
resizingPoint.x = x;
resizingPoint.y = y;
var width = this.getWidth();
var height = this.getHeight();
if (direction.match(/(n|w)/)) {
var pos = this.getScreenPosition();
}
if (direction.indexOf("n") != -1) {
resizingPoint.offsetY = y - pos.y;
}
if (direction.indexOf("w") != -1) {
resizingPoint.offsetX = x - pos.x;
}
if (direction.indexOf("e") != -1) {
resizingPoint.offsetX = x - width;
}
if (direction.indexOf("s") != -1) {
resizingPoint.offsetY = y - height;
}
resizingPoint.offsetX = resizingPoint.offsetX || 0;
resizingPoint.offsetY = resizingPoint.offsetY || 0;
} else {
var diffX = 0;
var diffY = 0;
var width = this.getWidth();
var height = this.getHeight();
if (direction.match(/(n|w)/)) {
var pos = this.getScreenPosition();
}
if (direction.indexOf("n") != -1) {
diffY = pos.y;
}
if (direction.indexOf("w") != -1) {
diffX = pos.x;
}
if (direction.indexOf("e") != -1) {
diffX = width;
}
if (direction.indexOf("s") != -1) {
diffY = height;
}
resizingPoint.x = diffX + resizingPoint.offsetX;
resizingPoint.y = diffY + resizingPoint.offsetY;
}
return;
};
Zapatec.Resizable.getResizingPoint = function() {
var resizingPoint = this._getResizingPointObject();
return {x : resizingPoint.x, y : resizingPoint.y};
};
Zapatec.Resizable._getResizingPointObject = function() {
if (!this.resizingPoint || typeof this.resizingPoint != "object") {
this.resizingPoint = {x : null, y : null, offsetX : null, offsetY : null};
}
return this.resizingPoint;
};
Zapatec.Utils.Resizable = function(config) {
Zapatec.Utils.Resizable.SUPERconstructor.call(this, config);
};
Zapatec.Utils.Resizable.id = "Zapatec.Utils.Resizable";
Zapatec.inherit(Zapatec.Utils.Resizable, Zapatec.Utils.Sizable);
Zapatec.implement(Zapatec.Utils.Resizable, "Zapatec.Movable");
Zapatec.implement(Zapatec.Utils.Resizable, "Zapatec.Resizable");
Zapatec.Utils.Resizable.prototype.init = function(config) {
Zapatec.Utils.Resizable.SUPERclass.init.call(this, config);
this.restoreOfSizing();
this.makeResizable();
};
Zapatec.Utils.Resizable.prototype.configure = function(config) {
this.defineConfigOption("method", "self");
this.defineConfigOption("stopEvent", true);
this.defineConfigOption("handlers", null);
this.defineConfigOption("borderThickness", 10);
this.defineConfigOption("cornerThickness", 10);
this.defineConfigOption("direction", "all");
Zapatec.Utils.Resizable.SUPERclass.configure.call(this, config);
config = this.getConfiguration();
config.handlers = Zapatec.Array(config.handlers);
config.handlers.each(function(index, handler) {
handler = Zapatec.Widget.getElementById(handler);
handler = Zapatec.Utils.img2div(handler);
config.handlers[index] = handler;
});
};
Zapatec.Utils.Resizable.prototype.reconfigure = function(config) {
Zapatec.Utils.Resizable.SUPERclass.reconfigure.call(this, config);
};
Zapatec.Utils.Resizable.prototype._getResizableHooks = function() {
return this.getConfiguration().handlers;
};
Documentation generated by
JSDoc on Thu Aug 16 12:18:39 2007