-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
395 lines (371 loc) · 9.97 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
<!doctype html><meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title> Try Dotset! </title>
<link rel="stylesheet" href="cm/lib/codemirror.css">
<style>
html, .CodeMirror, .CodeMirror-scroll {
height: 100%;
box-shadow: 0px 0px 3px #fcfcfc inset;
color: #6e3d75;
font-size: 1.1em;
}
span.cm-error { color: #ee6e00 !important; }
html { font-family: sans-serif; }
.CodeMirror {
height: calc(100% - 50px);
}
body {
margin: auto;
width: 90%;
height: 100%;
}
#leditor, #reditor {
width: 50%;
height: 100%;
float: left;
}
#leditor h1, #reditor h1 {
text-align: center;
height: 50px;
margin: 0;
}
#error-0, #error-1 {
position: fixed;
bottom: 0;
background: #f88;
display: none;
z-index: 2;
}
</style>
<div id='leditor'>
<h1> <a href="https://github.com/espadrine/dotset">Dotset</a> File </h1>
<textarea id='lcode'></textarea>
<pre id='error-0'></pre>
</div>
<div id='reditor'>
<h1> <a href="http://json.org/">JSON</a> Equivalent </h1>
<textarea id='rcode'></textarea>
<pre id='error-1'></pre>
</div>
<!-- Start up the editor instances. -->
<script src="cm/lib/codemirror.js"></script>
<script src="cm/mode/javascript/javascript.js"></script>
<script src="cm/mode/yaml/yaml.js"></script>
<script src="js/set.js"></script>
<script>
(function SetEditor() {
// By default, CM maps the Tab key to the insertion of an actual tab.
function betterTab(cm) {
if (cm.somethingSelected()) {
cm.indentSelection("add");
} else {
cm.replaceSelection(cm.getOption("indentWithTabs")? "\t":
Array(cm.getOption("indentUnit") + 1).join(" "), "end", "+input");
}
}
var editors = [
CodeMirror.fromTextArea(document.getElementById("lcode"), {
indentUnit: 2,
mode: { name: "yaml" },
electricChars: false,
extraKeys: { Tab: betterTab }
}),
CodeMirror.fromTextArea(document.getElementById("rcode"), {
indentUnit: 2,
mode: { name: "javascript", json: true },
extraKeys: { Tab: betterTab }
})
];
window.editors = editors;
function setParse(setString) {
try {
window['error-0'].style.display = 'none';
return JSON.stringify(SET.parse(setString), null, 2);
} catch(e) {
showError(0, e.message);
throw e;
}
}
function setStringify(jsonString) {
try {
window['error-1'].style.display = 'none';
return SET.stringify(JSON.parse(jsonString));
} catch(e) {
showError(1, e.message);
throw e;
}
}
function showError(id, msg) {
window['error-' + id].textContent = msg;
window['error-' + id].style.display = 'block';
}
function cmChange(editor) {
// Get the editor id.
var edid = editors.indexOf(editor);
try {
editors[(edid + 1) % 2].setValue
((edid? setStringify: setParse)(editor.getValue()));
} catch(e) {}
}
editors.forEach(function(editor) {
editor.on('focus', function(editor) {
editors.forEach(function(editor) { editor.off('change', cmChange); });
editor.on('change', cmChange);
});
});
// Hey, automatic generation of a Settings file!
var nouns = [
'server',
'title',
'name',
'database',
'IP',
'client',
'author',
'contributor',
'description',
'version',
'homepage',
'repository',
'type',
'URL',
'domain',
'script',
'test',
'engine',
'unicorn'
];
var verbs = [
'eat',
'hug',
'slap',
'kill',
'include',
'ban',
'help',
'compute'
];
function pick(list) {
return list[Math.floor(Math.random()*list.length)];
}
function plural(noun) {
if (noun[noun.length - 1] === 'y') {
noun = noun.slice(0, -1) + 'ie';
}
return noun + 's';
}
function pickNumber(max) {
return Math.ceil(Math.random() * max);
}
// Item generation.
function makeDictionary() {
var obj = {};
var key, val
var num = pickNumber(7);
for (var i = 0; i < num; i++) {
key = pick(nouns);
val = makeObject();
if (val instanceof Array || typeof val === 'number') {
key = plural(key);
}
obj[key] = val;
}
return obj;
}
function makeArray() {
var arr = new Array(pickNumber(7) - 1);
var creator = (Math.random() < 0.5)? makeObject:
pick(nodes);
for (var i = 0; i < arr.length; i++) {
arr[i] = creator();
}
return arr;
}
function makeStringIP() {
return [0,0,0,0].map(function(i) {
return pickNumber(256) - 1;
}).join('.');
}
function makeStringURL() {
return 'http://' + pick(verbs) + '-' + pick(nouns) +
'.' + pick(['com', 'net', 'org']) + '/';
}
function makeSentence() {
var many = Math.random() < 0.5;
return 'The ' + (many? plural(pick(nouns)): pick(nouns))
+ " " + (many? pick(verbs): plural(pick(verbs)))
+ " the " + pick(nouns) + ".";
}
function makeSmallNumber() {
return pickNumber(10);
}
function makeMediumNumber() {
return pickNumber(100);
}
function makeBigNumber() {
var num = Math.random() * 10e6;
if (Math.random() < 0.5) { num |= 0; }
return num;
}
function makeBoolean() { return pick([true, false]); }
function makeNil() {
// Nil is boring, special treatment:
if (Math.random() < 0.5) {
return makeObject();
}
return null;
}
var recursiveNodes = [
makeDictionary,
makeArray
];
var stringNodes = [
makeStringIP,
makeStringURL,
makeSentence
];
var numberNodes = [
makeSmallNumber,
makeMediumNumber,
makeBigNumber
];
var leafNodes = [
makeBoolean
].concat(numberNodes, stringNodes);
var nodes = recursiveNodes.concat(leafNodes);
// We don't want a possibly infinite algorithm do we?
var hitCount = 0;
function makeObject() {
if (hitCount++ === 20) {
nodes = leafNodes;
}
return pick(nodes)();
}
// I'm adding a real-life example from Sublime Text.
var defaultSublime = '\
# Sets the colors used within the text area\n\
color_scheme: Packages/Color Scheme - Default/Monokai.tmTheme\n\
\n\
# Note that the font_face and font_size are overriden in the platform\n\
# specific settings file, for example, "Preferences (Linux).sublime-settings".\n\
# Because of this, setting them here will have no effect: you must set them\n\
# in your User File Preferences.\n\
font_face: ""\n\
font_size: 10\n\
\n\
# Valid options are "no_bold", "no_italic", "no_antialias", "gray_antialias",\n\
# "subpixel_antialias", "no_round" (OS X only) and "directwrite" (Windows only)\n\
font_options: []\n\
\n\
# Characters that are considered to separate words\n\
word_separators: ./\\()"\'-:,.;<>~!@#$%^&*|+=[]{}`~?\n\
\n\
# Set to false to prevent line numbers being drawn in the gutter\n\
line_numbers: yes\n\
\n\
# Set to false to hide the gutter altogether\n\
gutter: yes\n\
\n\
# Spacing between the gutter and the text\n\
margin: 4\n\
\n\
# Columns in which to display vertical rulers\n\
rulers: []\n\
\n\
# Set to true to turn spell checking on by default\n\
spell_check: no\n\
\n\
# The number of spaces a tab is considered equal to\n\
tab_size: 4\n\
\n\
# Set to true to insert spaces when tab is pressed\n\
translate_tabs_to_spaces: no\n\
\n\
# If translate_tabs_to_spaces is true, use_tab_stops will make tab and\n\
# backspace insert/delete up to the next tabstop\n\
use_tab_stops: yes\n\
\n\
# Makes auto indent a little smarter, e.g., by indenting the next line\n\
# after an if statement in C. Requires auto_indent to be enabled.\n\
smart_indent: yes\n\
\n\
# Encoding used when saving new files, and files opened with an undefined\n\
# encoding (e.g., plain ascii files). If a file is opened with a specific\n\
# encoding (either detected or given explicitly), this setting will be\n\
# ignored, and the file will be saved with the encoding it was opened\n\
# with.\n\
default_encoding: UTF-8\n\
\n\
# Files containing null bytes are opened as hexadecimal by default\n\
enable_hexadecimal_encoding: yes\n\
\n\
# Determines what character(s) are used to terminate each line in new files.\n\
# Valid values are \'system\' (whatever the OS uses), \'windows\' (CRLF) and\n\
# \'unix\' (LF only).\n\
default_line_ending: system\n\
\n\
# When enabled, pressing tab will insert the best matching completion.\n\
# When disabled, tab will only trigger snippets or insert a tab.\n\
# Shift+tab can be used to insert an explicit tab when tab_completion is\n\
# enabled.\n\
tab_completion: yes\n\
\n\
# Enable auto complete to be triggered automatically when typing.\n\
auto_complete: yes\n\
\n\
# The maximum file size where auto complete will be automatically triggered.\n\
auto_complete_size_limit: 4194304\n\
\n\
# The delay, in ms, before the auto complete window is shown after typing\n\
auto_complete_delay: 50\n\
\n\
# Controls what scopes auto complete will be triggered in\n\
auto_complete_selector: source - comment\n\
\n\
# Additional situations to trigger auto complete\n\
auto_complete_triggers:\n\
- selector: text.html\n\
characters: <\n\
\n\
# folder_exclude_patterns and file_exclude_patterns control which files\n\
# are listed in folders on the side bar. These can also be set on a per-\n\
# project basis.\n\
folder_exclude_patterns:\n\
- .svn\n\
- .git\n\
- .hg\n\
- CVS\n\
\n\
# List any packages to ignore here. When removing entries from this list,\n\
# a restart may be required if the package contains plugins.\n\
ignored_packages:\n\
- Vintage\n\
';
var comments = ([
'Yes, this is nonesense, random data.',
'The files on both sides are synchronized.',
'Find the secret meaning of all this!',
'You can edit both sides, .set and .json!',
'Which side would you rather edit?',
'Keep calm and carry on.',
'I am embracing the halting problem with this random generation thing.',
'Because some things are, and some things are not!',
'Colorless green ideas sleep furiously.',
'I wish the toaster to be happy, too.'
]).map(function(item) { return '# ' + item + '\n\n'; });
var setFile = (function getSetFile() {
if (Math.random() < 0.08) {
return defaultSublime;
}
return pick(comments) + SET.stringify(function makeRandomObject() {
try {
return ((Math.random() < 0.5)? makeDictionary: makeArray)();
} catch(e) {
return makeRandomObject();
}
}());
}());
editors[0].setValue(setFile);
editors[1].setValue(JSON.stringify(SET.parse(setFile), null, 2));
}());
</script>