[ Mini Kiebo ]
Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586
Path:
D:
/
Backup
/
05122024
/
htdocs
/
simpeg
/
zapatec
/
zpform
/
utils
/
jsdocs
/
[
Home
]
File: overview-summary-progressbar.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="progressbar.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>progressbar.js</h2> </center> <h4>Summary</h4> <p> Progress Bar widget class derived from Widget. See description of base Widget class at http://trac.zapatec.com:8000/trac/wiki/Widget. <pre> Copyright (c) 2004-2006 by Zapatec, Inc. http://www.zapatec.com 1700 MLK Way, Berkeley, California, 94709, U.S.A. All rights reserved. </pre><BR/><BR/> </p> <hr> <table border="1" cellpadding="3" cellspacing="0" width="100%"> <tr bgcolor="#CCCCFF" class="TableHeadingColor"> <td colspan=2><font size="+2"> <b>Class Summary</b> </font></td> </tr> <tr bgcolor="white" class="TableRowColor"> <td width="15%"><b><a href="Zapatec/ProgressBar.html">Zapatec.ProgressBar</a></b></td> <td> </td> </tr> </table> <hr/> <!-- ========== METHOD SUMMARY =========== --> <!-- ========== END METHOD SUMMARY =========== --> <pre class="sourceview"><span class="comment">/* $Id: progressbar.js 4907 2006-10-25 15:09:26Z andrew $ */</span> <span class="comment">/** * <span class="attrib">@fileoverview</span> Progress Bar widget class derived from Widget. See * description of base Widget class at * http://trac.zapatec.com:8000/trac/wiki/Widget. * * <pre> * Copyright (c) 2004-2006 by Zapatec, Inc. * http://www.zapatec.com * 1700 MLK Way, Berkeley, California, * 94709, U.S.A. * All rights reserved. * </pre> */</span> <span class="comment">/** * Zapatec ProgressBar object. Creates the element for displaying progress * of some process and gives an interface to work with it. * <span class="attrib">@param</span> config [object] - progress bar config. * * Constructor recognizes the following properties of the config object * \code * property name | description *------------------------------------------------------------------------------------------------- * parent | [string or object] Reference to DOM element where * | newly created ProgressBar will be placed. * width | [number] width of the ProgressBar in "px" * height | [number] height of the ProgressBar in "px" * minValue | [number] minimal value for ProgressBar values * maxValue | [number] maximal value for ProgressBar values * value | [number] actual value for ProgressBar values * showLabels | [string] defines the way of labels displaying * | 'none' - no labels is shown * | 'values' - label with actual values is shown * | 'percents' - label with percentage is shown * title | [string] defines title that will be shown before label if * | showLabels is set to 'values' or 'percents' * \endcode */</span> <span class="comment">/** * ProgressBar class. * * <span class="attrib">@constructor</span> * <span class="attrib">@extends</span> Zapatec.Widget * <span class="attrib">@param</span> {object} objArgs User configuration */</span> Zapatec.ProgressBar = <span class="reserved">function</span>(objArgs) { <span class="reserved">if</span> (arguments.length == 0) { objArgs = {}; } Zapatec.ProgressBar.SUPERconstructor.call(<span class="reserved">this</span>, objArgs); }; <span class="comment">/** * Unique static id of the widget class. Gives ability for Zapatec#inherit to * determine and store path to this file correctly when it is included using * Zapatec#include. When this file is included using Zapatec#include or path * to this file is gotten using Zapatec#getPath, this value must be specified * as script id. * <span class="attrib">@private</span> */</span> Zapatec.ProgressBar.id = <span class="literal">'Zapatec.ProgressBar'</span>; <span class="comment">// Inherit Widget</span> Zapatec.inherit(Zapatec.ProgressBar, Zapatec.Widget); <span class="comment">/** * Initializes object. * * <span class="attrib">@param</span> {object} objArgs User configuration */</span> Zapatec.ProgressBar.<span class="reserved">prototype</span>.init = <span class="reserved">function</span>(objArgs) { <span class="comment">// Call init method of superclass</span> Zapatec.ProgressBar.SUPERclass.init.call(<span class="reserved">this</span>, objArgs); <span class="comment">// Generates HTML form ProgressBar</span> <span class="reserved">this</span>.create(); }; <span class="comment">/** * Configures the widget. Gets called from init and reconfigure methods of * superclass. * * <span class="attrib">@private</span> * <span class="attrib">@param</span> {object} objArgs User configuration */</span> Zapatec.ProgressBar.<span class="reserved">prototype</span>.configure = <span class="reserved">function</span>(objArgs) { <span class="reserved">this</span>.defineConfigOption(<span class="literal">'parent'</span>, null); <span class="reserved">this</span>.defineConfigOption(<span class="literal">'width'</span>, null); <span class="reserved">this</span>.defineConfigOption(<span class="literal">'height'</span>, null); <span class="reserved">this</span>.defineConfigOption(<span class="literal">'minValue'</span>, 0); <span class="reserved">this</span>.defineConfigOption(<span class="literal">'maxValue'</span>, 100); <span class="reserved">this</span>.defineConfigOption(<span class="literal">'value'</span>, null); <span class="reserved">this</span>.defineConfigOption(<span class="literal">'title'</span>, null); <span class="reserved">this</span>.defineConfigOption(<span class="literal">'showLabels'</span>, <span class="literal">'none'</span>); <span class="reserved">this</span>.defineConfigOption(<span class="literal">'themePath'</span>, Zapatec.zapatecPath+ <span class="literal">'../zpextra/themes/progressbar/'</span>); Zapatec.ProgressBar.SUPERclass.configure.call(<span class="reserved">this</span>, objArgs); <span class="comment">// Checks if there is parent element</span> <span class="reserved">this</span>.config.parent = Zapatec.Widget.getElementById(<span class="reserved">this</span>.config.parent); <span class="reserved">if</span> (!<span class="reserved">this</span>.config.parent) { Zapatec.Log({description: <span class="literal">"No reference to parent element."</span>}); <span class="reserved">return</span> null; } <span class="comment">/* Checks if minimal value is lower than maximal - if true minValue is set to maxValue */</span> <span class="reserved">if</span> (<span class="reserved">this</span>.config.minValue >= <span class="reserved">this</span>.config.maxValue) { Zapatec.Log({description: <span class="literal">"Minimal value is greater "</span>+ <span class="literal">"than or equals to maximal value."</span>}); throw <span class="literal">"Minimal value is greater than or equals to maximal value."</span>; <span class="reserved">return</span> null; } <span class="comment">/* Checks if current value is lower than maximal - if true current value is set to maxValue */</span> <span class="reserved">if</span> (<span class="reserved">this</span>.config.value > <span class="reserved">this</span>.config.maxValue) { Zapatec.Log({description: <span class="literal">"Actual value is out of bounds."</span>}); <span class="reserved">this</span>.config.value = <span class="reserved">this</span>.config.maxValue; <span class="reserved">return</span> null; } <span class="comment">/* Checks if current value is greater than minimal - if true current value is set to maxValue */</span> <span class="reserved">if</span> (<span class="reserved">this</span>.config.value < <span class="reserved">this</span>.config.minValue) { Zapatec.Log({description: <span class="literal">"Actual value is out of bounds."</span>}); <span class="reserved">this</span>.config.value = <span class="reserved">this</span>.config.minValue; <span class="reserved">return</span> null; } <span class="comment">// defines field to protect configuration value from changes</span> <span class="reserved">this</span>.currentValue = <span class="reserved">this</span>.config.value; <span class="comment">// Checks if showLabels parameter has correct value</span> <span class="reserved">if</span> ((<span class="reserved">this</span>.config.showLabels != <span class="literal">'none'</span>) && (<span class="reserved">this</span>.config.showLabels != <span class="literal">'values'</span>) && (<span class="reserved">this</span>.config.showLabels != <span class="literal">'percents'</span>)) { Zapatec.Log( {description: <span class="literal">"Wrong showLabels value. Must be 'none',"</span>+ <span class="literal">"'values' or 'percents'."</span>}); <span class="reserved">return</span> null; } }; <span class="comment">/** * Creates HTML for ProgressBar * <span class="attrib">@private</span> */</span> Zapatec.ProgressBar.<span class="reserved">prototype</span>.create = <span class="reserved">function</span>() { <span class="comment">// Create DIV for all parts of ProgressBar</span> <span class="comment">// Parent container</span> <span class="reserved">this</span>.container = Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.config.parent); <span class="reserved">this</span>.container.className = <span class="reserved">this</span>.getClassName({ prefix: <span class="literal">"zpProgressBar"</span>, suffix: <span class="literal">"Container"</span>}); <span class="reserved">this</span>.container.style.width = <span class="reserved">this</span>.config.width + <span class="literal">"px"</span>; <span class="comment">// Container for ProgressBar stripe</span> <span class="reserved">this</span>.internalContainer = Zapatec.Utils.createElement(<span class="literal">"div"</span>,<span class="reserved">this</span>.container); <span class="reserved">this</span>.internalContainer.className = <span class="literal">"internal"</span>; <span class="reserved">this</span>.internalContainer.style.height = <span class="reserved">this</span>.config.height - 4 + <span class="literal">"px"</span>; <span class="reserved">this</span>.internalContainer.style.width = <span class="reserved">this</span>.calculatePercentage() + <span class="literal">"%"</span>; <span class="comment">// Additional variable to store height if labels are shown</span> var additionalHeightForLabels = 0; <span class="comment">// Container for Labels</span> <span class="reserved">if</span> (<span class="reserved">this</span>.config.showLabels != <span class="literal">'none'</span>) { <span class="reserved">this</span>.labelsContainer = Zapatec.Utils.createElement(<span class="literal">"div"</span>, <span class="reserved">this</span>.container); <span class="reserved">this</span>.labelsContainer.className = <span class="literal">"labels"</span>; <span class="reserved">this</span>.labelsContainer.style.width = <span class="reserved">this</span>.config.width - 4 + <span class="literal">"px"</span>; additionalHeightForLabels = <span class="reserved">this</span>.labelsContainer.offsetHeight; } <span class="reserved">this</span>.container.style.height = <span class="reserved">this</span>.config.height + additionalHeightForLabels + <span class="literal">"px"</span>; <span class="reserved">this</span>.displayLabel(); } <span class="comment">/* * Calculates width for current value * <span class="attrib">@return</span> width in pixels * <span class="attrib">@type</span> int */</span> Zapatec.ProgressBar.<span class="reserved">prototype</span>.calculateWidth = <span class="reserved">function</span>() { <span class="reserved">return</span> Math.round( (<span class="reserved">this</span>.currentValue / (<span class="reserved">this</span>.config.maxValue - <span class="reserved">this</span>.config.minValue)) ) * <span class="reserved">this</span>.config.width; } <span class="comment">/* Calculates percentage for current value * <span class="attrib">@return</span> width in percents * <span class="attrib">@type</span> float */</span> Zapatec.ProgressBar.<span class="reserved">prototype</span>.calculatePercentage = <span class="reserved">function</span>() { <span class="reserved">return</span> (<span class="reserved">this</span>.currentValue / (<span class="reserved">this</span>.config.maxValue - <span class="reserved">this</span>.config.minValue)) * 100; } <span class="comment">/** * Redraws Progressbar after changing of currentValue */</span> Zapatec.ProgressBar.<span class="reserved">prototype</span>.redraw = <span class="reserved">function</span>() { <span class="reserved">this</span>.internalContainer.style.width = <span class="reserved">this</span>.calculatePercentage() + <span class="literal">"%"</span>; <span class="reserved">this</span>.displayLabel(); } <span class="comment">/** * Displays labels */</span> Zapatec.ProgressBar.<span class="reserved">prototype</span>.displayLabel = <span class="reserved">function</span>(){ var text = <span class="literal">''</span>; <span class="reserved">if</span> (<span class="reserved">this</span>.config.showLabels == <span class="literal">'values'</span>) { text = <span class="reserved">this</span>.currentValue+<span class="literal">"/"</span>+ (<span class="reserved">this</span>.config.maxValue-<span class="reserved">this</span>.config.minValue); } <span class="reserved">if</span> (<span class="reserved">this</span>.config.showLabels == <span class="literal">'percents'</span>) { text = Math.round(<span class="reserved">this</span>.calculatePercentage())+<span class="literal">"%"</span>; } <span class="reserved">if</span> (<span class="reserved">this</span>.config.showLabels != <span class="literal">'none'</span>) { <span class="reserved">if</span> (<span class="reserved">this</span>.config.title != null) { text = <span class="reserved">this</span>.config.title + text; } <span class="reserved">this</span>.labelsContainer.innerHTML = text; } } <span class="comment">/** * Set new progress value * <span class="attrib">@param</span> value Progress value */</span> Zapatec.ProgressBar.<span class="reserved">prototype</span>.setProgress = <span class="reserved">function</span> (value) { value = parseFloat(value); <span class="reserved">if</span> (isNaN(value)) { Zapatec.Log({description:<span class="literal">'Progress value is not a number!'</span>}); <span class="reserved">return</span> false; } <span class="reserved">this</span>.currentValue = value; <span class="reserved">this</span>.redraw(); <span class="reserved">return</span> null; } <span class="comment">/** * Get current progress * <span class="attrib">@return</span> Current progress value * <span class="attrib">@type</span> float */</span> Zapatec.ProgressBar.<span class="reserved">prototype</span>.getProgress = <span class="reserved">function</span> () { <span class="reserved">return</span> <span class="reserved">this</span>.currentValue; } <span class="comment">/** * Fires cancel event */</span> Zapatec.ProgressBar.<span class="reserved">prototype</span>.cancel = <span class="reserved">function</span> () { <span class="reserved">this</span>.fireEvent(<span class="literal">'cancel'</span>, <span class="reserved">this</span>.currentValue); } <span class="comment">/** * Hides ProgressBar */</span> Zapatec.ProgressBar.<span class="reserved">prototype</span>.hide = <span class="reserved">function</span> () { <span class="reserved">this</span>.container.style.display = <span class="literal">'none'</span>; } </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>