3
\$\begingroup\$

I'm looking to change a single jQuery plugin option when the window hits certain breakpoints.

The code below works, however I'm conscious of repeating code and feel there is a more elegant way writing code for examples like this.

My initial thoughts would be to store the first call in a variable.

$(window).smartresize(function () {

        if ( config.wWidth >= 768 && config.wWidth <= 1024 ) {

            $('#va-accordion').vaccordion({
                accordionW       : config.wWidth,
                accordionH       : config.wHeight,
                visibleSlices    : 2,
                expandedHeight   : 600,
                expandedWidth    : 1000,
                contentAnimSpeed : 200
            });

        } else if ( config.wWidth < 768 ) {

            $('#va-accordion').vaccordion({
                accordionW       : config.wWidth,
                accordionH       : config.wHeight,
                visibleSlices    : 1,
                expandedHeight   : 600,
                expandedWidth    : 1000,
                contentAnimSpeed : 200
            });

        } else {

            $('#va-accordion').vaccordion({
                accordionW       : config.wWidth,
                accordionH       : config.wHeight,
                visibleSlices    : 3,
                expandedHeight   : 600,
                expandedWidth    : 1000,
                contentAnimSpeed : 200
            });
        }

    });

    $(window).trigger("smartresize");
\$\endgroup\$

2 Answers 2

4
\$\begingroup\$
$(window).smartresize(function () {

  var chosenSettings;

  // We could map out the defaults first.
  var defaults = {
    accordionW: config.wWidth,
    accordionH: config.wHeight,
    visibleSlices: 0,
    expandedHeight: 600,
    expandedWidth: 1000,
    contentAnimSpeed: 200
  };

  // Then, depending on the conditions, create an object of the modifications
  // This way, it's easier to add in more differences.
  if (config.wWidth >= 768 && config.wWidth <= 1024) {
    chosenSettings = {visibleSlices: 2};
  } else if (config.wWidth < 768) {
    chosenSettings = {visibleSlices: 1};
  } else {
    chosenSettings = {visibleSlices: 3};
  }

  // Then use extend to create an object with the chosen settings
  var settings = $.extend({}, defaults, chosenSettings);
  $('#va-accordion').vaccordion(settings);  

// Assuming smartresize returns the same object, we can chain trigger.
}).trigger('smartresize');
\$\endgroup\$
4
  • \$\begingroup\$ This is exactly what I was after... it will be a great help for my future work as well, thank you \$\endgroup\$ Commented May 7, 2014 at 8:18
  • \$\begingroup\$ That's a great solution Joseph! Let me suggest moving the if block to a method that receives config and returns the chosenSettings. I think that will be even better! :) \$\endgroup\$ Commented May 7, 2014 at 14:33
  • \$\begingroup\$ @Juliano I didn't do that because I assumed this function gets called on resize, and a function inside this would be bad for performance as it is created everytime it is called. \$\endgroup\$
    – Joseph
    Commented May 7, 2014 at 16:02
  • \$\begingroup\$ I didn't think about it, excellent point! \$\endgroup\$ Commented May 7, 2014 at 17:17
3
\$\begingroup\$

You might extract your code to a function to remove the repeated code, passing the values ​​that change as parameters:

$(window).smartresize(function () {

    if (config.wWidth >= 768 && config.wWidth <= 1024) {
        createVaccordion(config, 2);

    } else if (config.wWidth < 768) {
        createVaccordion(config, 1);

    } else {
        createVaccordion(config, 3);
    }

    function createVaccordion(config, slices) {
        $('#va-accordion').vaccordion({
            accordionW: config.wWidth,
            accordionH: config.wHeight,
            visibleSlices: slices,
            expandedHeight: 600,
            expandedWidth: 1000,
            contentAnimSpeed: 200
        });
    }
});

$(window).trigger("smartresize");
\$\endgroup\$
1
  • \$\begingroup\$ This is a method I hadn't considered, thank you. I've gone with an alternative solution, but marked this up. \$\endgroup\$ Commented May 7, 2014 at 8:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.