[ Mini Kiebo ]
Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586
Path:
D:
/
xampp182
/
htdocs
/
simpeg
/
zapatec
/
zpgrid
/
utils
/
jsdocs
/
[
Home
]
File: overview-summary-sizable.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="sizable.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>sizable.js</h2> </center> <h4>Summary</h4> <p> No overview generated for 'sizable.js'<BR/><BR/> </p> <hr> <!-- ========== METHOD SUMMARY =========== --> <!-- ========== END METHOD SUMMARY =========== --> <pre class="sourceview"><span class="comment">//$Id: sizable.js 6834 2007-04-02 06:49:19Z slip $</span> <span class="comment">/** * This is a set of functionality used for sizing object * and is implemented in interface (mixin) manner. */</span> Zapatec.Sizable = {}; <span class="comment">/** * Sets the width of the object. Basically the width parameter * is connected to the measurement element and its resulting width * will be equal to this value, but it doesn't mean that the * method will directly set the width of it, it can work with * it's childs actually. * <span class="attrib">@param</span> width {number} width to set. * <span class="attrib">@return</span> {boolean} true if success, otherwise false. */</span> Zapatec.Sizable.setWidth = <span class="reserved">function</span>(width) { <span class="reserved">return</span> <span class="reserved">this</span>._setDimension(width, <span class="literal">"width"</span>); }; <span class="comment">/** * Sets the height of the object. Basically the height parameter * is connected to the measurement element and its resulting height * will be equal to this value, but it doesn't mean that the * method will directly set the height of it, it can work with * it's childs actually. * <span class="attrib">@param</span> height {number} height to set. * <span class="attrib">@return</span> {boolean} true if success, otherwise false. */</span> Zapatec.Sizable.setHeight = <span class="reserved">function</span>(height) { <span class="reserved">return</span> <span class="reserved">this</span>._setDimension(height, <span class="literal">"height"</span>); }; <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> width {number} oriented width to set. * <span class="attrib">@return</span> {boolean} true if success, otherwise false. */</span> Zapatec.Sizable.setOrientedWidth = <span class="reserved">function</span>(width) { <span class="comment">//getOrientation should return the orientation of the</span> <span class="comment">//object. You can extend two types overwriting</span> <span class="comment">//handleOrientedWidth method.</span> <span class="reserved">if</span> (!<span class="reserved">this</span>.getOrientation) { <span class="reserved">return</span> false; } switch (<span class="reserved">this</span>.getOrientation()) { case <span class="literal">"vertical"</span> : <span class="comment">//vertical orientation means height</span> <span class="reserved">return</span> <span class="reserved">this</span>._setDimension(width, <span class="literal">"height"</span>); case <span class="literal">"horizontal"</span> : <span class="comment">//horizontal orientation means width</span> <span class="reserved">return</span> <span class="reserved">this</span>._setDimension(width, <span class="literal">"width"</span>); } }; <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> height {number} oriented height to set. * <span class="attrib">@return</span> {boolean} true if success, otherwise false. */</span> Zapatec.Sizable.setOrientedHeight = <span class="reserved">function</span>(height) { <span class="comment">//getOrientation should return the orientation of the</span> <span class="comment">//object. You can extend two types overwriting</span> <span class="comment">//handleOrientedHeight method.</span> <span class="reserved">if</span> (!<span class="reserved">this</span>.getOrientation) { <span class="reserved">return</span> false; } switch (<span class="reserved">this</span>.getOrientation()) { case <span class="literal">"vertical"</span> : <span class="comment">//vertical orientation means width</span> <span class="reserved">return</span> <span class="reserved">this</span>._setDimension(height, <span class="literal">"width"</span>); case <span class="literal">"horizontal"</span> : <span class="comment">//horizontal orientation means height</span> <span class="reserved">return</span> <span class="reserved">this</span>._setDimension(height, <span class="literal">"height"</span>); } }; <span class="comment">/** * Sets the size of the passed dimension. * <span class="attrib">@param</span> val {number or string} value to set. * <span class="attrib">@param</span> dimension {string} "width" or "height". * <span class="attrib">@return</span> {boolean} true if success, otherwise false. */</span> Zapatec.Sizable._setDimension = <span class="reserved">function</span>(val, dimension) { <span class="comment">//same string just with first character uper case, it is used for event names</span> var evDim = dimension.charAt(0).toUpperCase() + dimension.slice(1); <span class="comment">//preparations which can depend on the Widget.</span> <span class="reserved">if</span> (!<span class="reserved">this</span>.isSizableSafely(dimension)) { Zapatec.Log({description : <span class="literal">"The object "</span> + dimension + <span class="literal">" ID '"</span> + <span class="reserved">this</span>.id + <span class="literal">"' was not prepared for sizing! Use obj.makeSizable() to do so!"</span>, type : <span class="literal">"warning"</span>}); <span class="reserved">return</span> false; } <span class="comment">//_parseSize takes the width 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> var msgValue = val + <span class="literal">""</span>; val = <span class="reserved">this</span>._parseSize(val, dimension); <span class="reserved">if</span> (!val) { Zapatec.Log({description : <span class="literal">"The "</span> + dimension + <span class="literal">" "</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">//getSizableElements returns the array of elements</span> <span class="comment">//that actually are sized. Param passed is the dimension </span> <span class="comment">//we size.</span> var elements = Zapatec.Array(<span class="reserved">this</span>.getSizableElements(dimension)); <span class="comment">//this array is used for saving previous widths and associated sizable objects,</span> <span class="comment">//this way we can restore all widths, if sizing fails on some stage</span> var toRestore = [], self = <span class="reserved">this</span>; <span class="comment">//firing event</span> <span class="reserved">if</span> (<span class="reserved">this</span>.fireEvent(<span class="literal">"before"</span> + evDim + <span class="literal">"Change"</span>, val) === false) { <span class="reserved">return</span> false; } <span class="reserved">if</span> (Zapatec.GlobalEvents.fireEvent(<span class="literal">"before"</span> + evDim + <span class="literal">"Change"</span>, val, <span class="reserved">this</span>) === false) { <span class="reserved">return</span> false; } <span class="comment">//checking if we didn't fail during the loop,</span> <span class="reserved">if</span> (!<span class="reserved">this</span>._proceedElementsSizes(val, dimension, elements, toRestore)) { <span class="comment">//if failure we need to return back all heights</span> <span class="reserved">this</span>._rollBackSizing(toRestore, dimension); <span class="reserved">this</span>.fireEvent(dimension + <span class="literal">"ChangeFailure"</span>, val) Zapatec.GlobalEvents.fireEvent(dimension + <span class="literal">"ChangeFailure"</span>, val, <span class="reserved">this</span>) Zapatec.Log({description : <span class="literal">"Impossible to set the "</span> + dimension + <span class="literal">" "</span> + msgValue + <span class="literal">" for the 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">else</span> { <span class="reserved">if</span> (<span class="reserved">this</span>.isSizing()) { <span class="reserved">if</span> (dimension == <span class="literal">"width"</span>) { <span class="reserved">this</span>.fireEvent(<span class="literal">"onSizing"</span>, val, <span class="reserved">this</span>.getHeight()); Zapatec.GlobalEvents.fireEvent(<span class="literal">"onSizing"</span>, val, <span class="reserved">this</span>.getHeight(), <span class="reserved">this</span>); } <span class="reserved">else</span> { <span class="reserved">this</span>.fireEvent(<span class="literal">"onSizing"</span>, <span class="reserved">this</span>.getWidth(), val); Zapatec.GlobalEvents.fireEvent(<span class="literal">"onSizing"</span>, <span class="reserved">this</span>.getWidth(), val, <span class="reserved">this</span>); } } <span class="reserved">this</span>.fireEvent(<span class="literal">"on"</span> + evDim + <span class="literal">"Change"</span>, val); Zapatec.GlobalEvents.fireEvent(<span class="literal">"on"</span> + evDim + <span class="literal">"Change"</span>, val, <span class="reserved">this</span>); } <span class="comment">//reporting success.</span> <span class="reserved">return</span> true; }; <span class="comment">/** * Strats the event of sizing. This is used * to send message to interested objects that * sizing was started. This involves the calling * of "onSizing" event from setWidth and setHeight. * endSizing method stops the action. * <span class="attrib">@return</span> {boolean} true if success, otherwise false */</span> Zapatec.Sizable.startSizing = <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>.isSizableSafely()) { Zapatec.Log({description : <span class="literal">"The object with ID '"</span> + <span class="reserved">this</span>.id + <span class="literal">"' was not prepared for sizing! Use obj.makeSizable() 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">"sizingStart"</span>); Zapatec.GlobalEvents.fireEvent(<span class="literal">"sizingStart"</span>, <span class="reserved">this</span>); <span class="reserved">this</span>._setSizingState(true); <span class="reserved">return</span> true; }; <span class="comment">/** * Ends the event of sizing. This is used * to send message to interested objects that * sizing was ended. This stops the calling * of "onSizing" event from setWidth and setHeight. * <span class="attrib">@return</span> {boolean} true if success, otherwise false */</span> Zapatec.Sizable.endSizing = <span class="reserved">function</span>() { <span class="reserved">if</span> (!<span class="reserved">this</span>.isSizing()) { Zapatec.Log({description : <span class="literal">"The sizing 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">"sizingEnd"</span>); Zapatec.GlobalEvents.fireEvent(<span class="literal">"sizingEnd"</span>, <span class="reserved">this</span>); <span class="reserved">this</span>._setSizingState(false); <span class="reserved">return</span> true; }; <span class="comment">/** * Gets the state of sizing. It returns * true if sizing was started, otherwise * it returns false. * <span class="attrib">@return</span> {boolean} true if sizing started, otherwise false */</span> Zapatec.Sizable.isSizing = <span class="reserved">function</span>() { <span class="reserved">return</span> <span class="reserved">this</span>.sizingState; }; <span class="comment">/** * Sets the state of sizing to true or false. * This is used internally and can be overwritten * in child classes to use another propety for the flag. */</span> Zapatec.Sizable._setSizingState = <span class="reserved">function</span>(on) { <span class="reserved">this</span>.sizingState = on; }; <span class="comment">/** * Returns the width of the measurement element. * If there is no such, then the biggest width * of sizable elements will be taken. * <span class="attrib">@return</span> {number or boolean} the width or false iif failure. */</span> Zapatec.Sizable.getWidth = <span class="reserved">function</span>() { <span class="comment">//trying to get measurement of sizing</span> var el = <span class="reserved">this</span>.getSizableMeasurement(<span class="literal">"width"</span>); <span class="comment">//if we success then return its width or its value</span> <span class="reserved">if</span> (Zapatec.isHtmlElement(el) || typeof el == <span class="literal">"number"</span>) { <span class="reserved">return</span> Zapatec.Utils.getWidth(el) || el; } <span class="comment">//otherwise reporting failure</span> Zapatec.Log({description : <span class="literal">"Can't calculate width 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">/** * Returns the height of the measurement element. * If there is no such, then the biggest height * of sizable elements will be taken. * <span class="attrib">@return</span> {number or boolean} the height or false iif failure. */</span> Zapatec.Sizable.getHeight = <span class="reserved">function</span>() { <span class="comment">//trying to get measurement of sizing</span> var el = <span class="reserved">this</span>.getSizableMeasurement(<span class="literal">"height"</span>); <span class="comment">//if we success then return its height or its value</span> <span class="reserved">if</span> (Zapatec.isHtmlElement(el) || typeof el == <span class="literal">"number"</span>) { <span class="reserved">return</span> Zapatec.Utils.getHeight(el) || el; } <span class="comment">//otherwise reporting failure</span> Zapatec.Log({description : <span class="literal">"Can't calculate height 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">/** * Is object prepared for sizing. * 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.Sizable.isSizableSafely = <span class="reserved">function</span>(dimension) { <span class="reserved">return</span> <span class="reserved">this</span>.safelySizable; }; <span class="comment">/** * Makes all sizable elements safely sizable. * <span class="attrib">@return</span> {boolean} true if success, otherwise false. */</span> Zapatec.Sizable.makeSizable = <span class="reserved">function</span>() { <span class="reserved">if</span> (!<span class="reserved">this</span>.hasInterface(<span class="literal">"Zapatec.CommandEvent"</span>)) { Zapatec.Log({description : <span class="literal">"The object with ID '"</span> + <span class="reserved">this</span>.id + <span class="literal">"' has no Zapatec.CommandEvent interface!"</span>}); <span class="reserved">return</span> false; } <span class="reserved">if</span> (<span class="reserved">this</span>.isSizableSafely()) { <span class="reserved">return</span> true; } <span class="comment">//getting array of elements which should be sizable</span> <span class="comment">//without parameters this function should always</span> <span class="comment">//return all possible sizable elements</span> var elements = Zapatec.Array(<span class="reserved">this</span>.getSizableElements()), success = true, self = <span class="reserved">this</span>; <span class="comment">//trying to prepare each element</span> elements.each(<span class="reserved">function</span>(index, sizable) { sizable = Zapatec.Array(sizable); sizable.each(<span class="reserved">function</span>(index, sizable) { <span class="reserved">if</span> (Zapatec.isHtmlElement(sizable)) { <span class="comment">//prepareing HTML elements</span> <span class="reserved">if</span> (!Zapatec.Utils.makeSafelySizable(sizable)) { success = false; <span class="reserved">return</span> <span class="literal">"break"</span>; } self.createProperty(sizable, <span class="literal">"sizingObj"</span>, self); } <span class="reserved">else</span> <span class="reserved">if</span> (Zapatec.isSizableObj(sizable)) { <span class="comment">//prepareing sizable objects</span> <span class="reserved">if</span> (!sizable.makeSizable()) { success = false; <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>.restoreOfSizing(); <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">"' sizable!"</span>}); <span class="reserved">return</span> false; } <span class="comment">//reporting success</span> <span class="reserved">this</span>._setSizableSafely(true); <span class="reserved">return</span> true; }; <span class="comment">/** * Restoreing object of sizable state. * <span class="attrib">@return</span> {boolean} always returns true. */</span> Zapatec.Sizable.restoreOfSizing = <span class="reserved">function</span>() { <span class="reserved">if</span> (!<span class="reserved">this</span>.isSizableSafely()) { <span class="reserved">return</span> true; } <span class="comment">//getting all sizable elements</span> var elements = Zapatec.Array(<span class="reserved">this</span>.getSizableElements()); <span class="comment">//restoreing each item</span> elements.each(<span class="reserved">function</span>(index, sizable) { sizable = Zapatec.Array(sizable); sizable.each(<span class="reserved">function</span>(index, sizable) { <span class="reserved">if</span> (Zapatec.isHtmlElement(sizable)) { Zapatec.Utils.restoreOfSizing(sizable); sizable.sizingObj = null; } <span class="reserved">else</span> <span class="reserved">if</span> (Zapatec.isSizableObj(sizable)) { sizable.restoreOfSizing(); } }); }); <span class="comment">//returning success</span> <span class="reserved">this</span>._setSizableSafely(false); <span class="reserved">return</span> true; }; <span class="comment">/** * Replaces the element with the given * one. The given one will be made * sizable. * <span class="attrib">@param</span> element {HTML element} element to replace. * <span class="attrib">@param</span> withEl {HTML element} replacement element. * <span class="attrib">@return</span> {boolean} true if success, otherwise false. */</span> Zapatec.Sizable.replaceWithSizable = <span class="reserved">function</span>(element, withEl) { <span class="reserved">if</span> (!Zapatec.isHtmlElement(element) || !Zapatec.isHtmlElement(withEl)) { <span class="reserved">return</span> false; } var width = Zapatec.Utils.getWidth(element); var height = Zapatec.Utils.getHeight(element); element.parentNode.insertBefore(withEl, element.nextSibling); element.parentNode.removeChild(element); <span class="reserved">if</span> (!Zapatec.Utils.makeSafelySizable(withEl)) { <span class="reserved">return</span> false; } <span class="reserved">if</span> (Zapatec.Utils.setWidth(withEl, width) && Zapatec.Utils.setHeight(withEl, height)) { <span class="reserved">return</span> true; } <span class="reserved">return</span> false; }; <span class="comment">/** * Fills some flag with the true or false value. * Same flag should be used in isSafelySizable method. * <span class="attrib">@param</span> on {boolean} turn on or turn of. */</span> Zapatec.Sizable._setSizableSafely = <span class="reserved">function</span>(on) { <span class="reserved">this</span>.safelySizable = on; }; <span class="comment">/** * Parses the value of the size argument * to calculate the number in pixels. * if this method returns null or false * or "" or 0 nothing is done at all. * Currently recognizes "auto", px and % size. * <span class="attrib">@param</span> width {string} string representation of the size. * <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 setWidth or setHeight method, otherwise returns the size in pixels. */</span> Zapatec.Sizable._parseSize = <span class="reserved">function</span>(size, dimension) { switch (true) { case (size == <span class="literal">"auto"</span>) : { size = <span class="reserved">this</span>._parseAutoSize(dimension); break; } case ((/^\d+px$/).test(String(size))) : { size = parseInt(size, 10); break; } case ((/^\d+%$/).test(String(size))) : { size = <span class="reserved">this</span>._parsePercentSize(size, dimension); break; } case (typeof size == <span class="literal">"number"</span>) : { break; } } <span class="reserved">return</span> <span class="reserved">this</span>._canSetSize(size, dimension); }; <span class="comment">/** * Returns the value to be used as size in pixels for * the measure element used for auto sizing the element * returned by _getAutoSizableElement. * <span class="attrib">@param</span> dimension {string} dimension to parse for value. * <span class="attrib">@return</span> {number or null} needed width or null if can not * do this. */</span> Zapatec.Sizable._parseAutoSize = <span class="reserved">function</span>(dimension) { <span class="comment">//getting measurement and autosizable element. Auto sizable means</span> <span class="comment">//we'll try to size element to fit this elements content.</span> var measurement = <span class="reserved">this</span>.getSizableMeasurement(dimension); var autoSizable = <span class="reserved">this</span>._getAutoSizableElement(dimension); <span class="reserved">if</span> (!Zapatec.isHtmlElement(autoSizable)) { <span class="reserved">return</span> null; } var dim = dimension.charAt(0).toUpperCase() + dimension.slice(1).toLowerCase(); <span class="comment">//calculateing difference between this element and measurement (if there is one)</span> var diff = 0; <span class="reserved">if</span> (Zapatec.isHtmlElement(measurement) || typeof measurement == <span class="literal">"number"</span>) { diff = (Zapatec.Utils[<span class="literal">"get"</span> + dim](measurement) || measurement) - Zapatec.Utils[<span class="literal">"get"</span> + dim](autoSizable); } <span class="comment">//workaround for iframe</span> var el = autoSizable; <span class="reserved">if</span> (el.tagName.toLowerCase() == <span class="literal">"iframe"</span>) { try { <span class="reserved">if</span> (el.contentDocument != null) { el = el.contentDocument.body; } <span class="reserved">else</span> <span class="reserved">if</span> (el.contentWindow.document != null) { el = el.contentWindow.document.body; } <span class="reserved">if</span> (!Zapatec.isHtmlElement(el)) { throw <span class="literal">"No element to calculate auto size!"</span>; } } catch(e) { Zapatec.Log({description : <span class="literal">"Can't calculate auto size for the IFRAME in the 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> null; } } <span class="comment">//returning new size.</span> <span class="reserved">return</span> el[<span class="literal">"scroll"</span> + dim] + diff; }; <span class="comment">/** * Returns the value to be used as size in pixels for * the measure element used for sizing it in percents * to _getSizableParent. * <span class="attrib">@param</span> value {string} value to parse. * <span class="attrib">@param</span> dimension {string} dimension to parse in. * <span class="attrib">@return</span> {number or null} needed width or null if can not * do this. */</span> Zapatec.Sizable._parsePercentSize = <span class="reserved">function</span>(value, dimension) { <span class="comment">//getting the parent element to calculate percents of its size.</span> var sizableParent = <span class="reserved">this</span>._getSizableParent(dimension); <span class="reserved">if</span> (!Zapatec.isHtmlElement(sizableParent)) { <span class="reserved">return</span> null; } var dim = dimension.charAt(0).toUpperCase() + dimension.slice(1).toLowerCase(); value = parseInt(value, 10); <span class="comment">//calculating percents</span> <span class="reserved">return</span> Math.round((value / 100) * Zapatec.Utils[<span class="literal">"get"</span> + dim](sizableParent)); }; <span class="comment">/** * Returns value if this value for this dimension can be set. * This is currently default method, but you can overwrite it * for implementing your way of restriction. * <span class="attrib">@param</span> value {string} value to check. * <span class="attrib">@param</span> dimension {string} dimension to check. * <span class="attrib">@return</span> {number or boolean} coordinate if the size can be set, * otherwise false. */</span> Zapatec.Sizable._canSetSize = <span class="reserved">function</span>(value, dimension) { <span class="reserved">if</span> (typeof value != <span class="literal">"number"</span>) { <span class="reserved">return</span> false; } var dim = dimension.charAt(0).toUpperCase() + dimension.slice(1).toLowerCase(); var sizingConfig = <span class="reserved">this</span>.getSizingConfig(); var limit = sizingConfig.limit; var direction = sizingConfig.direction; <span class="reserved">if</span> (dim == <span class="literal">"Width"</span> && direction == <span class="literal">"vertical"</span>) { <span class="reserved">return</span> <span class="reserved">this</span>._handleSizeOverflow(<span class="reserved">this</span>.getWidth()); } <span class="reserved">if</span> (dim == <span class="literal">"Height"</span> && direction == <span class="literal">"horizontal"</span>) { <span class="reserved">return</span> <span class="reserved">this</span>._handleSizeOverflow(<span class="reserved">this</span>.getHeight()); } <span class="reserved">if</span> (typeof limit[<span class="literal">"min"</span> + dim] == <span class="literal">"number"</span> && value < limit[<span class="literal">"min"</span> + dim]) { <span class="reserved">return</span> <span class="reserved">this</span>._handleSizeOverflow(limit[<span class="literal">"min"</span> + dim]); } <span class="reserved">if</span> (typeof limit[<span class="literal">"max"</span> + dim] == <span class="literal">"number"</span> && value > limit[<span class="literal">"max"</span> + dim]) { <span class="reserved">return</span> <span class="reserved">this</span>._handleSizeOverflow(limit[<span class="literal">"max"</span> + dim]); } <span class="reserved">return</span> value; }; <span class="comment">/** * A method to handle size overflow of the limit. * <span class="attrib">@param</span> limit {number} limit that was overflowed. * <span class="attrib">@param</span> dimension {string} dimension of sizing. * <span class="attrib">@return</span> {boolean or number} false if can not set, * otherwise new coordinate. */</span> Zapatec.Sizable._handleSizeOverflow = <span class="reserved">function</span>(limit, dimension) { <span class="reserved">return</span> false; }; <span class="comment">/** * Returns the configuration of sizable object. * <span class="attrib">@return</span> {object} object with configuration. */</span> Zapatec.Sizable.getSizingConfig = <span class="reserved">function</span>() { <span class="reserved">return</span> <span class="reserved">this</span>.getConfiguration(); }; <span class="comment">/** * Sets the sizing configuration. * <span class="attrib">@param</span> config {object} a set of new configuration. */</span> Zapatec.Sizable.setSizingConfig = <span class="reserved">function</span>(config) { <span class="reserved">this</span>.reconfigure(config); }; <span class="comment">/** * Gets the element to be used for getting size which fits * its content without overflow. It will mostly always * be overwritten by your function. * <span class="attrib">@param</span> dimension {string} dimension we are working with. * <span class="attrib">@return</span> {HTML element} should always be HTML element. */</span> Zapatec.Sizable._getAutoSizableElement = <span class="reserved">function</span>(dimension) { <span class="reserved">return</span> <span class="reserved">this</span>.getContainer(); }; <span class="comment">/** * Gets the element to be used for getting size in percents * of its size. It will mostly always be overwritten by your function. * <span class="attrib">@param</span> dimension {string} dimension we are working with. * <span class="attrib">@return</span> {HTML element} should always be HTML element. */</span> Zapatec.Sizable._getSizableParent = <span class="reserved">function</span>(dimension) { <span class="reserved">return</span> <span class="reserved">this</span>.getContainer().parentNode; }; <span class="comment">/** * Returns the measurement element for this sizable * object. This a generous method, and mostly will * be overwritten in implementing class. * <span class="attrib">@param</span> dimension {string} string pointing to dimension that is * setting or calculating. You can use this to make difference * between dimensions. * <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.Sizable.getSizableMeasurement = <span class="reserved">function</span>(dimension) { <span class="reserved">return</span> <span class="reserved">this</span>.getContainer(); }; <span class="comment">/** * Returns the array of elements to be sized in this * object. This a generous method, and mostly will * be overwritten in implementing class. * <span class="attrib">@param</span> dimension {string} string pointing to dimension that is * setting or calculating. You can use this to make difference * between dimensions. * <span class="attrib">@return</span> {mixed} method should return null if there is no sizable * elements, or array of HTML elements or Zapatec.Sizable objects * to size them or get their size or prepare them. */</span> Zapatec.Sizable.getSizableElements = <span class="reserved">function</span>(dimension) { <span class="reserved">return</span> <span class="reserved">this</span>.getContainer(); }; <span class="comment">/** * Returns the container element. * <span class="attrib">@return</span> {HTML element} container element. */</span> Zapatec.Sizable.getContainer = <span class="reserved">function</span>() { <span class="reserved">return</span> <span class="reserved">this</span>.getSizingConfig().container; }; <span class="comment">/** * Sets the size of the particular element. * <span class="attrib">@param</span> size {number} the size to set. * <span class="attrib">@param</span> sizable {mixed} element or object to be sized. * <span class="attrib">@param</span> dimension {string} dimension to set. * <span class="attrib">@return</span> {object or boolean} object with two properties: "sizable" - sizable object, * "oldSize" - its old size for restoring on failure; or it returns false if failure * or true if this was not sizable element. */</span> Zapatec.Sizable._setElementSize = <span class="reserved">function</span>(size, sizable, dimension) { var dim = dimension.charAt(0).toUpperCase() + dimension.slice(1).toLowerCase(); <span class="comment">//we take each element</span> <span class="reserved">if</span> (Zapatec.isHtmlElement(sizable)) { <span class="comment">//trying to set the height of the element</span> <span class="reserved">if</span> (Zapatec.Utils[<span class="literal">"set"</span> + dim](sizable, size)) { <span class="reserved">return</span> true; } <span class="reserved">else</span> { <span class="reserved">return</span> false; } } <span class="reserved">else</span> <span class="reserved">if</span> (Zapatec.isSizableObj(sizable)) { <span class="comment">//trying to set the height of the Zapatec.Sizable object</span> <span class="reserved">if</span> (sizable[<span class="literal">"set"</span> + dim](size)) { <span class="reserved">return</span> true; } <span class="reserved">else</span> { <span class="reserved">return</span> false; } } <span class="reserved">return</span> true; }; <span class="comment">/** * Proceeds the matrix (2dim array) of elements to size them accordingly. * <span class="attrib">@param</span> value {number} value of the size to be proceed. * <span class="attrib">@param</span> dimension {string} dimension to be proceed. * <span class="attrib">@param</span> elArr {array} array of elements to be proceed. * <span class="attrib">@param</span> restArr {array} array of elements to be restored if failure * (it is filled during the method work). * <span class="attrib">@return</span> {boolean} true if success, otherwise false. */</span> Zapatec.Sizable._proceedElementsSizes = <span class="reserved">function</span>(value, dimension, elArr, restArr) { var diff = null, self = <span class="reserved">this</span>, sizes = Zapatec.Array(); <span class="comment">//getSizableMeasurement is used to get the</span> <span class="comment">//measurement element or some number. This</span> <span class="comment">//variable is used as a measurement of current</span> <span class="comment">//size. Param passed is the dimension we size.</span> var measurement = <span class="reserved">this</span>.getSizableMeasurement(dimension); var dim = dimension.charAt(0).toUpperCase() + dimension.slice(1).toLowerCase(); <span class="reserved">if</span> (typeof measurement == <span class="literal">"number"</span> || Zapatec.isHtmlElement(measurement)) { <span class="comment">//if there is measurement then height of our element is changed by the following</span> <span class="comment">//value - (height - measurement)</span> diff = value - (Zapatec.Utils[<span class="literal">"get"</span> + dim](measurement) || measurement); } <span class="comment">//elements array should be 2 dimensional, at least it will be</span> <span class="comment">//emulated so. Second dimension holds the elements that share one difference.</span> elArr = Zapatec.Array(elArr); <span class="comment">//calculating the array of sizes to be set</span> elArr.each(<span class="reserved">function</span>(row, val) { var oneDiff = diff, size = value; val = Zapatec.Array(val); <span class="comment">//if there is difference we share it between elements,</span> <span class="comment">//otherwise we share size!</span> <span class="reserved">if</span> (diff) { oneDiff = Math.round(oneDiff / val.length); } <span class="reserved">else</span> { size = Math.round(size / val.length); } <span class="comment">//adding new row to sizes array</span> sizes[row] = []; <span class="comment">//iterating through second dimension</span> val.each(<span class="reserved">function</span>(index, sizable) { var setSize = null; var elSize = null; <span class="comment">//taking element size</span> <span class="reserved">if</span> (Zapatec.isHtmlElement(sizable)) { elSize = Zapatec.Utils[<span class="literal">"get"</span> + dim](sizable) } <span class="reserved">else</span> <span class="reserved">if</span> (Zapatec.isSizableObj(sizable)) { elSize = sizable[<span class="literal">"get"</span> + dim](); } <span class="reserved">else</span> { <span class="reserved">return</span>; } <span class="reserved">if</span> (oneDiff || oneDiff === 0) { <span class="comment">//can't make mistakes :)</span> <span class="reserved">if</span> (index != val.length - 1) { setSize = elSize + oneDiff; } <span class="reserved">else</span> { setSize = elSize + (diff - oneDiff * index); } } <span class="reserved">else</span> { <span class="comment">//can't make mistakes :)</span> <span class="reserved">if</span> (index != val.length - 1) { setSize = size; } <span class="reserved">else</span> { setSize = value - size * index; } } <span class="comment">//saving size</span> sizes[row][index] = {setSize : setSize, elSize : elSize}; }); }); var res = elArr.each(<span class="reserved">function</span>(row, val) { val = Zapatec.Array(val); <span class="comment">//iterating through second dimension</span> var res = val.each(<span class="reserved">function</span>(index, sizable) { <span class="reserved">if</span> (!sizes[row][index]) { <span class="reserved">return</span>; } var res = self._setElementSize(sizes[row][index].setSize, sizable, dimension); <span class="reserved">if</span> (!res && res === false) { <span class="reserved">return</span> <span class="literal">"break"</span>; } <span class="reserved">else</span> { restArr.push({sizable : sizable, oldSize : sizes[row][index].elSize}); } }); <span class="reserved">if</span> (!res && res === false) { <span class="reserved">return</span> <span class="literal">"break"</span>; } }); <span class="reserved">return</span> res; }; <span class="comment">/** * Rolls back the size of elements from the array. * <span class="attrib">@param</span> rollBackArr {array} array of objects of the following structure: * {sizable : HTML element or Sizable object, oldSize : size to restore}. * <span class="attrib">@param</span> dimension {string} dimension to roll back. */</span> Zapatec.Sizable._rollBackSizing = <span class="reserved">function</span>(rollBackArr, dimension) { var dim = dimension.charAt(0).toUpperCase() + dimension.slice(1).toLowerCase(); rollBackArr = Zapatec.Array(rollBackArr); rollBackArr.each(<span class="reserved">function</span>(index, obj) { <span class="reserved">if</span> (Zapatec.isHtmlElement(obj.sizable)) { Zapatec.Utils[<span class="literal">"set"</span> + dim](obj.sizable, obj.oldSize); } <span class="reserved">else</span> <span class="reserved">if</span> (Zapatec.isSizableObj(obj.sizable)) { obj.sizable[<span class="literal">"set"</span> + dim](obj.oldSize); } }); }; <span class="comment">/** * This is Zapatec.Utils.Sizable object definition. * This is done in the "interface" manner. * It represents most of the routines and * events connected to sizing 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 sizable (default null). * syncVertically | {array} Elements to be synchronize in vertical sizing. The important thing * | about this is that each element of this array can be array too and this means * | that elements from that sub array will share the height change proportionally, * | otherwise, if there is only one element or it is not sub array but one element, * | it will tkae all the height change. To illustrate this: if you pass [el1, [el2, el3]] * | and your container has height 200px, after you cahnge the height to 300px * | el1 will change its height for 100px, but el2 and el3 will change their height * | for 50px both. (default []). * syncHorizontally | {array} Elements to be synchronize in horizontal sizing. The important thing * | about this is that each element of this array can be array too and this means * | that elements from that sub array will share the width change proportionally, * | otherwise, if there is only one element or it is not sub array but one element, * | it will tkae all the width change. To illustrate this: if you pass [el1, [el2, el3]] * | and your container has width 200px, after you cahnge the width to 300px * | el1 will change its width for 100px, but el2 and el3 will change their width * | for 50px both. (default []). * direction | {string} Enabled direction of sizing. Can be "vertical", "horizontal" or "both" * | (default "both"). * limit | {object} Object with properties "minWidth", "maxWidth", "minHeight" and "maxHeight", * | that are used as restrictions for setting size. * * \endcode */</span> Zapatec.Utils.Sizable = <span class="reserved">function</span>(config) { Zapatec.Utils.Sizable.SUPERconstructor.call(<span class="reserved">this</span>, config); }; Zapatec.Utils.Sizable.id = <span class="literal">"Zapatec.Utils.Sizable"</span>; Zapatec.inherit(Zapatec.Utils.Sizable, Zapatec.Widget); <span class="comment">//implementing Zapatec.CommandEvent interface</span> Zapatec.implement(Zapatec.Utils.Sizable, <span class="literal">"Zapatec.CommandEvent"</span>); <span class="comment">//implementing Zapatec.Sizable interface</span> Zapatec.implement(Zapatec.Utils.Sizable, <span class="literal">"Zapatec.Sizable"</span>); <span class="comment">/** * Inits the object with set of config options. * <span class="attrib">@param</span> config {object} configuration parameters. */</span> Zapatec.Utils.Sizable.<span class="reserved">prototype</span>.init = <span class="reserved">function</span>(config) { <span class="comment">//calling parent init</span> Zapatec.Utils.Sizable.SUPERclass.init.call(<span class="reserved">this</span>, config); <span class="comment">//makes object sizable (means all elements that are sizable)</span> <span class="reserved">this</span>.makeSizable(); }; <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.Sizable.<span class="reserved">prototype</span>.configure = <span class="reserved">function</span>(config) { <span class="comment">//set of elements to be sized with container vertically</span> <span class="reserved">this</span>.defineConfigOption(<span class="literal">"syncVertically"</span>, []); <span class="comment">//set of elements to be sized with container horizontally</span> <span class="reserved">this</span>.defineConfigOption(<span class="literal">"syncHorizontally"</span>, []); <span class="comment">//container, which is actually sized 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">//direction of sizing (you can enable sizing only in one direction)</span> <span class="reserved">this</span>.defineConfigOption(<span class="literal">"direction"</span>, <span class="literal">"both"</span>); <span class="comment">//limitations of the sizing</span> <span class="reserved">this</span>.defineConfigOption(<span class="literal">"limit"</span>, { minWidth : 10, maxWidth : null, minHeight : 10, maxHeight : null }); <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.Sizable.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 = { minWidth : null, maxWidth : null, minHeight : null, maxHeight : null }; } var self = <span class="reserved">this</span>; <span class="comment">//making sure that config.syncVertically will be Array.</span> config.syncVertically = Zapatec.Array(config.syncVertically); config.syncVertically.each(<span class="reserved">function</span>(index, subArr) { config.syncVertically[index] = Zapatec.Array(subArr); config.syncVertically[index].each(<span class="reserved">function</span>(elIndex, element) { <span class="reserved">if</span> (element === null) { <span class="reserved">return</span>; } element = Zapatec.Widget.getElementById(element); <span class="reserved">if</span> (!element) { Zapatec.Log({description : <span class="literal">"Wrong element in syncVertically array for the sizable object with ID '"</span> + self.id + <span class="literal">"'!"</span>}); } <span class="reserved">else</span> { config.syncVertically[index][elIndex] = element; } }); }); <span class="comment">//making sure that config.syncVertically will be Array.</span> config.syncHorizontally = Zapatec.Array(config.syncHorizontally); config.syncHorizontally.each(<span class="reserved">function</span>(index, subArr) { config.syncHorizontally[index] = Zapatec.Array(subArr); config.syncHorizontally[index].each(<span class="reserved">function</span>(elIndex, element) { <span class="reserved">if</span> (element === null) { <span class="reserved">return</span>; } element = Zapatec.Widget.getElementById(element); <span class="reserved">if</span> (!element) { Zapatec.Log({description : <span class="literal">"Wrong element in syncHorizontally array for the sizable object with ID '"</span> + self.id + <span class="literal">"'!"</span>}); } <span class="reserved">else</span> { config.syncHorizontally[index][elIndex] = element; } }); }); <span class="comment">//setting default container element</span> <span class="reserved">if</span> (!Zapatec.isHtmlElement(config.container = Zapatec.Widget.getElementById(config.container))) { config.container = null; } }; <span class="comment">/** * Reconfigures the object with new parameters. * <span class="attrib">@param</span> config {object} new configuration parameters. */</span> Zapatec.Utils.Sizable.<span class="reserved">prototype</span>.reconfigure = <span class="reserved">function</span>(config) { <span class="comment">// Call parent method</span> Zapatec.Utils.Sizable.SUPERclass.reconfigure.call(<span class="reserved">this</span>, config); }; <span class="comment">/** * We overwrite the method of Zapatec.Sizable interface * to return the array of needed sizable elements. * <span class="attrib">@param</span> {array} array of sizable elements. */</span> Zapatec.Utils.Sizable.<span class="reserved">prototype</span>.getSizableElements = <span class="reserved">function</span>(dimension) { var config = <span class="reserved">this</span>.getConfiguration(); <span class="reserved">if</span> (dimension && dimension.toLowerCase() == <span class="literal">"width"</span>) { <span class="reserved">return</span> config.syncHorizontally.concat(config.container); } <span class="reserved">else</span> <span class="reserved">if</span> (dimension && dimension.toLowerCase() == <span class="literal">"height"</span>) { <span class="reserved">return</span> config.syncVertically.concat(config.container); } <span class="reserved">else</span> { <span class="reserved">return</span> config.syncVertically.concat(config.syncHorizontally).concat(config.container); } }; </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>