Stappenindicator

import {
  getElementRectPlus,
  calculateDistance,
} from '../../../js/utils/dom-geometry';

var STEP_STATUS = {
  DONE: 'DONE',
  CURRENT: 'CURRENT',
  FUTURE: 'FUTURE',
};

var circleIcon = '' +
  '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" xml:space="preserve" class="icon" aria-hidden="true" role="presentation" focusable="false">' +
  '<g>' +
  '<circle fill="currentColor" cx="8" cy="8" r="8"/>' +
  '</g>' +
  '</svg>';

var checkIcon = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" class="icon" aria-hidden="true" role="presentation" focusable="false">' +
  '<g>' +
  '<polygon fill="currentColor" points="16,3.8 14.1,1.8 12,3.9 5.6,10.3 1.9,6.6 0,8.6 3.7,12.2 3.7,12.2 5.6,14.2 7.5,12.2 7.5,12.2"/>' +
  '</g>' +
  '</svg>';

/**
 * Initialize component.
 *
 * @param {Element} element
 */
export default function StepsIndicator (element) {
  var component = {
    // Elements
    containerElement: element,
    backgroundLineElement: null,
    progressLineElement: null,

    // Other properties
    steps: [],

    // Methods
    setLines: setLines,
  };

  // Set background and progress line elements.
  component.backgroundLineElement = element.getElementsByClassName(
    'steps-indicator__background')[0];
  component.progressLineElement = element.getElementsByClassName(
    'steps-indicator__progress')[0];

  // Loop over steps to initialize.
  var stepElements = element.getElementsByClassName('steps-indicator__step');
  for (var i = 0; i < stepElements.length; i++) {
    var stepElement = stepElements[i];

    var step = {
      element: stepElement,
      iconElement: stepElement.getElementsByClassName(
        'steps-indicator__icon')[0],
      pointRect: null,
      distanceToPreviousPoint: 0,
      status: null,
    };

    // Set status and icon according to status of the step.
    if (stepElement.classList.contains('steps-indicator__done')) {
      step.status = STEP_STATUS.DONE;
      step.iconElement.innerHTML = checkIcon;
    } else if (stepElement.classList.contains('steps-indicator__current')) {
      step.status = STEP_STATUS.CURRENT;
      step.iconElement.innerHTML = circleIcon;
    } else {
      step.status = STEP_STATUS.FUTURE;
    }

    component.steps[i] = step;
  }

  // Initially set lines.
  component.setLines();

  // Recalculate progress line on window resize (responsive behaviour).
  window.addEventListener('resize', function () {
    component.setLines();
  });
}

/**
 * Set lines according to step status.
 */
function setLines () {
  var fullLengthLine = 0;
  var progressLineLength = 0;

  for (var i = 0; i < this.steps.length; i++) {
    var step = this.steps[i];

    // Set step point.
    if (step.iconElement) {
      step.pointRect = getElementRectPlus(step.iconElement);
    }

    // Calculate distance between previous and current step points.
    if (i > 0) {
      step.distanceToPreviousPoint = calculateDistance(step.pointRect.center,
        this.steps[i - 1].pointRect.center);
    }

    // Calculate length of progress line.
    if (step.status === STEP_STATUS.DONE || step.status ===
      STEP_STATUS.CURRENT) {
      progressLineLength += step.distanceToPreviousPoint;
    }

    // Calculate length of background line.
    fullLengthLine += step.distanceToPreviousPoint;
  }

  // Set lines length.
  this.backgroundLineElement.style.width = fullLengthLine + 'px';
  this.progressLineElement.style.width = progressLineLength + 'px';
}