Cleaned up via JSLint
This commit is contained in:
parent
296c6e605f
commit
c46b5cc7cc
|
@ -1,5 +1,4 @@
|
||||||
/*
|
/*
|
||||||
|
|
||||||
DragResize v1.0
|
DragResize v1.0
|
||||||
(c) 2005-2006 Angus Turnbull, TwinHelix Designs http://www.twinhelix.com
|
(c) 2005-2006 Angus Turnbull, TwinHelix Designs http://www.twinhelix.com
|
||||||
|
|
||||||
|
@ -7,64 +6,64 @@ Licensed under the CC-GNU LGPL, version 2.1 or later:
|
||||||
http://creativecommons.org/licenses/LGPL/2.1/
|
http://creativecommons.org/licenses/LGPL/2.1/
|
||||||
This is distributed WITHOUT ANY WARRANTY; without even the implied
|
This is distributed WITHOUT ANY WARRANTY; without even the implied
|
||||||
warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
|
warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
|
||||||
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
// Common API code.
|
// Common API code.
|
||||||
|
if (typeof addEvent != 'function') {
|
||||||
|
var removeEvent = function(o, t, f, l) {
|
||||||
|
var d = 'removeEventListener';
|
||||||
|
if (o[d] && !l) {
|
||||||
|
return o[d](t, f, false);
|
||||||
|
}
|
||||||
|
if (o._evts && o._evts[t] && f._i) {
|
||||||
|
delete o._evts[t][f._i];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
if (typeof addEvent != 'function')
|
var addEvent = function(o, t, f, l) {
|
||||||
{
|
|
||||||
var addEvent = function(o, t, f, l)
|
|
||||||
{
|
|
||||||
var d = 'addEventListener', n = 'on' + t, rO = o, rT = t, rF = f, rL = l;
|
var d = 'addEventListener', n = 'on' + t, rO = o, rT = t, rF = f, rL = l;
|
||||||
if (o[d] && !l) return o[d](t, f, false);
|
if (o[d] && !l) {
|
||||||
if (!o._evts) o._evts = {};
|
return o[d](t, f, false);
|
||||||
if (!o._evts[t])
|
}
|
||||||
{
|
if (!o._evts) {
|
||||||
|
o._evts = {};
|
||||||
|
}
|
||||||
|
if (!o._evts[t]) {
|
||||||
o._evts[t] = o[n] ? { b: o[n] } : {};
|
o._evts[t] = o[n] ? { b: o[n] } : {};
|
||||||
o[n] = new Function('e',
|
o[n] = new Function('e',
|
||||||
'var r = true, o = this, a = o._evts["' + t + '"], i; for (i in a) {' +
|
'var r = true, o = this, a = o._evts["' + t + '"], i; for (i in a) {' +
|
||||||
'o._f = a[i]; r = o._f(e||window.event) != false && r; o._f = null;' +
|
'o._f = a[i]; r = o._f(e||window.event) != false && r; o._f = null;' +
|
||||||
'} return r');
|
'} return r'
|
||||||
if (t != 'unload') addEvent(window, 'unload', function() {
|
);
|
||||||
|
if (t != 'unload') {
|
||||||
|
addEvent(window, 'unload', function() {
|
||||||
removeEvent(rO, rT, rF, rL);
|
removeEvent(rO, rT, rF, rL);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (!f._i) f._i = addEvent._i++;
|
}
|
||||||
|
if (!f._i) {
|
||||||
|
f._i = addEvent._i++;
|
||||||
|
}
|
||||||
o._evts[t][f._i] = f;
|
o._evts[t][f._i] = f;
|
||||||
};
|
};
|
||||||
addEvent._i = 1;
|
addEvent._i = 1;
|
||||||
var removeEvent = function(o, t, f, l)
|
|
||||||
{
|
|
||||||
var d = 'removeEventListener';
|
|
||||||
if (o[d] && !l) return o[d](t, f, false);
|
|
||||||
if (o._evts && o._evts[t] && f._i) delete o._evts[t][f._i];
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function cancelEvent(e, c) {
|
||||||
function cancelEvent(e, c)
|
|
||||||
{
|
|
||||||
e.returnValue = false;
|
e.returnValue = false;
|
||||||
if (e.preventDefault) e.preventDefault();
|
if (e.preventDefault) {
|
||||||
if (c)
|
e.preventDefault();
|
||||||
{
|
}
|
||||||
e.cancelBubble = true;
|
if (c) {
|
||||||
if (e.stopPropagation) e.stopPropagation();
|
e.cancelBubble = true;
|
||||||
|
if (e.stopPropagation) {
|
||||||
|
e.stopPropagation();
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// *** DRAG/RESIZE CODE ***
|
// *** DRAG/RESIZE CODE ***
|
||||||
|
function DragResize(myName, config) {
|
||||||
function DragResize(myName, config)
|
|
||||||
{
|
|
||||||
var props = {
|
var props = {
|
||||||
myName: myName, // Name of the object.
|
myName: myName, // Name of the object.
|
||||||
enabled: true, // Global toggle of drag/resize.
|
enabled: true, // Global toggle of drag/resize.
|
||||||
|
@ -91,31 +90,27 @@ function DragResize(myName, config)
|
||||||
ondragblur: null
|
ondragblur: null
|
||||||
};
|
};
|
||||||
|
|
||||||
for (var p in props)
|
for (var p in props) {
|
||||||
this[p] = (typeof config[p] == 'undefined') ? props[p] : config[p];
|
this[p] = (typeof config[p] == 'undefined') ? props[p] : config[p];
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
DragResize.prototype.apply = function(node)
|
DragResize.prototype.apply = function(node) {
|
||||||
{
|
|
||||||
// Adds object event handlers to the specified DOM node.
|
// Adds object event handlers to the specified DOM node.
|
||||||
|
|
||||||
var obj = this;
|
var obj = this;
|
||||||
addEvent(node, 'mousedown', function(e) { obj.mouseDown(e) } );
|
addEvent(node, 'mousedown', function(e) { obj.mouseDown(e) } );
|
||||||
addEvent(node, 'mousemove', function(e) { obj.mouseMove(e) } );
|
addEvent(node, 'mousemove', function(e) { obj.mouseMove(e) } );
|
||||||
addEvent(node, 'mouseup', function(e) { obj.mouseUp(e) } );
|
addEvent(node, 'mouseup', function(e) { obj.mouseUp(e) } );
|
||||||
};
|
};
|
||||||
|
|
||||||
|
DragResize.prototype.select = function(newElement) {
|
||||||
DragResize.prototype.select = function(newElement) { with (this)
|
with (this) {
|
||||||
{
|
|
||||||
// Selects an element for dragging.
|
// Selects an element for dragging.
|
||||||
|
|
||||||
if (!document.getElementById || !enabled) return;
|
if (!document.getElementById || !enabled) return;
|
||||||
|
|
||||||
// Activate and record our new dragging element.
|
// Activate and record our new dragging element.
|
||||||
if (newElement && (newElement != element) && enabled)
|
if (newElement && (newElement != element) && enabled) {
|
||||||
{
|
|
||||||
element = newElement;
|
element = newElement;
|
||||||
// Elevate it and give it resize handles.
|
// Elevate it and give it resize handles.
|
||||||
element.style.zIndex = ++zIndex;
|
element.style.zIndex = ++zIndex;
|
||||||
|
@ -127,32 +122,29 @@ DragResize.prototype.select = function(newElement) { with (this)
|
||||||
elmH = element.offsetHeight;
|
elmH = element.offsetHeight;
|
||||||
if (ondragfocus) this.ondragfocus();
|
if (ondragfocus) this.ondragfocus();
|
||||||
}
|
}
|
||||||
}};
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
DragResize.prototype.deselect = function(delHandles) {
|
||||||
DragResize.prototype.deselect = function(delHandles) { with (this)
|
with (this) {
|
||||||
{
|
|
||||||
// Immediately stops dragging an element. If 'delHandles' is true, this
|
// Immediately stops dragging an element. If 'delHandles' is true, this
|
||||||
// remove the handles from the element and clears the element flag,
|
// remove the handles from the element and clears the element flag,
|
||||||
// completely resetting the .
|
// completely resetting the .
|
||||||
|
|
||||||
if (!document.getElementById || !enabled) return;
|
if (!document.getElementById || !enabled) return;
|
||||||
|
|
||||||
if (delHandles)
|
if (delHandles) {
|
||||||
{
|
|
||||||
if (ondragblur) this.ondragblur();
|
if (ondragblur) this.ondragblur();
|
||||||
if (this.resizeHandleSet) this.resizeHandleSet(element, false);
|
if (this.resizeHandleSet) this.resizeHandleSet(element, false);
|
||||||
element = null;
|
element = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
handle = null;
|
handle = null;
|
||||||
mOffX = 0;
|
mOffX = 0;
|
||||||
mOffY = 0;
|
mOffY = 0;
|
||||||
}};
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
DragResize.prototype.mouseDown = function(e) {
|
||||||
DragResize.prototype.mouseDown = function(e) { with (this)
|
with (this) {
|
||||||
{
|
|
||||||
// Suitable elements are selected for drag/resize on mousedown.
|
// Suitable elements are selected for drag/resize on mousedown.
|
||||||
// We also initialise the resize boxes, and drag parameters like mouse position etc.
|
// We also initialise the resize boxes, and drag parameters like mouse position etc.
|
||||||
if (!document.getElementById || !enabled) return true;
|
if (!document.getElementById || !enabled) return true;
|
||||||
|
@ -162,11 +154,9 @@ DragResize.prototype.mouseDown = function(e) { with (this)
|
||||||
newHandle = null,
|
newHandle = null,
|
||||||
hRE = new RegExp(myName + '-([trmbl]{2})', '');
|
hRE = new RegExp(myName + '-([trmbl]{2})', '');
|
||||||
|
|
||||||
while (elm)
|
while (elm) {
|
||||||
{
|
|
||||||
// Loop up the DOM looking for matching elements. Remember one if found.
|
// Loop up the DOM looking for matching elements. Remember one if found.
|
||||||
if (elm.className)
|
if (elm.className) {
|
||||||
{
|
|
||||||
if (!newHandle && (hRE.test(elm.className) || isHandle(elm))) newHandle = elm;
|
if (!newHandle && (hRE.test(elm.className) || isHandle(elm))) newHandle = elm;
|
||||||
if (isElement(elm)) { newElement = elm; break }
|
if (isElement(elm)) { newElement = elm; break }
|
||||||
}
|
}
|
||||||
|
@ -178,19 +168,17 @@ DragResize.prototype.mouseDown = function(e) { with (this)
|
||||||
if (element && (element != newElement) && allowBlur) deselect(true);
|
if (element && (element != newElement) && allowBlur) deselect(true);
|
||||||
|
|
||||||
// If we have a new matching element, call select().
|
// If we have a new matching element, call select().
|
||||||
if (newElement && (!element || (newElement == element)))
|
if (newElement && (!element || (newElement == element))) {
|
||||||
{
|
|
||||||
// Stop mouse selections if we're dragging a handle.
|
// Stop mouse selections if we're dragging a handle.
|
||||||
if (newHandle) cancelEvent(e);
|
if (newHandle) cancelEvent(e);
|
||||||
select(newElement, newHandle);
|
select(newElement, newHandle);
|
||||||
handle = newHandle;
|
handle = newHandle;
|
||||||
if (handle && ondragstart) this.ondragstart(hRE.test(handle.className));
|
if (handle && ondragstart) this.ondragstart(hRE.test(handle.className));
|
||||||
}
|
}
|
||||||
}};
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
DragResize.prototype.mouseMove = function(e) { with (this) {
|
||||||
DragResize.prototype.mouseMove = function(e) { with (this)
|
|
||||||
{
|
|
||||||
// This continually offsets the dragged element by the difference between the
|
// This continually offsets the dragged element by the difference between the
|
||||||
// last recorded mouse position (mouseX/Y) and the current mouse position.
|
// last recorded mouse position (mouseX/Y) and the current mouse position.
|
||||||
if (!document.getElementById || !enabled) return true;
|
if (!document.getElementById || !enabled) return true;
|
||||||
|
@ -213,12 +201,9 @@ DragResize.prototype.mouseMove = function(e) { with (this)
|
||||||
// If included in the script, run the resize handle drag routine.
|
// If included in the script, run the resize handle drag routine.
|
||||||
// Let it create an object representing the drag offsets.
|
// Let it create an object representing the drag offsets.
|
||||||
var isResize = false;
|
var isResize = false;
|
||||||
if (this.resizeHandleDrag && this.resizeHandleDrag(diffX, diffY))
|
if (this.resizeHandleDrag && this.resizeHandleDrag(diffX, diffY)) {
|
||||||
{
|
|
||||||
isResize = true;
|
isResize = true;
|
||||||
}
|
} else {
|
||||||
else
|
|
||||||
{
|
|
||||||
// If the resize drag handler isn't set or returns fase (to indicate the drag was
|
// If the resize drag handler isn't set or returns fase (to indicate the drag was
|
||||||
// not on a resize handle), we must be dragging the whole element, so move that.
|
// not on a resize handle), we must be dragging the whole element, so move that.
|
||||||
// Bounds check left-right...
|
// Bounds check left-right...
|
||||||
|
@ -233,8 +218,7 @@ DragResize.prototype.mouseMove = function(e) { with (this)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Assign new info back to the element, with minimum dimensions.
|
// Assign new info back to the element, with minimum dimensions.
|
||||||
with (element.style)
|
with (element.style) {
|
||||||
{
|
|
||||||
left = elmX + 'px';
|
left = elmX + 'px';
|
||||||
width = elmW + 'px';
|
width = elmW + 'px';
|
||||||
top = elmY + 'px';
|
top = elmY + 'px';
|
||||||
|
@ -242,11 +226,9 @@ DragResize.prototype.mouseMove = function(e) { with (this)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Evil, dirty, hackish Opera select-as-you-drag fix.
|
// Evil, dirty, hackish Opera select-as-you-drag fix.
|
||||||
if (window.opera && document.documentElement)
|
if (window.opera && document.documentElement) {
|
||||||
{
|
|
||||||
var oDF = document.getElementById('op-drag-fix');
|
var oDF = document.getElementById('op-drag-fix');
|
||||||
if (!oDF)
|
if (!oDF) {
|
||||||
{
|
|
||||||
var oDF = document.createElement('input');
|
var oDF = document.createElement('input');
|
||||||
oDF.id = 'op-drag-fix';
|
oDF.id = 'op-drag-fix';
|
||||||
oDF.style.display = 'none';
|
oDF.style.display = 'none';
|
||||||
|
@ -262,8 +244,7 @@ DragResize.prototype.mouseMove = function(e) { with (this)
|
||||||
}};
|
}};
|
||||||
|
|
||||||
|
|
||||||
DragResize.prototype.mouseUp = function(e) { with (this)
|
DragResize.prototype.mouseUp = function(e) { with (this) {
|
||||||
{
|
|
||||||
// On mouseup, stop dragging, but don't reset handler visibility.
|
// On mouseup, stop dragging, but don't reset handler visibility.
|
||||||
if (!document.getElementById || !enabled) return;
|
if (!document.getElementById || !enabled) return;
|
||||||
|
|
||||||
|
@ -272,19 +253,13 @@ DragResize.prototype.mouseUp = function(e) { with (this)
|
||||||
deselect(false);
|
deselect(false);
|
||||||
}};
|
}};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Resize Code -- can be deleted if you're not using it. */
|
/* Resize Code -- can be deleted if you're not using it. */
|
||||||
|
DragResize.prototype.resizeHandleSet = function(elm, show) { with (this) {
|
||||||
DragResize.prototype.resizeHandleSet = function(elm, show) { with (this)
|
|
||||||
{
|
|
||||||
// Either creates, shows or hides the resize handles within an element.
|
// Either creates, shows or hides the resize handles within an element.
|
||||||
|
|
||||||
// If we're showing them, and no handles have been created, create 4 new ones.
|
// If we're showing them, and no handles have been created, create 4 new ones.
|
||||||
if (!elm._handle_tr)
|
if (!elm._handle_tr) {
|
||||||
{
|
for (var h = 0; h < handles.length; h++) {
|
||||||
for (var h = 0; h < handles.length; h++)
|
|
||||||
{
|
|
||||||
// Create 4 news divs, assign each a generic + specific class.
|
// Create 4 news divs, assign each a generic + specific class.
|
||||||
var hDiv = document.createElement('div');
|
var hDiv = document.createElement('div');
|
||||||
hDiv.className = myName + ' ' + myName + '-' + handles[h];
|
hDiv.className = myName + ' ' + myName + '-' + handles[h];
|
||||||
|
@ -293,15 +268,13 @@ DragResize.prototype.resizeHandleSet = function(elm, show) { with (this)
|
||||||
}
|
}
|
||||||
|
|
||||||
// We now have handles. Find them all and show/hide.
|
// We now have handles. Find them all and show/hide.
|
||||||
for (var h = 0; h < handles.length; h++)
|
for (var h = 0; h < handles.length; h++) {
|
||||||
{
|
|
||||||
elm['_handle_' + handles[h]].style.visibility = show ? 'inherit' : 'hidden';
|
elm['_handle_' + handles[h]].style.visibility = show ? 'inherit' : 'hidden';
|
||||||
}
|
}
|
||||||
}};
|
}};
|
||||||
|
|
||||||
|
|
||||||
DragResize.prototype.resizeHandleDrag = function(diffX, diffY) { with (this)
|
DragResize.prototype.resizeHandleDrag = function(diffX, diffY) { with (this) {
|
||||||
{
|
|
||||||
// Passed the mouse movement amounts. This function checks to see whether the
|
// Passed the mouse movement amounts. This function checks to see whether the
|
||||||
// drag is from a resize handle created above; if so, it changes the stored
|
// drag is from a resize handle created above; if so, it changes the stored
|
||||||
// elm* dimensions and mOffX/Y.
|
// elm* dimensions and mOffX/Y.
|
||||||
|
@ -313,8 +286,7 @@ DragResize.prototype.resizeHandleDrag = function(diffX, diffY) { with (this)
|
||||||
// Bounds checking is the hard bit -- basically for each edge, check that the
|
// Bounds checking is the hard bit -- basically for each edge, check that the
|
||||||
// element doesn't go under minimum size, and doesn't go beyond its boundary.
|
// element doesn't go under minimum size, and doesn't go beyond its boundary.
|
||||||
var dY = diffY, dX = diffX, processed = false;
|
var dY = diffY, dX = diffX, processed = false;
|
||||||
if (hClass.indexOf('t') >= 0)
|
if (hClass.indexOf('t') >= 0) {
|
||||||
{
|
|
||||||
rs = 1;
|
rs = 1;
|
||||||
if (elmH - dY < minHeight) mOffY = (dY - (diffY = elmH - minHeight));
|
if (elmH - dY < minHeight) mOffY = (dY - (diffY = elmH - minHeight));
|
||||||
else if (elmY + dY < minTop) mOffY = (dY - (diffY = minTop - elmY));
|
else if (elmY + dY < minTop) mOffY = (dY - (diffY = minTop - elmY));
|
||||||
|
@ -322,16 +294,14 @@ DragResize.prototype.resizeHandleDrag = function(diffX, diffY) { with (this)
|
||||||
elmH -= diffY;
|
elmH -= diffY;
|
||||||
processed = true;
|
processed = true;
|
||||||
}
|
}
|
||||||
if (hClass.indexOf('b') >= 0)
|
if (hClass.indexOf('b') >= 0) {
|
||||||
{
|
|
||||||
rs = 1;
|
rs = 1;
|
||||||
if (elmH + dY < minHeight) mOffY = (dY - (diffY = minHeight - elmH));
|
if (elmH + dY < minHeight) mOffY = (dY - (diffY = minHeight - elmH));
|
||||||
else if (elmY + elmH + dY > maxTop) mOffY = (dY - (diffY = maxTop - elmY - elmH));
|
else if (elmY + elmH + dY > maxTop) mOffY = (dY - (diffY = maxTop - elmY - elmH));
|
||||||
elmH += diffY;
|
elmH += diffY;
|
||||||
processed = true;
|
processed = true;
|
||||||
}
|
}
|
||||||
if (hClass.indexOf('l') >= 0)
|
if (hClass.indexOf('l') >= 0) {
|
||||||
{
|
|
||||||
rs = 1;
|
rs = 1;
|
||||||
if (elmW - dX < minWidth) mOffX = (dX - (diffX = elmW - minWidth));
|
if (elmW - dX < minWidth) mOffX = (dX - (diffX = elmW - minWidth));
|
||||||
else if (elmX + dX < minLeft) mOffX = (dX - (diffX = minLeft - elmX));
|
else if (elmX + dX < minLeft) mOffX = (dX - (diffX = minLeft - elmX));
|
||||||
|
@ -339,14 +309,12 @@ DragResize.prototype.resizeHandleDrag = function(diffX, diffY) { with (this)
|
||||||
elmW -= diffX;
|
elmW -= diffX;
|
||||||
processed = true;
|
processed = true;
|
||||||
}
|
}
|
||||||
if (hClass.indexOf('r') >= 0)
|
if (hClass.indexOf('r') >= 0) {
|
||||||
{
|
|
||||||
rs = 1;
|
rs = 1;
|
||||||
if (elmW + dX < minWidth) mOffX = (dX - (diffX = minWidth - elmW));
|
if (elmW + dX < minWidth) mOffX = (dX - (diffX = minWidth - elmW));
|
||||||
else if (elmX + elmW + dX > maxLeft) mOffX = (dX - (diffX = maxLeft - elmX - elmW));
|
else if (elmX + elmW + dX > maxLeft) mOffX = (dX - (diffX = maxLeft - elmX - elmW));
|
||||||
elmW += diffX;
|
elmW += diffX;
|
||||||
processed = true;
|
processed = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
return processed;
|
return processed;
|
||||||
}};
|
}};
|
Loading…
Reference in New Issue
Block a user