1
0

Moved drag+drop and YahooUI library into templates/default/ to be used in shared installation environments

This commit is contained in:
Garvin Hicking
2007-01-22 12:11:49 +00:00
parent 0fb606a927
commit 264b804182
8 changed files with 8 additions and 5 deletions

View File

@ -1,63 +0,0 @@
/*
Copyright (c) 2006 Yahoo! Inc. All rights reserved.
version 0.9.0
*/
/**
* @class The Yahoo global namespace
*/
var YAHOO = function() {
return {
/**
* Yahoo presentation platform utils namespace
*/
util: {},
/**
* Yahoo presentation platform widgets namespace
*/
widget: {},
/**
* Yahoo presentation platform examples namespace
*/
example: {},
/**
* Returns the namespace specified and creates it if it doesn't exist
*
* YAHOO.namespace("property.package");
* YAHOO.namespace("YAHOO.property.package");
*
* Either of the above would create YAHOO.property, then
* YAHOO.property.package
*
* @param {String} sNameSpace String representation of the desired
* namespace
* @return {Object} A reference to the namespace object
*/
namespace: function( sNameSpace ) {
if (!sNameSpace || !sNameSpace.length) {
return null;
}
var levels = sNameSpace.split(".");
var currentNS = YAHOO;
// YAHOO is implied, so it is ignored if it is included
for (var i=(levels[0] == "YAHOO") ? 1 : 0; i<levels.length; ++i) {
currentNS[levels[i]] = currentNS[levels[i]] || {};
currentNS = currentNS[levels[i]];
}
return currentNS;
}
};
} ();

View File

@ -1,35 +0,0 @@
Software License Agreement (BSD License)
Copyright (c) 2006, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with
or without modification, are permitted provided that the following
conditions are met:
* Redistributions of source code must retain the above
copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the
following disclaimer in the documentation and/or other
materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its
contributors may be used to endorse or promote products
derived from this software without specific prior
written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED
TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER
OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

File diff suppressed because it is too large Load Diff

View File

@ -1,802 +0,0 @@
/**********************************************************
Very minorly modified from the example by Tim Taylor
http://tool-man.org/examples/sorting.html
Added Coordinate.prototype.inside( northwest, southeast );
Copyright (c) 2005 Tim Taylor Consulting <http://tool-man.org/>
Permission is hereby granted, free of charge, to any person obtaining a
copy of this software and associated documentation files (the "Software"),
to deal in the Software without restriction, including without limitation
the rights to use, copy, modify, merge, publish, distribute, sublicense,
and/or sell copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included
in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
**********************************************************/
var Coordinates = {
ORIGIN : new Coordinate(0, 0),
northwestPosition : function(element) {
var x = parseInt(element.style.left);
var y = parseInt(element.style.top);
return new Coordinate(isNaN(x) ? 0 : x, isNaN(y) ? 0 : y);
},
southeastPosition : function(element) {
return Coordinates.northwestPosition(element).plus(
new Coordinate(element.offsetWidth, element.offsetHeight));
},
northwestOffset : function(element, isRecursive) {
var offset = new Coordinate(element.offsetLeft, element.offsetTop);
if (!isRecursive) return offset;
var parent = element.offsetParent;
while (parent) {
offset = offset.plus(
new Coordinate(parent.offsetLeft, parent.offsetTop));
parent = parent.offsetParent;
}
return offset;
},
southeastOffset : function(element, isRecursive) {
return Coordinates.northwestOffset(element, isRecursive).plus(
new Coordinate(element.offsetWidth, element.offsetHeight));
},
fixEvent : function(event) {
event.windowCoordinate = new Coordinate(event.clientX, event.clientY);
}
};
function Coordinate(x, y) {
this.x = x;
this.y = y;
}
Coordinate.prototype.toString = function() {
return "(" + this.x + "," + this.y + ")";
}
Coordinate.prototype.plus = function(that) {
return new Coordinate(this.x + that.x, this.y + that.y);
}
Coordinate.prototype.minus = function(that) {
return new Coordinate(this.x - that.x, this.y - that.y);
}
Coordinate.prototype.distance = function(that) {
var deltaX = this.x - that.x;
var deltaY = this.y - that.y;
return Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));
}
Coordinate.prototype.max = function(that) {
var x = Math.max(this.x, that.x);
var y = Math.max(this.y, that.y);
return new Coordinate(x, y);
}
Coordinate.prototype.constrain = function(min, max) {
if (min.x > max.x || min.y > max.y) return this;
var x = this.x;
var y = this.y;
if (min.x != null) x = Math.max(x, min.x);
if (max.x != null) x = Math.min(x, max.x);
if (min.y != null) y = Math.max(y, min.y);
if (max.y != null) y = Math.min(y, max.y);
return new Coordinate(x, y);
}
Coordinate.prototype.reposition = function(element) {
element.style["top"] = this.y + "px";
element.style["left"] = this.x + "px";
}
Coordinate.prototype.equals = function(that) {
if (this == that) return true;
if (!that || that == null) return false;
return this.x == that.x && this.y == that.y;
}
// returns true of this point is inside specified box
Coordinate.prototype.inside = function(northwest, southeast) {
if ((this.x >= northwest.x) && (this.x <= southeast.x) &&
(this.y >= northwest.y) && (this.y <= southeast.y)) {
return true;
}
return false;
}
/*
* drag.js - click & drag DOM elements
*
* originally based on Youngpup's dom-drag.js, www.youngpup.net
*/
/**********************************************************
Further modified from the example by Tim Taylor
http://tool-man.org/examples/sorting.html
Changed onMouseMove where it calls group.onDrag and then
adjusts the offset for changes to the DOM. If the item
being moved changed parents it would be off so changed to
get the absolute offset (recursive northwestOffset).
**********************************************************/
var Drag = {
BIG_Z_INDEX : 10000,
group : null,
isDragging : false,
makeDraggable : function(group) {
group.handle = group;
group.handle.group = group;
group.minX = null;
group.minY = null;
group.maxX = null;
group.maxY = null;
group.threshold = 0;
group.thresholdY = 0;
group.thresholdX = 0;
group.onDragStart = new Function();
group.onDragEnd = new Function();
group.onDrag = new Function();
// TODO: use element.prototype.myFunc
group.setDragHandle = Drag.setDragHandle;
group.setDragThreshold = Drag.setDragThreshold;
group.setDragThresholdX = Drag.setDragThresholdX;
group.setDragThresholdY = Drag.setDragThresholdY;
group.constrain = Drag.constrain;
group.constrainVertical = Drag.constrainVertical;
group.constrainHorizontal = Drag.constrainHorizontal;
group.onmousedown = Drag.onMouseDown;
},
constrainVertical : function() {
var nwOffset = Coordinates.northwestOffset(this, true);
this.minX = nwOffset.x;
this.maxX = nwOffset.x;
},
constrainHorizontal : function() {
var nwOffset = Coordinates.northwestOffset(this, true);
this.minY = nwOffset.y;
this.maxY = nwOffset.y;
},
constrain : function(nwPosition, sePosition) {
this.minX = nwPosition.x;
this.minY = nwPosition.y;
this.maxX = sePosition.x;
this.maxY = sePosition.y;
},
setDragHandle : function(handle) {
if (handle && handle != null) {
this.handle = handle;
} else {
this.handle = this;
}
this.handle.group = this;
this.onmousedown = null;
// this.onclick = Drag.toggleMe;
// this.handle.onclick = Drag.toggleMe;
this.handle.onmousedown = Drag.onMouseDown;
},
toggleMe : function(str) {
alert('Toggle: ' + str);
},
setDragThreshold : function(threshold) {
if (isNaN(parseInt(threshold))) return;
this.threshold = threshold;
},
setDragThresholdX : function(threshold) {
if (isNaN(parseInt(threshold))) return;
this.thresholdX = threshold;
},
setDragThresholdY : function(threshold) {
if (isNaN(parseInt(threshold))) return;
this.thresholdY = threshold;
},
onMouseDown : function(event) {
event = Drag.fixEvent(event);
Drag.group = this.group;
var group = this.group;
var mouse = event.windowCoordinate;
var nwOffset = Coordinates.northwestOffset(group, true);
var nwPosition = Coordinates.northwestPosition(group);
var sePosition = Coordinates.southeastPosition(group);
var seOffset = Coordinates.southeastOffset(group, true);
group.originalOpacity = group.style.opacity;
group.originalZIndex = group.style.zIndex;
group.initialWindowCoordinate = mouse;
// TODO: need a better name, but don't yet understand how it
// participates in the magic while dragging
group.dragCoordinate = mouse;
Drag.showStatus(mouse, nwPosition, sePosition, nwOffset, seOffset);
group.onDragStart(nwPosition, sePosition, nwOffset, seOffset);
// TODO: need better constraint API
if (group.minX != null)
group.minMouseX = mouse.x - nwPosition.x +
group.minX - nwOffset.x;
if (group.maxX != null)
group.maxMouseX = group.minMouseX + group.maxX - group.minX;
if (group.minY != null)
group.minMouseY = mouse.y - nwPosition.y +
group.minY - nwOffset.y;
if (group.maxY != null)
group.maxMouseY = group.minMouseY + group.maxY - group.minY;
group.mouseMin = new Coordinate(group.minMouseX, group.minMouseY);
group.mouseMax = new Coordinate(group.maxMouseX, group.maxMouseY);
document.onmousemove = Drag.onMouseMove;
document.onmouseup = Drag.onMouseUp;
return false;
},
showStatus : function(mouse, nwPosition, sePosition, nwOffset, seOffset) {
/*window.status =
"mouse: " + mouse.toString() + " " +
"NW pos: " + nwPosition.toString() + " " +
"SE pos: " + sePosition.toString() + " " +
"NW offset: " + nwOffset.toString() + " " +
"SE offset: " + seOffset.toString();*/
},
onMouseMove : function(event) {
event = Drag.fixEvent(event);
var group = Drag.group;
var mouse = event.windowCoordinate;
var nwOffset = Coordinates.northwestOffset(group, true);
var nwPosition = Coordinates.northwestPosition(group);
var sePosition = Coordinates.southeastPosition(group);
var seOffset = Coordinates.southeastOffset(group, true);
Drag.showStatus(mouse, nwPosition, sePosition, nwOffset, seOffset);
if (!Drag.isDragging) {
if (group.threshold > 0) {
var distance = group.initialWindowCoordinate.distance(
mouse);
if (distance < group.threshold) return true;
} else if (group.thresholdY > 0) {
var deltaY = Math.abs(group.initialWindowCoordinate.y - mouse.y);
if (deltaY < group.thresholdY) return true;
} else if (group.thresholdX > 0) {
var deltaX = Math.abs(group.initialWindowCoordinate.x - mouse.x);
if (deltaX < group.thresholdX) return true;
}
Drag.isDragging = true;
group.style["zIndex"] = Drag.BIG_Z_INDEX;
group.style["opacity"] = 0.75;
}
// TODO: need better constraint API
var adjusted = mouse.constrain(group.mouseMin, group.mouseMax);
nwPosition = nwPosition.plus(adjusted.minus(group.dragCoordinate));
nwPosition.reposition(group);
group.dragCoordinate = adjusted;
// once dragging has started, the position of the group
// relative to the mouse should stay fixed. They can get out
// of sync if the DOM is manipulated while dragging, so we
// correct the error here
//
// TODO: what we really want to do is find the offset from
// our corner to the mouse coordinate and adjust to keep it
// the same
// changed to be recursive/use absolute offset for corrections
var offsetBefore = Coordinates.northwestOffset(group, true);
group.onDrag(nwPosition, sePosition, nwOffset, seOffset);
var offsetAfter = Coordinates.northwestOffset(group, true);
if (!offsetBefore.equals(offsetAfter)) {
var errorDelta = offsetBefore.minus(offsetAfter);
nwPosition = Coordinates.northwestPosition(group).plus(errorDelta);
nwPosition.reposition(group);
}
return false;
},
onMouseUp : function(event) {
event = Drag.fixEvent(event);
var group = Drag.group;
var mouse = event.windowCoordinate;
var nwOffset = Coordinates.northwestOffset(group, true);
var nwPosition = Coordinates.northwestPosition(group);
var sePosition = Coordinates.southeastPosition(group);
var seOffset = Coordinates.southeastOffset(group, true);
document.onmousemove = null;
document.onmouseup = null;
group.onDragEnd(nwPosition, sePosition, nwOffset, seOffset);
if (Drag.isDragging) {
// restoring zIndex before opacity avoids visual flicker in Firefox
group.style["zIndex"] = group.originalZIndex;
group.style["opacity"] = group.originalOpacity;
}
Drag.group = null;
Drag.isDragging = false;
return false;
},
fixEvent : function(event) {
if (typeof event == 'undefined') event = window.event;
Coordinates.fixEvent(event);
return event;
}
};
/**********************************************************
Adapted from the sortable lists example by Tim Taylor
http://tool-man.org/examples/sorting.html
Modified by Tom Westcott : http://www.cyberdummy.co.uk
**********************************************************/
var DragDrop = {
firstContainer : null,
lastContainer : null,
parent_id : null,
parent_group : null,
makeListContainer : function(list, group) {
// each container becomes a linked list node
if (this.firstContainer == null) {
this.firstContainer = this.lastContainer = list;
list.previousContainer = null;
list.nextContainer = null;
} else {
list.previousContainer = this.lastContainer;
list.nextContainer = null;
this.lastContainer.nextContainer = list;
this.lastContainer = list;
}
// these functions are called when an item is draged over
// a container or out of a container bounds. onDragOut
// is also called when the drag ends with an item having
// been added to the container
list.onDragOver = new Function();
list.onDragOut = new Function();
list.onDragDrop = new Function();
list.group = group;
var items = list.getElementsByTagName( "li" );
for (var i = 0; i < items.length; i++) {
DragDrop.makeItemDragable(items[i]);
}
},
serData : function ( group, theid ) {
var container = DragDrop.firstContainer;
var j = 0;
var string = "";
while (container != null) {
if(theid != null && container.id != theid) {
container = container.nextContainer;
continue;
}
if(group != null && container.group != group) {
container = container.nextContainer;
continue;
}
j ++;
if (j > 1) {
string += ":";
}
string += container.id;
var items = container.getElementsByTagName( "li" );
string += "(";
for (var i = 0; i < items.length; i++) {
if(i > 0) {
string += ",";
}
string += items[i].id;
}
string += ")";
container = container.nextContainer;
}
return string;
},
makeItemDragable : function(item) {
Drag.makeDraggable(item);
item.setDragThreshold(5);
// tracks if the item is currently outside all containers
item.isOutside = false;
item.onDragStart = DragDrop.onDragStart;
item.onDrag = DragDrop.onDrag;
item.onDragEnd = DragDrop.onDragEnd;
item.setDragHandle(document.getElementById('g' + item.id));
},
onDragStart : function(nwPosition, sePosition, nwOffset, seOffset) {
// update all container bounds, since they may have changed
// on a previous drag
//
// could be more smart about when to do this
var container = DragDrop.firstContainer;
while (container != null) {
container.northwest = Coordinates.northwestOffset( container, true );
container.southeast = Coordinates.southeastOffset( container, true );
container = container.nextContainer;
}
// item starts out over current parent
this.parentNode.onDragOver();
parent_id = this.parentNode.id;
parent_group = this.parentNode.group;
},
onDrag : function(nwPosition, sePosition, nwOffset, seOffset) {
// check if we were nowhere
if (this.isOutside) {
// check each container to see if in its bounds
var container = DragDrop.firstContainer;
while (container != null) {
if ((nwOffset.inside( container.northwest, container.southeast ) ||
seOffset.inside( container.northwest, container.southeast )) && container.group == parent_group) {
// we're inside this one
container.onDragOver();
this.isOutside = false;
// since isOutside was true, the current parent is a
// temporary clone of some previous container node and
// it needs to be removed from the document
var tempParent = this.parentNode;
tempParent.removeChild( this );
container.appendChild( this );
tempParent.parentNode.removeChild( tempParent );
break;
}
container = container.nextContainer;
}
// we're still not inside the bounds of any container
if (this.isOutside)
return;
// check if we're outside our parent's bounds
} else if (!(nwOffset.inside( this.parentNode.northwest, this.parentNode.southeast ) ||
seOffset.inside( this.parentNode.northwest, this.parentNode.southeast ))) {
this.parentNode.onDragOut();
this.isOutside = true;
// check if we're inside a new container's bounds
var container = DragDrop.firstContainer;
while (container != null) {
if ((nwOffset.inside( container.northwest, container.southeast ) ||
seOffset.inside( container.northwest, container.southeast )) && container.group == parent_group) {
// we're inside this one
container.onDragOver();
this.isOutside = false;
this.parentNode.removeChild( this );
container.appendChild( this );
break;
}
container = container.nextContainer;
}
// if we're not in any container now, make a temporary clone of
// the previous container node and add it to the document
if (this.isOutside) {
var tempParent = this.parentNode.cloneNode( false );
this.parentNode.removeChild( this );
tempParent.appendChild( this );
// body puts a border or item at bottom of page if do not have this
tempParent.style.border = 0;
document.getElementsByTagName( "body" ).item(0).appendChild( tempParent );
return;
}
}
// if we get here, we're inside some container bounds, so we do
// everything the original dragsort script did to swap us into the
// correct position
var parent = this.parentNode;
var item = this;
var next = DragUtils.nextItem(item);
while (next != null && this.offsetTop >= next.offsetTop - 2) {
var item = next;
var next = DragUtils.nextItem(item);
}
if (this != item) {
DragUtils.swap(this, next);
return;
}
var item = this;
var previous = DragUtils.previousItem(item);
while (previous != null && this.offsetTop <= previous.offsetTop + 2) {
var item = previous;
var previous = DragUtils.previousItem(item);
}
if (this != item) {
DragUtils.swap(this, item);
return;
}
},
onDragEnd : function(nwPosition, sePosition, nwOffset, seOffset) {
// if the drag ends and we're still outside all containers
// it's time to remove ourselves from the document or add
// to the trash bin
if (this.isOutside) {
var container = DragDrop.firstContainer;
while (container != null) {
if (container.id == parent_id) {
break;
}
container = container.nextContainer;
}
this.isOutside = false;
this.parentNode.removeChild( this );
container.appendChild( this );
this.style["top"] = "0px";
this.style["left"] = "0px";
//var container = DragDrop.firstContainer;
//container.appendChild( this );
return;
}
this.parentNode.onDragOut();
this.parentNode.onDragDrop();
this.style["top"] = "0px";
this.style["left"] = "0px";
}
};
var DragUtils = {
swap : function(item1, item2) {
var parent = item1.parentNode;
parent.removeChild(item1);
parent.insertBefore(item1, item2);
item1.style["top"] = "0px";
item1.style["left"] = "0px";
},
nextItem : function(item) {
var sibling = item.nextSibling;
while (sibling != null) {
if (sibling.nodeName == item.nodeName) return sibling;
sibling = sibling.nextSibling;
}
return null;
},
previousItem : function(item) {
var sibling = item.previousSibling;
while (sibling != null) {
if (sibling.nodeName == item.nodeName) return sibling;
sibling = sibling.previousSibling;
}
return null;
}
};
/*************************
* Custom Serendipity code
*************************/
function pluginMoverInit() {
var list = document.getElementById("left_col");
DragDrop.makeListContainer(list, 'g1');
list.onDragOver = function() { this.style["border"] = "1px solid #4d759b"; };
list.onDragOut = function() { this.style["border"] = "none"; };
list = document.getElementById("hide_col");
DragDrop.makeListContainer(list, 'g1');
list.onDragOver = function() { this.style["border"] = "1px solid #4d759b"; };
list.onDragOut = function() {this.style["border"] = "none"; };
list = document.getElementById("right_col");
DragDrop.makeListContainer(list, 'g1');
list.onDragOver = function() { this.style["border"] = "1px solid #4d759b"; };
list.onDragOut = function() {this.style["border"] = "none"; };
}
function pluginMoverInitEvent() {
var list = document.getElementById("event_col");
DragDrop.makeListContainer(list, 'g1');
list.onDragOver = function() { this.style["border"] = "1px solid #4d759b"; };
list.onDragOut = function() { this.style["border"] = "none"; };
list = document.getElementById("eventh_col");
DragDrop.makeListContainer(list, 'g1');
list.onDragOver = function() { this.style["border"] = "1px solid #4d759b"; };
list.onDragOut = function() {this.style["border"] = "none"; };
}
function pluginMovergetSort() {
order = document.getElementById("order");
order.value = DragDrop.serData('g1', null);
return order.value;
}
function pluginMovergetSortEvent() {
order = document.getElementById("eventorder");
order.value = DragDrop.serData('g1', null);
return order.value;
}
/**************************************************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
**************************************************
* 10.28.2001 - fixed minor bug where events
* sometimes fired off the handle, not the root.
**************************************************/
var DOMDrag = {
obj : null,
init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper) {
o.onmousedown = DOMDrag.start;
o.hmode = bSwapHorzRef ? false : true ;
o.vmode = bSwapVertRef ? false : true ;
o.root = oRoot && oRoot != null ? oRoot : o ;
if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left = "0px";
if (o.vmode && isNaN(parseInt(o.root.style.top ))) o.root.style.top = "0px";
if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px";
if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";
o.minX = typeof minX != 'undefined' ? minX : null;
o.minY = typeof minY != 'undefined' ? minY : null;
o.max = typeof maxX != 'undefined' ? maxX : null;
o.maxY = typeof maxY != 'undefined' ? maxY : null;
o.xMapper = fXMapper ? fXMapper : null;
o.yMapper = fYMapper ? fYMapper : null;
o.root.onDragStart = new Function();
o.root.onDragEnd = new Function();
o.root.onDrag = new Function();
},
start : function(e) {
var o = DOMDrag.obj = this;
e = DOMDrag.fixE(e);
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
o.root.onDragStart(x, y);
o.lastMouseX = e.clientX;
o.lastMouseY = e.clientY;
if (o.hmode) {
if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
} else {
if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
}
if (o.vmode) {
if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
} else {
if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
}
document.onmousemove = DOMDrag.drag;
document.onmouseup = DOMDrag.end;
return false;
},
drag : function(e) {
e = DOMDrag.fixE(e);
var o = DOMDrag.obj;
var ey = e.clientY;
var ex = e.clientX;
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
var nx, ny;
if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
if (o.xMapper) nx = o.xMapper(y)
else if (o.yMapper) ny = o.yMapper(x)
DOMDrag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
DOMDrag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
DOMDrag.obj.lastMouseX = ex;
DOMDrag.obj.lastMouseY = ey;
DOMDrag.obj.root.onDrag(nx, ny);
return false;
},
end : function() {
document.onmousemove = null;
document.onmouseup = null;
DOMDrag.obj.root.onDragEnd( parseInt(DOMDrag.obj.root.style[DOMDrag.obj.hmode ? "left" : "right"]),
parseInt(DOMDrag.obj.root.style[DOMDrag.obj.vmode ? "top" : "bottom"]));
DOMDrag.obj = null;
},
fixE : function(e) {
if (typeof e == 'undefined') e = window.event;
if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
return e;
}
};

View File

@ -1,302 +0,0 @@
/**************************************************
* imgedit.js
* 2003-10-17
* www.sonnd.com / www.supergarv.de
*
* COPYRIGHT (C) BY sonnd / Garvin Hicking
* Published as GPL. Copyright notice has to stay in effect.
**************************************************/
// Gets a position of an element on a certain axis
function imgedit_position(element, axis) {
if (axis == 'x') {
return (element.x) ? element.x : imgedit_subposition(element, 'Left');
} else {
return (element.y) ? element.y : imgedit_subposition(element, 'Top');
}
}
// Calculate possible referenced subpositions to really get the absolute position.
function imgedit_subposition(element, axis) {
currentPos = 0;
while (element != null) {
currentPos += element['offset' + axis];
element = element.offsetParent;
}
return currentPos;
}
// Places the cropping area to a certain X/Y coordinate. Then clips the overlay picture correspondingly
function imgedit_placeArea(new_x, new_y) {
o_area.style.left = new_x + 'px';
o_area.style.top = new_y + 'px';
o_overlay.style.clip = "rect(" + (new_y+area_border) + " " + (new_x+inner_area_x) + " " + (new_y+inner_area_y) + " " + (new_x+area_border) + ")";
}
// Set correct restraints of the cropping area inside which it can move
function imgedit_setMax(new_width, new_height) {
o_area.maxX = imgedit_getMax('x', new_width, area_orientation);
o_area.maxY = imgedit_getMax('y', new_height, area_orientation);
}
// Toggle the current area orientation to the opposite one
function imgedit_areaOrientation() {
if (area_orientation == 'h') {
imgedit_toggleAreaOrientation('v');
} else {
imgedit_toggleAreaOrientation('h');
}
return false;
}
// Toggle the current area orientation
function imgedit_toggleAreaOrientation(new_orientation) {
if (new_orientation == area_orientation) {
return;
}
// Display the corresponding cropping area and hide the other one.
if (new_orientation == 'h') {
area_orientation = 'h';
o_area = o_harea;
area_x = harea_x;
area_y = harea_y;
inner_area_x = inner_harea_x;
inner_area_y = inner_harea_y;
o_varea.style.visibility = 'hidden';
o_area.style.left = o_varea.style.left;
o_area.style.top = o_varea.style.top;
o_area.style.visibility = 'visible';
} else {
area_orientation = 'v';
o_area = o_varea;
area_x = varea_x;
area_y = varea_y;
inner_area_x = inner_varea_x;
inner_area_y = inner_varea_y;
o_harea.style.visibility = 'hidden';
o_area.style.left = o_harea.style.left;
o_area.style.top = o_harea.style.top;
o_area.style.visibility = 'visible';
}
// Set the new clipping inside the cropping area
imgedit_setMax(o_backdrop.width, o_backdrop.height);
o_overlay.style.clip = "rect(" + (parseInt(o_area.style.top)+area_border) + " " + (parseInt(o_area.style.left)+inner_area_x) + " " + (parseInt(o_area.style.top)+inner_area_y) + " " + (parseInt(o_area.style.left)+area_border) + ")";
}
// Zoom the image. Takes a given stepping (can be negative)
function imgedit_zoom(step) {
pos = parseInt(o_zoombutton.style.top);
if (pos+step > slider_top && pos+step < slider_bottom) {
imgedit_zoomTo(position(o_zoombutton, 'y') + step);
o_zoombutton.style.top = pos + step + 'px';
}
return false;
}
// Automatically resize the window to fit cropping area
function imgedit_autoSize(flip) {
// First find the largest side
if (real_x > real_y) {
// The image is a horizontal one. Resize height to fit.
fitmode = 'height';
} else {
// The image is a vertical one. Resize width to fit.
fitmode = 'width';
}
// Check if the size should be flipped. If it is 'true' the image will completely fit inside the cropping area.
// If it is 'false', it will only fit one side inside the cropping area
if (flip == 'true') {
if (fitmode == 'width') {
fitmode = 'height';
} else {
fitmode = 'width';
}
}
// Get new width/height of the image
if (fitmode == 'width') {
new_width = inner_area_x - area_border;
ratio = new_width / real_x;
new_height = real_y * ratio;
} else {
new_height = inner_area_y - area_border;
ratio = new_height / real_y;
new_width = real_x * ratio;
}
// Place cropping area to (0|0), because the image has been resized?
imgedit_scaleIMG(new_width, new_height);
imgedit_placeArea(-area_border, -area_border);
// Place the slider to corresponding ratio.
o_zoombutton.style.top = slider_bottom - parseInt(ratio/2 * (slider_middle/3)) + 'px';
// Adjust some settings inside the HTML form.
document.getElementById('scaletext').style.visibility = 'visible';
document.getElementById('autoguess_clicked').value = 'true';
new_ratio = ratio;
return false;
}
// Get the maximum width/height for a certain axis the cropping area is allowed to move to
function imgedit_getMax(axis, pixels, area_orientation) {
// Which is the size we should get?
if (area_orientation == 'h') {
maxarea_x = harea_x;
maxarea_y = harea_y
} else if (area_orientation == 'v') {
maxarea_x = varea_x;
maxarea_y = varea_y
} else {
maxarea_x = area_x;
maxarea_y = area_y
}
if (axis == 'x') {
value = pixels - maxarea_x + area_border;
} else {
value = pixels - maxarea_y + area_border;
}
if (value < -area_border) {
value = -area_border;
}
return value;
}
// Scales the background image to a certain size
function imgedit_scaleIMG(new_width, new_height) {
o_backdrop.width = new_width;
o_backdrop.height = new_height;
o_overlay.width = new_width;
o_overlay.height = new_height;
imgedit_setMax(new_width, new_height);
return true;
}
// Zooms the image to a certain stepping
function imgedit_zoomTo(y) {
current = slider_bottom - y;
temp_height = current - slider_middle;
temp_ratio = temp_height / (slider_middle*3);
if (current > slider_middle) {
// make smaller than 100%
new_ratio = 1 + (temp_ratio+temp_ratio);
} else {
// make larger than 100%
new_ratio = 1 + (temp_ratio+temp_ratio);
}
new_width = parseInt(real_x * new_ratio);
new_height = parseInt(real_y * new_ratio);
imgedit_scaleIMG(new_width, new_height);
return true;
}
// OnSubmit catch. Parses current JS values into the form
function imgedit_getCoordinates() {
document.getElementById('zoombox_x').value = parseInt(o_area.style.left);
document.getElementById('zoombox_y').value = parseInt(o_area.style.top);
document.getElementById('zoombox_factor').value = new_ratio;
document.getElementById('area_orientation').value = area_orientation;
return true;
}
// Initializes everything
function imgedit_init(zoombox_width, init_area_border, pad_left, pad_top, init_area_orientation) {
// Store objects
o_backdrop = document.getElementById("backdrop");
o_overlay = document.getElementById("overlay");
o_harea = document.getElementById("harea");
o_varea = document.getElementById("varea");
o_zoombutton = document.getElementById("zoombutton");
// Object sizes
full_x = parseInt(o_backdrop.width);
full_y = parseInt(o_backdrop.height);
real_x = document.getElementById('real_img_width').value;
real_y = document.getElementById('real_img_height').value;
area_border = init_area_border;
harea_x = parseInt(o_harea.width);
harea_y = parseInt(o_harea.height);
varea_x = parseInt(o_varea.width);
varea_y = parseInt(o_varea.height);
inner_harea_x = harea_x - area_border;
inner_harea_y = harea_y - area_border;
inner_varea_x = varea_x - area_border;
inner_varea_y = varea_y - area_border;
new_ratio = document.getElementById('zoombox_factor').value;
slider_width = 10;
slider_top = 0;
slider_bottom = 95;
slider_space = slider_bottom - slider_top;
slider_middle = slider_space / 2;
zoombox_left = -(o_zoombutton.width/2) + (slider_width/2);
// Make objects dragabble
DOMDrag.init(o_harea, null, -area_border, imgedit_getMax('x', full_x, 'h'), -area_border, imgedit_getMax('y', full_y, 'h'));
DOMDrag.init(o_varea, null, -area_border, imgedit_getMax('x', full_x, 'v'), -area_border, imgedit_getMax('y', full_y, 'v'));
DOMDrag.init(o_zoombutton, null, zoombox_left, zoombox_left, slider_top, slider_bottom);
o_harea.onDrag = function (x, y) {
o_overlay.style.clip = "rect(" + (y+area_border) + " " + (x+inner_harea_x) + " " + (y+inner_harea_y) + " " + (x+area_border) + ")";
}
o_varea.onDrag = function (x, y) {
o_overlay.style.clip = "rect(" + (y+area_border) + " " + (x+inner_varea_x) + " " + (y+inner_varea_y) + " " + (x+area_border) + ")";
}
o_zoombutton.onDrag = function (x, y) {
imgedit_zoomTo(y);
}
o_zoombutton.style.left = zoombox_left + 'px';
zf = document.getElementById('zoombox_factor').value;
if (zf != 1) {
o_zoombutton.style.top = slider_bottom - parseInt(zf/2 * (slider_middle/3)) + 'px';
} else {
o_zoombutton.style.top = slider_top + slider_middle + 'px';
}
o_zoombutton.style.visibility = 'visible';
o_harea.style.cursor = 'move';
o_harea.style.left = pad_left + 'px';
o_harea.style.top = pad_top + 'px';
o_varea.style.cursor = 'move';
o_varea.style.left = pad_left + 'px';
o_varea.style.top = pad_top + 'px';
area_orientation = '';
imgedit_toggleAreaOrientation(init_area_orientation);
}