forked from MrCoder/Simple-Sequence
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
153 lines (132 loc) · 6.38 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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Simple Sequence</title>
<link rel="stylesheet" type="text/css" href="./css/reset-min.css">
<link rel="stylesheet" href="./css/sequence.css">
<!--[if IE]>
<script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/util/string.js"></script>
<script type="text/javascript" src="js/drawers.js"></script>
<script type="text/javascript" src="js/models.js"></script>
<script type="text/javascript" src="js/view.js"></script>
<script type="text/javascript" src="js/parser.js"></script>
<script type="text/javascript" src="js/seqdia.js"></script>
<script type="text/javascript">
jQuery(window).load(function() {
if (jQuery.browser.safari && document.readyState != 'complete') {
// chrome / safari will trigger load function before images are finished
// check readystate in safari browser to ensure images are done loading
setTimeout(arguments.callee, 100);
}
var dia = $('#canvasContainer').seqdia(true);
dia.drawGrid();
dia.act('');
dia.script($("#script_content")[0].value);
dia.redraw();
window.seqdia = dia;
});
function collapse() {
if ($("#floating_container").hasClass("collapse")) {
$("#floating_container").removeClass("collapse");
$("#floating_container").addClass("expand");
} else {
$("#floating_container").removeClass("expand");
$("#floating_container").addClass("collapse");
}
}
function insertSampleCode(){
var sampleCode ="// The following line defined an Entity (optional)\n:A\nA.methodA(){\n // The method invoked from inside methodA comes here\n internalInvokeOfA()\n B.methodB();\n}";
$("#script_content")[0].value = sampleCode;
window.redraw();
}
</script>
</head>
<body>
<div id="header">
<div style="position: absolute; top: 10px; right: 10px;">
Tips:
<ul>
<li>All script saved as you are typing. Fell free to close and reopen you browser at anytime.</li>
<li>If you want an Entity shown before others defined it on the top with <code>:EntityName</code>.</li>
<li>Keyword <code>new</code> still to be supported, you may use <code>EntityName.new</code> now.</li>
<li><code>Loop/iteration/if-else</code> still to be supported find a way for your representation.</li>
<li>It is designed to support IE 8 or later, but if it doesn't work, try a better browser, such as Firefox/Safari/Chrome.</li>
</ul>
</div>
<h1 style="padding-top: 0.8em; padding-left:0.8em">Simple Sequence</h1>
<h2 id="subTitle" style="padding-bottom:0.8em; padding-left:0.8em">The best ever free online sequence diagram
drawer</h2>
<p class="menu">
<a href="/">Home</a> .
<a href="https://twitter.com/eaglexiao">Twitter</a> .
<a href="http://designpatterns.cnblogs.com">Blog</a> .
<a style="color:white" href="http://www.cnblogs.com/DesignPatterns/archive/2010/11/30/simple-sequence.html">Help</a> .
</p>
</div>
<div id="content_container" class="scroll" style="position: relative; height: 800px;">
<div id="canvasContainer" style="position: relative; width: 2048px; height: 2048px">
</div>
</div>
<div id="floating_container" class="expand">
<div id="script_title" >
<span id="debug" onclick="collapse()">Pseudo Code:</span>
<button id="sample_code" onclick="insertSampleCode()">Insert Sample Code</button>
</div>
<div style="float: right;">
<span id="collapse_button" onclick="collapse()"> </span>
</div>
<div id="script_container">
<textarea id="script_content"
title="Script Content"
onblur="seqdia.redraw()" onkeyup="seqdia.redraw()"></textarea>
<script type="text/javascript">
var supported ="// The following line defined an Entity (optional)\n:A\nA.methodA(){\n // The method invoked from inside methodA comes here\n internalInvokeOfA()\n B.methodB();\n}";
// var supported = '// This is a comment. \ndocument.ready{\n canvasManager.new(){\n a = invokeMethod();\n a.invokeMethod();\n }\n}';
var p = $("#script_content")[0];
if (localStorage != null) {
if (localStorage.script == null) {
localStorage.script = p.value = supported;
} else {
p.value = localStorage.script;
}
if (p.addEventListener) {
p.addEventListener('keyup', function() {
localStorage.script = p.value;
}, false);
} else if (p.attachEvent) {
p.attachEvent('keyup', function() {
localStorage.script = p.value;
}, false);
}
}
$('#script_content').on('blur keyup', function() {
window.seqdia.script($('#script_content').get(0).value);
window.seqdia.redraw();
});
</script>
</div>
</div>
<span id=entity_background style=display:none>
<img id="entity_tl" src="resource/tl.gif"/>
<img id="entity_tr" src="resource/tr.gif"/>
<img id="entity_bl" src="resource/bl.gif"/>
<img id="entity_br" src="resource/br.gif"/>
<img id="entity_in" src="resource/in.png"/>
</span>
<span id="for_css_util" style="display:none">
<span id=entity_box class="entity_box"></span>
<span id=line class="line"></span>
<span id=bar class="bar"></span>
<span id=message class="message"></span>
<span id=canvas class="canvas"></span>
</span>
<span id="small_arrow_icon" style="display:none">
<img id="arrow_left" src="resource/arrow_left.gif">
<img id="arrow_right" src="resource/arrow_right.gif">
</span>
</body>
</html>