@@ -14,6 +14,7 @@ const NAME = 'input';
1414const DATA_KEY = 'mdb.input' ;
1515const CLASSNAME_WRAPPER = 'form-outline' ;
1616const OUTLINE_INPUT = `.${ CLASSNAME_WRAPPER } ;
17+ const OUTLINE_TEXTAREA = `.${ CLASSNAME_WRAPPER } ;
1718
1819/**
1920 * ------------------------------------------------------------------------
@@ -24,8 +25,12 @@ const OUTLINE_INPUT = `.${CLASSNAME_WRAPPER} input`;
2425class Input {
2526 constructor ( element ) {
2627 this . _element = element ;
28+ this . _label = null ;
2729 this . _labelWidth = 0 ;
30+ this . _labelMarginLeft = 0 ;
31+ this . _notchLeading = null ;
2832 this . _notchMiddle = null ;
33+ this . _notchTrailing = null ;
2934
3035 if ( this . _element ) {
3136 Data . setData ( element , DATA_KEY , this ) ;
@@ -39,9 +44,9 @@ class Input {
3944
4045 // Public
4146 init ( ) {
42- this . _calculateLabelWidth ( ) ;
47+ this . _getLabelData ( ) ;
4348 this . _applyDivs ( ) ;
44- this . _applyNotchWidth ( ) ;
49+ this . _applyNotch ( ) ;
4550 this . _applyActiveClass ( ) ;
4651 }
4752
@@ -51,40 +56,67 @@ class Input {
5156 }
5257
5358 // Private
54- _calculateLabelWidth ( ) {
55- const label = SelectorEngine . findOne ( 'label.form-label' , this . _element ) ;
56- this . _labelWidth = label . clientWidth * 0.8 + 8 ;
59+ _getLabelData ( ) {
60+ this . _label = SelectorEngine . findOne ( 'label' , this . _element ) ;
61+ if ( this . _label === null ) return ;
62+ this . _getLabelWidth ( ) ;
63+
64+ if ( ! this . _element . classList . contains ( 'input-group' ) ) return ;
65+ this . _getLabelPositionInInputGroup ( ) ;
66+ }
67+
68+ _getLabelWidth ( ) {
69+ this . _labelWidth = this . _label . clientWidth * 0.8 + 8 ;
70+ }
71+
72+ _getLabelPositionInInputGroup ( ) {
73+ const input =
74+ SelectorEngine . findOne ( 'input' , this . _element ) ||
75+ SelectorEngine . findOne ( 'textarea' , this . _element ) ;
76+ const prefix = SelectorEngine . prev ( input , '.input-group-text' ) [ 0 ] ;
77+ if ( prefix === undefined ) return ;
78+ this . _labelMarginLeft = prefix . offsetWidth - 1 ;
5779 }
5880
5981 _applyDivs ( ) {
6082 const notchWrapper = element ( 'div' ) ;
6183 Manipulator . addClass ( notchWrapper , 'form-notch' ) ;
62- const notchLeading = element ( 'div' ) ;
63- Manipulator . addClass ( notchLeading , 'form-notch-leading' ) ;
84+ this . _notchLeading = element ( 'div' ) ;
85+ Manipulator . addClass ( this . _notchLeading , 'form-notch-leading' ) ;
6486 this . _notchMiddle = element ( 'div' ) ;
6587 Manipulator . addClass ( this . _notchMiddle , 'form-notch-middle' ) ;
66- const notchTrailing = element ( 'div' ) ;
67- Manipulator . addClass ( notchTrailing , 'form-notch-trailing' ) ;
88+ this . _notchTrailing = element ( 'div' ) ;
89+ Manipulator . addClass ( this . _notchTrailing , 'form-notch-trailing' ) ;
6890
69- notchWrapper . append ( notchLeading ) ;
91+ notchWrapper . append ( this . _notchLeading ) ;
7092 notchWrapper . append ( this . _notchMiddle ) ;
71- notchWrapper . append ( notchTrailing ) ;
93+ notchWrapper . append ( this . _notchTrailing ) ;
7294 this . _element . append ( notchWrapper ) ;
7395 }
7496
75- _applyNotchWidth ( ) {
97+ _applyNotch ( ) {
7698 this . _notchMiddle . style . width = `${ this . _labelWidth } ;
99+ this . _notchLeading . style . width = `${ this . _labelMarginLeft + 9 } ;
100+
101+ if ( this . _label === null ) return ;
102+ this . _label . style . marginLeft = `${ this . _labelMarginLeft } ;
77103 }
78104
79105 _applyActiveClass ( event ) {
80- const input = event ? event . target : SelectorEngine . findOne ( 'input' , this . _element ) ;
106+ const input = event
107+ ? event . target
108+ : SelectorEngine . findOne ( 'input' , this . _element ) ||
109+ SelectorEngine . findOne ( 'textarea' , this . _element ) ;
81110 if ( input . value !== '' ) {
82111 Manipulator . addClass ( input , 'active' ) ;
83112 }
84113 }
85114
86115 _removeActiveClass ( event ) {
87- const input = event ? event . target : SelectorEngine . findOne ( 'input' , this . _element ) ;
116+ const input = event
117+ ? event . target
118+ : SelectorEngine . findOne ( 'input' , this . _element ) ||
119+ SelectorEngine . findOne ( 'textarea' , this . _element ) ;
88120 if ( input . value === '' ) {
89121 input . classList . remove ( 'active' ) ;
90122 }
@@ -101,15 +133,23 @@ class Input {
101133 instance . _removeActiveClass ( event ) ;
102134 } ;
103135 }
136+
137+ static getInstance ( element ) {
138+ return Data . getData ( element , DATA_KEY ) ;
139+ }
104140}
105141
106142EventHandler . on ( document , 'focus' , OUTLINE_INPUT , Input . applyActiveClass ( new Input ( ) ) ) ;
107143EventHandler . on ( document , 'input' , OUTLINE_INPUT , Input . applyActiveClass ( new Input ( ) ) ) ;
108144EventHandler . on ( document , 'blur' , OUTLINE_INPUT , Input . removeActiveClass ( new Input ( ) ) ) ;
109145
146+ EventHandler . on ( document , 'focus' , OUTLINE_TEXTAREA , Input . applyActiveClass ( new Input ( ) ) ) ;
147+ EventHandler . on ( document , 'input' , OUTLINE_TEXTAREA , Input . applyActiveClass ( new Input ( ) ) ) ;
148+ EventHandler . on ( document , 'blur' , OUTLINE_TEXTAREA , Input . removeActiveClass ( new Input ( ) ) ) ;
149+
110150// auto-init
111- SelectorEngine . find ( `.${ CLASSNAME_WRAPPER } ) . forEach ( ( input ) => {
112- new Input ( input ) . init ( ) ;
151+ SelectorEngine . find ( `.${ CLASSNAME_WRAPPER } ) . forEach ( ( element ) => {
152+ new Input ( element ) . init ( ) ;
113153} ) ;
114154
115155export default Input ;
0 commit comments