Advertisement
Guest User

Untitled

a guest
Mar 29th, 2017
61
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function solve() {
  2.  
  3.     return function(selector, defaultLeft, defaultRight) {
  4.  
  5.         var itemsLeft = [];
  6.         var itemsRight = [];
  7.  
  8.         if(Array.isArray(defaultLeft) && defaultLeft.length > 0) {
  9.             if(isArrayOfStrings(defaultLeft)) {
  10.                 itemsLeft = defaultLeft;
  11.             }
  12.         }
  13.  
  14.         if(Array.isArray(defaultRight) && defaultRight.length > 0) {
  15.             if(isArrayOfStrings(defaultRight)) {
  16.                 itemsRight = defaultRight;
  17.             }
  18.         }
  19.  
  20.         var root = document.querySelector(selector);
  21.         var div = document.createElement('div');
  22.         var input = document.createElement('input');
  23.         var button = document.createElement('button');
  24.         var label = document.createElement('label');
  25.         var ol = document.createElement('ol');
  26.         var li = document.createElement('li');
  27.         var img = document.createElement('img');
  28.  
  29.         var container = div.cloneNode();
  30.  
  31.         var leftCol = div.cloneNode();
  32.         var leftSelect = div.cloneNode();
  33.         var leftRadio = input.cloneNode();
  34.         var leftLabel = label.cloneNode();
  35.  
  36.         var rightCol = div.cloneNode();
  37.         var rightSelect = div.cloneNode();
  38.         var rightRadio = input.cloneNode();
  39.         var rightLabel = label.cloneNode();
  40.  
  41.         var inputBox = input.cloneNode();
  42.         var inputBtn = button.cloneNode();
  43.  
  44.         container.className = 'column-container';
  45.  
  46.         leftCol.className = 'column';
  47.         leftSelect.className = 'select';
  48.         setAttributes(leftRadio, {'type' : 'radio', 'name' : 'column-select', 'id' : 'select-left-column', 'checked' : 'checked'});
  49.         leftLabel.setAttribute('for', 'select-left-column');
  50.         leftLabel.innerHTML = 'Add here';
  51.  
  52.         rightCol.className = leftCol.className;
  53.         rightSelect.className = leftSelect.className;
  54.         setAttributes(rightRadio, {'type' : 'radio', 'name' : 'column-select', 'id' : 'select-right-column'});
  55.         rightLabel.setAttribute('for', 'select-right-column');
  56.         rightLabel.innerHTML = leftLabel.innerHTML;
  57.  
  58.         setAttributes(inputBox, {'size' : '40', 'autofocus' : ''});
  59.         inputBtn.innerHTML = 'Add';
  60.  
  61.         leftSelect.appendChild(leftRadio);
  62.         leftSelect.appendChild(leftLabel);
  63.         leftCol.appendChild(leftSelect);
  64.         container.appendChild(leftCol);
  65.  
  66.         rightSelect.appendChild(rightRadio);
  67.         rightSelect.appendChild(rightLabel);
  68.         rightCol.appendChild(rightSelect);
  69.         container.appendChild(rightCol);
  70.  
  71.         root.appendChild(container);
  72.         root.appendChild(inputBox);
  73.         root.appendChild(inputBtn);
  74.  
  75.         inputBtn.addEventListener('click', addItem);
  76.         document.addEventListener('keydown', handleKeydown);
  77.  
  78.         buildLists();
  79.  
  80.         function handleKeydown(event) {
  81.             var key = event.keyCode || event.which;
  82.             if(key === 13) {
  83.                 addItem(event);
  84.             }
  85.         }
  86.  
  87.         function addItem(event) {
  88.             if(isInputEmpty()) {
  89.                 return;
  90.             }
  91.            
  92.             var item = inputBox.value;
  93.             item = item.trim();
  94.  
  95.             if(item === '' || item.length < 1 || item === null) {
  96.                 return;
  97.             }
  98.  
  99.             if(whichRadioIsChecked() === 0) {
  100.                 itemsLeft.push(item);
  101.             } else {
  102.                 itemsRight.push(item);
  103.             }
  104.  
  105.             buildLists();
  106.             clearInput();
  107.         }
  108.  
  109.         function deleteItem(event) {
  110.             var targetLi = event.target.parentNode;
  111.             var targetOl = event.target.parentNode.parentNode;
  112.  
  113.             if(targetOl.id === 'left_list') {
  114.                 inputBox.value = itemsLeft[parseInt(targetLi.id)];
  115.                 itemsLeft.splice(parseInt(targetLi.id),1);
  116.             } else if(targetOl.id === 'right_list') {
  117.                 inputBox.value = itemsRight[parseInt(targetLi.id)];
  118.                 itemsRight.splice(parseInt(targetLi.id),1);
  119.             }
  120.  
  121.             buildLists();
  122.         }
  123.  
  124.         function buildLists() {
  125.             var columns = document.getElementsByClassName('column');
  126.            
  127.             for (var i = 0; i < columns.length; i += 1) {
  128.                 clearList(i);
  129.                 buildList(i);
  130.             }
  131.         }
  132.  
  133.         function buildList(whichOne) {
  134.             var data;
  135.             var list = ol.cloneNode();
  136.  
  137.             if(whichOne === 0) {
  138.                 data = itemsLeft;
  139.                 list.setAttribute('id', 'left_list');
  140.             } else if(whichOne === 1) {
  141.                 data = itemsRight;
  142.                 list.setAttribute('id', 'right_list');
  143.             } else {
  144.                 return;
  145.             }
  146.  
  147.             data.forEach((item, index) => {
  148.                 var entry = li.cloneNode();
  149.                 entry.innerHTML = item;
  150.                 entry.className = 'entry';
  151.  
  152.                 if(whichOne === 0) {
  153.                     entry.setAttribute('id', index + 'entryLeft');
  154.                 } else if (whichOne === 1) {
  155.                     entry.setAttribute('id', index + 'entryRight');
  156.                 }
  157.  
  158.                 var deleteBtn = img.cloneNode();
  159.                 deleteBtn.className = 'delete';
  160.                 deleteBtn.setAttribute('src', 'imgs/Remove-icon.png');
  161.                 deleteBtn.addEventListener('click', deleteItem);
  162.  
  163.                 entry.appendChild(deleteBtn);
  164.                 list.appendChild(entry);
  165.             });
  166.  
  167.             var columns = document.getElementsByClassName('column');
  168.             columns[whichOne].appendChild(list);
  169.         }
  170.  
  171.         function clearList(whichOne) {
  172.             if(whichOne !== 1 && whichOne !== 0) {
  173.                 return;
  174.             }
  175.  
  176.             var columns = document.getElementsByClassName('column');
  177.             var column = columns[whichOne];
  178.  
  179.             for(var n = 0; n < column.childNodes.length; n += 1) {
  180.                 if (column.childNodes[n].tagName === 'OL') {
  181.                     column.removeChild(column.childNodes[n]);
  182.                 }
  183.             }
  184.         }
  185.  
  186.         function isInputEmpty() {
  187.             if(inputBox.value === '' || inputBox.value.length < 1 || inputBox.value === null) {
  188.                 return true;
  189.             }
  190.             return false;
  191.         }
  192.  
  193.         function clearInput() {
  194.             inputBox.value = '';
  195.         }
  196.  
  197.         function isArrayOfStrings(array) {
  198.             array.forEach(item => {
  199.                 if(typeof(item) !== 'string') {
  200.                     return false;
  201.                 }
  202.             });
  203.             return true;
  204.         }
  205.  
  206.         function whichRadioIsChecked() { // returns: 0 if left, 1 if right
  207.             if(document.getElementById('select-left-column').checked) {
  208.                 return 0;
  209.             } else if(document.getElementById('select-right-column').checked) {
  210.                 return 1;
  211.             }          
  212.         }
  213.  
  214.         function setAttributes(DOMelement, attributes) {
  215.             for(var key in attributes) {
  216.                 DOMelement.setAttribute(key, attributes[key]);
  217.             }
  218.         }
  219.  
  220.     };
  221. }
  222.  
  223. // SUBMIT THE CODE ABOVE THIS LINE
  224.  
  225. if(typeof module !== 'undefined') {
  226.     module.exports = solve;
  227. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement