diff --git a/dist/dual-listbox.js b/dist/dual-listbox.js index de8b3af..aecc475 100644 --- a/dist/dual-listbox.js +++ b/dist/dual-listbox.js @@ -1 +1 @@ -!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var i=e();for(var s in i)("object"==typeof exports?exports:t)[s]=i[s]}}(this,function(){return function(t){function e(s){if(i[s])return i[s].exports;var n=i[s]={exports:{},id:s,loaded:!1};return t[s].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e){"use strict";function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n=function(){function t(t,e){for(var i=0;i1&&void 0!==arguments[1]?arguments[1]:{};i(this,t),this.setDefaults(),this.selected=[],this.available=[],t.isDomElement(e)?this.select=e:this.select=document.querySelector(e),this._initOptions(s),this._initReusableElements(),this._splitOptions(this.select.options),void 0!==s.options&&this._splitOptions(s.options),this._buildDualListbox(this.select.parentNode),this._addActions(),this.redraw()}return n(t,[{key:"setDefaults",value:function(){this.addEvent=null,this.removeEvent=null,this.availableTitle="Available options",this.selectedTitle="Selected options",this.addButtonText="add",this.removeButtonText="remove",this.addAllButtonText="add all",this.removeAllButtonText="remove all",this.searchPlaceholder="Search"}},{key:"addEventListener",value:function(t,e){this.dualListbox.addEventListener(t,e)}},{key:"addSelected",value:function(t){var e=this.available.indexOf(t);if(e>-1){this.available.splice(e,1),this.selected.push(t),this._selectOption(t.dataset.id),this.redraw();var i=document.createEvent("HTMLEvents");i.initEvent("added",!1,!0),i.addedElement=t,this.dualListbox.dispatchEvent(i)}}},{key:"redraw",value:function(){this.updateAvailableListbox(),this.updateSelectedListbox()}},{key:"removeSelected",value:function(t){var e=this.selected.indexOf(t);if(e>-1){this.selected.splice(e,1),this.available.push(t),this._deselectOption(t.dataset.id),this.redraw();var i=document.createEvent("HTMLEvents");i.initEvent("removed",!1,!0),i.removedElement=t,this.dualListbox.dispatchEvent(i)}}},{key:"searchLists",value:function(t,e){for(var i=e.querySelectorAll("."+c),s=t.toLowerCase(),n=0;n0;)this.addSelected(this.available[0])}},{key:"_updateListbox",value:function(t,e){t.innerHTML="";for(var i=0;i0;)this.removeSelected(this.selected[0])}},{key:"_actionItemDeselected",value:function(t){t.preventDefault();var e=this.dualListbox.querySelector("."+b);e&&this.removeSelected(e)}},{key:"_actionItemDoubleClick",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;e&&(e.preventDefault(),e.stopPropagation()),this.selected.indexOf(t)>-1?this.removeSelected(t):this.addSelected(t)}},{key:"_actionItemClick",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;i&&i.preventDefault();for(var s=e.querySelectorAll("."+c),n=0;n1&&void 0!==arguments[1]?arguments[1]:{};i(this,t),this.setDefaults(),this.selected=[],this.available=[],t.isDomElement(e)?this.select=e:this.select=document.querySelector(e),this._initOptions(s),this._initReusableElements(),this._splitOptions(this.select.options),void 0!==s.options&&this._splitOptions(s.options),this._buildDualListbox(this.select.parentNode),this._addActions(),this.redraw()}return n(t,[{key:"setDefaults",value:function(){this.addEvent=null,this.removeEvent=null,this.availableTitle="Available options",this.selectedTitle="Selected options",this.addButtonText="add",this.removeButtonText="remove",this.addAllButtonText="add all",this.removeAllButtonText="remove all",this.searchPlaceholder="Search"}},{key:"addEventListener",value:function(t,e){this.dualListbox.addEventListener(t,e)}},{key:"addSelected",value:function(t){var e=this.available.indexOf(t);if(e>-1){this.available.splice(e,1),this.selected.push(t),this._selectOption(t.dataset.id),this.redraw();var i=document.createEvent("HTMLEvents");i.initEvent("added",!1,!0),i.addedElement=t,this.dualListbox.dispatchEvent(i)}}},{key:"redraw",value:function(){this.updateAvailableListbox(),this.updateSelectedListbox()}},{key:"removeSelected",value:function(t){var e=this.selected.indexOf(t);if(e>-1){this.selected.splice(e,1),this.available.push(t),this._deselectOption(t.dataset.id),this.redraw();var i=document.createEvent("HTMLEvents");i.initEvent("removed",!1,!0),i.removedElement=t,this.dualListbox.dispatchEvent(i)}}},{key:"searchLists",value:function(t,e){for(var i=e.querySelectorAll("."+c),s=t.toLowerCase(),n=0;n1&&void 0!==arguments[1]?arguments[1]:null;e&&(e.preventDefault(),e.stopPropagation()),this.selected.indexOf(t)>-1?this.removeSelected(t):this.addSelected(t)}},{key:"_actionItemClick",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;i&&i.preventDefault();for(var s=e.querySelectorAll("."+c),n=0;nAdd options and add eventListeners 0) { - this.addSelected(this.available[0]); - } + let selected = this.available.filter((item) => item.style.display !== "none"); + selected.forEach((item) => this.addSelected(item)); } /** @@ -193,9 +192,8 @@ class DualListbox { _actionAllDeselected(event) { event.preventDefault(); - while (this.selected.length > 0) { - this.removeSelected(this.selected[0]); - } + let deselected = this.selected.filter((item) => item.style.display !== "none"); + deselected.forEach((item) => this.removeSelected(item)); } /** diff --git a/test/dual-listbox.spec.js b/test/dual-listbox.spec.js index 4c22416..5d25855 100644 --- a/test/dual-listbox.spec.js +++ b/test/dual-listbox.spec.js @@ -56,6 +56,23 @@ const FIXTURE_FILLED_SELECT_WITH_ID = ` `; + +const FIXTURE_FILLED_SELECT_PRESELECTED_MULTIPLE = ` + +`; + + const OPTIONS_WITH_SELECTED_VALUE = [ { text: "option 1", @@ -328,4 +345,106 @@ describe('Duallistbox', function () { expect(dlb.available.length).toBe(10); expect(dlb.selected.length).toBe(0); }); + + it('should set the item to availeble.', () => { + let domParent = document.createElement("div"); + domParent.innerHTML = FIXTURE_FILLED_SELECT_PRESELECTED; + + let dlb = new DualListbox(domParent.getElementsByTagName('select')[0]); + expect(dlb.available.length).toBe(9); + expect(dlb.selected.length).toBe(1); + + dlb.selected[0].classList.add('dual-listbox__item--selected'); + let event = {}; + event.preventDefault = () => {}; + dlb._actionItemDeselected(event); + expect(dlb.available.length).toBe(10); + expect(dlb.selected.length).toBe(0); + }); + + it('should set the item to selected.', () => { + let domParent = document.createElement("div"); + domParent.innerHTML = FIXTURE_FILLED_SELECT_PRESELECTED; + + let dlb = new DualListbox(domParent.getElementsByTagName('select')[0]); + expect(dlb.available.length).toBe(9); + expect(dlb.selected.length).toBe(1); + + dlb.available[0].classList.add('dual-listbox__item--selected'); + let event = {}; + event.preventDefault = () => {}; + dlb._actionItemSelected(event); + expect(dlb.available.length).toBe(8); + expect(dlb.selected.length).toBe(2); + }); + + it('should only set the searched results to selected.', () => { + let domParent = document.createElement("div"); + domParent.innerHTML = FIXTURE_FILLED_SELECT; + + let dlb = new DualListbox(domParent.getElementsByTagName('select')[0]); + expect(dlb.available.length).toBe(10); + expect(dlb.selected.length).toBe(0); + + let event = {}; + event.preventDefault = () => {}; + dlb.searchLists('Four', dlb.dualListbox); + dlb._actionAllSelected(event); + expect(dlb.available.length).toBe(9); + expect(dlb.selected.length).toBe(1); + }); + + it('should only set the searched results to available.', () => { + let domParent = document.createElement("div"); + domParent.innerHTML = FIXTURE_FILLED_SELECT_PRESELECTED_MULTIPLE; + + let dlb = new DualListbox(domParent.getElementsByTagName('select')[0]); + expect(dlb.available.length).toBe(7); + expect(dlb.selected.length).toBe(3); + + let event = {}; + event.preventDefault = () => {}; + dlb.searchLists('Four', dlb.dualListbox); + dlb._actionAllDeselected(event); + expect(dlb.available.length).toBe(8); + expect(dlb.selected.length).toBe(2); + }); + + it('should be able to add the removed eventListener', (done) => { + let domParent = document.createElement("div"); + domParent.innerHTML = FIXTURE_FILLED_SELECT_PRESELECTED_MULTIPLE; + + let dlb = new DualListbox(domParent.getElementsByTagName('select')[0]); + expect(dlb.available.length).toBe(7); + expect(dlb.selected.length).toBe(3); + + dlb.addEventListener('removed', event => { + expect(event.target.innerText).toBe('Two'); + done(); + }); + + dlb.selected[0].classList.add('dual-listbox__item--selected'); + let event = {}; + event.preventDefault = () => {}; + dlb._actionItemDeselected(event); + }); + + it('should be able to add the added eventListener', (done) => { + let domParent = document.createElement("div"); + domParent.innerHTML = FIXTURE_FILLED_SELECT_PRESELECTED_MULTIPLE; + + let dlb = new DualListbox(domParent.getElementsByTagName('select')[0]); + expect(dlb.available.length).toBe(7); + expect(dlb.selected.length).toBe(3); + + dlb.addEventListener('added', event => { + expect(event.target.innerText).toBe('One'); + done(); + }); + + dlb.available[0].classList.add('dual-listbox__item--selected'); + let event = {}; + event.preventDefault = () => {}; + dlb._actionItemSelected(event); + }); });