fradrive/templates/standalone/inputs.julius

(function() {
  'use strict';

  window.utils = window.utils || {};

  // makes <label> smaller if <input> is focussed
  window.utils.reactiveInputLabel = function(input, label) {
    // updates to dom
    if (input.value.length > 0) {
      label.classList.add('reactive-label--small');
    }
    // add event listeners
    input.addEventListener('focus', function() {
      label.classList.add('reactive-label--small');
    });
    label.addEventListener('click', function() {
      label.classList.add('reactive-label--small');
      input.focus();
    });
    input.addEventListener('blur', function() {
      if (input.value.length < 1) {
        label.classList.remove('reactive-label--small');
      }
    });
  };

  // allows for multiple file uploads with separate inputs
  window.utils.reactiveFileUpload = function(input, formGroup) {
    var currValidInputCount = 0;
    var addMore = false;
    var inputName = input.getAttribute('name');
    var isMulti = input.hasAttribute('multiple') ? true : false;
    var wrapper = formGroup;
    // FileInput PseudoClass
    function FileInput(container, input, label, remover) {
      this.container = container;
      this.input = input;
      this.label = label;
      this.remover = remover;
      addListener(this);

      this.addTo = function(parentElement) {
        parentElement.appendChild(this.container);
      }
      this.remove = function() {
        this.container.remove();
      }
      this.wasValid = function() {
        return this.container.classList.contains('file-input__container--valid');
      }
    }
    function addNextInput() {
      var inputs = wrapper.querySelectorAll('.file-input__container');
      if (inputs[inputs.length - 1].classList.contains('file-input__container--valid')) {
        makeInput(inputName).addTo(wrapper);
      }
    }
    // updates submitbutton and form-group-stripe
    function updateForm() {
      var submitBtn = formGroup.parentElement.querySelector('[type=submit]');
      formGroup.classList.remove('form-group--has-error');
      if (currValidInputCount > 0) {
        if (formGroup.classList.contains('form-group')) {
          formGroup.classList.add('form-group--valid')
        }
        submitBtn.removeAttribute('disabled');
        if (isMulti) {
          addNextInput();
        }
      } else {
        if (formGroup.classList.contains('form-group')) {
          formGroup.classList.remove('form-group--valid')
        }
        submitBtn.setAttribute('disabled', 'disabled');
      }
    }
    // addseventlistener destInput
    function addListener(fileInput) {
      fileInput.input.addEventListener('change', function(event) {
        if (fileInput.input.value.length > 0) {
          // update label
          var filePath = fileInput.input.value.replace(/\\/g, '/').split('/');
          var fileName = filePath[filePath.length - 1];
          fileInput.label.innerHTML = fileName;
          // increase count if this field was empty previously
          if (!fileInput.wasValid()) {
            currValidInputCount++;
          }
          fileInput.container.classList.add('file-input__container--valid')
          // show next input
        } else {
          if (isMulti) {
            currValidInputCount--;
          }
          clearInput(fileInput);
        }
        updateForm();
      });
      fileInput.input.addEventListener('focus', function() {
        fileInput.container.classList.add('pseudo-focus');
      });
      fileInput.input.addEventListener('blur', function() {
        fileInput.container.classList.remove('pseudo-focus');
      });
      fileInput.remover.addEventListener('click', function() {
        if (fileInput.wasValid()) {
          currValidInputCount--;
        }
        clearInput(fileInput);
      });
    }

    // clears or removes fileinput based on multi-file or not
    function clearInput(fileInput) {
      if (isMulti) {
        fileInput.remove();
      } else {
        fileInput.container.classList.remove('file-input__container--valid')
        fileInput.label.innerHTML = '';
      }
      updateForm();
    }
    // create new wrapped input element with name name
    function makeInput(name) {
      var cont =      document.createElement('div');
      var desc =      document.createElement('label');
      var nextInput = document.createElement('input');
      var remover =   document.createElement('div');
      cont.classList.add('file-input__container');
      desc.classList.add('file-input__label', 'btn');
      nextInput.classList.add('js-file-input');
      desc.setAttribute('for', name + '-' + currValidInputCount);
      remover.classList.add('file-input__remover');
      nextInput.setAttribute('id', name + '-' + currValidInputCount);
      nextInput.setAttribute('name', name);
      nextInput.setAttribute('type', 'file');
      cont.appendChild(nextInput);
      cont.appendChild(desc);
      cont.appendChild(remover);
      return new FileInput(cont, nextInput, desc, remover);
    }
    // initial setup
    function setup() {
      var newInput = makeInput(inputName);
      if (isMulti) {
        wrapper = document.createElement('div');
        wrapper.classList.add('file-input__wrapper');
        formGroup.insertBefore(wrapper, input);
      }
      input.remove();
      newInput.addTo(wrapper);
      updateForm();
    }
    setup();
  }

  // to remove previously uploaded files
  window.utils.reactiveFileCheckbox = function(input) {
    // adds eventlistener(s)
    function addListener(container) {
      input.addEventListener('change', function(event) {
        container.classList.toggle('file-checkbox__container--checked', this.checked);
      });
    }

    // initial setup
    function setup() {
      var cont = input.parentNode;
      while (cont !== document.body) {
        if (cont.classList.contains('file-checkbox__container')) {
          break;
        }
        cont = cont.parentNode;
      }

      // take care of properly moving elements
      if (input.parentNode.classList.contains('checkbox')) {
        input.parentNode.classList.add('file-checkbox__checkbox');
      } else {
        input.classList.add('file-checkbox__checkbox');
      }
      addListener(cont);
    }
    setup();
  }

  window.utils.reactiveFormGroup = function(formGroup, input) {
    // updates to dom
    if (input.value.length > 0) {
      formGroup.classList.add('form-group--valid');
    } else {
      formGroup.classList.remove('form-group--valid');
    }
    input.addEventListener('input', function() {
      formGroup.classList.remove('form-group--has-error');
      if (input.value.length > 0) {
        formGroup.classList.add('form-group--valid');
      } else {
        formGroup.classList.remove('form-group--valid');
      }
    });
  };

})();

document.addEventListener('DOMContentLoaded', function() {

  // setup reactive labels
  Array.from(document.querySelectorAll('.reactive-label')).forEach(function(label) {
    var input = document.querySelector('#' + label.getAttribute('for'));
    if (!input) {
      console.error('No input found for ReactiveLabel! Targeted input: \'#%s\'', label.getAttribute('for'));
      label.classList.remove('reactive-label');
      return false;
    }

    var parent = label.parentElement;
    var type = input.getAttribute('type');
    var isListening = !RegExp(['date', 'checkbox', 'radio', 'hidden', 'file'].join('|')).test(type);
    var isInFormGroup = parent.classList.contains('form-group') && parent.classList.contains('form-group--required');


    if (isInFormGroup) {
      window.utils.reactiveFormGroup(parent, input);
    }
    if (isListening) {
      window.utils.reactiveInputLabel(input, label);
    } else {
      label.classList.remove('reactive-label');
    }
  });

  // initialize file-upload-fields
  Array.from(document.querySelectorAll('input[type="file"]')).map(function(inp) {
    var formGroup = inp.parentNode;
    while (!formGroup.classList.contains('form-group') && formGroup !== document.body) {
      formGroup = formGroup.parentNode;
    }
    window.utils.reactiveFileUpload(inp, formGroup);
  });

  // initialize file-checkbox-fields
  Array.from(document.querySelectorAll('.js-file-checkbox')).map(function(inp) {
    window.utils.reactiveFileCheckbox(inp);
  });
});