d>
- var elem = null;
|
479
|
|
- if(json instanceof Array){
|
480
|
|
- var bq = $(document.createElement("BLOCKQUOTE"));
|
481
|
|
- bq.append($('<div class="brackets">[</div>'));
|
482
|
|
-
|
483
|
|
- bq.prepend(this.addUI(json));
|
484
|
|
- if (parent) {
|
485
|
|
- if (this._showWipe) bq.prepend(this.wipeUI(key, parent));
|
486
|
|
- bq.prepend(this.deleteUI(key, parent));
|
487
|
|
- }
|
|
341
|
+ };
|
488
|
342
|
|
489
|
|
- for(var i = 0; i < json.length; i++) {
|
490
|
|
- var innerbq = $(document.createElement("BLOCKQUOTE"));
|
491
|
|
- var newElem = this.build(json[i], innerbq, json, i, root);
|
492
|
|
- if (newElem) if (newElem.text() == "??") elem = newElem;
|
493
|
|
- bq.append(innerbq);
|
494
|
|
- }
|
|
343
|
+ JSONEditor.prototype.logJSON = function() {
|
|
344
|
+ return console.log(JSON.stringify(this.json, null, 2));
|
|
345
|
+ };
|
495
|
346
|
|
496
|
|
- bq.append($('<div class="brackets">]</div>'));
|
497
|
|
- node.append(bq);
|
498
|
|
- } else if (json instanceof Object) {
|
499
|
|
- var bq = $(document.createElement("BLOCKQUOTE"));
|
500
|
|
- bq.append($('<div class="bracers">{</div>'));
|
501
|
|
-
|
502
|
|
- for(var i in json){
|
503
|
|
- var innerbq = $(document.createElement("BLOCKQUOTE"));
|
504
|
|
- var newElem = this.editable(i.toString(), i.toString(), json, root, 'key').wrap('<span class="key"></span>').parent();
|
505
|
|
- innerbq.append(newElem);
|
506
|
|
- if (newElem) if (newElem.text() == "??") elem = newElem;
|
507
|
|
- if (typeof json[i] != 'string' && typeof json[i] != 'number') {
|
508
|
|
- innerbq.prepend(this.braceUI(i, json));
|
509
|
|
- innerbq.prepend(this.bracketUI(i, json));
|
510
|
|
- if (this._showWipe) innerbq.prepend(this.wipeUI(i, json));
|
511
|
|
- innerbq.prepend(this.deleteUI(i, json, true));
|
|
347
|
+ JSONEditor.prototype.cleanBuilder = function() {
|
|
348
|
+ if (!this.builder) {
|
|
349
|
+ this.builder = $('<div class="builder"></div>');
|
|
350
|
+ this.container.append(this.builder);
|
512
|
351
|
}
|
513
|
|
- innerbq.append($('<span class="colon">: </span>'));
|
514
|
|
- newElem = this.build(json[i], innerbq, json, i, root);
|
515
|
|
- if (newElem) if (newElem.text() == "??") elem = newElem;
|
516
|
|
- bq.append(innerbq);
|
517
|
|
- }
|
|
352
|
+ this.saveScrollPosition();
|
|
353
|
+ this.builder.text('');
|
|
354
|
+ return this.showFunctionButtons("defined");
|
|
355
|
+ };
|
|
356
|
+
|
|
357
|
+ JSONEditor.prototype.updateStruct = function(struct, key, val, kind, selectionStart, selectionEnd) {
|
|
358
|
+ var orderrest;
|
|
359
|
+ if (kind === 'key') {
|
|
360
|
+ if (selectionStart && selectionEnd) {
|
|
361
|
+ val = key.substring(0, selectionStart) + val + key.substring(selectionEnd, key.length);
|
|
362
|
+ }
|
|
363
|
+ struct[val] = struct[key];
|
|
364
|
+ orderrest = 0;
|
|
365
|
+ $.each(struct, function(index, value) {
|
|
366
|
+ var tempval;
|
|
367
|
+ if (orderrest & index !== val) {
|
|
368
|
+ tempval = struct[index];
|
|
369
|
+ delete struct[index];
|
|
370
|
+ struct[index] = tempval;
|
|
371
|
+ }
|
|
372
|
+ if (key === index) {
|
|
373
|
+ return orderrest = 1;
|
|
374
|
+ }
|
|
375
|
+ });
|
|
376
|
+ if (key !== val) {
|
|
377
|
+ return delete struct[key];
|
|
378
|
+ }
|
|
379
|
+ } else {
|
|
380
|
+ if (selectionStart && selectionEnd) {
|
|
381
|
+ val = struct[key].substring(0, selectionStart) + val + struct[key].substring(selectionEnd, struct[key].length);
|
|
382
|
+ }
|
|
383
|
+ return struct[key] = val;
|
|
384
|
+ }
|
|
385
|
+ };
|
518
|
386
|
|
519
|
|
- bq.prepend(this.addUI(json));
|
520
|
|
- if (parent) {
|
521
|
|
- if (this._showWipe) bq.prepend(this.wipeUI(key, parent));
|
522
|
|
- bq.prepend(this.deleteUI(key, parent));
|
523
|
|
- }
|
|
387
|
+ JSONEditor.prototype.getValFromStruct = function(struct, key, kind) {
|
|
388
|
+ if (kind === 'key') {
|
|
389
|
+ return key;
|
|
390
|
+ } else {
|
|
391
|
+ return struct[key];
|
|
392
|
+ }
|
|
393
|
+ };
|
524
|
394
|
|
525
|
|
- bq.append($('<div class="bracers">}</div>'));
|
526
|
|
- node.append(bq);
|
527
|
|
- } else {
|
528
|
|
- elem = this.editable(json.toString(), key, parent, root, 'value').wrap('<span class="val"></span>').parent();
|
529
|
|
- node.append(elem);
|
530
|
|
- node.prepend(this.braceUI(key, parent));
|
531
|
|
- node.prepend(this.bracketUI(key, parent));
|
532
|
|
- if (parent) {
|
533
|
|
- if (this._showWipe) node.prepend(this.wipeUI(key, parent));
|
534
|
|
- node.prepend(this.deleteUI(key, parent));
|
535
|
|
- }
|
|
395
|
+ JSONEditor.prototype.doTruncation = function(trueOrFalse) {
|
|
396
|
+ if (this._doTruncation !== trueOrFalse) {
|
|
397
|
+ this._doTruncation = trueOrFalse;
|
|
398
|
+ return this.rebuild();
|
|
399
|
+ }
|
|
400
|
+ };
|
|
401
|
+
|
|
402
|
+ JSONEditor.prototype.showWipe = function(trueOrFalse) {
|
|
403
|
+ if (this._showWipe !== trueOrFalse) {
|
|
404
|
+ this._showWipe = trueOrFalse;
|
|
405
|
+ return this.rebuild();
|
|
406
|
+ }
|
|
407
|
+ };
|
|
408
|
+
|
|
409
|
+ JSONEditor.prototype.truncate = function(text, length) {
|
|
410
|
+ if (text.length === 0) {
|
|
411
|
+ return '-empty-';
|
|
412
|
+ }
|
|
413
|
+ if (this._doTruncation && text.length > (length || 30)) {
|
|
414
|
+ return text.substring(0, length || 30) + '...';
|
|
415
|
+ }
|
|
416
|
+ return text;
|
|
417
|
+ };
|
|
418
|
+
|
|
419
|
+ JSONEditor.prototype.replaceLastSelectedFieldIfRecent = function(text) {
|
|
420
|
+ if (this.lastEditingUnfocusedTime > (new Date()).getTime() - 200) {
|
|
421
|
+ this.setLastEditingFocus(text);
|
|
422
|
+ return this.rebuild();
|
|
423
|
+ }
|
|
424
|
+ };
|
|
425
|
+
|
|
426
|
+ JSONEditor.prototype.editingUnfocused = function(elem, struct, key, root, kind) {
|
|
427
|
+ var selectionEnd, selectionStart,
|
|
428
|
+ _this = this;
|
|
429
|
+ selectionStart = elem != null ? elem.selectionStart : void 0;
|
|
430
|
+ selectionEnd = elem != null ? elem.selectionEnd : void 0;
|
|
431
|
+ this.setLastEditingFocus = function(text) {
|
|
432
|
+ _this.updateStruct(struct, key, text, kind, selectionStart, selectionEnd);
|
|
433
|
+ return _this.json = root;
|
|
434
|
+ };
|
|
435
|
+ return this.lastEditingUnfocusedTime = (new Date()).getTime();
|
|
436
|
+ };
|
|
437
|
+
|
|
438
|
+ JSONEditor.prototype.edit = function($elem, key, struct, root, kind) {
|
|
439
|
+ var $input, blurHandler, form,
|
|
440
|
+ _this = this;
|
|
441
|
+ form = $("<form></form>").css('display', 'inline');
|
|
442
|
+ $input = $("<input />");
|
|
443
|
+ $input.val(this.getValFromStruct(struct, key, kind));
|
|
444
|
+ $input.addClass('edit_field');
|
|
445
|
+ blurHandler = function() {
|
|
446
|
+ var val, _ref;
|
|
447
|
+ val = $input.val();
|
|
448
|
+ _this.updateStruct(struct, key, val, kind);
|
|
449
|
+ _this.editingUnfocused($elem, struct, (_ref = kind === 'key') != null ? _ref : {
|
|
450
|
+ val: key
|
|
451
|
+ }, root, kind);
|
|
452
|
+ $elem.text(_this.truncate(val));
|
|
453
|
+ $elem.get(0).editing = false;
|
|
454
|
+ if (key !== val) {
|
|
455
|
+ return _this.rebuild();
|
|
456
|
+ }
|
|
457
|
+ };
|
|
458
|
+ $input.blur(blurHandler);
|
|
459
|
+ $input.keydown(function(e) {
|
|
460
|
+ if (e.keyCode === 9 || e.keyCode === 13) {
|
|
461
|
+ _this.doAutoFocus = true;
|
|
462
|
+ return blurHandler();
|
|
463
|
+ }
|
|
464
|
+ });
|
|
465
|
+ $(form).append($input).submit(function(e) {
|
|
466
|
+ e.preventDefault();
|
|
467
|
+ _this.doAutoFocus = true;
|
|
468
|
+ return blurHandler();
|
|
469
|
+ });
|
|
470
|
+ $elem.html(form);
|
|
471
|
+ return $input.focus();
|
|
472
|
+ };
|
|
473
|
+
|
|
474
|
+ JSONEditor.prototype.editable = function(text, key, struct, root, kind) {
|
|
475
|
+ var elem, self;
|
|
476
|
+ self = this;
|
|
477
|
+ elem = $('<span class="editable" href="#"></span>').text(this.truncate(text)).click(function(e) {
|
|
478
|
+ if (!this.editing) {
|
|
479
|
+ this.editing = true;
|
|
480
|
+ self.edit($(this), key, struct, root, kind);
|
|
481
|
+ }
|
|
482
|
+ return true;
|
|
483
|
+ });
|
|
484
|
+ return elem;
|
|
485
|
+ };
|
|
486
|
+
|
|
487
|
+ JSONEditor.prototype.build = function(json, node, parent, key, root) {
|
|
488
|
+ var bq, elem, i, innerbq, jsonkey, jsonvalue, newElem, _i, _ref;
|
|
489
|
+ elem = null;
|
|
490
|
+ if (json instanceof Array) {
|
|
491
|
+ bq = $(document.createElement("BLOCKQUOTE"));
|
|
492
|
+ bq.append($('<div class="brackets">[</div>'));
|
|
493
|
+ bq.prepend(this.addUI(json));
|
|
494
|
+ if (parent) {
|
|
495
|
+ if (this._showWipe) {
|
|
496
|
+ bq.prepend(this.wipeUI(key, parent));
|
|
497
|
+ }
|
|
498
|
+ bq.prepend(this.deleteUI(key, parent));
|
|
499
|
+ }
|
|
500
|
+ for (i = _i = 0, _ref = json.length; 0 <= _ref ? _i < _ref : _i > _ref; i = 0 <= _ref ? ++_i : --_i) {
|
|
501
|
+ innerbq = $(document.createElement("BLOCKQUOTE"));
|
|
502
|
+ newElem = this.build(json[i], innerbq, json, i, root);
|
|
503
|
+ if (newElem && newElem.text() === "??") {
|
|
504
|
+ elem = newElem;
|
|
505
|
+ }
|
|
506
|
+ bq.append(innerbq);
|
|
507
|
+ }
|
|
508
|
+ bq.append($('<div class="brackets">]</div>'));
|
|
509
|
+ node.append(bq);
|
|
510
|
+ } else if (json instanceof Object) {
|
|
511
|
+ bq = $(document.createElement("BLOCKQUOTE"));
|
|
512
|
+ bq.append($('<div class="bracers">{</div>'));
|
|
513
|
+ for (jsonkey in json) {
|
|
514
|
+ jsonvalue = json[jsonkey];
|
|
515
|
+ innerbq = $(document.createElement("BLOCKQUOTE"));
|
|
516
|
+ newElem = this.editable(jsonkey.toString(), jsonkey.toString(), json, root, 'key').wrap('<span class="key"></b>').parent();
|
|
517
|
+ innerbq.append(newElem);
|
|
518
|
+ if (newElem && newElem.text() === "??") {
|
|
519
|
+ elem = newElem;
|
|
520
|
+ }
|
|
521
|
+ if (typeof jsonvalue !== 'string') {
|
|
522
|
+ innerbq.prepend(this.braceUI(jsonkey, json));
|
|
523
|
+ innerbq.prepend(this.bracketUI(jsonkey, json));
|
|
524
|
+ if (this._showWipe) {
|
|
525
|
+ innerbq.prepend(this.wipeUI(jsonkey, json));
|
|
526
|
+ }
|
|
527
|
+ innerbq.prepend(this.deleteUI(jsonkey, json, true));
|
|
528
|
+ }
|
|
529
|
+ innerbq.append($('<span class="colon">: </span>'));
|
|
530
|
+ newElem = this.build(jsonvalue, innerbq, json, jsonkey, root);
|
|
531
|
+ if (newElem && newElem.text() === "??") {
|
|
532
|
+ elem = newElem;
|
|
533
|
+ }
|
|
534
|
+ bq.append(innerbq);
|
|
535
|
+ }
|
|
536
|
+ bq.prepend(this.addUI(json));
|
|
537
|
+ if (parent) {
|
|
538
|
+ if (this._showWipe) {
|
|
539
|
+ bq.prepend(this.wipeUI(key, parent));
|
|
540
|
+ }
|
|
541
|
+ bq.prepend(this.deleteUI(key, parent));
|
|
542
|
+ }
|
|
543
|
+ bq.append($('<div class="bracers">}</div>'));
|
|
544
|
+ node.append(bq);
|
|
545
|
+ } else {
|
|
546
|
+ elem = this.editable(json.toString(), key, parent, root, 'value').wrap('<span class="val"></span>').parent();
|
|
547
|
+ node.append(elem);
|
|
548
|
+ node.prepend(this.braceUI(key, parent));
|
|
549
|
+ node.prepend(this.bracketUI(key, parent));
|
|
550
|
+ if (parent) {
|
|
551
|
+ if (this._showWipe) {
|
|
552
|
+ node.prepend(this.wipeUI(key, parent));
|
|
553
|
+ }
|
|
554
|
+ node.prepend(this.deleteUI(key, parent));
|
|
555
|
+ }
|
|
556
|
+ }
|
|
557
|
+ return elem;
|
|
558
|
+ };
|
|
559
|
+
|
|
560
|
+ return JSONEditor;
|
|
561
|
+
|
|
562
|
+ })();
|
536
|
563
|
|
537
|
|
- }
|
538
|
|
- return elem;
|
539
|
|
-};
|
|
564
|
+}).call(this);
|
|
|
@@ -0,0 +1,37 @@
|
|
1
|
+.json-editor {
|
|
2
|
+ background-color: #FFF;
|
|
3
|
+ position: relative; }
|
|
4
|
+ .json-editor textarea {
|
|
5
|
+ width: 100%;
|
|
6
|
+ font-family: monospace; }
|
|
7
|
+ .json-editor .builder {
|
|
8
|
+ background-color: white;
|
|
9
|
+ overflow: auto;
|
|
10
|
+ font-size: 0.9em; }
|
|
11
|
+ .json-editor .builder .key {
|
|
12
|
+ font-weight: bold; }
|
|
13
|
+ .json-editor .builder .key .edit_field {
|
|
14
|
+ width: 150px; }
|
|
15
|
+ .json-editor .builder .val .edit_field {
|
|
16
|
+ width: 200px; }
|
|
17
|
+ .json-editor blockquote {
|
|
18
|
+ margin: 0;
|
|
19
|
+ padding: 0;
|
|
20
|
+ clear: both;
|
|
21
|
+ padding-left: 7px; }
|
|
22
|
+ .json-editor div {
|
|
23
|
+ background-color: #cfc;
|
|
24
|
+ margin: 1px;
|
|
25
|
+ padding: 2px; }
|
|
26
|
+ .json-editor .val {
|
|
27
|
+ font-style: italic; }
|
|
28
|
+ .json-editor .key a, .json-editor .val a {
|
|
29
|
+ color: black;
|
|
30
|
+ text-decoration: none; }
|
|
31
|
+ .json-editor .icon {
|
|
32
|
+ display: block;
|
|
33
|
+ float: right;
|
|
34
|
+ text-decoration: none;
|
|
35
|
+ padding-left: 5px;
|
|
36
|
+ border: 0;
|
|
37
|
+ color: blue; }
|
|
|
@@ -1,63 +0,0 @@
|
1
|
|
-.json-editor {
|
2
|
|
- background-color: #FFF;
|
3
|
|
- position: relative;
|
4
|
|
-
|
5
|
|
- .builder {
|
6
|
|
- background-color: white;
|
7
|
|
- overflow: auto;
|
8
|
|
- font-size: 0.9em;
|
9
|
|
- padding-right: 10px;
|
10
|
|
-
|
11
|
|
- .key {
|
12
|
|
- font-weight: bold;
|
13
|
|
-
|
14
|
|
- .edit_field {
|
15
|
|
- width: 80px;
|
16
|
|
- }
|
17
|
|
-
|
18
|
|
- a {
|
19
|
|
- color: black;
|
20
|
|
- text-decoration: none;
|
21
|
|
- }
|
22
|
|
- }
|
23
|
|
-
|
24
|
|
- .val {
|
25
|
|
- font-style: italic;
|
26
|
|
-
|
27
|
|
- .edit_field {
|
28
|
|
- width: 180px;
|
29
|
|
- }
|
30
|
|
-
|
31
|
|
- a {
|
32
|
|
- color: black;
|
33
|
|
- text-decoration: none;
|
34
|
|
- }
|
35
|
|
- }
|
36
|
|
- }
|
37
|
|
-
|
38
|
|
- blockquote {
|
39
|
|
- margin: 0;
|
40
|
|
- padding: 0;
|
41
|
|
- clear: both;
|
42
|
|
- padding-left: 7px;
|
43
|
|
- }
|
44
|
|
-
|
45
|
|
- div {
|
46
|
|
- background-color: #cfc;
|
47
|
|
- margin: 1px;
|
48
|
|
- padding: 2px;
|
49
|
|
- }
|
50
|
|
-
|
51
|
|
- .icon {
|
52
|
|
- display: block;
|
53
|
|
- float: right;
|
54
|
|
- text-decoration: none;
|
55
|
|
- padding: 0 5px;
|
56
|
|
- border: 0 !important;
|
57
|
|
- color: blue;
|
58
|
|
-
|
59
|
|
- &:hover {
|
60
|
|
- background-color: #bbb;
|
61
|
|
- }
|
62
|
|
- }
|
63
|
|
-}
|