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

file-inputs for single-file-fields and no-js-users

Browse Source 
closes #33
This commit is contained in:
Felix Hamann 2018-03-27 00:23:13 +02:00
parent fe27fab561
commit 6749359e45
2 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
templates/standalone/inputs.julius
View File

@ -29,6 +29,7 @@
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;
@ -43,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');
} }
} }
@ -62,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')
@ -79,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();
}); });
@ -97,13 +102,23 @@
fileInput.container.classList.remove('pseudo-focus'); fileInput.container.classList.remove('pseudo-focus');
}); });
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');
@ -112,6 +127,7 @@
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); desc.setAttribute('for', name + '-' + currValidInputCount);
remover.classList.add('file-input__remover'); remover.classList.add('file-input__remover');
nextInput.setAttribute('id', name + '-' + currValidInputCount); nextInput.setAttribute('id', name + '-' + currValidInputCount);

2
templates/standalone/inputs.lucius
View File

@ -220,7 +220,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;