papagaio 0.7.1 → 0.7.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.html CHANGED
@@ -2,263 +2,192 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
6
6
  <title>🦜 papagaio</title>
7
- </head>
8
- <body>
9
-
10
- <h1>🦜 papagaio </h1>
11
- <p>
12
- easy yet powerful text preprocessor.
13
- </p>
14
- <hr>
15
- <div>
16
- <strong>
17
- <label for="sketchSelect">Current Sketch:</label>
18
- </strong>
19
-
20
- <select id="sketchSelect" onchange="switchSketch()">
21
- <option value="">-- Select Sketch --</option>
22
- </select>
23
- |
24
- <button onclick="createNewSketch()">New Sketch</button>
25
- <button onclick="renameCurrentSketch()">Rename</button>
26
- <button onclick="deleteCurrentSketch()">Delete</button>
27
- </div>
28
- <hr>
29
- <div>
30
- <strong>
31
- <label for="sketchSelect">Sketches:</label>
32
- </strong>
33
- <button onclick="exportSketches()">Export</button>
34
- <input type="file" id="importFileInput" onchange="importSketches(this.files[0])" accept=".json">
35
- </div>
36
-
37
- <hr>
38
-
39
- <h3>INPUT</h3>
40
- <textarea id="input" rows="15" cols="80" style="width: 70%; font-family: monospace;"></textarea>
41
-
42
- <br><br>
43
-
44
- <button onclick="processCode()">Process</button>
45
-
46
- <br><br>
47
-
48
- <h3>OUTPUT</h3>
49
- <textarea id="output" rows="15" cols="80" style="width: 70%; font-family: monospace;" readonly></textarea>
50
-
51
- <script type="module">
52
- import { Papagaio } from './src/papagaio.js';
53
-
54
- class SketchesManager {
55
- constructor() {
56
- this.sketches = this.loadSketches();
57
- this.currentSketchId = this.loadCurrentSketchId();
58
- }
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ -webkit-tap-highlight-color: transparent;
13
+ }
59
14
 
60
- loadSketches() {
61
- try {
62
- const saved = localStorage.getItem('papagaio_sketches');
63
- return saved ? JSON.parse(saved) : {};
64
- } catch {
65
- return {};
66
- }
67
- }
15
+ body {
16
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
17
+ background: #fff;
18
+ color: #000;
19
+ overflow: hidden;
20
+ }
68
21
 
69
- saveSketches() {
70
- try {
71
- localStorage.setItem('papagaio_sketches', JSON.stringify(this.sketches));
72
- } catch {}
73
- }
22
+ .app {
23
+ max-width: 100%;
24
+ height: 100vh;
25
+ display: flex;
26
+ flex-direction: column;
27
+ }
74
28
 
75
- loadCurrentSketchId() {
76
- try {
77
- return localStorage.getItem('papagaio_current_sketch');
78
- } catch {
79
- return null;
80
- }
81
- }
29
+ .header {
30
+ background: #fff;
31
+ padding: 24px 20px;
32
+ text-align: center;
33
+ border-bottom: 1px solid #ddd;
34
+ }
82
35
 
83
- setCurrentSketchId(id) {
84
- this.currentSketchId = id;
85
- try {
86
- localStorage.setItem('papagaio_current_sketch', id);
87
- } catch {}
88
- }
36
+ .header h1 {
37
+ font-size: 2rem;
38
+ color: #000;
39
+ margin-bottom: 4px;
40
+ }
89
41
 
90
- createSketch(name) {
91
- const id = Date.now().toString();
92
- this.sketches[id] = {
93
- id,
94
- name,
95
- input: '',
96
- createdAt: new Date().toLocaleString()
97
- };
98
- this.saveSketches();
99
- this.setCurrentSketchId(id);
100
- return id;
101
- }
42
+ .header p {
43
+ font-size: 0.9rem;
44
+ color: #666;
45
+ }
102
46
 
103
- getSketch(id) {
104
- return this.sketches[id] || null;
105
- }
47
+ .tabs {
48
+ display: flex;
49
+ background: #fff;
50
+ border-bottom: 1px solid #ddd;
51
+ }
106
52
 
107
- updateSketch(id, data) {
108
- if (this.sketches[id]) {
109
- Object.assign(this.sketches[id], data);
110
- this.saveSketches();
111
- }
112
- }
53
+ .tab {
54
+ flex: 1;
55
+ padding: 18px;
56
+ text-align: center;
57
+ font-size: 1rem;
58
+ font-weight: 500;
59
+ background: #f5f5f5;
60
+ border: none;
61
+ cursor: pointer;
62
+ transition: all 0.2s;
63
+ color: #666;
64
+ border-right: 1px solid #ddd;
65
+ }
113
66
 
114
- deleteSketch(id) {
115
- delete this.sketches[id];
116
- this.saveSketches();
117
- if (this.currentSketchId === id) {
118
- const remaining = Object.keys(this.sketches);
119
- this.currentSketchId = remaining.length > 0 ? remaining[0] : null;
120
- if (this.currentSketchId) {
121
- this.setCurrentSketchId(this.currentSketchId);
122
- }
123
- }
124
- }
67
+ .tab:last-child {
68
+ border-right: none;
69
+ }
125
70
 
126
- getAllSketches() {
127
- return Object.values(this.sketches).sort((a, b) =>
128
- parseInt(b.id) - parseInt(a.id)
129
- );
130
- }
71
+ .tab.active {
72
+ background: #fff;
73
+ color: #000;
74
+ border-bottom: 2px solid #000;
75
+ }
131
76
 
132
- renameSketch(id, newName) {
133
- if (this.sketches[id]) {
134
- this.sketches[id].name = newName;
135
- this.saveSketches();
136
- }
137
- }
77
+ .content {
78
+ flex: 1;
79
+ display: flex;
80
+ flex-direction: column;
81
+ overflow: hidden;
138
82
  }
139
83
 
140
- let processor = new Papagaio();
141
- let sketchesManager;
84
+ .editor-container {
85
+ display: none;
86
+ flex-direction: column;
87
+ flex: 1;
88
+ }
142
89
 
143
- window.addEventListener('load', () => {
144
- sketchesManager = new SketchesManager();
145
- loadOrCreateDefaultSketch();
146
- populateSketchSelect();
147
- });
90
+ .editor-container.active {
91
+ display: flex;
92
+ }
148
93
 
149
- function loadOrCreateDefaultSketch() {
150
- let sketch = null;
151
- if (sketchesManager.currentSketchId) {
152
- sketch = sketchesManager.getSketch(sketchesManager.currentSketchId);
153
- }
154
-
155
- if (!sketch) {
156
- const allSketches = sketchesManager.getAllSketches();
157
- if (allSketches.length > 0) {
158
- sketch = allSketches[0];
159
- sketchesManager.setCurrentSketchId(sketch.id);
160
- } else {
161
- const id = sketchesManager.createSketch('Default');
162
- sketch = sketchesManager.getSketch(id);
163
- }
164
- }
165
-
166
- if (sketch) {
167
- document.getElementById('input').value = sketch.input;
168
- document.getElementById('output').value = '';
169
- }
94
+ textarea {
95
+ flex: 1;
96
+ padding: 20px;
97
+ border: none;
98
+ font-family:
99
+ ui-monospace,
100
+ SFMono-Regular,
101
+ Menlo,
102
+ Consolas,
103
+ "Liberation Mono",
104
+ monospace;
105
+ font-size: 15px;
106
+ line-height: 1.55;
107
+ font-weight: 500;
108
+ letter-spacing: 0.2px;
109
+ resize: none;
110
+ background: #fff;
111
+ color: #000;
112
+ white-space: pre;
113
+ overflow-x: auto;
114
+ overflow-y: auto;
115
+ word-break: normal;
170
116
  }
171
117
 
172
- function saveCurrentSketch() {
173
- if (sketchesManager.currentSketchId) {
174
- sketchesManager.updateSketch(sketchesManager.currentSketchId, {
175
- input: document.getElementById('input').value
176
- });
177
- }
118
+ textarea:focus {
119
+ outline: none;
178
120
  }
179
121
 
180
- function populateSketchSelect() {
181
- const select = document.getElementById('sketchSelect');
182
- select.innerHTML = '<option value="">-- Select Sketch --</option>';
183
-
184
- const sketches = sketchesManager.getAllSketches();
185
- sketches.forEach(sketch => {
186
- const option = document.createElement('option');
187
- option.value = sketch.id;
188
- option.textContent = sketch.name;
189
- if (sketch.id === sketchesManager.currentSketchId) {
190
- option.selected = true;
191
- }
192
- select.appendChild(option);
193
- });
122
+ #output {
123
+ background: #fafafa;
194
124
  }
195
125
 
196
- function switchSketch() {
197
- const select = document.getElementById('sketchSelect');
198
- const id = select.value;
199
-
200
- if (!id) return;
201
-
202
- saveCurrentSketch();
203
- sketchesManager.setCurrentSketchId(id);
204
- const sketch = sketchesManager.getSketch(id);
205
-
206
- if (sketch) {
207
- document.getElementById('input').value = sketch.input;
208
- document.getElementById('output').value = '';
126
+ @media (min-width: 768px) {
127
+ .app {
128
+ max-width: 600px;
129
+ margin: 0 auto;
130
+ border-left: 1px solid #ddd;
131
+ border-right: 1px solid #ddd;
209
132
  }
210
133
  }
134
+ </style>
135
+ </head>
136
+ <body>
137
+ <div class="app">
138
+ <div class="header">
139
+ <h1>🦜 papagaio</h1>
140
+ <p>easy yet powerful text preprocessor</p>
141
+ </div>
142
+
143
+ <div class="tabs">
144
+ <button class="tab active" onclick="switchTab('input')">INPUT</button>
145
+ <button class="tab" onclick="switchTab('output')">OUTPUT</button>
146
+ </div>
147
+
148
+ <div class="content">
149
+ <div class="editor-container active" id="inputContainer">
150
+ <textarea id="input"></textarea>
151
+ </div>
152
+ <div class="editor-container" id="outputContainer">
153
+ <textarea id="output" readonly></textarea>
154
+ </div>
155
+ </div>
156
+ </div>
211
157
 
212
- function createNewSketch() {
213
- const name = prompt('Enter sketch name:');
214
- if (!name || !name.trim()) {
215
- alert('Please enter a valid sketch name');
216
- return;
217
- }
218
-
219
- const id = sketchesManager.createSketch(name.trim());
220
- populateSketchSelect();
221
-
222
- const sketch = sketchesManager.getSketch(id);
223
- if (sketch) {
224
- document.getElementById('input').value = sketch.input;
225
- document.getElementById('output').value = '';
226
- }
158
+ <script type="module">
159
+ import Papagaio from './papagaio.js';
160
+
161
+ const processor = new Papagaio();
162
+
163
+ function loadSaved() {
164
+ try {
165
+ const saved = localStorage.getItem('papagaio_input');
166
+ if (saved) {
167
+ document.getElementById('input').value = saved;
168
+ }
169
+ } catch {}
227
170
  }
228
171
 
229
- function renameCurrentSketch() {
230
- if (!sketchesManager.currentSketchId) {
231
- alert('No sketch selected');
232
- return;
233
- }
234
-
235
- const sketch = sketchesManager.getSketch(sketchesManager.currentSketchId);
236
- const newName = prompt('Enter new name:', sketch.name);
237
-
238
- if (!newName || !newName.trim()) {
239
- alert('Please enter a valid name');
240
- return;
241
- }
242
-
243
- sketchesManager.renameSketch(sketchesManager.currentSketchId, newName.trim());
244
- populateSketchSelect();
172
+ function saveInput() {
173
+ try {
174
+ const input = document.getElementById('input').value;
175
+ localStorage.setItem('papagaio_input', input);
176
+ } catch {}
245
177
  }
246
178
 
247
- function deleteCurrentSketch() {
248
- if (!sketchesManager.currentSketchId) {
249
- alert('No sketch selected');
250
- return;
251
- }
252
-
253
- const sketch = sketchesManager.getSketch(sketchesManager.currentSketchId);
179
+ function switchTab(tab) {
180
+ document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
181
+ document.querySelectorAll('.editor-container').forEach(c => c.classList.remove('active'));
254
182
 
255
- if (!confirm(`Are you sure you want to delete "${sketch.name}"? This action cannot be undone.`)) {
256
- return;
183
+ if (tab === 'input') {
184
+ document.querySelectorAll('.tab')[0].classList.add('active');
185
+ document.getElementById('inputContainer').classList.add('active');
186
+ } else {
187
+ document.querySelectorAll('.tab')[1].classList.add('active');
188
+ document.getElementById('outputContainer').classList.add('active');
189
+ processCode();
257
190
  }
258
-
259
- sketchesManager.deleteSketch(sketchesManager.currentSketchId);
260
- loadOrCreateDefaultSketch();
261
- populateSketchSelect();
262
191
  }
263
192
 
264
193
  function processCode() {
@@ -266,66 +195,15 @@
266
195
  const input = document.getElementById('input').value;
267
196
  const output = processor.process(input);
268
197
  document.getElementById('output').value = output;
269
- saveCurrentSketch();
198
+ saveInput();
270
199
  } catch (err) {
271
200
  document.getElementById('output').value = `Error: ${err.message}`;
272
201
  }
273
202
  }
274
203
 
275
- function exportSketches() {
276
- const data = {
277
- papagaio_sketches: localStorage.getItem('papagaio_sketches'),
278
- papagaio_current_sketch: localStorage.getItem('papagaio_current_sketch'),
279
- papagaio_config: localStorage.getItem('papagaio_config')
280
- };
281
-
282
- const blob = new Blob([JSON.stringify(data, null, 2)], {
283
- type: "application/json"
284
- });
285
-
286
- const a = document.createElement("a");
287
- a.href = URL.createObjectURL(blob);
288
- a.download = `papagaio_sketches_${Date.now()}.json`;
289
- a.click();
290
- }
291
-
292
- function importSketches(file) {
293
- if (!file) return;
294
-
295
- const reader = new FileReader();
296
-
297
- reader.onload = () => {
298
- try {
299
- const data = JSON.parse(reader.result);
300
- if (data.papagaio_sketches) {
301
- localStorage.setItem('papagaio_sketches', data.papagaio_sketches);
302
- }
303
- if (data.papagaio_current_sketch) {
304
- localStorage.setItem('papagaio_current_sketch', data.papagaio_current_sketch);
305
- }
306
- if (data.papagaio_config) {
307
- localStorage.setItem('papagaio_config', data.papagaio_config);
308
- }
309
- location.reload();
310
- } catch (err) {
311
- alert('Error importing file: ' + err.message);
312
- }
313
- };
314
-
315
- reader.readAsText(file);
316
- }
317
-
318
- setInterval(() => {
319
- saveCurrentSketch();
320
- }, 1000);
321
-
322
- window.processCode = processCode;
323
- window.switchSketch = switchSketch;
324
- window.createNewSketch = createNewSketch;
325
- window.renameCurrentSketch = renameCurrentSketch;
326
- window.deleteCurrentSketch = deleteCurrentSketch;
327
- window.exportSketches = exportSketches;
328
- window.importSketches = importSketches;
204
+ window.addEventListener('load', loadSaved);
205
+ setInterval(saveInput, 2000);
206
+ window.switchTab = switchTab;
329
207
  </script>
330
208
  </body>
331
209
  </html>
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "papagaio",
3
- "version": "0.7.1",
3
+ "version": "0.7.5",
4
4
  "description": "easy yet powerful preprocessor",
5
- "main": "src/papagaio.js",
5
+ "main": "papagaio.js",
6
6
  "type": "module",
7
7
  "scripts": {
8
8
  "test": "node tests/test.js"