From 8472a517877948a551dbfaa23b78a185a377452d Mon Sep 17 00:00:00 2001 From: Felix Hamann Date: Sat, 6 Apr 2019 18:39:28 +0200 Subject: [PATCH] rename fileUpload utility to fileInput utility --- static/js/utils/inputs.js | 77 ++++++++++++++++++--------------- templates/multiFileField.hamlet | 2 +- 2 files changed, 43 insertions(+), 36 deletions(-) diff --git a/static/js/utils/inputs.js b/static/js/utils/inputs.js index 5e9d73fff..294fbae05 100644 --- a/static/js/utils/inputs.js +++ b/static/js/utils/inputs.js @@ -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: - * + * * * 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); + } })(); diff --git a/templates/multiFileField.hamlet b/templates/multiFileField.hamlet index 7e91e00b2..17c46197a 100644 --- a/templates/multiFileField.hamlet +++ b/templates/multiFileField.hamlet @@ -14,7 +14,7 @@ $newline never
_{MsgAddMoreFiles} $# new files - +
_{MsgMultiFileUploadInfo}