I have been using a pattern similar to this basic structure below. Can anyone please let me know if this is a correct way to code an object-oriented widget for reuse? I am looking to make code than can also be extended easily and modular.
$(function(){
// wrap in jquery .fn wrapper so that may be called on a
function $lider(autoplay, velocity, controls){
var $lider = [
// props n methods, accessible through data-slider-* attributes
{
settings : {
envokeBecause : $('[data-widget~="slider"]'),
autoplay : autoplay,
speed : velocity,
showControls : controls,
slideSize : '100%',// 25% will show 4 slides if the parent container is 100% width and so on
},
bindings : {
slideRail : $('[data-function~="slide-rail"]'),
slide : $('[data-function~="slide"]'),
nextButton : $('[data-function~="next"]'),
prevButton : $('[data-function~="prev"]'),
playButton : $('[data-function~="play"]'),
pauseButton : $('[data-function~="pause"]'),
stopButton : $('[data-function~="stop"]')
// attach this functionality to the DOM
},
methods : {
slideNext : function(){ slideRail.animate({left: '-=100%'}, velocity) },
slidePrev : function(){ slideRail.animate({left: '+=100%'}, velocity) },
slideRestart : function(){ slideRail.animate({left: '0%'}, velocity) },
slideStart : function(){ window.$liderTimer = setInterval(slideNext, velocity) },
slidesCount : function(){ slideRail.children().size()
}
}
}
]
$.each($lider, function(){
// iterate through all of the slider objects properties
window.SliderProps = this;
// set slider to be accessible to the global scope
});
// slider props stored as vars
var $liderHook = SliderProps.settings.envokeBecause;
var slideRail = SliderProps.bindings.slideRail;
var slide = SliderProps.bindings.slide;
var play = SliderProps.bindings.playButton;
var next = SliderProps.bindings.nextButton;
var prev = SliderProps.bindings.prevButton;
var pause = SliderProps.bindings.pauseButton;
var stop = SliderProps.bindings.stopButton;
var slideCount = SliderProps.bindings.slideRail.children().size();
var slideCounter = 0;
function slidePrev(){
var slidePrev = SliderProps.methods.slidePrev();
}
function slideStop(){
/*slideRail.stop(); */
window.clearInterval( $liderTimer )
}
function slideRestart(){
var slidePrev = SliderProps.methods.slideRestart();
slideRail.stop();
}
function autoPlay(){
SliderProps.methods.slideStart();
}
function slideNext(){
slideCounter++
var slideNext = SliderProps.methods.slideNext();
console.log(slideCounter)
console.log(slideCount)
if (slideCounter != slideCount){
// offset var-1 for js index compensation
console.log('keep slidin..')
}
else {
console.log('stop!')
slideRestart();
slideCounter = 0;
}
}
// element -> event delegation type -> function()
slideRail.hover( slideStop )
next.click( slideNext )
prev.click( slidePrev )
stop.click( slideRestart )
pause.click( slideStop )
play.click( autoPlay )
} // close function slider()
$lider(true, 750);
});
