buildrelease
[openafs-wiki.git] / TWiki / BehaviourContrib.mdwn
index 1c674ba..60360fa 100644 (file)
@@ -2,17 +2,20 @@
 
 This contrib packages the third-party `Behaviour` Javascript event library, available from <http://bennolan.com/behaviour/>.
 
-Behaviour is suited to create javascript based interaction that degrades well when javascript is not available.
-
-Javascript file: [behaviour.js](http://www.dementia.org/twiki//view/TWiki/%TOPIC%/behaviour.js) (8.1K). The [compressed javascript file](http://www.dementia.org/twiki//view/TWiki/%TOPIC%/behaviour.compressed.js) (2.9K) has been processed by [ShrinkSafe](http://alex.dojotoolkit.org/shrinksafe/).
+Behaviour uses CSS selectors to subscribe to javascript event handlers. This allows to create clean code, separated from HTML (and well suited to create javascript based interaction that degrades nicely when javascript is not available).
 
 <div><span>On this page:</span><ul>
     <li><a href="#Introduction"> Introduction</a></li>
-    <li><a href="#Usage"> Usage</a></li>
-    <li><a href="#Example"> Example</a></li>
+    <li><a href="#Usage"> Usage</a><ul>
+        <li><a href="#Example"> Example</a></li>
+        <li><a href="#Leaking danger"> Leaking danger</a></li>
+      </ul>
+    </li>
     <li><a href="#Development"> Development</a></li>
     <li><a href="#License"> License</a></li>
     <li><a href="#Links"> Links</a></li>
+    <li><a href="#Installation Instructions"> Installation Instructions</a></li>
+    <li><a href="#Contrib Settings"> Contrib Settings</a></li>
     <li><a href="#Contrib Info"> Contrib Info</a></li>
   </ul>
 </div>
@@ -62,7 +65,7 @@ From the website:
 
 Include the javascript file:
 
-> <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/BehaviourContrib/behaviour.compressed.js"></script>
+> <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/BehaviourContrib/behaviour.js"></script>
 
 In your code you create a "rules" object, with sub-objects for each html element class name or id:
 
@@ -96,83 +99,191 @@ Apply the rules with:
 
 > Behaviour.register(myrules);
 
-## <a name="Example"></a> Example
+### <a name="Example"></a> Example
 
 If we have a 'normal' link to TWiki Web hometopic: [[TWiki Web Home|TWiki/WebHome]], we can use javascript to make it open a popup window. When javascript is not available the link behaviour defaults to opening the page in the current window.
 
-> <span class="link%TWIKIWEB%%HOMETOPIC%">[[%TWIKIWEB%.%HOMETOPIC%][TWiki Web Home]]</span>
+> <div id="demoblock" style="padding:1em; width:100px; text-align:center;">
+>     MOUSE OVER ME
+>     </div>
 >
 >     <script type="text/javascript">
 >     // <![CDATA[
 >     var myrules = {
->        '.link%TWIKIWEB%%HOMETOPIC% a' : function(el){
->           el.onclick = function() {
->              // open in a popup with no other attributes than template 'viewplain'
->              launchTheWindow(this.href,null,null,null,"viewplain");
+>        '#demoblock' : function(el) {
+>           var defaultColor = '#A3D6F8';
+>           var highlightColor = '#4A7FB5';
+>
+>           el.style.backgroundColor = defaultColor;
+>
+>           el.onmouseover = function() {
+>              this.style.backgroundColor = highlightColor;
+>              return false;
+>           }
+>           el.onmouseout = function() {
+>              this.style.backgroundColor = defaultColor;
+>              return false;
+>           }
+>        },
+>        '#demoblock span' : function(el) {
+>
+>           var text = el.innerHTML;
+>
+>           var fisherYates = function (inArray) {
+>             var i = inArray.length;
+>             if ( i == 0 ) return false;
+>             while ( --i ) {
+>               var j = Math.floor( Math.random() * ( i + 1 ) );
+>               var tempi = inArray[i];
+>               var tempj = inArray[j];
+>               inArray[i] = tempj;
+>               inArray[j] = tempi;
+>              }
+>           }
+>
+>           var randomize = function(inText) {
+>              var letters = inText.split('');
+>              fisherYates(letters);
+>              return letters.join('');
+>           }
+>           el.onmouseover = function() {
+>              this.innerHTML = randomize(text);
+>              return false;
+>           }
+>           el.onmouseout = function() {
+>              this.innerHTML = text;
 >              return false;
 >           }
 >        }
 >     };
->
 >     Behaviour.register(myrules);
 >     // ]]>
 >     </script>
 >
-> The class name `link%TWIKIWEB%%HOMETOPIC%` will get expanded to `linkTWikiWebHome`
-
-Creates:
-
-<span>[[TWiki Web Home|TWiki/WebHome]]</span>
-
-## <a name="Development"></a> Development
-
-- [Google Groups: Behaviour Javascript Library](http://groups.google.com/group/behaviour)
-- [Dean Edwards: Faster DOM Queries](http://dean.edwards.name/weblog/2006/03/faster/) - with a speed-up hack to Behaviour
-
-## <a name="License"></a> License
-
-Behaviour is freely distributable under the terms of an BSD license. For details, see the Behaviour website.
-
-## <a name="Links"></a> Links
-
-- [Behaviour website](http://bennolan.com/behaviour/)
-- [Behaviour Google Group](http://groups.google.com/group/behaviour)
-
-## <a name="Contrib Info"></a> Contrib Info
-
-<table border="1" cellpadding="0" cellspacing="0">
-  <tr>
-    <td> Author: </td>
-    <td> TWiki:Main.ArthurClemens </td>
-  </tr>
-  <tr>
-    <td> Copyright: </td>
-    <td> version 1.1 - Copyright (c) Ben Nolan and Simon Willison </td>
-  </tr>
-  <tr>
-    <td> License: </td>
-    <td> BSD </td>
-  </tr>
-  <tr>
-    <td> Dependencies: </td>
-    <td> None </td>
-  </tr>
-  <tr>
-    <td> 4 June 2006 </td>
-    <td> 1.000 First Version. Included Behaviour version: 1.1 </td>
-  </tr>
-  <tr>
-    <td align="right"> Home: </td>
-    <td><a href="http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%" target="_top">http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%</a></td>
-  </tr>
-  <tr>
-    <td align="right"> Feedback: </td>
-    <td><a href="http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev" target="_top">http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev</a></td>
-  </tr>
-  <tr>
-    <td align="right"> Appraisal: </td>
-    <td><a href="http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal" target="_top">http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal</a></td>
-  </tr>
-</table>
-
-**_Related Topics:_** [[TWikiPreferences]]
+> Creates:
+>
+> <div id="demoblock" style="padding: 1em; width: 150px; text-align: center"><span>MOUSE OVER ME</span></div>
+>
+> ### <a name="Leaking danger"></a> Leaking danger
+>
+> Behaviour code leaks memory on Windows Explorer prior to version 7. To prevent leaking, set the element variable to
+>
+> `null`
+>
+> :
+>
+> > var myrules = {
+> >        'table.test td' : function(element) {
+> >           element.onmouseover = function() {
+> >              this.style.backgroundColor = highlightColor;
+> >              return false;
+> >           }
+> >           element = null; // by setting this IE will not leak
+> >        }
+> >     };
+> >     Behaviour.register(myrules);
+>
+> ## <a name="Development"></a> Development
+>
+> - [Google Groups: Behaviour Javascript Library](http://groups.google.com/group/behaviour)
+> - [Nabble - Behaviour Javascript Library forum &amp; mailing list archive](http://www.nabble.com/Behaviour-Javascript-Library-f16264.html)
+> - [Behaviour2](http://groups.google.com/group/behaviour/browse_thread/thread/e9828f9fdb482ac1/8ca704730053e23f?#8ca704730053e23f) - update in the making, since 2006
+>
+> ## <a name="License"></a> License
+>
+> Behaviour is freely distributable under the terms of an BSD license. For details see the Behaviour website.
+>
+> ## <a name="Links"></a> Links
+>
+> - [Behaviour website](http://bennolan.com/behaviour/)
+> - [Behaviour Google Group](http://groups.google.com/group/behaviour)
+>
+> ## <a name="Installation Instructions"></a> Installation Instructions
+>
+> You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server where TWiki is running.
+>
+> Like many other TWiki extensions, this module is shipped with a fully automatic installer script written using the BuildContrib.
+>
+> - If you have TWiki 4.2 or later, you can install from the `configure` interface (Go to Plugins-&gt;Find More Extensions)
+>   - See the [installation supplement](http://twiki.org/cgi-bin/view/Plugins/BuildContribInstallationSupplement) on TWiki.org for more information.
+> - If you have any problems, then you can still install manually from the command-line:
+>   1. Download one of the `.zip` or `.tgz` archives
+>   2. Unpack the archive in the root directory of your TWiki installation.
+>   3. Run the installer script ( `perl <module>_installer` )
+>   4. Run `configure` and enable the module, if it is a plugin.
+>   5. Repeat for any missing dependencies.
+> - If you are **still** having problems, then instead of running the installer script:
+>   1. Make sure that the file permissions allow the webserver user to access all files.
+>   2. Check in any installed files that have existing `,v` files in your existing install (take care **not** to lock the files when you check in)
+>   3. Manually edit LocalSite.cfg to set any configuration variables.
+>
+> <div class="twikiAlert">%X% WARNING: SYSTEMWEB is not defined in this TWiki. Please add these definitions to your [[Main/TWikiPreferences]], if they are not already there:<br /><pre>   * Set SYSTEMWEB = %TWIKIWEB%<br />   * Set USERSWEB = %MAINWEB%</pre></div>
+>
+> ## <a name="Contrib Settings"></a> Contrib Settings
+>
+> - Set SHORTDESCRIPTION = `Behaviour` Javascript event library to create javascript based interactions that degrade well when javascript is not available
+>
+> You can also set the global TWiki variable BEHAVIOURCONTRIB\_DEBUG to 1 to make the contrib use uncompressed javascript sources, in the event of problems.
+>
+> ## <a name="Contrib Info"></a> Contrib Info
+>
+> <table border="1" cellpadding="0" cellspacing="0">
+>   <tr>
+>     <td align="right"> Author: </td>
+>     <td> TWiki:Main.ArthurClemens </td>
+>   </tr>
+>   <tr>
+>     <td align="right"> Copyright: </td>
+>     <td> Code: <code>behaviour.js</code> version 1.1 - Copyright (c) Ben Nolan and Simon Willison. TWiki distribution and updates/additions: TWiki:Main.ArthurClemens. </td>
+>   </tr>
+>   <tr>
+>     <td align="right"> License: </td>
+>     <td> BSD </td>
+>   </tr>
+>   <tr>
+>     <td align="right"> Version: </td>
+>     <td> 15675 (22 Jan 2008) </td>
+>   </tr>
+>   <tr>
+>     <td align="right"> Dependencies: </td>
+>     <td> None </td>
+>   </tr>
+>   <tr>
+>     <td align="right"> Contrib Version: </td>
+>     <td> 1.3.1 </td>
+>   </tr>
+>   <tr>
+>     <td align="right"> Change History: </td>
+>     <td>  </td>
+>   </tr>
+>   <tr>
+>     <td align="right"> 17 Oct 2007 </td>
+>     <td> 1.3 Replaced "faster code" by other code from Dean Edwards, [[ packed by <a href="http://groups.google.com/group/behaviour/browse_thread/thread/85137977bedf5ed/3cf3ba8065d41a8c#3cf3ba8065d41a8c][Raymond" target="_top">http://groups.google.com/group/behaviour/browse_thread/thread/85137977bedf5ed/3cf3ba8065d41a8c#3cf3ba8065d41a8c][Raymond</a> Irving]]. </td>
+>   </tr>
+>   <tr>
+>     <td align="right"> 02 Jul 2007 </td>
+>     <td> 1.2 Integrated other faster code by Dean Edwards: <a href="http://dean.edwards.name/weblog/2006/06/again/" target="_top">faster onload (again)</a>. </td>
+>   </tr>
+>   <tr>
+>     <td align="right"> 08 Mar 2007 </td>
+>     <td> 1.1 Integrated code by Dean Edwards (see [[Main/WebHome#CodeUpdate]]). </td>
+>   </tr>
+>   <tr>
+>     <td align="right"> 04 Jun 2006 </td>
+>     <td> 1.0 First Version. Included Behaviour version: 1.1. </td>
+>   </tr>
+>   <tr>
+>     <td align="right"> Home: </td>
+>     <td><a href="http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%" target="_top">http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%</a></td>
+>   </tr>
+>   <tr>
+>     <td align="right"> Feedback: </td>
+>     <td><a href="http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev" target="_top">http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev</a></td>
+>   </tr>
+>   <tr>
+>     <td align="right"> Appraisal: </td>
+>     <td><a href="http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal" target="_top">http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal</a></td>
+>   </tr>
+> </table>
+>
+> **_Related Topics:_** [[TWikiPreferences]]