Slideshow - an example of a maintainable, unobtrusive JavaScript solution

Step 3: Essential Tools

Now that we have the plan and the skeleton of our script set up, it is time to think about the tool methods we need to achieve this functionality. In its lowest form, any helper library for DOM scripting should include:

• A method to assign event handlers, we will use John Resig's addEvent() for the moment.
• A method to add and remove CSS classes
• A method to override the default behaviour of HTML elements - we don't want the link's target to be followed but only execute the scripts.

We add these tool methods to the main object and we are ready to roll:

JavaScript:

slideshow = {
  current:0, // current slide number
  init:function(){
    // initializing and setting the event
    // handlers	
  },
  show:function(e){
    // event listener, the e will be the 
    // event object sent by the browser.
  },  
  addEvent:function( obj, type, fn ) {
    if ( obj.attachEvent ) {
      obj['e'+type+fn] = fn;
      obj[type+fn] = function(){
	    obj['e'+type+fn]( window.event );
      }
      obj.attachEvent( 'on'+type, obj[type+fn] );
    } else
    obj.addEventListener( type, fn, false );
  },
  removeClass:function(o,c){
    var rep=o.className.match(' '+c)?' '+c:c;
    o.className=o.className.replace(rep,'');
  },
  addClass:function(o,c){
    var test = new RegExp("(^|\\s)" + 
	c + "(\\s|$)").test(o.className);
    if(!test){o.className+=o.className?' '+c:c;}
  },
  cancelClick:function(e){
    if (window.event){
      window.event.cancelBubble = true;
      window.event.returnValue = false;
    }
    if (e && e.stopPropagation && e.preventDefault){
      e.stopPropagation();
      e.preventDefault();
    }
  }
}

The first thing that needs doing is call the init() method when the document has finished loading:

JavaScript:

slideshow = {
  current:0, // current slide number
  init:function(){
    // initializing and setting the event
    // handlers	
  },
  show:function(e){
    // event listener, the e will be the 
    // event object sent by the browser.
  },  
  addEvent:function( obj, type, fn ) {
    if ( obj.attachEvent ) {
      obj['e'+type+fn] = fn;
      obj[type+fn] = function(){
	    obj['e'+type+fn]( window.event );
      }
      obj.attachEvent( 'on'+type, obj[type+fn] );
    } else
    obj.addEventListener( type, fn, false );
  },
  removeClass:function(o,c){
    var rep=o.className.match(' '+c)?' '+c:c;
    o.className=o.className.replace(rep,'');
  },
  addClass:function(o,c){
    var test = new RegExp("(^|\\s)" + 
	c + "(\\s|$)").test(o.className);
    if(!test){o.className+=o.className?' '+c:c;}
  },
  cancelClick:function(e){
    if (window.event){
      window.event.cancelBubble = true;
      window.event.returnValue = false;
    }
    if (e && e.stopPropagation && e.preventDefault){
      e.stopPropagation();
      e.preventDefault();
    }
  }
}
slideshow.addEvent(window,'load',slideshow.init);

• « Step 2: Planning the Script
• Step 4: The Script »