fradrive/templates/widgets/form.julius

(function() {
  'use strict';

  if (!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');
      }
    });
  };

  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');
      }
    });
  };

  window.utils.reactiveFileUpload = function(input, parent) {
    var currInputCount = 0;
    // shows new add-mode-button after destInput
    function showAddMore(destInput) {
      var addMore = document.createElement('div');
      addMore.classList.add('form-group__add-entry');
      addMore.addEventListener('click', function() {
        if (addMore.classList.contains('form-group__remove-entry')) {
          addMore.remove();
          destInput.remove();
          currInputCount--;
          updateParent();
        } else {
          addMore.classList.remove('form-group__add-entry');
          addMore.classList.add('form-group__remove-entry');
          var nextInput = makeInput(destInput.getAttribute('name'));
          parent.appendChild(nextInput);
        }
      });
      parent.appendChild(addMore);
    }
    // updates submitbutton and form-group-stripe
    function updateParent() {
      var submitBtn = parent.parentElement.querySelector('[type=submit]');
      if (currInputCount > 0) {
        if (parent.classList.contains('form-group')) {
          parent.classList.add('form-group--valid')
          parent.classList.remove('form-group--has-error');
        }
        submitBtn.removeAttribute('disabled');
      } else {
        if (parent.classList.contains('form-group')) {
          parent.classList.remove('form-group--has-error');
          parent.classList.remove('form-group--valid')
        }
        submitBtn.setAttribute('disabled', 'disabled');
      }
    }
    // addseventlistener destInput
    function addListener(destInput) {
      destInput.addEventListener('change', function(event) {
        if (destInput.value.length > 0) {
          destInput.nextSibling.innerHTML = destInput.value;
          currInputCount++;
          showAddMore(destInput);
        } else {
          destInput.nextSibling.innerHTML = 'Choose file';
        }
        updateParent();
      });
    }

    // create new wrapped input element with name name
    function makeInput(name) {
      var nextInput = document.createElement('input');
      nextInput.setAttribute('name', name);
      nextInput.setAttribute('type', 'file');
      addListener(nextInput);
      return wrapButton(nextInput);
    }

    // wraps input in container to be able to style it properly
    function wrapButton(input) {
      var cont = document.createElement('div');
      var desc = document.createElement('span');
      cont.classList.add('form-group__file-input-container');
      desc.classList.add('form-group__file-input-label');
      desc.innerHTML = 'Choose file';
      cont.appendChild(input);
      cont.appendChild(desc);
      cont.addEventListener('click', function() {
        input.click();
      });
      return cont;
    }

    // initial setup
    function setup() {
      addListener(input);
      var currInput = wrapButton(input);
      parent.appendChild(currInput);
      updateParent();
    }
    setup();
  }

  // registers input-listener for each element in <elements> (array) and
  // enables <button> if <fn> for these elements returns true
  window.utils.reactiveButton = function(elements, button, fn) {
    if (elements.length == 0) {
      return false;
    }
    var checkboxes = elements[0].getAttribute('type') === 'checkbox';
    var eventType = checkboxes ? 'change' : 'input';
    updateButtonState();
    elements.forEach(function(el) {
      el.addEventListener(eventType, function() {
        updateButtonState();
      });
    });

    function updateButtonState() {
      if (fn.call(null, elements)) {
        button.removeAttribute('disabled');
      } else {
        button.setAttribute('disabled', 'true');
      }
    }
  };
})();

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

  Array.from(document.querySelectorAll('.reactive-label')).forEach(function(label) {
    var input = document.querySelector('#' + label.getAttribute('for'));
    var parent = label.parentElement;
    var type = input.getAttribute('type');
    var isFileInput = /file/i.test(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 (isFileInput) {
      window.utils.reactiveFileUpload(input, parent);
    }
    if (isListening) {
      window.utils.reactiveInputLabel(input, label);
    } else {
      label.classList.remove('reactive-label');
    }
  });

  // auto reactiveButton submit-buttons with required fields
  var forms = document.querySelectorAll('form');
  Array.from(forms).forEach(function(form) {
    var requireds = form.querySelectorAll('[required]');
    var submitBtn = form.querySelector('[type=submit]');
    if (submitBtn && requireds) {
      window.utils.reactiveButton(Array.from(requireds), submitBtn, function(inputs) {
        var done = true;
        inputs.forEach(function(inp) {
          var len = inp.value.trim().length;
          if (done && len === 0) {
            done = false;
          }
        });
        return done;
      });
    }
  });
});