1
\$\begingroup\$

This represents a UI-slider widget - there are a number of different widgets on the page. This function is repeated per widget - 90% of the code is the same - the only difference being that each has a unique getDesc() function which is called by the slider events.

My gut feeling is that these widgets can be refactored to reduce the amount of repeated code, but my javascript experience is poor and I'm not too sure of the best approach.

function TermWidget() {

    var $slider = $('.term-slider');

    // Minimum and maximum slider values
    var min = $slider.data('min');
    var max = $slider.data('max');

    // Value
    var id = $slider.data('id');
    var value = $('#' + id).val();

    $slider.slider({
        range: "min",
        min: min,
        max: max,
        step: 1,
        value: value,
        animate: true,
        create: function (event, ui) {
            sliderCreate.call(this, getDesc($(this).slider('value')));
        },
        start: function (event, ui) {
            sliderStart.call(this);
        },
        slide: function (event, ui) {
            sliderSlide.call(this, getDesc(ui.value));
        },
        stop: function (event, ui) {
            sliderStop.call(this, id, ui.value);
        }
    });

    function getDesc(value) {

        var desc = "";

        if (value == 1) {
            desc = "1 Day";
        }
        else if (value <= 31) {
            desc = value + " Days";
        }
        else {
            desc = (value - 30) + " Months";
        }

        return desc;
    }
}
\$\endgroup\$

migrated from stackoverflow.com Oct 23 '14 at 14:10

This question came from our site for professional and enthusiast programmers.

  • \$\begingroup\$ You can pass a function reference as a parameter. Just don't put parenthesis after it, like this... function TermWidget(callback) and then call it like TermWidget(getDesc); \$\endgroup\$ – Archer Oct 23 '14 at 8:36
1
\$\begingroup\$

I'd construct a new instance of TermWidget using the new keyword for each widget that needs unique functionality, passing in a different getDesc function for each:

function TermWidget($slider, getDescFunc) {

    // Minimum and maximum slider values
    var min = $slider.data('min');
    var max = $slider.data('max');

    // Value
    var id = $slider.data('id');
    var value = $('#' + id).val();

    $slider.slider({
        range: "min",
        min: min,
        max: max,
        step: 1,
        value: value,
        animate: true,
        create: function (event, ui) {
            sliderCreate.call(this, getDescFunc($(this).slider('value')));
        },
        start: function (event, ui) {
            sliderStart.call(this);
        },
        slide: function (event, ui) {
            sliderSlide.call(this, getDescFunc(ui.value));
        },
        stop: function (event, ui) {
            sliderStop.call(this, id, ui.value);
        }
    });

}

var widget1 = new TermWidget($('#term-slider-1'), function(value) {
    var desc = "";

    if (value == 1) {
        desc = "1 Day";
    }
    else if (value <= 31) {
        desc = value + " Days";
    }
    else {
        desc = (value - 30) + " Months";
    }

    return desc;
});

var widget2 = new TermWidget($('#term-slider-2'), function(value) {
        // some other getDesc function

        return desc;
});

var widget3 = new TermWidget($('#term-slider-3'), function(value) {
        // yet another getDesc function

        return desc;
});
\$\endgroup\$
  • \$\begingroup\$ Beautiful - works like a dream - thanks Zougen \$\endgroup\$ – dotnetnoob Oct 23 '14 at 9:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy