@ -3,7 +3,7 @@
* @ class BI . Editor * @ class BI . Editor
* @ extends BI . Single * @ extends BI . Single
* / * /
import { shortcut , Controller , extend , createWidget , isKey , isEmptyString , isFunction , isNull , trim , } from "../../../core" ; import { shortcut , Controller , extend , createWidget , isKey , isEmptyString , isFunction , isNull , trim } from "../../../core" ;
import { Single } from "../0.single" ; import { Single } from "../0.single" ;
import { Input } from "../input/input" ; import { Input } from "../input/input" ;
import { Bubbles } from "../../0.base" ; import { Bubbles } from "../../0.base" ;
@ -17,6 +17,7 @@ export class Editor extends Single {
static EVENT _BLUR = "EVENT_BLUR" ; static EVENT _BLUR = "EVENT_BLUR" ;
static EVENT _CLICK = "EVENT_CLICK" ; static EVENT _CLICK = "EVENT_CLICK" ;
static EVENT _KEY _DOWN = "EVENT_KEY_DOWN" ; static EVENT _KEY _DOWN = "EVENT_KEY_DOWN" ;
static EVENT _QUICK _DOWN = "EVENT_QUICK_DOWN" ;
static EVENT _SPACE = "EVENT_SPACE" ; static EVENT _SPACE = "EVENT_SPACE" ;
static EVENT _BACKSPACE = "EVENT_BACKSPACE" ; static EVENT _BACKSPACE = "EVENT_BACKSPACE" ;
@ -58,10 +59,10 @@ export class Editor extends Single {
render ( ) { render ( ) {
const { value , watermark , validationChecker , quitChecker , allowBlank , inputType , hgap , vgap , lgap , rgap , tgap , bgap } = this . options ; const { value , watermark , validationChecker , quitChecker , allowBlank , inputType , hgap , vgap , lgap , rgap , tgap , bgap } = this . options ;
// 密码输入框设置autocomplete="new-password"的情况下Firefox和chrome不会自动填充密码
// 密码输入框设置autocomplete="new-password"的情况下Firefox和chrome不会自动填充密码
const autocomplete = this . options . autocomplete ? " autocomplete=" + this . options . autocomplete : "" ; const autocomplete = this . options . autocomplete ? ` autocomplete= ${ this . options . autocomplete } ` : "" ;
this . editor = this . addWidget ( createWidget ( { this . editor = this . addWidget ( createWidget ( {
type : "bi.input" , type : "bi.input" ,
element : "<input type='" + inputType + "'" + autocomplete + " />" , element : ` <input type=' ${ inputType } ' ${ autocomplete } /> ` ,
root : true , root : true ,
value , value ,
watermark , watermark ,
@ -82,7 +83,7 @@ export class Editor extends Single {
{ {
el : { el : {
type : "bi.absolute" , type : "bi.absolute" ,
ref : ( _ref ) => { ref : _ref => {
this . contentWrapper = _ref ; this . contentWrapper = _ref ;
} , } ,
items : [ items : [
@ -124,30 +125,32 @@ export class Editor extends Single {
this . fireEvent ( Editor . EVENT _BLUR , ... args ) ; this . fireEvent ( Editor . EVENT _BLUR , ... args ) ;
} ) ; } ) ;
this . editor . on ( Input . EVENT _CLICK , ( ... args ) => { this . editor . on ( Input . EVENT _CLICK , ( ... args ) => {
this . fireEvent ( Editor . EVENT _CLICK , ... args ) ;
this . fireEvent ( Editor . EVENT _CLICK , ... args ) ;
} ) ; } ) ;
this . editor . on ( Input . EVENT _CHANGE , ( ... args ) => { this . editor . on ( Input . EVENT _CHANGE , ( ... args ) => {
this . fireEvent ( Editor . EVENT _CHANGE , ... args ) ;
this . fireEvent ( Editor . EVENT _CHANGE , ... args ) ;
} ) ; } ) ;
this . editor . on ( Input . EVENT _KEY _DOWN , ( v , ... args ) => { this . editor . on ( Input . EVENT _KEY _DOWN , ( v , ... args ) => {
this . fireEvent ( Editor . EVENT _KEY _DOWN , v , ... args ) ;
this . fireEvent ( Editor . EVENT _KEY _DOWN , v , ... args ) ;
} ) ; } ) ;
this . editor . on ( Input . EVENT _QUICK _DOWN , ( e ) => { this . editor . on ( Input . EVENT _QUICK _DOWN , ( ... args ) => {
const [ e ] = args ;
// tab键就不要隐藏了
// tab键就不要隐藏了
if ( e . keyCode !== BI . KeyCode . TAB && this . watermark ) { if ( e . keyCode !== BI . KeyCode . TAB && this . watermark ) {
this . watermark . invisible ( ) ; this . watermark . invisible ( ) ;
} }
this . fireEvent ( Editor . EVENT _QUICK _DOWN , ... args ) ;
} ) ; } ) ;
this . editor . on ( Input . EVENT _VALID , ( ... args ) => { this . editor . on ( Input . EVENT _VALID , ( ... args ) => {
this . _checkWaterMark ( ) ; this . _checkWaterMark ( ) ;
this . _setErrorVisible ( false ) ; this . _setErrorVisible ( false ) ;
this . element . removeClass ( "error" ) ; this . element . removeClass ( "error" ) ;
this . fireEvent ( Editor . EVENT _VALID , ... args ) ;
this . fireEvent ( Editor . EVENT _VALID , ... args ) ;
} ) ; } ) ;
this . editor . on ( Input . EVENT _ERROR , ( ... args ) => { this . editor . on ( Input . EVENT _ERROR , ( ... args ) => {
this . _checkWaterMark ( ) ; this . _checkWaterMark ( ) ;
this . fireEvent ( Editor . EVENT _ERROR , ... args ) ;
this . fireEvent ( Editor . EVENT _ERROR , ... args ) ;
this . _setErrorVisible ( this . isEditing ( ) ) ; this . _setErrorVisible ( this . isEditing ( ) ) ;
this . element . addClass ( "error" ) ; this . element . addClass ( "error" ) ;
} ) ; } ) ;
@ -157,40 +160,40 @@ export class Editor extends Single {
tip && tip . element . fadeOut ( 100 , ( ) => { tip && tip . element . fadeOut ( 100 , ( ) => {
tip . element . fadeIn ( 100 ) ; tip . element . fadeIn ( 100 ) ;
} ) ; } ) ;
this . fireEvent ( Editor . EVENT _RESTRICT , ... args ) ;
this . fireEvent ( Editor . EVENT _RESTRICT , ... args ) ;
} ) ; } ) ;
this . editor . on ( Input . EVENT _EMPTY , ( ... args ) => { this . editor . on ( Input . EVENT _EMPTY , ( ... args ) => {
this . _checkWaterMark ( ) ; this . _checkWaterMark ( ) ;
this . fireEvent ( Editor . EVENT _EMPTY , ... args ) ;
this . fireEvent ( Editor . EVENT _EMPTY , ... args ) ;
} ) ; } ) ;
this . editor . on ( Input . EVENT _ENTER , ( ... args ) => { this . editor . on ( Input . EVENT _ENTER , ( ... args ) => {
this . fireEvent ( Editor . EVENT _ENTER , ... args ) ;
this . fireEvent ( Editor . EVENT _ENTER , ... args ) ;
} ) ; } ) ;
this . editor . on ( Input . EVENT _SPACE , ( ... args ) => { this . editor . on ( Input . EVENT _SPACE , ( ... args ) => {
this . fireEvent ( Editor . EVENT _SPACE , ... args ) ;
this . fireEvent ( Editor . EVENT _SPACE , ... args ) ;
} ) ; } ) ;
this . editor . on ( Input . EVENT _BACKSPACE , ( ... args ) => { this . editor . on ( Input . EVENT _BACKSPACE , ( ... args ) => {
this . fireEvent ( Editor . EVENT _BACKSPACE , ... args ) ;
this . fireEvent ( Editor . EVENT _BACKSPACE , ... args ) ;
} ) ; } ) ;
this . editor . on ( Input . EVENT _REMOVE , ( ... args ) => { this . editor . on ( Input . EVENT _REMOVE , ( ... args ) => {
this . fireEvent ( Editor . EVENT _REMOVE , ... args ) ;
this . fireEvent ( Editor . EVENT _REMOVE , ... args ) ;
} ) ; } ) ;
this . editor . on ( Input . EVENT _START , ( ... args ) => { this . editor . on ( Input . EVENT _START , ( ... args ) => {
this . fireEvent ( Editor . EVENT _START , ... args ) ;
this . fireEvent ( Editor . EVENT _START , ... args ) ;
} ) ; } ) ;
this . editor . on ( Input . EVENT _PAUSE , ( ... args ) => { this . editor . on ( Input . EVENT _PAUSE , ( ... args ) => {
this . fireEvent ( Editor . EVENT _PAUSE , ... args ) ;
this . fireEvent ( Editor . EVENT _PAUSE , ... args ) ;
} ) ; } ) ;
this . editor . on ( Input . EVENT _STOP , ( ... args ) => { this . editor . on ( Input . EVENT _STOP , ( ... args ) => {
this . fireEvent ( Editor . EVENT _STOP , ... args ) ;
this . fireEvent ( Editor . EVENT _STOP , ... args ) ;
} ) ; } ) ;
this . editor . on ( Input . EVENT _CONFIRM , ( ... args ) => { this . editor . on ( Input . EVENT _CONFIRM , ( ... args ) => {
this . fireEvent ( Editor . EVENT _CONFIRM , ... args ) ;
this . fireEvent ( Editor . EVENT _CONFIRM , ... args ) ;
} ) ; } ) ;
this . editor . on ( Input . EVENT _CHANGE _CONFIRM , ( ... args ) => { this . editor . on ( Input . EVENT _CHANGE _CONFIRM , ( ... args ) => {
this . fireEvent ( Editor . EVENT _CHANGE _CONFIRM , ... args ) ;
this . fireEvent ( Editor . EVENT _CHANGE _CONFIRM , ... args ) ;
} ) ; } ) ;
this . element . click ( ( e ) => { this . element . click ( e => {
e . stopPropagation ( ) ; e . stopPropagation ( ) ;
return false ; return false ;
@ -230,7 +233,7 @@ export class Editor extends Single {
textAlign : "left" , textAlign : "left" ,
} ) ; } ) ;
this . watermark . element . bind ( { this . watermark . element . bind ( {
mousedown : ( e ) => { mousedown : e => {
if ( this . isEnabled ( ) ) { if ( this . isEnabled ( ) ) {
this . editor . isEditing ( ) || this . editor . focus ( ) ; this . editor . isEditing ( ) || this . editor . focus ( ) ;
} else { } else {
@ -239,7 +242,7 @@ export class Editor extends Single {
e . stopEvent ( ) ; e . stopEvent ( ) ;
} , } ,
} ) ; } ) ;
this . watermark . element . bind ( "click" , ( e ) => { this . watermark . element . bind ( "click" , e => {
if ( this . isEnabled ( ) ) { if ( this . isEnabled ( ) ) {
this . editor . isEditing ( ) || this . editor . focus ( ) ; this . editor . isEditing ( ) || this . editor . focus ( ) ;
} else { } else {
Zhenfei.Li-李振飞
2 years ago
