Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

dual-listbox

Package Overview
Dependencies
Maintainers
1
Versions
19
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

dual-listbox - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

63

dist/dual-listbox.js

@@ -1,62 +0,1 @@

(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];
}
})(this, 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] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = 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;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports) {
'use strict';Object.defineProperty(exports,"__esModule",{value:true});var _createClass=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);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}var CONTAINER_BLOCK='dual-listbox';var AVAILABLE_ELEMENT='dual-listbox__available';var SELECTED_ELEMENT='dual-listbox__selected';var ITEM_ELEMENT='dual-listbox__item';var SELECTED_MODIFIER='dual-listbox__item--selected';var DualListbox=function(){function DualListbox(selector){_classCallCheck(this,DualListbox);this.select=document.querySelector(selector);this.selected=[];this.available=[];this.splitSelectOptions(this.select);this.dualListbox=this.initDualListbox(this.select.parentNode);}_createClass(DualListbox,[{key:'addSelected',value:function addSelected(listItem){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();}},{key:'removeSelected',value:function removeSelected(listItem){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();}},{key:'selectOption',value:function selectOption(value){var options=this.select.options;var _iteratorNormalCompletion=true;var _didIteratorError=false;var _iteratorError=undefined;try{for(var _iterator=options[Symbol.iterator](),_step;!(_iteratorNormalCompletion=(_step=_iterator.next()).done);_iteratorNormalCompletion=true){var option=_step.value;if(option.value===value){option.selected=true;}}}catch(err){_didIteratorError=true;_iteratorError=err;}finally{try{if(!_iteratorNormalCompletion&&_iterator.return){_iterator.return();}}finally{if(_didIteratorError){throw _iteratorError;}}}}},{key:'deselectOption',value:function deselectOption(value){var options=this.select.options;var _iteratorNormalCompletion2=true;var _didIteratorError2=false;var _iteratorError2=undefined;try{for(var _iterator2=options[Symbol.iterator](),_step2;!(_iteratorNormalCompletion2=(_step2=_iterator2.next()).done);_iteratorNormalCompletion2=true){var option=_step2.value;if(option.value===value){option.selected=false;}}}catch(err){_didIteratorError2=true;_iteratorError2=err;}finally{try{if(!_iteratorNormalCompletion2&&_iterator2.return){_iterator2.return();}}finally{if(_didIteratorError2){throw _iteratorError2;}}}}},{key:'redraw',value:function redraw(){var that=this;var availebleList=this.createListbox(this.available,AVAILABLE_ELEMENT);var selectedList=this.createListbox(this.selected,SELECTED_ELEMENT);var buttons=this.createButtons();var search=document.createElement('input');search.onchange=function(){that.search(this.value);};search.onkeyup=function(){that.search(this.value);};this.dualListbox.innerHTML='';this.dualListbox.appendChild(search);this.dualListbox.appendChild(availebleList);this.dualListbox.appendChild(buttons);this.dualListbox.appendChild(selectedList);}},{key:'search',value:function search(searchString){var items=this.dualListbox.querySelectorAll('.'+ITEM_ELEMENT);items.forEach(function(item){if(searchString){if(!item.innerText.includes(searchString)){item.style.display='none';}else{item.style.display='block';}}else{item.style.display='block';}});}},{key:'initDualListbox',value:function initDualListbox(container){var dualListbox=document.createElement('div');dualListbox.classList.add(CONTAINER_BLOCK);container.insertBefore(dualListbox,this.select);this.select.style.display='none';this.redraw();return dualListbox;}},{key:'createListbox',value:function createListbox(optionList,className){var selectList=document.createElement('ul');selectList.classList.add(className);var _iteratorNormalCompletion3=true;var _didIteratorError3=false;var _iteratorError3=undefined;try{for(var _iterator3=optionList[Symbol.iterator](),_step3;!(_iteratorNormalCompletion3=(_step3=_iterator3.next()).done);_iteratorNormalCompletion3=true){var listItem=_step3.value;selectList.appendChild(this.addClickActions(listItem));}}catch(err){_didIteratorError3=true;_iteratorError3=err;}finally{try{if(!_iteratorNormalCompletion3&&_iterator3.return){_iterator3.return();}}finally{if(_didIteratorError3){throw _iteratorError3;}}}return selectList;}},{key:'addClickActions',value:function addClickActions(listItem){var that=this;listItem.ondblclick=function(){if(that.selected.indexOf(this)>-1){that.removeSelected(listItem);}else{that.addSelected(listItem);}};listItem.onclick=function(){var items=that.dualListbox.querySelectorAll('.'+ITEM_ELEMENT);items.forEach(function(value){value.classList.remove(SELECTED_MODIFIER);});if(this.classList.contains(SELECTED_MODIFIER)){this.classList.remove(SELECTED_MODIFIER);}else{this.classList.add(SELECTED_MODIFIER);}};return listItem;}},{key:'createButtons',value:function createButtons(){var that=this;var buttons=document.createElement('div');var add_button=document.createElement('button');var remove_button=document.createElement('button');add_button.innerText='Add';add_button.onclick=function(){var selected=that.dualListbox.querySelector('.'+SELECTED_MODIFIER);if(selected){that.addSelected(selected);}};remove_button.innerText='remove';remove_button.onclick=function(){var selected=that.dualListbox.querySelector('.'+SELECTED_MODIFIER);if(selected){that.removeSelected(selected);}};buttons.appendChild(add_button);buttons.appendChild(remove_button);return buttons;}},{key:'splitSelectOptions',value:function splitSelectOptions(select){var options=select.options;var _iteratorNormalCompletion4=true;var _didIteratorError4=false;var _iteratorError4=undefined;try{for(var _iterator4=options[Symbol.iterator](),_step4;!(_iteratorNormalCompletion4=(_step4=_iterator4.next()).done);_iteratorNormalCompletion4=true){var option=_step4.value;var listItem=this.createListItem(option);if(option.attributes.selected){this.selected.push(listItem);}else{this.available.push(listItem);}}}catch(err){_didIteratorError4=true;_iteratorError4=err;}finally{try{if(!_iteratorNormalCompletion4&&_iterator4.return){_iterator4.return();}}finally{if(_didIteratorError4){throw _iteratorError4;}}}}},{key:'createListItem',value:function createListItem(option){var listItem=document.createElement('li');listItem.classList.add(ITEM_ELEMENT);listItem.innerText=option.innerText;listItem.dataset.id=option.value;return listItem;}}]);return DualListbox;}();exports.default=DualListbox;exports.DualListbox=DualListbox;
/***/ }
/******/ ])
});
;
!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var i=t();for(var n in i)("object"==typeof exports?exports:e)[n]=i[n]}}(this,function(){return function(e){function t(n){if(i[n])return i[n].exports;var a=i[n]={exports:{},id:n,loaded:!1};return e[n].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var n=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),a="dual-listbox",l="dual-listbox__available",r="dual-listbox__selected",s="dual-listbox__item",o="dual-listbox__item--selected",c=function(){function e(t){i(this,e),this.select=document.querySelector(t),this.selected=[],this.available=[],this.splitSelectOptions(this.select),this.initDualListbox(this.select.parentNode)}return n(e,[{key:"addSelected",value:function(e){var t=this.available.indexOf(e);t>-1&&this.available.splice(t,1),this.selected.push(e),this.selectOption(e.dataset.id),this.redraw()}},{key:"removeSelected",value:function(e){var t=this.selected.indexOf(e);t>-1&&this.selected.splice(t,1),this.available.push(e),this.deselectOption(e.dataset.id),this.redraw()}},{key:"selectOption",value:function(e){var t=this.select.options,i=!0,n=!1,a=void 0;try{for(var l,r=t[Symbol.iterator]();!(i=(l=r.next()).done);i=!0){var s=l.value;s.value===e&&(s.selected=!0)}}catch(e){n=!0,a=e}finally{try{!i&&r.return&&r.return()}finally{if(n)throw a}}}},{key:"deselectOption",value:function(e){var t=this.select.options,i=!0,n=!1,a=void 0;try{for(var l,r=t[Symbol.iterator]();!(i=(l=r.next()).done);i=!0){var s=l.value;s.value===e&&(s.selected=!1)}}catch(e){n=!0,a=e}finally{try{!i&&r.return&&r.return()}finally{if(n)throw a}}}},{key:"redraw",value:function(){var e=this,t=this.createListbox(this.available,l),i=this.createListbox(this.selected,r),n=this.createButtons(),a=document.createElement("input");a.onchange=function(){e.search(this.value)},a.onkeyup=function(){e.search(this.value)},this.dualListbox.innerHTML="",this.dualListbox.appendChild(a),this.dualListbox.appendChild(t),this.dualListbox.appendChild(n),this.dualListbox.appendChild(i)}},{key:"search",value:function(e){this.dualListbox.querySelectorAll("."+s).forEach(function(t){e?t.innerText.includes(e)?t.style.display="block":t.style.display="none":t.style.display="block"})}},{key:"initDualListbox",value:function(e){var t=document.createElement("div");t.classList.add(a),e.insertBefore(t,this.select),this.select.style.display="none",this.dualListbox=t,this.redraw()}},{key:"createListbox",value:function(e,t){var i=document.createElement("ul");i.classList.add(t);var n=!0,a=!1,l=void 0;try{for(var r,s=e[Symbol.iterator]();!(n=(r=s.next()).done);n=!0){var o=r.value;i.appendChild(this.addClickActions(o))}}catch(e){a=!0,l=e}finally{try{!n&&s.return&&s.return()}finally{if(a)throw l}}return i}},{key:"addClickActions",value:function(e){var t=this;return e.ondblclick=function(){t.selected.indexOf(this)>-1?t.removeSelected(e):t.addSelected(e)},e.onclick=function(){t.dualListbox.querySelectorAll("."+s).forEach(function(e){e.classList.remove(o)}),this.classList.contains(o)?this.classList.remove(o):this.classList.add(o)},e}},{key:"createButtons",value:function(){var e=this,t=document.createElement("div"),i=document.createElement("button"),n=document.createElement("button");return i.innerText="Add",i.onclick=function(){var t=e.dualListbox.querySelector("."+o);t&&e.addSelected(t)},n.innerText="remove",n.onclick=function(){var t=e.dualListbox.querySelector("."+o);t&&e.removeSelected(t)},t.appendChild(i),t.appendChild(n),t}},{key:"splitSelectOptions",value:function(e){var t=e.options,i=!0,n=!1,a=void 0;try{for(var l,r=t[Symbol.iterator]();!(i=(l=r.next()).done);i=!0){var s=l.value,o=this.createListItem(s);s.attributes.selected?this.selected.push(o):this.available.push(o)}}catch(e){n=!0,a=e}finally{try{!i&&r.return&&r.return()}finally{if(n)throw a}}}},{key:"createListItem",value:function(e){var t=document.createElement("li");return t.classList.add(s),t.innerText=e.innerText,t.dataset.id=e.value,t}}]),e}();t.default=c,t.DualListbox=c}])});

2

package.json
{
"name": "dual-listbox",
"version": "0.1.0",
"version": "0.1.1",
"description": "Dual listbox for multi-select elements",

@@ -5,0 +5,0 @@ "main": "dist/dual-listbox.js",

@@ -5,3 +5,3 @@ [![Build Status](https://travis-ci.org/maykinmedia/dual-listbox.svg?branch=1.0)](https://travis-ci.org/maykinmedia/dual-listbox)

> DOM selection and manipulation using BEM (Block, Element, Modifier).
> TODO.

@@ -8,0 +8,0 @@ ## Install

@@ -19,3 +19,3 @@ /**

this.splitSelectOptions(this.select);
this.dualListbox = this.initDualListbox(this.select.parentNode);
this.initDualListbox(this.select.parentNode);
}

@@ -134,5 +134,4 @@

this.select.style.display = 'none';
this.dualListbox = dualListbox;
this.redraw();
return dualListbox;
}

@@ -239,3 +238,3 @@

return listItem
return listItem;
}

@@ -242,0 +241,0 @@ }

var paths = require('./build/paths');
var webpack = require('webpack');
// var nodeExternals = require('webpack-node-externals');
var nodeExternals = require('webpack-node-externals');

@@ -8,3 +8,3 @@

entry: './src/' + paths.packageName,
// externals: [nodeExternals()],
externals: [nodeExternals()],
target: 'node',

@@ -29,4 +29,4 @@

plugins: [
// new webpack.optimize.UglifyJsPlugin()
new webpack.optimize.UglifyJsPlugin()
]
};
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc