-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
115 lines (101 loc) · 2.77 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
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script type="text/javascript" src="dist/neon.js"></script>
<script type="text/javascript">
var decode = function () {
var input = document.getElementById("input");
var output = document.getElementById("output");
input.classList.remove('error');
output.classList.remove('error');
try {
var result = neon.Dumper.toText(neon.decode(input.value));
} catch (e) {
if (e instanceof neon.Error) {
input.classList.add('error');
output.classList.add('error');
input.style.backgroundPositionY = (e.line - 1) * 15;
result = e.message;
} else {
throw e;
}
}
output.value = result;
};
window.onload = function () {
decode();
document.getElementById("input").onkeyup = decode;
document.getElementById("input").addEventListener('keydown', function (e) {
if (e.keyCode === 9) { // tab was pressed
// get caret position/selection
var start = this.selectionStart;
var end = this.selectionEnd;
var target = e.target;
var value = target.value;
// set textarea value to: text before caret + tab + text after caret
target.value = value.substring(0, start)
+ "\t"
+ value.substring(end);
// put caret at right position again (add one for the tab)
this.selectionStart = this.selectionEnd = start + 1;
// prevent the focus lose
e.preventDefault();
}
}, false);
};
</script>
<style type="text/css">
textarea {
tab-size: 4;
line-height: 15px;
font-family: monospace;
width: 100%;
height: 600px !important;
}
textarea.error {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAPCAIAAACqfTKuAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3goDEiE5cN2KRQAAABJJREFUCNdj+P/wIRMDAwM5GACjXALe69J6XQAAAABJRU5ErkJggg==);
background-repeat: repeat-x;
}
body > .container {
margin-top: 20px;
}
.row {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>NEON-JS</h1>
<a href="http://www.github.com/matej21/neon-js" class="btn btn-primary btn-lg">
View on Github
</a>
<div class="row">
<div class="col-md-6">
<textarea id="input" class="form-control">
# neon file - edit it now!
name: Homer
address:
street: 742 Evergreen Terrace
city: Springfield
country: USA
phones: { home: 555-6528, work: 555-7334 }
children:
- Bart
- Lisa
- Maggie
entity: Column(type="integer")
</textarea>
</div>
<div class="col-md-6">
<textarea id="output" class="form-control"></textarea>
</div>
</div>
<h2>Links</h2>
<ul>
<li><a href="http://ne-on.org/">Official NEON homepage</a></li>
<li><a href="https://github.com/matej21/neon-js">NEON-JS on Github</a></li>
</ul>
</div>
</body>
</html>