JordanBarber JordanBarber - 2 months ago 6
Javascript Question

Simplify Javascript Object functions

I have the following javascript object:

Quotes = {
quote: '#home-quotes .quote',
quoteWrap: '#home-quotes .quote-wrap',
leftTrigger: '#home-quotes .quote-left',
rightTrigger: '#home-quotes .quote-right',
sliderDot: '#home-quotes .slider-dots li',
init: function() {
$(this.rightTrigger).click(this.quoteRight.bind(this));
$(this.leftTrigger).click(this.quoteLeft.bind(this));
$(this.sliderDot).click(this.sliderDots.bind(this));
},
quoteRight: function(e) {
var firstQuote = $(this.quote).first(),
lastQuote = $(this.quote).last(),
activeQuote = $('.quote.active'),
nextUp = activeQuote.next();
quoteWidth = $(this.quote).width();
moveLeft = -(quoteWidth*2);
// replaceLeft = -(quoteWidth);
if ( $(window).width() > 977 ) {
var updateLeft = '-978px';
} else {
var updateLeft = '-100vw';
}
e.preventDefault();
$(this.quoteWrap).removeClass('no-transition');
$(this.quoteWrap).css('left', moveLeft);
setTimeout(function(){
firstQuote.clone().insertAfter(lastQuote);
firstQuote.remove();
$('.quote-wrap').addClass('no-transition');
$('#home-quotes .quote-wrap').css('left', updateLeft);
}, 500)
activeQuote.removeClass('active');
nextUp.addClass('active');
},
quoteLeft: function(e) {
var firstQuote = $(this.quote).first(),
lastQuote = $(this.quote).last(),
activeQuote = $('.quote.active'),
nextUp = activeQuote.prev();
quoteWidth = $(this.quote).width();
moveRight = 0;
if ( $(window).width() > 977 ) {
var updateLeft = '-978px';
} else {
var updateLeft = '-100vw';
}
e.preventDefault();
$(this.quoteWrap).removeClass('no-transition');
$(this.quoteWrap).css('left', moveRight);
setTimeout(function(){
lastQuote.clone().insertBefore(firstQuote);
lastQuote.remove();
$('.quote-wrap').addClass('no-transition');
$('#home-quotes .quote-wrap').css('left', updateLeft);
}, 500)
activeQuote.removeClass('active');
nextUp.addClass('active');
},
}


I am wanting to simplify the 'quoteRight' and 'quoteLeft' functions into one 'moveQuote' function with parameters for the two functions' differences. I have tried creating a single function, such as:

moveQuote: function(direction, distance, sequence) {
var firstQuote = $(this.quote).first(),
lastQuote = $(this.quote).last(),
activeQuote = $('.quote.active'),
nextUp = activeQuote.sequence();
quoteWidth = $(this.quote).width();
movedistance = -(distance*2);
if ( $(window).width() > 977 ) {
var updateLeft = -(distance);
} else {
var updateLeft = '-100vw';
}
e.preventDefault();
$(this.quoteWrap).removeClass('no-transition');
$(this.quoteWrap).css(direction, moveLeft);
setTimeout(function(){
firstQuote.clone().insertAfter(lastQuote);
firstQuote.remove();
$('.quote-wrap').addClass('no-transition');
$('#home-quotes .quote-wrap').css('left', updateLeft);
}, 500)
activeQuote.removeClass('active');
nextUp.addClass('active');
}


and then in my 'init' function, passing the parameters like:

$(this.rightTrigger).click(this.moveQuote('Right', '978px', 'next'));


My first major issue is that my 'init' 'click' function is running onLoad and not when the 'rightTrigger' is clicked. Why is this?

Secondly, I can't figure out how to pass parameters as jQuery methods. For example, the third parameter from the example above ('next') should be passed into the jQuery function 'activeQuote.next()' but I cannot pass the parameter as 'activeQuote.sequence()' as the console returns 'activeQuote.sequence is not a function'. How can I pass a parameter string as a jQuery method?

Any help with this is much appreciated. I am just moving into object-oriented javascript and am hoping to get some pointers on the things that I am doing wrong.

Answer

For your first problem, you're passing the result of the execution of moveQuote into the call to .click. You need to pass a callable (function) instead:

var this_ref = this;
$(this.rightTrigger).click(function () {
    this_ref.moveQuote('Right', '978px', 'next');
});

For the other problem, you need to use square bracket notation to reference a property/method with dynamic data:

nextUp = activeQuote[sequence](); //sanity checking for existence is up to you