JavaScript Class: modify or extend ?

After the creation of xili-floom-slideshow:
Here, through the example of the original Floom javascript (displaying a pretty slideshow), we will present and discuss the ways to improve features and events of this script containing a core class.

This well documented class is based on powerful Mootools framework (>1.2.2).

The first report :

Floom is a standalone (insulated) javascript class ( and don’t offer enough dialogs with environment – only two events – end of preload images, or when slides change – and impossible to stop it).
The script contains two errors (start and end index of series of images).

What is wished?

Some events fired by Floom : onFirst, onLast, …
Some events detected and received by Floom : when container is clicked (to stop and start it) and when mouse enter in caption (the image legend).

Step by step

At the beginning, for tests, the script was modified but remembering the OOP and Class architecture of Mootools, we try to create an extension of the original class.
The first way is dangerous because it is very uneasy to maintain the script if the original will be updated by the author. The second is easiest because the work is only on the new class extending the first.
Research on net was not very easy because the multiple ways of scripting depend from the old and recent versions of Mootools and javascript. The Mootools documentation proved most effective, even with these small examples because examples on most blogs are often out-of-date.
 
The new class is named here xiliFloom.
 

var xiliFloom = new Class({
    Extends: Floom,
    options: {
        stopandgo: 0,
        originwrap : $empty,
        onFirst:     $empty,
        onLast:     $empty,
        onClickWrapper:     $empty,
        onInvader:     $empty
    },

First property : Extends the Class that xiliFloom will extend.
 
options : here only new options are added (parameters and event names that the new class will fire – onFirst, onLast…)
 
 

initialize : function(wrapper, slides, options) {
        this.parent(wrapper, slides, options);
        this.options.originwrap = wrapper; 
        $(wrapper).addEvent('click', function(){
            this.options.stopandgo = 1 - this.options.stopandgo;
            if (this.options.stopandgo === 0) {this.restart();}           
            if (this.options.stopandgo == 1) {$clear(this.periodicalblinds);}
            this.fireEvent('onClickWrapper', this.options.stopandgo, 10);
        }.bind(this));    
    },

initialize : the first entry of the function of this property is important here : this.parent() will call initialize of the parent class Floom. And after adds other value, function or event. Here an event ‘click’ is added to the main wrapper containing all images.
 
 
Some other properties of the parent class are overriden (partially or completed).

createCaptions: function(){
        this.parent();
        this.captions.addEvent('mouseenter', function(){
            this.mouseinvader();
            }.bind(this));   
    },
    step: function() {
        this.parent();
        if (this.current.slide == this.slides.length-1) {this.fireEvent('onLast', [this.slides[this.current.slide],this.current.slide]);}
        if (this.current.slide === 0) {this.fireEvent('onFirst', this.slides[this.current.slide]);}
    },

createCaptions (create the legend block) : after the parent call, here only one event is added – when a mouse enter in the block containing captions of the slideshow.
 
step : (manage the changing of images inside the slideshow) after the parent call, if the conditions are met, events are fired:
onFirst – if the first image is displayed (current image object is passed as parameter).
onLast – if the last image is displayed (current image object is passed as parameter and his index).
 
 
 
 

restart: function() {
        wrapper = $(this.options.originwrap);
        $(this.options.originwrap).empty(); 
        this.createStructure();
    }, 
    goto: function(e){
    	if (e < this.slides.length+1) {
        	this.current.slide = e-1;
        	this.step.delay(this.options.animation, this); 
    	}       
    },
    mouseinvader : function() { 
        this.fireEvent('onInvader',[this.slides[this.current.slide],this.current.slide],10);    
    }
 
});

New properties are here added for the future needs of xili-floom-slideshow plugin wordpress plugin (also usable elsewhere):
 
restart: is a property containing a function used when a click event occurs on slideshow. In the parent class there is no equivalent property.
 
goto: is a property containing a function called by a external action to jump to a specified image. The parameter is the index beginning at 1. Our target is to create a thumbnail image gallery. When the user will click on one the slideshow will jump to this full image. In this post, the tabs are now linked to corresponding images.
 
… and all the properties that can be possible to design….
 
 

Before to conclude

To be honest, only three modications were done inside the original script. (commented by //XF)
Two concern the errors on image indexing. (start and end of the loop of images array) – described in comments of the original post. 
One is more interesting – animateBlinds which is recursive.  

onPreload: function(){
        this.periodicalblinds = this.animateBlinds().periodical(this.options.interval, this); //XF
 
        this.fireEvent('onPreload', this.slides[this.current.slide]);
    },

Inside Preload, this function was fired with periodical Method but not affected to a var. this.periodicalblinds is added and will be useful in the new class to stop the periodic execution through the click event -and function $clear(this.periodicalblinds) –
Because this function animateBlinds is recursive, it is impossible to override his content. It doesn’t matter here.
 
 

domready

In the Event domready, the constructor is now used and not the previous Element.implement name – floom – as before.
With this writting approach, in the php/js scripting, it will be easier to construct (for test or gold services) parent class (Floom) or new class (xiliFloom).

// Floom or xiliFloom
				theFloom = new <?php echo $xili_settings['goldparam']; ?>Floom('<?php echo $floom_divs; ?>',slides, {
				prefix: '<?php echo $xili_settings['prefix']; /* only global settings */?>',
				amount: <?php echo $amount; ?>,

 
 
Hope this ‘step by step’ has helped you for better understanding…
 

WordPress Expert Corner

In your theme functions.php, because the new class (that you can adapt to your theme) is in another file upload inside the current theme. A hook filter must be used like below (example).

function xilifloom_theme_header () {
		/* option if mootools is elsewhere */	
			wp_enqueue_script('mootools-core',FLOOMURL.'/js/mootools-core.js','','1.2.4');
			wp_enqueue_script('mootools-more',FLOOMURL.'/js/mootools-more.js',array('mootools-core'),'1.2.4.2');
                        wp_enqueue_script('floom',FLOOMURL.'/js/floom-1.0.js',array('mootools-core','mootools-more'),'1.0');
			wp_enqueue_script('xilifloom',get_bloginfo('template_directory').'/js/xilifloom-1.0xf.js',array('floom'),'1.0xf');
			// and other js.... for events....		
	}
	add_action('wp_print_scripts', 'xilifloom_theme_header');

When updating the plugin, the specific scripts were not be overwritten. 
Soon, a new version of xili-floom-slideshow plugin !