@@ -305,7 +305,7 @@ define([
305305// select - right
306306tag . appendFormatLine ( '<div class="{0}">' , APP_SELECT_RIGHT ) ;
307307var selectedList = this . dataList . filter ( data => that . selectedList . includes ( data . code ) ) ;
308- tag . appendLine ( this . renderSelectedBox ( selectedList ) ) ;
308+ tag . appendLine ( this . renderSelectedBox ( this . selectedList ) ) ;
309309if ( this . allowAdd ) {
310310// add item
311311tag . appendLine ( '<input type="text" class="vp-cs-add-item-name vp-input wp100" placeholder="New item to add" value="">' ) ;
@@ -380,62 +380,6 @@ define([
380380that . bindDraggable ( ) ;
381381} ) ;
382382
383- // item indexing
384- $ ( this . wrapSelector ( '.' + APP_SELECT_ITEM ) ) . on ( 'click' , function ( event ) {
385- var dataIdx = $ ( this ) . attr ( 'data-idx' ) ;
386- var idx = $ ( this ) . index ( ) ;
387- var added = $ ( this ) . hasClass ( 'added' ) ; // right side added item?
388- var selector = '' ;
389-
390- // remove selection for select box on the other side
391- if ( added ) {
392- // remove selection for left side
393- $ ( that . wrapSelector ( '.' + APP_SELECT_ITEM + ':not(.added)' ) ) . removeClass ( 'selected' ) ;
394- // set selector
395- selector = '.added' ;
396- } else {
397- // remove selection for right(added) side
398- $ ( that . wrapSelector ( '.' + APP_SELECT_ITEM + '.added' ) ) . removeClass ( 'selected' ) ;
399- // set selector
400- selector = ':not(.added)' ;
401- }
402-
403- if ( vpEvent . keyManager . keyCheck . ctrlKey ) {
404- // multi-select
405- that . pointer = { start :idx , end :- 1 } ;
406- $ ( this ) . toggleClass ( 'selected' ) ;
407- } else if ( vpEvent . keyManager . keyCheck . shiftKey ) {
408- // slicing
409- var startIdx = that . pointer . start ;
410-
411- if ( startIdx == - 1 ) {
412- // no selection
413- that . pointer = { start :idx , end :- 1 } ;
414- } else if ( startIdx > idx ) {
415- // add selection from idx to startIdx
416- var tags = $ ( that . wrapSelector ( '.' + APP_SELECT_ITEM + selector ) ) ;
417- for ( var i = idx ; i <= startIdx ; i ++ ) {
418- $ ( tags [ i ] ) . addClass ( 'selected' ) ;
419- }
420- that . pointer = { start :startIdx , end :idx } ;
421- } else if ( startIdx <= idx ) {
422- // add selection from startIdx to idx
423- var tags = $ ( that . wrapSelector ( '.' + APP_SELECT_ITEM + selector ) ) ;
424- for ( var i = startIdx ; i <= idx ; i ++ ) {
425- $ ( tags [ i ] ) . addClass ( 'selected' ) ;
426- }
427- that . pointer = { start :startIdx , end :idx } ;
428- }
429- } else {
430- // single-select
431- that . pointer = { start :idx , end :- 1 } ;
432- // un-select others
433- $ ( that . wrapSelector ( '.' + APP_SELECT_ITEM + selector ) ) . removeClass ( 'selected' ) ;
434- // select this
435- $ ( this ) . addClass ( 'selected' ) ;
436- }
437- } ) ;
438-
439383// item indexing - add all
440384$ ( this . wrapSelector ( '.' + APP_SELECT_ADD_ALL_BTN ) ) . on ( 'click' , function ( event ) {
441385$ ( that . wrapSelector ( '.' + APP_SELECT_BOX + '.left .' + APP_SELECT_ITEM ) ) . appendTo (
@@ -510,6 +454,75 @@ define([
510454that . _addNewItem ( newItemName ) ;
511455}
512456} ) ;
457+
458+ this . _bindItemClickEvent ( ) ;
459+ }
460+
461+ _bindItemClickEvent ( ) {
462+ let that = this ;
463+ // item indexing
464+ $ ( this . wrapSelector ( '.' + APP_SELECT_ITEM ) ) . off ( 'click' ) ;
465+ $ ( this . wrapSelector ( '.' + APP_SELECT_ITEM ) ) . on ( 'click' , function ( event ) {
466+ var dataIdx = $ ( this ) . attr ( 'data-idx' ) ;
467+ var idx = $ ( this ) . index ( ) ;
468+ var added = $ ( this ) . hasClass ( 'added' ) ; // right side added item?
469+ var selector = '' ;
470+
471+ // remove selection for select box on the other side
472+ if ( added ) {
473+ // remove selection for left side
474+ $ ( that . wrapSelector ( '.' + APP_SELECT_ITEM + ':not(.added)' ) ) . removeClass ( 'selected' ) ;
475+ // set selector
476+ selector = '.added' ;
477+ } else {
478+ // remove selection for right(added) side
479+ $ ( that . wrapSelector ( '.' + APP_SELECT_ITEM + '.added' ) ) . removeClass ( 'selected' ) ;
480+ // set selector
481+ selector = ':not(.added)' ;
482+ }
483+
484+ if ( vpEvent . keyManager . keyCheck . ctrlKey ) {
485+ // multi-select
486+ that . pointer = { start :idx , end :- 1 } ;
487+ $ ( this ) . toggleClass ( 'selected' ) ;
488+ } else if ( vpEvent . keyManager . keyCheck . shiftKey ) {
489+ // slicing
490+ var startIdx = that . pointer . start ;
491+
492+ if ( startIdx == - 1 ) {
493+ // no selection
494+ that . pointer = { start :idx , end :- 1 } ;
495+ } else if ( startIdx > idx ) {
496+ // add selection from idx to startIdx
497+ var tags = $ ( that . wrapSelector ( '.' + APP_SELECT_ITEM + selector ) ) ;
498+ for ( var i = idx ; i <= startIdx ; i ++ ) {
499+ $ ( tags [ i ] ) . addClass ( 'selected' ) ;
500+ }
501+ that . pointer = { start :startIdx , end :idx } ;
502+ } else if ( startIdx <= idx ) {
503+ // add selection from startIdx to idx
504+ var tags = $ ( that . wrapSelector ( '.' + APP_SELECT_ITEM + selector ) ) ;
505+ for ( var i = startIdx ; i <= idx ; i ++ ) {
506+ $ ( tags [ i ] ) . addClass ( 'selected' ) ;
507+ }
508+ that . pointer = { start :startIdx , end :idx } ;
509+ }
510+ } else {
511+ // single-select
512+ that . pointer = { start :idx , end :- 1 } ;
513+ // un-select others
514+ $ ( that . wrapSelector ( '.' + APP_SELECT_ITEM + selector ) ) . removeClass ( 'selected' ) ;
515+ // select this
516+ $ ( this ) . addClass ( 'selected' ) ;
517+ }
518+ } ) ;
519+
520+ // item deleting (manually added item only)
521+ $ ( this . wrapSelector ( '.vp-cs-del-item' ) ) . off ( 'click' ) ;
522+ $ ( this . wrapSelector ( '.vp-cs-del-item' ) ) . on ( 'click' , function ( event ) {
523+ $ ( this ) . closest ( '.' + APP_SELECT_ITEM ) . remove ( ) ;
524+ that . pointer = { start :- 1 , end :- 1 } ;
525+ } ) ;
513526}
514527
515528_addNewItem ( newItemName ) {
@@ -551,6 +564,7 @@ define([
551564let newItemIndex = this . dataList . length ;
552565var targetTag = $ ( `<div class="${ APP_SELECT_ITEM } ${ APP_DRAGGABLE } added selected" data-idx="${ newItemIndex } " data-name="${ newItemName } " data-type="object" data-code="'${ newItemName } '" title="${ newItemName } : Added manually">
553566 <span>${ newItemName } </span>
567+ <div class="vp-cs-del-item vp-icon-close-small" title="Delete this manually added item"></div>
554568 </div>` ) ;
555569$ ( targetTag ) . appendTo (
556570$ ( this . wrapSelector ( '.' + APP_SELECT_BOX + '.right' ) )
@@ -560,6 +574,8 @@ define([
560574$ ( this . wrapSelector ( '.' + APP_SELECT_ITEM ) ) . removeClass ( 'selected' ) ;
561575// clear item input
562576$ ( this . wrapSelector ( '.vp-cs-add-item-name' ) ) . val ( '' ) ;
577+ // bind click event
578+ this . _bindItemClickEvent ( ) ;
563579// bind draggable
564580this . bindDraggable ( ) ;
565581}