2015-12-06 00:07:37 +03:00
import BaseInput from './baseInput'
import Checkbox from './checkbox'
import Radio from './radio'
import Switch from './switch'
2015-12-06 02:45:38 +03:00
import Text from './text'
import Textarea from './textare'
import Select from './select'
2015-12-02 03:28:36 +03:00
import Util from './util'
2015-12-06 02:45:38 +03:00
const File = ( ( $ ) => {
2015-12-02 03:28:36 +03:00
/ * *
* -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
* Constants
* -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
* /
2015-12-06 02:45:38 +03:00
const NAME = 'file'
2015-12-02 03:28:36 +03:00
const DATA _KEY = ` mdb. ${ NAME } `
const JQUERY _NO _CONFLICT = $ . fn [ NAME ]
2015-12-06 06:24:05 +03:00
const Default = { }
2015-12-06 03:55:29 +03:00
2015-12-02 03:28:36 +03:00
const ClassName = {
2015-12-06 03:55:29 +03:00
FILE : NAME ,
2015-12-06 02:45:38 +03:00
IS _FILE : 'is-file'
2015-12-02 03:28:36 +03:00
}
2015-12-06 00:07:37 +03:00
const Selector = {
FILENAMES : 'input.form-control[readonly]'
}
2015-12-02 03:28:36 +03:00
/ * *
* -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
* Class Definition
* -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
* /
2015-12-06 02:45:38 +03:00
class File extends BaseInput {
2015-12-02 03:28:36 +03:00
2015-12-05 00:00:57 +03:00
constructor ( element , config ) {
2015-12-06 03:55:29 +03:00
super ( element , $ . extend ( { invalidComponentMatches : [ Checkbox , Radio , Text , Textarea , Select , Switch ] } , Default , config ) )
2015-12-02 03:28:36 +03:00
2015-12-06 03:55:29 +03:00
this . $mdbFormGroup . addClass ( ClassName . IS _FILE )
2015-12-02 03:28:36 +03:00
}
dispose ( ) {
2015-12-06 00:07:37 +03:00
super . dispose ( DATA _KEY )
2015-12-02 03:28:36 +03:00
}
2015-12-05 23:00:40 +03:00
static matches ( $element ) {
if ( $element . attr ( 'type' ) === 'file' ) {
return true
}
return false
}
static rejectMatch ( component , $element ) {
2015-12-06 06:24:05 +03:00
Util . assert ( this . $element , this . matches ( $element ) , ` ${ component } component element ${ Util . describe ( $element ) } is invalid for type='file'. ` )
2015-12-05 23:00:40 +03:00
}
2015-12-02 03:28:36 +03:00
// ------------------------------------------------------------------------
2015-12-06 00:07:37 +03:00
// protected
2015-12-06 03:55:29 +03:00
// Demarcation element (e.g. first child of a form-group)
outerElement ( ) {
// label.file > input[type=file]
2015-12-06 06:24:05 +03:00
return this . $element . parent ( ) . closest ( ` . ${ ClassName . FILE } ` )
2015-12-06 03:55:29 +03:00
}
2015-12-06 00:07:37 +03:00
rejectWithoutRequiredStructure ( ) {
2015-12-06 03:55:29 +03:00
// label.file > input[type=file]
2015-12-06 06:24:05 +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 } . ` )
2015-12-06 00:07:37 +03:00
}
addFocusListener ( ) {
2015-12-06 03:55:29 +03:00
this . $mdbFormGroup
2015-12-03 20:35:51 +03:00
. on ( 'focus' , ( ) => {
2015-12-06 00:07:37 +03:00
this . addFormGroupFocus ( )
2015-12-02 03:28:36 +03:00
} )
. on ( 'blur' , ( ) => {
2015-12-06 00:07:37 +03:00
this . removeFormGroupFocus ( )
2015-12-02 03:28:36 +03:00
} )
2015-12-06 00:07:37 +03:00
}
2015-12-02 03:28:36 +03:00
2015-12-06 00:07:37 +03:00
addChangeListener ( ) {
2015-12-02 03:28:36 +03:00
// set the fileinput readonly field with the name of the file
2015-12-04 04:09:01 +03:00
this . $element . on ( 'change' , ( ) => {
2015-12-02 03:28:36 +03:00
let value = ''
2015-12-04 04:09:01 +03:00
$ . each ( this . $element . files , ( i , file ) => {
2015-12-02 03:28:36 +03:00
value += ` ${ file . name } , `
} )
value = value . substring ( 0 , value . length - 2 )
if ( value ) {
2015-12-05 23:00:40 +03:00
this . removeIsEmpty ( )
2015-12-02 03:28:36 +03:00
} else {
2015-12-05 23:00:40 +03:00
this . addIsEmpty ( )
2015-12-02 03:28:36 +03:00
}
2015-12-06 03:55:29 +03:00
this . $mdbFormGroup . find ( Selector . FILENAMES ) . val ( value )
2015-12-02 03:28:36 +03:00
} )
}
2015-12-06 00:07:37 +03:00
// ------------------------------------------------------------------------
// private
2015-12-02 03:28:36 +03:00
// ------------------------------------------------------------------------
// static
static _jQueryInterface ( config ) {
return this . each ( function ( ) {
let $element = $ ( this )
let data = $element . data ( DATA _KEY )
if ( ! data ) {
2015-12-06 02:45:38 +03:00
data = new File ( this , config )
2015-12-02 03:28:36 +03:00
$element . data ( DATA _KEY , data )
}
} )
}
}
/ * *
* -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
* jQuery
* -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
* /
2015-12-06 02:45:38 +03:00
$ . fn [ NAME ] = File . _jQueryInterface
$ . fn [ NAME ] . Constructor = File
2015-12-02 03:28:36 +03:00
$ . fn [ NAME ] . noConflict = ( ) => {
$ . fn [ NAME ] = JQUERY _NO _CONFLICT
2015-12-06 02:45:38 +03:00
return File . _jQueryInterface
2015-12-02 03:28:36 +03:00
}
2015-12-06 02:45:38 +03:00
return File
2015-12-02 03:28:36 +03:00
} ) ( jQuery )
2015-12-06 02:45:38 +03:00
export default File