causeway-standard-theme/causeway/js/components/wizard.js

(function (window, $) {
  'use strict';

  //  CSS Wizard
  var calc_width = function (wiz) {
      var width = 0;
      $('li', wiz).each(function () {
        $(this)[0].style.width = 'auto';
        width = width + parseInt($(this)[0].clientWidth, 10);
      });
      return width;
    },
    adjust_wizard = function (cssWizard) {
      var wizard = cssWizard,
        padding = 20,
        border = 2,
        wizard_width = parseInt($(wizard)[0].clientWidth, 10),
        total_steps_width = calc_width(wizard),
        description = $('.wizard-description', wizard),
        current = $('.current', wizard),
        previous = current.prev('li').not(description),
        previous2 = previous.add(previous.prev('li')).not(description),
        next = current.next('li'),
        next2 = next.add(next.next('li')),
        desc_width = parseInt(description[0].clientWidth, 10),
        curr_width = parseInt(current[0].clientWidth, 10) + 1,
        remaining_lis = $('li', wizard).not(description).not(current),
        lis_with_current = $('li', wizard).not(description),
        steps_count = ($('li', wizard).length) - 1,
        available_width = wizard_width - desc_width - curr_width - padding - (border * 2);

      if (total_steps_width > wizard_width) {

        remaining_lis.css('width', available_width / steps_count);

        if (next.length) {
          previous.css('width', 1.5 * available_width / steps_count);
        } else {
          previous2.css('width', 1.5 * available_width / steps_count);
        }

        if (previous.length) {
          next.css('width', 1.5 * available_width / steps_count);
        } else {
          next2.css('width', 1.5 * available_width / steps_count);
        }

        current.css({
          'width': curr_width
        });
      } else {

        if (Math.round(curr_width) > Math.round((available_width + curr_width) / steps_count)) {
          remaining_lis.css('width', available_width / (steps_count - 1));
          current.css({
            'width': curr_width
          });
        } else {
          lis_with_current.css('width', (available_width + curr_width) / steps_count);
        }
      }

      if(window.Causeway.getDevice() === 'tablet' || window.Causeway.getDevice() === 'mobile') {
        (description, current, remaining_lis).css('width', 'auto');
      }

    },
    wizards = $('.wizard'),
    navigationPaneRight = $('.navigation-pane-right');

  var wizardInit = function () {

    if (wizards.length < 1) {
      navigationPaneRight.removeClass('has-wizard');
      return false;
    }

    navigationPaneRight.addClass('has-wizard');

    wizards.each(function () {
      adjust_wizard($(this));
    });

    $(window).resize(function () {
      wizards.each(function () {
        adjust_wizard($(this));
      });
    });

  };

  window.Causeway.wizard = {};
  window.Causeway.wizard.wizardInit = wizardInit;
  if(!window.Causeway.isDevice) {
    wizardInit();
  }
  $(window).on('resize', function () {
    if(window.Causeway.getDevice() === 'desktop' || window.Causeway.getDevice() === 'lg-desktop') {
      wizardInit();
    } else {
      wizards.each(function () {
        adjust_wizard($(this));
      });
    }
  });

}(window, jQuery));