r2825 - + Cleaned up source to remove vestiges of revert functionality.
Author: vtGavin
Date: Sun Jun 21 16:54:30 2009
New Revision: 2825
Modified:
branches/dev/positionTo/demos/positionTo/default.html
branches/dev/positionTo/ui/utils.positionTo.js
Log:
+ Cleaned up source to remove vestiges of revert functionality.
+ Implemented 'offset' functionality.
+ Added 'offset' into the demo.
Modified: branches/dev/positionTo/demos/positionTo/default.html
==============================================================================
--- branches/dev/positionTo/demos/positionTo/default.html (original)
+++ branches/dev/positionTo/demos/positionTo/default.html Sun Jun 21
16:54:30 2009
@@ -33,7 +33,7 @@
text-align: center;
}
- select
+ select, input
{
margin-left: 15px;
}
@@ -48,17 +48,14 @@
var targetAnchor =
$('select#positionTo_targetAnchor_vertical
option:selected').val() + ' '
+ $('select#positionTo_targetAnchor_horizontal
option:selected').val();
-
+
$('div#positionTo_positionable').positionTo(
$('div#positionTo_parent')[0],
positionableAnchor,
- targetAnchor
+ targetAnchor,
+ $('input#positionTo_offset').val()
);
});
-
- $('input#positionRevert_button').bind('click', function(){
- $('div#positionTo_positionable').positionRevert();
- });
});
</script>
@@ -106,10 +103,13 @@
<option value="right">right</option>
</select>
</div>
+ <div style="padding-bottom: 20px;">
+ <b>offset:</b>
+ <input id="positionTo_offset" type="text" size="15"/>
+ </div>
<div>
<input id="positionTo_button" type="button" value="Position"
style="margin-right: 25px;"/>
- <!-- <input id="positionRevert_button" type="button" value="Revert"/>
-->
</div>
</div>
Modified: branches/dev/positionTo/ui/utils.positionTo.js
==============================================================================
--- branches/dev/positionTo/ui/utils.positionTo.js (original)
+++ branches/dev/positionTo/ui/utils.positionTo.js Sun Jun 21 16:54:30 2009
@@ -6,26 +6,19 @@
* and GPL (GPL-LICENSE.txt) licenses.
*
* TODO: create document page for positionTo and add link here
- *
- * Depends:
- * ui.core.js
*/
-$.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...
+$.fn.positionTo = function(of, my, at, offset){
+ // set default values for unset parameters
+ offset = typeof(offset) != 'undefined' ? offset : '0 0';
- // !!! TODO: remember initial positionTo or checkpoint the revert on each
one
-
-
// !!! TODO: create a page resize handler to adjust the absolute
position of the positionable elements
var positionTo_handlers = {
- mouseMove: function(){
+ resize: function(){
// !!! TODO: implement mouse following
}
};
- var $targetElem = $(targetElem),
+ var $targetElem = $(of),
targetPosition = $targetElem.offset();
// if: a parent node exists for the target node
@@ -44,42 +37,6 @@
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)
- {
- $sibling_prev = this.prev();
- }
- // else if: it has a subsequent sibling
- // then: likewise, use that for the ordinal sibling
- else if (this.next().length)
- {
- $sibling_next = this.next();
- }
-
- this.data('positionTo_uniqueNodeID', {
- elem_positionableParent: (this.parent().length ? this.parent()[0] :
false),
- ordinalSibling: {
- $previous: $sibling_prev,
- $next: $sibling_next
- },
- originalCSS: {
- display: this.css('display'),
- position: this.css('position'),
- left: this.css('left'),
- right: this.css('right'),
- top: this.css('top'),
- bottom: this.css('bottom')
- }
- });
-
$targetElem.after(this);
// prep this element for being positioned
@@ -88,8 +45,9 @@
var positionableOffset_x = 0,
positionableOffset_y = 0,
- array_positionableAnchor_chunks = positionableAnchor.split(' '),
- array_targetAnchor_chunks = targetAnchor.split(' ');
+ array_positionableAnchor_chunks = my.split(' '),
+ array_targetAnchor_chunks = at.split(' '),
+ array_offset_chunks = offset.replace(/px/gi, '').split(' ');
if (array_positionableAnchor_chunks.length == 2)
{
@@ -145,58 +103,25 @@
}
}
+ if (array_offset_chunks.length == 2)
+ {
+ var offset_vertical_px = parseInt(array_offset_chunks[0]);
+ // if: a valid integer was specified for the vertical offset
+ // then: apply it to the calculated vertical offset
+ if (!isNaN(offset_vertical_px))
+ {
+ positionableOffset_y += offset_vertical_px;
+ }
+
+ var offset_horizontal_px = parseInt(array_offset_chunks[1]);
+ // if: a valid integer was specified for the horizontal offset
+ // then: apply it to the calculated horizontal offset
+ if (!isNaN(offset_horizontal_px))
+ {
+ positionableOffset_x += offset_horizontal_px;
+ }
+ }
+
this.css('left', (targetPosition.left + positionableOffset_x) + 'px')
.css('top', (targetPosition.top + positionableOffset_y) + 'px');
};
-
-/**
- * Whereas positionTo(...) moves an element to a particular location,
positionRevert()
- * essentially moves the element back to its initial location (if it was
previously moved using positionTo)
- * and unbinds any events previously attached to it.
- *
- * Meant to be used in tandem with positionTo(...).
- */
-$.fn.positionRevert = function()
-{
- 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
- // then: attempt to place it back where it was originally positioned
- if ($elem_parent.length)
- {
- // if: an ordinal previous sibling was specified
- // AND
- // it still exists in the DOM
- // then: insert this element after it
- if (ordinalSibling.$previous && ordinalSibling.$previous.length)
- {
- ordinalSibling.$previous.after(this);
- }
- // else if: an ordinal next sibling was specified
- // AND
- // it still exists in the DOM
- // then: insert this element before it
- else if (ordinalSibling.$next && ordinalSibling.$next.length)
- {
- ordinalSibling.$next.before(this);
- }
- // else: if all else fails, just append it directly to the parent node
- else
- {
- $elem_parent.append(this);
- }
- }
-
- // reset this positionable element to its original css values
- var originalCSS = this.data('positionTo_uniqueNodeID').originalCSS;
- this.css('display', originalCSS.display)
- .css('position', originalCSS.position)
- .css('left', originalCSS.left)
- .css('right', originalCSS.right)
- .css('top', originalCSS.top)
- .css('bottom', originalCSS.bottom);
-
- this.removeData('positionTo_uniqueNodeID');
-}
-