-
Notifications
You must be signed in to change notification settings - Fork 5
/
live-loop.js
345 lines (305 loc) · 10.1 KB
/
live-loop.js
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
/**
* All of the live-loop javascript code necessary to make live loop work.
*/
(function($)
{
// create the liveloop object
window.liveloop = window.liveloop || {};
var liveloop = window.liveloop;
// the counter is used to throttle XMLHttpRequests for triple lookups
liveloop.tripleCounter = 1;
// the counter timeout is used to keep track of the timeout object if the
// triple counter needs to be replaced with a new timeout object
liveloop.tripleCounterTimeout = null;
// the counter is used to throttle XMLHttpRequests for triple lookups
liveloop.prefixCounter = 1;
// the counter timeout is used to keep track of the timeout object if the
// counter needs to be replaced with a new timeout object
liveloop.prefixCounterTimeout = null;
// the active vocabularies for the page
liveloop.vocabs =
{
dc: "http://purl.org/dc/terms/",
foaf: "http://xmlns.com/foaf/0.1/"
};
/**
* Generates the HTML prologue for the document, which is prepended to the
* editable text area.
*/
liveloop.generateCodePrologue = function()
{
var prologue = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML+RDFa 1.0//EN\" \"http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd\">\n<html xmlns=\"http://www.w3.org/1999/xhtml\"";
for(k in liveloop.vocabs)
{
prologue += "\n xmlns:" + k + "=\"" + liveloop.vocabs[k] + "\"";
}
prologue += ">\n <head>\n <title>Test Snippet</title>\n </head>\n <body>\n";
return prologue;
}
/**
* Performs the code prologue setup, binding hotspot areas for the editable
* portions of the code prologue.
*/
liveloop.setupCodePrologue = function()
{
var e = $("#code-prologue");
var encodedPrologue = $('<div/>').text(liveloop.generateCodePrologue()).html();
encodedPrologue = encodedPrologue.replace("xmlns=",
"<span id=\"prefix-editor-hotspot\" " +
"title=\"Click to edit the available vocabularies\">xmlns=");
encodedPrologue = encodedPrologue.replace(" <head>",
"</span> <head>");
e.html(encodedPrologue);
// setup the editor hotspot event
$("#prefix-editor-hotspot").click(liveloop.showPrefixEditor);
};
/**
* Generates the HTML epilogue for the document, which is appended to the
* editable text area.
*/
liveloop.generateCodeEpilogue = function()
{
return "\n </body>\n</html>";
}
/**
* Performs the code epilogue setup, converting the epilogue into a
* displayable format.
*/
liveloop.setupCodeEpilogue = function()
{
var e = $("#code-epilogue");
var encodedEpilogue = $('<div/>')
.text(liveloop.generateCodeEpilogue()).html();
e.html(encodedEpilogue);
};
/**
* Displays the prefix editor for the document, which allows prefixes to be
* declared using only short-names for vocabularies.
*/
liveloop.showPrefixEditor = function()
{
var pe = $("#prefix-editor");
var pl = $("#prefix-list").html("");
var ple = $("#prefix-list-editor").html("");
for(k in liveloop.vocabs)
{
liveloop.addPrefixListItem(k, liveloop.vocabs[k]);
}
ple.append("<div>xmlns:<input id=\"prefix-input\" type=\"text\" " +
"size=\"8\" />=\"<span id=\"prefix-editor-lookup-result\"></span>" +
"<img id=\"prefix-loading\" " +
"style=\"margin: 2px 2px; display: none;\" " +
"src=\"loading.gif\" />\"</div>");
liveloop.setupPrefixEditor();
// show and set focus on the prefix editor
//pe.show();
var prefixCount = 0;
for(i in liveloop.vocabs) prefixCount++;
$("#prefix-input").focus();
$("#prefix-editor").modal({
maxWidth: ($(document).width() / 4) * 3,
minHeight: 210 + (liveloop.getLineHeight() * prefixCount)
});
};
/**
* Binds the UI to the JavaSCript callback methods.
*/
liveloop.setupPrefixEditor = function()
{
var pel = $("#prefix-input").keyup(liveloop.checkPrefixCounter);
}
/**
* Binds the UI to the JavaScript callback methods.
*/
liveloop.setupUi = function()
{
liveloop.setupCodePrologue();
liveloop.setupCodeEpilogue();
$("#code-body").keyup(liveloop.checkTripleCounter);
// display the initial triples
liveloop.updateTriples();
};
/**
* Adds a prefix item to the prefix list UI.
*
* @param prefix the prefix to add to the UI.
* @param uri the uri that the prefix maps to.
*/
liveloop.addPrefixListItem = function(prefix, uri)
{
// add the item to the prefix list
$("#prefix-list")
.append("<div class=\"icon\" id=\"prefix-list-item-" + prefix + "\">" +
"<span><img id=\"prefix-list-image-" + prefix +
"\" src=\"list-remove.png\" ></img>" + "xmlns:" + prefix +
"=\"" + uri + "\"</span></div>");
// add a click handler to remove the item from the prologue and the
// vocabulary list
$("#prefix-list-item-" + prefix).click(function(event)
{
delete liveloop.vocabs[prefix];
liveloop.setupCodePrologue();
$("#prefix-list-item-" + prefix).remove();
liveloop.updateTriples();
});
}
/**
* Retrieve the standard line height for the page.
*
* @return the standard line height on the page in pixels.
*/
liveloop.getLineHeight = function()
{
var rval = 10;
var div = $('<div style="height: 1em;"></div>').appendTo('body');
var rval = div.height();
div.remove();
return rval;
}
/**
* Performs a check on the prefix editor counter. If the counter hits 0, an
* XMLHttpRequest is sent to the server for processing.
*
* @param event the browser event that triggered this method.
*/
liveloop.checkPrefixCounter = function(event)
{
var setPrefixTimeout = true;
if(event)
{
liveloop.prefixCounter = 1;
// if the enter key was pressed, cancel the event, update the
// prefix list, and hide the dialog
if(event.keyCode == 13)
{
var prefix = $("#prefix-input").val();
var resolved = $("#prefix-editor-lookup-result").text();
if(prefix.length > 0 && resolved.length > 0)
{
// hide the dialog
liveloop.vocabs[prefix] = resolved;
liveloop.setupCodePrologue();
$("#prefix-loading").hide();
// adjust the size of the prefix editor
var smcheight = $("#simplemodal-container").height();
$("#simplemodal-container").height(
smcheight + 2 * liveloop.getLineHeight());
// append to the prefix list
liveloop.addPrefixListItem(prefix, resolved);
liveloop.updateTriples();
// reset the prefix editor
$("#prefix-input").val("");
$("#prefix-editor-lookup-result").text("");
// reset the prefix counters
liveloop.prefixCounter = null;
if(liveloop.prefixCounterTimeout)
{
clearTimeout(liveloop.prefixCounterTimeout);
}
setPrefixTimeout = false;
}
}
}
else
{
liveloop.prefixCounter--;
}
if(liveloop.prefixCounter <= 0)
{
liveloop.lookupPrefix();
}
else if(setPrefixTimeout)
{
$("#prefix-loading").show();
if(liveloop.prefixCounterTimeout)
{
clearTimeout(liveloop.prefixCounterTimeout);
}
liveloop.prefixCounterTimeout =
setTimeout(liveloop.checkPrefixCounter, 1000);
}
};
/**
* Performs a check on the editing counter. If the counter hits 0, an
* XMLHttpRequest is sent to the server for processing.
*
* @param event the browser event that triggered this method.
*/
liveloop.checkTripleCounter = function(event)
{
if(event)
{
liveloop.tripleCounter = 1;
}
else
{
liveloop.tripleCounter--;
}
if(liveloop.tripleCounter <= 0)
{
$("#triples-loading").hide();
liveloop.updateTriples();
}
else
{
$("#triples-loading").show();
if(liveloop.tripleCounterTimeout)
{
clearTimeout(liveloop.tripleCounterTimeout);
}
liveloop.tripleCounterTimeout =
setTimeout(liveloop.checkTripleCounter, 1000);
}
};
/**
* Updates the triples that are being displayed on the page after contacting
* the server and retrieving the triples.
*/
liveloop.updateTriples = function()
{
var rdfaDocument = liveloop.generateCodePrologue() +
$("#code-body").val() + liveloop.generateCodeEpilogue();
$.ajax({
url: "triples",
type: "POST",
success: function(data)
{
$("#triple-data").html(data);
},
contentType: "application/xml+xhtml",
processData: false,
data: rdfaDocument
});
};
/**
* Updates the prefix that is being displayed on the page after contacting
* the server and retrieving the prefix information.
*/
liveloop.lookupPrefix = function()
{
var prefix = $("#prefix-input").val();
if(prefix.length > 0)
{
$.ajax({
url: "http://prefix.cc/" + prefix + ".file.json",
type: "GET",
success: function(data)
{
if(prefix in data)
{
$("#prefix-editor-lookup-result").text(data[prefix]);
}
$("#prefix-loading").hide();
},
error: function(data)
{
$("#prefix-loading").hide();
},
parsererror: function(data)
{
$("#prefix-loading").hide();
}
});
}
};
})(jQuery);