Difference: BehaviourContrib (1 vs. 10)

Revision 102018-07-05 - TWikiContributor

 

Behaviour Javascript Framework Contrib

<--
   Contributions to this TWiki extension are appreciated. Please update the contrib page
   at http://twiki.org/cgi-bin/view/Plugins/BehaviourContrib or provide feedback
   at http://twiki.org/cgi-bin/view/Plugins/BehaviourContribDev.
   If you are a TWiki contributor please update the extension in the SVN repository.
-->
Behaviour Javascript event library to create Javascript based interactions that degrade well when Javascript is not available

Introduction

This contrib packages the third-party Behaviour Javascript event library, available from http://bennolan.com/behaviour/.

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).

From the website:

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.

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.

That's why I came up with Behaviour - my solution to unobtrusive javascript behaviours.

How does it work?

Behaviour lets you use CSS selectors to specify elements to add javascript events to. This means that instead of writing:

<li>
 <a onclick="this.parentNode.removeChild(this)" href="#">
  Click me to delete me
 </a>
</li>

You can use:

<ul id="example">
 <li>
  <a href="/someurl">Click me to delete me</a>
 </li>
</ul>

And then use css selectors to select that element and add javascript functions to it.

var myrules = {
 '#example li' : function(el){
  el.onclick = function(){
   this.parentNode.removeChild(this);
  }
 }
};
Behaviour.register(myrules);

Usage

Include the Javascript file:

<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/BehaviourContrib/behaviour.js"></script>

In your code you create a "rules" object, with sub-objects for each html element class name or id:

var myrules = {
 '.classname' : function(element) {
  // element event
  element.onclick = function() {
   // code here
  }
 },
 '#id' : function(element) {
  // element event
  element.onclick = function() {
   // code here
  }
 }
};

Or use nested identifiers:

var myrules = {
 '.menu li a' : function(element) {
  element.onclick = function() {
   // code here
  }
 }
};

Apply the rules with:

Behaviour.register(myrules);

Example

If we have a 'normal' link to TWiki Web 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.

<div id="demoblock" style="padding:1em; width:100px; text-align:center;">
MOUSE OVER ME
</div>

<script type="text/javascript">
// <![CDATA[
var myrules = {
 '#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>

Creates:

MOUSE OVER ME

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);

Development

License

Behaviour is freely distributable under the terms of an BSD license. For details see the Behaviour website.

Links

Installation Instructions

  • For an automated installation, run the configure script and follow "Find More Extensions" in the in the Extensions section.

  • Or, follow these manual installation steps:
    • Download the ZIP file from the extension home on twiki.org (see below).
    • Unzip BehaviourContrib.zip in your twiki installation directory.
    • Set the ownership of the extracted directories and files to the webserver user.
    • Install the dependencies (if any).

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.

Contrib Info

Author: TWiki:Main/ArthurClemens
Changed:
<
<
Copyright: Code: behaviour.js version 1.1 - Copyright (c) Ben Nolan and Simon Willison.
TWiki distribution and updates/additions: © TWiki:Main/ArthurClemens.
© 2006-2015 TWiki:TWiki/TWikiContributor
>
>
Copyright: Code: behaviour.js version 1.1 - Copyright (c) Ben Nolan and Simon Willison.
TWiki distribution and updates/additions: © TWiki:Main/ArthurClemens.
© 2006-2018 TWiki:TWiki/TWikiContributor
 
License: BSD for behaviour.js
GPL (GNU General Public License) for TWiki BehaviourContrib
Changed:
<
<
Version: 29499 (2015-11-29)
>
>
Version: 30438 (2018-07-16)
 
Dependencies: None
Changed:
<
<
Contrib Version: 1.4
>
>
Contrib Version: 2018-07-05
 
Change History:
<-- specify latest version first -->
 
Added:
>
>
2018-07-05: TWikibug:Item7841: Copyright update to 2018
2016-01-08: TWikibug:Item7708: Copyright update to 2016
 
2015-02-16: TWikibug:Item7604: Switch from GPL v2 to v3
2010-05-15: TWikibug:Item6433 - doc improvements; replacing TWIKIWEB with SYSTEMWEB
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]].
02 Jul 2007 1.2 Integrated other faster code by Dean Edwards: faster onload (again).
08 Mar 2007 1.1 Integrated code by Dean Edwards (see Code update version 1.1 with faster DOM queries).
04 Jun 2006 1.0 First Version. Included Behaviour version: 1.1.
Home: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContrib
Feedback: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContribDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContribAppraisal

Related Topics: TWikiPreferences

META FILEATTACHMENT attr="" comment="" date="1162075796" name="behaviour.js" path="behaviour.compressed.js" size="2902" user="TWikiContributor" version="1"

Revision 92015-02-17 - TWikiContributor

 

Behaviour Javascript Framework Contrib

<--
   Contributions to this TWiki extension are appreciated. Please update the contrib page
   at http://twiki.org/cgi-bin/view/Plugins/BehaviourContrib or provide feedback
   at http://twiki.org/cgi-bin/view/Plugins/BehaviourContribDev.
   If you are a TWiki contributor please update the extension in the SVN repository.
-->
Changed:
<
<
>
>
  Behaviour Javascript event library to create Javascript based interactions that degrade well when Javascript is not available

Introduction

This contrib packages the third-party Behaviour Javascript event library, available from http://bennolan.com/behaviour/.

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).

From the website:

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.

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.

That's why I came up with Behaviour - my solution to unobtrusive javascript behaviours.

How does it work?

Behaviour lets you use CSS selectors to specify elements to add javascript events to. This means that instead of writing:

<li>
 <a onclick="this.parentNode.removeChild(this)" href="#">
  Click me to delete me
 </a>
</li>

You can use:

<ul id="example">
 <li>
  <a href="/someurl">Click me to delete me</a>
 </li>
</ul>

And then use css selectors to select that element and add javascript functions to it.

var myrules = {
 '#example li' : function(el){
  el.onclick = function(){
   this.parentNode.removeChild(this);
  }
 }
};
Behaviour.register(myrules);

Usage

Include the Javascript file:

<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/BehaviourContrib/behaviour.js"></script>

In your code you create a "rules" object, with sub-objects for each html element class name or id:

var myrules = {
 '.classname' : function(element) {
  // element event
  element.onclick = function() {
   // code here
  }
 },
 '#id' : function(element) {
  // element event
  element.onclick = function() {
   // code here
  }
 }
};

Or use nested identifiers:

var myrules = {
 '.menu li a' : function(element) {
  element.onclick = function() {
   // code here
  }
 }
};

Apply the rules with:

Behaviour.register(myrules);

Example

If we have a 'normal' link to TWiki Web 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.

<div id="demoblock" style="padding:1em; width:100px; text-align:center;">
MOUSE OVER ME
</div>

<script type="text/javascript">
// <![CDATA[
var myrules = {
 '#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>

Creates:

MOUSE OVER ME

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);

Development

License

Behaviour is freely distributable under the terms of an BSD license. For details see the Behaviour website.

Links

Installation Instructions

Changed:
<
<
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.
>
>
  • For an automated installation, run the configure script and follow "Find More Extensions" in the in the Extensions section.
Deleted:
<
<
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->Find More Extensions)
 
Deleted:
<
<
  • 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.
 
Changed:
<
<
>
>
  • Or, follow these manual installation steps:
Added:
>
>
    • Download the ZIP file from the extension home on twiki.org (see below).
    • Unzip BehaviourContrib.zip in your twiki installation directory.
    • Set the ownership of the extracted directories and files to the webserver user.
    • Install the dependencies (if any).
 

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.

Contrib Info

Author: TWiki:Main/ArthurClemens
Changed:
<
<
Copyright: Code: behaviour.js version 1.1 - Copyright (c) Ben Nolan and Simon Willison.
TWiki distribution and updates/additions: © TWiki:Main/ArthurClemens.
© 2006-2010 TWiki:TWiki/TWikiContributor
>
>
Copyright: Code: behaviour.js version 1.1 - Copyright (c) Ben Nolan and Simon Willison.
TWiki distribution and updates/additions: © TWiki:Main/ArthurClemens.
© 2006-2015 TWiki:TWiki/TWikiContributor
 
License: BSD for behaviour.js
GPL (GNU General Public License) for TWiki BehaviourContrib
Changed:
<
<
Version: 18694 (2010-05-29)
>
>
Version: 29499 (2015-11-29)
 
Dependencies: None
Contrib Version: 1.4
Change History:
<-- specify latest version first -->
 
Added:
>
>
2015-02-16: TWikibug:Item7604: Switch from GPL v2 to v3
 
2010-05-15: TWikibug:Item6433 - doc improvements; replacing TWIKIWEB with SYSTEMWEB
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]].
02 Jul 2007 1.2 Integrated other faster code by Dean Edwards: faster onload (again).
08 Mar 2007 1.1 Integrated code by Dean Edwards (see Code update version 1.1 with faster DOM queries).
04 Jun 2006 1.0 First Version. Included Behaviour version: 1.1.
Home: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContrib
Feedback: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContribDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContribAppraisal

Related Topics: TWikiPreferences

META FILEATTACHMENT attr="" comment="" date="1162075796" name="behaviour.js" path="behaviour.compressed.js" size="2902" user="TWikiContributor" version="1"

Revision 82010-05-16 - TWikiContributor

Changed:
<
<

Behaviour Javascript framework Contrib

>
>

Behaviour Javascript Framework Contrib

Added:
>
>
<--
   Contributions to this TWiki extension are appreciated. Please update the contrib page
   at http://twiki.org/cgi-bin/view/Plugins/BehaviourContrib or provide feedback
   at http://twiki.org/cgi-bin/view/Plugins/BehaviourContribDev.
   If you are a TWiki contributor please update the extension in the SVN repository.
-->
Behaviour Javascript event library to create Javascript based interactions that degrade well when Javascript is not available
 
Added:
>
>

Introduction

 This contrib packages the third-party Behaviour Javascript event library, available from http://bennolan.com/behaviour/.
Changed:
<
<
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).
>
>
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).
 
Deleted:
<
<

Introduction

 From the website:
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.

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.

That's why I came up with Behaviour - my solution to unobtrusive javascript behaviours.

How does it work?

Behaviour lets you use CSS selectors to specify elements to add javascript events to. This means that instead of writing:

<li>
Changed:
<
<
Click me to delete me
>
>
Click me to delete me
 

You can use:

<ul id="example">
Changed:
<
<
  • Click me to delete me
  • >
    >
  • Click me to delete me
  •  

    And then use css selectors to select that element and add javascript functions to it.

    var myrules = {
    Changed:
    <
    <
    '#example li' : function(el){ el.onclick = function(){ this.parentNode.removeChild(this);

    }

    >
    >
    '#example li' : function(el){ el.onclick = function(){ this.parentNode.removeChild(this); } }
    Deleted:
    <
    <
    }
     };
    Deleted:
    <
    <
     Behaviour.register(myrules);
    Deleted:
    <
    <
     

    Usage

    Deleted:
    <
    <
    Include the javascript file:
     
    Added:
    >
    >
    Include the Javascript file:
     
    Changed:
    <
    <
    >
    >
     

    In your code you create a "rules" object, with sub-objects for each html element class name or id:

    var myrules = {
    Changed:
    <
    <
    '.classname' : function(element) { // element event element.onclick = function() { // code here } },

    '#id' : function(element) { // element event element.onclick = function() { // code here }

    >
    >
    '.classname' : function(element) { // element event element.onclick = function() { // code here } }, '#id' : function(element) { // element event element.onclick = function() { // code here } }
    Deleted:
    <
    <
    }
     };

    Or use nested identifiers:

    var myrules = {
    Changed:
    <
    <
    '.menu li a' : function(element) { element.onclick = function() { // code here } }
    >
    >
    '.menu li a' : function(element) { element.onclick = function() { // code here } }
     };

    Apply the rules with:

    Behaviour.register(myrules);
    
    Deleted:
    <
    <
     

    Example

    Deleted:
    <
    <
    If we have a 'normal' link to TWiki Web 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.
     
    Added:
    >
    >
    If we have a 'normal' link to TWiki Web 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.
     
    <div id="demoblock" style="padding:1em; width:100px; text-align:center;">
    MOUSE OVER ME
    </div>
    
    <script type="text/javascript">
    // <![CDATA[
    var myrules = {
    Changed:
    <
    <
    '#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; } }

    >
    >
    '#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); // ]]>
    Added:
    >
    >
      Creates:

    MOUSE OVER ME

    Added:
    >
    >

    Leaking Danger

     
    Deleted:
    <
    <

    Leaking danger

     Behaviour code leaks memory on Windows Explorer prior to version 7. To prevent leaking, set the element variable to null:
    var myrules = {
    Changed:
    <
    <
    'table.test td' : function(element) { element.onmouseover = function() { this.style.backgroundColor = highlightColor; return false; } element = null; // by setting this IE will not leak }
    >
    >
    '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);
    Deleted:
    <
    <
     

    Development

    Added:
    >
    >
     
    Deleted:
    <
    <
     

    License

    Deleted:
    <
    <
    Behaviour is freely distributable under the terms of an BSD license. For details see the Behaviour website.
     
    Added:
    >
    >
    Behaviour is freely distributable under the terms of an BSD license. For details see the Behaviour website.
     
    Deleted:
    <
    <
     

    Links

    Added:
    >
    >
     

    Installation Instructions

    Added:
    >
    >
     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->Find More Extensions)
    • 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.

    Contrib Settings

    Deleted:
    <
    <
    • Set SHORTDESCRIPTION = Behaviour Javascript event library to create javascript based interactions that degrade well when javascript is not available
     
    Added:
    >
    >
    • 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.

    Contrib Info

    Changed:
    <
    <
    Author: TWiki:Main.ArthurClemens
    Copyright: Code: behaviour.js version 1.1 - Copyright (c) Ben Nolan and Simon Willison. TWiki distribution and updates/additions: TWiki:Main.ArthurClemens.
    License: BSD
    Version: 15675 (02 Sep 2009)
    >
    >
    Author: TWiki:Main/ArthurClemens
    Copyright: Code: behaviour.js version 1.1 - Copyright (c) Ben Nolan and Simon Willison.
    TWiki distribution and updates/additions: © TWiki:Main/ArthurClemens.
    © 2006-2010 TWiki:TWiki/TWikiContributor
    License: BSD for behaviour.js
    GPL (GNU General Public License) for TWiki BehaviourContrib
    Added:
    >
    >
    Version: 18694 (2010-05-29)
     
    Dependencies: None
    Changed:
    <
    <
    Contrib Version: 1.3.1
    >
    >
    Contrib Version: 1.4
     
    Change History:
    <-- specify latest version first -->
     
    Added:
    >
    >
    2010-05-15: TWikibug:Item6433 - doc improvements; replacing TWIKIWEB with SYSTEMWEB
     
    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]].
    02 Jul 2007 1.2 Integrated other faster code by Dean Edwards: faster onload (again).
    08 Mar 2007 1.1 Integrated code by Dean Edwards (see Code update version 1.1 with faster DOM queries).
    04 Jun 2006 1.0 First Version. Included Behaviour version: 1.1.
    Home: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContrib
    Feedback: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContribDev
    Appraisal: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContribAppraisal
    Changed:
    <
    <
    Related Topics: TWikiPreferences
    >
    >
    Related Topics: TWikiPreferences
     
    Changed:
    <
    <
    META FILEATTACHMENT attr="" autoattached="1" comment="" date="1162075796" name="behaviour.js" path="behaviour.compressed.js" size="2902" user="UnknownUser" version=""
    >
    >
    META FILEATTACHMENT attr="" comment="" date="1162075796" name="behaviour.js" path="behaviour.compressed.js" size="2902" user="TWikiContributor" version="1"
    Deleted:
    <
    <
     

    Revision 72007-07-08 - TWikiContributor

     

    Behaviour Javascript framework Contrib

    This contrib packages the third-party Behaviour Javascript event library, available from http://bennolan.com/behaviour/.

    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).

    Introduction

    From the website:
    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.

    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.

    That's why I came up with Behaviour - my solution to unobtrusive javascript behaviours.

    How does it work?

    Behaviour lets you use CSS selectors to specify elements to add javascript events to. This means that instead of writing:

    <li>
       <a onclick="this.parentNode.removeChild(this)" href="#">
          Click me to delete me
       </a>
    </li>
    

    You can use:

    <ul id="example">
       <li>
          <a href="/someurl">Click me to delete me</a>
       </li>
    </ul>
    

    And then use css selectors to select that element and add javascript functions to it.

    var myrules = {
       '#example li' : function(el){
          el.onclick = function(){
             this.parentNode.removeChild(this);
    
          }
       }
    };
    
    Behaviour.register(myrules);
    

    Usage

    Include the javascript file:

    <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:

    var myrules = {
       '.classname' : function(element) {
          // element event
          element.onclick = function() {
             // code here
          }
       },
       
       '#id' : function(element) {
          // element event
          element.onclick = function() {
             // code here
          }
       }
    };
    

    Or use nested identifiers:

    var myrules = {
       '.menu li a' : function(element) {
          element.onclick = function() {
             // code here
          }
       }
    };
    

    Apply the rules with:

    Behaviour.register(myrules);
    

    Example

    If we have a 'normal' link to TWiki Web 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.

    <div id="demoblock" style="padding:1em; width:100px; text-align:center;">
    MOUSE OVER ME
    </div>
    
    <script type="text/javascript">
    // <![CDATA[
    var myrules = {
       '#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>
    

    Creates:

    MOUSE OVER ME

    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);
    

    Development

    License

    Behaviour is freely distributable under the terms of an BSD license. For details see the Behaviour website.

    Links

    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->Find More Extensions)
    • 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.

    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.

    Contrib Info

    Author: TWiki:Main.ArthurClemens
    Copyright: Code: behaviour.js version 1.1 - Copyright (c) Ben Nolan and Simon Willison. TWiki distribution and updates/additions: TWiki:Main.ArthurClemens.
    License: BSD
    Changed:
    <
    <
    Version: 15675 (29 Apr 2009)
    >
    >
    Version: 15675 (02 Sep 2009)
     
    Dependencies: None
    Contrib Version: 1.3.1
    Change History:
    <-- specify latest version first -->
     
    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]].
    02 Jul 2007 1.2 Integrated other faster code by Dean Edwards: faster onload (again).
    08 Mar 2007 1.1 Integrated code by Dean Edwards (see Code update version 1.1 with faster DOM queries).
    04 Jun 2006 1.0 First Version. Included Behaviour version: 1.1.
    Home: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContrib
    Feedback: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContribDev
    Appraisal: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContribAppraisal

    Related Topics: TWikiPreferences

    META FILEATTACHMENT attr="" autoattached="1" comment="" date="1162075796" name="behaviour.js" path="behaviour.compressed.js" size="2902" user="UnknownUser" version=""

    Revision 62007-07-08 - TWikiContributor

     

    Behaviour Javascript framework Contrib

    This contrib packages the third-party Behaviour Javascript event library, available from http://bennolan.com/behaviour/.

    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).

    Introduction

    From the website:
    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.

    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.

    That's why I came up with Behaviour - my solution to unobtrusive javascript behaviours.

    How does it work?

    Behaviour lets you use CSS selectors to specify elements to add javascript events to. This means that instead of writing:

    <li>
       <a onclick="this.parentNode.removeChild(this)" href="#">
          Click me to delete me
       </a>
    </li>
    

    You can use:

    <ul id="example">
       <li>
          <a href="/someurl">Click me to delete me</a>
       </li>
    </ul>
    

    And then use css selectors to select that element and add javascript functions to it.

    var myrules = {
       '#example li' : function(el){
          el.onclick = function(){
             this.parentNode.removeChild(this);
    
          }
       }
    };
    
    Behaviour.register(myrules);
    

    Usage

    Include the javascript file:

    <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:

    var myrules = {
       '.classname' : function(element) {
          // element event
          element.onclick = function() {
             // code here
          }
       },
       
       '#id' : function(element) {
          // element event
          element.onclick = function() {
             // code here
          }
       }
    };
    

    Or use nested identifiers:

    var myrules = {
       '.menu li a' : function(element) {
          element.onclick = function() {
             // code here
          }
       }
    };
    

    Apply the rules with:

    Behaviour.register(myrules);
    

    Example

    If we have a 'normal' link to TWiki Web 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.

    <div id="demoblock" style="padding:1em; width:100px; text-align:center;">
    MOUSE OVER ME
    </div>
    
    <script type="text/javascript">
    // <![CDATA[
    var myrules = {
       '#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>
    

    Creates:

    MOUSE OVER ME

    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);
    

    Development

    License

    Behaviour is freely distributable under the terms of an BSD license. For details see the Behaviour website.

    Links

    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->Find More Extensions)
    • 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.

    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.

    Contrib Info

    Author: TWiki:Main.ArthurClemens
    Copyright: Code: behaviour.js version 1.1 - Copyright (c) Ben Nolan and Simon Willison. TWiki distribution and updates/additions: TWiki:Main.ArthurClemens.
    License: BSD
    Changed:
    <
    <
    Version: 15675 (30 Mar 2009)
    >
    >
    Version: 15675 (29 Apr 2009)
     
    Dependencies: None
    Contrib Version: 1.3.1
    Change History:
    <-- specify latest version first -->
     
    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]].
    02 Jul 2007 1.2 Integrated other faster code by Dean Edwards: faster onload (again).
    08 Mar 2007 1.1 Integrated code by Dean Edwards (see Code update version 1.1 with faster DOM queries).
    04 Jun 2006 1.0 First Version. Included Behaviour version: 1.1.
    Home: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContrib
    Feedback: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContribDev
    Appraisal: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContribAppraisal

    Related Topics: TWikiPreferences

    META FILEATTACHMENT attr="" autoattached="1" comment="" date="1162075796" name="behaviour.js" path="behaviour.compressed.js" size="2902" user="UnknownUser" version=""

    Revision 52007-07-08 - TWikiContributor

     

    Behaviour Javascript framework Contrib

    This contrib packages the third-party Behaviour Javascript event library, available from http://bennolan.com/behaviour/.

    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).

    Introduction

    From the website:
    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.

    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.

    That's why I came up with Behaviour - my solution to unobtrusive javascript behaviours.

    How does it work?

    Behaviour lets you use CSS selectors to specify elements to add javascript events to. This means that instead of writing:

    <li>
       <a onclick="this.parentNode.removeChild(this)" href="#">
          Click me to delete me
       </a>
    </li>
    

    You can use:

    <ul id="example">
       <li>
          <a href="/someurl">Click me to delete me</a>
       </li>
    </ul>
    

    And then use css selectors to select that element and add javascript functions to it.

    var myrules = {
       '#example li' : function(el){
          el.onclick = function(){
             this.parentNode.removeChild(this);
    
          }
       }
    };
    
    Behaviour.register(myrules);
    

    Usage

    Include the javascript file:

    <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:

    var myrules = {
       '.classname' : function(element) {
          // element event
          element.onclick = function() {
             // code here
          }
       },
       
       '#id' : function(element) {
          // element event
          element.onclick = function() {
             // code here
          }
       }
    };
    

    Or use nested identifiers:

    var myrules = {
       '.menu li a' : function(element) {
          element.onclick = function() {
             // code here
          }
       }
    };
    

    Apply the rules with:

    Behaviour.register(myrules);
    

    Example

    If we have a 'normal' link to TWiki Web 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.

    <div id="demoblock" style="padding:1em; width:100px; text-align:center;">
    MOUSE OVER ME
    </div>
    
    <script type="text/javascript">
    // <![CDATA[
    var myrules = {
       '#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>
    

    Creates:

    MOUSE OVER ME

    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);
    

    Development

    License

    Behaviour is freely distributable under the terms of an BSD license. For details see the Behaviour website.

    Links

    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->Find More Extensions)
    • 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.

    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.

    Contrib Info

    Author: TWiki:Main.ArthurClemens
    Copyright: Code: behaviour.js version 1.1 - Copyright (c) Ben Nolan and Simon Willison. TWiki distribution and updates/additions: TWiki:Main.ArthurClemens.
    License: BSD
    Changed:
    <
    <
    Version: 15675 (06 Dec 2008)
    >
    >
    Version: 15675 (30 Mar 2009)
     
    Dependencies: None
    Contrib Version: 1.3.1
    Change History:
    <-- specify latest version first -->
     
    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]].
    02 Jul 2007 1.2 Integrated other faster code by Dean Edwards: faster onload (again).
    08 Mar 2007 1.1 Integrated code by Dean Edwards (see Code update version 1.1 with faster DOM queries).
    04 Jun 2006 1.0 First Version. Included Behaviour version: 1.1.
    Home: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContrib
    Feedback: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContribDev
    Appraisal: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContribAppraisal

    Related Topics: TWikiPreferences

    META FILEATTACHMENT attr="" autoattached="1" comment="" date="1162075796" name="behaviour.js" path="behaviour.compressed.js" size="2902" user="UnknownUser" version=""

    Revision 42007-07-08 - TWikiContributor

     

    Behaviour Javascript framework Contrib

    This contrib packages the third-party Behaviour Javascript event library, available from http://bennolan.com/behaviour/.

    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).

    Introduction

    From the website:
    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.

    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.

    That's why I came up with Behaviour - my solution to unobtrusive javascript behaviours.

    How does it work?

    Behaviour lets you use CSS selectors to specify elements to add javascript events to. This means that instead of writing:

    <li>
       <a onclick="this.parentNode.removeChild(this)" href="#">
          Click me to delete me
       </a>
    </li>
    

    You can use:

    <ul id="example">
       <li>
          <a href="/someurl">Click me to delete me</a>
       </li>
    </ul>
    

    And then use css selectors to select that element and add javascript functions to it.

    var myrules = {
       '#example li' : function(el){
          el.onclick = function(){
             this.parentNode.removeChild(this);
    
          }
       }
    };
    
    Behaviour.register(myrules);
    

    Usage

    Include the javascript file:

    <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:

    var myrules = {
       '.classname' : function(element) {
          // element event
          element.onclick = function() {
             // code here
          }
       },
       
       '#id' : function(element) {
          // element event
          element.onclick = function() {
             // code here
          }
       }
    };
    

    Or use nested identifiers:

    var myrules = {
       '.menu li a' : function(element) {
          element.onclick = function() {
             // code here
          }
       }
    };
    

    Apply the rules with:

    Behaviour.register(myrules);
    

    Example

    If we have a 'normal' link to TWiki Web 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.

    <div id="demoblock" style="padding:1em; width:100px; text-align:center;">
    MOUSE OVER ME
    </div>
    
    <script type="text/javascript">
    // <![CDATA[
    var myrules = {
       '#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>
    

    Creates:

    MOUSE OVER ME

    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);
    

    Development

    License

    Behaviour is freely distributable under the terms of an BSD license. For details see the Behaviour website.

    Links

    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->Find More Extensions)
    • 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.

    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.

    Contrib Info

    Author: TWiki:Main.ArthurClemens
    Copyright: Code: behaviour.js version 1.1 - Copyright (c) Ben Nolan and Simon Willison. TWiki distribution and updates/additions: TWiki:Main.ArthurClemens.
    License: BSD
    Changed:
    <
    <
    Version: 15675 (04 Aug 2008)
    >
    >
    Version: 15675 (06 Dec 2008)
     
    Dependencies: None
    Contrib Version: 1.3.1
    Change History:
    <-- specify latest version first -->
     
    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]].
    02 Jul 2007 1.2 Integrated other faster code by Dean Edwards: faster onload (again).
    08 Mar 2007 1.1 Integrated code by Dean Edwards (see Code update version 1.1 with faster DOM queries).
    04 Jun 2006 1.0 First Version. Included Behaviour version: 1.1.
    Home: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContrib
    Feedback: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContribDev
    Appraisal: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContribAppraisal

    Related Topics: TWikiPreferences

    META FILEATTACHMENT attr="" autoattached="1" comment="" date="1162075796" name="behaviour.js" path="behaviour.compressed.js" size="2902" user="UnknownUser" version=""

    Revision 32007-07-08 - TWikiContributor

     

    Behaviour Javascript framework Contrib

    This contrib packages the third-party Behaviour Javascript event library, available from http://bennolan.com/behaviour/.

    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).

    Introduction

    From the website:
    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.

    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.

    That's why I came up with Behaviour - my solution to unobtrusive javascript behaviours.

    How does it work?

    Behaviour lets you use CSS selectors to specify elements to add javascript events to. This means that instead of writing:

    <li>
       <a onclick="this.parentNode.removeChild(this)" href="#">
          Click me to delete me
       </a>
    </li>
    

    You can use:

    <ul id="example">
       <li>
          <a href="/someurl">Click me to delete me</a>
       </li>
    </ul>
    

    And then use css selectors to select that element and add javascript functions to it.

    var myrules = {
       '#example li' : function(el){
          el.onclick = function(){
             this.parentNode.removeChild(this);
    
          }
       }
    };
    
    Behaviour.register(myrules);
    

    Usage

    Include the javascript file:

    <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:

    var myrules = {
       '.classname' : function(element) {
          // element event
          element.onclick = function() {
             // code here
          }
       },
       
       '#id' : function(element) {
          // element event
          element.onclick = function() {
             // code here
          }
       }
    };
    

    Or use nested identifiers:

    var myrules = {
       '.menu li a' : function(element) {
          element.onclick = function() {
             // code here
          }
       }
    };
    

    Apply the rules with:

    Behaviour.register(myrules);
    

    Example

    If we have a 'normal' link to TWiki Web 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.

    <div id="demoblock" style="padding:1em; width:100px; text-align:center;">
    MOUSE OVER ME
    </div>
    
    <script type="text/javascript">
    // <![CDATA[
    var myrules = {
       '#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>
    

    Creates:

    MOUSE OVER ME

    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);
    

    Development

    License

    Behaviour is freely distributable under the terms of an BSD license. For details see the Behaviour website.

    Links

    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->Find More Extensions)
    • 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.

    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.

    Contrib Info

    Author: TWiki:Main.ArthurClemens
    Copyright: Code: behaviour.js version 1.1 - Copyright (c) Ben Nolan and Simon Willison. TWiki distribution and updates/additions: TWiki:Main.ArthurClemens.
    License: BSD
    Changed:
    <
    <
    Version: 15675 (22 Jan 2008)
    >
    >
    Version: 15675 (04 Aug 2008)
     
    Dependencies: None
    Contrib Version: 1.3.1
    Change History:
    <-- specify latest version first -->
     
    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]].
    02 Jul 2007 1.2 Integrated other faster code by Dean Edwards: faster onload (again).
    08 Mar 2007 1.1 Integrated code by Dean Edwards (see Code update version 1.1 with faster DOM queries).
    04 Jun 2006 1.0 First Version. Included Behaviour version: 1.1.
    Home: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContrib
    Feedback: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContribDev
    Appraisal: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContribAppraisal

    Related Topics: TWikiPreferences

    META FILEATTACHMENT attr="" autoattached="1" comment="" date="1162075796" name="behaviour.js" path="behaviour.compressed.js" size="2902" user="UnknownUser" version=""

    Revision 22007-07-08 - TWikiContributor

     

    Behaviour Javascript framework Contrib

    This contrib packages the third-party Behaviour Javascript event library, available from http://bennolan.com/behaviour/.

    Changed:
    <
    <
    Behaviour is suited to create javascript based interaction that degrades well when javascript is not available.
    >
    >
    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).
     
    Deleted:
    <
    <
    Javascript file: behaviour.js (8.1K). The compressed javascript file (2.9K) has been processed by ShrinkSafe.
     
    Added:
    >
    >
     

    Introduction

    From the website:
    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.

    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.

    That's why I came up with Behaviour - my solution to unobtrusive javascript behaviours.

    How does it work?

    Behaviour lets you use CSS selectors to specify elements to add javascript events to. This means that instead of writing:

    <li>
       <a onclick="this.parentNode.removeChild(this)" href="#">
          Click me to delete me
       </a>
    </li>
    

    You can use:

    <ul id="example">
       <li>
          <a href="/someurl">Click me to delete me</a>
       </li>
    </ul>
    

    And then use css selectors to select that element and add javascript functions to it.

    var myrules = {
       '#example li' : function(el){
          el.onclick = function(){
             this.parentNode.removeChild(this);
    
          }
       }
    };
    
    Behaviour.register(myrules);
    
    Added:
    >
    >
     

    Usage

    Include the javascript file:

    Changed:
    <
    <
    >
    >
     

    In your code you create a "rules" object, with sub-objects for each html element class name or id:

    var myrules = {
       '.classname' : function(element) {
          // element event
          element.onclick = function() {
             // code here
          }
       },
       
       '#id' : function(element) {
          // element event
          element.onclick = function() {
             // code here
          }
       }
    };
    

    Or use nested identifiers:

    var myrules = {
       '.menu li a' : function(element) {
          element.onclick = function() {
             // code here
          }
       }
    };
    

    Apply the rules with:

    Behaviour.register(myrules);
    
    Changed:
    <
    <

    Example

    >
    >
    Added:
    >
    >

    Example

     If we have a 'normal' link to TWiki Web 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.

    Changed:
    <
    <
    TWiki Web Home
    >
    >
    Added:
    >
    >
    MOUSE OVER ME
     
    Deleted:
    <
    <
    The class name link%TWIKIWEB%%HOMETOPIC% will get expanded to linkTWikiWebHome
     Creates:
    Changed:
    <
    <
    TWiki Web Home
    >
    >
    Added:
    >
    >
    MOUSE OVER ME
     
    Added:
    >
    >

    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);
    
     

    Development

    Changed:
    <
    <
    >
    >
    Added:
    >
    >
     
    Added:
    >
    >
     

    License

    Behaviour is freely distributable under the terms of an BSD license.
    Changed:
    <
    <
    For details, see the Behaviour website.
    >
    >
    For details see the Behaviour website.
     
    Added:
    >
    >
     

    Links

    Deleted:
    <
    <

    Contrib Info

     
    Changed:
    <
    <
    Author: TWiki:Main.ArthurClemens
    Copyright: version 1.1 - Copyright (c) Ben Nolan and Simon Willison
    License: BSD
    Dependencies: None
    4 June 2006 1.000 First Version. Included Behaviour version: 1.1
    >
    >

    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.

    Added:
    >
    >
    • If you have TWiki 4.2 or later, you can install from the configure interface (Go to Plugins->Find More Extensions)
    • 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.

    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.

    Contrib Info

    Author: TWiki:Main.ArthurClemens
    Copyright: Code: behaviour.js version 1.1 - Copyright (c) Ben Nolan and Simon Willison. TWiki distribution and updates/additions: TWiki:Main.ArthurClemens.
    License: BSD
    Version: 15675 (22 Jan 2008)
    Dependencies: None
    Contrib Version: 1.3.1
    Change History:
    <-- specify latest version first -->
     
    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]].
    02 Jul 2007 1.2 Integrated other faster code by Dean Edwards: faster onload (again).
    08 Mar 2007 1.1 Integrated code by Dean Edwards (see Code update version 1.1 with faster DOM queries).
    04 Jun 2006 1.0 First Version. Included Behaviour version: 1.1.
     
    Home: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContrib
    Feedback: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContribDev
    Appraisal: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContribAppraisal

    Related Topics: TWikiPreferences

    Changed:
    <
    <
    META FILEATTACHMENT attr="" autoattached="1" comment="" date="1162075796" name="behaviour.compressed.js" path="behaviour.compressed.js" size="2902" user="UnknownUser" version=""
    META FILEATTACHMENT attr="" autoattached="1" comment="" date="1161199153" name="behaviour.js" path="behaviour.js" size="8149" user="UnknownUser" version=""
    >
    >
    META FILEATTACHMENT attr="" autoattached="1" comment="" date="1162075796" name="behaviour.js" path="behaviour.compressed.js" size="2902" user="UnknownUser" version=""
     

    Revision 12006-11-01 - TWikiContributor

     

    Behaviour Javascript framework Contrib

    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 (8.1K). The compressed javascript file (2.9K) has been processed by ShrinkSafe.

    Introduction

    From the website:
    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.

    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.

    That's why I came up with Behaviour - my solution to unobtrusive javascript behaviours.

    How does it work?

    Behaviour lets you use CSS selectors to specify elements to add javascript events to. This means that instead of writing:

    <li>
       <a onclick="this.parentNode.removeChild(this)" href="#">
          Click me to delete me
       </a>
    </li>
    

    You can use:

    <ul id="example">
       <li>
          <a href="/someurl">Click me to delete me</a>
       </li>
    </ul>
    

    And then use css selectors to select that element and add javascript functions to it.

    var myrules = {
       '#example li' : function(el){
          el.onclick = function(){
             this.parentNode.removeChild(this);
    
          }
       }
    };
    
    Behaviour.register(myrules);
    

    Usage

    Include the javascript file:

    <script type="text/javascript" src="%PUBURL%/%TWIKIWEB%/BehaviourContrib/behaviour.compressed.js"></script>
    

    In your code you create a "rules" object, with sub-objects for each html element class name or id:

    var myrules = {
       '.classname' : function(element) {
          // element event
          element.onclick = function() {
             // code here
          }
       },
       
       '#id' : function(element) {
          // element event
          element.onclick = function() {
             // code here
          }
       }
    };
    

    Or use nested identifiers:

    var myrules = {
       '.menu li a' : function(element) {
          element.onclick = function() {
             // code here
          }
       }
    };
    

    Apply the rules with:

    Behaviour.register(myrules);
    

    Example

    If we have a 'normal' link to TWiki Web 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.

    <span class="link%TWIKIWEB%%HOMETOPIC%">[[%TWIKIWEB%.%HOMETOPIC%][TWiki Web Home]]</span>
    
    <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");
             return false;
          }
       }
    };
    
    Behaviour.register(myrules);
    // ]]>
    </script>
    

    The class name link%TWIKIWEB%%HOMETOPIC% will get expanded to linkTWikiWebHome

    Creates:

    TWiki Web Home

    Development

    License

    Behaviour is freely distributable under the terms of an BSD license. For details, see the Behaviour website.

    Links

    Contrib Info

    Author: TWiki:Main.ArthurClemens
    Copyright: version 1.1 - Copyright (c) Ben Nolan and Simon Willison
    License: BSD
    Dependencies: None
    4 June 2006 1.000 First Version. Included Behaviour version: 1.1
    Home: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContrib
    Feedback: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContribDev
    Appraisal: http://TWiki.org/cgi-bin/view/Plugins/BehaviourContribAppraisal

    Related Topics: TWikiPreferences

    META FILEATTACHMENT attr="" autoattached="1" comment="" date="1162075796" name="behaviour.compressed.js" path="behaviour.compressed.js" size="2902" user="UnknownUser" version=""
    META FILEATTACHMENT attr="" autoattached="1" comment="" date="1161199153" name="behaviour.js" path="behaviour.js" size="8149" user="UnknownUser" version=""
     
    This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 1999-2024 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
    Ideas, requests, problems regarding TWiki? Send feedback
    Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.BehaviourContrib.