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