simple-ui-builder - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

package.json

 {
   "name": "simple-ui-builder",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Build user interface like Lego bricks. UI.input(), UI.button(cb), UI.select(arr) etc. For lazy guys as I am.",
@@ -5,0 +5,0 @@ "main": "ui.js",

ui.js

@@ -20,3 +20,3 @@ /**
 
-    if((typeof params == "function") && (typeof cb == "object")) {
+    if ((typeof params == "function") && (typeof cb == "object")) {
       var temp = params;
@@ -43,3 +43,3 @@ params = cb;
 
-    if(params.placeholder) input.placeholder = params.placeholder;
+    if (params.placeholder) input.placeholder = params.placeholder;
     input.name = params.name || params.id;
@@ -61,4 +61,4 @@
     input.style.marginBottom = input.style.marginBottom || "5px";
-    
-    if(params.value === undefined) {
+
+    if (params.value === undefined) {
       input.value = localStorage["input#" + params.id] || "";
@@ -86,3 +86,3 @@ } else input.value = params.value;
 
-    if((typeof params == "function") && (typeof cb == "object")) {
+    if ((typeof params == "function") && (typeof cb == "object")) {
       var temp = params;
@@ -116,3 +116,3 @@ params = cb;
     button.innerHTML = params.innerHTML;
-    if(params.style) {
+    if (params.style) {
       for (var key in params.style) {
@@ -124,3 +124,3 @@ var val = params.style[key];
     button.style.margin = button.style.margin || params.margin || "10px";
-    button.onclick = function () {
+    button.onclick = function() {
       cb(button.id);
@@ -155,7 +155,7 @@ };
   };
-  
 
+
   UI.radio = function(arr, params, cb) {
 
-    if(!arr) return console.warn("no array to build radios!");
+    if (!arr) return console.warn("no array to build radios!");
 
@@ -168,3 +168,3 @@ params = params || {};
 
-    if((typeof params == "function") && (typeof cb == "object")) {
+    if ((typeof params == "function") && (typeof cb == "object")) {
       var temp = params;
@@ -201,5 +201,5 @@ params = cb;
       params.parent.appendChild(document.createTextNode(item));
-      if(params.br) params.parent.appendChild(document.createElement("br"));
+      if (params.br) params.parent.appendChild(document.createElement("br"));
       i++;
-      if(i < l) {
+      if (i < l) {
         createRadio();
@@ -219,3 +219,3 @@ }
 
-    if((typeof params == "function") && (typeof cb == "object")) {
+    if ((typeof params == "function") && (typeof cb == "object")) {
       var temp = params;
@@ -241,7 +241,7 @@ params = cb;
     checkbox.onclick = function() {
-        cb(checkbox.checked);
+      cb(checkbox.checked);
     };
     params.parent.appendChild(checkbox);
 
-    if(params.text) params.parent.appendChild(document.createTextNode(params.text));
+    if (params.text) params.parent.appendChild(document.createTextNode(params.text));
   };
@@ -254,3 +254,3 @@
 
-    if((typeof params == "function") && (typeof cb == "object")) {
+    if ((typeof params == "function") && (typeof cb == "object")) {
       var temp = params;
@@ -302,5 +302,5 @@ params = cb;
 
-    if(!str) console.warn("nothing to save!");
+    if (!str) console.warn("nothing to save!");
 
-    if(typeof str == "object") str = JSON.stringify(str, null, "\t");
+    if (typeof str == "object") str = JSON.stringify(str, null, "\t");
 
@@ -333,3 +333,3 @@ params.id = params.id || params.name || "download-link";
     a.id = params.id;
-    if(params.style) {
+    if (params.style) {
       for (var key in params.style) {
@@ -363,4 +363,4 @@ var val = params.style[key];
     span.id = params.id;
-    if(params.className) span.className = params.className;
-    if(params.style) {
+    if (params.className) span.className = params.className;
+    if (params.style) {
       for (var key in params.style) {
@@ -393,6 +393,6 @@ var val = params.style[key];
     img.src = params.src;
-    if(params.alt) img.alt = params.alt;
+    if (params.alt) img.alt = params.alt;
     img.id = params.id;
-    if(params.className) img.className = params.className;
-    if(params.style) {
+    if (params.className) img.className = params.className;
+    if (params.style) {
       for (var key in params.style) {
@@ -428,5 +428,5 @@ var val = params.style[key];
     a.href = params.href;
-    if(params.targetBlank) a.target = "_blank";
+    if (params.targetBlank) a.target = "_blank";
     a.innerHTML = params.innerHTML;
-    if(params.style) {
+    if (params.style) {
       for (var key in params.style) {
@@ -443,7 +443,7 @@ var val = params.style[key];
 
-    if(!arr) return console.warn("no array to build select!");
+    if (!arr) return console.warn("no array to build select!");
 
     params = params || {};
 
-    if((typeof params == "function") && (typeof cb == "object")) {
+    if ((typeof params == "function") && (typeof cb == "object")) {
       var temp = params;
@@ -494,3 +494,3 @@ params = cb;
 
-    if((typeof params == "function") && (typeof cb == "object")) {
+    if ((typeof params == "function") && (typeof cb == "object")) {
       var temp = params;
@@ -556,3 +556,150 @@ params = cb;
 
+  UI.table = function(arr, params) {
 
+    if ((!arr) && (typeof(arr[0]) != "object")) {
+      alert("Argument is not an array with objects");
+    }
+
+    var reDateTimeJS = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/;
+
+    params = params || {};
+    if (typeof params.selectable != "boolean") params.selectable = false;
+
+    params.tableId = params.tableId || params.id || "printedTable";
+    params.showColumns = params.showColumns || params.columns || params.cols || [];
+    params.hideColumns = params.hideColumns || [];
+    params.parent = params.parent || params.parentNode || document.body;
+
+    if (typeof params.hideHead != "boolean") params.hideHead = false;
+    if (typeof params.sortColumns != "boolean") params.sortColumns = false;
+
+    //console.log(params);
+    var columns = [];
+    var numCol = {};
+    var cell = "";
+    var chBoxCol;
+
+    if (params.showColumns.length !== 0) {
+      columns = params.showColumns;
+    } else {
+
+      for (var i = 0; i < arr.length; i++) { //собираем все ключи со всех объектов, а не только с первого
+        for (var key in arr[i]) {
+          if ((columns.indexOf(key) == -1) && (params.hideColumns.indexOf(key) == -1)) {
+            columns.push(key);
+
+            var colCell = arr[i][key];
+            numCol[key] = (!isNaN(colCell) && (typeof colCell == "number"));
+          }
+        }
+      }
+    }
+
+    if (params.sortColumns) columns.sort();
+
+    var exTable = document.getElementById(params.tableId);
+    if (exTable) params.parent.removeChild(exTable);
+
+    var table = document.createElement('table');
+    table.id = params.tableId;
+    table.style.margin = "10px";
+
+    table.style.fontFamily = "monospace";
+    table.style.width = "auto 90%";
+    table.style.borderCollapse = "collapse";
+
+    params.parent.appendChild(table);
+
+    if (!params.hideHead) {
+      var thead = table.createTHead();
+      var hRow = thead.insertRow(0);
+      if (params.selectable) {
+        var thh = document.createElement('th');
+
+        thh.style.background = "#f6f6f6";
+        thh.style.padding = "3px";
+        thh.style.border = "1px solid black";
+
+        chBoxCol = document.createElement("input");
+        chBoxCol.id = params.tableId + "ColCheckbox";
+        chBoxCol.type = "checkbox";
+        chBoxCol.checked = Boolean(params.checked);
+
+        thh.appendChild(chBoxCol);
+        hRow.appendChild(thh);
+      }
+
+      for (var h = 0; h < columns.length; h++) {
+        var th = document.createElement('th');
+        th.style.background = "#f6f6f6";
+        th.style.padding = "3px";
+        th.style.border = "1px solid black";
+
+        th.appendChild(document.createTextNode(columns[h]));
+        hRow.appendChild(th);
+      }
+    }
+
+    var tbody = document.createElement('tbody');
+    table.appendChild(tbody);
+
+    if (arr.length !== 0) {
+
+      for (var n = 0; n < arr.length; n++) { //собираем данные полей, чистим
+        var dRow = tbody.insertRow(-1);
+        dRow.id = n;
+        var oneObj = arr[n];
+        if (params.selectable) {
+          var tdch = document.createElement('td');
+          tdch.style.padding = "3px";
+          tdch.style.border = "1px solid black";
+
+          var chBoxRow = document.createElement("input");
+          chBoxRow.className = params.tableId + "RowCheckbox";
+          chBoxRow.id = n;
+          chBoxRow.type = "checkbox";
+          chBoxRow.checked = Boolean(params.checked);
+          tdch.appendChild(chBoxRow);
+          dRow.appendChild(tdch);
+        }
+        for (var l = 0; l < columns.length; l++) {
+          cell = oneObj[columns[l]];
+          cell = (((cell !== undefined) && (cell !== null)) ? cell : "");
+          if (cell.constructor === Array) cell = cell.join(", ");
+          if (cell.constructor === Object) cell = JSON.stringify(cell);
+
+          if (typeof cell == "string") {
+            cell = cell.replace(params.quotes, "'");
+            if (reDateTimeJS.test(cell)) cell = new Date(cell).toLocaleDateString();
+          }
+
+          var td = document.createElement('td');
+
+          if (/<a.+<\/a>/.test(cell)) {
+            td.appendChild(new DOMParser().parseFromString(cell, "text/html").querySelector("a"));
+          } else if (/<img.+?>/.test(cell)) {
+            td.appendChild(new DOMParser().parseFromString(cell, "text/html").querySelector("img"));
+          } else {
+            td.appendChild(document.createTextNode(cell));
+          }
+
+          td.style.padding = "3px";
+          td.style.border = "1px solid black";
+
+          dRow.appendChild(td);
+        }
+      }
+    }
+
+    if (chBoxCol) {
+      chBoxCol.onchange = function() {
+        var checkboxes = document.querySelectorAll("." + params.tableId + "RowCheckbox");
+        for (var i = 0; i < checkboxes.length; i++) {
+          checkboxes[i].checked = !checkboxes[i].checked;
+        }
+      };
+    }
+  };
+
+
 })();

No alert changes

Improved metrics

Total package byte prevSize

22145

increased by29.57%

Lines of code

519

increased by28.78%

No dependency changes