It‘s all about the base

The old way

Many people start to build an application by building the html markup first and then add functionality to the DOM elements. Building functionality around the GUI will always end in a mess.

It‘s like building a house without have blue-print drawings or even an architect.

In the end you will end up with a house, but it will not be comfortable to live in and it will be very difficult to make modifications to the house later on.

The better way

The best way to start with an application is to divide it into smaller parts, which we refer to as ‘modules’.
With the list of modules you can pick one module and break the module it down until you have its base/core functionality defined.

We want to construct a slideshow module, so let’s plan our module the right way.
For now you can ignore the GUI since ‘It’s all about the base’.

The base of a simple slideshow is a list which contains slides.
First you need to know the active slide index and you need functionality to change the index.
That’s it. No GUI, no animations and no previous or next function.

class SlideshowCore {
	
    private var _index:Int = 0;
    private var _slides:Array<Element>;
    
    public function new():Void{
    	_slides = [];
        _slides = cast(window.document.querySelectorAll(".slide"));
        trace("slides array length: " + _slides.length);
    }
    
    public function increaseIndex():Void{
    	_index ++;
        if(_index < 0){
        	_index = 0;
        }
    }
    
    public function decreaseIndex():Void{
    	_index --;
        if(_index >= _slides.length){
        	_index = _slides.length - 1;
        }
    }
}

This is the core of what a slideshow does. It manages the index values.

Take this class as the super class.

If we will build it the right way, we need a class for the slides.
So again what does each slide need to know?
A slide should have an id, the DOM slide element and a position.

class Slide {
	
    private var _id:Int;
    public var id(get, null):Int;
    
    private var _element:Element;
    public var element(get, null):Int;
    
    private var _pos:String = "";
    public var pos(get, set):String;
    
    public function new(id:Int, element:Element):Void{
    	_id = id;
        _element = element;
    }
    
    // Getter Setter
    private function get_id():Int{
    	return _id;
    }
    
    private function get_element():Element{
    	return _element;
    }
    
    private function get_pos():String{
    	return _pos;
    }
    
    private function set_pos(pos:String):String{
    	return _pos = pos;
    }
}

So the Slidehow class would now changed to:

class SlideshowCore {
	
    private var _index:Int = 0;    
    private var _slides:Array<Slide>;
    
    public function new():Void{
    	_slides = [];
        var slideDomElements:Array<Element> = [];
        slideDomElements = cast(window.document.querySelectorAll(".slide"));
        for(i in 0...slideDomElements.length){
        	_slides.push(new Slide(i, slideDomElements[i]));
        }
        trace("slides array length: " + _slides.length);
    }
    
    public function increaseIndex():Void{
    	_index ++;
        if(_index < 0){
        	_index = 0;
        }
    }
    
    public function decreaseIndex():Void{
    	_index --;
        if(_index >= _slides.length){
        	_index = _slides.length - 1;
        }
    }
}

Now we have the base of our slideshow.
The base should hold our slides and handle the index.

From here you can take it wherever you want. No matter what kind of slideshow or slider you want make. They have allways the same core.

Lets use the power of inheritance an build a slideshow with buttons. You can use the SlidehowCore class as a super class.

class ButtonSlideshow extends SlideshowCore {
	
    private var _nextSelector:String = ".nextBtn";
    private var _prevSelector:String = ".prevBtn";
    
    private var _nextBtn:AnchorElement;
    private var _prevBtn:AnchorElement;
    
    public function new(options:Dynamic):Void{
    	super();
        if(options =! null){
        	setOptions(options);        
    	}else{
        	init();
        }
    }
    
    private function setOptions(options:Dynamic):Void{
    	
        init();
    }
    
    private function init(){
    	_nextBtn = cast(window.document.querySelector(_nextSelector));
        _nextBtn.addEventListener(nextHanlder);
        _prevBtn = cast(window.document.querySelector(_prevSelector));
        _prevBtn.addEventListener(prevHanlder);
    }
    
    private function nextHandler(ev:Event):Void{
    	ev.preventDefault();
        this.increaseIndex();
    }
    
    private function prevHandler(ev:Event):Void{
    	ev.preventDefault();
        this.decreaseIndex();
    }
}

In this code the slideshow will be controlled from the core system. The buttons are only the pulse for the core to change the index. Next step can be to define what will happen visually when the index is changed.

This is just an example and not a finished product.

Keep in mind to start always with the base!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>