-
Notifications
You must be signed in to change notification settings - Fork 14
/
preview-editor.html
103 lines (90 loc) · 3.13 KB
/
preview-editor.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.wz_jsgraphics.js"></script>
<script type="text/javascript" src="js/arrowsandboxes.js"></script>
<link type="text/css" rel="stylesheet" href="style/arrowsandboxes.css">
</head>
<style>
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
</style>
<body>
<h3>About</h3>
<p>This is the preview editor for <a href="http://www.headjump.de/article/arrows-and-boxes" title="Arrows-and-boxes documentation and examples">Arrows-and-boxes</a> - a javascript plugin that automatically draws nice arrows and boxes from simple markup.</p>
<p>Enter your arrows-and-boxes code below - the preview will update itself each some seconds.</p>
<p>This editor can only show you a live preview of what your drawing will look like. <strong>Go get your code back to your site don't forget to copy and paste it!</strong></p>
<script type="text/javascript">
var bulkReplace = function(source, replaces) {
if (replaces.length % 2 !== 0) throw "bulkReplace error: invalid replace pairs";
for(var i = 0; i < (replaces.length / 2); i++) {
var replace_this = replaces[i * 2];
var with_that = replaces[(i * 2) + 1];
var pos = source.indexOf(replace_this);
while(pos != -1) {
source = source.substring(0, pos) + with_that + source.substring(pos + replace_this.length);
pos = source.indexOf(replace_this);
}
}
return source;
}
var update_aab = function() {
(function($) {
$("#aab-des-container").empty().append("<pre class='aab-updated'/>");
var x = $("pre.aab-updated");
x.html($("#aab-source").val()).arrows_and_boxes();
if($("#aab_cb").attr("checked")) setTimeout(update_aab, 1500);
})(jQuery);
}
jQuery(function() {
jQuery("#aab_cb").attr("checked", true);
var init_g = "(Editor) > shows (Graph preview)";
var us = unescape(document.location.search);
if(us.indexOf("g=") != -1) {
init_g = unescape(us.substring(3));
}
jQuery("#aab-source").val(bulkReplace(init_g, [">", ">", "<", "<"]));
});
setTimeout(update_aab, 800);
</script>
<h3>Preview editor</h3>
<p>
<label for="aab_cb"><input ckecked="yes" type="checkbox" id="aab_cb" name="aab_cb" onchange="update_aab();"> auto update</label> | <a href="#" onclick="update_aab(); return false;">Update now</a>
</p>
<p>
<textarea id="aab-source" name="user_eingabe" cols="65" rows="8"></textarea>
</p>
<div id="aab-des-container">
</div>
<h3>Quick reference</h3>
<table>
<tr>
<td>Simple node</td>
<td><pre>(Node title | subtitle)</pre></td>
</tr>
<tr>
<td>New line</td>
<td><pre>(Node1) || (Node2)</pre></td>
</tr>
<tr>
<td>Arrow types</td>
<td><pre>-, >, <, <></pre></td>
</tr>
<tr>
<td>Arrows</td>
<td>
<pre>
(Node1) > (Node 2 >[n3])
(n3: Node 3)
</pre></td>
</tr>
<tr>
<td>Escape HTML</td>
<td><pre>( {{<a href="http://headjump.de">link</a>}} )</pre></td>
</tr>
</table>
</body>
</html>