diff options
Diffstat (limited to 'templates/assets/bootstrap-material-design/js/file.js')
| -rw-r--r-- | templates/assets/bootstrap-material-design/js/file.js | 139 |
1 files changed, 139 insertions, 0 deletions
diff --git a/templates/assets/bootstrap-material-design/js/file.js b/templates/assets/bootstrap-material-design/js/file.js new file mode 100644 index 0000000..ba75a93 --- /dev/null +++ b/templates/assets/bootstrap-material-design/js/file.js @@ -0,0 +1,139 @@ +import BaseInput from './baseInput' +//import Checkbox from './checkbox' +//import Radio from './radio' +//import Switch from './switch' +//import Text from './text' +//import Textarea from './textarea' +//import Select from './select' +import Util from './util' + +const File = (($) => { + + /** + * ------------------------------------------------------------------------ + * Constants + * ------------------------------------------------------------------------ + */ + const NAME = 'file' + const DATA_KEY = `bmd.${NAME}` + const JQUERY_NAME = `bmd${NAME.charAt(0).toUpperCase() + NAME.slice(1)}` + const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME] + + const Default = {} + + const ClassName = { + FILE: NAME, + IS_FILE: 'is-file' + } + + const Selector = { + FILENAMES: 'input.form-control[readonly]' + } + + /** + * ------------------------------------------------------------------------ + * Class Definition + * ------------------------------------------------------------------------ + */ + class File extends BaseInput { + + constructor($element, config) { + super($element, $.extend(true, + //{invalidComponentMatches: [Checkbox, Radio, Text, Textarea, Select, Switch]}, + Default, config)) + + this.$bmdFormGroup.addClass(ClassName.IS_FILE) + } + + dispose() { + super.dispose(DATA_KEY) + } + + static matches($element) { + if ($element.attr('type') === 'file') { + return true + } + return false + } + + static rejectMatch(component, $element) { + Util.assert(this.$element, this.matches($element), `${component} component element ${Util.describe($element)} is invalid for type='file'.`) + } + + // ------------------------------------------------------------------------ + // protected + + // Demarcation element (e.g. first child of a form-group) + outerElement() { + // label.file > input[type=file] + return this.$element.parent().closest(`.${ClassName.FILE}`) + } + + rejectWithoutRequiredStructure() { + // label.file > input[type=file] + Util.assert(this.$element, !this.outerElement().prop('tagName') === 'label', `${this.constructor.name}'s ${Util.describe(this.$element)} parent element ${Util.describe(this.outerElement())} should be <label>.`) + Util.assert(this.$element, !this.outerElement().hasClass(ClassName.FILE), `${this.constructor.name}'s ${Util.describe(this.$element)} parent element ${Util.describe(this.outerElement())} should have class .${ClassName.FILE}.`) + } + + addFocusListener() { + this.$bmdFormGroup + .on('focus', () => { + this.addFormGroupFocus() + }) + .on('blur', () => { + this.removeFormGroupFocus() + }) + } + + addChangeListener() { + // set the fileinput readonly field with the name of the file + this.$element.on('change', () => { + let value = '' + $.each(this.$element.files, (i, file) => { + value += `${file.name} , ` + }) + value = value.substring(0, value.length - 2) + if (value) { + this.addIsFilled() + } else { + this.removeIsFilled() + } + this.$bmdFormGroup.find(Selector.FILENAMES).val(value) + }) + } + + // ------------------------------------------------------------------------ + // private + + // ------------------------------------------------------------------------ + // static + static _jQueryInterface(config) { + return this.each(function () { + let $element = $(this) + let data = $element.data(DATA_KEY) + + if (!data) { + data = new File($element, config) + $element.data(DATA_KEY, data) + } + }) + } + } + + /** + * ------------------------------------------------------------------------ + * jQuery + * ------------------------------------------------------------------------ + */ + $.fn[JQUERY_NAME] = File._jQueryInterface + $.fn[JQUERY_NAME].Constructor = File + $.fn[JQUERY_NAME].noConflict = () => { + $.fn[JQUERY_NAME] = JQUERY_NO_CONFLICT + return File._jQueryInterface + } + + return File + +})(jQuery) + +export default File |
