[ Mini Kiebo ]

Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586 Path: D:/xampp182/htdocs/simpeg/zapatec/zptabs/utils/jsdocs/ [ Home ]
File: overview-summary-zpdrag.js.html
<!doctype html public "-//W3C//DTD HTML 4.0 Frameset//EN""http://www.w3.org/TR/REC-html40/frameset.dtd">
<html>
<head>
<title>
Zapatec Utils Overview
</title>
<link rel ="stylesheet" type="text/css" href="stylesheet.css" title="Style">
<script>
function asd() {
	
		parent.document.title="zpdrag.js Overview";
	
}
</script>
</head>
<body bgcolor="white" onload="asd();">

<!-- ========== START OF NAVBAR ========== -->
<a name="navbar_top"><!-- --></a>
<table border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td colspan=2 bgcolor="#EEEEFF" class="NavBarCell1">
<a name="navbar_top_firstrow"><!-- --></a>
<table border="0" cellpadding="0" cellspacing="3">
  <tr align="center" valign="top">
  
  
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-summary.html"><font class="NavBarFont1"><b>Overview</b></font></a>&nbsp;</td>
  <td bgcolor="#FFFFFF" class="NavBarCell1Rev">	&nbsp;<font class="NavBarFont1Rev"><b>File</b></font>&nbsp;</td>
  

  <td bgcolor="#FFFFFF" class="NavBarCell1"> 	<font class="NavBarFont1">Class</font>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a>&nbsp;</td>
  </tr>
</table>
</td>
<td bgcolor="#EEEEFF" align="right" valign="top">
<em>
<b>Zapatec Utils</b></em>
</td>
</tr>

<tr>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
&nbsp;PREV&nbsp;
&nbsp;NEXT</font></td>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
  <a href="index.html" target="_top"><b>FRAMES</b></a>  &nbsp;
&nbsp;<a href="overview-summary.html" target="_top"><b>NO FRAMES</b></a>
&nbsp;&nbsp;
<script>
  <!--
  if(window==top) {
    document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</script>
<noscript>
<a href="allclasses-noframe.html" target=""><b>All Classes</b></a>
</noscript>
</font></td>
</tr>
</table>
<!-- =========== END OF NAVBAR =========== -->

<hr>
<center>
	
	   <h2>zpdrag.js</h2>
	
</center>

	


<h4>Summary</h4>
<p>
	
		Zapatec Drag library. Used to drag elements. Requires utils.js.

 <pre>
 Copyright (c) 2004-2007 by Zapatec, Inc.
 http://www.zapatec.com
 1700 MLK Way, Berkeley, California,
 94709, U.S.A.
 All rights reserved.
 </pre><BR/><BR/>
	
</p>

<hr>



<!-- ========== METHOD SUMMARY =========== -->

<!-- ========== END METHOD SUMMARY =========== -->


        <pre class="sourceview"><span class="comment">/**
 * <span class="attrib">@fileoverview</span> Zapatec Drag library. Used to drag elements. Requires utils.js.
 *
 * &lt;pre&gt;
 * Copyright (c) 2004-2007 by Zapatec, Inc.
 * http://www.zapatec.com
 * 1700 MLK Way, Berkeley, California,
 * 94709, U.S.A.
 * All rights reserved.
 * &lt;/pre&gt;
 */</span>

<span class="comment">/* $Id: zpdrag.js 7599 2007-07-25 11:13:15Z roman $ */</span>

<span class="comment">/**
 * <span class="attrib">@constructor</span>
 */</span>
Zapatec.Drag = {};

<span class="comment">// Emulate window.event in Mozilla for some events. Required for Zapatec.Drag.</span>
Zapatec.Utils.emulateWindowEvent([<span class="literal">'mousedown'</span>, <span class="literal">'mousemove'</span>, <span class="literal">'mouseup'</span>]);

<span class="comment">/**
 * Holds id of an element that is currently dragged.
 * <span class="attrib">@private</span>
 */</span>
Zapatec.Drag.currentId = null;

<span class="comment">/**
 * Starts dragging an element.
 *
 * &lt;xmp&gt;
 * To make an element draggable, just attach Zapatec.Drag.start function to its
 * mousedown event:
 *
 * &lt;div id="myDiv"
 *  onmousedown="return Zapatec.Drag.start(window.event, this.id)"&gt;
 * &lt;/div&gt;
 *
 * It is not mandatory to use mousedown event like shown above. You can make
 * the element draggable from any part of your code just by calling
 * Zapatec.Drag.start function, or attach it to other event.
 * &lt;/xmp&gt;
 *
 * &lt;pre&gt;
 * Fires static Zapatec events:
 *
 * &lt;b&gt;dragStart&lt;/b&gt; before dragging is started. Listener receives following
 * object:
 * {
 *   el: [object] element got by id passed to Zapatec.Drag.start function,
 *   event: [object] event object passed to Zapatec.Drag.start function
 * }
 *
 * &lt;b&gt;dragMove&lt;/b&gt; on every mouse move while element is dragged. Listener
 * receives following object:
 * {
 *   el: [object] element got by id passed to Zapatec.Drag.start function,
 *   startLeft: [number] initial left offset,
 *   startTop: [number] initial top offset,
 *   prevLeft: [number] previous left offset,
 *   prevTop: [number] previous top offset,
 *   left: [number] current left offset,
 *   top: [number] current top offset,
 *   realLeft: [number] can be used to determine position or size of the element
 *    if its movement was not limited by vertical or step option,
 *   realTop: [number] can be used to determine position or size of the element
 *    if its movement was not limited by horizontal or step option,
 *   event: [object] event object
 * }
 *
 * &lt;b&gt;dragEnd&lt;/b&gt; after element was dropped. Listener receives following object:
 * {
 *   el: [object] element got by id passed to Zapatec.Drag.start function,
 *   startLeft: [number] initial left offset,
 *   startTop: [number] initial top offset,
 *   left: [number] current left offset,
 *   top: [number] current top offset,
 *   realLeft: [number] can be used to determine position or size of the element
 *    if its movement was not limited by vertical or step option,
 *   realTop: [number] can be used to determine position or size of the element
 *    if its movement was not limited by horizontal or step option,
 *   event: [object] event object
 * }
 *
 * Offsets are in pixels and relative to offsetParent of the element.
 *
 * Additional arguments format:
 * {
 *   vertical: [boolean] if true, element moves only vertically,
 *   horizontal: [boolean] if true, element moves only horizontally,
 *   limitTop: [number] element doesn't go beyond this limit when moved up,
 *   limitBottom: [number] element doesn't go beyond this limit when moved down,
 *   limitLeft: [number] element doesn't go beyond this limit when moved to
 *    the left,
 *   limitRight: [number] element doesn't go beyond this limit when moved to
 *    the right,
 *   stepVertical: [number] vertical step in pixels - gives ability to move or
 *    resize element incrementally vertically,
 *   stepHorizontal: [number] horizontal step in pixels - gives ability to move
 *    or resize element incrementally horizontally,
 *   step: [number] sets both stepVertical and stepHorizontal to the same value,
 *   resize: [boolean] if true, instead of dragging element is resized
 * }
 *
 * limitTop, limitBottom, limitLeft and limitRight values are in pixels relative
 * to offsetParent of the element.
 * &lt;/pre&gt;
 *
 * <span class="attrib">@param</span> {object} oEv Event object from which to get mouse position. In most
 * cases this is window.event. Note that when Zapatec.Drag is used, window.event
 * exists in all browsers. When one of mousedown, mousemove or mouseup events
 * occurs, window.event contains that event object.
 * <span class="attrib">@param</span> {object} sId Id of the element that is dragged
 * <span class="attrib">@param</span> {object} oArg Optional. Additional arguments
 * <span class="attrib">@return</span> Always true
 * <span class="attrib">@type</span> boolean
 */</span>
Zapatec.Drag.start = <span class="reserved">function</span>(oEv, sId, oArg) {
	var oDrag = Zapatec.Drag;
	var oUtils = Zapatec.Utils;
	<span class="comment">// Make sure we are not dragging anything</span>
	<span class="reserved">if</span> (oDrag.currentId) {
		<span class="reserved">return</span> true;
	}
	var oEl = Zapatec.Widget.getElementById(sId);
	<span class="reserved">if</span> (!oEl || oEl.zpDrag) {
		<span class="reserved">return</span> true;
	}
	<span class="comment">// Optional arguments</span>
	<span class="reserved">if</span> (!oArg) {
		oArg = {};
	}
	<span class="comment">// Get mouse position</span>
	var oPos = oUtils.getMousePos(oEv || window.event);
	<span class="comment">// Notify all that element is dragged</span>
	Zapatec.EventDriven.fireEvent(<span class="literal">'dragStart'</span>, {
		el: oEl,
		event: oEv
	});
	<span class="comment">// Set properties</span>
	<span class="comment">// Flags indicating that this element is dragged or resized</span>
	oEl.zpDrag = true;
	<span class="reserved">if</span> (oArg.resize) {
		oEl.zpDragResize = true;
	}
	<span class="comment">// Mousedown event position</span>
	oEl.zpDragPageX = oPos.pageX;
	oEl.zpDragPageY = oPos.pageY;
	<span class="comment">// Original element dimensions</span>
	oEl.zpDragWidth = oEl.clientWidth;
	oEl.zpDragHeight = oEl.clientHeight;
	<span class="comment">// Original element position</span>
	<span class="comment">// offsetLeft doesn't work properly in IE</span>
	var sTag;
	var oOffsetParent = oEl.offsetParent;
	<span class="reserved">if</span> (oOffsetParent) {
		sTag = oOffsetParent.tagName.toLowerCase();
	}
	<span class="reserved">if</span> (sTag &amp;&amp; sTag != <span class="literal">'body'</span> &amp;&amp; sTag != <span class="literal">'html'</span>) {
		oPos = oUtils.getElementOffset(oEl);
		var oPosParent = oUtils.getElementOffset(oOffsetParent);
		oEl.zpDragLeft = oPos.left - oPosParent.left;
		oEl.zpDragTop = oPos.top - oPosParent.top;
	} <span class="reserved">else</span> {
		oEl.zpDragLeft = oEl.offsetLeft;
		oEl.zpDragTop = oEl.offsetTop;
	}
	oEl.zpDragRight = oEl.zpDragLeft + oEl.zpDragWidth;
	oEl.zpDragBottom = oEl.zpDragTop + oEl.zpDragHeight;
	<span class="comment">// Previous element position</span>
	oEl.zpDragPrevLeft = oEl.zpDragPrevRealLeft = oEl.zpDragLeft;
	oEl.zpDragPrevTop = oEl.zpDragPrevRealTop = oEl.zpDragTop;
	<span class="comment">// Flag indicating that moving only vertically or horizontally</span>
	oEl.zpDragV = oArg.vertical;
	oEl.zpDragH = oArg.horizontal;
	<span class="comment">// Movement limits</span>
	oEl.zpDragLimTop =
	 typeof oArg.limitTop == <span class="literal">'number'</span> ? oArg.limitTop : -Infinity;
	oEl.zpDragLimBot =
	 typeof oArg.limitBottom == <span class="literal">'number'</span> ? oArg.limitBottom : Infinity;
	oEl.zpDragLimLft =
	 typeof oArg.limitLeft == <span class="literal">'number'</span> ? oArg.limitLeft : -Infinity;
	oEl.zpDragLimRgh =
	 typeof oArg.limitRight == <span class="literal">'number'</span> ? oArg.limitRight : Infinity;
	<span class="comment">// Step</span>
	<span class="reserved">if</span> (typeof oArg.step == <span class="literal">'number'</span>) {
		oEl.zpDragStepV = oEl.zpDragStepH = oArg.step;
	}
	<span class="reserved">if</span> (typeof oArg.stepVertical == <span class="literal">'number'</span>) {
		oEl.zpDragStepV = oArg.stepVertical;
	}
	<span class="reserved">if</span> (typeof oArg.stepHorizontal == <span class="literal">'number'</span>) {
		oEl.zpDragStepH = oArg.stepHorizontal;
	}
	<span class="comment">// Save id of currently moved element</span>
	oDrag.currentId = sId;
	<span class="comment">// Set event listeners</span>
	oUtils.addEvent(document, <span class="literal">'mousemove'</span>, oDrag.move);
	oUtils.addEvent(document, <span class="literal">'mouseup'</span>, oDrag.end);
	<span class="comment">// Continue event</span>
	<span class="reserved">return</span> true;
};

<span class="comment">/**
 * Moves element to the current mouse position. Gets called on document
 * mousemove event.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} oEv Event object
 * <span class="attrib">@return</span> Always false
 * <span class="attrib">@type</span> boolean
 */</span>
Zapatec.Drag.move = <span class="reserved">function</span>(oEv) {
	var oDrag = Zapatec.Drag;
	var oUtils = Zapatec.Utils;
	<span class="comment">// Get event</span>
	oEv || (oEv = window.event);
	<span class="comment">// Make sure we are dragging anything</span>
	<span class="reserved">if</span> (!oDrag.currentId) {
		<span class="reserved">return</span> oUtils.stopEvent(oEv);
	}
	var oEl = document.getElementById(oDrag.currentId);
	<span class="reserved">if</span> (!(oEl &amp;&amp; oEl.zpDrag)) {
		<span class="reserved">return</span> oUtils.stopEvent(oEv);
	}
	var oSt = oEl.style;
	<span class="comment">// Get mouse position</span>
	var oPos = oUtils.getMousePos(oEv);
	<span class="comment">// Calculate element position</span>
	var oParam = {
		el: oEl,
		startLeft: oEl.zpDragLeft,
		startTop: oEl.zpDragTop,
		prevLeft: oEl.zpDragPrevLeft,
		prevTop: oEl.zpDragPrevTop,
		left: oEl.zpDragLeft,
		top: oEl.zpDragTop,
		realLeft: oEl.zpDragLeft,
		realTop: oEl.zpDragTop,
		event: oEv
	};
	var iOffset, iPos, iStep, iSize;
	<span class="comment">// Horizontal offset</span>
	iOffset = oPos.pageX - oEl.zpDragPageX;
	iStep = oEl.zpDragStepH;
	<span class="reserved">if</span> (iStep) {
		iPos = oEl.zpDragLeft + Math.floor(iOffset / iStep) * iStep;
		oParam.realLeft = oEl.zpDragPrevRealLeft = oEl.zpDragLeft + iOffset;
	} <span class="reserved">else</span> {
		oParam.realLeft = oEl.zpDragPrevRealLeft = iPos = oEl.zpDragLeft + iOffset;
	}
	<span class="comment">// If it is not vertical</span>
	<span class="reserved">if</span> (!oEl.zpDragV) {
		<span class="comment">// Check limits</span>
		<span class="reserved">if</span> (oEl.zpDragLimLft &lt;= iPos &amp;&amp; oEl.zpDragLimRgh &gt;= iPos) {
			<span class="comment">// left and right can't exist together</span>
			<span class="reserved">if</span> (oSt.right) {
				oSt.right = <span class="literal">''</span>;
			}
			<span class="reserved">if</span> (oEl.zpDragResize) {
				<span class="reserved">if</span> (iOffset &gt; 0) {
					iSize = oEl.zpDragWidth + iOffset;
					<span class="reserved">if</span> (iStep) {
						iSize = Math.floor(iSize / iStep) * iStep;
					}
					oSt.left = oEl.zpDragLeft + <span class="literal">'px'</span>;
				} <span class="reserved">else</span> {
					iSize = oEl.zpDragWidth - iOffset;
					<span class="reserved">if</span> (iStep) {
						iSize = Math.ceil(iSize / iStep) * iStep;
					}
					oSt.left = oEl.zpDragLeft - iSize + <span class="literal">'px'</span>;
				}
				oSt.width = iSize + <span class="literal">'px'</span>;
			} <span class="reserved">else</span> {
				oSt.left = iPos + <span class="literal">'px'</span>;
			}
			oParam.left = iPos;
			oEl.zpDragPrevLeft = iPos;
		} <span class="reserved">else</span> {
			oParam.left = oParam.prevLeft;
		}
	}
	<span class="comment">// Vertical offset</span>
	iOffset = oPos.pageY - oEl.zpDragPageY;
	iStep = oEl.zpDragStepV;
	<span class="reserved">if</span> (iStep) {
		iPos = oEl.zpDragTop + Math.floor(iOffset / iStep) * iStep;
		oParam.realTop = oEl.zpDragPrevRealTop = oEl.zpDragTop + iOffset;
	} <span class="reserved">else</span> {
		iPos = oParam.realTop = oEl.zpDragPrevRealTop = oEl.zpDragTop + iOffset;
	}
	<span class="comment">// If it is not horizontal</span>
	<span class="reserved">if</span> (!oEl.zpDragH) {
		<span class="comment">// Check limits</span>
		<span class="reserved">if</span> (oEl.zpDragLimTop &lt;= iPos &amp;&amp; oEl.zpDragLimBot &gt;= iPos) {
			<span class="comment">// top and bottom can't exist together</span>
			<span class="reserved">if</span> (oSt.bottom) {
				oSt.bottom = <span class="literal">''</span>;
			}
			<span class="reserved">if</span> (oEl.zpDragResize) {
				<span class="reserved">if</span> (iOffset &gt; 0) {
					iSize = oEl.zpDragHeight + iOffset;
					<span class="reserved">if</span> (iStep) {
						iSize = Math.floor(iSize / iStep) * iStep;
					}
					oSt.top = oEl.zpDragTop + <span class="literal">'px'</span>;
				} <span class="reserved">else</span> {
					iSize = oEl.zpDragHeight - iOffset;
					<span class="reserved">if</span> (iStep) {
						iSize = Math.ceil(iSize / iStep) * iStep;
					}
					oSt.top = oEl.zpDragBottom - iSize + <span class="literal">'px'</span>;
				}
				oSt.height = iSize + <span class="literal">'px'</span>;
			} <span class="reserved">else</span> {
				oSt.top = iPos + <span class="literal">'px'</span>;
			}
			oParam.top = iPos;
			oEl.zpDragPrevTop = iPos;
		} <span class="reserved">else</span> {
			oParam.top = oParam.prevTop;
		}
	}
	<span class="comment">// Notify all that element was moved or resized</span>
	Zapatec.EventDriven.fireEvent(<span class="literal">'dragMove'</span>, oParam);
	<span class="comment">// Stop event</span>
	<span class="reserved">return</span> oUtils.stopEvent(oEv);
};

<span class="comment">/**
 * Finishes dragging. Gets called on document mouseup event.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} oEv Event object
 * <span class="attrib">@return</span> Always false
 * <span class="attrib">@type</span> boolean
 */</span>
Zapatec.Drag.end = <span class="reserved">function</span>(oEv) {
	var oDrag = Zapatec.Drag;
	var oUtils = Zapatec.Utils;
	<span class="comment">// Get event</span>
	oEv || (oEv = window.event);
	<span class="comment">// Make sure we are dragging anything</span>
	<span class="reserved">if</span> (!oDrag.currentId) {
		<span class="reserved">return</span> oUtils.stopEvent(oEv);
	}
	var oEl = document.getElementById(oDrag.currentId);
	<span class="reserved">if</span> (!(oEl &amp;&amp; oEl.zpDrag)) {
		<span class="reserved">return</span> oUtils.stopEvent(oEv);
	}
	<span class="comment">// Remove event listeners</span>
	oUtils.removeEvent(document, <span class="literal">'mousemove'</span>, oDrag.move);
	oUtils.removeEvent(document, <span class="literal">'mouseup'</span>, oDrag.end);
	<span class="comment">// Get element position</span>
	var oParam = {
		el: oEl,
		startLeft: oEl.zpDragLeft,
		startTop: oEl.zpDragTop,
		left: oEl.zpDragPrevLeft,
		top: oEl.zpDragPrevTop,
		realLeft: oEl.zpDragPrevRealLeft,
		realTop: oEl.zpDragPrevRealTop,
		event: oEv
	};
	<span class="comment">// Remove properties</span>
	oDrag.currentId = null;
	oEl.zpDrag = null;
	oEl.zpDragPageY = null;
	oEl.zpDragPageX = null;
	oEl.zpDragTop = null;
	oEl.zpDragLeft = null;
	oEl.zpDragPrevTop = null;
	oEl.zpDragPrevLeft = null;
	oEl.zpDragPrevRealTop = null;
	oEl.zpDragPrevRealLeft = null;
	oEl.zpDragV = null;
	oEl.zpDragH = null;
	oEl.zpDragLimTop = null;
	oEl.zpDragLimBot = null;
	oEl.zpDragLimLft = null;
	oEl.zpDragLimRgh = null;
	oEl.zpDragStepV = null;
	oEl.zpDragStepH = null;
	<span class="comment">// Notify all that element was dropped</span>
	Zapatec.EventDriven.fireEvent(<span class="literal">'dragEnd'</span>, oParam);
	<span class="comment">// Stop event</span>
	<span class="reserved">return</span> oUtils.stopEvent(oEv);
};
</pre>
	<hr>



<!-- ========== START OF NAVBAR ========== -->
<a name="navbar_top"><!-- --></a>
<table border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td colspan=2 bgcolor="#EEEEFF" class="NavBarCell1">
<a name="navbar_top_firstrow"><!-- --></a>
<table border="0" cellpadding="0" cellspacing="3">
  <tr align="center" valign="top">
  
  
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-summary.html"><font class="NavBarFont1"><b>Overview</b></font></a>&nbsp;</td>
  <td bgcolor="#FFFFFF" class="NavBarCell1Rev">	&nbsp;<font class="NavBarFont1Rev"><b>File</b></font>&nbsp;</td>
  

  <td bgcolor="#FFFFFF" class="NavBarCell1"> <font class="NavBarFont1">Class</font>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a>&nbsp;</td>
  </tr>
</table>
</td>
<td bgcolor="#EEEEFF" align="right" valign="top"><em>
<b>Zapatec Utils</b></em>
</td>
</tr>

<tr>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
&nbsp;PREV&nbsp;
&nbsp;NEXT</font></td>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
  <a href="index.html" target="_top"><b>FRAMES</b></a>  &nbsp;
&nbsp;<a href="overview-summary.html" target="_top"><b>NO FRAMES</b></a>
&nbsp;&nbsp;
<script>
  <!--
  if(window==top) {
    document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</script>
<noscript>
<a href="allclasses-noframe.html" target=""><b>All Classes</b></a>
</noscript>
</font></td>
</tr>
</table>
<!-- =========== END OF NAVBAR =========== -->

<hr>
<font size="-1">

</font>
<div class="jsdoc_ctime">Documentation generated by <a href="http://jsdoc.sourceforge.net/" target="_parent">JSDoc</a> on Thu Aug 16 12:18:39 2007</div>
</body>
</html>