Skip to content

Commit bc6a659

Browse files
zhravanzhravan
authored
feat: add tabs (#1)
1 parent 96c3049 commit bc6a659

File tree

1 file changed

+132
-43
lines changed

1 file changed

+132
-43
lines changed

‎index.html‎

Lines changed: 132 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>JSON Previewer</title>
6+
<title>JSON Preview with Multiple Tabs</title>
77
<style>
88
body {
99
font-family: Arial, sans-serif;
@@ -17,6 +17,7 @@
1717
}
1818

1919
.tabs {
20+
display: flex;
2021
margin-bottom: 10px;
2122
}
2223

@@ -33,7 +34,15 @@
3334
font-weight: bold;
3435
}
3536

36-
#json-input {
37+
.json-tab-content {
38+
display: none;
39+
}
40+
41+
.json-tab-content.active {
42+
display: block;
43+
}
44+
45+
textarea {
3746
width: 100%;
3847
height: 200px;
3948
padding: 10px;
@@ -53,11 +62,6 @@
5362
display: block;
5463
}
5564

56-
#raw-json {
57-
white-space: pre-wrap;
58-
font-family: monospace;
59-
}
60-
6165
.tree-node {
6266
margin-left: 20px;
6367
}
@@ -87,49 +91,136 @@
8791
color: red;
8892
font-weight: bold;
8993
}
94+
95+
.add-tab-button {
96+
padding: 10px 20px;
97+
background-color: #007bff;
98+
color: white;
99+
border: none;
100+
cursor: pointer;
101+
margin-left: 10px;
102+
}
103+
104+
.add-tab-button:hover {
105+
background-color: #0056b3;
106+
}
90107
</style>
91108
</head>
92109
<body>
93110
<div class="container">
94-
<h1>JSON Preview</h1>
95-
96-
<textarea id="json-input" placeholder="Enter JSON here..."></textarea>
97-
98-
<div class="tabs">
99-
<button class="tab-button active" onclick="showTab('raw')">Raw JSON</button>
100-
<button class="tab-button" onclick="showTab('tree')">Tree View</button>
101-
<button class="tab-button" onclick="showTab('error')">Errors</button>
102-
</div>
111+
<h1>JSON Preview with Multiple Tabs</h1>
103112

104-
<div id="raw-preview" class="preview-section active">
105-
<pre id="raw-json"></pre>
113+
<div class="tabs" id="tabs-container">
114+
<button class="tab-button active" data-tab="tab1">Tab 1</button>
115+
<button class="add-tab-button" onclick="addTab()">+ Add Tab</button>
106116
</div>
107117

108-
<div id="tree-preview" class="preview-section">
109-
<div id="tree-view"></div>
110-
</div>
118+
<div id="tab1" class="json-tab-content active">
119+
<textarea class="json-input" placeholder="Enter JSON here..."></textarea>
120+
121+
<div class="tabs">
122+
<button class="tab-button active" onclick="showPreviewTab('tab1', 'raw')">Raw JSON</button>
123+
<button class="tab-button" onclick="showPreviewTab('tab1', 'tree')">Tree View</button>
124+
<button class="tab-button" onclick="showPreviewTab('tab1', 'error')">Errors</button>
125+
</div>
126+
127+
<div id="tab1-raw-preview" class="preview-section active">
128+
<pre class="raw-json"></pre>
129+
</div>
111130

112-
<div id="error-preview" class="preview-section">
113-
<div id="error-message"></div>
131+
<div id="tab1-tree-preview" class="preview-section">
132+
<div class="tree-view"></div>
133+
</div>
134+
135+
<div id="tab1-error-preview" class="preview-section">
136+
<div class="error-message"></div>
137+
</div>
114138
</div>
115139
</div>
116140

117141
<script>
118-
function showTab(tabName) {
119-
// Tab buttons
142+
let tabCount = 1;
143+
144+
// Function to add a new tab
145+
function addTab() {
146+
tabCount++;
147+
const tabId = `tab${tabCount}`;
148+
149+
// Add tab button
150+
const tabButton = document.createElement('button');
151+
tabButton.className = 'tab-button';
152+
tabButton.textContent = `Tab ${tabCount}`;
153+
tabButton.setAttribute('data-tab', tabId);
154+
tabButton.onclick = () => switchTab(tabId);
155+
document.getElementById('tabs-container').insertBefore(tabButton, document.querySelector('.add-tab-button'));
156+
157+
// Add tab content
158+
const tabContent = document.createElement('div');
159+
tabContent.id = tabId;
160+
tabContent.className = 'json-tab-content';
161+
tabContent.innerHTML = `
162+
<textarea class="json-input" placeholder="Enter JSON here..."></textarea>
163+
164+
<div class="tabs">
165+
<button class="tab-button active" onclick="showPreviewTab('${tabId}', 'raw')">Raw JSON</button>
166+
<button class="tab-button" onclick="showPreviewTab('${tabId}', 'tree')">Tree View</button>
167+
<button class="tab-button" onclick="showPreviewTab('${tabId}', 'error')">Errors</button>
168+
</div>
169+
170+
<div id="${tabId}-raw-preview" class="preview-section active">
171+
<pre class="raw-json"></pre>
172+
</div>
173+
174+
<div id="${tabId}-tree-preview" class="preview-section">
175+
<div class="tree-view"></div>
176+
</div>
177+
178+
<div id="${tabId}-error-preview" class="preview-section">
179+
<div class="error-message"></div>
180+
</div>
181+
`;
182+
document.querySelector('.container').appendChild(tabContent);
183+
184+
// Add event listener for JSON input
185+
tabContent.querySelector('.json-input').addEventListener('input', () => updatePreview(tabId));
186+
187+
// Switch to the new tab
188+
switchTab(tabId);
189+
}
190+
191+
// Function to switch between tabs
192+
function switchTab(tabId) {
193+
// Hide all tab contents
194+
document.querySelectorAll('.json-tab-content').forEach(tab => {
195+
tab.classList.remove('active');
196+
});
197+
198+
// Show the selected tab content
199+
document.getElementById(tabId).classList.add('active');
200+
201+
// Update tab buttons
120202
document.querySelectorAll('.tab-button').forEach(button => {
121-
button.classList.toggle('active', button.textContent.includes(tabName));
203+
button.classList.toggle('active', button.getAttribute('data-tab') === tabId);
204+
});
205+
}
206+
207+
// Function to show the preview tab (Raw, Tree, Error)
208+
function showPreviewTab(tabId, previewType) {
209+
const previewSections = document.querySelectorAll(`#${tabId} .preview-section`);
210+
previewSections.forEach(section => {
211+
section.classList.toggle('active', section.id === `${tabId}-${previewType}-preview`);
122212
});
123213

124-
// Tab content
125-
document.querySelectorAll('.preview-section').forEach(section => {
126-
section.classList.toggle('active', section.id === `${tabName}-preview`);
214+
// Update tab buttons
215+
document.querySelectorAll(`#${tabId} .tab-button`).forEach(button => {
216+
button.classList.toggle('active', button.textContent.includes(previewType));
127217
});
128218
}
129219

220+
// Function to create a tree view
130221
function createTreeView(data, parentElement) {
131222
parentElement.innerHTML = '';
132-
223+
133224
function processNode(value, parent, key) {
134225
const node = document.createElement('div');
135226
node.className = 'tree-node';
@@ -146,7 +237,7 @@ <h1>JSON Preview</h1>
146237

147238
const children = document.createElement('div');
148239
children.className = 'tree-children';
149-
240+
150241
if (Array.isArray(value)) {
151242
keySpan.textContent = `${key || ''} [${value.length}]`;
152243
value.forEach((item, index) => {
@@ -171,28 +262,26 @@ <h1>JSON Preview</h1>
171262
processNode(data, parentElement);
172263
}
173264

174-
function updatePreview() {
175-
const input = document.getElementById('json-input').value;
176-
const rawPreview = document.getElementById('raw-json');
177-
const errorMessage = document.getElementById('error-message');
265+
// Function to update the preview
266+
function updatePreview(tabId) {
267+
const input = document.querySelector(`#${tabId} .json-input`).value;
268+
const rawPreview = document.querySelector(`#${tabId} .raw-json`);
269+
const errorMessage = document.querySelector(`#${tabId} .error-message`);
178270

179271
try {
180272
const parsed = JSON.parse(input);
181273
rawPreview.textContent = JSON.stringify(parsed, null, 2);
182-
createTreeView(parsed, document.getElementById('tree-view'));
274+
createTreeView(parsed, document.querySelector(`#${tabId} .tree-view`));
183275
errorMessage.textContent = '';
184-
showTab('raw');
276+
showPreviewTab(tabId, 'raw');
185277
} catch (e) {
186278
errorMessage.textContent = `Error: ${e.message}`;
187-
showTab('error');
279+
showPreviewTab(tabId, 'error');
188280
}
189281
}
190282

191-
// Event listeners
192-
document.getElementById('json-input').addEventListener('input', updatePreview);
193-
194-
// Initial preview
195-
updatePreview();
283+
// Add event listener for the first tab
284+
document.querySelector('#tab1 .json-input').addEventListener('input', () => updatePreview('tab1'));
196285
</script>
197286
</body>
198287
</html>

0 commit comments

Comments
 (0)