fradrive/templates/standalone/inputs.julius

(function() {
  'use strict';

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

  // allows for multiple file uploads with separate inputs
  window.utils.initializeFileUpload = function(input) {
    var isMulti = input.hasAttribute('multiple');
    var fileList = isMulti ? addFileList() : null;
    var label = addFileLabel();

    function renderFileList(files) {
      fileList.innerHTML = '';
      Array.from(files).forEach(function(file, index) {
        var fileDisplayEl = document.createElement('li');
        fileDisplayEl.innerHTML = file.name;
        fileList.appendChild(fileDisplayEl);
      });
    }

    function updateLabel(files) {
      if (files.length) {
        if (isMulti) {
          label.innerText = files.length + ' Dateien ausgwählt';
        } else {
          label.innerHTML = files[0].name;
        }
      } else {
        resetFileLabel();
      }
    }

    function addFileList() {
      var list = document.createElement('ol');
      list.classList.add('file-input__list');
      var unpackEl = input.parentElement.querySelector('.file-input__unpack');
      if (unpackEl) {
        input.parentElement.insertBefore(list, unpackEl);
      } else {
        input.parentElement.appendChild(list);
      }
      return list;
    }

    function addFileLabel() {
      var label = document.createElement('label');
      label.classList.add('file-input__label');
      label.setAttribute('for', input.id);
      input.parentElement.insertBefore(label, input);
      return label;
    }

    function resetFileLabel() {
      // interpolate translated String here
      label.innerText = 'Datei' + (isMulti ? 'en' : '') + ' auswählen';
    }

    // initial setup
    resetFileLabel();
    input.classList.add('file-input__input--hidden');
    input.addEventListener('change', function() {
      input.dispatchEvent(new Event('input'));
      if (isMulti) {
        renderFileList(input.files);
      }

      updateLabel(input.files);
    });
  }

  // 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-container--checked', this.checked);
      });
    }

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

  window.utils.initializeCheckboxRadio = function(input, type) {

    if (!input.parentElement.classList.contains(type)) {
      var parentEl = input.parentElement;
      var siblingEl = input.nextElementSibling;
      var wrapperEl = document.createElement('div');
      var labelEl = document.createElement('label');
      wrapperEl.classList.add(type);
      labelEl.setAttribute('for', input.id);
      wrapperEl.appendChild(input);
      wrapperEl.appendChild(labelEl);

      if (siblingEl) {
        parentEl.insertBefore(wrapperEl, siblingEl);
      } else {
        parentEl.appendChild(wrapperEl);
      }
    }
  }

})();

document.addEventListener('setup', function(e) {
  if (e.detail.module && e.detail.module !== 'inputs')
    return;

  // initialize checkboxes
  Array.from(e.detail.scope.querySelectorAll('input[type="checkbox"]:not(.js-initialized)')).forEach(function(inp) {
    window.utils.initializeCheckboxRadio(inp, 'checkbox');
    inp.classList.add("js-initialized");
  });

  // initialize radios
  Array.from(e.detail.scope.querySelectorAll('input[type="radio"]:not(.js-initialized)')).forEach(function(inp) {
    window.utils.initializeCheckboxRadio(inp, 'radio');
    inp.classList.add("js-initialized");
  });

  // initialize file-upload-fields
  Array.from(e.detail.scope.querySelectorAll('input[type="file"]:not(.js-initialized)')).forEach(function(inp) {
    window.utils.initializeFileUpload(inp);
    inp.classList.add("js-initialized");
  });

  // initialize file-checkbox-fields
  Array.from(e.detail.scope.querySelectorAll('.js-file-checkbox:not(.js-initialized)')).forEach(function(inp) {
    window.utils.reactiveFileCheckbox(inp);
    inp.classList.add("js-initialized");
  });
});

document.addEventListener('DOMContentLoaded', function() {
  document.dispatchEvent(new CustomEvent('setup', { detail: { scope: document.body, module: 'inputs' }, bubbles: true, cancelable: true }));
});