mdb-ui-kit/js/file.js

165 lines
4.3 KiB
JavaScript
Raw Normal View History

2017-08-11 17:59:31 +03:00
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'
2017-08-11 17:59:31 +03:00
import Util from "./util";
2017-08-11 17:59:31 +03:00
const File = ($ => {
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
2017-08-11 17:59:31 +03:00
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];
2017-08-11 17:59:31 +03:00
const Default = {};
const ClassName = {
FILE: NAME,
2017-08-11 17:59:31 +03:00
IS_FILE: "is-file"
};
const Selector = {
2017-08-11 17:59:31 +03:00
FILENAMES: "input.form-control[readonly]"
};
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
class File extends BaseInput {
constructor($element, config) {
2017-08-11 17:59:31 +03:00
super(
$element,
$.extend(
true,
//{invalidComponentMatches: [Checkbox, Radio, Text, Textarea, Select, Switch]},
Default,
config
)
);
this.$bmdFormGroup.addClass(ClassName.IS_FILE);
}
dispose() {
2017-08-11 17:59:31 +03:00
super.dispose(DATA_KEY);
}
static matches($element) {
2017-08-11 17:59:31 +03:00
if ($element.attr("type") === "file") {
return true;
}
2017-08-11 17:59:31 +03:00
return false;
}
static rejectMatch(component, $element) {
2017-08-11 17:59:31 +03:00
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]
2017-08-11 17:59:31 +03:00
return this.$element.parent().closest(`.${ClassName.FILE}`);
}
rejectWithoutRequiredStructure() {
// label.file > input[type=file]
2017-08-11 17:59:31 +03:00
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
2017-08-11 17:59:31 +03:00
.on("focus", () => {
this.addFormGroupFocus();
})
2017-08-11 17:59:31 +03:00
.on("blur", () => {
this.removeFormGroupFocus();
});
}
addChangeListener() {
// set the fileinput readonly field with the name of the file
2017-08-11 17:59:31 +03:00
this.$element.on("change", () => {
let value = "";
$.each(this.$element.files, (i, file) => {
2017-08-11 17:59:31 +03:00
value += `${file.name} , `;
});
value = value.substring(0, value.length - 2);
if (value) {
2017-08-11 17:59:31 +03:00
this.addIsFilled();
} else {
2017-08-11 17:59:31 +03:00
this.removeIsFilled();
}
2017-08-11 17:59:31 +03:00
this.$bmdFormGroup.find(Selector.FILENAMES).val(value);
});
}
// ------------------------------------------------------------------------
// private
// ------------------------------------------------------------------------
// static
static _jQueryInterface(config) {
2017-08-11 17:59:31 +03:00
return this.each(function() {
let $element = $(this);
let data = $element.data(DATA_KEY);
if (!data) {
2017-08-11 17:59:31 +03:00
data = new File($element, config);
$element.data(DATA_KEY, data);
}
2017-08-11 17:59:31 +03:00
});
}
}
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
*/
2017-08-11 17:59:31 +03:00
$.fn[JQUERY_NAME] = File._jQueryInterface;
$.fn[JQUERY_NAME].Constructor = File;
$.fn[JQUERY_NAME].noConflict = () => {
2017-08-11 17:59:31 +03:00
$.fn[JQUERY_NAME] = JQUERY_NO_CONFLICT;
return File._jQueryInterface;
};
2017-08-11 17:59:31 +03:00
return File;
})(jQuery);
2017-08-11 17:59:31 +03:00
export default File;