Advertisement
Guest User

Untitled

a guest
Mar 29th, 2017
109
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function solve() {
  2.     return function(selector, defaultLeft, defaultRight) {
  3.         var root = document.querySelector(selector);
  4.         var container = document.createElement("div");
  5.         container.className = "column-container";
  6.         var leftColumn = document.createElement("div");
  7.         leftColumn.className = "column";
  8.         var rightColumn = leftColumn.cloneNode(true);
  9.         var selectDivLeft = document.createElement("div");
  10.         selectDivLeft.className = "select";
  11.         var selectDivRight = selectDivLeft.cloneNode(true);
  12.         var radioButtonLeft = document.createElement("input");
  13.         radioButtonLeft.type = "radio";
  14.         radioButtonLeft.name = "column-select";
  15.         radioButtonLeft.id = "select-left-column";
  16.         radioButtonLeft.checked = true;
  17.         var radioButtonRight = document.createElement("input");
  18.         radioButtonRight.type = "radio";
  19.         radioButtonRight.name = "column-select";
  20.         radioButtonRight.id = "select-right-column";
  21.         var labelLeft = document.createElement("label");
  22.         labelLeft.htmlFor = "select-left-column";
  23.         labelLeft.innerHTML = "Add here";
  24.         var labelRight = document.createElement("label");
  25.         labelRight.htmlFor = "select-right-column";
  26.         labelRight.innerHTML = "Add here";
  27.         var list = document.createElement("ol");
  28.  
  29.         selectDivLeft.appendChild(radioButtonLeft);
  30.         selectDivLeft.appendChild(labelLeft);
  31.         selectDivRight.appendChild(radioButtonRight);
  32.         selectDivRight.appendChild(labelRight);
  33.         leftColumn.appendChild(selectDivLeft);
  34.         leftColumn.appendChild(list);
  35.         rightColumn.appendChild(selectDivRight);
  36.         rightColumn.appendChild(list.cloneNode(true));
  37.         container.appendChild(leftColumn);
  38.         container.appendChild(rightColumn);
  39.         var input = document.createElement("input");
  40.         input.size = 40;
  41.         input.autofocus = true;
  42.         var button = document.createElement("button");
  43.         button.innerHTML = "Add";
  44.         root.appendChild(container);
  45.         root.appendChild(input);
  46.         root.appendChild(button);
  47.         var frag = document.createDocumentFragment();
  48.         var li = document.createElement("li");
  49.         li.className = "entry";
  50.         var image = document.createElement("img");
  51.         image.className = "delete";
  52.         image.src = "imgs/Remove-icon.png";
  53.  
  54.         if (!String.prototype.trim) {
  55.             String.prototype.trim = function() {
  56.                 return this.replace(/^\s+|\s+$/g, '');
  57.             };
  58.         }
  59.  
  60.         function generateListValues(arr) {
  61.             for (var index = 0; index < arr.length; index += 1) {
  62.                 var currentLi = li.cloneNode(true);
  63.                 var currentImage = image.cloneNode(true);
  64.                 var currentText = document.createTextNode(arr[index]);
  65.                 currentLi.appendChild(currentImage);
  66.                 currentLi.appendChild(currentText);
  67.                 frag.appendChild(currentLi);
  68.             }
  69.  
  70.             return frag;
  71.         }
  72.  
  73.         function addItem(text) {
  74.             if (!text || text.trim().length === 0) {
  75.                 return;
  76.             }
  77.  
  78.             var newLi = li.cloneNode(true);
  79.             var newImage = image.cloneNode(true);
  80.             var newText = document.createTextNode(text.trim());
  81.             newLi.appendChild(newImage);
  82.             newLi.appendChild(newText);
  83.             if (radioButtonLeft.checked) {
  84.                 leftColumn.lastChild.appendChild(newLi);
  85.             } else {
  86.                 rightColumn.lastChild.appendChild(newLi);
  87.             }
  88.  
  89.             input.value = "";
  90.         }
  91.  
  92.         if (defaultLeft) {
  93.             var leftFrag = generateListValues(defaultLeft);
  94.             leftColumn.lastElementChild.appendChild(leftFrag);
  95.         }
  96.  
  97.         if (defaultRight) {
  98.             var rightFrag = generateListValues(defaultRight);
  99.             rightColumn.lastElementChild.appendChild(rightFrag);
  100.         }
  101.  
  102.         button.addEventListener("click", function() {
  103.             var inputValue = input.value;
  104.             addItem(inputValue);
  105.         });
  106.  
  107.         container.addEventListener("click", function(ev) {
  108.             if (ev.target.tagName === "IMG") {
  109.                 var itemToRemove = ev.target.parentNode;
  110.                 var textForInput = itemToRemove.lastChild.nodeValue;
  111.                 itemToRemove.parentNode.removeChild(itemToRemove);
  112.                 input.value = textForInput;
  113.             }
  114.         });
  115.     };
  116. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement