Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- function solve() {
- return function(selector, defaultLeft, defaultRight) {
- var itemsLeft = [];
- var itemsRight = [];
- if(Array.isArray(defaultLeft) && defaultLeft.length > 0) {
- if(isArrayOfStrings(defaultLeft)) {
- itemsLeft = defaultLeft;
- }
- }
- if(Array.isArray(defaultRight) && defaultRight.length > 0) {
- if(isArrayOfStrings(defaultRight)) {
- itemsRight = defaultRight;
- }
- }
- var root = document.querySelector(selector);
- var div = document.createElement('div');
- var input = document.createElement('input');
- var button = document.createElement('button');
- var label = document.createElement('label');
- var ol = document.createElement('ol');
- var li = document.createElement('li');
- var img = document.createElement('img');
- var container = div.cloneNode();
- var leftCol = div.cloneNode();
- var leftSelect = div.cloneNode();
- var leftRadio = input.cloneNode();
- var leftLabel = label.cloneNode();
- var rightCol = div.cloneNode();
- var rightSelect = div.cloneNode();
- var rightRadio = input.cloneNode();
- var rightLabel = label.cloneNode();
- var inputBox = input.cloneNode();
- var inputBtn = button.cloneNode();
- container.className = 'column-container';
- leftCol.className = 'column';
- leftSelect.className = 'select';
- setAttributes(leftRadio, {'type' : 'radio', 'name' : 'column-select', 'id' : 'select-left-column', 'checked' : 'checked'});
- leftLabel.setAttribute('for', 'select-left-column');
- leftLabel.innerHTML = 'Add here';
- rightCol.className = leftCol.className;
- rightSelect.className = leftSelect.className;
- setAttributes(rightRadio, {'type' : 'radio', 'name' : 'column-select', 'id' : 'select-right-column'});
- rightLabel.setAttribute('for', 'select-right-column');
- rightLabel.innerHTML = leftLabel.innerHTML;
- setAttributes(inputBox, {'size' : '40', 'autofocus' : ''});
- inputBtn.innerHTML = 'Add';
- leftSelect.appendChild(leftRadio);
- leftSelect.appendChild(leftLabel);
- leftCol.appendChild(leftSelect);
- container.appendChild(leftCol);
- rightSelect.appendChild(rightRadio);
- rightSelect.appendChild(rightLabel);
- rightCol.appendChild(rightSelect);
- container.appendChild(rightCol);
- root.appendChild(container);
- root.appendChild(inputBox);
- root.appendChild(inputBtn);
- inputBtn.addEventListener('click', addItem);
- document.addEventListener('keydown', handleKeydown);
- buildLists();
- function handleKeydown(event) {
- var key = event.keyCode || event.which;
- if(key === 13) {
- addItem(event);
- }
- }
- function addItem(event) {
- if(isInputEmpty()) {
- return;
- }
- var item = inputBox.value;
- item = item.trim();
- if(item === '' || item.length < 1 || item === null) {
- return;
- }
- if(whichRadioIsChecked() === 0) {
- itemsLeft.push(item);
- } else {
- itemsRight.push(item);
- }
- buildLists();
- clearInput();
- }
- function deleteItem(event) {
- var targetLi = event.target.parentNode;
- var targetOl = event.target.parentNode.parentNode;
- if(targetOl.id === 'left_list') {
- inputBox.value = itemsLeft[parseInt(targetLi.id)];
- itemsLeft.splice(parseInt(targetLi.id),1);
- } else if(targetOl.id === 'right_list') {
- inputBox.value = itemsRight[parseInt(targetLi.id)];
- itemsRight.splice(parseInt(targetLi.id),1);
- }
- buildLists();
- }
- function buildLists() {
- var columns = document.getElementsByClassName('column');
- for (var i = 0; i < columns.length; i += 1) {
- clearList(i);
- buildList(i);
- }
- }
- function buildList(whichOne) {
- var data;
- var list = ol.cloneNode();
- if(whichOne === 0) {
- data = itemsLeft;
- list.setAttribute('id', 'left_list');
- } else if(whichOne === 1) {
- data = itemsRight;
- list.setAttribute('id', 'right_list');
- } else {
- return;
- }
- data.forEach((item, index) => {
- var entry = li.cloneNode();
- entry.innerHTML = item;
- entry.className = 'entry';
- if(whichOne === 0) {
- entry.setAttribute('id', index + 'entryLeft');
- } else if (whichOne === 1) {
- entry.setAttribute('id', index + 'entryRight');
- }
- var deleteBtn = img.cloneNode();
- deleteBtn.className = 'delete';
- deleteBtn.setAttribute('src', 'imgs/Remove-icon.png');
- deleteBtn.addEventListener('click', deleteItem);
- entry.appendChild(deleteBtn);
- list.appendChild(entry);
- });
- var columns = document.getElementsByClassName('column');
- columns[whichOne].appendChild(list);
- }
- function clearList(whichOne) {
- if(whichOne !== 1 && whichOne !== 0) {
- return;
- }
- var columns = document.getElementsByClassName('column');
- var column = columns[whichOne];
- for(var n = 0; n < column.childNodes.length; n += 1) {
- if (column.childNodes[n].tagName === 'OL') {
- column.removeChild(column.childNodes[n]);
- }
- }
- }
- function isInputEmpty() {
- if(inputBox.value === '' || inputBox.value.length < 1 || inputBox.value === null) {
- return true;
- }
- return false;
- }
- function clearInput() {
- inputBox.value = '';
- }
- function isArrayOfStrings(array) {
- array.forEach(item => {
- if(typeof(item) !== 'string') {
- return false;
- }
- });
- return true;
- }
- function whichRadioIsChecked() { // returns: 0 if left, 1 if right
- if(document.getElementById('select-left-column').checked) {
- return 0;
- } else if(document.getElementById('select-right-column').checked) {
- return 1;
- }
- }
- function setAttributes(DOMelement, attributes) {
- for(var key in attributes) {
- DOMelement.setAttribute(key, attributes[key]);
- }
- }
- };
- }
- // SUBMIT THE CODE ABOVE THIS LINE
- if(typeof module !== 'undefined') {
- module.exports = solve;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement