[ 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-edit_inline.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="edit_inline.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>edit_inline.js</h2> </center> <h4>Summary</h4> <p> EditInline 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/EditInline.html">Zapatec.EditInline</a></b></td> <td> </td> </tr> </table> <hr/> <!-- ========== METHOD SUMMARY =========== --> <!-- ========== END METHOD SUMMARY =========== --> <pre class="sourceview"><span class="comment">/** * <span class="attrib">@fileoverview</span> EditInline 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">/* $Id: edit_inline.js 6996 2007-04-23 13:18:42Z andrew $ */</span> <span class="comment">/** * EditInline class. * * <span class="attrib">@constructor</span> * <span class="attrib">@extends</span> Zapatec.Widget * <span class="attrib">@param</span> {object} objArgs User configuration */</span> Zapatec.EditInline = <span class="reserved">function</span>(objArgs) { <span class="comment">// Call constructor of superclass</span> Zapatec.EditInline.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.EditInline.id = <span class="literal">'Zapatec.EditInline'</span>; <span class="comment">// Inherit Widget</span> Zapatec.inherit(Zapatec.EditInline, Zapatec.Widget); <span class="comment">/** * Initializes object. * * <span class="attrib">@param</span> {object} objArgs User configuration */</span> Zapatec.EditInline.<span class="reserved">prototype</span>.init = <span class="reserved">function</span>(objArgs) { <span class="comment">// Call init method of superclass</span> Zapatec.EditInline.SUPERclass.init.call(<span class="reserved">this</span>, objArgs); <span class="reserved">this</span>.isActive = false; <span class="reserved">this</span>.isClicked = false; var self = <span class="reserved">this</span>; <span class="reserved">this</span>.container = document.createElement(<span class="literal">"textarea"</span>); <span class="reserved">this</span>.createProperty(<span class="reserved">this</span>.container, <span class="literal">"zpEditInline"</span>, <span class="reserved">this</span>); <span class="reserved">this</span>.container.style.position = <span class="literal">"absolute"</span>; <span class="reserved">this</span>.container.style.border = <span class="literal">"1px solid black"</span>; <span class="reserved">this</span>.container.onclick = <span class="reserved">function</span>(){ self.isClicked = true; } <span class="comment">// process all document key hits</span> <span class="comment">// For IE we must use "keydown" instead of "keypress"</span> Zapatec.Utils.addEvent(document, <span class="literal">"keydown"</span>, <span class="reserved">function</span>(evt){ self.keyEvent(evt); }); <span class="reserved">if</span>(<span class="reserved">this</span>.config.hideOnClick){ <span class="comment">// process all document clicks</span> Zapatec.Utils.addEvent(document, <span class="literal">'click'</span>, <span class="reserved">function</span>(evt){ setTimeout(<span class="reserved">function</span>(evt){self.documentClick(evt)}, 1); }); } <span class="comment">// resize textarea on clipboard events</span> var changeEvent = null; <span class="reserved">if</span>(Zapatec.is_ie){ changeEvent = <span class="literal">'paste'</span>; } <span class="reserved">else</span> <span class="reserved">if</span>(Zapatec.is_gecko) { changeEvent = <span class="literal">'input'</span>; } <span class="reserved">else</span> { changeEvent = <span class="literal">'change'</span>; } Zapatec.Utils.addEvent(<span class="reserved">this</span>.container, changeEvent, <span class="reserved">function</span>(){self.resizeToContent()}); <span class="reserved">if</span>(<span class="reserved">this</span>.config.showImmediately && <span class="reserved">this</span>.config.target){ <span class="reserved">this</span>.show(<span class="reserved">this</span>.config.target); } }; Zapatec.EditInline.<span class="reserved">prototype</span>.documentClick = <span class="reserved">function</span>(evt){ <span class="reserved">if</span>(!<span class="reserved">this</span>.isActive){ <span class="reserved">return</span>; } <span class="reserved">if</span>(!<span class="reserved">this</span>.isClicked){ <span class="reserved">if</span>(<span class="reserved">this</span>.config.saveOnClick){ <span class="reserved">this</span>.saveAndHide(); } <span class="reserved">else</span> { <span class="reserved">this</span>.hide(); } } <span class="reserved">this</span>.isClicked = false; } Zapatec.EditInline.<span class="reserved">prototype</span>.keyEvent = <span class="reserved">function</span>(evt){ <span class="comment">// do nothing is widget is not active</span> <span class="reserved">if</span>(!<span class="reserved">this</span>.isActive){ <span class="reserved">return</span>; } <span class="reserved">if</span>(!evt){ evt = window.event; } var res = Zapatec.Utils.getCharFromEvent(evt); <span class="reserved">if</span>(!res){ <span class="reserved">return</span>; } <span class="reserved">if</span>(<span class="reserved">this</span>.config.hideOnEsc){ <span class="reserved">if</span>(res.charCode == 27){ <span class="comment">// ESC key</span> <span class="reserved">this</span>.hide(); <span class="reserved">return</span>; } } <span class="comment">// save content and close on ctrl+enter</span> <span class="reserved">if</span>( ( evt.ctrlKey || (typeof(evt.metaKey) != <span class="literal">'undefined'</span> && evt.metaKey) ) && res.charCode == 13 ){ <span class="reserved">this</span>.saveAndHide(); <span class="reserved">return</span>; } <span class="comment">// resize textarea according to content</span> <span class="reserved">this</span>.resizeToContent(); } <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.EditInline.<span class="reserved">prototype</span>.configure = <span class="reserved">function</span>(objArgs) { <span class="reserved">this</span>.defineConfigOption(<span class="literal">"theme"</span>, <span class="literal">""</span>); <span class="comment">// this widget does not uses themes.</span> <span class="reserved">this</span>.defineConfigOption(<span class="literal">"target"</span>, null); <span class="comment">// target element.</span> <span class="reserved">this</span>.defineConfigOption(<span class="literal">"showImmediately"</span>, true); <span class="comment">// show textarea when calling constructor using "target" config option</span> <span class="reserved">this</span>.defineConfigOption(<span class="literal">"hideOnEsc"</span>, true); <span class="comment">// hide when ESC button is pressed.</span> <span class="reserved">this</span>.defineConfigOption(<span class="literal">"hideOnClick"</span>, true); <span class="comment">// hide when user clicks outside element.</span> <span class="reserved">this</span>.defineConfigOption(<span class="literal">"editAsText"</span>, false); <span class="comment">// convert HTML entities into plain symbols on editing</span> <span class="reserved">this</span>.defineConfigOption(<span class="literal">"loadCallback"</span>); <span class="comment">// this function will be called when loading content from element. Function must accept one argument and return transformed content.</span> <span class="reserved">this</span>.defineConfigOption(<span class="literal">"saveCallback"</span>); <span class="comment">// this function will be called when saving content to element. Function must accept one argument and return transformed content.</span> <span class="reserved">this</span>.defineConfigOption(<span class="literal">"saveOnClick"</span>, true); <span class="comment">// save content if user clicks outside textarea. This function is used only if hideOnClick is true.</span> <span class="reserved">this</span>.defineConfigOption(<span class="literal">"hideTarget"</span>, true); <span class="comment">// hide target element when showing textarea.</span> <span class="comment">// Call parent method</span> Zapatec.EditInline.SUPERclass.configure.call(<span class="reserved">this</span>, objArgs); }; <span class="comment">/** * Use this function to show EditInline under element. * <span class="attrib">@param</span> {Object} target Reference to target element to edit. * <span class="attrib">@param</span> {String} newContent Default textarea content. */</span> Zapatec.EditInline.<span class="reserved">prototype</span>.show = <span class="reserved">function</span>(target){ <span class="reserved">this</span>.fireEvent(<span class="literal">"showStart"</span>); <span class="reserved">if</span>(target){ <span class="reserved">this</span>.hide(); <span class="reserved">this</span>.config.target = target; <span class="reserved">this</span>.setContent(<span class="literal">""</span>); } <span class="reserved">this</span>.isActive = true; <span class="reserved">this</span>.isClicked = !Zapatec.is_ie; <span class="reserved">this</span>.container.value = <span class="literal">""</span>; <span class="reserved">this</span>.setContent(<span class="reserved">this</span>.config.target.innerHTML); <span class="reserved">if</span>(<span class="reserved">this</span>.config.hideTarget){ <span class="reserved">this</span>.config.target.zpOrigVisibility = <span class="reserved">this</span>.config.target.style.visibility; <span class="reserved">this</span>.config.target.style.visibility = <span class="literal">"hidden"</span>; } document.body.appendChild(<span class="reserved">this</span>.container); var parentCoords = Zapatec.Utils.getElementOffset(<span class="reserved">this</span>.config.target); <span class="reserved">this</span>.container.style.left = parentCoords.left + <span class="literal">"px"</span>; <span class="reserved">this</span>.container.style.top = parentCoords.top + <span class="literal">"px"</span>; <span class="reserved">this</span>.resizeToContent(); <span class="reserved">this</span>.container.focus(); <span class="reserved">this</span>.fireEvent(<span class="literal">"showFinish"</span>); } <span class="comment">/** * Function to set textarea content * <span class="attrib">@param</span> {String} newContent */</span> Zapatec.EditInline.<span class="reserved">prototype</span>.setContent = <span class="reserved">function</span>(newContent){ <span class="reserved">if</span>(typeof(newContent) != <span class="literal">"string"</span>){ <span class="reserved">return</span>; } <span class="reserved">if</span>(<span class="reserved">this</span>.config.loadCallback){ newContent = <span class="reserved">this</span>.config.loadCallback(newContent); } <span class="reserved">if</span>(<span class="reserved">this</span>.config.editAsText){ newContent = newContent.replace(/\<br(\s*\/)?\>/ig, <span class="literal">"\n"</span>).replace(/&lt;/g, <span class="literal">"<"</span>).replace(/&gt;/g, <span class="literal">">"</span>).replace(/&amp;/g, <span class="literal">"&"</span>); } <span class="reserved">this</span>.container.value = newContent; <span class="reserved">this</span>.fireEvent(<span class="literal">"setContent"</span>, newContent); } <span class="comment">/** * Function to copy value from textarea back to element. innerHTML property * will be redefined. * <span class="attrib">@return</span> Edited content * <span class="attrib">@type</span> String */</span> Zapatec.EditInline.<span class="reserved">prototype</span>.saveContent = <span class="reserved">function</span>(){ var val = <span class="reserved">this</span>.container.value; <span class="reserved">if</span>(<span class="reserved">this</span>.config.saveCallback){ val = <span class="reserved">this</span>.config.saveCallback(val); } <span class="reserved">if</span>(<span class="reserved">this</span>.config.editAsText){ val = val.replace(/&/g, <span class="literal">"&amp;"</span>).replace(/\</g, <span class="literal">"&lt;"</span>).replace(/\>/g, <span class="literal">"&gt;"</span>).replace(/\<br(\s*\/)?\>\n/ig, <span class="literal">"\n"</span>).replace(/\n/g, <span class="literal">"<br />"</span>); } <span class="reserved">this</span>.config.target.innerHTML = val; <span class="reserved">this</span>.fireEvent(<span class="literal">"saveContent"</span>, val); <span class="reserved">return</span> <span class="reserved">this</span>.container.value; } <span class="comment">/** * Hide EditInline element */</span> Zapatec.EditInline.<span class="reserved">prototype</span>.hide = <span class="reserved">function</span>(){ <span class="reserved">if</span>(!<span class="reserved">this</span>.isActive){ <span class="reserved">return</span>; } <span class="reserved">this</span>.fireEvent(<span class="literal">"hideStart"</span>); <span class="reserved">this</span>.isActive = false; <span class="reserved">this</span>.container.parentNode.removeChild(<span class="reserved">this</span>.container); <span class="reserved">if</span>(<span class="reserved">this</span>.config.hideTarget){ <span class="reserved">if</span>(Zapatec.is_opera && !<span class="reserved">this</span>.config.target.zpOrigVisibility){ <span class="reserved">this</span>.config.target.zpOrigVisibility = <span class="literal">""</span>; } <span class="reserved">this</span>.config.target.style.visibility = <span class="reserved">this</span>.config.target.zpOrigVisibility; <span class="reserved">this</span>.config.target.zpOrigVisibility = null; } <span class="reserved">this</span>.config.target = null; <span class="reserved">this</span>.fireEvent(<span class="literal">"hideFinish"</span>); } <span class="comment">/** * Copy textarea content back to element (innerHTML property will be used) and * hide widget. */</span> Zapatec.EditInline.<span class="reserved">prototype</span>.saveAndHide = <span class="reserved">function</span>(){ <span class="reserved">this</span>.saveContent(); <span class="reserved">this</span>.hide(); <span class="reserved">this</span>.fireEvent(<span class="literal">"saveAndHide"</span>); } <span class="comment">/** * <span class="attrib">@private</span> * Resize textarea size according to content. */</span> Zapatec.EditInline.<span class="reserved">prototype</span>.resizeToContent = <span class="reserved">function</span>(){ var val = <span class="reserved">this</span>.container.value; var tmp = val.split(<span class="literal">'\n'</span>); var maxLength = tmp[0].length; <span class="reserved">for</span>(var ii = 1; ii < tmp.length; ii++){ <span class="reserved">if</span>(tmp[ii].length > maxLength){ maxLength = tmp[ii].length; } } <span class="reserved">this</span>.container.cols = maxLength + (Zapatec.is_ie || Zapatec.is_khtml ? 1 : 0); <span class="reserved">this</span>.container.rows = tmp.length + (Zapatec.is_ie || Zapatec.is_khtml || Zapatec.is_opera ? 1 : 0); }</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>