forked from substance/substance-legacy
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
261 lines (217 loc) · 9.7 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
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
<!DOCTYPE html>
<html>
<head>
<title>Substance</title>
<link href='styles/fonts/open-sans/open-sans.css' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='styles/font-awesome.css' rel='stylesheet' type='text/css'/>
<link href="styles/substance.css" media="screen" rel="stylesheet" type="text/css" />
<!-- Custom View Styles -->
<link href="styles/editor.css" media="screen" rel="stylesheet" type="text/css" />
<link href="styles/library.css" media="screen" rel="stylesheet" type="text/css" />
<link href="styles/collection.css" media="screen" rel="stylesheet" type="text/css" />
<!-- Generic Surface Styles -->
<link href="lib/substance/substance-surface/styles/surface.css" media="screen" rel="stylesheet" type="text/css" />
<!-- Node specific Styles -->
<link href="lib/substance/substance-article/nodes/constructor/constructor.css" media="screen" rel="stylesheet" type="text/css" />
<link href="lib/substance/substance-article/nodes/text/text.css" media="screen" rel="stylesheet" type="text/css" />
<link href="lib/substance/substance-article/nodes/paragraph/paragraph.css" media="screen" rel="stylesheet" type="text/css" />
<link href="lib/substance/substance-article/nodes/heading/heading.css" media="screen" rel="stylesheet" type="text/css" />
<link href="lib/substance/substance-article/nodes/codeblock/codeblock.css" media="screen" rel="stylesheet" type="text/css" />
<link href="lib/substance/substance-article/nodes/image/image.css" media="screen" rel="stylesheet" type="text/css" />
<!-- Templates -->
<script type="text/html" name="substance">
<!-- Substance Main Menu -->
<div id="menu">
<div class="views">
<a href="#" class="toggle-view document"><i class="icon-th"></i></a>
<a href="#tests" class="toggle-view testsuite" ><i class="icon-tasks"></i></a>
</div>
<div class="actions">
<!--<a href="#new" class="action new-document"><i class="icon-plus"></i></a>-->
</div>
</div>
<div id="container">
</div>
<!-- Temporary Canvas for image manipulation -->
<canvas id="canvas" style="display: none;"></canvas>
</script>
<!-- Collection View -->
<script type="text/x-ejs-template" name="collection">
<% _.each(documents, function(doc) { %>
<a class="document" href="#<%= doc.id %>">
<div class="title">
<%= doc.title %>
</div>
</a>
<% }) %>
</script>
<!-- Library -->
<script type="text/x-ejs-template" name="library">
<div class="navigation">
<p>You are looking at a demo of the new <a href="http://github.com/substance/substance">Substance</a> platform.</p>
<div class="label">Testdrive the editor</div>
<div class="explanation">
You can either select a document on the right or import an external document. You can import every markup supported by <a href="http://johnmacfarlane.net/pandoc/">Pandoc</a>.
</div>
<input type="text" name="import_url" id="import_url" value="https://raw.github.com/michael/documents/master/2012-06-30-substance.md"/>
<a class="import-document" sbs-click="importDocument()" href="#import">Import</a>
<div class="label">Install locally</div>
<p>
Clone Substance locally and play around with the code.
</p>
<pre><code>
$ git clone https://github.com/substance/substance
$ cd substance
$ npm install
$ npm start
</code></pre>
</div>
<!-- this is where the doc list gets rendered -->
<div class="collection"></div>
</script>
<!-- Editor -->
<script type="text/x-ejs-template" name="editor">
<div class="document-settings shelf">
<p>Use <b>ctrl+enter</b> to add new elements.</p>
<h2>Features</h2>
<ul>
<li>Simple <a href="https://github.com/substance/document/blob/master/src/writer.js">Writer</a> interface for doc manipulation</li>
<li>Surface is just a simple renderer which listens to <a href="https://github.com/substance/surface/blob/master/src/surface.js#L23">model-changes</a></li>
<li>No <code>contenteditable</code> needed anymore</li>
<li>Multi-paragraph selections using our own <a href="https://github.com/substance/document/blob/master/src/selection.js">Selection</a> interface</li>
</ul>
<h2>Limitations</h2>
<ul>
<li>Copy and paste behavior is currently disabled</li>
<li>Breaks for some edge cases - we are working on it!</li>
</ul>
</div>
<div id="document_wrapper">
<div id="composer">
<div id="document">
<div class="annotation-toggles">
<div class="styles">
<a href="#" class="annotation-toggle emphasis" sbs-click="annotate(emphasis)"><i class="icon-circle-blank"></i></a>
<a href="#" class="annotation-toggle strong" sbs-click="annotate(strong)"><i class="icon-circle"></i></a>
<a href="#" class="annotation-toggle link"><i class="icon-link"></i></a>
</div>
<div class="markers">
<a href="#" class="annotation-toggle error" sbs-click="annotate(error)"><i class="icon-exclamation-sign"></i></a>
<a href="#" class="annotation-toggle question" sbs-click="annotate(question)"><i class="icon-question"></i></a>
<a href="#" class="annotation-toggle idea" sbs-click="annotate(idea)"><i class="icon-lightbulb"></i></a>
</div>
</div>
<div class="surface">
</div>
</div>
</div>
</div>
</script>
<script type="text/x-ejs-template" name="surface">
<input type="file" class="image-files" name="files[]"/>
<div class="controls">
<!-- this should be app specific stuff -->
<!-- controls is just an empty container for the sake of adding ui elements that -->
<!-- should be positioned within the surface -->
<div class="node-toggles">
<a href="#" class="insert-node paragraph" sbs-click="insertNode(paragraph)"><i class="icon-align-left"></i> Paragraph <span class="key">[p]</span></a>
<a href="#" class="insert-node heading" sbs-click="insertNode(heading)"><i class="icon-h-sign"></i> Heading <span class="key">[h]</span></a>
<a href="#" class="insert-node codeblock" sbs-click="insertNode(codeblock)"><i class="icon-align-left"></i> Codeblock <span class="key">[c]</span></a>
<div class="insert-node image">
<i class="icon-picture"></i> Image <span class="key">[i]</span>
</div>
</div>
</div>
<!-- where the content goes -->
<div class="nodes"></div>
</script>
<!-- Substance.Text Node -->
<!-- Used for paragraphs and headings -->
<script type="text/x-ejs-template" name="text">
<div class="content"></div>
</script>
<!-- Substance.Constructor Node -->
<!-- Constructs nodes -->
<script type="text/x-ejs-template" name="constructor">
<div class="content">
<% _.each(content, function(nodeType) { %>
<span><%= nodeType.name %></span>
<% }); %>
</div>
</script>
<script type="text/x-ejs-template" name="image">
<div class="content">
<div class="image-char">
<img src="<%= medium || url %>"/>
<div class="overlay"></div>
</div>
</div>
</script>
<!-- Substance.TestCenter -->
<script type="text/text/x-handlebars-template" name="test_center">
<div class="test-suites">
{{#each test_suites}}
<a class="test-suite {{name}}" sbs-click='showReport({{name}})' href="#tests/{{name}}">
{{name}}
<div class="status"></div>
</a>
{{/each}}
</div>
<div class="test-report">
</div>
<div class="test-output">
</div>
</script>
<!-- Substance.TestReport -->
<script type="text/text/x-handlebars-template" name="test_report">
<div class="border-right"></div>
<h2>Subtance.{{name}}</h2>
<div class="tests">
{{#each tests}}
<div class="test">
<div class="name">{{name}}</div>
<div class="actions">
{{#each actions}}
<div class="action {{#ifelse error "error" "success"}}{{/ifelse}}">
<div class="status">
<i class="{{#ifelse error "icon-frown" "icon-smile"}}{{/ifelse}}"></i>
</div>
{{@index}}. {{label}}
{{# if error }}
<div class="error-message">{{error.message}}</div>
<div class="error-source">
<pre>{{sourcecode}}</pre>
</div>
<div class="stack-trace">
<pre>{{error.stack}}</pre>
</div>
{{/if}}
<div class="duration">
{{duration}} ms
</div>
</div>
{{/each}}
</div>
</div>
{{/each}}
</div>
</script>
<script src="lib/underscore.js"></script>
<script src="lib/jquery-2.0.3.min.js"></script>
<script src="lib/backbone.js"></script>
<script src="lib/base64.js"></script>
<script src="lib/jquery.timeago.js"></script>
#####scripts#####
<script>
// var sandbox = new Substance.Sandbox();
$(function() {
var boot = require("/src/boot.js");
window.Substance = boot();
// sandbox.run();
});
</script>
</head>
<body>
</body>
</html>