0byt3m1n1
Path:
/
data
/
applications
/
aps.bak
/
coppermine
/
1.5.12-0
/
standard
/
htdocs
/
docs
/
se
/
[
Home
]
File: dev_javascript.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head> <title>Javascript in Coppermine - Coppermine Photo Gallery - Documentation & Manual</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="language" content="en" /> <meta name="copyright" content="Coppermine dev team" /> <meta name="description" content="Javascript: This part of documentation explains how the javascript is organized in coppermine gallery. This part of the documentation is not meant for end users of Coppermine, but only for developers. There is no support for this section, it comes as-is." /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta http-equiv="imagetoolbar" content="no" /> <!-- SVN version info: Coppermine version: 1.5.12 $HeadURL: https://coppermine.svn.sourceforge.net/svnroot/coppermine/trunk/cpg1.5.x/docs/se/dev_javascript.htm $ $Revision: 8154 $ --> <link rel="stylesheet" type="text/css" href="../style/style.css" media="all" /> <link rel="stylesheet" type="text/css" href="../style/screen.css" media="screen" /> <link rel="stylesheet" type="text/css" href="../style/print.css" media="print" /> <link rel="shortcut icon" href="../favicon.ico" /> <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.treeview.js" type="text/javascript"></script> <script src="script.js" type="text/javascript"></script> </head> <body> <h1 id="docheader">Coppermine Photo Gallery v1.5.x: Documentation and Manual</h1> <div id="toc"> <a href="toc.htm">Table of Contents</a> </div> <div id="doc_en_only">No translation available</div> <a name="javascript"></a><h1>Javascript in Coppermine<a href="#javascript" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h1> <p>A lot of pages in coppermine uses javascript for client side enhancements and validations. This guide will help developers to understand how javascript is organized in coppermine.</p> <a name="dev_javascript_target_audience"></a><h2>Target audience<a href="#dev_javascript_target_audience" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>This part of the documentation is not meant for end users of Coppermine, but only for developers. There is no support for this section, it comes as-is.</p> <a name="dev_javascript_files_location"></a><h2>Javascript files location and organization<a href="#dev_javascript_files_location" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <img src="../images/jquery.png" border="0" alt="" width="200" height="50" title="jQuery" align="right" style="padding-left:20px" /> <ul> <li>JavaScript in cpg1.5.x is using the <a href="http://jquery.com/" rel="external" class="external">jQuery</a> library. For details, please refer to the corresponding credits section of the docs that explains the <a href="credits.htm#codebase">freeware code used in Coppermine</a></li> <li>All javascript core files reside in <tt class="code">your_coppermine_folder/js</tt> folder</li> <li><tt class="code">your_coppermine_folder/js/scripts.js</tt> is the site wide javascript file containg code which is common to most of the pages</li> <li>All page specific javascript code goes in <tt class="code">your_coppermine_folder/js/pagename.js</tt> (Where pagename.php is the page in question).</li> <li>Starting from cpg1.5, javascript will be unobtrusive i.e. all javascript will reside in respective .js file and there will be no inline javascript code</li> </ul> <a name="dev_javascript_files_location_todo"></a><h3>TODO<a href="#dev_javascript_files_location_todo" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <p>There is still lot of javascript inline with html (from cpg1.4). This javascript needs to be separated into their own files</p> <a name="dev_javascript_include_files"></a><h2>How to include javascript files<a href="#dev_javascript_include_files" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>Javascript files can be included from within php code by calling <tt class="code">js_include()</tt> function. <div class="cpg_example"> <pre class="code"> // This line of code will include displayimage.js file js_include('js/displayimage.js'); </pre> </div> However there is a catch in using this function. This function should be called before the <tt class="code">pageheader()</tt> function is called. The actual inclusion of javascript files is done in <tt class="code">pageheader()</tt> function and that is the reason all js inclusion should be done before that.</p> <a name="dev_javascript_include_files_plugin"></a><h3>How to include JavaScript files in plugins<a href="#dev_javascript_include_files_plugin" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <p>If you need to add a JavaScript file for a plugin, the 'page_start' plugin action might be used.</p> <div class="cpg_example"> Here's an example how to add an extra JavaScript file (located at <tt class="code">./plugins/your_plugin/your_javascript_file.js</tt>) to all pages using a plugin. In <tt class="code">./plugins/your_plugin/codebase.php</tt>: <pre>$thisplugin->add_action('page_start','custom_function_to_include_js'); function custom_function_to_include_js() { global $JS; // Don't forget to make that variable global when using from inside functions $JS['includes'][] = 'plugins/your_plugin/your_javascript_file.js'; }</pre> </div> <p>Technically, inline JavaScript is possible as well, but not recommended.</p> <a name="dev_javascript_php_vars"></a><h2>How to pass PHP variables to included javascript<a href="#dev_javascript_php_vars" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>If you need to pass dynamic data from PHP code (e.g. a language string that resides in a PHP variable) to the JavaScript code that resides in an external file included with the method explained above, you can use the function <tt class="code">set_js_var()</tt> that get's defined in include/functions.inc.php.</p> <div class="cpg_example">If you need to pass the content of the variable <tt class="code">$foo</tt> to JS, use this code: <pre class="code"><?php $foo = 'bar'; set_js_var('php_foo', $foo); ?></pre> </div> <p>Keep in <abbr title="internationalization">i18n</abbr> in mind, especially for the strings passed from language files: be particularly mindfull on properly escaping single quotes (apostrophes) that may reside in other languages than the one you're testing with.</p> <a name="dev_javascript_autostart"></a><h2>Autostart JavaScript<a href="#dev_javascript_autostart" title="Link to this section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>In "traditional" JavaScript, there are several methods to make JavaScript code execute when the page is being loaded, using the pageLoad event. This used to cause issues and incompatibilities. With cpg1.5.x using the jQuery library, it has become very straightforward to come up with JavaScript autostarts: every piece of JavaScript code that you want to see executed on page load should use the "document ready" construct: wrap all autostart code into</p> <pre>$(document).ready(function(){</pre> and <pre>});</pre> <p>The advantage of this method is that jquery will take care of triggering the autostart functions - there can be several of those "document ready" constructs, even in different <tt class="code">.js</tt> files.</p> <div id="doc_footer"> <div class="doc_info_wrapper"> <span id="doc_last_changed">$LastChangedDate: 2011-01-02 20:44:22 +0100 (So, 02 Jan 2011) $</span> <span id="doc_revision">$Revision: 8154 $</span> </div> </div> </body> </html>