Hugging Face's logo

Spaces:
RobinsAIWorld
/
jsonic-v2
Running

App Files Community
RobinsAIWorld commited on
Commit
a3640f0
·
verified ·
1 Parent(s): bf8ad4a

🐳 10/02 - 14:15 - 1. sync broken, biuttons broken, and padding didnt change

Browse files
Files changed (2) hide show
  1. index.html +6 -6
  2. script.js +21 -26
index.html CHANGED
@@ -22,7 +22,7 @@
22
  }
23
  </script>
24
  </head>
25
- <body class="bg-slate-900 min-h-screen p-4 md:p-8">
26
  <div class="max-w-7xl mx-auto">
27
  <header class="mb-8 text-center">
28
  <h1 class="text-3xl md:text-4xl font-bold text-slate-100 mb-2">Visual JSON Editor</h1>
@@ -96,15 +96,15 @@
96
  </div>
97
  </div>
98
 
99
- <div class="p-4 flex flex-col lg:flex-row gap-4">
100
  <!-- Left Panel - Visual JSON Editor -->
101
  <div class="w-full lg:w-1/2">
102
- <div class="bg-slate-700 rounded-lg p-4 h-full">
103
  <div class="flex justify-between items-center mb-3">
104
  <h2 class="text-lg font-semibold text-slate-200">Visual Editor</h2>
105
  <span class="text-xs text-slate-400 bg-slate-800 px-2 py-1 rounded">Single-click to edit • Tab to navigate • Shift+Enter for new field</span>
106
  </div>
107
- <div id="jsonEditor" class="json-editor border rounded-lg p-4 font-mono min-h-[500px] max-h-[600px] overflow-auto">
108
  <!-- JSON content will be rendered here -->
109
  </div>
110
  </div>
@@ -112,7 +112,7 @@
112
 
113
  <!-- Right Panel - JSON Code Editor -->
114
  <div class="w-full lg:w-1/2">
115
- <div class="bg-gray-50 rounded-lg p-4 h-full">
116
  <div class="flex justify-between items-center mb-3">
117
  <h2 class="text-lg font-semibold text-gray-700">Code Editor</h2>
118
  <div class="flex gap-2 items-center">
@@ -122,7 +122,7 @@
122
  </button>
123
  </div>
124
  </div>
125
- <textarea id="jsonOutput" class="w-full h-[500px] max-h-[600px] font-mono text-sm p-3 border rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"></textarea>
126
  <div class="mt-3 flex flex-wrap gap-2 justify-between">
127
  <div class="flex gap-2">
128
  <button id="copyBtn" class="btn bg-gray-200 hover:bg-gray-300 px-3 py-2 rounded-lg text-sm">
 
22
  }
23
  </script>
24
  </head>
25
+ <body class="bg-slate-900 min-h-screen p-2 md:p-4">
26
  <div class="max-w-7xl mx-auto">
27
  <header class="mb-8 text-center">
28
  <h1 class="text-3xl md:text-4xl font-bold text-slate-100 mb-2">Visual JSON Editor</h1>
 
96
  </div>
97
  </div>
98
 
99
+ <div class="p-2 flex flex-col lg:flex-row gap-4">
100
  <!-- Left Panel - Visual JSON Editor -->
101
  <div class="w-full lg:w-1/2">
102
+ <div class="bg-slate-700 rounded-lg p-2 h-full">
103
  <div class="flex justify-between items-center mb-3">
104
  <h2 class="text-lg font-semibold text-slate-200">Visual Editor</h2>
105
  <span class="text-xs text-slate-400 bg-slate-800 px-2 py-1 rounded">Single-click to edit • Tab to navigate • Shift+Enter for new field</span>
106
  </div>
107
+ <div id="jsonEditor" class="json-editor border rounded-lg p-2 font-mono min-h-[600px] max-h-[700px] overflow-auto">
108
  <!-- JSON content will be rendered here -->
109
  </div>
110
  </div>
 
112
 
113
  <!-- Right Panel - JSON Code Editor -->
114
  <div class="w-full lg:w-1/2">
115
+ <div class="bg-gray-50 rounded-lg p-2 h-full">
116
  <div class="flex justify-between items-center mb-3">
117
  <h2 class="text-lg font-semibold text-gray-700">Code Editor</h2>
118
  <div class="flex gap-2 items-center">
 
122
  </button>
123
  </div>
124
  </div>
125
+ <textarea id="jsonOutput" class="w-full h-[600px] max-h-[700px] font-mono text-sm p-2 border rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"></textarea>
126
  <div class="mt-3 flex flex-wrap gap-2 justify-between">
127
  <div class="flex gap-2">
128
  <button id="copyBtn" class="btn bg-gray-200 hover:bg-gray-300 px-3 py-2 rounded-lg text-sm">
script.js CHANGED
@@ -1,5 +1,5 @@
1
- =======
2
- ======= Sample JSON data
3
  const sampleJSON = {
4
  "name": "John Doe",
5
  "age": 30,
@@ -20,7 +20,7 @@
20
  }
21
  };
22
 
23
- ======= DOM elements
24
  const jsonEditor = document.getElementById('jsonEditor');
25
  const jsonOutput = document.getElementById('jsonOutput');
26
  const notification = document.getElementById('notification');
@@ -36,6 +36,7 @@
36
  document.body.appendChild(savedIndicator);
37
 
38
  let isApplyingChanges = false;
 
39
 
40
  // Current state
41
  let jsonData = {};
@@ -81,7 +82,7 @@
81
  "newField": "value"
82
  };
83
  loadJSON(newEmpty);
84
- showNotification('New JSON created');
85
  }
86
 
87
  document.getElementById('newBtn').addEventListener('click', newJSON);
@@ -124,7 +125,7 @@
124
  a.click();
125
  document.body.removeChild(a);
126
  URL.revokeObjectURL(url);
127
- showNotification('JSON file saved!');
128
  }
129
 
130
  document.getElementById('saveBtn').addEventListener('click', saveFile);
@@ -134,13 +135,13 @@
134
  copyBtn.addEventListener('click', () => {
135
  jsonOutput.select();
136
  document.execCommand('copy');
137
- showNotification('JSON copied to clipboard!');
138
  });
139
 
140
  document.getElementById('copyBtnMenu').addEventListener('click', () => {
141
  jsonOutput.select();
142
  document.execCommand('copy');
143
- showNotification('JSON copied to clipboard!');
144
  });
145
 
146
  // ==================== DOWNLOAD FUNCTION ====================
@@ -155,7 +156,7 @@
155
  jsonData = JSON.parse(JSON.stringify(history[historyIndex]));
156
  renderEditor();
157
  updateOutput();
158
- showNotification('Undo successful');
159
  }
160
  }
161
 
@@ -165,7 +166,7 @@
165
  jsonData = JSON.parse(JSON.stringify(history[historyIndex]));
166
  renderEditor();
167
  updateOutput();
168
- showNotification('Redo successful');
169
  }
170
  }
171
 
@@ -180,7 +181,7 @@
180
  // ==================== FORMAT FUNCTION ====================
181
  function formatJSON() {
182
  updateOutput();
183
- showNotification('JSON formatted');
184
  }
185
 
186
  document.getElementById('formatBtn').addEventListener('click', formatJSON);
@@ -190,9 +191,9 @@
190
  function validateJSON() {
191
  try {
192
  JSON.parse(jsonOutput.value);
193
- showNotification('JSON is valid!');
194
  } catch (e) {
195
- showNotification('Invalid JSON: ' + e.message);
196
  }
197
  }
198
 
@@ -202,12 +203,12 @@
202
  // ==================== SAMPLE JSON FUNCTION ====================
203
  document.getElementById('sampleBtn').addEventListener('click', () => {
204
  loadJSON(sampleJSON);
205
- showNotification('Sample JSON loaded');
206
  });
207
 
208
  // ==================== INSTRUCTIONS FUNCTION ====================
209
  document.getElementById('instructionsBtn').addEventListener('click', () => {
210
- showNotification('Click on any key or value to edit. Use Tab to navigate, Shift+Enter to add new fields.');
211
  });
212
 
213
  // ==================== CUT/PASTE/DEFAULT FUNCTIONS ====================
@@ -215,7 +216,7 @@
215
  jsonOutput.select();
216
  document.execCommand('copy');
217
  document.execCommand('delete');
218
- showNotification('Cut to clipboard');
219
  });
220
 
221
  document.getElementById('pasteBtnMenu').addEventListener('click', () => {
@@ -223,18 +224,18 @@
223
  try {
224
  const data = JSON.parse(text);
225
  loadJSON(data);
226
- showNotification('JSON pasted and loaded');
227
  } catch (e) {
228
  jsonOutput.value += text;
229
- showNotification('Text pasted');
230
  }
231
  }).catch(() => {
232
- showNotification('Unable to access clipboard');
233
  });
234
  });
235
 
236
  document.getElementById('preferencesBtn').addEventListener('click', () => {
237
- showNotification('Preferences coming soon!');
238
  });
239
 
240
  // ==================== CORE EDITOR FUNCTIONS ====================
@@ -819,7 +820,7 @@
819
  try {
820
  const data = JSON.parse(text);
821
  loadJSON(data);
822
- showNotification('JSON pasted and loaded successfully');
823
  } catch (parseError) {
824
  const start = jsonOutput.selectionStart;
825
  const end = jsonOutput.selectionEnd;
@@ -882,12 +883,6 @@
882
  historyIndex = history.length - 1;
883
  }
884
 
885
- // Initialize on DOM ready
886
- document.addEventListener('DOMContentLoaded', function() {
887
- // Re-initialize with sample data
888
- loadJSON(sampleJSON);
889
- });
890
-
891
  // ==================== DRAG AND DROP FUNCTIONS ====================
892
 
893
  // Add drag event listeners to an element
 
1
+ document.addEventListener('DOMContentLoaded', function() {
2
+ // Sample JSON data
3
  const sampleJSON = {
4
  "name": "John Doe",
5
  "age": 30,
 
20
  }
21
  };
22
 
23
+ // DOM elements
24
  const jsonEditor = document.getElementById('jsonEditor');
25
  const jsonOutput = document.getElementById('jsonOutput');
26
  const notification = document.getElementById('notification');
 
36
  document.body.appendChild(savedIndicator);
37
 
38
  let isApplyingChanges = false;
39
+ let leftEditorLastModified = 0;
40
 
41
  // Current state
42
  let jsonData = {};
 
82
  "newField": "value"
83
  };
84
  loadJSON(newEmpty);
85
+ showNotification('New JSON created', false);
86
  }
87
 
88
  document.getElementById('newBtn').addEventListener('click', newJSON);
 
125
  a.click();
126
  document.body.removeChild(a);
127
  URL.revokeObjectURL(url);
128
+ showNotification('JSON file saved!', false);
129
  }
130
 
131
  document.getElementById('saveBtn').addEventListener('click', saveFile);
 
135
  copyBtn.addEventListener('click', () => {
136
  jsonOutput.select();
137
  document.execCommand('copy');
138
+ showNotification('JSON copied to clipboard!', false);
139
  });
140
 
141
  document.getElementById('copyBtnMenu').addEventListener('click', () => {
142
  jsonOutput.select();
143
  document.execCommand('copy');
144
+ showNotification('JSON copied to clipboard!', false);
145
  });
146
 
147
  // ==================== DOWNLOAD FUNCTION ====================
 
156
  jsonData = JSON.parse(JSON.stringify(history[historyIndex]));
157
  renderEditor();
158
  updateOutput();
159
+ showNotification('Undo successful', false);
160
  }
161
  }
162
 
 
166
  jsonData = JSON.parse(JSON.stringify(history[historyIndex]));
167
  renderEditor();
168
  updateOutput();
169
+ showNotification('Redo successful', false);
170
  }
171
  }
172
 
 
181
  // ==================== FORMAT FUNCTION ====================
182
  function formatJSON() {
183
  updateOutput();
184
+ showNotification('JSON formatted', false);
185
  }
186
 
187
  document.getElementById('formatBtn').addEventListener('click', formatJSON);
 
191
  function validateJSON() {
192
  try {
193
  JSON.parse(jsonOutput.value);
194
+ showNotification('JSON is valid!', false);
195
  } catch (e) {
196
+ showNotification('Invalid JSON: ' + e.message, true);
197
  }
198
  }
199
 
 
203
  // ==================== SAMPLE JSON FUNCTION ====================
204
  document.getElementById('sampleBtn').addEventListener('click', () => {
205
  loadJSON(sampleJSON);
206
+ showNotification('Sample JSON loaded', false);
207
  });
208
 
209
  // ==================== INSTRUCTIONS FUNCTION ====================
210
  document.getElementById('instructionsBtn').addEventListener('click', () => {
211
+ showNotification('Click on any key or value to edit. Use Tab to navigate, Shift+Enter to add new fields.', false);
212
  });
213
 
214
  // ==================== CUT/PASTE/DEFAULT FUNCTIONS ====================
 
216
  jsonOutput.select();
217
  document.execCommand('copy');
218
  document.execCommand('delete');
219
+ showNotification('Cut to clipboard', false);
220
  });
221
 
222
  document.getElementById('pasteBtnMenu').addEventListener('click', () => {
 
224
  try {
225
  const data = JSON.parse(text);
226
  loadJSON(data);
227
+ showNotification('JSON pasted and loaded', false);
228
  } catch (e) {
229
  jsonOutput.value += text;
230
+ showNotification('Text pasted', false);
231
  }
232
  }).catch(() => {
233
+ showNotification('Unable to access clipboard', true);
234
  });
235
  });
236
 
237
  document.getElementById('preferencesBtn').addEventListener('click', () => {
238
+ showNotification('Preferences coming soon!', false);
239
  });
240
 
241
  // ==================== CORE EDITOR FUNCTIONS ====================
 
820
  try {
821
  const data = JSON.parse(text);
822
  loadJSON(data);
823
+ showNotification('JSON pasted and loaded successfully', false);
824
  } catch (parseError) {
825
  const start = jsonOutput.selectionStart;
826
  const end = jsonOutput.selectionEnd;
 
883
  historyIndex = history.length - 1;
884
  }
885
 
 
 
 
 
 
 
886
  // ==================== DRAG AND DROP FUNCTIONS ====================
887
 
888
  // Add drag event listeners to an element