-
Notifications
You must be signed in to change notification settings - Fork 7
/
wrapper.html
239 lines (227 loc) · 8.58 KB
/
wrapper.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Datalog.js</title>
<script type="text/javascript" src="datalog/datalog.js"></script>
<link type="text/css" rel="stylesheet" href="normalize.css">
<script src="css_browser_selector_dev.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="tablesorter/js/jquery.tablesorter.min.js"></script>
<script src="tablesorter/js/jquery.tablesorter.widgets.min.js"></script>
<link type="text/css" href="tablesorter/css/datalog/style.css" rel="stylesheet">
<script src="prefixfree.min.js"></script>
<script src="prefixfree.jquery.js"></script>
<!-- <script src="jquery.qtip.min.js"></script>
<link type="text/css" rel="stylesheet" href="jquery.qtip.css"> -->
<link type="text/css" rel="stylesheet" href="CodeMirror/lib/codemirror.css">
<script type="text/javascript" src="CodeMirror/lib/codemirror.js"></script>
<script type="text/javascript" src="datalogCodeMirrorMode.js"></script>
<script type="text/javascript" src="CodeMirror/mode/lua/lua.js"></script>
<link rel="stylesheet" href="CodeMirror/theme/neat.css">
<link rel="stylesheet" href="CodeMirror/theme/elegant.css">
<link rel="stylesheet" href="CodeMirror/theme/erlang-dark.css">
<link rel="stylesheet" href="CodeMirror/theme/night.css">
<link rel="stylesheet" href="CodeMirror/theme/monokai.css">
<link rel="stylesheet" href="CodeMirror/theme/cobalt.css">
<link rel="stylesheet" href="CodeMirror/theme/eclipse.css">
<link rel="stylesheet" href="CodeMirror/theme/rubyblue.css">
<link rel="stylesheet" href="CodeMirror/theme/lesser-dark.css">
<link rel="stylesheet" href="CodeMirror/theme/xq-dark.css">
<link rel="stylesheet" href="CodeMirror/theme/ambiance.css">
<link rel="stylesheet" href="CodeMirror/theme/blackboard.css">
<link rel="stylesheet" href="CodeMirror/theme/vibrant-ink.css">
<script src="CodeMirror/lib/util/simple-hint.js"></script>
<link rel="stylesheet" href="CodeMirror/lib/util/simple-hint.css">
<script src="datalog-hint.js"></script>
<!-- <script src="es6-shim/es6-shim.js"></script> -->
<script>/*the only js is to continuously checking the value of the dropdown. for posterity*/
//var j = {"datalogchange": 1, "luachange": 1, "querychange": 1};
//var i = setInterval(function(){$("#trace").val($("input[name=line-style]:checked").val());},100);
window["editorOnChange"] = function(editor, change, nameToBox) {
/*
console.log(arguments);
var editor = arguments[0], change = arguments[1];
var type;
if (change["text"])
type="deletion";
else
type="addition";
var boxToClass = new Map();
boxToClass.set(nameToBox["datalog"], "datalogchange");
boxToClass.set(nameToBox["lua"], "luachange");
boxToClass.set(nameToBox["query"], "querychange");
var cl = boxToClass.get(editor);
var id = cl + "-" + j[cl];
$("#image-dropdown").append(
$("<input type='radio' id='"+id+"' name='line-style-" + cl + "' value='"+j[cl]+"' " + (j[cl] !== 1 ? "" : "checked") + " />")
).append(
$("<label for='" + id + "'>").addClass(cl).addClass(type).append(
$("<div class='changedcontent'>").append(change["text"] ? change.text : "no text available")
).append(
$("<div class='time'>").append(new Date().toString())
)
);
j[cl]++;
*/
};
</script>
<script src="wrapper.js"></script>
<script>wrapper({ dataDir: './data' });</script>
<link type="text/css" rel="stylesheet" href="wrapper.css">
<!--
<style>
/*o.v.*/
#image-dropdown {
/*style the "box" in its minimzed state*/
border:1px solid #999; width:300px; height:75px; overflow:hidden;
/*animate collapsing the dropdown from open to closed state (v. fast)*/
-moz-transition: height 0.1s;
-webkit-transition: height 0.1s;
-ms-transition: height 0.1s;
-o-transition: height 0.1s;
transition: height 0.1s;
background-color: #fff;
}
#image-dropdown:hover {
/*when expanded, the dropdown will get native means of scrolling*/
height:600px; overflow-y:scroll;
/*nice and smooth expand - speed this up at your preference or remove animation altogether*/
-moz-transition: height 0.5s;
-webkit-transition: height 0.5s;
-ms-transition: height 0.5s;
-o-transition: height 0.5s;
transition: height 0.5s;
}
#image-dropdown input {
/*hide the nasty default radio buttons. like, completely!*/
position:absolute;top:0;left:0;opacity:0;
}
#image-dropdown label {
color: black;
overflow:hidden;
/*style the labels to look like dropdown options, kinda*/
display:none; margin:2px; height:46px;
border-left: 0.2em solid transparent;
font-size: 0.8em;
text-overflow: ellipsis;
text-wrap: none;
white-space: nowrap;
font-weight: lighter;
}
#image-dropdown label.addition::before {
content: 'Addition';
}
#image-dropdown label.datalogchange {
border-left: 0.2em solid red;
}
#image-dropdown label.luachange {
border-left: 0.2em solid green;
}
#image-dropdown label.querychange {
border-left: 0.2em solid blue;
}
#image-dropdown:hover label{
/*this is how labels render in the "expanded" state. we want to see only the selected radio button in the collapsed menu, and all of them when expanded*/
display:block;
}
#image-dropdown label:hover {
opacity:0.75;
}
#image-dropdown input:checked + label {
/*tricky! labels immediately following a checked radio button (with our markup they are semantically related) should be fully opaque regardless of hover, and they should always be visible (i.e. even in the collapsed menu*/
opacity: 1 !important; font-weight:bold !important; display:block;
}
/*pfft, nothing as cool here, just the value trace
#trace {margin:0 0 20px;}*/
#historycontainer { position:absolute; top:0em; left: 65%; z-index: 100; }
.header.row { overflow:visible; }
</style>
-->
</head>
<body>
<div class="header row">
<!--
<div id="historycontainer">
<input type="text" value="" id="trace"/>
<div id="image-dropdown" >
</div>
</div>
-->
<div id="selectdiv">
<label for="select">Theme:</label>
<select id="select">
<option>ambiance</option>
<option>blackboard</option>
<option>cobalt</option>
<option>eclipse</option>
<option selected>elegant</option>
<option>erlang-dark</option>
<option>lesser-dark</option>
<option>monokai</option>
<option>neat</option>
<option>night</option>
<option>rubyblue</option>
<option>vibrant-ink</option>
<option>xq-dark</option>
</select>
</div>
<div><h2>Datalog.js</h2> (not affiliated with, but using <a href="http://datalog.sourceforge.net/">MITRE lightweight Datalog</a>)</div>
Examples (click to overwrite and execute):
<ul id="examples">
</ul>
</div>
<form id="codeform" action="#" method="get" onsubmit="javascript:return false;">
<div class="body row scroll-y">
<table><tr>
<td class="pane" id="datalogpane">
<div class="fline"><label for="datalog">Datalog program:</label></div>
<textarea id="datalog"></textarea>
</td>
<td class="pane" id="luapane">
<div class="tabcontainer" id="tabcontainer">
<ul class="tabs">
<li class="tnl t1l"><label for="lua"><a href="javascript:tab('t1','#tabcontainer');">Lua</a></label></li>
<li class="tnl t2l"><label for="queries"><a href="javascript:tab('t2','#tabcontainer');">Datalog queries</a></label></li>
</ul>
<div class="t1">
<textarea id="lua"></textarea>
</div>
<div class="t2">
<textarea id="queries"></textarea>
</div>
</div>
</td>
<td class="pane" id="outputpane">
<!-- <div class="fline">Output:</div>-->
<div class="tabcontainer taboneactive" id="outputtabcontainer">
<ul class="tabs">
<li class="tnl t1l"><a href="javascript:tab('t1','#outputtabcontainer');">output as Datalog</a></li>
<li class="tnl t2l"><a href="javascript:tab('t2','#outputtabcontainer');">output as tables</a></li>
</ul>
<div class="t1">
<div class="outputtab">
<pre id="output">
Loading...
</pre>
</div>
</div>
<div class="t2">
<div class="outputtab">
<div id="tableoutput">
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
<div class="footer row">
<div id="footerpane" class="pane">
<input id="submitbutton" class="button" type="submit" value="Execute">
</div>
</div>
</form>
</body>
</html>