dual-data-picker/dist/dual-data-picker.js

## Settings editableDiv : true This use div instead input. Usefull to eliminate autocomplete feature.

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory();
	else if(typeof define === 'function' && define.amd)
		define([], factory);
	else if(typeof exports === 'object')
		exports["DualDataPicker"] = factory();
	else
		root["DualDataPicker"] = factory();
})(self, () => {
return /******/ (() => { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ({

/***/ "./src/js/app.js":
/*!***********************!*\
  !*** ./src/js/app.js ***!
  \***********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ DualDataPicker)\n/* harmony export */ });\n/* harmony import */ var _services_ui_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./services/ui.js */ \"./src/js/services/ui.js\");\n/* harmony import */ var _services_repository_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./services/repository.js */ \"./src/js/services/repository.js\");\n/* harmony import */ var _services_events_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./services/events.js */ \"./src/js/services/events.js\");\n/* harmony import */ var _services_search_engine_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./services/search-engine.js */ \"./src/js/services/search-engine.js\");\n/* harmony import */ var _services_select_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./services/select.js */ \"./src/js/services/select.js\");\n\r\n\r\n\r\n\r\n\r\n \r\n\r\nclass DualDataPicker {\r\n    constructor(selectId) {\r\n        this.Select     = new _services_select_js__WEBPACK_IMPORTED_MODULE_4__[\"default\"](selectId, this);\r\n        this.Ui         = new _services_ui_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"](selectId, this);\r\n        this.Repository = new _services_repository_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"](this);\r\n        this.Repository.loadDataFromSelect();\r\n        \r\n        this.Events         = new _services_events_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"](this);\r\n        this.SearchEngine   = new _services_search_engine_js__WEBPACK_IMPORTED_MODULE_3__[\"default\"]();\r\n\r\n        this.Ui.drawOptions();\r\n    }\r\n}\r\n\r\n \n\n//# sourceURL=webpack://DualDataPicker/./src/js/app.js?");

/***/ }),

/***/ "./src/js/models/option.js":
/*!*********************************!*\
  !*** ./src/js/models/option.js ***!
  \*********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ Option)\n/* harmony export */ });\nclass Option {\r\n\r\n    constructor(data) {\r\n        this.value = data.value;\r\n        this.label = data.label;\r\n\r\n        if (typeof data.selected == \"undefined\") {\r\n            data.selected = false;\r\n        }\r\n\r\n        this._selected = data.selected;\r\n        this._drawn = false;\r\n\r\n        this.makeHtml();\r\n    }\r\n\r\n    makeHtml() {\r\n        this.html = document.createElement(\"div\");\r\n        this.html.setAttribute(\"data-value\", this.value);\r\n        this.html.classList.add(\"dual-data-picker__option\")\r\n        this.html.innerHTML = this.label + `\r\n            <div class=\"dual-data-picker__delete\" data-value=\"`+this.value+`\">-</div>\r\n            <div class=\"dual-data-picker__right-icon\" data-value=\"`+this.value+`\">></div>\r\n        `;\r\n    }\r\n\r\n    removeHtml() {\r\n        this.html.remove();\r\n        this.drawn = false;\r\n    }\r\n\r\n    get selected() {\r\n        return this._selected;\r\n    }\r\n\r\n    set selected(v) {\r\n        this._selected = v;\r\n    }\r\n\r\n    getHtml() {\r\n        return this.html;\r\n    }\r\n\r\n    set value(v) {\r\n        this._value = v;\r\n    }\r\n\r\n    set label(v) {\r\n        this._label = v;\r\n    }\r\n\r\n\r\n    get value() {\r\n        return this._value;\r\n    }\r\n\r\n    get label() {\r\n        return this._label;\r\n    }\r\n\r\n    set drawn(v) {\r\n        this._drawn = v;\r\n    }        \r\n\r\n    get drawn() {\r\n        return this._drawn;\r\n    }    \r\n\r\n    get search() {\r\n        return this.label;\r\n    }\r\n}\n\n//# sourceURL=webpack://DualDataPicker/./src/js/models/option.js?");

/***/ }),

/***/ "./src/js/services/events.js":
/*!***********************************!*\
  !*** ./src/js/services/events.js ***!
  \***********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ Events)\n/* harmony export */ });\nclass Events {\r\n\r\n    constructor(app) { \r\n        this.app = app;\r\n        this.keyUpTm = false;\r\n        this.listen();\r\n    }\r\n\r\n    listen() {\r\n\r\n        var self = this;\r\n\r\n        let mainContainer = this.app.Ui.getMainContainer();\r\n\r\n        \r\n\r\n        mainContainer.addEventListener(\"click\", function(e) {\r\n            \r\n            let optionEl = e.target.closest(\".dual-data-picker__option\");\r\n            \r\n            if (optionEl) {\r\n                self.clickOnOption(optionEl);\r\n            }\r\n        });\r\n\r\n        this.app.Ui.searchField.addEventListener(\"keyup\", function() {\r\n            \r\n            if (self.keyUpTm != false) {\r\n                clearTimeout(self.keyUpTm);\r\n            }\r\n\r\n            self.keyUpTm = setTimeout(function() {\r\n                self.app.Repository.search = self.app.Ui.searchField.value;\r\n                self.app.Ui.redraw();\r\n            }, 200);\r\n            \r\n        });\r\n    }\r\n\r\n\r\n    clickOnOption(el) {\r\n        let value = el.getAttribute(\"data-value\");\r\n\r\n        let data = this.app.Repository.data;\r\n\r\n        for (let i = 0; i < data.length; i++) {\r\n\r\n            if (data[i].value == value) {\r\n                if(data[i].selected === true) {\r\n                    data[i].selected = false;\r\n                    this.app.Select.deselect(data[i].value);\r\n                }\r\n                else {\r\n                    data[i].selected = true;\r\n                    this.app.Select.select(data[i].value);\r\n                }\r\n            }\r\n        }\r\n\r\n        this.app.Ui.redraw();\r\n    }\r\n}\n\n//# sourceURL=webpack://DualDataPicker/./src/js/services/events.js?");

/***/ }),

/***/ "./src/js/services/repository.js":
/*!***************************************!*\
  !*** ./src/js/services/repository.js ***!
  \***************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ Repository)\n/* harmony export */ });\n/* harmony import */ var _models_option_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./../models/option.js */ \"./src/js/models/option.js\");\n\r\n\r\nclass Repository {\r\n\r\n    constructor(app) {\r\n        this.app = app;\r\n        this._search    = \"\";\r\n        this._data      = [];\r\n    }\r\n\r\n    loadDataFromSelect() {\r\n        try {\r\n            let options = this.app.Select.options;\r\n            \r\n            for (let option of options) {\r\n                \r\n                let selected = false;\r\n                if (option.selected) {\r\n                    selected = true;\r\n                }\r\n\r\n                this.data = new _models_option_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]({\r\n                    value    : option.value,\r\n                    label    : option.label,\r\n                    selected : selected\r\n                });\r\n            }    \r\n        }    \r\n        catch(e) {\r\n            console.error(\"loadDataFromSelect\", e);\r\n        }\r\n    }\r\n\r\n\r\n    set data(v) {\r\n        this._data.push(v);\r\n    }\r\n\r\n    get data() {\r\n        return this.filter(this._data);\r\n    }\r\n\r\n    set search(v) {\r\n        this._search = v;\r\n    }\r\n\r\n    get search() {\r\n        return this._search;\r\n    }\r\n\r\n    filter(data) {\r\n        let out = [];\r\n\r\n        let searchString = this.search;\r\n \r\n        if (searchString != \"\") {\r\n\r\n            this.app.SearchEngine.searchString = searchString;\r\n            this.app.SearchEngine.data   = data;\r\n            console.log(\"search\", this.app.SearchEngine);\r\n            out = this.app.SearchEngine.search();\r\n            console.log(\"search out\", out, this.app.SearchEngine);\r\n            return out;\r\n        }\r\n        else {\r\n            return data;\r\n        }\r\n    }\r\n}\n\n//# sourceURL=webpack://DualDataPicker/./src/js/services/repository.js?");

/***/ }),

/***/ "./src/js/services/search-engine.js":
/*!******************************************!*\
  !*** ./src/js/services/search-engine.js ***!
  \******************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ SearchEngine)\n/* harmony export */ });\nclass SearchEngine {\r\n    constructor() {\r\n        this._searchString = '';\r\n        this._data = [];\r\n    }\r\n\r\n    set searchString(str) {\r\n        this._searchString = (str || '').toString().toLowerCase().trim();\r\n    }\r\n\r\n    get searchString() {\r\n        return this._searchString;\r\n    }\r\n\r\n    set data(dataArray) {\r\n        this._data = Array.isArray(dataArray) ? dataArray : [];\r\n    }\r\n\r\n    get data() {\r\n        return this._data;\r\n    }\r\n\r\n    search() {\r\n        if (!this._searchString || this._searchString === '') {\r\n            return this._data;\r\n        }\r\n\r\n        let found = [];\r\n\r\n        for (let i = 0; i < this._data.length; i++) {\r\n            const item = this._data[i];\r\n            const value = (item.search || item.label || '').toString().toLowerCase();\r\n\r\n            let score = this.getScore(value, this._searchString);\r\n\r\n            if (score == 0) {\r\n                continue;\r\n            }\r\n\r\n            found.push({\r\n                original: item,\r\n                score: score\r\n            });\r\n        }\r\n\r\n        \r\n\r\n        found.sort((a, b) => b.score - a.score);\r\n\r\n        return found.map(entry => entry.original);\r\n    }\r\n\r\n    getScore(value, searchString) {\r\n        let score = 0;\r\n\r\n        const searchWords = searchString.split(/\\s+/);\r\n        const valueWords = value.split(/\\s+/);\r\n\r\n        if (value === searchString) {\r\n            score += 10000;\r\n        }\r\n\r\n        if (value.startsWith(searchString)) {\r\n            let dif = value.length - searchString.length;\r\n            score += (1000 - dif);\r\n        }\r\n\r\n        for (let i = 0; i < searchWords.length; i++) {\r\n            const word = searchWords[i];\r\n\r\n            if (valueWords.includes(word)) {\r\n                score += 100;\r\n            }\r\n\r\n            const splits = value.split(word);\r\n            if (splits.length > 1) {\r\n                score += splits.length * word.length;\r\n            }\r\n        }\r\n\r\n        return score;\r\n    }\r\n}\r\n\n\n//# sourceURL=webpack://DualDataPicker/./src/js/services/search-engine.js?");

/***/ }),

/***/ "./src/js/services/select.js":
/*!***********************************!*\
  !*** ./src/js/services/select.js ***!
  \***********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ Select)\n/* harmony export */ });\n\r\n\r\nclass Select {\r\n\r\n    constructor(selectId, app) {\r\n        this.app  = app;\r\n        \r\n        this._selectEl = false;\r\n        this._selectId = selectId;\r\n       \r\n    }\r\n\r\n    get options() {\r\n        let select = this.selectEl;\r\n            \r\n        return select.options;\r\n    }\r\n\r\n    select(v) {\r\n        this.select_deselect(v, true);\r\n    }\r\n\r\n    deselect(v) {\r\n        this.select_deselect(v, false);\r\n    }\r\n\r\n\r\n    select_deselect(v, s) {\r\n\r\n        let options = this.options;\r\n\r\n        for (let option of options) {\r\n            if (option.value == v) {\r\n                option.selected = s;\r\n            }\r\n        }\r\n    }\r\n\r\n    get selectEl() {\r\n        if (this._selectEl == false) {\r\n            this._selectEl = document.getElementById(this.selectId);\r\n        }\r\n\r\n        return this._selectEl;\r\n    }\r\n\r\n    set selectId(v) {\r\n        this._selectId = v;\r\n    }\r\n\r\n    get selectId() {\r\n        return this._selectId;\r\n    }\r\n}\n\n//# sourceURL=webpack://DualDataPicker/./src/js/services/select.js?");

/***/ }),

/***/ "./src/js/services/ui.js":
/*!*******************************!*\
  !*** ./src/js/services/ui.js ***!
  \*******************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ Ui)\n/* harmony export */ });\n\r\n\r\nclass Ui {\r\n\r\n    constructor(selectId, app) {\r\n        this.app  = app;\r\n        this.html = false;\r\n\r\n        this._selectId      = selectId;\r\n        this._selectField   = false;\r\n        this._searchField   = false;\r\n        \r\n        this._searchId       = \"\";\r\n        this._leftListId     = \"\";\r\n        this._rightListId    = \"\";\r\n        this._containerId   = \"\";\r\n        \r\n        this._leftList  = false;\r\n        this._rightList = false;\r\n\r\n        this.drawUI();\r\n    }\r\n\r\n    drawUI() {\r\n\r\n        let html = this.makeHTML();\r\n        this.insertOnPage(html);\r\n        this.hideOriginalElement();\r\n    }\r\n\r\n    insertOnPage(html) {\r\n        document.getElementById(this.selectId).insertAdjacentElement(\"afterend\", html);\r\n    }\r\n\r\n    makeHTML() {\r\n        this.html = document.createElement(\"div\");\r\n        this.html.setAttribute(\"id\", this.containerId);\r\n        this.html.classList.add(\"dual-data-picker\");\r\n\r\n        this.html.innerHTML = `\r\n            <input type=\"text\" id=\"` + this.searchId + `\" placeholder=\"Search...\" class=\"dual-data-picker__search\" />\r\n            <div class=\"dual-data-picker__cols\">\r\n                <div class=\"dual-data-picker__left\" id=\"` + this.leftListId + `\"></div>\r\n                <div class=\"dual-data-picker__right\" id=\"` + this.rightListId + `\"></div>\r\n            </div>        \r\n        `;\r\n\r\n        return this.html;\r\n    }\r\n\r\n    getMainContainer() {\r\n        return this.html;\r\n    }\r\n\r\n    hideOriginalElement() {\r\n        document.getElementById(this.selectId).style.display = \"none\"; \r\n    }\r\n\r\n    drawOptions() {\r\n        let data = this.app.Repository.data;\r\n        \r\n        for (let i = 0; i < data.length; i++) {\r\n            if (data[i].selected == false) {\r\n                this.leftList.appendChild(data[i].getHtml());\r\n            }\r\n            else {\r\n                this.rightList.appendChild(data[i].getHtml());\r\n            }\r\n        }\r\n    }\r\n\r\n    redraw() {\r\n\r\n        this.leftList.innerHTML = '';\r\n        this.rightList.innerHTML = '';\r\n\r\n        this.drawOptions();\r\n    }\r\n\r\n    set selectId(v) {\r\n        this._selectId = v;\r\n    }\r\n\r\n    get selectId() {\r\n        return this._selectId;\r\n    }\r\n\r\n    get selectField() {\r\n        \r\n        if (this._selectField == false) {\r\n            this._selectField = document.getElementById(this.selectId);\r\n        }\r\n\r\n        return this._selectField;\r\n    }\r\n\r\n    get searchId() {\r\n        if (this._searchId == \"\") {\r\n            this._searchId = this.selectId + \"_search-id\";\r\n        }\r\n\r\n        return this._searchId;\r\n    }\r\n\r\n    get searchField() {\r\n        if (this._searchField == false) {\r\n            this._searchField = document.getElementById(this.searchId);\r\n        }\r\n\r\n        return this._searchField;\r\n    }\r\n\r\n    get leftListId() {\r\n        if (this._leftListId == \"\") {\r\n            this._leftListId = this.selectId + \"_left-list-id\";\r\n        }\r\n\r\n        return this._leftListId;        \r\n    }\r\n\r\n    get rightListId() {\r\n        if (this._rightListId == \"\") {\r\n            this._rightListId = this.selectId + \"_right-list-id\";\r\n        }\r\n\r\n        return this._rightListId;        \r\n    }    \r\n\r\n    get containerId() {\r\n        if (this._containerId == \"\") {\r\n            this._containerId = this.selectId + \"_container\";\r\n        }\r\n\r\n        return this._containerId;  \r\n    }\r\n\r\n    get leftList() {\r\n        if (this._leftList == false) {\r\n            this._leftList = document.getElementById(this.leftListId);\r\n        }\r\n\r\n        return this._leftList;\r\n    }\r\n\r\n    get rightList() {\r\n        if (this._rightList == false) {\r\n            this._rightList = document.getElementById(this.rightListId);\r\n        }\r\n\r\n        return this._rightList;\r\n    }    \r\n}\n\n//# sourceURL=webpack://DualDataPicker/./src/js/services/ui.js?");

/***/ })

/******/ 	});
/************************************************************************/
/******/ 	// The module cache
/******/ 	var __webpack_module_cache__ = {};
/******/ 	
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/ 		// Check if module is in cache
/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
/******/ 		if (cachedModule !== undefined) {
/******/ 			return cachedModule.exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = __webpack_module_cache__[moduleId] = {
/******/ 			// no module.id needed
/******/ 			// no module.loaded needed
/******/ 			exports: {}
/******/ 		};
/******/ 	
/******/ 		// Execute the module function
/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/ 	
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/ 	
/************************************************************************/
/******/ 	/* webpack/runtime/define property getters */
/******/ 	(() => {
/******/ 		// define getter functions for harmony exports
/******/ 		__webpack_require__.d = (exports, definition) => {
/******/ 			for(var key in definition) {
/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ 				}
/******/ 			}
/******/ 		};
/******/ 	})();
/******/ 	
/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
/******/ 	(() => {
/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ 	})();
/******/ 	
/******/ 	/* webpack/runtime/make namespace object */
/******/ 	(() => {
/******/ 		// define __esModule on exports
/******/ 		__webpack_require__.r = (exports) => {
/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 			}
/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
/******/ 		};
/******/ 	})();
/******/ 	
/************************************************************************/
/******/ 	
/******/ 	// startup
/******/ 	// Load entry module and return exports
/******/ 	// This entry module can't be inlined because the eval devtool is used.
/******/ 	var __webpack_exports__ = __webpack_require__("./src/js/app.js");
/******/ 	
/******/ 	return __webpack_exports__;
/******/ })()
;
});