Spaces:

Truepic
/

watermarked-content-credentials

Running on T4

App Files Files Community

jclyo1 commited on Oct 4, 2023

Commit

18d463f

•

1 Parent(s): da55d71

updates

Browse files

Files changed (3) hide show

static/index.html +353 -58
static/json_viewer.css +71 -0
static/json_viewer.js +269 -0

static/index.html CHANGED Viewed

@@ -24,6 +24,10 @@
       type="module"
       src="https://display.truepic.com/truepic_display.es.js"
     ></script>
   </head>
   <body>
     <div class="container-fluid mt-2" id="head">
@@ -83,10 +87,18 @@
                     <p>Ornare a est accumsan et platea quis rhoncus.</p>
                   </div>
                   <div class="col flex-grow-0">
-                    <a id="download-button" class="btn btn-outline-primary">Download image <img src="images/download_icon.svg" /></a>
                   </div>
                   <div class="col flex-grow-0">
-                    <button type="button" id="goto-verify-button" class="btn btn-outline-primary">Go to verify tab  <img src="images/link_icon.svg" /></button>
                   </div>
                 </div>
               </div>
@@ -94,26 +106,116 @@
             <div class="display-verify">
               <div class="row mt-5 pb-4" id="original-image">
                 <div class="col flex-grow-0">
-                    <img id="uploaded-image" class="thumbnail" />
                 </div>
                 <div class="col">
-                  <strong>Uploaded image</strong><br/>
-                  Content Credentials <span id="contentCredentialResults"></span><br/>
                   Digital watermark <span id="digitalWatermarkResults"></span>
                 </div>
               </div>
               <div class="mt-3" id="resultLabel">
-              <strong>Result</strong>
-            </div>
-                <div class="image-container">
-                  <img src="images/placeholder.png" class="placeholder" />
                 <img
                   src="images/spinner.svg"
                   class="spinner"
                   style="display: none"
                 />
                 </div>
             </div>
           </div>
           <div class="col right-column">
@@ -178,7 +280,12 @@
                 <div class="form-group mb-3">
                   <label>Upload image</label>
                   <div class="custom-select">
-                    <input type="file" class="form-control" name="fileUpload" id="fileUpload" />
                   </div>
                 </div>
@@ -228,13 +335,23 @@
     const imageGenForm = document.querySelector(".image-gen-form");
     const imagePrompt = document.getElementById("prompt");
     const model = document.getElementById("model");
-    const generateImageContainer = document.querySelector(".display-generate .image-container");
     const generateActionMenu = document.querySelector(".action-menu");
-    const verifyImageContainer = document.querySelector(".display-verify .image-container");
     const uploadedImageContainer = document.querySelector("#original-image");
     const downloadButton = document.getElementById("download-button");
     generateTab.addEventListener("click", (event) => {
       event.target.classList.add("active");
       verifyTab.classList.remove("active");
@@ -251,13 +368,15 @@
       setVerifyElementsDisplay("block");
     });
-    document.getElementById('goto-verify-button').addEventListener("click",  (event) => {
-      verifyTab.classList.add("active");
-      generateTab.classList.remove("active");
-      setVerifyElementsDisplay('block');
-      setGenerateElementsDisplay('none');
-    });
     function setGenerateElementsDisplay(displayStatus) {
       displayGenerate.forEach((item) => {
@@ -277,20 +396,22 @@
     });
     function submitForm() {
-      const file =  document.getElementById("fileUpload").files[0];
       let fileReader = new FileReader();
       fileReader.readAsDataURL(file);
-      fileReader.onload = function (){
-          document.getElementById("uploaded-image").setAttribute('src', fileReader.result);
-      }
-      placeholder = document.querySelector('.display-verify .placeholder');
-      spinner = document.querySelector('.display-verify .spinner');
       if (placeholder) placeholder.remove();
       if (document.getElementById("result"))
-          document.getElementById("result").remove(); // JCL make sure to remove the correct one
       spinner.style.display = "block";
       const formData = new FormData(uploadForm);
@@ -311,24 +432,48 @@
         .then((data) => {
           console.log(data);
-          console.log("contains_c2pa", data.contains_c2pa);
-          console.log("contains_watermark", data.contains_watermark);
-          console.log("result_media", data.result_media);
-          document.getElementById("contentCredentialResults").innerHTML =  data.contains_c2pa;
-          document.getElementById("digitalWatermarkResults").innerHTML =  data.contains_watermark;
           uploadedImageContainer.style.display = "flex";
-          document.getElementById('resultLabel').style.display = "block";
-          document.querySelector('.display-verify .spinner').style.display = "none";
-          if (data.result_media != 'n/a') {
             const path = "/" + data.result_media;
             var truepicDisplay = document.createElement("truepic-display");
-            /*
             truepicDisplay.addEventListener(
               "validate",
               setVerificationOutputFromValidation
@@ -337,8 +482,6 @@
               "validate",
               setCertificateOutputFromValidation
             );
-            */
             truepicDisplay.setAttribute("id", "result");
             truepicDisplay.setAttribute("active", "");
@@ -368,19 +511,17 @@
     imageGenForm.addEventListener("submit", async (event) => {
       event.preventDefault();
-      placeholder = document.querySelector('.display-generate .placeholder');
-      spinner = document.querySelector('.display-generate .spinner');
       generateActionMenu.style.display = "none";
-      // verificationDetails.style.display = "none";
       // parameters.style.display = "none";
-      // downloadLink.style.display = "none";
       try {
         if (placeholder) placeholder.remove();
         if (document.getElementById("result"))
-          document.getElementById("result").remove();  // JCL make sure to remove the correct one
         spinner.style.display = "block";
@@ -388,16 +529,6 @@
         const path = "/" + resp;
         var truepicDisplay = document.createElement("truepic-display");
-        /*
-        truepicDisplay.addEventListener(
-          "validate",
-          setVerificationOutputFromValidation
-        );
-        truepicDisplay.addEventListener(
-          "validate",
-          setCertificateOutputFromValidation
-        );
-        */
         truepicDisplay.setAttribute("id", "result");
         truepicDisplay.setAttribute("active", "");
@@ -421,10 +552,174 @@
     promptParam.innerHTML = textGenInput.value;
     parameters.style.display = "block";
     */
       } catch (err) {
         console.error(err);
       }
     });
   </script>
 </html>

       type="module"
       src="https://display.truepic.com/truepic_display.es.js"
     ></script>
+    <link rel="stylesheet" href="json_viewer.css" />
+    <script src="https://unpkg.com/@peculiar/x509"></script>
+    <script type="text/javascript" src="json_viewer.js"></script>
   </head>
   <body>
     <div class="container-fluid mt-2" id="head">
                     <p>Ornare a est accumsan et platea quis rhoncus.</p>
                   </div>
                   <div class="col flex-grow-0">
+                    <a id="download-button" class="btn btn-outline-primary"
+                      >Download image <img src="images/download_icon.svg"
+                    /></a>
                   </div>
                   <div class="col flex-grow-0">
+                    <button
+                      type="button"
+                      id="goto-verify-button"
+                      class="btn btn-outline-primary"
+                    >
+                      Go to verify tab <img src="images/link_icon.svg" />
+                    </button>
                   </div>
                 </div>
               </div>
             <div class="display-verify">
               <div class="row mt-5 pb-4" id="original-image">
                 <div class="col flex-grow-0">
+                  <img id="uploaded-image" class="thumbnail" />
                 </div>
                 <div class="col">
+                  <strong>Uploaded image</strong><br />
+                  Content Credentials <span id="contentCredentialResults"></span
+                  ><br />
                   Digital watermark <span id="digitalWatermarkResults"></span>
                 </div>
               </div>
               <div class="mt-3" id="resultLabel">
+                <strong>Result</strong>
+                <div
+                  class="alert alert-secondary"
+                  role="alert"
+                  id="verifyResultDescription"
+                ></div>
+              </div>
+              <div class="image-container">
+                <img src="images/placeholder.png" class="placeholder" />
                 <img
                   src="images/spinner.svg"
                   class="spinner"
                   style="display: none"
                 />
+              </div>
+              <h3>Verification Output</h3>
+              <div id="verification-output"></div>
+              <h3>Certificates</h3>
+              <div class="certificate" id="certificate-output">
+                <p>
+                  Details about the certificate used for signing.<br />
+                  Truepic maintains the first and only purpose-built C2PA
+                  certificate authority.
+                </p>
+                <p>
+                  <strong style="font-weight: 600">Certificate chain</strong>
+                </p>
+                <ul id="certificate-list"></ul>
+                <p><strong style="font-weight: 600">Details</strong></p>
+                <div class="details">
+                  <strong>Basic info</strong>
+                  <div>
+                    <label>Type</label>
+                    X.509 Certificate
+                  </div>
+                  <div>
+                    <label>Serial Number</label>
+                    <div class="serialNumber"></div>
+                  </div>
+                  <div>
+                    <label>Issued</label>
+                    <div class="issued"></div>
+                  </div>
+                  <div>
+                    <label>Expired</label>
+                    <div class="expired"></div>
+                  </div>
+                  <strong>Subject</strong>
+                  <div>
+                    <label>Common Name</label>
+                    <div class="subjectCommonName"></div>
+                  </div>
+                  <div>
+                    <label>Organization</label>
+                    <div class="subjectOrganization"></div>
+                  </div>
+                  <div>
+                    <label>Organization Unit</label>
+                    <div class="subjectOrganizationUnit"></div>
+                  </div>
+                  <div>
+                    <label>Country</label>
+                    <div class="subjectCountry"></div>
+                  </div>
+                  <strong>Issuer</strong>
+                  <div>
+                    <label>Common Name</label>
+                    <div class="issuerCommonName"></div>
+                  </div>
+                  <div>
+                    <label>Organization</label>
+                    <div class="issuerOrganization"></div>
+                  </div>
+                  <div>
+                    <label>Organization Unit</label>
+                    <div class="issuerOrganizationUnit"></div>
+                  </div>
+                  <div>
+                    <label>Country</label>
+                    <div class="issuerCountry"></div>
+                  </div>
+                  <strong>Public Key Info</strong>
+                  <div>
+                    <label>Algorithm</label>
+                    <div class="algorithm"></div>
+                  </div>
+                  <div id="modulusContainer">
+                    <label>Modulus</label>
+                    <div class="modulus"></div>
+                  </div>
+                  <div id="curveContainer">
+                    <label>Curve</label>
+                    <div class="namedCurve"></div>
+                  </div>
                 </div>
+              </div>
             </div>
           </div>
           <div class="col right-column">
                 <div class="form-group mb-3">
                   <label>Upload image</label>
                   <div class="custom-select">
+                    <input
+                      type="file"
+                      class="form-control"
+                      name="fileUpload"
+                      id="fileUpload"
+                    />
                   </div>
                 </div>
     const imageGenForm = document.querySelector(".image-gen-form");
     const imagePrompt = document.getElementById("prompt");
     const model = document.getElementById("model");
+    const generateImageContainer = document.querySelector(
+      ".display-generate .image-container"
+    );
     const generateActionMenu = document.querySelector(".action-menu");
+    const verifyImageContainer = document.querySelector(
+      ".display-verify .image-container"
+    );
     const uploadedImageContainer = document.querySelector("#original-image");
     const downloadButton = document.getElementById("download-button");
+    const verifyResultDescription = document.getElementById(
+      "verifyResultDescription"
+    );
+    const verificationOutput = document.getElementById("verification-output");
+    const certificateList = document.getElementById("certificate-list");
+    var certificates = [];
     generateTab.addEventListener("click", (event) => {
       event.target.classList.add("active");
       verifyTab.classList.remove("active");
       setVerifyElementsDisplay("block");
     });
+    document
+      .getElementById("goto-verify-button")
+      .addEventListener("click", (event) => {
+        verifyTab.classList.add("active");
+        generateTab.classList.remove("active");
+        setVerifyElementsDisplay("block");
+        setGenerateElementsDisplay("none");
+      });
     function setGenerateElementsDisplay(displayStatus) {
       displayGenerate.forEach((item) => {
     });
     function submitForm() {
+      const file = document.getElementById("fileUpload").files[0];
       let fileReader = new FileReader();
       fileReader.readAsDataURL(file);
+      fileReader.onload = function () {
+        document
+          .getElementById("uploaded-image")
+          .setAttribute("src", fileReader.result);
+      };
+      placeholder = document.querySelector(".display-verify .placeholder");
+      spinner = document.querySelector(".display-verify .spinner");
       if (placeholder) placeholder.remove();
       if (document.getElementById("result"))
+        document.getElementById("result").remove(); // JCL make sure to remove the correct one
       spinner.style.display = "block";
       const formData = new FormData(uploadForm);
         .then((data) => {
           console.log(data);
+          document.getElementById("contentCredentialResults").innerHTML =
+            data.contains_c2pa;
+          document.getElementById("digitalWatermarkResults").innerHTML =
+            data.contains_watermark;
+          if (
+            data.contains_c2pa == "true" &&
+            data.contains_watermark == "true"
+          ) {
+            verifyResultDescription.innerHTML =
+              "Your image contains content credentials, which are displayed below.";
+          } else if (
+            data.contains_c2pa == "false" &&
+            data.contains_watermark == "true"
+          ) {
+            verifyResultDescription.innerHTML =
+              "The watermark was found, but image modifications were also detected. The last untampered, signed version on file is displayed.";
+          } else if (
+            data.contains_c2pa == "true" &&
+            data.contains_watermark == "false"
+          ) {
+            verifyResultDescription.innerHTML =
+              "Your image contains content credentials, which are displayed below. A watermark was not detected.";
+          } else if (
+            data.contains_c2pa == "false" &&
+            data.contains_watermark == "false"
+          ) {
+            verifyResultDescription.innerHTML =
+              "Nothing to show: this image contains neither content credentials, nor a watermark.";
+          }
           uploadedImageContainer.style.display = "flex";
+          document.getElementById("resultLabel").style.display = "block";
+          document.querySelector(".display-verify .spinner").style.display =
+            "none";
+          if (data.result_media != "n/a") {
             const path = "/" + data.result_media;
             var truepicDisplay = document.createElement("truepic-display");
             truepicDisplay.addEventListener(
               "validate",
               setVerificationOutputFromValidation
               "validate",
               setCertificateOutputFromValidation
             );
             truepicDisplay.setAttribute("id", "result");
             truepicDisplay.setAttribute("active", "");
     imageGenForm.addEventListener("submit", async (event) => {
       event.preventDefault();
+      placeholder = document.querySelector(".display-generate .placeholder");
+      spinner = document.querySelector(".display-generate .spinner");
       generateActionMenu.style.display = "none";
       // parameters.style.display = "none";
       try {
         if (placeholder) placeholder.remove();
         if (document.getElementById("result"))
+          document.getElementById("result").remove(); // JCL make sure to remove the correct one
         spinner.style.display = "block";
         const path = "/" + resp;
         var truepicDisplay = document.createElement("truepic-display");
         truepicDisplay.setAttribute("id", "result");
         truepicDisplay.setAttribute("active", "");
     promptParam.innerHTML = textGenInput.value;
     parameters.style.display = "block";
     */
       } catch (err) {
         console.error(err);
       }
     });
+    function setVerificationOutputFromValidation(event) {
+      //verificationDetails.style.display = "block";
+      return setVerificationOutput(event.detail.manifestStore.toJSON());
+    }
+    function setCertificateOutputFromValidation(event) {
+      return setCertificateOutput(event.detail.manifestStore);
+    }
+    function setVerificationOutput(output = null) {
+      verificationOutput.innerHTML = "";
+      if (!output) {
+        return;
+      }
+      const viewer = new JSONViewer();
+      verificationOutput.appendChild(viewer.getContainer());
+      viewer.showJSON(output);
+    }
+    function setCertificateOutput(manifestStore = null) {
+      const certificate = manifestStore?.activeManifest?.certificate;
+      if (!certificate) {
+        return;
+      }
+      certificates = [
+        {
+          der: certificate.der,
+          name: certificate.subjectName,
+          decoded: new x509.X509Certificate(certificate.der),
+        },
+        ...certificate.chain.map((certificate) => ({
+          der: certificate.der,
+          decoded: new x509.X509Certificate(certificate.der),
+        })),
+      ];
+      certificates.forEach((certificate) => {
+        certificate.transformed = transformCert(certificate.decoded);
+      });
+      console.log("certificates", certificates);
+      certificateList.innerHTML = "";
+      certificates.forEach((certificate, index) => {
+        var li = document.createElement("li");
+        if (index == 0) li.classList.add("active");
+        li.appendChild(
+          document.createTextNode(certificate.transformed.subjectCommonName)
+        );
+        li.addEventListener("click", function (e) {
+          setCertificate(index);
+          const lis = document.querySelectorAll("#certificate-list li");
+          lis.forEach((element) => {
+            element.classList.remove("active");
+          });
+          this.classList.add("active");
+        });
+        certificateList.appendChild(li);
+      });
+      setCertificate(0);
+    }
+    function transformCert(certificate) {
+      const {
+        issuer,
+        subject,
+        notAfter: expired,
+        notBefore: issued,
+        serialNumber,
+        publicKey: {
+          algorithm: {
+            name: algorithm,
+            modulusLength: modulus,
+            namedCurve: namedCurve,
+          },
+        },
+      } = certificate;
+      const parsedSubject = parseCertificateValues(subject);
+      const parsedIssuer = parseCertificateValues(issuer);
+      return {
+        issuerCommonName: parsedIssuer["CN"],
+        issuerOrganizationUnit: parsedIssuer["OU"],
+        issuerOrganization: parsedIssuer["O"],
+        issuerCountry: parsedIssuer["C"],
+        subjectCommonName: parsedSubject["CN"],
+        subjectOrganizationUnit: parsedSubject["OU"],
+        subjectOrganization: parsedSubject["O"],
+        subjectCountry: parsedSubject["C"],
+        issued,
+        expired,
+        serialNumber,
+        algorithm,
+        modulus,
+        namedCurve,
+      };
+    }
+    function parseCertificateValues(input) {
+      const params = new URLSearchParams(input.replaceAll(",", "&"));
+      const responses = {};
+      for (const entry of params.entries()) {
+        responses[entry[0].trim()] = entry[1];
+      }
+      return responses;
+    }
+    function setCertificate(ind) {
+      const certificate = certificates[ind].transformed;
+      document.querySelector(".details .issuerCommonName").innerHTML =
+        certificate.issuerCommonName;
+      document.querySelector(".details .issuerOrganizationUnit").innerHTML =
+        certificate.issuerOrganizationUnit;
+      document.querySelector(".details .issuerOrganization").innerHTML =
+        certificate.issuerOrganization;
+      document.querySelector(".details .issuerCountry").innerHTML =
+        certificate.issuerCountry;
+      document.querySelector(".details .subjectCommonName").innerHTML =
+        certificate.subjectCommonName;
+      document.querySelector(".details .subjectOrganizationUnit").innerHTML =
+        certificate.subjectOrganizationUnit;
+      document.querySelector(".details .subjectOrganization").innerHTML =
+        certificate.subjectOrganization;
+      document.querySelector(".details .subjectCountry").innerHTML =
+        certificate.subjectCountry;
+      document.querySelector(".details .issued").innerHTML = certificate.issued;
+      document.querySelector(".details .expired").innerHTML =
+        certificate.expired;
+      document.querySelector(".details .serialNumber").innerHTML =
+        certificate.serialNumber;
+      document.querySelector(".details .algorithm").innerHTML =
+        certificate.algorithm;
+      if (certificate.modulus !== undefined) {
+        document.querySelector(".details .modulus").innerHTML =
+          certificate.modulus;
+        document.querySelector("#modulusContainers").style.display = "block";
+      } else {
+        document.querySelector("#modulusContainers").style.display = "none";
+      }
+      if (certificate.namedCurve !== undefined) {
+        document.querySelector(".details .namedCurve").innerHTML =
+          certificate.namedCurve;
+        document.querySelector("#curveContainer").style.display = "block";
+      } else {
+        document.querySelector("#curveContainer").style.display = "none";
+      }
+    }
   </script>
 </html>

static/json_viewer.css ADDED Viewed

	@@ -0,0 +1,71 @@

+.json-viewer {
+    color: #000;
+    padding-left: 20px;
+  }
+  .json-viewer ul {
+    list-style-type: none;
+    margin: 0;
+    margin: 0 0 0 1px;
+    border-left: 1px dotted #ccc;
+    padding-left: 2em;
+  }
+  .json-viewer .hide {
+    display: none;
+  }
+  .json-viewer .type-string {
+    color: #0b7500;
+  }
+  .json-viewer .type-date {
+    color: #cb7500;
+  }
+  .json-viewer .type-boolean {
+    color: #1a01cc;
+    font-weight: bold;
+  }
+  .json-viewer .type-number {
+    color: #1a01cc;
+  }
+  .json-viewer .type-null,
+  .json-viewer .type-undefined {
+    color: #90a;
+  }
+  .json-viewer a.list-link {
+    color: #000;
+    text-decoration: none;
+    position: relative;
+  }
+  .json-viewer a.list-link:before {
+    color: #aaa;
+    content: "\25BC";
+    position: absolute;
+    display: inline-block;
+    width: 1em;
+    left: -1em;
+  }
+  .json-viewer a.list-link.collapsed:before {
+    content: "\25B6";
+  }
+  .json-viewer a.list-link.empty:before {
+    content: "";
+  }
+  .json-viewer .items-ph {
+    color: #aaa;
+    padding: 0 1em;
+  }
+  .json-viewer .items-ph:hover {
+    text-decoration: underline;
+  }

static/json_viewer.js ADDED Viewed

	@@ -0,0 +1,269 @@

+/**
+ * JSONViewer - by Roman Makudera 2016 (c) MIT licence.
+ */
+var JSONViewer = (function(document) {
+	var Object_prototype_toString = ({}).toString;
+	var DatePrototypeAsString = Object_prototype_toString.call(new Date);
+	/** @constructor */
+	function JSONViewer() {
+		this._dom_container = document.createElement("pre");
+		this._dom_container.classList.add("json-viewer");
+	};
+	/**
+	 * Visualise JSON object.
+	 *
+	 * @param {Object|Array} json Input value
+	 * @param {Number} [inputMaxLvl] Process only to max level, where 0..n, -1 unlimited
+	 * @param {Number} [inputColAt] Collapse at level, where 0..n, -1 unlimited
+	 */
+	JSONViewer.prototype.showJSON = function(jsonValue, inputMaxLvl, inputColAt) {
+		// Process only to maxLvl, where 0..n, -1 unlimited
+		var maxLvl = typeof inputMaxLvl === "number" ? inputMaxLvl : -1; // max level
+		// Collapse at level colAt, where 0..n, -1 unlimited
+		var colAt = typeof inputColAt === "number" ? inputColAt : -1; // collapse at
+		this._dom_container.innerHTML = "";
+		walkJSONTree(this._dom_container, jsonValue, maxLvl, colAt, 0);
+	};
+	/**
+	 * Get container with pre object - this container is used for visualise JSON data.
+	 *
+	 * @return {Element}
+	 */
+	JSONViewer.prototype.getContainer = function() {
+		return this._dom_container;
+	};
+	/**
+	 * Recursive walk for input value.
+	 *
+	 * @param {Element} outputParent is the Element that will contain the new DOM
+	 * @param {Object|Array} value Input value
+	 * @param {Number} maxLvl Process only to max level, where 0..n, -1 unlimited
+	 * @param {Number} colAt Collapse at level, where 0..n, -1 unlimited
+	 * @param {Number} lvl Current level
+	 */
+	function walkJSONTree(outputParent, value, maxLvl, colAt, lvl) {
+		var isDate = Object_prototype_toString.call(value) === DatePrototypeAsString;
+		var realValue = !isDate && typeof value === "object" && value !== null && "toJSON" in value ? value.toJSON() : value;
+		if (typeof realValue === "object" && realValue !== null && !isDate) {
+			var isMaxLvl = maxLvl >= 0 && lvl >= maxLvl;
+			var isCollapse = colAt >= 0 && lvl >= colAt;
+			var isArray = Array.isArray(realValue);
+			var items = isArray ? realValue : Object.keys(realValue);
+			if (lvl === 0) {
+				// root level
+				var rootCount = _createItemsCount(items.length);
+				// hide/show
+				var rootLink = _createLink(isArray ? "[" : "{");
+				if (items.length) {
+					rootLink.addEventListener("click", function() {
+						if (isMaxLvl) return;
+						rootLink.classList.toggle("collapsed");
+						rootCount.classList.toggle("hide");
+						// main list
+						outputParent.querySelector("ul").classList.toggle("hide");
+					});
+					if (isCollapse) {
+						rootLink.classList.add("collapsed");
+						rootCount.classList.remove("hide");
+					}
+				}
+				else {
+					rootLink.classList.add("empty");
+				}
+				rootLink.appendChild(rootCount);
+				outputParent.appendChild(rootLink); // output the rootLink
+			}
+			if (items.length && !isMaxLvl) {
+				var len = items.length - 1;
+				var ulList = document.createElement("ul");
+				ulList.setAttribute("data-level", lvl);
+				ulList.classList.add("type-" + (isArray ? "array" : "object"));
+				items.forEach(function(key, ind) {
+					var item = isArray ? key : value[key];
+					var li = document.createElement("li");
+					if (typeof item === "object") {
+						// null && date
+						if (!item || item instanceof Date) {
+							li.appendChild(document.createTextNode(isArray ? "" : key + ": "));
+							li.appendChild(createSimpleViewOf(item ? item : null, true));
+						}
+						// array & object
+						else {
+							var itemIsArray = Array.isArray(item);
+							var itemLen = itemIsArray ? item.length : Object.keys(item).length;
+							// empty
+							if (!itemLen) {
+								li.appendChild(document.createTextNode(key + ": " + (itemIsArray ? "[]" : "{}")));
+							}
+							else {
+								// 1+ items
+								var itemTitle = (typeof key === "string" ? key + ": " : "") + (itemIsArray ? "[" : "{");
+								var itemLink = _createLink(itemTitle);
+								var itemsCount = _createItemsCount(itemLen);
+								// maxLvl - only text, no link
+								if (maxLvl >= 0 && lvl + 1 >= maxLvl) {
+									li.appendChild(document.createTextNode(itemTitle));
+								}
+								else {
+									itemLink.appendChild(itemsCount);
+									li.appendChild(itemLink);
+								}
+								walkJSONTree(li, item, maxLvl, colAt, lvl + 1);
+								li.appendChild(document.createTextNode(itemIsArray ? "]" : "}"));
+								var list = li.querySelector("ul");
+								var itemLinkCb = function() {
+									itemLink.classList.toggle("collapsed");
+									itemsCount.classList.toggle("hide");
+									list.classList.toggle("hide");
+								};
+								// hide/show
+								itemLink.addEventListener("click", itemLinkCb);
+								// collapse lower level
+								if (colAt >= 0 && lvl + 1 >= colAt) {
+									itemLinkCb();
+								}
+							}
+						}
+					}
+					// simple values
+					else {
+						// object keys with key:
+						if (!isArray) {
+							li.appendChild(document.createTextNode(key + ": "));
+						}
+						// recursive
+						walkJSONTree(li, item, maxLvl, colAt, lvl + 1);
+					}
+					// add comma to the end
+					if (ind < len) {
+						li.appendChild(document.createTextNode(","));
+					}
+					ulList.appendChild(li);
+				}, this);
+				outputParent.appendChild(ulList); // output ulList
+			}
+			else if (items.length && isMaxLvl) {
+				var itemsCount = _createItemsCount(items.length);
+				itemsCount.classList.remove("hide");
+				outputParent.appendChild(itemsCount); // output itemsCount
+			}
+			if (lvl === 0) {
+				// empty root
+				if (!items.length) {
+					var itemsCount = _createItemsCount(0);
+					itemsCount.classList.remove("hide");
+					outputParent.appendChild(itemsCount); // output itemsCount
+				}
+				// root cover
+				outputParent.appendChild(document.createTextNode(isArray ? "]" : "}"));
+				// collapse
+				if (isCollapse) {
+					outputParent.querySelector("ul").classList.add("hide");
+				}
+			}
+		} else {
+			// simple values
+			outputParent.appendChild( createSimpleViewOf(value, isDate) );
+		}
+	};
+	/**
+	 * Create simple value (no object|array).
+	 *
+	 * @param  {Number|String|null|undefined|Date} value Input value
+	 * @return {Element}
+	 */
+	function createSimpleViewOf(value, isDate) {
+		var spanEl = document.createElement("span");
+		var type = typeof value;
+		var asText = "" + value;
+		if (type === "string") {
+			asText = '"' + value + '"';
+		} else if (value === null) {
+			type = "null";
+			//asText = "null";
+		} else if (isDate) {
+			type = "date";
+			asText = value.toLocaleString();
+		}
+		spanEl.className = "type-" + type;
+		spanEl.textContent = asText;
+		return spanEl;
+	};
+	/**
+	 * Create items count element.
+	 *
+	 * @param  {Number} count Items count
+	 * @return {Element}
+	 */
+	function _createItemsCount(count) {
+		var itemsCount = document.createElement("span");
+		itemsCount.className = "items-ph hide";
+		itemsCount.innerHTML = _getItemsTitle(count);
+		return itemsCount;
+	};
+	/**
+	 * Create clickable link.
+	 *
+	 * @param  {String} title Link title
+	 * @return {Element}
+	 */
+	function _createLink(title) {
+		var linkEl = document.createElement("a");
+		linkEl.classList.add("list-link");
+		linkEl.href = "javascript:void(0)";
+		linkEl.innerHTML = title || "";
+		return linkEl;
+	};
+	/**
+	 * Get correct item|s title for count.
+	 *
+	 * @param  {Number} count Items count
+	 * @return {String}
+	 */
+	function _getItemsTitle(count) {
+		var itemsTxt = count > 1 || count === 0 ? "items" : "item";
+		return (count + " " + itemsTxt);
+	};
+	return JSONViewer;
+})(document);