1<!DOCTYPE html>
2<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
3<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
4<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
5<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
6    <head>
7        <meta charset="utf-8">
8        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9        <title></title>
10        <link rel="stylesheet" href="../dist/sequence-diagram-min.css">
11        <style type="text/css">
12            .signal rect {
13                opacity: 0.5;
14            }
15            .signal text {
16                fill: #000000;
17            }
18
19            .note rect, .note path {
20                fill: #ffff00;
21            }
22            .title rect, .title path,
23            .actor rect, .actor path {
24                fill: #ffffff
25            }
26            .signal text:hover {
27                fill: #aaaaaa
28            }
29        </style>
30    </head>
31    <body bgcolor="#eeeeee">
32<textarea class="language" rows="10" cols="35">
33Title: Here is a title
34A->B:
35B->C:
36C->C:
37A->B: Normal line
38B-->C: Dashed line
39C->>D: Open arrow
40D-->>A: Dashed open arrow
41D->D: Self
42D->D: Many\nLines
43</textarea>
44<textarea class="language" rows="10" cols="35">
45# Example of a comment.
46Note left of A: Note to the\n left of A
47Note right of A: Note to the\n right of A
48Note over A: Note over A
49Note over A,B: Note over both A and B
50</textarea>
51<textarea class="language" rows="10" cols="35">
52participant long name\nC as C
53participant B
54participant A
55Note right of A: By listing the participants\n you can change their order
56</textarea>
57
58        <table id="results"></table>
59
60        <script src="../bower_components/seedrandom/seedrandom.min.js"></script>
61
62        <script src="../bower_components/jquery/dist/jquery.min.js"></script>
63
64        <script src="../bower_components/underscore/underscore-min.js"></script>
65        <!--script src="../bower_components/lodash/dist/lodash.min.js"></script-->
66
67        <!-- Snap.svg -->
68        <script src="../bower_components/snap.svg/dist/snap.svg.js"></script>
69        <script src="../bower_components/bower-webfontloader/webfont.js"></script>
70
71        <!-- or Raphael -->
72        <script src="../bower_components/raphael/raphael.min.js"></script>
73
74        <script src="../dist/diagram-grammar.js"></script>
75        <script src="../src/theme.js"></script>
76        <script src="../src/theme-snap.js"></script>
77        <script src="../src/theme-raphael.js"></script>
78        <script src="../fonts/daniel/daniel_700.font.js"></script>
79
80        <script src="../src/sequence-diagram.js"></script>
81        <script src="../src/jquery-plugin.js"></script>
82
83        <!--script src="../dist/sequence-diagram.js"></script-->
84        <!--script src="../dist/sequence-diagram-min.js"></script-->
85        <script>
86            $(document).ready(function(){
87
88                var themes = _.omit(Diagram.themes, ['hand', 'simple']);
89
90                var table = $("#results");
91                var row = $("<tr>").append("<td>");
92                _.each(themes, function(value, theme) {
93                    row.append( $("<td>" + theme + "</td>") );
94                });
95                table.append(row);
96
97                $('textarea.language').each(function(i){
98                    var textarea = $(this);
99                    var row = $("<tr>");
100                    var td = $("<td>");
101                    var containers = [];
102
103                    // Move the text area into the cell
104                    textarea.appendTo(td);
105                    row.append(td);
106
107                    // Now add one diagram per theme
108                    _.each(themes, function(value, theme) {
109                            var td = $("<td>").appendTo(row);
110                            containers.push(td[0]);
111                    });
112
113                    table.append(row);
114
115                    textarea.on('change input propertychange', function() {
116                        var value = $(this).val();
117                        var diagram = Diagram.parse(value);
118                        var i = 0;
119
120                        _.each(themes, function(value, theme) {
121                            var container = containers[i++];
122                            container.innerHTML = "";
123                            Math.seedrandom(''); // Seed so we can fix the drawing of the diagram on multiple iterations
124                            diagram.drawSVG(container, {
125                              theme: theme
126                            });
127                        });
128                    });
129                    textarea.change();
130                });
131            });
132        </script>
133    </body>
134</html>
135
136
137
138