clean

2025-01-30 17:03:27 +05:30
parent f7306b70c8
commit a176102cd9
53 changed files with 24 additions and 0 deletions
--- a/.hta_slug/json-formatter.php
+++ b/.hta_slug/json-formatter.php
@@ -0,0 +1,111 @@
+<?php
+    require_once('.htac_header.php');
+?>
+<section class="diZContainer diZmxAuto diZmy8">
+<h1 class="diZBorderBottom">JSON Formatter</h1>
+    <div class="diZFlexRowCol">
+        <div class="diZw100 jsonCustomHeight diZFlexColumn diZJsonInputBorder diZBorderRadius5px diZmr2">
+            <textarea oninput="parseJSON()" id="jsonInput" class="diZJsonInput diZScrollBarNone" rows="40" placeholder="Enter JSON here"></textarea><br>
+        </div>
+        <div class="diZw100 jsonCustomHeight diZFlexColumn diZJsonInputBorder diZBorderRadius5px">
+            <div id="output" class="diZJsonViewer"></div>
+        </div>
+    </div>
+    <div class="diZFloatRight diZFlexRow diZJustifyCenter diZItemsCenter">
+        <p class=" diZJsonKey" id="countArray">Array Length: 0</p>
+        <button class="diZmt4 diZmb4 diZml2" onclick="copyToClipboard()"><span>Copy JSON</span></button>
+        <button class="diZmt4 diZmb4 diZml2" onclick="downloadJsonData()"><span>Download JSON</span></button>
+    </div>
+    
+</section>
+<script>
+    function parseJSON() {
+        const input = document.getElementById('jsonInput').value;
+        const outputElement = document.getElementById('output');
+        outputElement.innerHTML = ''; // Clear previous output
+       
+        try {
+            const parsedData = JSON.parse(input);
+            outputElement.appendChild(createTreeView(parsedData));
+            let totalObjects = parsedData.length;
+            document.getElementById('countArray').innerHTML = 'Array Length: '+ totalObjects;
+        } catch (error) {
+            outputElement.textContent = 'Error parsing JSON: ' + error.message;
+        }
+    }
+
+    function createTreeView(data) {
+        const container = document.createElement('div');
+
+        if (typeof data === 'object' && data !== null) {
+            const ul = document.createElement('ul');
+            ul.className = 'diZJsonUl';
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    const li = document.createElement('li');
+                    li.className = 'diZJsonLi';
+                    const keySpan = document.createElement('span');
+                    keySpan.className = 'diZJsonKey';
+                    keySpan.textContent = `${key}: `;
+
+                    const valueSpan = document.createElement('span');
+                    if (typeof data[key] === 'object' && data[key] !== null) {
+                        const childContainer = createTreeView(data[key]);
+                        li.appendChild(keySpan);
+                        li.appendChild(childContainer);
+                    } else {
+                        if (typeof data[key] === 'string') {
+                            valueSpan.className = 'diZJsonString';
+                            valueSpan.textContent = `"${data[key]}"`;
+                        } else {
+                            valueSpan.className = 'diZJsonValue';
+                            valueSpan.textContent = data[key];
+                        }
+                        li.appendChild(keySpan);
+                        li.appendChild(valueSpan);
+                    }
+                    ul.appendChild(li);
+                }
+            }
+            container.appendChild(ul);
+        } else {
+            const span = document.createElement('span');
+            if (typeof data === 'string') {
+                span.className = 'diZJsonString';
+                span.textContent = `"${data}"`;
+            } else {
+                span.className = 'diZJsonValue';
+                span.textContent = data;
+            }
+            container.appendChild(span);
+        }
+
+        return container;
+    }
+
+    function copyToClipboard() {
+        const input = document.getElementById('jsonInput').value;
+        navigator.clipboard.writeText(input).then(() => {
+            console.log('JSON copied to clipboard!');
+        }, (err) => {
+            console.log('Failed to copy JSON: ', err);
+        });
+    }
+    function downloadJsonData() {
+        const jsonData = document.getElementById('jsonInput').value;
+        let jsonObject;
+        try {
+            jsonObject = JSON.parse(jsonData);
+        } catch (error) {
+            console.log('Invalid JSON data');
+            return;
+        }
+        const jsonString = JSON.stringify(jsonObject, null, 2);
+        const blob = new Blob([jsonString], { type: 'application/json' });
+        const downloadLink = document.createElement('a');
+        downloadLink.href = URL.createObjectURL(blob);
+        downloadLink.download = 'json-data.json';
+        downloadLink.click();
+        URL.revokeObjectURL(downloadLink.href);
+    }
+</script>