[ Mini Kiebo ]
Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586
Path:
D:
/
xampp182
/
htdocs
/
simpeg
/
zapatec
/
zptime
/
utils
/
jsdocs
/
[
Home
]
File: overview-summary-movable.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="movable.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> </td> <td bgcolor="#FFFFFF" class="NavBarCell1Rev"> <font class="NavBarFont1Rev"><b>File</b></font> </td> <td bgcolor="#FFFFFF" class="NavBarCell1"> <font class="NavBarFont1">Class</font> </td> <td bgcolor="#EEEEFF" class="NavBarCell1"> <a href="overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a> </td> <td bgcolor="#EEEEFF" class="NavBarCell1"> <a href="index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a> </td> <td bgcolor="#EEEEFF" class="NavBarCell1"> <a href="help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a> </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"> PREV NEXT</font></td> <td bgcolor="white" class="NavBarCell2"><font size="-2"> <a href="index.html" target="_top"><b>FRAMES</b></a> <a href="overview-summary.html" target="_top"><b>NO FRAMES</b></a> <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>movable.js</h2> </center> <h4>Summary</h4> <p> No overview generated for 'movable.js'<BR/><BR/> </p> <hr> <!-- ========== METHOD SUMMARY =========== --> <!-- ========== END METHOD SUMMARY =========== --> <pre class="sourceview"><span class="comment">//$Id: movable.js 6943 2007-04-16 13:53:11Z slip $</span> <span class="comment">/** * This is a set of functionality used for moving object * and is implemented in interface (mixin) manner. */</span> Zapatec.Movable = {}; <span class="comment">/** * Moves the object ot specified position. * Object can consist of group of elements, * that will be moved together. This method can * recognize not only "px" values, but "left", "top", * "bottom", "right", etc. This depends on your * _parseCoordinate implementation, if you don't * want to use standart one. * <span class="attrib">@param</span> x {number or string} X coordinate. * <span class="attrib">@param</span> y {number or string} Y coordinate. * <span class="attrib">@return</span> {boolean} true if success, otherwise false. */</span> Zapatec.Movable.setPosition = <span class="reserved">function</span>(x, y) { <span class="comment">//preparations which can depend on the Widget.</span> <span class="reserved">if</span> (!<span class="reserved">this</span>.isMovableSafely()) { Zapatec.Log({description : <span class="literal">"The object with ID '"</span> + <span class="reserved">this</span>.id + <span class="literal">"' was not prepared for moving! Use obj.makeMovable() to do so!"</span>, type : <span class="literal">"warning"</span>}); <span class="reserved">return</span> false; } var msgValue = null, moveConfig = <span class="reserved">this</span>.getMoveConfig(); <span class="comment">//_parseCoordinate takes the coordinate value and first of all</span> <span class="comment">//tryes to return the numeric representation in pixels.</span> <span class="comment">//Also if it returns null value (false and "" are also</span> <span class="comment">//treated so) method stops execution without making something.</span> <span class="comment">//This can be useful for implementing restrictions.</span> <span class="reserved">if</span> (x || x === 0) { msgValue = x; x = <span class="reserved">this</span>._parseCoordinate(x, <span class="literal">"x"</span>, moveConfig.moveLayer); <span class="reserved">if</span> (!x && x !== 0) { Zapatec.Log({description : <span class="literal">"The X coordinate "</span> + msgValue + <span class="literal">" can not be set for object with ID '"</span> + <span class="reserved">this</span>.id + <span class="literal">"'!"</span>, type : <span class="literal">"warning"</span>}); <span class="reserved">return</span> false; } } <span class="reserved">if</span> (y || y === 0) { msgValue = y; y = <span class="reserved">this</span>._parseCoordinate(y, <span class="literal">"y"</span>, moveConfig.moveLayer); <span class="reserved">if</span> (!y && y !== 0) { Zapatec.Log({description : <span class="literal">"The Y coordinate "</span> + msgValue + <span class="literal">" can not be set for object with ID '"</span> + <span class="reserved">this</span>.id + <span class="literal">"'!"</span>, type : <span class="literal">"warning"</span>}); <span class="reserved">return</span> false; } } <span class="comment">//getMovableElements returns the array of elements</span> <span class="comment">//that actually are moved. Param passed is the dimension </span> <span class="comment">//in which we move.</span> var elements = Zapatec.Array(<span class="reserved">this</span>.getMovableElements()); <span class="reserved">if</span> (<span class="reserved">this</span>.fireEvent(<span class="literal">"beforePositionChange"</span>, x, y) === false) { <span class="reserved">return</span> false; } <span class="reserved">if</span> (Zapatec.GlobalEvents.fireEvent(<span class="literal">"beforePositionChange"</span>, x, y, <span class="reserved">this</span>) === false) { <span class="reserved">return</span> false; } <span class="comment">//proceeding coordinates</span> <span class="reserved">this</span>._proceedElementsCoords(x, y, elements); <span class="comment">//firing events</span> <span class="reserved">if</span> (<span class="reserved">this</span>.isMoving()) { <span class="reserved">this</span>.fireEvent(<span class="literal">"onMove"</span>, x || <span class="reserved">this</span>.getPosition().x, y || <span class="reserved">this</span>.getPosition().y); Zapatec.GlobalEvents.fireEvent(<span class="literal">"onMove"</span>, x || <span class="reserved">this</span>.getPosition().x, y || <span class="reserved">this</span>.getPosition().y, <span class="reserved">this</span>); } <span class="reserved">this</span>.fireEvent(<span class="literal">"onPositionChange"</span>, x || <span class="reserved">this</span>.getPosition().x, y || <span class="reserved">this</span>.getPosition().y); Zapatec.GlobalEvents.fireEvent(<span class="literal">"onPositionChange"</span>, x || <span class="reserved">this</span>.getPosition().x, y || <span class="reserved">this</span>.getPosition().y, <span class="reserved">this</span>); <span class="comment">//reporting success</span> <span class="reserved">return</span> true; }; <span class="comment">/** * This method is used for the objects that use * such concept as orientation. Method reacts on * two types of orientation: "vertical" and "horizontal". * <span class="attrib">@param</span> x {number} oriented X to set. * <span class="attrib">@param</span> y {number} oriented Y to set. * <span class="attrib">@return</span> {boolean} true if success, otherwise false. */</span> Zapatec.Movable.setOrientedPosition = <span class="reserved">function</span>(x, y) { switch (<span class="reserved">this</span>.getMoveConfig().orientation) { case <span class="literal">"vertical"</span> : { <span class="comment">//vertical orientation means height</span> <span class="reserved">return</span> <span class="reserved">this</span>.setPosition(y, x); } case <span class="literal">"horizontal"</span> : { <span class="comment">//horizontal orientation means width</span> <span class="reserved">return</span> <span class="reserved">this</span>.setPosition(x, y); } } <span class="reserved">return</span> false; }; <span class="comment">/** * Sets the position of the object relatively * to the document page(BODY). * <span class="attrib">@param</span> x {number or string} X coordinate on the page. * <span class="attrib">@param</span> y {number or string} Y coordinate on the page. * <span class="attrib">@return</span> {boolean} true if success, otherwise false. */</span> Zapatec.Movable.setPagePosition = <span class="reserved">function</span>(x, y) { var moveConfig = <span class="reserved">this</span>.getMoveConfig(); <span class="reserved">if</span> (moveConfig.moveLayer == document.body) { <span class="reserved">return</span> <span class="reserved">this</span>.setPosition(x, y); } var msgValue = null; <span class="comment">//_parseCoordinate takes the coordinate value and first of all</span> <span class="comment">//tryes to return the numeric representation in pixels.</span> <span class="comment">//Also if it returns null value (false, "", 0 are also</span> <span class="comment">//treated so) method stops execution without making something.</span> <span class="comment">//This can be useful for implementing restrictions.</span> <span class="reserved">if</span> (x || x === 0) { msgValue = x; x = <span class="reserved">this</span>._parseCoordinate(x, <span class="literal">"x"</span>, document.body); <span class="reserved">if</span> (!x && x !== 0) { Zapatec.Log({description : <span class="literal">"The X page coordinate "</span> + msgValue + <span class="literal">" can not be set for object with ID '"</span> + <span class="reserved">this</span>.id + <span class="literal">"'!"</span>, type : <span class="literal">"warning"</span>}); <span class="reserved">return</span> false; } } <span class="reserved">if</span> (y || y === 0) { msgValue = y; y = <span class="reserved">this</span>._parseCoordinate(y, <span class="literal">"y"</span>, document.body); <span class="reserved">if</span> (!y && y !== 0) { Zapatec.Log({description : <span class="literal">"The Y page coordinate "</span> + msgValue + <span class="literal">" can not be set for object with ID '"</span> + <span class="reserved">this</span>.id + <span class="literal">"'!"</span>, type : <span class="literal">"warning"</span>}); <span class="reserved">return</span> false; } } var pos = Zapatec.Utils.getElementOffset(moveConfig.moveLayer); <span class="reserved">return</span> <span class="reserved">this</span>.setPosition((x || x === 0) ? (x - pos.x) : x, (y || y === 0) ? (y - pos.y) : y); }; <span class="comment">/** * Sets the position of the object relatively * to the client area of the browser. * <span class="attrib">@param</span> x {number or string} X coordinate on the screen. * <span class="attrib">@param</span> y {number or string} Y coordinate on the screen. * <span class="attrib">@return</span> {boolean} true if success, otherwise false. */</span> Zapatec.Movable.setScreenPosition = <span class="reserved">function</span>(x, y) { var moveConfig = <span class="reserved">this</span>.getMoveConfig(); var msgValue = null; <span class="comment">//_parseCoordinate takes the coordinate value and first of all</span> <span class="comment">//tryes to return the numeric representation in pixels.</span> <span class="comment">//Also if it returns null value (false, "", 0 are also</span> <span class="comment">//treated so) method stops execution without making something.</span> <span class="comment">//This can be useful for implementing restrictions.</span> <span class="reserved">if</span> (x || x === 0) { msgValue = x; x = <span class="reserved">this</span>._parseCoordinate(x, <span class="literal">"x"</span>, window); <span class="reserved">if</span> (!x && x !== 0) { Zapatec.Log({description : <span class="literal">"The X screen coordinate "</span> + msgValue + <span class="literal">" can not be set for object with ID '"</span> + <span class="reserved">this</span>.id + <span class="literal">"'!"</span>, type : <span class="literal">"warning"</span>}); <span class="reserved">return</span> false; } } <span class="reserved">if</span> (y || y === 0) { msgValue = y; y = <span class="reserved">this</span>._parseCoordinate(y, <span class="literal">"y"</span>, window); <span class="reserved">if</span> (!y && y !== 0) { Zapatec.Log({description : <span class="literal">"The Y screen coordinate "</span> + msgValue + <span class="literal">" can not be set for object with ID '"</span> + <span class="reserved">this</span>.id + <span class="literal">"'!"</span>, type : <span class="literal">"warning"</span>}); <span class="reserved">return</span> false; } } <span class="reserved">if</span> (moveConfig.moveLayer != document.body) { var pos = Zapatec.Utils.getElementOffset(moveConfig.moveLayer); } <span class="reserved">else</span> { var pos = {x : 0, y : 0}; } <span class="reserved">return</span> <span class="reserved">this</span>.setPosition((x || x === 0) ? (x - pos.x) : x, (y || y === 0) ? (y - pos.y) : y); }; <span class="comment">/** * Moves the object for the given offset from * the place it is currently in. * <span class="attrib">@param</span> offsetLeft {number} the offset value for X coordinate. * <span class="attrib">@param</span> offsetTop {number} the offset value for Y coordinate. * <span class="attrib">@return</span> {boolean} true if success, otherwise false. */</span> Zapatec.Movable.moveFor = <span class="reserved">function</span>(offsetLeft, offsetTop) { var pos = <span class="reserved">this</span>.getPosition(); <span class="reserved">return</span> <span class="reserved">this</span>.setPosition( offsetLeft == null ? null : pos.x + offsetLeft, offsetTop == null ? null : pos.y + offsetTop ); }; <span class="comment">/** * Returns the position of the main element. * If there is no such, we take the one that is * the most left and top :). * This value is offset from movable parent. * <span class="attrib">@return</span> {object} object with x and y properties. */</span> Zapatec.Movable.getPosition = <span class="reserved">function</span>() { <span class="comment">//getMovableMeasurement returns the element</span> <span class="comment">//that is the measurement of moving for all others.</span> var el = <span class="reserved">this</span>.getMovableMeasurement(); <span class="comment">//if we succeed with this lets return coords</span> <span class="reserved">if</span> (Zapatec.isHtmlElement(el) || (el && typeof el == <span class="literal">"object"</span> && typeof el.x == <span class="literal">"number"</span> && typeof el.y == <span class="literal">"number"</span>)) { <span class="reserved">return</span> Zapatec.Utils.getPos(el) || el; } <span class="comment">//otherwise reporting failure</span> Zapatec.Log({description : <span class="literal">"Can't calculate position for object with ID '"</span> + <span class="reserved">this</span>.id + <span class="literal">"'!"</span>, type : <span class="literal">"warning"</span>}); <span class="reserved">return</span> false; }; <span class="comment">/** * Gets the position of the element on the page. * <span class="attrib">@return</span> {object} object with x and y properties. */</span> Zapatec.Movable.getPagePosition = <span class="reserved">function</span>() { <span class="comment">//getMovableMeasurement returns the element</span> <span class="comment">//that is the measurement of moving for all others.</span> var el = <span class="reserved">this</span>.getMovableMeasurement(); <span class="comment">//if we succeed with this lets return coords</span> <span class="reserved">if</span> (Zapatec.isHtmlElement(el) || (el && typeof el == <span class="literal">"object"</span> && typeof el.x == <span class="literal">"number"</span> && typeof el.y == <span class="literal">"number"</span>)) { <span class="reserved">return</span> Zapatec.Utils.getElementOffset(el) || el; } <span class="comment">//otherwise reporting failure</span> Zapatec.Log({description : <span class="literal">"Can't calculate screen position for object with ID '"</span> + <span class="reserved">this</span>.id + <span class="literal">"'!"</span>, type : <span class="literal">"warning"</span>}); <span class="reserved">return</span> false; }; <span class="comment">/** * Gets the position of the element on the screen. * <span class="attrib">@return</span> {object} object with x and y properties. */</span> Zapatec.Movable.getScreenPosition = <span class="reserved">function</span>() { <span class="comment">//getting page position</span> var pos = <span class="reserved">this</span>.getPagePosition(); <span class="comment">//excluding scrolling</span> pos.x -= Zapatec.Utils.getPageScrollX(); pos.y -= Zapatec.Utils.getPageScrollY(); <span class="comment">//returning position</span> <span class="reserved">return</span> pos; }; <span class="comment">/** * Strats the event of moving. This is used * to send message to interested objects that * moving was started. This involves the calling * of "onMove" event from setPosition. * endMove method stops the action. * <span class="attrib">@return</span> {boolean} true if success, otherwise false */</span> Zapatec.Movable.startMove = <span class="reserved">function</span>() { <span class="comment">//preparations which can depend on the Widget.</span> <span class="reserved">if</span> (!<span class="reserved">this</span>.isMovableSafely()) { Zapatec.Log({description : <span class="literal">"The object with ID '"</span> + <span class="reserved">this</span>.id + <span class="literal">"' was not prepared for moving! Use obj.makeMovable() to do so!"</span>, type : <span class="literal">"warning"</span>}); <span class="reserved">return</span> false; } <span class="reserved">this</span>.fireEvent(<span class="literal">"moveStart"</span>); Zapatec.GlobalEvents.fireEvent(<span class="literal">"moveStart"</span>, <span class="reserved">this</span>); <span class="reserved">this</span>._setMovingState(true); <span class="reserved">return</span> true; }; <span class="comment">/** * Ends the event of moving. This is used * to send message to interested objects that * moving was ended. This stops the calling * of "onMove" event from setPosition. * <span class="attrib">@return</span> {boolean} true if success, otherwise false */</span> Zapatec.Movable.endMove = <span class="reserved">function</span>() { <span class="reserved">if</span> (!<span class="reserved">this</span>.isMoving()) { Zapatec.Log({description : <span class="literal">"The moving for object with ID '"</span> + <span class="reserved">this</span>.id + <span class="literal">"' was not started!"</span>, type : <span class="literal">"warning"</span>}); <span class="reserved">return</span> false; } <span class="reserved">this</span>.fireEvent(<span class="literal">"moveEnd"</span>); Zapatec.GlobalEvents.fireEvent(<span class="literal">"moveEnd"</span>, <span class="reserved">this</span>); <span class="reserved">this</span>._setMovingState(false); <span class="reserved">return</span> true; }; <span class="comment">/** * Gets the state of moving. It returns * true if moving was started, otherwise * it returns false. * <span class="attrib">@return</span> {boolean} true if moving started, otherwise false */</span> Zapatec.Movable.isMoving = <span class="reserved">function</span>() { <span class="reserved">return</span> <span class="reserved">this</span>.movingState; }; <span class="comment">/** * Sets the state of moving to true or false. * This is used internally and can be overwritten * in child classes to use another propety for the flag. */</span> Zapatec.Movable._setMovingState = <span class="reserved">function</span>(on) { <span class="reserved">this</span>.movingState = on; }; <span class="comment">/** * Is object prepared for moving. * Mostly you will need to redefine this method, * to use some other property as a flag. * <span class="attrib">@return</span> {boolean} true if prepared, otherwise false. */</span> Zapatec.Movable.isMovableSafely = <span class="reserved">function</span>() { <span class="reserved">return</span> <span class="reserved">this</span>.safelyMovable; }; <span class="comment">/** * Fills some flag with the true or false value. * Same flag should be used in isMovableSafely method. * <span class="attrib">@param</span> on {boolean} turn on or turn of. */</span> Zapatec.Movable._setMovableSafely = <span class="reserved">function</span>(on) { <span class="reserved">this</span>.safelyMovable = on; }; <span class="comment">/** * Makes all movable elements safely movable. * <span class="attrib">@return</span> {boolean} true if success, otherwise false. */</span> Zapatec.Movable.makeMovable = <span class="reserved">function</span>() { <span class="reserved">if</span> (!<span class="reserved">this</span>.requireInterface(<span class="literal">"Zapatec.CommandEvent"</span>)) { <span class="reserved">return</span> false; } <span class="reserved">if</span> (<span class="reserved">this</span>.isMovableSafely()) { <span class="reserved">return</span> true; } var elements = Zapatec.Array(<span class="reserved">this</span>.getMovableElements()), self = <span class="reserved">this</span>, moveConfig = <span class="reserved">this</span>.getMoveConfig(); <span class="comment">//trying to prepare each element</span> success = elements.each(<span class="reserved">function</span>(index, movable) { <span class="reserved">if</span> (Zapatec.isHtmlElement(movable)) { <span class="comment">//prepareing HTML elements</span> <span class="reserved">if</span> (moveConfig.preserveSizes && !Zapatec.Utils.makeSafelySizable(movable)) { <span class="reserved">return</span> <span class="literal">"break"</span>; } <span class="reserved">if</span> (!Zapatec.Utils.makeSafelyMovable(movable, moveConfig.moveLayer)) { <span class="reserved">return</span> <span class="literal">"break"</span>; } self.createProperty(movable, <span class="literal">"moveObj"</span>, self); } <span class="reserved">else</span> <span class="reserved">if</span> (Zapatec.isMovableObj(movable)) { <span class="comment">//prepareing movable objects</span> <span class="reserved">if</span> (!movable.makeMovable()) { <span class="reserved">return</span> <span class="literal">"break"</span>; } } }); <span class="comment">//if there was failure we need roll back all the preparations</span> <span class="reserved">if</span> (!success) { <span class="comment">//restoreing elements or objects</span> <span class="reserved">this</span>.restoreOfMove(); <span class="comment">//reporting error</span> Zapatec.Log({description : <span class="literal">"Can not make the object with ID '"</span> + <span class="reserved">this</span>.id + <span class="literal">"' movable!"</span>}); <span class="reserved">return</span> false; } <span class="comment">//reporting success</span> <span class="reserved">this</span>._setMovableSafely(true); <span class="reserved">return</span> true; }; <span class="comment">/** * Restoreing object of movable state. * <span class="attrib">@return</span> {boolean} always returns true. */</span> Zapatec.Movable.restoreOfMove = <span class="reserved">function</span>() { <span class="reserved">if</span> (!<span class="reserved">this</span>.isMovableSafely()) { <span class="reserved">return</span> true; } <span class="comment">//getting all movable elements</span> var elements = Zapatec.Array(<span class="reserved">this</span>.getMovableElements()); var self = <span class="reserved">this</span>; <span class="comment">//restoreing each item</span> elements.each(<span class="reserved">function</span>(index, movable) { <span class="reserved">if</span> (Zapatec.isHtmlElement(movable)) { Zapatec.Utils.restoreOfMove(movable); <span class="reserved">if</span> (self.getMoveConfig().preserveSizes) { Zapatec.Utils.restoreOfSizing(movable); } movable.moveObj = null; } <span class="reserved">else</span> <span class="reserved">if</span> (Zapatec.isMovableObj(movable)) { movable.restoreOfMove(); } }, true); <span class="comment">//returning success</span> <span class="reserved">this</span>._setMovableSafely(false); <span class="reserved">return</span> true; }; <span class="comment">/** * Returns the measurement element for this movable * object. This a generous method, and mostly will * be overwritten in implementing class. * <span class="attrib">@return</span> {null or number or HTML element} method should return * null if there is no measure, or number or HTML element to * calculate measurement. */</span> Zapatec.Movable.getMovableMeasurement = <span class="reserved">function</span>() { <span class="reserved">return</span> <span class="reserved">this</span>.getContainer(); }; <span class="comment">/** * Returns the configuration object for movement. * <span class="attrib">@return</span> {object} configuration object. */</span> Zapatec.Movable.getMoveConfig = <span class="reserved">function</span>() { <span class="reserved">return</span> <span class="reserved">this</span>.getConfiguration(); }; <span class="comment">/** * Sets the moving configuration. * <span class="attrib">@param</span> config {object} a set of new configuration. */</span> Zapatec.Movable.setMoveConfig = <span class="reserved">function</span>(config) { <span class="reserved">this</span>.reconfigure(config); }; <span class="comment">/** * Returns the array of elements to be moved in this * object. This a generous method, and mostly will * be overwritten in implementing class. * <span class="attrib">@return</span> {mixed} method should return null if there is no movable * elements, or array of HTML elements or Zapatec.Movable objects * to size them or get their size or prepare them. */</span> Zapatec.Movable.getMovableElements = <span class="reserved">function</span>() { <span class="reserved">return</span> <span class="reserved">this</span>.getContainer(); }; <span class="comment">/** * Returns container for this object. */</span> Zapatec.Movable.getContainer = <span class="reserved">function</span>() { <span class="reserved">return</span> <span class="reserved">this</span>.getMoveConfig().container; }; <span class="comment">/** * Parses the value of the coord argument * to calculate the number in pixels. * If this method returns null or false * or "" or 0 nothing is done at all. * <span class="attrib">@param</span> coord {string} string representation of the coord. * <span class="attrib">@param</span> dimension {string} dimension in which we should parse. * <span class="attrib">@return</span> {number or null} null if nothing should be done * by setPosition method, otherwise returns the coordinate in pixels. */</span> Zapatec.Movable._parseCoordinate = <span class="reserved">function</span>(coord, dimension, within) { switch (true) { case (typeof coord == <span class="literal">"number"</span>) : { <span class="reserved">if</span> (within == window) { coord += Zapatec.Utils[<span class="literal">"getPageScroll"</span> + dimension.toUpperCase()](); } break; } case ((/^\d+px$/).test(String(coord))) : { coord = parseInt(coord, 10); <span class="reserved">if</span> (within == window) { coord += Zapatec.Utils[<span class="literal">"getPageScroll"</span> + dimension.toUpperCase()](); } break; } case ((/^(left|top|bottom|right|center)$/i).test(String(coord))) : { coord = <span class="reserved">this</span>._parseWordCoordinate(coord, dimension, within); break; } } <span class="reserved">return</span> <span class="reserved">this</span>._canSetCoordinate(coord, dimension, within); }; <span class="comment">/** * Parses coordinate that is represented with one of the * following words : "left", "top", "right", "bottom", "center". * All of the words (except center) have special meaning for * upper case. If lower case means top to top (left to left, etc.), * then upper case means bottom to top. * <span class="attrib">@param</span> coord {string} string representing coordinate. * <span class="attrib">@param</span> dimension {string} dimension in which we parse. * <span class="attrib">@param</span> within {HTML element} this is the basis on which we parse. * <span class="attrib">@return</span> {number or false} numeric representation of the coordinate * or false if can not parse. */</span> Zapatec.Movable._parseWordCoordinate = <span class="reserved">function</span>(coord, dimension, within) { <span class="comment">//preventing errors</span> <span class="reserved">if</span> ((/(left|right)/i).test(String(coord)) && dimension.toUpperCase() != <span class="literal">"X"</span>) { <span class="reserved">return</span> false; } <span class="reserved">if</span> ((/(top|bottom)/i).test(String(coord)) && dimension.toUpperCase() != <span class="literal">"Y"</span>) { <span class="reserved">return</span> false; } <span class="comment">//additional helpfull strings to make code shorter</span> var dim = (dimension.toUpperCase() == <span class="literal">"X"</span>) ? <span class="literal">"Left"</span> : <span class="literal">"Top"</span>; var sizeDim = (dimension.toUpperCase() == <span class="literal">"X"</span>) ? <span class="literal">"Width"</span> : <span class="literal">"Height"</span>; <span class="comment">//at first leave it as zero</span> var parsedCoord = 0; <span class="comment">//getting needed within size for calculating coordinate</span> var wSize = null; <span class="reserved">if</span> (Zapatec.isHtmlElement(within)) { <span class="comment">//include scrolling</span> parsedCoord = within[<span class="literal">"scroll"</span> + dim]; <span class="comment">//getting size</span> wSize = Zapatec.Utils[<span class="literal">"get"</span> + sizeDim](within); } <span class="reserved">else</span> <span class="reserved">if</span> (within == window) { <span class="comment">//include scrolling</span> parsedCoord = Zapatec.Utils[<span class="literal">"getPageScroll"</span> + dimension.toUpperCase()](); <span class="comment">//getting size</span> wSize = Zapatec.Utils.getWindowSize()[sizeDim.toLowerCase()]; } <span class="reserved">else</span> <span class="reserved">if</span> (within && typeof within == <span class="literal">"object"</span>) { <span class="comment">//changing coordinate</span> parsedCoord += within[<span class="literal">"scroll"</span> + dim] || 0; <span class="comment">//getting size</span> wSize = within[sizeDim.toLowerCase()]; } <span class="reserved">else</span> { <span class="reserved">return</span> false; } <span class="comment">//getting measurement</span> var measurement = <span class="reserved">this</span>.getMovableMeasurement(); <span class="comment">//getting needed measurement size for calculating coordinate</span> var mSize = null; <span class="reserved">if</span> (Zapatec.isHtmlElement(measurement)) { mSize = Zapatec.Utils[<span class="literal">"get"</span> + sizeDim](measurement); } <span class="reserved">else</span> <span class="reserved">if</span> (measurement && typeof measurement == <span class="literal">"object"</span>) { mSize = measurement[sizeDim.toLowerCase()]; } <span class="comment">//calculating actual coordinate</span> switch (coord) { case <span class="literal">"left"</span> : case <span class="literal">"top"</span> : { break; } case <span class="literal">"LEFT"</span> : case <span class="literal">"TOP"</span> : { parsedCoord -= mSize; break; } case <span class="literal">"right"</span> : case <span class="literal">"bottom"</span> : { parsedCoord += wSize - mSize; break; } case <span class="literal">"RIGHT"</span> : case <span class="literal">"BOTTOM"</span> : { parsedCoord += wSize; break; } case <span class="literal">"center"</span> : { parsedCoord += Math.round((wSize - mSize) / 2); break; } case <span class="literal">"CENTER"</span> : { parsedCoord += Math.round(wSize / 2); break; } default : { parsedCoord = null; break; } } <span class="comment">//returning result</span> <span class="reserved">if</span> (!parsedCoord && parsedCoord !== 0) { <span class="reserved">return</span> false; } <span class="reserved">else</span> { <span class="reserved">return</span> parsedCoord; } }; <span class="comment">/** * This method restricts coordinate setting. * <span class="attrib">@param</span> coord {string} coordinate. * <span class="attrib">@param</span> dimension {string} dimension in which we check. * <span class="attrib">@param</span> within {HTML element} this is the basis on which we check. * <span class="attrib">@return</span> {number or false} the coordinate or false if can not set. */</span> Zapatec.Movable._canSetCoordinate = <span class="reserved">function</span>(coord, dimension, within) { <span class="reserved">if</span> (typeof coord != <span class="literal">"number"</span>) { <span class="reserved">return</span> false; } <span class="comment">//getting move configuration</span> var moveConfig = <span class="reserved">this</span>.getMoveConfig(); <span class="comment">//we don't check for other withins than moveLayer</span> <span class="reserved">if</span> (within != moveConfig.moveLayer) { <span class="reserved">return</span> coord; } <span class="comment">//getting limit object</span> var limitObj = moveConfig.limit; <span class="comment">//coordinate dimension ("X" or "Y") to be used for getting values</span> var dim = dimension.toUpperCase(); <span class="comment">//direction of possible movement</span> var direction = moveConfig.direction.toLowerCase(); <span class="comment">//getting corrections to restriction due to moving shape</span> var correction = <span class="reserved">this</span>._getMovableShape(); <span class="comment">//if dimension is opposite to possible direction of movement</span> <span class="comment">//returning overflow handling</span> <span class="reserved">if</span> (dim == <span class="literal">"X"</span> && direction == <span class="literal">"vertical"</span>) { <span class="reserved">return</span> <span class="reserved">this</span>._handleCoordOverflow(<span class="reserved">this</span>.getPosition().x); } <span class="reserved">else</span> <span class="reserved">if</span> (dim == <span class="literal">"Y"</span> && direction == <span class="literal">"horizontal"</span>) { <span class="reserved">return</span> <span class="reserved">this</span>._handleCoordOverflow(<span class="reserved">this</span>.getPosition().y); } <span class="comment">//checking the lower bound</span> <span class="reserved">if</span> ((limitObj[<span class="literal">"min"</span> + dim] || limitObj[<span class="literal">"min"</span> + dim] === 0) && coord < limitObj[<span class="literal">"min"</span> + dim] + correction[<span class="literal">"min"</span> + dim]) { <span class="reserved">return</span> <span class="reserved">this</span>._handleCoordOverflow(limitObj[<span class="literal">"min"</span> + dim] + correction[<span class="literal">"min"</span> + dim]); } <span class="comment">//checking the upper bound</span> <span class="reserved">if</span> ((limitObj[<span class="literal">"max"</span> + dim] || limitObj[<span class="literal">"max"</span> + dim] === 0) && coord > limitObj[<span class="literal">"max"</span> + dim] + correction[<span class="literal">"max"</span> + dim]) { <span class="reserved">return</span> <span class="reserved">this</span>._handleCoordOverflow(limitObj[<span class="literal">"max"</span> + dim] + correction[<span class="literal">"max"</span> + dim]); } <span class="comment">//just returning value</span> <span class="reserved">return</span> coord; }; <span class="comment">/** * A method to handle coordinate overflow of the limit. * <span class="attrib">@param</span> limit {number} limit that was overflowed. * <span class="attrib">@param</span> dimension {string} dimension of coordinate. * <span class="attrib">@return</span> {boolean or number} false if can not set, * otherwise new coordinate. */</span> Zapatec.Movable._handleCoordOverflow = <span class="reserved">function</span>(limit, dimension) { <span class="reserved">return</span> false; }; <span class="comment">/** * Returns the object with 4 properties. Each * of them means the correction to upper or lower * measure of the limit. * <span class="attrib">@return</span> {object} object with minX, maxX, minY and maxY properties. */</span> Zapatec.Movable._getMovableShape = <span class="reserved">function</span>() { <span class="comment">//getting measurement element</span> var measurement = <span class="reserved">this</span>.getMovableMeasurement(); <span class="comment">//default corrections are equal 0</span> var obj = {minX : 0, maxX : 0, minY : 0, maxY : 0}; <span class="comment">//currently we only support true value</span> switch (<span class="reserved">this</span>.getMoveConfig().followShape) { case (true) : { <span class="comment">//not an HTML element no corrections</span> <span class="reserved">if</span> (!Zapatec.isHtmlElement(measurement)) { <span class="reserved">return</span> obj; } <span class="comment">//correcting upper bounds</span> obj.maxX = -Zapatec.Utils.getWidth(measurement); obj.maxY = -Zapatec.Utils.getHeight(measurement); <span class="reserved">return</span> obj } default : { <span class="reserved">return</span> obj; } } }; <span class="comment">/** * Returns the coordinate of the moving point. * Its the point which is thought to be the * center of movement. * <span class="attrib">@return</span> {object} object with x and y properties. */</span> Zapatec.Movable.getMovingPoint = <span class="reserved">function</span>() { <span class="reserved">return</span> <span class="reserved">this</span>.getScreenPosition(); }; <span class="comment">/** * Iterates through all the elements in the * array and tryes to set their coordinates. * <span class="attrib">@param</span> x {number} x coordinate. * <span class="attrib">@param</span> y {number} y coordinate. * <span class="attrib">@param</span> elements {array} array of elements to proceed. */</span> Zapatec.Movable._proceedElementsCoords = <span class="reserved">function</span>(x, y, elements) { <span class="comment">//making sure this is Zapatec.Array</span> elements = Zapatec.Array(elements); <span class="comment">//calculateing measurement position</span> var measurement = <span class="reserved">this</span>.getMovableMeasurement(); var pos = null; <span class="reserved">if</span> (Zapatec.isHtmlElement(measurement)) { pos = Zapatec.Utils.getPos(measurement); } <span class="reserved">else</span> <span class="reserved">if</span> (measurement && typeof measurement == <span class="literal">"object"</span>) { pos = { x : (typeof measurement.x == <span class="literal">"number"</span>) ? measurement.x : null, y : (typeof measurement.y == <span class="literal">"number"</span>) ? measurement.y : null }; <span class="reserved">if</span> (!measurement.x || !measurement.y) { pos = null; } } <span class="comment">//iterating through all items</span> elements.each(<span class="reserved">function</span>(index, movable) { var mX = x, mY = y; <span class="comment">//if there is measurement calculating position</span> <span class="reserved">if</span> (pos) { var mPos = null; <span class="reserved">if</span> (Zapatec.isHtmlElement(movable)) { mPos = Zapatec.Utils.getPos(movable); } <span class="reserved">else</span> <span class="reserved">if</span> (Zapatec.isMovableObj(movable)) { mPos = movable.getPosition(); } <span class="reserved">else</span> { <span class="reserved">return</span>; } <span class="reserved">if</span> (x || x === 0) { mX = mPos.x + (x - pos.x); } <span class="reserved">if</span> (y || y === 0) { mY = mPos.y + (y - pos.y); } } <span class="comment">//setting position</span> <span class="reserved">if</span> (Zapatec.isHtmlElement(movable)) { Zapatec.Utils.moveTo(movable, mX, mY); } <span class="reserved">else</span> <span class="reserved">if</span> (Zapatec.isMovableObj(movable)) { movable.setPosition(mX, mY); } }); }; <span class="comment">/** * Sorts elements in array by their path in the DOM * tree. This is usefull when you have synchronized * elements that influence each other in the DOM tree * when you try to make them movable. The sort order * is descending. * <span class="attrib">@param</span> elements {array} array of elements to be sorted. * <span class="attrib">@return</span> {boolean} true if successful, otherwise false. */</span> Zapatec.Movable.sortElementsByPath = <span class="reserved">function</span>(elements) { <span class="comment">//making array of elements Zapatec.Array</span> elements = Zapatec.Array(elements); <span class="comment">//iterating through each item to get path and compare with others</span> elements.each(<span class="reserved">function</span>(index, element) { <span class="comment">//no path - no action for this element</span> var path = Zapatec.Utils.getElementPath(element, document.body); <span class="reserved">if</span> (!path) { <span class="reserved">return</span>; } <span class="comment">//splitting path into array</span> path = Zapatec.Array(path.split(<span class="literal">"-"</span>)); <span class="comment">//compareing path with path of all other elements</span> <span class="reserved">for</span>(var i = index; i < elements.length; ++i) { <span class="comment">//no path - no action for this element</span> var compPath = Zapatec.Utils.getElementPath(elements[i], document.body); <span class="reserved">if</span> (!compPath) { continue; } <span class="comment">//splitting path into array</span> compPath = Zapatec.Array(compPath.split(<span class="literal">"-"</span>)); <span class="comment">//compareing parts of both pahs</span> path.each(<span class="reserved">function</span>(k, pathPiece, whole) { <span class="comment">//if our part is bigger than breaking the cycle</span> <span class="reserved">if</span> (parseInt(pathPiece, 10) > (parseInt(compPath[k], 10) || 0)) { <span class="reserved">return</span> <span class="literal">"break"</span>; } <span class="reserved">else</span> <span class="reserved">if</span> (parseInt(pathPiece, 10) < parseInt(compPath[k], 10)) { <span class="comment">//if our part is smaller then exchanging elements with</span> <span class="comment">//their places in array and breaking the cycle</span> var el = elements[index] elements[index] = elements[i]; elements[i] = el; path = compPath; <span class="reserved">return</span> <span class="literal">"break"</span>; } <span class="comment">//continuing compareing if parts are equal</span> }); } }); <span class="reserved">return</span> true; }; <span class="comment">/** * This is Zapatec.Utils.Movable object definition. * This is done in the "interface" manner. * It represents most of the routines and * events connected to moving of the object. * <span class="attrib">@param</span> config {object} - all parameters are passed as the properties of this object. * * Constructor recognizes the following properties of the config object * \code * prop. name | description * ------------------------------------------------------------------------------------------------- * container | {HTML element} The main element to be movable (default null). * synchronize | {array} Elements to be synchronize in moving (default []). * direction | {string} Enabled direction of moving. Can be "vertical", "horizontal" or "both" * | (default "both"). * limit | {object} Object with properties "minX", "maxX", "minY" and "maxY", * | that are used as restrictions for setting position. * moveLayer | {HTML element} Element to be used as movement parent (default document.body). * * \endcode */</span> Zapatec.Utils.Movable = <span class="reserved">function</span>(config) { Zapatec.Utils.Movable.SUPERconstructor.call(<span class="reserved">this</span>, config); }; Zapatec.Utils.Movable.id = <span class="literal">"Zapatec.Utils.Movable"</span>; Zapatec.inherit(Zapatec.Utils.Movable, Zapatec.Widget); <span class="comment">//implementing Zapatec.CommandEvent interface</span> Zapatec.implement(Zapatec.Utils.Movable, <span class="literal">"Zapatec.CommandEvent"</span>); <span class="comment">//implementing Zapatec.Movable interface</span> Zapatec.implement(Zapatec.Utils.Movable, <span class="literal">"Zapatec.Movable"</span>); <span class="comment">/** * Inits the object with set of config options. * <span class="attrib">@param</span> config {object} configuration parameters. */</span> Zapatec.Utils.Movable.<span class="reserved">prototype</span>.init = <span class="reserved">function</span>(config) { <span class="comment">//calling parent init</span> Zapatec.Utils.Movable.SUPERclass.init.call(<span class="reserved">this</span>, config); var self = <span class="reserved">this</span>; var elements = null; <span class="comment">//makes object movable (means all elements that are movable)</span> <span class="reserved">if</span> (<span class="reserved">this</span>.getConfiguration().makeMovable) { <span class="reserved">this</span>.makeMovable(); } <span class="reserved">else</span> { elements = Zapatec.Array(<span class="reserved">this</span>.getMovableElements()); elements.each(<span class="reserved">function</span>(index, movable) { <span class="reserved">if</span> (Zapatec.isHtmlElement(movable)) { self.createProperty(movable, <span class="literal">"moveObj"</span>, self); } }); } }; <span class="comment">/** * Sets the default configuration of the object and * inits it with user defined values. * <span class="attrib">@param</span> config {object} configuration parameters. */</span> Zapatec.Utils.Movable.<span class="reserved">prototype</span>.configure = <span class="reserved">function</span>(config) { <span class="comment">//set of elements to be moved with container</span> <span class="reserved">this</span>.defineConfigOption(<span class="literal">"synchronize"</span>, []); <span class="comment">//container, which is actually moved too and also </span> <span class="comment">//is used as a measurement</span> <span class="reserved">this</span>.defineConfigOption(<span class="literal">"container"</span>, null); <span class="comment">//limitations of the moving</span> <span class="reserved">this</span>.defineConfigOption(<span class="literal">"limit"</span>, { minX : null, maxX : null, minY : null, maxY : null }); <span class="comment">//direction of move (you can enable move only in one direction)</span> <span class="reserved">this</span>.defineConfigOption(<span class="literal">"direction"</span>, <span class="literal">"both"</span>); <span class="comment">//moving layer, the element to be used as offset parent</span> <span class="reserved">this</span>.defineConfigOption(<span class="literal">"moveLayer"</span>, document.body); <span class="comment">//restriction shape for the element</span> <span class="reserved">this</span>.defineConfigOption(<span class="literal">"followShape"</span>, <span class="literal">"LT"</span>); <span class="comment">//should we preserve element's sizes</span> <span class="reserved">this</span>.defineConfigOption(<span class="literal">"preserveSizes"</span>, true); <span class="comment">//if false, init doesn't make element movable</span> <span class="reserved">this</span>.defineConfigOption(<span class="literal">"makeMovable"</span>, true); <span class="comment">//no theme</span> <span class="reserved">this</span>.defineConfigOption(<span class="literal">"theme"</span>, null); <span class="comment">// Call parent method</span> Zapatec.Utils.Movable.SUPERclass.configure.call(<span class="reserved">this</span>, config); config = <span class="reserved">this</span>.getConfiguration(); <span class="comment">//checking if limit object wasn't overwritten</span> <span class="reserved">if</span> (!config.limit || typeof config.limit != <span class="literal">"object"</span>) { config.limit = { minX : null, maxX : null, minY : null, maxY : null }; } var self = <span class="reserved">this</span>; <span class="comment">//making sure that config.syncronize will be Array.</span> config.synchronize = Zapatec.Array(config.synchronize); config.synchronize.each(<span class="reserved">function</span>(index, element) { <span class="reserved">if</span> (element === null) { <span class="reserved">return</span>; } element = Zapatec.Widget.getElementById(element); element = Zapatec.Utils.img2div(element); <span class="reserved">if</span> (!element) { Zapatec.Log({description : <span class="literal">"Wrong element in synchronize array for the movable object with ID '"</span> + self.id + <span class="literal">"'!"</span>}); } <span class="reserved">else</span> { config.synchronize[index] = element; } }); <span class="comment">//setting default container element</span> config.container = Zapatec.Widget.getElementById(config.container); config.container = Zapatec.Utils.img2div(config.container); <span class="reserved">if</span> (!Zapatec.isHtmlElement(config.container)) { Zapatec.Log({description : <span class="literal">"Wrong element passed as container for the movable object with ID '"</span> + self.id + <span class="literal">"'!"</span>}); } <span class="reserved">this</span>.movableElements = Zapatec.Array(config.synchronize.concat(config.container)); <span class="reserved">if</span> (<span class="reserved">this</span>.movableElements.length > 1) { <span class="reserved">this</span>.sortElementsByPath(<span class="reserved">this</span>.movableElements); } <span class="comment">//setting default move layer</span> <span class="reserved">if</span> (!Zapatec.isHtmlElement(config.moveLayer = Zapatec.Widget.getElementById(config.moveLayer))) { config.moveLayer = document.body; } }; <span class="comment">/** * Reconfigures the object with new parameters. * <span class="attrib">@param</span> config {object} new configuration parameters. */</span> Zapatec.Utils.Movable.<span class="reserved">prototype</span>.reconfigure = <span class="reserved">function</span>(config) { <span class="comment">// Call parent method</span> Zapatec.Utils.Movable.SUPERclass.reconfigure.call(<span class="reserved">this</span>, config); }; <span class="comment">/** * Returns the array of synchronized moving elements. * <span class="attrib">@return</span> {array} array of elements that are synchronized */</span> Zapatec.Utils.Movable.<span class="reserved">prototype</span>.getMovableElements = <span class="reserved">function</span>() { <span class="reserved">return</span> <span class="reserved">this</span>.movableElements; }; </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> </td> <td bgcolor="#FFFFFF" class="NavBarCell1Rev"> <font class="NavBarFont1Rev"><b>File</b></font> </td> <td bgcolor="#FFFFFF" class="NavBarCell1"> <font class="NavBarFont1">Class</font> </td> <td bgcolor="#EEEEFF" class="NavBarCell1"> <a href="overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a> </td> <td bgcolor="#EEEEFF" class="NavBarCell1"> <a href="index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a> </td> <td bgcolor="#EEEEFF" class="NavBarCell1"> <a href="help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a> </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"> PREV NEXT</font></td> <td bgcolor="white" class="NavBarCell2"><font size="-2"> <a href="index.html" target="_top"><b>FRAMES</b></a> <a href="overview-summary.html" target="_top"><b>NO FRAMES</b></a> <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>