dual-listbox - npm Package Compare versions

Comparing version 1.3.0 to 1.3.1

dist/dual-listbox.js

@@ -1,2 +0,114 @@
-!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 n in i)("object"==typeof exports?exports:t)[n]=i[n]}}(global,(function(){return function(t){var e={};function i(n){if(e[n])return e[n].exports;var s=e[n]={i:n,l:!1,exports:{}};return t[n].call(s.exports,s,s.exports,i),s.l=!0,s.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var s in t)i.d(n,s,function(e){return t[e]}.bind(null,s));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=0)}([function(t,e,i){"use strict";function n(t){return(n="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})(t)}function s(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}i.r(e),i.d(e,"DualListbox",(function(){return a}));var l="dual-listbox__item--selected",a=function(){function t(e){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.setDefaults(),this.selected=[],this.available=[],t.isDomElement(e)?this.select=e:this.select=document.querySelector(e),this._initOptions(i),this._initReusableElements(),this._splitOptions(this.select.options),void 0!==i.options&&this._splitOptions(i.options),this._buildDualListbox(this.select.parentNode),this._addActions(),this.redraw()}var e,i,a;return e=t,a=[{key:"isDomElement",value:function(t){return"object"===("undefined"==typeof HTMLElement?"undefined":n(HTMLElement))?t instanceof HTMLElement:t&&"object"===n(t)&&null!==t&&1===t.nodeType&&"string"==typeof t.nodeName}}],(i=[{key:"setDefaults",value:function(){this.addEvent=null,this.removeEvent=null,this.availableTitle="Available options",this.selectedTitle="Selected options",this.showAddButton=!0,this.addButtonText="add",this.showRemoveButton=!0,this.removeButtonText="remove",this.showAddAllButton=!0,this.addAllButtonText="add all",this.showRemoveAllButton=!0,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,i=this.available.indexOf(t);i>-1&&(this.available.splice(i,1),this.selected.push(t),this._selectOption(t.dataset.id),this.redraw(),setTimeout((function(){var i=document.createEvent("HTMLEvents");i.initEvent("added",!1,!0),i.addedElement=t,e.dualListbox.dispatchEvent(i)}),0))}},{key:"redraw",value:function(){this.updateAvailableListbox(),this.updateSelectedListbox()}},{key:"removeSelected",value:function(t){var e=this,i=this.selected.indexOf(t);i>-1&&(this.selected.splice(i,1),this.available.push(t),this._deselectOption(t.dataset.id),this.redraw(),setTimeout((function(){var i=document.createEvent("HTMLEvents");i.initEvent("removed",!1,!0),i.removedElement=t,e.dualListbox.dispatchEvent(i)}),0))}},{key:"searchLists",value:function(t,e){for(var i=e.querySelectorAll(".".concat("dual-listbox__item")),n=t.toLowerCase(),s=0;s<i.length;s++){var l=i[s];-1===l.textContent.toLowerCase().indexOf(n)?l.style.display="none":l.style.display="list-item"}}},{key:"updateAvailableListbox",value:function(){this._updateListbox(this.availableList,this.available)}},{key:"updateSelectedListbox",value:function(){this._updateListbox(this.selectedList,this.selected)}},{key:"_actionAllSelected",value:function(t){var e=this;t.preventDefault(),this.available.filter((function(t){return"none"!==t.style.display})).forEach((function(t){return e.addSelected(t)}))}},{key:"_updateListbox",value:function(t,e){for(;t.firstChild;)t.removeChild(t.firstChild);for(var i=0;i<e.length;i++){var n=e[i];t.appendChild(n)}}},{key:"_actionItemSelected",value:function(t){t.preventDefault();var e=this.dualListbox.querySelector(".".concat(l));e&&this.addSelected(e)}},{key:"_actionAllDeselected",value:function(t){var e=this;t.preventDefault(),this.selected.filter((function(t){return"none"!==t.style.display})).forEach((function(t){return e.removeSelected(t)}))}},{key:"_actionItemDeselected",value:function(t){t.preventDefault();var e=this.dualListbox.querySelector(".".concat(l));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 n=e.querySelectorAll(".".concat("dual-listbox__item")),s=0;s<n.length;s++){var a=n[s];a!==t&&a.classList.remove(l)}t.classList.contains(l)?t.classList.remove(l):t.classList.add(l)}},{key:"_addActions",value:function(){this._addButtonActions(),this._addSearchActions()}},{key:"_addButtonActions",value:function(){var t=this;this.add_all_button.addEventListener("click",(function(e){return t._actionAllSelected(e)})),this.add_button.addEventListener("click",(function(e){return t._actionItemSelected(e)})),this.remove_button.addEventListener("click",(function(e){return t._actionItemDeselected(e)})),this.remove_all_button.addEventListener("click",(function(e){return t._actionAllDeselected(e)}))}},{key:"_addClickActions",value:function(t){var e=this;return t.addEventListener("dblclick",(function(i){return e._actionItemDoubleClick(t,i)})),t.addEventListener("click",(function(i){return e._actionItemClick(t,e.dualListbox,i)})),t}},{key:"_addSearchActions",value:function(){var t=this;this.search.addEventListener("change",(function(e){return t.searchLists(e.target.value,t.dualListbox)})),this.search.addEventListener("keyup",(function(e){return t.searchLists(e.target.value,t.dualListbox)}))}},{key:"_buildDualListbox",value:function(t){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),t.insertBefore(this.dualListbox,this.select)}},{key:"_createList",value:function(t,e){var i=document.createElement("div");return i.appendChild(t),i.appendChild(e),i}},{key:"_createButtons",value:function(){this.buttons=document.createElement("div"),this.buttons.classList.add("dual-listbox__buttons"),this.add_all_button=document.createElement("button"),this.add_all_button.classList.add("dual-listbox__button"),this.add_all_button.innerHTML=this.addAllButtonText,this.add_button=document.createElement("button"),this.add_button.classList.add("dual-listbox__button"),this.add_button.innerHTML=this.addButtonText,this.remove_button=document.createElement("button"),this.remove_button.classList.add("dual-listbox__button"),this.remove_button.innerHTML=this.removeButtonText,this.remove_all_button=document.createElement("button"),this.remove_all_button.classList.add("dual-listbox__button"),this.remove_all_button.innerHTML=this.removeAllButtonText,this.showAddAllButton&&this.buttons.appendChild(this.add_all_button),this.showAddButton&&this.buttons.appendChild(this.add_button),this.showRemoveButton&&this.buttons.appendChild(this.remove_button),this.showRemoveAllButton&&this.buttons.appendChild(this.remove_all_button)}},{key:"_createListItem",value:function(t){var e=document.createElement("li");return e.classList.add("dual-listbox__item"),e.innerHTML=t.text,e.dataset.id=t.value,this._addClickActions(e),e}},{key:"_createSearch",value:function(){this.search=document.createElement("input"),this.search.classList.add("dual-listbox__search"),this.search.placeholder=this.searchPlaceholder}},{key:"_deselectOption",value:function(t){for(var e=this.select.options,i=0;i<e.length;i++){var n=e[i];n.value===t&&(n.selected=!1,n.removeAttribute("selected"))}this.removeEvent&&this.removeEvent(t)}},{key:"_initOptions",value:function(t){for(var e in t)t.hasOwnProperty(e)&&(this[e]=t[e])}},{key:"_initReusableElements",value:function(){this.dualListbox=document.createElement("div"),this.dualListbox.classList.add("dual-listbox"),this.select.id&&this.dualListbox.classList.add(this.select.id),this.dualListBoxContainer=document.createElement("div"),this.dualListBoxContainer.classList.add("dual-listbox__container"),this.availableList=document.createElement("ul"),this.availableList.classList.add("dual-listbox__available"),this.selectedList=document.createElement("ul"),this.selectedList.classList.add("dual-listbox__selected"),this.availableListTitle=document.createElement("div"),this.availableListTitle.classList.add("dual-listbox__title"),this.availableListTitle.innerText=this.availableTitle,this.selectedListTitle=document.createElement("div"),this.selectedListTitle.classList.add("dual-listbox__title"),this.selectedListTitle.innerText=this.selectedTitle,this._createButtons(),this._createSearch()}},{key:"_selectOption",value:function(t){for(var e=this.select.options,i=0;i<e.length;i++){var n=e[i];n.value===t&&(n.selected=!0,n.setAttribute("selected",""))}this.addEvent&&this.addEvent(t)}},{key:"_splitOptions",value:function(e){for(var i=0;i<e.length;i++){var n=e[i];t.isDomElement(n)?this._addOption({text:n.innerHTML,value:n.value,selected:n.attributes.selected}):this._addOption(n)}}},{key:"_addOption",value:function(t){var e=this._createListItem(t);t.selected?this.selected.push(e):this.available.push(e)}}])&&s(e.prototype,i),a&&s(e,a),t}();e.default=a}])}));
-//# sourceMappingURL=dual-listbox.js.map
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define([], factory);
+	else {
+		var a = factory();
+		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
+	}
+})(global, function() {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = "./src/dual-listbox.js");
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ "./src/dual-listbox.js":
+/*!*****************************!*\
+  !*** ./src/dual-listbox.js ***!
+  \*****************************/
+/*! exports provided: default, DualListbox */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* 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);
+
+/***/ })
+
+/******/ });
+});

karma.conf.js

@@ -69,13 +69,13 @@ const clone = require('clone');
         },
-        // sl_safari: {
-        //     base: 'SauceLabs',
-        //     browserName: 'safari',
-        //     platform: 'macOS 10.14',
-        //     version: '12.0'
-        // },
+        sl_safari_1: {
+            base: 'SauceLabs',
+            browserName: 'safari',
+            platform: 'macOS 11.00',
+            version: 'latest'
+        },
         sl_safari_2: {
             base: 'SauceLabs',
             browserName: 'safari',
-            platform: 'OS X 10.13',
-            version: '11.1'
+            platform: 'macOS 10.13',
+            version: '12.1'
         },
@@ -94,8 +94,2 @@ sl_firefox: {
         },
-        sl_ie_11: {
-            base: 'SauceLabs',
-            browserName: 'internet explorer',
-            platform: 'Windows 8.1',
-            version: '11'
-        }
     }
@@ -127,23 +121,17 @@
             testName: 'dual-listbox browser testing',
-            // startConnect: false,
             username: process.env.SAUCE_USERNAME,
             accessKey: process.env.SAUCE_ACCESS_KEY,
-            tunnelIdentifier: process.env.TRAVIS_JOB_NUMBER,
+            tunnelIdentifier: process.env.GITHUB_RUN_ID,
         },
 
-
-        webpackMiddleware: {
-            noInfo: true
-        },
-
+        autoWatch: process.env.CI ? false: true,
+        singleRun: process.env.CI ? true: false,
         browserNoActivityTimeout: 200000,
         captureTimeout: 200000,
-        colors: true,
         concurrency: 5,
         customLaunchers: customLaunchers,
         retryLimit: 5,
-        singleRun: false,
 
-        browsers: (process.env.TRAVIS) ? Object.keys(customLaunchers) : ['Chrome', 'Firefox'],
-        reporters: (process.env.TRAVIS) ? ['spec', 'coverage', 'saucelabs', 'coveralls'] : ['spec', 'coverage'],
+        browsers: (process.env.CI) ? Object.keys(customLaunchers) : ['Chrome', 'Firefox'],
+        reporters: (process.env.CI) ? ['spec', 'coverage', 'saucelabs', 'coveralls'] : ['spec', 'coverage'],
 
@@ -150,0 +138,0 @@ specReporter: {

package.json

 {
     "name": "dual-listbox",
-    "version": "1.3.0",
+    "version": "1.3.1",
     "description": "Dual listbox for multi-select elements",
@@ -10,3 +10,3 @@ "main": "dist/dual-listbox.js",
     "dependencies": {
-        "jshint": "^2.10.2"
+        "jshint": "^2.12.0"
     },
@@ -35,4 +35,5 @@ "devDependencies": {
         "jshint-stylish": "latest",
-        "karma": "latest",
+        "karma": "^5.2.3",
         "karma-chrome-launcher": "latest",
+        "karma-cli": "latest",
         "karma-coverage": "latest",
@@ -45,12 +46,14 @@ "karma-coveralls": "latest",
         "karma-jasmine-ajax": "latest",
-        "karma-sauce-launcher": "^1.2.0",
+        "karma-sauce-launcher": "latest",
         "karma-spec-reporter": "latest",
         "karma-webpack": "latest",
-        "webpack": "latest",
+        "postcss": "latest",
+        "webpack": "4.46.0",
         "webpack-cli": "latest",
         "webpack-node-externals": "latest",
-        "webpack-stream": "latest"
+        "webpack-stream": "^6.1.2"
     },
     "scripts": {
-        "test": "gulp lint && gulp test"
+        "test": "gulp test",
+        "lint": "gulp lint"
     },
@@ -57,0 +60,0 @@ "repository": {

src/dual-listbox.js

@@ -341,29 +341,31 @@ const MAIN_BLOCK = 'dual-listbox';
         this.add_all_button = document.createElement('button');
-        this.add_all_button.classList.add(BUTTON_ELEMENT);
         this.add_all_button.innerHTML = this.addAllButtonText;
 
         this.add_button = document.createElement('button');
-        this.add_button.classList.add(BUTTON_ELEMENT);
         this.add_button.innerHTML = this.addButtonText;
 
         this.remove_button = document.createElement('button');
-        this.remove_button.classList.add(BUTTON_ELEMENT);
         this.remove_button.innerHTML = this.removeButtonText;
 
         this.remove_all_button = document.createElement('button');
-        this.remove_all_button.classList.add(BUTTON_ELEMENT);
         this.remove_all_button.innerHTML = this.removeAllButtonText;
 
-        if(this.showAddAllButton) {
-            this.buttons.appendChild(this.add_all_button);
+        const options = {
+            showAddAllButton: this.add_all_button,
+            showAddButton: this.add_button,
+            showRemoveButton: this.remove_button,
+            showRemoveAllButton: this.remove_all_button,
         }
-        if(this.showAddButton) {
-            this.buttons.appendChild(this.add_button);
+
+        for (let optionName in options) {
+            const option = this[optionName]
+            const button = options[optionName]
+
+            button.setAttribute('type', 'button');
+            button.classList.add(BUTTON_ELEMENT);
+
+            if (option) {
+                this.buttons.appendChild(button);
+            }
         }
-        if(this.showRemoveButton) {
-            this.buttons.appendChild(this.remove_button);
-        }
-        if(this.showRemoveAllButton) {
-            this.buttons.appendChild(this.remove_all_button);
-        }
     }
@@ -370,0 +372,0 @@

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

328033

increased by137.77%

Number of package files

55

increased by41.03%

Lines of code

2434

increased by84.25%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

39

increased by5.41%

Number of low supply chain risk alerts

12

increased by20%

Dependency changes

• Updatedjshint@^2.12.0