@@ -357,7 +357,7 @@ window.ComponentDot = class {
357357 } ;
358358
359359 this . _search = function ( search ) {
360- if ( this . _modSettings . mode ) {
360+ if ( this . _modSettings . mode === 'menu' ) {
361361 if ( search . value === '' ) {
362362 for ( let node of this . CONTENT_DOM . childNodes ) {
363363 node . style . display = 'flex' ;
@@ -424,17 +424,16 @@ window.ComponentDot = class {
424424 } ;
425425
426426 this . _bind = function ( ) {
427- setTimeout ( ( ) => {
428- this . CONTENT_DOM . childNodes . forEach ( ( D ) => {
429- let id = D . getAttribute ( 'data-id' ) ;
430- if ( this . selected_data . indexOf ( id ) !== - 1 ) {
431- this . _triggerEvent . enable = false ;
432- D . click ( ) ;
433- this . _triggerEvent . enable = true ;
434- }
435- } ) ;
436- if ( this . _modSettings . mode === true ) this . DOM . querySelector ( '.menu-list' ) . style . display = 'none' ;
427+ this . CONTENT_DOM . childNodes . forEach ( ( D ) => {
428+ let id = D . getAttribute ( 'data-id' ) ;
429+ if ( this . selected_data . indexOf ( id ) !== - 1 ) {
430+ this . _triggerEvent . enable = false ;
431+ D . click ( ) ;
432+ this . _triggerEvent . enable = true ;
433+ }
437434 } ) ;
435+ if ( this . _modSettings . mode === 'menu' ) this . DOM . querySelector ( '.menu-list' ) . style . display = 'none' ;
436+
438437 if ( this . _useSearchMod === false ) return ;
439438 let search = this . DOM . querySelector ( `.dot-search` ) ;
440439 search . addEventListener ( 'input' , ( ) => {
@@ -524,6 +523,43 @@ window.ComponentDot = class {
524523 this . CONTENT_DOM = this . DOM . querySelector ( `.list` ) ;
525524 } ;
526525
526+ this . _switchMaker = function ( ) {
527+ let select = this . select ;
528+ let menu = document . createElement ( 'div' ) ;
529+ menu . className = 'dlp-dot-switch' ;
530+ this . id_line_hash = [ ] ;
531+ let line = 0 ;
532+ for ( let id in select ) {
533+ if ( ! select . hasOwnProperty ( id ) ) continue ;
534+ this . id_line_hash [ id ] = line ;
535+ line ++ ;
536+ let option = document . createElement ( 'button' ) ;
537+ option . setAttribute ( 'data-id' , id ) ;
538+ option . className = `dlp-button${ this . _modSettings . color } ;
539+ option . textContent = select [ id ] ;
540+ option . addEventListener ( 'click' , ( ) => {
541+ if ( this . select_data . indexOf ( id ) !== - 1 ) {
542+ /*cancel*/
543+ this . _tagCal ( id , this . MODE . delete ) ;
544+ option . classList . remove ( `dlp-button${ this . _modSettings . color } ) ;
545+ option . classList . add ( `dlp-button${ this . _modSettings . color } ) ;
546+ return ;
547+ }
548+ if ( this . limit > 0 && this . select_data . length >= this . limit ) {
549+ this . _triggerEvent . enable = false ;
550+ menu . childNodes [ this . id_line_hash [ this . select_data [ 0 ] . toString ( ) ] ] . click ( ) ;
551+ this . _triggerEvent . enable = true ;
552+ }
553+ option . classList . remove ( `dlp-button${ this . _modSettings . color } ) ;
554+ option . classList . add ( `dlp-button${ this . _modSettings . color } ) ;
555+ this . _tagCal ( id , this . MODE . insert ) ;
556+ } , false ) ;
557+ menu . append ( option ) ;
558+ }
559+ this . DOM . append ( menu ) ;
560+ this . CONTENT_DOM = menu ;
561+ } ;
562+
527563 return this ;
528564 }
529565
@@ -548,16 +584,37 @@ window.ComponentDot = class {
548584 return this ;
549585 }
550586
551- mod ( settings = { mode : false , placeholder : '未选择' , height : '150px' , direction : 'down' } ) {
587+ menuMod ( settings = { placeholder : '未选择' , height : '150px' , direction : 'down' } ) {
552588 this . _modSettings = Object . assign ( {
553- mode : false ,
554589 placeholder : '未选择' ,
555590 height : '150px' ,
556591 direction : 'down'
557592 } , settings ) ;
593+ this . _modSettings . mode = 'menu' ;
594+ return this ;
595+ }
596+
597+ switchMod ( settings = { cols :0 , color :'' } ) {
598+ this . _modSettings = Object . assign ( {
599+ cols : 0 ,
600+ color :'' ,
601+ } , settings ) ;
602+ this . _modSettings . mode = 'switch' ;
603+ switch ( this . _modSettings . color ) {
604+ case "red" :
605+ case "blue" :
606+ case "green" :
607+ case "yellow" :
608+ this . _modSettings . color = '-' + this . _modSettings . color ;
609+ break ;
610+ default :
611+ this . _modSettings . color = '' ;
612+ break ;
613+ }
558614 return this ;
559615 }
560616
617+
561618 useSearch ( ) {
562619 this . _useSearchMod = true ;
563620 return this ;
@@ -578,8 +635,11 @@ window.ComponentDot = class {
578635 }
579636
580637 make ( ) {
581- if ( this . _modSettings . mode === true ) {
638+ if ( this . _modSettings . mode === 'menu' ) {
582639 this . _menuMaker ( ) ;
640+ } else if ( this . _modSettings . mode === 'switch' ) {
641+ this . _switchMaker ( ) ;
642+ this . _useSearchMod = false ;
583643 } else {
584644 let select = this . select ;
585645 let select_dom = '' ;
@@ -1203,7 +1263,7 @@ window.ComponentLine = class {
12031263 td . append ( menu ) ;
12041264 let modSettings = Object . assign ( {
12051265 placeholder : '未选择' ,
1206- height : '120px ' ,
1266+ height : '150px ' ,
12071267 limit : 1 ,
12081268 useSearch : false
12091269 } , column . options ) ;
@@ -1214,8 +1274,7 @@ window.ComponentLine = class {
12141274 value = [ parseInt ( value ) ] ;
12151275 }
12161276 }
1217- let dot = new ComponentDot ( menu , column . select ) . selected ( value ) . limitNum ( modSettings . limit ) . mod ( {
1218- mode : true ,
1277+ let dot = new ComponentDot ( menu , column . select ) . selected ( value ) . limitNum ( modSettings . limit ) . menuMod ( {
12191278 placeholder : modSettings . placeholder ,
12201279 height : modSettings . height
12211280 } ) ;
0 commit comments