Skip to content

Commit 826ad90

Browse files
author
minjk-bl
committed
Fix multiselector to able to click and delete manually added item
1 parent 44e76c7 commit 826ad90

File tree

2 files changed

+79
-57
lines changed

2 files changed

+79
-57
lines changed

‎visualpython/css/component/multiSelector.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,4 +79,10 @@
7979
left: calc(100% - 25px);
8080
bottom: 23px;
8181
cursor: pointer;
82+
}
83+
.vp-cs-del-item {
84+
position: relative;
85+
float: right;
86+
top: 4px;
87+
cursor: pointer;
8288
}

‎visualpython/js/com/component/MultiSelector.js

Lines changed: 73 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -305,7 +305,7 @@ define([
305305
// select - right
306306
tag.appendFormatLine('<div class="{0}">', APP_SELECT_RIGHT);
307307
var selectedList = this.dataList.filter(data => that.selectedList.includes(data.code));
308-
tag.appendLine(this.renderSelectedBox(selectedList));
308+
tag.appendLine(this.renderSelectedBox(this.selectedList));
309309
if (this.allowAdd) {
310310
// add item
311311
tag.appendLine('<input type="text" class="vp-cs-add-item-name vp-input wp100" placeholder="New item to add" value="">');
@@ -380,62 +380,6 @@ define([
380380
that.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([
510454
that._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([
551564
let newItemIndex = this.dataList.length;
552565
var 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
564580
this.bindDraggable();
565581
}

0 commit comments

Comments
 (0)