diff options
Diffstat (limited to 'js/dojo/dojox/dnd')
| -rw-r--r-- | js/dojo/dojox/dnd/BoundingBoxController.js | 140 | ||||
| -rw-r--r-- | js/dojo/dojox/dnd/README | 22 | ||||
| -rw-r--r-- | js/dojo/dojox/dnd/Selector.js | 211 |
3 files changed, 373 insertions, 0 deletions
diff --git a/js/dojo/dojox/dnd/BoundingBoxController.js b/js/dojo/dojox/dnd/BoundingBoxController.js new file mode 100644 index 0000000..fb7b688 --- /dev/null +++ b/js/dojo/dojox/dnd/BoundingBoxController.js @@ -0,0 +1,140 @@ +//>>built +define("dojox/dnd/BoundingBoxController", ["dojo", "dojox"], function(dojo, dojox) { + + return dojo.declare('dojox.dnd.BoundingBoxController', null, { + + // summary: Allows the user draw bounding boxes around nodes on the page. + // Publishes to the "/dojox/dnd/bounding" topic to tell the selector to check + // to see whether any dnd items fall within the coordinates of the bounding box + + // x,y start and end coordinates for the bounding box + _startX: null, + _startY: null, + _endX: null, + _endY: null, + + constructor: function(sources, domNode) { + // summary: + // Sets mouse handlers for the document to capture when a user + // is trying to draw a bounding box. + // sources: Array: + // an array of dojox.dnd.Selectors which need to be aware of + // the positioning of the bounding box. + // domNode: String|DomNode: + // the DOM node or id which represents the bounding box on the page. + this.events = [ + dojo.connect(dojo.doc, 'onmousedown', this, '_onMouseDown'), + dojo.connect(dojo.doc, 'onmouseup', this, '_onMouseUp'), + // cancel text selection and text dragging + //dojo.connect(dojo.doc, "ondragstart", dojo.stopEvent), + //dojo.connect(dojo.doc, "onselectstart", dojo.stopEvent), + // when a user is scrolling using a scrollbar, don't draw the bounding box. + dojo.connect(dojo.doc, 'onscroll', this, '_finishSelecting') + ]; + // set up a subscription so the client can easily cancel a user drawing a bounding box. + this.subscriptions = [ + dojo.subscribe('/dojox/bounding/cancel', this, '_finishSelecting') + ]; + dojo.forEach(sources, function(item) { + // listen for "/dojox/dnd/bounding" events eminating from the bounding box. + // for each of the dojox.dnd.selectors passed in args. + if (item.selectByBBox) { + this.subscriptions.push(dojo.subscribe('/dojox/dnd/bounding', item, 'selectByBBox')); + } + }, this); + this.domNode = dojo.byId(domNode); + dojo.style(this.domNode, { + position: 'absolute', + display: 'none' + }); + }, + + destroy: function() { + // summary: + // prepares this object to be garbage-collected + dojo.forEach(this.events, dojo.disconnect); + dojo.forEach(this.subscriptions, dojo.unsubscribe); + this.domNode = null; + }, + + shouldStartDrawingBox: function(evt) { + // summary: Override-able by the client as an extra check to ensure that a bounding + // box should begin to be drawn. If the client has any preconditions to when a + // bounding box should be drawn, they should be included in this method. + // evt: Object: the mouse event which caused this callback to fire. + return true; + }, + + boundingBoxIsViable: function(evt) { + // summary: Override-able by the client as an extra check to ensure that a bounding + // box is viable. In some instances, it might not make sense that + // a mouse down -> mouse move -> mouse up interaction represents a bounding box. + // For example, if a dialog is open the client might want to suppress a bounding + // box. This function could be used by the client to ensure that a bounding box is only + // drawn on the document when certain conditions are met. + // evt: Object: the mouse event which caused this callback to fire. + return true; + }, + + _onMouseDown: function(evt) { + // summary: Executed when the user mouses down on the document. Resets the + // this._startX and this._startY member variables. + // evt: Object: the mouse event which caused this callback to fire. + if (this.shouldStartDrawingBox(evt) && dojo.mouseButtons.isLeft(evt)) { + if (this._startX == null) { + this._startX = evt.clientX; + this._startY = evt.clientY; + } + this.events.push( + dojo.connect(dojo.doc, 'onmousemove', this, '_onMouseMove') + ); + } + }, + + _onMouseMove: function(evt) { + // summary: Executed when the user moves the mouse over the document. Delegates to + // this._drawBoundingBox if the user is trying to draw a bounding box. + // whether the user was drawing a bounding box and publishes to the + // "/dojox/dnd/bounding" topic if the user is finished drawing their bounding box. + // evt: Object: the mouse event which caused this callback to fire. + this._endX = evt.clientX; + this._endY = evt.clientY; + this._drawBoundingBox(); + }, + + _onMouseUp: function(evt) { + // summary: Executed when the users mouses up on the document. Checks to see + // whether the user was drawing a bounding box and publishes to the + // "/dojox/dnd/bounding" topic if the user is finished drawing their bounding box. + // evt: Object: the mouse event which caused this callback to fire. + if (this._endX !== null && this.boundingBoxIsViable(evt)) { + // the user has moused up ... tell the selector to check to see whether + // any nodes within the bounding box need to be selected. + dojo.publish('/dojox/dnd/bounding', [this._startX, this._startY, this._endX, this._endY]); + } + this._finishSelecting(); + }, + + _finishSelecting: function() { + // summary: hide the bounding box and reset for the next time around + if (this._startX !== null) { + dojo.disconnect(this.events.pop()); + dojo.style(this.domNode, 'display', 'none'); + this._startX = null; + this._endX = null; + } + }, + + _drawBoundingBox: function() { + // summary: draws the bounding box over the document. + dojo.style(this.domNode, { + left: Math.min(this._startX, this._endX) + 'px', + top: Math.min(this._startY, this._endY) + 'px', + width: Math.abs(this._startX - this._endX) + 'px', + height: Math.abs(this._startY - this._endY) + 'px', + display: '' + }); + } + } + ); +});
\ No newline at end of file diff --git a/js/dojo/dojox/dnd/README b/js/dojo/dojox/dnd/README new file mode 100644 index 0000000..3e19a0f --- /dev/null +++ b/js/dojo/dojox/dnd/README @@ -0,0 +1,22 @@ +------------------------------------------------------------------------------- +dojox.dnd Simple extensions to dojo.dnd. +------------------------------------------------------------------------------- +Version 1.0 +Release date: 2/1/2010 +------------------------------------------------------------------------------- +Project state: beta +------------------------------------------------------------------------------- +Credits + +Sean O' Shea +Arech +Eugene Lazutkin +------------------------------------------------------------------------------- +Project description + +Extending and augmenting dojo.dnd, a clearing house for future dojo.dnd +additions. +------------------------------------------------------------------------------- +Dependencies + + require Dojo Core diff --git a/js/dojo/dojox/dnd/Selector.js b/js/dojo/dojox/dnd/Selector.js new file mode 100644 index 0000000..58a9633 --- /dev/null +++ b/js/dojo/dojox/dnd/Selector.js @@ -0,0 +1,211 @@ +//>>built +define("dojox/dnd/Selector", ["dojo", "dojox", "dojo/dnd/Selector"], function(dojo, dojox) { + + return dojo.declare('dojox.dnd.Selector', dojo.dnd.Selector, { + + conservative: true, + + isSelected: function(node) { + // summary: + // checks if node is selected + // node: String|DomNode: + // Node to check (id or DOM Node) + var id = dojo.isString(node) ? node : node.id, + item = this.getItem(id); + return item && this.selected[id]; // Boolean + }, + + selectNode: function(node, add) { + // summary: + // selects a node + // node: String|DomNode: + // Node to select (id or DOM Node) + // add: Boolean?: + // If true, node is added to selection, otherwise current + // selection is removed, and node will be the only selection. + if (!add) { + this.selectNone(); + } + var id = dojo.isString(node) ? node : node.id, + item = this.getItem(id); + if (item) { + this._removeAnchor(); + this.anchor = dojo.byId(node); + this._addItemClass(this.anchor, 'Anchor'); + this.selection[id] = 1; + this._addItemClass(this.anchor, 'Selected'); + } + return this; // self + }, + + deselectNode: function(node) { + // summary: + // deselects a node + // node: String|DomNode: + // Node to deselect (id or DOM Node) + var id = dojo.isString(node) ? node : node.id, + item = this.getItem(id); + if (item && this.selection[id]) { + if (this.anchor === dojo.byId(node)) { + this._removeAnchor(); + } + delete this.selection[id]; + this._removeItemClass(this.anchor, 'Selected'); + } + return this; // self + }, + + selectByBBox: function(left, top, right, bottom, add) { + // summary: + // selects nodes by bounding box + // left: Number: + // Left coordinate of the bounding box + // top: Number: + // Top coordinate of the bounding box + // right: Number: + // Right coordinate of the bounding box + // bottom: Number: + // Bottom coordinate of the bounding box + // add: Boolean?: + // If true, node is added to selection, otherwise current + // selection is removed, and node will be the only selection. + + // user has drawn a bounding box ... time to see whether any dom nodes + // in this container satisfy the bounding box range. + if (!add) { + this.selectNone(); + } + this.forInItems(function(data, id) { + var node = dojo.byId(id); + if (node && this._isBoundedByBox(node, left, top, right, bottom)) { + this.selectNode(id, true); + } + }, this); + return this; // self + }, + + _isBoundedByBox: function(node, left, top, right, bottom) { + // summary: + // figures out whether certain coodinates bound a particular + // dom node. + // node: String|DomNode: + // Node to check (id or DOM Node) + // left: Number: + // Left coordinate of the bounding box + // top: Number: + // Top coordinate of the bounding box + // right: Number: + // Right coordinate of the bounding box + // bottom: Number: + // Bottom coordinate of the bounding box + return this.conservative ? this._conservativeBBLogic(node, left, top, right, bottom) : this._liberalBBLogic(node, left, top, right, bottom); + }, + + shift: function(toNext, add) { + // summary: + // shifts the currently selected dnd item forwards and backwards. + // One possible use would be to allow a user select different + // dnd items using the right and left keys. + // toNext: Boolean: + // If true, we select the next node, otherwise the previous one. + // add: Boolean?: + // If true, add to selection, otherwise current selection is + // removed before adding any nodes. + var selectedNodes = this.getSelectedNodes(); + if (selectedNodes && selectedNodes.length) { + // only delegate to selectNode if at least one node is selected. + // If multiple nodes are selected assume that we go with + // the last selected node. + this.selectNode(this._getNodeId(selectedNodes[selectedNodes.length - 1].id, toNext), add); + } + }, + + _getNodeId: function(nodeId, toNext) { + // summary: + // finds a next/previous node in relation to nodeId + // nodeId: String: + // the id of the node to use as the base node + // toNext: Boolean: + // If true, we select the next node, otherwise the previous one. + var allNodes = this.getAllNodes(), newId = nodeId; + for (var i = 0, l = allNodes.length; i < l; ++i) { + if (allNodes[i].id == nodeId) { + // have a match ... make sure we don't go outside + var j = Math.min(l - 1, Math.max(0, i + (toNext ? 1 : -1))); + if (i != j) { + // we should be fine to go with the id the user has requested. + newId = allNodes[j].id; + } + break; + } + } + // if we don't get a match, the newId defaults to the currently selected node + return newId; + }, + + _conservativeBBLogic: function(node, left, top, right, bottom) { + // summary: + // logic which determines whether a node is bounded by the + // left,top,right,bottom parameters. This function returns true + // only if the coordinates of the node parameter are fully + // encompassed by the box determined by the left, top, right, bottom parameters. + var c = dojo.coords(node), t; + // normalize input + if (left > right) { + t = left; + left = right; + right = t; + } + if (top > bottom) { + t = top; + top = bottom; + bottom = t; + } + return c.x >= left && c.x + c.w <= right && c.y >= top && c.y + c.h <= bottom; // Boolean + }, + + _liberalBBLogic: function(node, left, top, right, bottom) { + // summary: + // logic which determines whether a node is bounded by the + // left,top,right,bottom parameters. Allows for the case where + // any section of the box determined by the left,top,right,bottom parameters + // overlapping the coordinates of the node parameter constitutes a true + // return value + var c = dojo.position(node), xBounded, yBounded, tlx, tly, brx, bry, leftGreater = false, bottomGreater = false, + nodeTlx = c.x, nodeTly = c.y, nodeBrx = c.x + c.w, nodeBry = c.y + c.h; + // tlx, tly represents the x,y coordinates for the top left of the bounding box + // brx, bry represents the x,y coordinates for the bottom right of the bounding box + // nodeTlx, nodeTly represents the x,y coordinates for the top left of the dom node + // nodeBrx, nodeBry represents the x,y coordinates for the bottom right of the dom node + if (left < right) { + tlx = left; + tly = top; + } else { + leftGreater = true; + tlx = right; + tly = bottom; + } + if (top < bottom) { + bottomGreater = true; + brx = right; + bry = bottom; + } else { + brx = left; + bry = top; + tlx = right; + tly = bottom; + } + if (leftGreater && bottomGreater) { + // accommodate for the case where the user is drawing from top down and from right to left. + brx = left; + bry = bottom; + tlx = right; + tly = top; + } + xBounded = (nodeTlx >= tlx || nodeBrx <= brx) && (tlx <= nodeBrx && brx >= nodeTlx) || (nodeTlx <= tlx && nodeBrx >= brx); + yBounded = (tly <= nodeBry && bry >= nodeTly) || (nodeBry >= bry && nodeTly <= bry); + return xBounded && yBounded; // Boolean + } + } + ); +});
\ No newline at end of file |