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, listen) {
    // updates to dom
    if (input.value.length > 0) {
      formGroup.classList.add('form-group--valid');
    } else {
      formGroup.classList.remove('form-group--valid');
    }
    // add event listeners if told to listen
    if (listen) {
      input.addEventListener('input', function() {
        console.log(input, 'got inpit');
        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;
    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 = document.createElement('input');
          nextInput.setAttribute('name', destInput.getAttribute('name'));
          nextInput.setAttribute('type', 'file');
          addListener(nextInput);
          parent.appendChild(nextInput);
        }
      });
      parent.appendChild(addMore);
    }
    function updateParent() {
      if (currInputCount > 0) {
        if (parent.classList.contains('form-group')) {
          parent.classList.add('form-group--valid')
        }
      } else {
        if (parent.classList.contains('form-group')) {
          parent.classList.remove('form-group--valid')
        }
      }
    }
    function addListener(destInput) {
      destInput.addEventListener('change', function(event) {
        if (destInput.value.length > 0) {
          currInputCount++;
          showAddMore(destInput);
        }
        updateParent();
      });
    }
    addListener(input);
  }

  // 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, isListening);
    }
    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;
      });
    }
  });
});