data/TWiki/BehaviourContrib.txt,v
author Colas Nahaboo <colas@nahaboo.net>
Sat, 26 Jan 2008 15:50:53 +0100
changeset 0 414e01d06fd5
child 1 e2915a7cbdfa
permissions -rw-r--r--
RELEASE 4.2.0 freetown
     1 head	1.2;
     2 access;
     3 symbols;
     4 locks; strict;
     5 comment	@# @;
     6 
     7 
     8 1.2
     9 date	2008.01.22.03.21.31;	author TWikiContributor;	state Exp;
    10 branches;
    11 next	1.1;
    12 
    13 1.1
    14 date	2007.01.16.04.11.59;	author TWikiContributor;	state Exp;
    15 branches;
    16 next	;
    17 
    18 
    19 desc
    20 @buildrelease
    21 @
    22 
    23 
    24 1.2
    25 log
    26 @buildrelease
    27 @
    28 text
    29 @%META:TOPICINFO{author="TWikiContributor" date="1183913691" format="1.1" reprev="1." version="2"}%
    30 ---+!! !Behaviour Javascript framework Contrib
    31 
    32 This contrib packages the third-party =Behaviour= Javascript event library, available from http://bennolan.com/behaviour/.
    33 
    34 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).
    35 
    36 %TOC{title="On this page:"}%
    37 
    38 
    39 ---++ Introduction
    40 From the website:
    41 <blockquote>
    42 After all the work of WASP and others to promote clean markup, valid pages and graceful degradation via css - it sucks that we're going back to tag soup days by throwing javascript tags into our html.
    43 
    44 The better way to do javascript is to do it unobtrusively. PPK and Simon Willison have been recommending this approach for ages. And it's definitely the way to go. The only problem is that it's a bit of a pain in the ass.
    45 
    46 That's why I came up with Behaviour - my solution to unobtrusive javascript behaviours.
    47 
    48 *How does it work?*
    49 
    50 Behaviour lets you use CSS selectors to specify elements to add javascript events to. This means that instead of writing:
    51 
    52 <verbatim>
    53 <li>
    54 	<a onclick="this.parentNode.removeChild(this)" href="#">
    55 		Click me to delete me
    56 	</a>
    57 </li>
    58 </verbatim>
    59 
    60 You can use:
    61 
    62 <verbatim>
    63 <ul id="example">
    64 	<li>
    65 		<a href="/someurl">Click me to delete me</a>
    66 	</li>
    67 </ul>
    68 </verbatim>
    69 
    70 And then use css selectors to select that element and add javascript functions to it.
    71 
    72 <verbatim>
    73 var myrules = {
    74 	'#example li' : function(el){
    75 		el.onclick = function(){
    76 			this.parentNode.removeChild(this);
    77 
    78 		}
    79 	}
    80 };
    81 
    82 Behaviour.register(myrules);
    83 </verbatim>
    84 </blockquote>
    85 
    86 
    87 
    88 ---++ Usage
    89 Include the javascript file:
    90 
    91 <blockquote>
    92 <verbatim>
    93 <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/BehaviourContrib/behaviour.js"></script>
    94 </verbatim>
    95 </blockquote>
    96 
    97 In your code you create a "rules" object, with sub-objects for each html element class name or id:
    98 <blockquote>
    99 <verbatim>
   100 var myrules = {
   101 	'.classname' : function(element) {
   102 		// element event
   103 		element.onclick = function() {
   104 			// code here
   105 		}
   106 	},
   107 	
   108 	'#id' : function(element) {
   109 		// element event
   110 		element.onclick = function() {
   111 			// code here
   112 		}
   113 	}
   114 };
   115 </verbatim>
   116 
   117 Or use nested identifiers:
   118 
   119 <verbatim>
   120 var myrules = {
   121 	'.menu li a' : function(element) {
   122 		element.onclick = function() {
   123 			// code here
   124 		}
   125 	}
   126 };
   127 </verbatim>
   128 </blockquote>
   129 
   130 Apply the rules with:
   131 
   132 <blockquote>
   133 <verbatim>
   134 Behaviour.register(myrules);
   135 </verbatim>
   136 </blockquote>
   137 
   138 
   139 
   140 ---+++ Example
   141 If we have a 'normal' link to TWiki Web hometopic: [[%TWIKIWEB%.%HOMETOPIC%][TWiki Web Home]], 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.
   142 
   143 <blockquote>
   144 <verbatim>
   145 <div id="demoblock" style="padding:1em; width:100px; text-align:center;">
   146 MOUSE OVER ME
   147 </div>
   148 
   149 <script type="text/javascript">
   150 // <![CDATA[
   151 var myrules = {
   152 	'#demoblock' : function(el) {
   153 		var defaultColor = '#A3D6F8';
   154 		var highlightColor = '#4A7FB5';
   155 		
   156 		el.style.backgroundColor = defaultColor;
   157 		
   158 		el.onmouseover = function() {
   159 			this.style.backgroundColor = highlightColor;
   160 			return false;
   161 		}
   162 		el.onmouseout = function() {
   163 			this.style.backgroundColor = defaultColor;
   164 			return false;
   165 		}
   166 	},
   167 	'#demoblock span' : function(el) {
   168 		
   169 		var text = el.innerHTML;
   170 		
   171 		var fisherYates = function (inArray) {
   172 		  var i = inArray.length;
   173 		  if ( i == 0 ) return false;
   174 		  while ( --i ) {
   175 			 var j = Math.floor( Math.random() * ( i + 1 ) );
   176 			 var tempi = inArray[i];
   177 			 var tempj = inArray[j];
   178 			 inArray[i] = tempj;
   179 			 inArray[j] = tempi;
   180 		   }
   181 		}
   182 		
   183 		var randomize = function(inText) {
   184 			var letters = inText.split('');
   185 			fisherYates(letters);
   186 			return letters.join('');
   187 		}
   188 		el.onmouseover = function() {
   189 			this.innerHTML = randomize(text);
   190 			return false;
   191 		}
   192 		el.onmouseout = function() {
   193 			this.innerHTML = text;
   194 			return false;
   195 		}
   196 	}
   197 };
   198 Behaviour.register(myrules);
   199 // ]]>
   200 </script>
   201 </verbatim>
   202 
   203 Creates:
   204 
   205 <div id="demoblock" style="padding:1em; width:150px; text-align:center;">
   206 <span>MOUSE OVER ME</span>
   207 </div>
   208 
   209 <script type="text/javascript">
   210 // <![CDATA[
   211 var myrules = {
   212 	'#demoblock' : function(el) {
   213 		var defaultColor = '#A3D6F8';
   214 		var highlightColor = '#4A7FB5';
   215 		
   216 		el.style.backgroundColor = defaultColor;
   217 		
   218 		el.onmouseover = function() {
   219 			this.style.backgroundColor = highlightColor;
   220 			return false;
   221 		}
   222 		el.onmouseout = function() {
   223 			this.style.backgroundColor = defaultColor;
   224 			return false;
   225 		}
   226 	},
   227 	'#demoblock span' : function(el) {
   228 		
   229 		var text = el.innerHTML;
   230 		
   231 		var fisherYates = function (inArray) {
   232 		  var i = inArray.length;
   233 		  if ( i == 0 ) return false;
   234 		  while ( --i ) {
   235 			 var j = Math.floor( Math.random() * ( i + 1 ) );
   236 			 var tempi = inArray[i];
   237 			 var tempj = inArray[j];
   238 			 inArray[i] = tempj;
   239 			 inArray[j] = tempi;
   240 		   }
   241 		}
   242 		
   243 		var randomize = function(inText) {
   244 			var letters = inText.split('');
   245 			fisherYates(letters);
   246 			return letters.join('');
   247 		}
   248 		el.onmouseover = function() {
   249 			this.innerHTML = randomize(text);
   250 			return false;
   251 		}
   252 		el.onmouseout = function() {
   253 			this.innerHTML = text;
   254 			return false;
   255 		}
   256 	}
   257 };
   258 Behaviour.register(myrules);
   259 // ]]>
   260 </script>
   261 
   262 
   263 ---+++ Leaking danger
   264 Behaviour code leaks memory on Windows Explorer prior to version 7. To prevent leaking, set the element variable to =null=:
   265 <blockquote>
   266 <verbatim>
   267 var myrules = {
   268 	'table.test td' : function(element) {
   269 		element.onmouseover = function() {
   270 			this.style.backgroundColor = highlightColor;
   271 			return false;
   272 		}
   273 		element = null; // by setting this IE will not leak  
   274 	}
   275 };	
   276 Behaviour.register(myrules);
   277 </verbatim>
   278 </blockquote>
   279 
   280 
   281 ---++ Development
   282    * [[http://groups.google.com/group/behaviour][Google Groups: Behaviour Javascript Library]]
   283    * [[http://www.nabble.com/Behaviour-Javascript-Library-f16264.html][Nabble - Behaviour Javascript Library forum & mailing list archive]]
   284    * [[http://groups.google.com/group/behaviour/browse_thread/thread/e9828f9fdb482ac1/8ca704730053e23f?#8ca704730053e23f][Behaviour2]] - update in the making, since 2006
   285 
   286 
   287 ---++ License
   288 Behaviour is freely distributable under the terms of an BSD license.
   289 For details see the Behaviour website.
   290 
   291 
   292 
   293 ---++ Links
   294    * [[http://bennolan.com/behaviour/][Behaviour website]]
   295    * [[http://groups.google.com/group/behaviour][Behaviour Google Group]]
   296 
   297 ---++ Installation Instructions
   298 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.
   299 
   300 Like many other TWiki extensions, this module is shipped with a fully
   301 automatic installer script written using the Build<nop>Contrib.
   302    * If you have TWiki 4.2 or later, you can install from the =configure= interface (Go to Plugins->Find More Extensions)
   303       * See the [[http://twiki.org/cgi-bin/view/Plugins/BuildContribInstallationSupplement][installation supplement]] on TWiki.org for more information.
   304    * If you have any problems, then you can still install manually from the command-line:
   305       1 Download one of the =.zip= or =.tgz= archives
   306       1 Unpack the archive in the root directory of your TWiki installation.
   307       1 Run the installer script ( =perl &lt;module&gt;_installer= )
   308       1 Run =configure= and enable the module, if it is a plugin.
   309       1 Repeat for any missing dependencies.
   310    * If you are *still* having problems, then instead of running the installer script:
   311       1 Make sure that the file permissions allow the webserver user to access all files.
   312       1 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)
   313       1 Manually edit !LocalSite.cfg to set any configuration variables.
   314 
   315 %IF{"defined 'SYSTEMWEB'" else="<div class='twikiAlert'>%X% WARNING: SYSTEMWEB is not defined in this TWiki. Please add these definitions to your %MAINWEB%.TWikiPreferences, if they are not already there:<br><pre>   * <nop>Set SYSTEMWEB = %<nop>TWIKIWEB%<br>   * <nop>Set USERSWEB = %<nop>MAINWEB%</pre></div>"}%
   316 
   317 
   318 ---++ Contrib Settings
   319    * Set SHORTDESCRIPTION = =Behaviour= Javascript event library to create javascript based interactions that degrade well when javascript is not available
   320 
   321 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.
   322 
   323 ---++ Contrib Info
   324 |  Author: | TWiki:Main.ArthurClemens |
   325 |  Copyright: | Code: =behaviour.js= version 1.1 - Copyright (c) Ben Nolan and Simon Willison. TWiki distribution and updates/additions: TWiki:Main.ArthurClemens. |
   326 |  License: | BSD |
   327 |  Version: | 15675 (22 Jan 2008) |
   328 |  Dependencies: | None |
   329 |  Contrib&nbsp;Version: | 1.3.1 |
   330 |  Change&nbsp;History: | <!-- specify latest version first -->&nbsp; |
   331 |  17 Oct 2007 | 1.3 Replaced "faster code" by other code from Dean Edwards, [[ packed by http://groups.google.com/group/behaviour/browse_thread/thread/85137977bedf5ed/3cf3ba8065d41a8c#3cf3ba8065d41a8c][Raymond Irving]]. |
   332 |  02 Jul 2007 | 1.2 Integrated other faster code by Dean Edwards: [[http://dean.edwards.name/weblog/2006/06/again/][faster onload (again)]]. |
   333 |  08 Mar 2007 | 1.1 Integrated code by Dean Edwards (see [[#CodeUpdate][Code update version 1.1 with faster DOM queries]]). |
   334 |  04 Jun 2006 | 1.0  First Version. Included Behaviour version: 1.1. |
   335 |  Home: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC% |
   336 |  Feedback: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev |
   337 |  Appraisal: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal |
   338 
   339 __Related Topics:__ %TWIKIWEB%.TWikiPreferences
   340 
   341 %META:FILEATTACHMENT{name="behaviour.js" attr="" autoattached="1" comment="" date="1162075796" path="behaviour.compressed.js" size="2902" user="UnknownUser" version=""}%
   342 
   343 @
   344 
   345 
   346 1.1
   347 log
   348 @buildrelease
   349 @
   350 text
   351 @d1 1
   352 a1 1
   353 %META:TOPICINFO{author="TWikiContributor" date="1162394433" format="1.1" version="1"}%
   354 d6 1
   355 a6 1
   356 Behaviour is suited to create javascript based interaction that degrades well when javascript is not available.
   357 d8 1
   358 a8 1
   359 Javascript file: [[%PUBURL%/%TWIKIWEB%/%TOPIC%/behaviour.js][behaviour.js]] (8.1K). The [[%PUBURL%/%TWIKIWEB%/%TOPIC%/behaviour.compressed.js][compressed javascript file]] (2.9K) has been processed by [[http://alex.dojotoolkit.org/shrinksafe/][ShrinkSafe]].
   360 a9 1
   361 %TOC{title="On this page:"}%
   362 d58 2
   363 d65 1
   364 a65 1
   365 <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/BehaviourContrib/behaviour.compressed.js"></script>
   366 d111 2
   367 a112 1
   368 ---++ Example
   369 d117 3
   370 a119 1
   371 <span class="link%TWIKIWEB%%HOMETOPIC%">[[%TWIKIWEB%.%HOMETOPIC%][TWiki Web Home]]</span>
   372 d124 42
   373 a165 4
   374 	'.link%TWIKIWEB%%HOMETOPIC% a' : function(el){
   375 		el.onclick = function() {
   376 			// open in a popup with no other attributes than template 'viewplain'
   377 			launchTheWindow(this.href,null,null,null,"viewplain");
   378 a169 1
   379 
   380 a174 3
   381 The class name =link%<nop>TWIKIWEB%%<nop>HOMETOPIC%= will get expanded to =link%TWIKIWEB%%HOMETOPIC%=
   382 </blockquote>
   383 
   384 d177 3
   385 a179 1
   386 <span class="link%TWIKIWEB%%HOMETOPIC%">[[%TWIKIWEB%.%HOMETOPIC%][TWiki Web Home]]</span>
   387 d184 42
   388 a225 4
   389 	'.link%TWIKIWEB%%HOMETOPIC% a' : function(el){
   390 		el.onclick = function() {
   391 			// open in a popup with no other attributes than template 'viewplain'
   392 			launchTheWindow(this.href,null,null,null,"viewplain");
   393 a229 1
   394 
   395 d234 19
   396 d255 3
   397 a257 1
   398    * [[http://dean.edwards.name/weblog/2006/03/faster/][Dean Edwards: Faster DOM Queries]] - with a speed-up hack to Behaviour
   399 d261 3
   400 a263 1
   401 For details, see the Behaviour website.
   402 d268 27
   403 a294 1
   404    
   405 d296 11
   406 a306 6
   407 
   408 | Author: | TWiki:Main.ArthurClemens |
   409 | Copyright: | version 1.1 - Copyright (c) Ben Nolan and Simon Willison |
   410 | License: | BSD |
   411 | Dependencies: | None |
   412 | 4 June 2006| 1.000 First Version. Included Behaviour version: 1.1 |
   413 d313 2
   414 a314 2
   415 %META:FILEATTACHMENT{name="behaviour.compressed.js" attr="" autoattached="1" comment="" date="1162075796" path="behaviour.compressed.js" size="2902" user="UnknownUser" version=""}%
   416 %META:FILEATTACHMENT{name="behaviour.js" attr="" autoattached="1" comment="" date="1161199153" path="behaviour.js" size="8149" user="UnknownUser" version=""}%
   417 @