• Home
• News
• FAQ
• Documentation
• Community
• About

Stephen Howard - DOM.Triggers-0.03

  DOM.Triggers.installHook('a', function(element) {
  
      if( element.target == 'popup' ) {
          element.onclick = function() {
              window.open(element.href, 'popup','width=500,height=300');
          }
      }
  });
  
  DOM.Triggers.installIdHook('my_widget', function(element) {
  
      element.onclick = function() { alert('hi')
  });
  
  DOM.Triggers.addToDocument('document.body', buildNewWidget() );

  Copyright (c) 2005 Stephen Howard.  All rights reserved.
  This module is free software; you can redistribute it and/or modify it
  under the terms of the Artistic license.

/*

=head1 NAME

DOM.Triggers - Register functions to call when encountering elements while walking the DOM

=head1 SYNOPSIS

  DOM.Triggers.installHook('a', function(element) {
  
      if( element.target == 'popup' ) {
          element.onclick = function() {
              window.open(element.href, 'popup','width=500,height=300');
          }
      }
  });
  
  DOM.Triggers.installIdHook('my_widget', function(element) {
  
      element.onclick = function() { alert('hi')
  });
  
  DOM.Triggers.addToDocument('document.body', buildNewWidget() );

=head1 DESCRIPTION

Per the writings of Peter-Paul Kotch this module was designed to allow the developer
to populate a document with scripted capabilities without embedding event handlers
in the document itself.

Rather than having each bit of javascript walk the document looking for places to
insert itself, C<DOM.Triggers> lets all the javascript libraries tell it what elements
they are interested in, and what function to run on their behalf when such an element
is found.  The function is free to test the element found and run any code it wants
for installing behaviors or anything else it wishes.  C<DOM.Triggers> retrieves all
the requested from the document at C<onload> time to do this.

C<DOM.Triggers> does not export any methods by default, but allows you to export any of the
four methods described below.

=head2 Package Methods

=cut

*/

if ( typeof DOM == "undefined") DOM = {};
DOM.Triggers = {

    VERSION: 0.03,

    EXPORT_OK: [ 'installHook', 'installIdHook','addToDocument', 'runAtOnload' ],
    
    Hooks:   new Array(),
    IdHooks: new Array(),
    
    toAppend: new Array(),
    toRun:    new Array(),


/*

=head3 C<installHook(  'tagName', function(element) {}  ) >

Call this before C<onload> to tell C<DOM.Triggers> to run the given function for every
tag with C<tagName> in the document.  In doing so C<DOM.Triggers> passes in the element
found so that it may be inspected and potentially have event handlers hung off of it.

=cut

*/
    installHook: function(hook,func) {
        if( !this.Hooks[hook] )  this.Hooks[hook] = new Array();
        this.Hooks[hook].push( func );
    },
/*

=head3 C<installIdHook(  'elementID', function(element) {}  ) >

Call this before C<onload> to tell C<DOM.Triggers> to retrieve the element with an id
of C<elementID> and the given function. In doing so C<DOM.Triggers> passes in the element
found so that it may be inspected and potentially have event handlers hung off of it.

=cut

*/
    installIdHook: function(hook,func) {
        this.IdHooks[hook] = func;
    },

/*

=head3 C<addToDocument(  'element_string', new_element  ) >

You may find you've generated content prior to C<onload> that you need to add to
the document.  Problem is, the document doesn't exist yet.  using this function
notifies C<DOM.Triggers> to add C<new_element> as a child node of C<eval(element_string)>
during C<onload>.  It explicitly does this before it services C<installHook> and C<installIdHook>
in case the C<new_element> contains elements that need to be run against functions
registered there.

=cut

*/
    addToDocument: function(hook,element) {
        if( !this.toAppend[hook] )  this.toAppend[hook] = new Array();
        this.toAppend[hook].push( element );
    },
/*

=head3 C<runAtOnload( function )>

Since there is no cross-browser compatible way to register more than one event handler for the
onload event, and since C<DOM.Triggers> claims the onload event for its own, it proveds this
method so that you can ask it to run functions for you at onload after it is finished.

=cut

*/
    runAtOnload: function(func) {
        this.toRun.push(func);
    }
}

//========================================================================
window.onload= function() {

    for( var hook_name in DOM.Triggers.toAppend ) {
        var hook = eval(hook_name);
        for( var i = 0; i < DOM.Triggers.toAppend[hook_name].length; i++ ) {
            var element = DOM.Triggers.toAppend[hook_name][i];
            hook.appendChild(element);
        }
    }
    for( var hook in DOM.Triggers.Hooks ) {
        var elements = document.getElementsByTagName( hook );
        for( var i = 0; i < elements.length; i++ ) {
            var element = elements[i];
            for( var j = 0; j < DOM.Triggers.Hooks[hook].length; j++ ) {
                DOM.Triggers.Hooks[hook][j]( element );
            }
        }
    }
    for( var hook in DOM.Triggers.IdHooks ) {
        var element = document.getElementById( hook );
        if( element ) {
            DOM.Triggers.IdHooks[hook]( element );
        }
    }
    for( var i =0; i < DOM.Triggers.toRun.length; i++ ) {
        DOM.Triggers.toRun[i]();
    }
}
/*

=head1 SEE ALSO

Peter-Paul Kotch's article on A List Apart
L<http://www.alistapart.com/articles/scripttriggers/>

PPK's Site
L<http://www.quirksmode.org>

=head1 AUTHOR

Stephen Howard, <stephen@enterity.com>.

=head1 COPYRIGHT

  Copyright (c) 2005 Stephen Howard.  All rights reserved.
  This module is free software; you can redistribute it and/or modify it
  under the terms of the Artistic license.

=cut

*/