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

rename fileUpload utility to fileInput utility

Browse Source
This commit is contained in:
Felix Hamann 2019-04-06 18:39:28 +02:00
parent c42ec9163c
commit 8472a51787
2 changed files with 43 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
static/js/utils/inputs.js
View File

@ -1,6 +1,8 @@
(function() {
'use strict';
var inputUtilities = [];
var JS_INITIALIZED_CLASS = 'js-inputs-initialized';
window.utils.inputs = function(wrapper, options) {
@ -53,51 +55,52 @@
/**
*
* FileUpload Utility
* FileInput Utility
* wraps native file input
*
* Attribute: uw-file-upload
* Attribute: uw-file-input
* (element must be an input of type='file')
*
* Example usage:
* <input type='file' uw-file-upload>
* <input type='file' uw-file-input>
*
* Internationalization:
* This utility expects the following translations to be available:
* »filesSelected«: label of multi-upload button after selection
* »filesSelected«: label of multi-input button after selection
* example: "Dateien ausgewählt" (will be prepended by number of selected files)
* »selectFile«: label of single-upload button before selection
* »selectFile«: label of single-input button before selection
* example: "Datei auswählen"
* »selectFiles«: label of multi-upload button before selection
* »selectFiles«: label of multi-input button before selection
* example: "Datei(en) auswählen"
*
*/
var FILE_UPLOAD_UTIL_NAME = 'fileUpload';
var FILE_UPLOAD_UTIL_SELECTOR = 'input[type="file"][uw-file-upload]';
var FILE_INPUT_UTIL_NAME = 'fileInput';
var FILE_INPUT_UTIL_SELECTOR = 'input[type="file"][uw-file-input]';
var FILE_UPLOAD_CLASS = 'file-input';
var FILE_UPLOAD_INITIALIZED_CLASS = 'file-input--initialized';
var FILE_UPLOAD_LIST_CLASS = 'file-input__list';
var FILE_UPLOAD_UNPACK_CHECKBOX_CLASS = 'file-input__unpack';
var FILE_UPLOAD_LABEL_CLASS = 'file-input__label';
var FILE_INPUT_CLASS = 'file-input';
var FILE_INPUT_INITIALIZED_CLASS = 'file-input--initialized';
var FILE_INPUT_LIST_CLASS = 'file-input__list';
var FILE_INPUT_UNPACK_CHECKBOX_CLASS = 'file-input__unpack';
var FILE_INPUT_LABEL_CLASS = 'file-input__label';
var fileUploadUtil = function(element) {
var isMultiFileUpload = false;
var fileInputUtil = function(element) {
var isMultiFileInput = false;
var fileList;
var label;
function init() {
if (!element) {
throw new Error('FileUpload utility cannot be setup without an element!');
throw new Error('FileInput utility cannot be setup without an element!');
}
if (element.classList.contains(FILE_UPLOAD_INITIALIZED_CLASS)) {
throw new Error('FileUpload utility already initialized!');
if (element.classList.contains(FILE_INPUT_INITIALIZED_CLASS)) {
throw new Error('FileInput utility already initialized!');
}
// check if is multi-file upload
isMultiFileUpload = element.hasAttribute('multiple');
if (isMultiFileUpload) {
// check if is multi-file input
isMultiFileInput = element.hasAttribute('multiple');
if (isMultiFileInput) {
fileList = createFileList();
}
@ -111,10 +114,10 @@
});
// add util class for styling and mark as initialized
element.classList.add(FILE_UPLOAD_CLASS, FILE_UPLOAD_INITIALIZED_CLASS);
element.classList.add(FILE_INPUT_CLASS, FILE_INPUT_INITIALIZED_CLASS);
return {
name: FILE_UPLOAD_UTIL_NAME,
name: FILE_INPUT_UTIL_NAME,
element: element,
destroy: function() {},
};
@ -136,8 +139,8 @@
function createFileList() {
var list = document.createElement('ol');
list.classList.add(FILE_UPLOAD_LIST_CLASS);
var unpackEl = element.parentElement.querySelector('.' + FILE_UPLOAD_UNPACK_CHECKBOX_CLASS);
list.classList.add(FILE_INPUT_LIST_CLASS);
var unpackEl = element.parentElement.querySelector('.' + FILE_INPUT_UNPACK_CHECKBOX_CLASS);
if (unpackEl) {
element.parentElement.insertBefore(list, unpackEl);
} else {
@ -148,7 +151,7 @@
function createFileLabel() {
var label = document.createElement('label');
label.classList.add(FILE_UPLOAD_LABEL_CLASS);
label.classList.add(FILE_INPUT_LABEL_CLASS);
label.setAttribute('for', element.id);
element.parentElement.insertBefore(label, element);
return label;
@ -157,22 +160,21 @@
function updateLabel() {
var files = element.files;
if (files && files.length) {
label.innerText = isMultiFileUpload ? files.length + ' ' + I18n.get('filesSelected') : files[0].name;
label.innerText = isMultiFileInput ? files.length + ' ' + I18n.get('filesSelected') : files[0].name;
} else {
label.innerText = isMultiFileUpload ? I18n.get('selectFiles') : I18n.get('selectFile');
label.innerText = isMultiFileInput ? I18n.get('selectFiles') : I18n.get('selectFile');
}
}
return init();
}
if (UtilRegistry) {
UtilRegistry.register({
name: FILE_UPLOAD_UTIL_NAME,
selector: FILE_UPLOAD_UTIL_SELECTOR,
setup: fileUploadUtil,
});
}
inputUtilities.push({
name: FILE_INPUT_UTIL_NAME,
selector: FILE_INPUT_UTIL_SELECTOR,
setup: fileInputUtil,
})
// turns native checkboxes into custom ones
window.utils.checkbox = function(input) {
@ -247,4 +249,9 @@
},
};
}
// register input utilities
if (UtilRegistry) {
inputUtilities.forEach(UtilRegistry.register);
}
})();

2
templates/multiFileField.hamlet
View File

@ -14,7 +14,7 @@ $newline never
<div .file-uploads-label>_{MsgAddMoreFiles}
$# new files
<input type="file" uw-file-upload name=#{fieldName} id=#{fieldId} multiple :req:required="required">
<input type="file" uw-file-input name=#{fieldName} id=#{fieldId} multiple :req:required="required">
<div .file-input__info>
_{MsgMultiFileUploadInfo}