fraport/fradrive-old
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feat/file_inputs' into 'master'

Browse Source 
single-, multi- and no-js-file-inputs

Closes #33

See merge request !14
This commit is contained in:
Felix Hamann 2018-03-29 00:09:24 +02:00
commit f4d95e23c9
2 changed files with 29 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
templates/standalone/inputs.julius
View File

@ -24,10 +24,12 @@
}); });
}; };
// allows for multiple file uploads with separate inputs
window.utils.reactiveFileUpload = function(input, parent) { window.utils.reactiveFileUpload = function(input, parent) {
var currValidInputCount = 0; var currValidInputCount = 0;
var addMore = false; var addMore = false;
var inputName = input.getAttribute('name'); var inputName = input.getAttribute('name');
var isMulti = input.getAttribute('multiple') ? true : false;
// FileInput PseudoClass // FileInput PseudoClass
function FileInput(container, input, label, remover) { function FileInput(container, input, label, remover) {
this.container = container; this.container = container;
@ -42,7 +44,7 @@
this.remove = function() { this.remove = function() {
this.container.remove(); this.container.remove();
} }
this.isValid = function() { this.wasValid = function() {
return this.container.classList.contains('file-input__container--valid'); return this.container.classList.contains('file-input__container--valid');
} }
} }
@ -61,7 +63,9 @@
parent.classList.add('form-group--valid') parent.classList.add('form-group--valid')
} }
submitBtn.removeAttribute('disabled'); submitBtn.removeAttribute('disabled');
addNextInput(); if (isMulti) {
addNextInput();
}
} else { } else {
if (parent.classList.contains('form-group')) { if (parent.classList.contains('form-group')) {
parent.classList.remove('form-group--valid') parent.classList.remove('form-group--valid')
@ -78,14 +82,16 @@
var fileName = filePath[filePath.length - 1]; var fileName = filePath[filePath.length - 1];
fileInput.label.innerHTML = fileName; fileInput.label.innerHTML = fileName;
// increase count if this field was empty previously // increase count if this field was empty previously
if (!fileInput.isValid()) { if (!fileInput.wasValid()) {
currValidInputCount++; currValidInputCount++;
} }
fileInput.container.classList.add('file-input__container--valid') fileInput.container.classList.add('file-input__container--valid')
// show next input // show next input
} else { } else {
currValidInputCount--; if (isMulti) {
fileInput.remove(); currValidInputCount--;
}
clearInput(fileInput);
} }
updateForm(); updateForm();
}); });
@ -95,26 +101,36 @@
fileInput.input.addEventListener('blur', function() { fileInput.input.addEventListener('blur', function() {
fileInput.container.classList.remove('pseudo-focus'); fileInput.container.classList.remove('pseudo-focus');
}); });
fileInput.label.addEventListener('click', function() {
fileInput.input.click();
});
fileInput.remover.addEventListener('click', function() { fileInput.remover.addEventListener('click', function() {
if (fileInput.isValid()) { if (fileInput.wasValid()) {
currValidInputCount--; currValidInputCount--;
} }
fileInput.remove(); clearInput(fileInput);
updateForm();
}); });
} }
// 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 // create new wrapped input element with name name
function makeInput(name) { function makeInput(name) {
var cont = document.createElement('div'); var cont = document.createElement('div');
var desc = document.createElement('span'); var desc = document.createElement('label');
var nextInput = document.createElement('input'); var nextInput = document.createElement('input');
var remover = document.createElement('div'); var remover = document.createElement('div');
cont.classList.add('file-input__container'); cont.classList.add('file-input__container');
desc.classList.add('file-input__label', 'btn'); desc.classList.add('file-input__label', 'btn');
nextInput.classList.add('js-file-input');
desc.setAttribute('for', name + '-' + currValidInputCount);
remover.classList.add('file-input__remover'); remover.classList.add('file-input__remover');
nextInput.setAttribute('id', name + '-' + currValidInputCount);
nextInput.setAttribute('name', name); nextInput.setAttribute('name', name);
nextInput.setAttribute('type', 'file'); nextInput.setAttribute('type', 'file');
cont.appendChild(nextInput); cont.appendChild(nextInput);

2
templates/standalone/inputs.lucius
View File

@ -223,7 +223,7 @@ input[type="checkbox"]:checked::after {
} }
/* CUSTOM FILE INPUT */ /* CUSTOM FILE INPUT */
input[type="file"] { input[type="file"].js-file-input {
color: white; color: white;
width: 0.1px; width: 0.1px;
height: 0.1px; height: 0.1px;