r2805 - + Added positionableAnchor and targetAnchor parameters.
Author: vtGavin
Date: Wed Jun 17 20:46:25 2009
New Revision: 2805
Modified:
branches/dev/positionTo/demos/positionTo/default.html
branches/dev/positionTo/ui/utils.positionTo.js
Log:
+ Added positionableAnchor and targetAnchor parameters.
+ Fleshed out demo page to accept dynamic anchor values.
Modified: branches/dev/positionTo/demos/positionTo/default.html
==============================================================================
--- branches/dev/positionTo/demos/positionTo/default.html (original)
+++ branches/dev/positionTo/demos/positionTo/default.html Wed Jun 17
20:46:25 2009
@@ -39,7 +39,8 @@
$('input#positionTo_button').bind('click', function(){
$('div#positionTo_positionable').positionTo(
$('div#positionTo_parent')[0],
- {}
+ $('input#positionTo_positionableAnchor').val(),
+ $('input#positionTo_targetAnchor').val()
);
});
@@ -62,16 +63,22 @@
<div id="positionTo_positionable">
- w00t!
+ to position
</div>
-<div style="padding: 20px;">
-
+<div style="padding: 20px; margin-top: 50px;">
+ <div style="padding-bottom: 20px;">
+ <b>positionable anchor:</b> <input id="positionTo_positionableAnchor"
type="text" value="top right" size="15"/>
+ </div>
+ <div style="padding-bottom: 20px;">
+ <b>target anchor:</b> <input id="positionTo_targetAnchor" type="text"
value="middle left" size="15"/>
+ </div>
+ <div>
<input id="positionTo_button" type="button" value="Position"
style="margin-right: 25px;"/>
- <input id="positionRevert_button" type="button" value="Revert"/>
-
+ <!-- <input id="positionRevert_button" type="button" value="Revert"/>
-->
+ </div>
</div>
<!-- Sample page content -->
Modified: branches/dev/positionTo/ui/utils.positionTo.js
==============================================================================
--- branches/dev/positionTo/ui/utils.positionTo.js (original)
+++ branches/dev/positionTo/ui/utils.positionTo.js Wed Jun 17 20:46:25 2009
@@ -10,47 +10,61 @@
* Depends:
* ui.core.js
*/
-$.fn.positionTo = function(parentElem, options){
- // !!!
- // think about implementing an indexing scheme using a document-bound
data tuple to
- // reduce the need for constant selector invocation.
- //
- // need this for multiple calls to positionTo without corresponding
reverts...
+$.fn.positionTo = function(targetElem, positionableAnchor, targetAnchor){
+ // !!! TODO: implement an indexing scheme using a document-bound data
tuple to
+ // reduce the need for constant selector invocations. need this for
multiple calls
+ // to positionTo without corresponding reverts...
- // !!! possible parameter:
- // remember initial positionTo or checkpoint the revert on each one
+ // !!! TODO: remember initial positionTo or checkpoint the revert on each
one
var positionTo_handlers = {
mouseMove: function(){
- console.log('mouse move detected');
+ // !!! TODO: implement mouse following
}
};
- var $parentElem = $(parentElem),
- parentPosition = $parentElem.offset();
+ var $targetElem = $(targetElem),
+ targetPosition = $targetElem.offset();
- if ($parentElem.parent().length)
+ // if: a parent node exists for the target node
+ // then: estimate the target node's position by comparing their
relative absolute offsets
+ if ($targetElem.parent().length)
{
- grandParentPosition = $(parentElem).parent().offset();
- parentPosition = {
- top: parentPosition.top - grandParentPosition.top,
- left: parentPosition.left - grandParentPosition.left
+ var targetParentOffset = $targetElem.parent().offset();
+ targetPosition = {
+ top: targetPosition.top - targetParentOffset.top,
+ left: targetPosition.left - targetParentOffset.left
};
}
- // calculate parent element coordinates and pad accordingly for any
border styling
- var parentElem_coords = {
- left: parentPosition.left,
- right: parentPosition.left + $parentElem.outerWidth(),
- top: parentPosition.top,
- bottom: parentPosition.top + $parentElem.outerHeight()
- };
+ targetPosition.right = targetPosition.left + $targetElem.outerWidth();
+ targetPosition.bottom = targetPosition.top + $targetElem.outerHeight();
+
+ /*
+ * Set the pertinent ordinal sibling for this positionable element
before it is appended
+ * to the DOM just after the parent.
+ */
+
+ var $sibling_prev = false, $sibling_next = false;
+
+ // if: the positionable element has a previous sibling
+ // then: use that for the ordinal sibling
+ if (this.prev().length > 0)
+ {
+ $sibling_prev = this.prev();
+ }
+ // else if: it has a subsequent sibling
+ // then: likewise, use that for the ordinal sibling
+ else if (this.next().length > 0)
+ {
+ $sibling_next = this.next();
+ }
this.data('positionTo_uniqueNodeID', {
- elem_originalParent: (this.parent().length ? this.parent()[0] :
false),
+ elem_positionableParent: (this.parent().length ? this.parent()[0] :
false),
ordinalSibling: {
- $previous: false,
- $next: false
+ $previous: $sibling_prev,
+ $next: $sibling_next
},
originalCSS: {
display: this.css('display'),
@@ -61,29 +75,80 @@
bottom: this.css('bottom')
}
});
-
- // set the pertinent ordinal sibling for this positionable element
before it is appended
- // to the DOM just after the parent
- // !!!
- $parentElem.after(this);
+ $targetElem.after(this);
// prep this element for being positioned
this.css('display', 'block')
.css('position', 'absolute');
/*
- alert('parentElem_coords.right = ' + parentElem_coords.right
- + ', parentElem_coords.top = ' + parentElem_coords.top
- + ', $parentElem.outerWidth() = ' + $parentElem.outerWidth()
- + ', $parentElem.outerHeight() = ' + $parentElem.outerHeight()
- + ', margin-right px = ' +
parseInt($parentElem.css('margin-right').replace(/px/, ''))
- + ', margin-top px = ' +
parseInt($parentElem.css('margin-top').replace(/px/, '')));
+ // !!! arbitrarily position the element
+ this.css('left', targetPosition.right + 'px')
+ .css('top', targetPosition.bottom + 'px');
*/
+
+ var positionableOffset_x = 0,
+ positionableOffset_y = 0,
+ array_positionableAnchor_chunks = positionableAnchor.split(' '),
+ array_targetAnchor_chunks = targetAnchor.split(' ');
- // !!! arbitrarily position the element
- this.css('left', parentElem_coords.right + 'px')
- .css('top', parentElem_coords.top + 'px');
+ if (array_positionableAnchor_chunks.length == 2)
+ {
+ // figure out the vertical positionable offset
+ switch(array_positionableAnchor_chunks[0])
+ {
+ case 'middle':
+ positionableOffset_y -= (this.outerHeight() / 2);
+ break;
+
+ case 'bottom':
+ positionableOffset_y -= this.outerHeight();
+ break;
+ }
+
+ // now, figure out the horizontal positionable offset
+ switch (array_positionableAnchor_chunks[1])
+ {
+ case 'middle':
+ positionableOffset_x -= (this.outerWidth() / 2);
+ break;
+
+ case 'right':
+ positionableOffset_x -= this.outerWidth();
+ break;
+ }
+ }
+
+ if (array_targetAnchor_chunks.length == 2)
+ {
+ // figure out the vertical target offset
+ switch (array_targetAnchor_chunks[0])
+ {
+ case 'middle':
+ positionableOffset_y += (targetPosition.bottom -
targetPosition.top) / 2;
+ break;
+
+ case 'bottom':
+ positionableOffset_y += (targetPosition.bottom -
targetPosition.top);
+ break;
+ }
+
+ // figure out the horizontal target offset
+ switch (array_targetAnchor_chunks[1])
+ {
+ case 'middle':
+ positionableOffset_x += (targetPosition.right -
targetPosition.left) / 2;
+ break;
+
+ case 'right':
+ positionableOffset_x += (targetPosition.right -
targetPosition.left);
+ break;
+ }
+ }
+
+ this.css('left', (targetPosition.left + positionableOffset_x) + 'px')
+ .css('top', (targetPosition.top + positionableOffset_y) + 'px');
};
/**
@@ -95,7 +160,7 @@
*/
$.fn.positionRevert = function()
{
- var $elem_parent =
$(this.data('positionTo_uniqueNodeID').elem_originalParent),
+ var $elem_parent =
$(this.data('positionTo_uniqueNodeID').elem_positionableParent),
ordinalSibling = this.data('positionTo_uniqueNodeID').ordinalSibling;
// if: this positionable element had a valid parent element when it was
first positioned