dual-listbox - npm Package Compare versions

Comparing version 1.3.1 to 1.3.2

build/tasks/scss.js

@@ -6,3 +6,3 @@ 'use strict';
 var sourcemaps = require('gulp-sourcemaps');
-var sass = require('gulp-sass');
+var sass = require('gulp-sass')(require('sass'));
 var autoprefixer = require('autoprefixer');
@@ -9,0 +9,0 @@ var cssnano = require('cssnano');

dist/dual-listbox.js

@@ -10,3 +10,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	}
-})(global, function() {
+})(window, function() {
 return /******/ (function(modules) { // webpackBootstrap
@@ -110,3 +110,3 @@ /******/ 	// The module cache
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DualListbox", function() { return DualListbox; });
-function _typeof(obj){"@babel/helpers - typeof";if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}var MAIN_BLOCK='dual-listbox';var CONTAINER_ELEMENT='dual-listbox__container';var AVAILABLE_ELEMENT='dual-listbox__available';var SELECTED_ELEMENT='dual-listbox__selected';var TITLE_ELEMENT='dual-listbox__title';var ITEM_ELEMENT='dual-listbox__item';var BUTTONS_ELEMENT='dual-listbox__buttons';var BUTTON_ELEMENT='dual-listbox__button';var SEARCH_ELEMENT='dual-listbox__search';var SELECTED_MODIFIER='dual-listbox__item--selected';var DualListbox=function(){function DualListbox(selector){var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};_classCallCheck(this,DualListbox);this.setDefaults();this.selected=[];this.available=[];if(DualListbox.isDomElement(selector)){this.select=selector;}else{this.select=document.querySelector(selector);}this._initOptions(options);this._initReusableElements();this._splitOptions(this.select.options);if(options.options!==undefined){this._splitOptions(options.options);}this._buildDualListbox(this.select.parentNode);this._addActions();this.redraw();}_createClass(DualListbox,[{key:"setDefaults",value:function setDefaults(){this.addEvent=null;this.removeEvent=null;this.availableTitle='Available options';this.selectedTitle='Selected options';this.showAddButton=true;this.addButtonText='add';this.showRemoveButton=true;this.removeButtonText='remove';this.showAddAllButton=true;this.addAllButtonText='add all';this.showRemoveAllButton=true;this.removeAllButtonText='remove all';this.searchPlaceholder='Search';}},{key:"addEventListener",value:function addEventListener(eventName,callback){this.dualListbox.addEventListener(eventName,callback);}},{key:"addSelected",value:function addSelected(listItem){var _this=this;var index=this.available.indexOf(listItem);if(index>-1){this.available.splice(index,1);this.selected.push(listItem);this._selectOption(listItem.dataset.id);this.redraw();setTimeout(function(){var event=document.createEvent("HTMLEvents");event.initEvent("added",false,true);event.addedElement=listItem;_this.dualListbox.dispatchEvent(event);},0);}}},{key:"redraw",value:function redraw(){this.updateAvailableListbox();this.updateSelectedListbox();}},{key:"removeSelected",value:function removeSelected(listItem){var _this2=this;var index=this.selected.indexOf(listItem);if(index>-1){this.selected.splice(index,1);this.available.push(listItem);this._deselectOption(listItem.dataset.id);this.redraw();setTimeout(function(){var event=document.createEvent("HTMLEvents");event.initEvent("removed",false,true);event.removedElement=listItem;_this2.dualListbox.dispatchEvent(event);},0);}}},{key:"searchLists",value:function searchLists(searchString,dualListbox){var items=dualListbox.querySelectorAll(".".concat(ITEM_ELEMENT));var lowerCaseSearchString=searchString.toLowerCase();for(var i=0;i<items.length;i++){var item=items[i];if(item.textContent.toLowerCase().indexOf(lowerCaseSearchString)===-1){item.style.display='none';}else{item.style.display='list-item';}}}},{key:"updateAvailableListbox",value:function updateAvailableListbox(){this._updateListbox(this.availableList,this.available);}},{key:"updateSelectedListbox",value:function updateSelectedListbox(){this._updateListbox(this.selectedList,this.selected);}},{key:"_actionAllSelected",value:function _actionAllSelected(event){var _this3=this;event.preventDefault();var selected=this.available.filter(function(item){return item.style.display!=="none";});selected.forEach(function(item){return _this3.addSelected(item);});}},{key:"_updateListbox",value:function _updateListbox(list,elements){while(list.firstChild){list.removeChild(list.firstChild);}for(var i=0;i<elements.length;i++){var listItem=elements[i];list.appendChild(listItem);}}},{key:"_actionItemSelected",value:function _actionItemSelected(event){event.preventDefault();var selected=this.dualListbox.querySelector(".".concat(SELECTED_MODIFIER));if(selected){this.addSelected(selected);}}},{key:"_actionAllDeselected",value:function _actionAllDeselected(event){var _this4=this;event.preventDefault();var deselected=this.selected.filter(function(item){return item.style.display!=="none";});deselected.forEach(function(item){return _this4.removeSelected(item);});}},{key:"_actionItemDeselected",value:function _actionItemDeselected(event){event.preventDefault();var selected=this.dualListbox.querySelector(".".concat(SELECTED_MODIFIER));if(selected){this.removeSelected(selected);}}},{key:"_actionItemDoubleClick",value:function _actionItemDoubleClick(listItem){var event=arguments.length>1&&arguments[1]!==undefined?arguments[1]:null;if(event){event.preventDefault();event.stopPropagation();}if(this.selected.indexOf(listItem)>-1){this.removeSelected(listItem);}else{this.addSelected(listItem);}}},{key:"_actionItemClick",value:function _actionItemClick(listItem,dualListbox){var event=arguments.length>2&&arguments[2]!==undefined?arguments[2]:null;if(event){event.preventDefault();}var items=dualListbox.querySelectorAll(".".concat(ITEM_ELEMENT));for(var i=0;i<items.length;i++){var value=items[i];if(value!==listItem){value.classList.remove(SELECTED_MODIFIER);}}if(listItem.classList.contains(SELECTED_MODIFIER)){listItem.classList.remove(SELECTED_MODIFIER);}else{listItem.classList.add(SELECTED_MODIFIER);}}},{key:"_addActions",value:function _addActions(){this._addButtonActions();this._addSearchActions();}},{key:"_addButtonActions",value:function _addButtonActions(){var _this5=this;this.add_all_button.addEventListener('click',function(event){return _this5._actionAllSelected(event);});this.add_button.addEventListener('click',function(event){return _this5._actionItemSelected(event);});this.remove_button.addEventListener('click',function(event){return _this5._actionItemDeselected(event);});this.remove_all_button.addEventListener('click',function(event){return _this5._actionAllDeselected(event);});}},{key:"_addClickActions",value:function _addClickActions(listItem){var _this6=this;listItem.addEventListener('dblclick',function(event){return _this6._actionItemDoubleClick(listItem,event);});listItem.addEventListener('click',function(event){return _this6._actionItemClick(listItem,_this6.dualListbox,event);});return listItem;}},{key:"_addSearchActions",value:function _addSearchActions(){var _this7=this;this.search.addEventListener('change',function(event){return _this7.searchLists(event.target.value,_this7.dualListbox);});this.search.addEventListener('keyup',function(event){return _this7.searchLists(event.target.value,_this7.dualListbox);});}},{key:"_buildDualListbox",value:function _buildDualListbox(container){this.select.style.display='none';this.dualListBoxContainer.appendChild(this._createList(this.availableListTitle,this.availableList));this.dualListBoxContainer.appendChild(this.buttons);this.dualListBoxContainer.appendChild(this._createList(this.selectedListTitle,this.selectedList));this.dualListbox.appendChild(this.search);this.dualListbox.appendChild(this.dualListBoxContainer);container.insertBefore(this.dualListbox,this.select);}},{key:"_createList",value:function _createList(header,list){var result=document.createElement('div');result.appendChild(header);result.appendChild(list);return result;}},{key:"_createButtons",value:function _createButtons(){this.buttons=document.createElement('div');this.buttons.classList.add(BUTTONS_ELEMENT);this.add_all_button=document.createElement('button');this.add_all_button.innerHTML=this.addAllButtonText;this.add_button=document.createElement('button');this.add_button.innerHTML=this.addButtonText;this.remove_button=document.createElement('button');this.remove_button.innerHTML=this.removeButtonText;this.remove_all_button=document.createElement('button');this.remove_all_button.innerHTML=this.removeAllButtonText;var options={showAddAllButton:this.add_all_button,showAddButton:this.add_button,showRemoveButton:this.remove_button,showRemoveAllButton:this.remove_all_button};for(var optionName in options){var option=this[optionName];var button=options[optionName];button.setAttribute('type','button');button.classList.add(BUTTON_ELEMENT);if(option){this.buttons.appendChild(button);}}}},{key:"_createListItem",value:function _createListItem(option){var listItem=document.createElement('li');listItem.classList.add(ITEM_ELEMENT);listItem.innerHTML=option.text;listItem.dataset.id=option.value;this._addClickActions(listItem);return listItem;}},{key:"_createSearch",value:function _createSearch(){this.search=document.createElement('input');this.search.classList.add(SEARCH_ELEMENT);this.search.placeholder=this.searchPlaceholder;}},{key:"_deselectOption",value:function _deselectOption(value){var options=this.select.options;for(var i=0;i<options.length;i++){var option=options[i];if(option.value===value){option.selected=false;option.removeAttribute('selected');}}if(this.removeEvent){this.removeEvent(value);}}},{key:"_initOptions",value:function _initOptions(options){for(var key in options){if(options.hasOwnProperty(key)){this[key]=options[key];}}}},{key:"_initReusableElements",value:function _initReusableElements(){this.dualListbox=document.createElement('div');this.dualListbox.classList.add(MAIN_BLOCK);if(this.select.id){this.dualListbox.classList.add(this.select.id);}this.dualListBoxContainer=document.createElement('div');this.dualListBoxContainer.classList.add(CONTAINER_ELEMENT);this.availableList=document.createElement('ul');this.availableList.classList.add(AVAILABLE_ELEMENT);this.selectedList=document.createElement('ul');this.selectedList.classList.add(SELECTED_ELEMENT);this.availableListTitle=document.createElement('div');this.availableListTitle.classList.add(TITLE_ELEMENT);this.availableListTitle.innerText=this.availableTitle;this.selectedListTitle=document.createElement('div');this.selectedListTitle.classList.add(TITLE_ELEMENT);this.selectedListTitle.innerText=this.selectedTitle;this._createButtons();this._createSearch();}},{key:"_selectOption",value:function _selectOption(value){var options=this.select.options;for(var i=0;i<options.length;i++){var option=options[i];if(option.value===value){option.selected=true;option.setAttribute('selected','');}}if(this.addEvent){this.addEvent(value);}}},{key:"_splitOptions",value:function _splitOptions(options){for(var i=0;i<options.length;i++){var option=options[i];if(DualListbox.isDomElement(option)){this._addOption({text:option.innerHTML,value:option.value,selected:option.attributes.selected});}else{this._addOption(option);}}}},{key:"_addOption",value:function _addOption(option){var listItem=this._createListItem(option);if(option.selected){this.selected.push(listItem);}else{this.available.push(listItem);}}}],[{key:"isDomElement",value:function isDomElement(o){return(typeof HTMLElement==="undefined"?"undefined":_typeof(HTMLElement))==="object"?o instanceof HTMLElement:o&&_typeof(o)==="object"&&o!==null&&o.nodeType===1&&typeof o.nodeName==="string";}}]);return DualListbox;}();/* harmony default export */ __webpack_exports__["default"] = (DualListbox);
+function _typeof(obj){"@babel/helpers - typeof";if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}var MAIN_BLOCK='dual-listbox';var CONTAINER_ELEMENT='dual-listbox__container';var AVAILABLE_ELEMENT='dual-listbox__available';var SELECTED_ELEMENT='dual-listbox__selected';var TITLE_ELEMENT='dual-listbox__title';var ITEM_ELEMENT='dual-listbox__item';var BUTTONS_ELEMENT='dual-listbox__buttons';var BUTTON_ELEMENT='dual-listbox__button';var SEARCH_ELEMENT='dual-listbox__search';var SELECTED_MODIFIER='dual-listbox__item--selected';var DualListbox=function(){function DualListbox(selector){var options=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};_classCallCheck(this,DualListbox);this.setDefaults();this.selected=[];this.available=[];if(DualListbox.isDomElement(selector)){this.select=selector;}else{this.select=document.querySelector(selector);}this._initOptions(options);this._initReusableElements();this._splitOptions(this.select.options);if(options.options!==undefined){this._splitOptions(options.options);}this._buildDualListbox(this.select.parentNode);this._addActions();this.redraw();}_createClass(DualListbox,[{key:"setDefaults",value:function setDefaults(){this.addEvent=null;this.removeEvent=null;this.availableTitle='Available options';this.selectedTitle='Selected options';this.showAddButton=true;this.addButtonText='add';this.showRemoveButton=true;this.removeButtonText='remove';this.showAddAllButton=true;this.addAllButtonText='add all';this.showRemoveAllButton=true;this.removeAllButtonText='remove all';this.searchPlaceholder='Search';}},{key:"addEventListener",value:function addEventListener(eventName,callback){this.dualListbox.addEventListener(eventName,callback);}},{key:"addSelected",value:function addSelected(listItem){var _this=this;var index=this.available.indexOf(listItem);if(index>-1){this.available.splice(index,1);this.selected.push(listItem);this._selectOption(listItem.dataset.id);this.redraw();setTimeout(function(){var event=document.createEvent("HTMLEvents");event.initEvent("added",false,true);event.addedElement=listItem;_this.dualListbox.dispatchEvent(event);},0);}}},{key:"redraw",value:function redraw(){this.updateAvailableListbox();this.updateSelectedListbox();}},{key:"removeSelected",value:function removeSelected(listItem){var _this2=this;var index=this.selected.indexOf(listItem);if(index>-1){this.selected.splice(index,1);this.available.push(listItem);this._deselectOption(listItem.dataset.id);this.redraw();setTimeout(function(){var event=document.createEvent("HTMLEvents");event.initEvent("removed",false,true);event.removedElement=listItem;_this2.dualListbox.dispatchEvent(event);},0);}}},{key:"searchLists",value:function searchLists(searchString,dualListbox){var items=dualListbox.querySelectorAll(".".concat(ITEM_ELEMENT));var lowerCaseSearchString=searchString.toLowerCase();for(var i=0;i<items.length;i++){var item=items[i];if(item.textContent.toLowerCase().indexOf(lowerCaseSearchString)===-1){item.style.display='none';}else{item.style.display='list-item';}}}},{key:"updateAvailableListbox",value:function updateAvailableListbox(){this._updateListbox(this.availableList,this.available);}},{key:"updateSelectedListbox",value:function updateSelectedListbox(){this._updateListbox(this.selectedList,this.selected);}},{key:"_actionAllSelected",value:function _actionAllSelected(event){var _this3=this;event.preventDefault();var selected=this.available.filter(function(item){return item.style.display!=="none";});selected.forEach(function(item){return _this3.addSelected(item);});}},{key:"_updateListbox",value:function _updateListbox(list,elements){while(list.firstChild){list.removeChild(list.firstChild);}for(var i=0;i<elements.length;i++){var listItem=elements[i];list.appendChild(listItem);}}},{key:"_actionItemSelected",value:function _actionItemSelected(event){event.preventDefault();var selected=this.dualListbox.querySelector(".".concat(SELECTED_MODIFIER));if(selected){this.addSelected(selected);}}},{key:"_actionAllDeselected",value:function _actionAllDeselected(event){var _this4=this;event.preventDefault();var deselected=this.selected.filter(function(item){return item.style.display!=="none";});deselected.forEach(function(item){return _this4.removeSelected(item);});}},{key:"_actionItemDeselected",value:function _actionItemDeselected(event){event.preventDefault();var selected=this.dualListbox.querySelector(".".concat(SELECTED_MODIFIER));if(selected){this.removeSelected(selected);}}},{key:"_actionItemDoubleClick",value:function _actionItemDoubleClick(listItem){var event=arguments.length>1&&arguments[1]!==undefined?arguments[1]:null;if(event){event.preventDefault();event.stopPropagation();}if(this.selected.indexOf(listItem)>-1){this.removeSelected(listItem);}else{this.addSelected(listItem);}}},{key:"_actionItemClick",value:function _actionItemClick(listItem,dualListbox){var event=arguments.length>2&&arguments[2]!==undefined?arguments[2]:null;if(event){event.preventDefault();}var items=dualListbox.querySelectorAll(".".concat(ITEM_ELEMENT));for(var i=0;i<items.length;i++){var value=items[i];if(value!==listItem){value.classList.remove(SELECTED_MODIFIER);}}if(listItem.classList.contains(SELECTED_MODIFIER)){listItem.classList.remove(SELECTED_MODIFIER);}else{listItem.classList.add(SELECTED_MODIFIER);}}},{key:"_addActions",value:function _addActions(){this._addButtonActions();this._addSearchActions();}},{key:"_addButtonActions",value:function _addButtonActions(){var _this5=this;this.add_all_button.addEventListener('click',function(event){return _this5._actionAllSelected(event);});this.add_button.addEventListener('click',function(event){return _this5._actionItemSelected(event);});this.remove_button.addEventListener('click',function(event){return _this5._actionItemDeselected(event);});this.remove_all_button.addEventListener('click',function(event){return _this5._actionAllDeselected(event);});}},{key:"_addClickActions",value:function _addClickActions(listItem){var _this6=this;listItem.addEventListener('dblclick',function(event){return _this6._actionItemDoubleClick(listItem,event);});listItem.addEventListener('click',function(event){return _this6._actionItemClick(listItem,_this6.dualListbox,event);});return listItem;}},{key:"_addSearchActions",value:function _addSearchActions(){var _this7=this;this.search_left.addEventListener('change',function(event){return _this7.searchLists(event.target.value,_this7.availableList);});this.search_left.addEventListener('keyup',function(event){return _this7.searchLists(event.target.value,_this7.availableList);});this.search_right.addEventListener('change',function(event){return _this7.searchLists(event.target.value,_this7.selectedList);});this.search_right.addEventListener('keyup',function(event){return _this7.searchLists(event.target.value,_this7.selectedList);});}},{key:"_buildDualListbox",value:function _buildDualListbox(container){this.select.style.display='none';this.dualListBoxContainer.appendChild(this._createList(this.search_left,this.availableListTitle,this.availableList));this.dualListBoxContainer.appendChild(this.buttons);this.dualListBoxContainer.appendChild(this._createList(this.search_right,this.selectedListTitle,this.selectedList));this.dualListbox.appendChild(this.dualListBoxContainer);container.insertBefore(this.dualListbox,this.select);}},{key:"_createList",value:function _createList(search,header,list){var result=document.createElement('div');result.appendChild(search);result.appendChild(header);result.appendChild(list);return result;}},{key:"_createButtons",value:function _createButtons(){this.buttons=document.createElement('div');this.buttons.classList.add(BUTTONS_ELEMENT);this.add_all_button=document.createElement('button');this.add_all_button.innerHTML=this.addAllButtonText;this.add_button=document.createElement('button');this.add_button.innerHTML=this.addButtonText;this.remove_button=document.createElement('button');this.remove_button.innerHTML=this.removeButtonText;this.remove_all_button=document.createElement('button');this.remove_all_button.innerHTML=this.removeAllButtonText;var options={showAddAllButton:this.add_all_button,showAddButton:this.add_button,showRemoveButton:this.remove_button,showRemoveAllButton:this.remove_all_button};for(var optionName in options){if(optionName){var option=this[optionName];var button=options[optionName];button.setAttribute('type','button');button.classList.add(BUTTON_ELEMENT);if(option){this.buttons.appendChild(button);}}}}},{key:"_createListItem",value:function _createListItem(option){var listItem=document.createElement('li');listItem.classList.add(ITEM_ELEMENT);listItem.innerHTML=option.text;listItem.dataset.id=option.value;this._addClickActions(listItem);return listItem;}},{key:"_createSearchLeft",value:function _createSearchLeft(){this.search_left=document.createElement('input');this.search_left.classList.add(SEARCH_ELEMENT);this.search_left.placeholder=this.searchPlaceholder;}},{key:"_createSearchRight",value:function _createSearchRight(){this.search_right=document.createElement('input');this.search_right.classList.add(SEARCH_ELEMENT);this.search_right.placeholder=this.searchPlaceholder;}},{key:"_deselectOption",value:function _deselectOption(value){var options=this.select.options;for(var i=0;i<options.length;i++){var option=options[i];if(option.value===value){option.selected=false;option.removeAttribute('selected');}}if(this.removeEvent){this.removeEvent(value);}}},{key:"_initOptions",value:function _initOptions(options){for(var key in options){if(options.hasOwnProperty(key)){this[key]=options[key];}}}},{key:"_initReusableElements",value:function _initReusableElements(){this.dualListbox=document.createElement('div');this.dualListbox.classList.add(MAIN_BLOCK);if(this.select.id){this.dualListbox.classList.add(this.select.id);}this.dualListBoxContainer=document.createElement('div');this.dualListBoxContainer.classList.add(CONTAINER_ELEMENT);this.availableList=document.createElement('ul');this.availableList.classList.add(AVAILABLE_ELEMENT);this.selectedList=document.createElement('ul');this.selectedList.classList.add(SELECTED_ELEMENT);this.availableListTitle=document.createElement('div');this.availableListTitle.classList.add(TITLE_ELEMENT);this.availableListTitle.innerText=this.availableTitle;this.selectedListTitle=document.createElement('div');this.selectedListTitle.classList.add(TITLE_ELEMENT);this.selectedListTitle.innerText=this.selectedTitle;this._createButtons();this._createSearchLeft();this._createSearchRight();}},{key:"_selectOption",value:function _selectOption(value){var options=this.select.options;for(var i=0;i<options.length;i++){var option=options[i];if(option.value===value){option.selected=true;option.setAttribute('selected','');}}if(this.addEvent){this.addEvent(value);}}},{key:"_splitOptions",value:function _splitOptions(options){for(var i=0;i<options.length;i++){var option=options[i];if(DualListbox.isDomElement(option)){this._addOption({text:option.innerHTML,value:option.value,selected:option.attributes.selected});}else{this._addOption(option);}}}},{key:"_addOption",value:function _addOption(option){var listItem=this._createListItem(option);if(option.selected){this.selected.push(listItem);}else{this.available.push(listItem);}}}],[{key:"isDomElement",value:function isDomElement(o){return(typeof HTMLElement==="undefined"?"undefined":_typeof(HTMLElement))==="object"?o instanceof HTMLElement:o&&_typeof(o)==="object"&&o!==null&&o.nodeType===1&&typeof o.nodeName==="string";}}]);return DualListbox;}();/* harmony default export */ __webpack_exports__["default"] = (DualListbox);
 
@@ -113,0 +113,0 @@ /***/ })

doc/dual-listbox.md

@@ -1,41 +0,70 @@
-<a name="DualListbox"></a>
+<a name="module_dual-listbox"></a>
 
-## DualListbox
+## dual-listbox
+Formset module
+Contains logic for generating django formsets
+
+
+* [dual-listbox](#module_dual-listbox)
+    * [~DualListbox](#module_dual-listbox..DualListbox)
+        * [.setDefaults()](#module_dual-listbox..DualListbox+setDefaults)
+        * [.addEventListener(eventName, callback)](#module_dual-listbox..DualListbox+addEventListener)
+        * [.addSelected(listItem)](#module_dual-listbox..DualListbox+addSelected)
+        * [.redraw()](#module_dual-listbox..DualListbox+redraw)
+        * [.removeSelected(listItem)](#module_dual-listbox..DualListbox+removeSelected)
+        * [.searchLists(searchString, dualListbox)](#module_dual-listbox..DualListbox+searchLists)
+        * [.updateAvailableListbox()](#module_dual-listbox..DualListbox+updateAvailableListbox)
+        * [.updateSelectedListbox()](#module_dual-listbox..DualListbox+updateSelectedListbox)
+        * [._actionAllSelected()](#module_dual-listbox..DualListbox+_actionAllSelected)
+        * [._updateListbox()](#module_dual-listbox..DualListbox+_updateListbox)
+        * [._actionItemSelected()](#module_dual-listbox..DualListbox+_actionItemSelected)
+        * [._actionAllDeselected()](#module_dual-listbox..DualListbox+_actionAllDeselected)
+        * [._actionItemDeselected()](#module_dual-listbox..DualListbox+_actionItemDeselected)
+        * [._actionItemDoubleClick()](#module_dual-listbox..DualListbox+_actionItemDoubleClick)
+        * [._actionItemClick()](#module_dual-listbox..DualListbox+_actionItemClick)
+        * [._addButtonActions()](#module_dual-listbox..DualListbox+_addButtonActions)
+        * [._addClickActions(listItem)](#module_dual-listbox..DualListbox+_addClickActions)
+        * [._createList()](#module_dual-listbox..DualListbox+_createList)
+        * [._createButtons()](#module_dual-listbox..DualListbox+_createButtons)
+
+<a name="module_dual-listbox..DualListbox"></a>
+
+### dual-listbox~DualListbox
 Dual select interface allowing the user to select items from a list of provided options.
 
-**Kind**: global class  
+**Kind**: inner class of [<code>dual-listbox</code>](#module_dual-listbox)  
 
-* [DualListbox](#DualListbox)
-    * [.setDefaults()](#DualListbox+setDefaults)
-    * [.addEventListener(eventName, callback)](#DualListbox+addEventListener)
-    * [.addSelected(listItem)](#DualListbox+addSelected)
-    * [.redraw()](#DualListbox+redraw)
-    * [.removeSelected(listItem)](#DualListbox+removeSelected)
-    * [.searchLists(searchString, dualListbox)](#DualListbox+searchLists)
-    * [.updateAvailableListbox()](#DualListbox+updateAvailableListbox)
-    * [.updateSelectedListbox()](#DualListbox+updateSelectedListbox)
-    * [._actionAllSelected()](#DualListbox+_actionAllSelected)
-    * [._updateListbox()](#DualListbox+_updateListbox)
-    * [._actionItemSelected()](#DualListbox+_actionItemSelected)
-    * [._actionAllDeselected()](#DualListbox+_actionAllDeselected)
-    * [._actionItemDeselected()](#DualListbox+_actionItemDeselected)
-    * [._actionItemDoubleClick()](#DualListbox+_actionItemDoubleClick)
-    * [._actionItemClick()](#DualListbox+_actionItemClick)
-    * [._addButtonActions()](#DualListbox+_addButtonActions)
-    * [._addClickActions(listItem)](#DualListbox+_addClickActions)
-    * [._createList()](#DualListbox+_createList)
-    * [._createButtons()](#DualListbox+_createButtons)
+* [~DualListbox](#module_dual-listbox..DualListbox)
+    * [.setDefaults()](#module_dual-listbox..DualListbox+setDefaults)
+    * [.addEventListener(eventName, callback)](#module_dual-listbox..DualListbox+addEventListener)
+    * [.addSelected(listItem)](#module_dual-listbox..DualListbox+addSelected)
+    * [.redraw()](#module_dual-listbox..DualListbox+redraw)
+    * [.removeSelected(listItem)](#module_dual-listbox..DualListbox+removeSelected)
+    * [.searchLists(searchString, dualListbox)](#module_dual-listbox..DualListbox+searchLists)
+    * [.updateAvailableListbox()](#module_dual-listbox..DualListbox+updateAvailableListbox)
+    * [.updateSelectedListbox()](#module_dual-listbox..DualListbox+updateSelectedListbox)
+    * [._actionAllSelected()](#module_dual-listbox..DualListbox+_actionAllSelected)
+    * [._updateListbox()](#module_dual-listbox..DualListbox+_updateListbox)
+    * [._actionItemSelected()](#module_dual-listbox..DualListbox+_actionItemSelected)
+    * [._actionAllDeselected()](#module_dual-listbox..DualListbox+_actionAllDeselected)
+    * [._actionItemDeselected()](#module_dual-listbox..DualListbox+_actionItemDeselected)
+    * [._actionItemDoubleClick()](#module_dual-listbox..DualListbox+_actionItemDoubleClick)
+    * [._actionItemClick()](#module_dual-listbox..DualListbox+_actionItemClick)
+    * [._addButtonActions()](#module_dual-listbox..DualListbox+_addButtonActions)
+    * [._addClickActions(listItem)](#module_dual-listbox..DualListbox+_addClickActions)
+    * [._createList()](#module_dual-listbox..DualListbox+_createList)
+    * [._createButtons()](#module_dual-listbox..DualListbox+_createButtons)
 
-<a name="DualListbox+setDefaults"></a>
+<a name="module_dual-listbox..DualListbox+setDefaults"></a>
 
-### dualListbox.setDefaults()
+#### dualListbox.setDefaults()
 Sets the default values that can be overwritten.
 
-**Kind**: instance method of [<code>DualListbox</code>](#DualListbox)  
-<a name="DualListbox+addEventListener"></a>
+**Kind**: instance method of [<code>DualListbox</code>](#module_dual-listbox..DualListbox)  
+<a name="module_dual-listbox..DualListbox+addEventListener"></a>
 
-### dualListbox.addEventListener(eventName, callback)
+#### dualListbox.addEventListener(eventName, callback)
 Add eventListener to the dualListbox element.
 
-**Kind**: instance method of [<code>DualListbox</code>](#DualListbox)  
+**Kind**: instance method of [<code>DualListbox</code>](#module_dual-listbox..DualListbox)  
 
@@ -47,8 +76,8 @@ | Param | Type |
 
-<a name="DualListbox+addSelected"></a>
+<a name="module_dual-listbox..DualListbox+addSelected"></a>
 
-### dualListbox.addSelected(listItem)
+#### dualListbox.addSelected(listItem)
 Add the listItem to the selected list.
 
-**Kind**: instance method of [<code>DualListbox</code>](#DualListbox)  
+**Kind**: instance method of [<code>DualListbox</code>](#module_dual-listbox..DualListbox)  
 
@@ -59,14 +88,14 @@ | Param | Type |
 
-<a name="DualListbox+redraw"></a>
+<a name="module_dual-listbox..DualListbox+redraw"></a>
 
-### dualListbox.redraw()
+#### dualListbox.redraw()
 Redraws the Dual listbox content
 
-**Kind**: instance method of [<code>DualListbox</code>](#DualListbox)  
-<a name="DualListbox+removeSelected"></a>
+**Kind**: instance method of [<code>DualListbox</code>](#module_dual-listbox..DualListbox)  
+<a name="module_dual-listbox..DualListbox+removeSelected"></a>
 
-### dualListbox.removeSelected(listItem)
+#### dualListbox.removeSelected(listItem)
 Removes the listItem from the selected list.
 
-**Kind**: instance method of [<code>DualListbox</code>](#DualListbox)  
+**Kind**: instance method of [<code>DualListbox</code>](#module_dual-listbox..DualListbox)  
 
@@ -77,8 +106,8 @@ | Param | Type |
 
-<a name="DualListbox+searchLists"></a>
+<a name="module_dual-listbox..DualListbox+searchLists"></a>
 
-### dualListbox.searchLists(searchString, dualListbox)
+#### dualListbox.searchLists(searchString, dualListbox)
 Filters the listboxes with the given searchString.
 
-**Kind**: instance method of [<code>DualListbox</code>](#DualListbox)  
+**Kind**: instance method of [<code>DualListbox</code>](#module_dual-listbox..DualListbox)  
 
@@ -90,68 +119,68 @@ | Param | Type |
 
-<a name="DualListbox+updateAvailableListbox"></a>
+<a name="module_dual-listbox..DualListbox+updateAvailableListbox"></a>
 
-### dualListbox.updateAvailableListbox()
+#### dualListbox.updateAvailableListbox()
 Update the elements in the available listbox;
 
-**Kind**: instance method of [<code>DualListbox</code>](#DualListbox)  
-<a name="DualListbox+updateSelectedListbox"></a>
+**Kind**: instance method of [<code>DualListbox</code>](#module_dual-listbox..DualListbox)  
+<a name="module_dual-listbox..DualListbox+updateSelectedListbox"></a>
 
-### dualListbox.updateSelectedListbox()
+#### dualListbox.updateSelectedListbox()
 Update the elements in the selected listbox;
 
-**Kind**: instance method of [<code>DualListbox</code>](#DualListbox)  
-<a name="DualListbox+_actionAllSelected"></a>
+**Kind**: instance method of [<code>DualListbox</code>](#module_dual-listbox..DualListbox)  
+<a name="module_dual-listbox..DualListbox+_actionAllSelected"></a>
 
-### dualListbox.\_actionAllSelected()
+#### dualListbox.\_actionAllSelected()
 Action to set all listItems to selected.
 
-**Kind**: instance method of [<code>DualListbox</code>](#DualListbox)  
-<a name="DualListbox+_updateListbox"></a>
+**Kind**: instance method of [<code>DualListbox</code>](#module_dual-listbox..DualListbox)  
+<a name="module_dual-listbox..DualListbox+_updateListbox"></a>
 
-### dualListbox.\_updateListbox()
+#### dualListbox.\_updateListbox()
 Update the elements in the listbox;
 
-**Kind**: instance method of [<code>DualListbox</code>](#DualListbox)  
-<a name="DualListbox+_actionItemSelected"></a>
+**Kind**: instance method of [<code>DualListbox</code>](#module_dual-listbox..DualListbox)  
+<a name="module_dual-listbox..DualListbox+_actionItemSelected"></a>
 
-### dualListbox.\_actionItemSelected()
+#### dualListbox.\_actionItemSelected()
 Action to set one listItem to selected.
 
-**Kind**: instance method of [<code>DualListbox</code>](#DualListbox)  
-<a name="DualListbox+_actionAllDeselected"></a>
+**Kind**: instance method of [<code>DualListbox</code>](#module_dual-listbox..DualListbox)  
+<a name="module_dual-listbox..DualListbox+_actionAllDeselected"></a>
 
-### dualListbox.\_actionAllDeselected()
+#### dualListbox.\_actionAllDeselected()
 Action to set all listItems to available.
 
-**Kind**: instance method of [<code>DualListbox</code>](#DualListbox)  
-<a name="DualListbox+_actionItemDeselected"></a>
+**Kind**: instance method of [<code>DualListbox</code>](#module_dual-listbox..DualListbox)  
+<a name="module_dual-listbox..DualListbox+_actionItemDeselected"></a>
 
-### dualListbox.\_actionItemDeselected()
+#### dualListbox.\_actionItemDeselected()
 Action to set one listItem to available.
 
-**Kind**: instance method of [<code>DualListbox</code>](#DualListbox)  
-<a name="DualListbox+_actionItemDoubleClick"></a>
+**Kind**: instance method of [<code>DualListbox</code>](#module_dual-listbox..DualListbox)  
+<a name="module_dual-listbox..DualListbox+_actionItemDoubleClick"></a>
 
-### dualListbox.\_actionItemDoubleClick()
+#### dualListbox.\_actionItemDoubleClick()
 Action when double clicked on a listItem.
 
-**Kind**: instance method of [<code>DualListbox</code>](#DualListbox)  
-<a name="DualListbox+_actionItemClick"></a>
+**Kind**: instance method of [<code>DualListbox</code>](#module_dual-listbox..DualListbox)  
+<a name="module_dual-listbox..DualListbox+_actionItemClick"></a>
 
-### dualListbox.\_actionItemClick()
+#### dualListbox.\_actionItemClick()
 Action when single clicked on a listItem.
 
-**Kind**: instance method of [<code>DualListbox</code>](#DualListbox)  
-<a name="DualListbox+_addButtonActions"></a>
+**Kind**: instance method of [<code>DualListbox</code>](#module_dual-listbox..DualListbox)  
+<a name="module_dual-listbox..DualListbox+_addButtonActions"></a>
 
-### dualListbox.\_addButtonActions()
+#### dualListbox.\_addButtonActions()
 Adds the actions to the buttons that are created.
 
-**Kind**: instance method of [<code>DualListbox</code>](#DualListbox)  
-<a name="DualListbox+_addClickActions"></a>
+**Kind**: instance method of [<code>DualListbox</code>](#module_dual-listbox..DualListbox)  
+<a name="module_dual-listbox..DualListbox+_addClickActions"></a>
 
-### dualListbox.\_addClickActions(listItem)
+#### dualListbox.\_addClickActions(listItem)
 Adds the click items to the listItem.
 
-**Kind**: instance method of [<code>DualListbox</code>](#DualListbox)  
+**Kind**: instance method of [<code>DualListbox</code>](#module_dual-listbox..DualListbox)  
 
@@ -162,13 +191,13 @@ | Param | Type |
 
-<a name="DualListbox+_createList"></a>
+<a name="module_dual-listbox..DualListbox+_createList"></a>
 
-### dualListbox.\_createList()
+#### dualListbox.\_createList()
 Creates list with the header.
 
-**Kind**: instance method of [<code>DualListbox</code>](#DualListbox)  
-<a name="DualListbox+_createButtons"></a>
+**Kind**: instance method of [<code>DualListbox</code>](#module_dual-listbox..DualListbox)  
+<a name="module_dual-listbox..DualListbox+_createButtons"></a>
 
-### dualListbox.\_createButtons()
+#### dualListbox.\_createButtons()
 Creates the buttons to add/remove the selected item.
 
-**Kind**: instance method of [<code>DualListbox</code>](#DualListbox)  
+**Kind**: instance method of [<code>DualListbox</code>](#module_dual-listbox..DualListbox)  

package.json

 {
     "name": "dual-listbox",
-    "version": "1.3.1",
+    "version": "1.3.2",
     "description": "Dual listbox for multi-select elements",
     "main": "dist/dual-listbox.js",
+    "browserslist": "> 0.25%, not dead",
     "directories": {
@@ -10,3 +11,4 @@ "test": "test"
     "dependencies": {
-        "jshint": "^2.12.0"
+        "jshint": "^2.12.0",
+        "sass": "^1.39.2"
     },
@@ -13,0 +15,0 @@ "devDependencies": {

src/dual-listbox.js

@@ -0,1 +1,7 @@
+/**
+ * Formset module
+ * Contains logic for generating django formsets
+ * @module
+ */
+
 const MAIN_BLOCK = 'dual-listbox';
@@ -14,3 +20,2 @@
 
-
 /**
@@ -303,4 +308,6 @@ * Dual select interface allowing the user to select items from a list of provided options.
     _addSearchActions() {
-        this.search.addEventListener('change', (event) => this.searchLists(event.target.value, this.dualListbox));
-        this.search.addEventListener('keyup', (event) => this.searchLists(event.target.value, this.dualListbox));
+        this.search_left.addEventListener('change', (event) => this.searchLists(event.target.value, this.availableList));
+        this.search_left.addEventListener('keyup', (event) => this.searchLists(event.target.value, this.availableList));
+        this.search_right.addEventListener('change', (event) => this.searchLists(event.target.value, this.selectedList));
+        this.search_right.addEventListener('keyup', (event) => this.searchLists(event.target.value, this.selectedList));
     }
@@ -315,7 +322,6 @@
 
-        this.dualListBoxContainer.appendChild(this._createList(this.availableListTitle, this.availableList));
+        this.dualListBoxContainer.appendChild(this._createList(this.search_left, this.availableListTitle, this.availableList));
         this.dualListBoxContainer.appendChild(this.buttons);
-        this.dualListBoxContainer.appendChild(this._createList(this.selectedListTitle, this.selectedList));
+        this.dualListBoxContainer.appendChild(this._createList(this.search_right, this.selectedListTitle, this.selectedList));
 
-        this.dualListbox.appendChild(this.search);
         this.dualListbox.appendChild(this.dualListBoxContainer);
@@ -329,4 +335,5 @@
      */
-    _createList(header, list) {
+    _createList(search, header, list) {
         let result = document.createElement('div');
+        result.appendChild(search);
         result.appendChild(header);
@@ -361,13 +368,15 @@ result.appendChild(list);
             showRemoveAllButton: this.remove_all_button,
-        }
+        };
 
         for (let optionName in options) {
-            const option = this[optionName]
-            const button = options[optionName]
+            if(optionName) {
+                const option = this[optionName];
+                const button = options[optionName];
 
-            button.setAttribute('type', 'button');
-            button.classList.add(BUTTON_ELEMENT);
+                button.setAttribute('type', 'button');
+                button.classList.add(BUTTON_ELEMENT);
 
-            if (option) {
-                this.buttons.appendChild(button);
+                if (option) {
+                    this.buttons.appendChild(button);
+                }
             }
@@ -397,6 +406,6 @@ }
      */
-    _createSearch() {
-        this.search = document.createElement('input');
-        this.search.classList.add(SEARCH_ELEMENT);
-        this.search.placeholder = this.searchPlaceholder;
+    _createSearchLeft() {
+        this.search_left = document.createElement('input');
+        this.search_left.classList.add(SEARCH_ELEMENT);
+        this.search_left.placeholder = this.searchPlaceholder;
     }
@@ -406,2 +415,12 @@
      * @Private
+     * Creates the search input.
+     */
+     _createSearchRight() {
+        this.search_right = document.createElement('input');
+        this.search_right.classList.add(SEARCH_ELEMENT);
+        this.search_right.placeholder = this.searchPlaceholder;
+    }
+
+    /**
+     * @Private
      * Deselects the option with the matching value
@@ -468,3 +487,4 @@ *
         this._createButtons();
-        this._createSearch();
+        this._createSearchLeft();
+        this._createSearchRight();
     }
@@ -540,2 +560,2 @@
 export default DualListbox;
-export {DualListbox};
+export { DualListbox };

webpack.config.js

@@ -24,3 +24,3 @@ const argv = require('yargs').argv;
     externals: [nodeExternals()],
-    target: 'node',
+    target: 'web',
 
@@ -27,0 +27,0 @@ // Use --production to optimize output.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

116808

decreased by-64.39%

Dependency count

2

increased by100%

Number of package files

37

decreased by-32.73%

Lines of code

1440

decreased by-40.84%

Dependency changes

• + Addedsass@^1.39.2

• + Added@parcel/watcher@2.5.0(transitive)

• + Added@parcel/watcher-android-arm64@2.5.0(transitive)

• + Added@parcel/watcher-darwin-arm64@2.5.0(transitive)

• + Added@parcel/watcher-darwin-x64@2.5.0(transitive)

• + Added@parcel/watcher-freebsd-x64@2.5.0(transitive)

• + Added@parcel/watcher-linux-arm-glibc@2.5.0(transitive)

• + Added@parcel/watcher-linux-arm-musl@2.5.0(transitive)

• + Added@parcel/watcher-linux-arm64-glibc@2.5.0(transitive)

• + Added@parcel/watcher-linux-arm64-musl@2.5.0(transitive)

• + Added@parcel/watcher-linux-x64-glibc@2.5.0(transitive)

• + Added@parcel/watcher-linux-x64-musl@2.5.0(transitive)

• + Added@parcel/watcher-win32-arm64@2.5.0(transitive)

• + Added@parcel/watcher-win32-ia32@2.5.0(transitive)

• + Added@parcel/watcher-win32-x64@2.5.0(transitive)

• + Addedbraces@3.0.3(transitive)

• + Addedchokidar@4.0.1(transitive)

• + Addeddetect-libc@1.0.3(transitive)

• + Addedfill-range@7.1.1(transitive)

• + Addedimmutable@5.0.3(transitive)

• + Addedis-extglob@2.1.1(transitive)

• + Addedis-glob@4.0.3(transitive)

• + Addedis-number@7.0.0(transitive)

• + Addedmicromatch@4.0.8(transitive)

• + Addednode-addon-api@7.1.1(transitive)

• + Addedpicomatch@2.3.1(transitive)

• + Addedreaddirp@4.0.2(transitive)

• + Addedsass@1.81.0(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedto-regex-range@5.0.1(transitive)