Index: trunk/extensions/VisualEditor/SpecialVisualEditorSandbox.php |
— | — | @@ -0,0 +1,50 @@ |
| 2 | +<?php |
| 3 | +/** |
| 4 | + * Sandbox SpecialPage for VisualEditor extension |
| 5 | + * |
| 6 | + * @file |
| 7 | + * @ingroup Extensions |
| 8 | + */ |
| 9 | + |
| 10 | +class SpecialVisualEditorSandbox extends SpecialPage { |
| 11 | + |
| 12 | + /* Methods */ |
| 13 | + |
| 14 | + public function __construct() { |
| 15 | + parent::__construct( 'VisualEditorSandbox' ); |
| 16 | + } |
| 17 | + |
| 18 | + public function execute( $par ) { |
| 19 | + global $wgOut; |
| 20 | + |
| 21 | + $wgOut->addModules( 'ext.visualEditor.sandbox' ); |
| 22 | + $this->setHeaders(); |
| 23 | + $wgOut->setPageTitle( wfMsg( 'visualeditor-sandbox-title' ) ); |
| 24 | + |
| 25 | + $out = <<<HTML |
| 26 | +<!-- VisualEditor Sandbox --> |
| 27 | +<div id="es-base"> |
| 28 | + <div id="es-toolbar" class="es-toolbar"> |
| 29 | + <div style="clear:both"></div> |
| 30 | + <div id="es-toolbar-shadow"></div> |
| 31 | + </div> |
| 32 | + <div id="es-panes"> |
| 33 | + <div id="es-visual"> |
| 34 | + <div id="es-editor"></div> |
| 35 | + </div> |
| 36 | + <div id="es-previews"> |
| 37 | + <div id="es-preview-wikitext" class="es-preview es-code"></div> |
| 38 | + <div id="es-preview-json" class="es-preview es-code"></div> |
| 39 | + <div id="es-preview-html" class="es-preview es-code"></div> |
| 40 | + <div id="es-preview-render" class="es-preview es-render"></div> |
| 41 | + <div id="es-preview-history" class="es-preview es-history"></div> |
| 42 | + </div> |
| 43 | + <div style="clear:both"></div> |
| 44 | + </div> |
| 45 | +</div> |
| 46 | +<!-- /VisualEditor Sandbox --> |
| 47 | +HTML; |
| 48 | + |
| 49 | + $wgOut->addHtml( $out ); |
| 50 | + } |
| 51 | +} |
Index: trunk/extensions/VisualEditor/VisualEditor.php |
— | — | @@ -0,0 +1,108 @@ |
| 2 | +<?php |
| 3 | +/** |
| 4 | + * VisualEditor extension |
| 5 | + * |
| 6 | + * @file |
| 7 | + * @ingroup Extensions |
| 8 | + * |
| 9 | + * @author Trevor Parscal <trevor@wikimedia.org> |
| 10 | + * @author Inez Korczyński <inez@wikia-inc.com> |
| 11 | + * @author Roan Kattouw <roan.kattouw@gmail.com> |
| 12 | + * @author Neil Kandalgaonkar <neilk@wikimedia.org> |
| 13 | + * @author Gabriel Wicke <gwicke@wikimedia.org> |
| 14 | + * @author Brion Vibber <brion@wikimedia.org> |
| 15 | + * @license GPL v2 or later |
| 16 | + * @version 0.1.0 |
| 17 | + */ |
| 18 | + |
| 19 | +/* Setup */ |
| 20 | + |
| 21 | +$wgExtensionCredits['other'][] = array( |
| 22 | + 'path' => __FILE__, |
| 23 | + 'name' => 'VisualEditor', |
| 24 | + 'author' => array( |
| 25 | + 'Trevor Parscal', |
| 26 | + 'Inez Korczyński', |
| 27 | + 'Roan Kattouw', |
| 28 | + 'Neil Kandalgaonkar', |
| 29 | + 'Gabriel Wicke', |
| 30 | + 'Brion Vibber', |
| 31 | + ), |
| 32 | + 'version' => '0.1.0', |
| 33 | + 'url' => 'http://www.mediawiki.org/wiki/Extension:VisualEditor', |
| 34 | + 'descriptionmsg' => 'visualeditor-desc', |
| 35 | +); |
| 36 | +$dir = dirname( __FILE__ ) . '/'; |
| 37 | +$wgExtensionMessagesFiles['VisualEditor'] = $dir . 'VisualEditor.i18n.php'; |
| 38 | +$wgAutoloadClasses['SpecialVisualEditorSandbox'] = $dir . 'SpecialVisualEditorSandbox.php'; |
| 39 | +$wgSpecialPages['VisualEditorSandbox'] = 'SpecialVisualEditorSandbox'; |
| 40 | +$wgSpecialPageGroups['VisualEditorSandbox'] = 'other'; |
| 41 | + |
| 42 | +$wgVisualEditorResourceTemplate = array( |
| 43 | + 'localBasePath' => dirname( __FILE__ ) . '/modules', |
| 44 | + 'remoteExtPath' => 'VisualEditor/modules', |
| 45 | + 'group' => 'ext.visualEditor', |
| 46 | +); |
| 47 | + |
| 48 | +$wgResourceModules += array( |
| 49 | + 'ext.visualEditor.sandbox' => $wgVisualEditorResourceTemplate + array( |
| 50 | + 'scripts' => array( |
| 51 | + 'sandbox/sandbox.js', |
| 52 | + ), |
| 53 | + 'styles' => 'sandbox/sandbox.css', |
| 54 | + 'messages' => array(), |
| 55 | + 'dependencies' => array( |
| 56 | + 'ext.visualEditor.es', |
| 57 | + ), |
| 58 | + ), |
| 59 | + 'ext.visualEditor.es' => $wgVisualEditorResourceTemplate + array( |
| 60 | + 'scripts' => array( |
| 61 | + 'es/es.js', |
| 62 | + 'es/es.Html.js', |
| 63 | + 'es/es.Position.js', |
| 64 | + 'es/es.Range.js', |
| 65 | + 'es/es.TransactionProcessor.js', |
| 66 | + 'es/bases/es.EventEmitter.js', |
| 67 | + 'es/bases/es.DocumentNode.js', |
| 68 | + 'es/bases/es.DocumentBranchNode.js', |
| 69 | + 'es/bases/es.DocumentLeafNode.js', |
| 70 | + 'es/bases/es.DocumentModelNode.js', |
| 71 | + 'es/bases/es.DocumentModelBranchNode.js', |
| 72 | + 'es/bases/es.DocumentModelLeafNode.js', |
| 73 | + 'es/bases/es.DocumentViewNode.js', |
| 74 | + 'es/bases/es.DocumentViewBranchNode.js', |
| 75 | + 'es/bases/es.DocumentViewLeafNode.js', |
| 76 | + 'es/models/es.DocumentModel.js', |
| 77 | + 'es/models/es.HeadingModel.js', |
| 78 | + 'es/models/es.ListItemModel.js', |
| 79 | + 'es/models/es.ListModel.js', |
| 80 | + 'es/models/es.ParagraphModel.js', |
| 81 | + 'es/models/es.PreModel.js', |
| 82 | + 'es/models/es.SurfaceModel.js', |
| 83 | + 'es/models/es.TableCellModel.js', |
| 84 | + 'es/models/es.TableModel.js', |
| 85 | + 'es/models/es.TableRowModel.js', |
| 86 | + 'es/models/es.TransactionModel.js', |
| 87 | + 'es/serializers/es.AnnotationSerializer.js', |
| 88 | + 'es/serializers/es.HtmlSerializer.js', |
| 89 | + 'es/serializers/es.JsonSerializer.js', |
| 90 | + 'es/serializers/es.WikitextSerializer.js', |
| 91 | + 'es/views/es.ContentView.js', |
| 92 | + 'es/views/es.DocumentView.js', |
| 93 | + 'es/views/es.HeadingView.js', |
| 94 | + 'es/views/es.ListItemView.js', |
| 95 | + 'es/views/es.ListView.js', |
| 96 | + 'es/views/es.ParagraphView.js', |
| 97 | + 'es/views/es.PreView.js', |
| 98 | + 'es/views/es.SurfaceView.js', |
| 99 | + 'es/views/es.TableCellView.js', |
| 100 | + 'es/views/es.TableRowView.js', |
| 101 | + 'es/views/es.TableView.js', |
| 102 | + 'es/views/es.ToolbarView.js', |
| 103 | + ), |
| 104 | + 'styles' => 'es/es.Surface.css', |
| 105 | + 'dependencies' => array( |
| 106 | + 'jquery', |
| 107 | + ), |
| 108 | + ) |
| 109 | +); |
Index: trunk/extensions/VisualEditor/demo/es.js |
— | — | @@ -1,446 +0,0 @@ |
2 | | -$(document).ready( function() { |
3 | | - window.wikiDom = { |
4 | | - 'type': 'document', |
5 | | - 'children': [ |
6 | | - { |
7 | | - 'type': 'heading', |
8 | | - 'attributes': { 'level': 1 }, |
9 | | - 'content': { 'text': 'Direct manipulation interface' } |
10 | | - }, |
11 | | - { |
12 | | - 'type': 'paragraph', |
13 | | - 'content': { |
14 | | - 'text': 'In computer science, direct manipulation is a human-computer interaction style which involves continuous representation of objects of interest, and rapid, reversible, incremental actions and feedback. The intention is to allow a user to directly manipulate objects presented to them, using actions that correspond at least loosely to the physical world. An example of direct-manipulation is resizing a graphical shape, such as a rectangle, by dragging its corners or edges with a mouse.', |
15 | | - 'annotations': [ |
16 | | - { |
17 | | - 'type': 'link/internal', |
18 | | - 'data': { |
19 | | - 'title': 'Computer_science' |
20 | | - }, |
21 | | - 'range': { |
22 | | - 'start': 3, |
23 | | - 'end': 19 |
24 | | - } |
25 | | - }, |
26 | | - { |
27 | | - 'type': 'link/internal', |
28 | | - 'data': { |
29 | | - 'title': 'Human-computer interaction' |
30 | | - }, |
31 | | - 'range': { |
32 | | - 'start': 46, |
33 | | - 'end': 72 |
34 | | - } |
35 | | - } |
36 | | - ] |
37 | | - } |
38 | | - }, |
39 | | - { |
40 | | - 'type': 'paragraph', |
41 | | - 'content': { 'text': 'Having real-world metaphors for objects and actions can make it easier for a user to learn and use an interface (some might say that the interface is more natural or intuitive), and rapid, incremental feedback allows a user to make fewer errors and complete tasks in less time, because they can see the results of an action before completing the action, thus evaluating the output and compensating for mistakes.' } |
42 | | - }, |
43 | | - { |
44 | | - 'type': 'paragraph', |
45 | | - 'content': { |
46 | | - 'text': 'The term was introduced by Ben Shneiderman in 1983 within the context of office applications and the desktop metaphor. Individuals in academia and computer scientists doing research on future user interfaces often put as much or even more stress on tactile control and feedback, or sonic control and feedback than on the visual feedback given by most GUIs. As a result the term direct manipulation interface has been more widespread in these environments. ', |
47 | | - 'annotations': [ |
48 | | - { |
49 | | - 'type': 'link/internal', |
50 | | - 'data': { |
51 | | - 'title': 'Ben_Shneiderman' |
52 | | - }, |
53 | | - 'range': { |
54 | | - 'start': 27, |
55 | | - 'end': 42 |
56 | | - } |
57 | | - }, |
58 | | - { |
59 | | - 'type': 'link/internal', |
60 | | - 'data': { |
61 | | - 'title': 'GUI' |
62 | | - }, |
63 | | - 'range': { |
64 | | - 'start': 352, |
65 | | - 'end': 356 |
66 | | - } |
67 | | - }, |
68 | | - { |
69 | | - 'type': 'object/hook', |
70 | | - 'data': { |
71 | | - 'html': '<sup><small><a href="#">[1]</a></small></sup>' |
72 | | - }, |
73 | | - 'range': { |
74 | | - 'start': 118, |
75 | | - 'end': 119 |
76 | | - } |
77 | | - }, |
78 | | - { |
79 | | - 'type': 'object/template', |
80 | | - 'data': { |
81 | | - 'html': '<sup><small>[<a href="#">citation needed</a>]</small></sup>' |
82 | | - }, |
83 | | - 'range': { |
84 | | - 'start': 456, |
85 | | - 'end': 457 |
86 | | - } |
87 | | - } |
88 | | - ] |
89 | | - } |
90 | | - }, |
91 | | - { |
92 | | - 'type': 'heading', |
93 | | - 'attributes': { 'level': 2 }, |
94 | | - 'content': { 'text': 'In contrast to WIMP/GUI interfaces' } |
95 | | - }, |
96 | | - { |
97 | | - 'type': 'paragraph', |
98 | | - 'content': { |
99 | | - 'text': 'Direct manipulation is closely associated with interfaces that use windows, icons, menus, and a pointing device (WIMP GUI) as these almost always incorporate direct manipulation to at least some degree. However, direct manipulation should not be confused with these other terms, as it does not imply the use of windows or even graphical output. For example, direct manipulation concepts can be applied to interfaces for blind or vision-impaired users, using a combination of tactile and sonic devices and software.', |
100 | | - 'annotations': [ |
101 | | - { |
102 | | - 'type': 'link/internal', |
103 | | - 'data': { |
104 | | - 'title': 'WIMP_(computing)' |
105 | | - }, |
106 | | - 'range': { |
107 | | - 'start': 113, |
108 | | - 'end': 117 |
109 | | - } |
110 | | - } |
111 | | - ] |
112 | | - } |
113 | | - }, |
114 | | - { |
115 | | - 'type': 'paragraph', |
116 | | - 'content': { |
117 | | - 'text': 'It is also possible to design a WIMP interface that intentionally does not make use of direct manipulation. For example, most versions of windowing interfaces (e.g. Microsoft Windows) allowed users to reposition a window by dragging it with the mouse, but would not continually redraw the complete window at intermediate positions during the drag. Instead, for example, a rectangular outline of the window might be drawn during the drag, with the complete window contents being redrawn only once the user had released the mouse button. This was necessary on older computers that lacked the memory and/or CPU power to quickly redraw data behind a window that was being dragged.', |
118 | | - 'annotations': [ |
119 | | - { |
120 | | - 'type': 'link/internal', |
121 | | - 'data': { |
122 | | - 'title': 'Microsoft_Windows' |
123 | | - }, |
124 | | - 'range': { |
125 | | - 'start': 165, |
126 | | - 'end': 182 |
127 | | - } |
128 | | - } |
129 | | - ] |
130 | | - } |
131 | | - }, |
132 | | - { |
133 | | - 'type': 'pre', |
134 | | - 'content': { 'text': 'A lot of text goes here... and at some point it wraps.. A lot of text goes here... and at some point it wraps.. A lot of text goes here... and at some point it wraps.. A lot of text goes here... and at some point it wraps.. A lot of text goes here... and at some point it wraps..' } |
135 | | - }, |
136 | | - { |
137 | | - 'type': 'heading', |
138 | | - 'attributes': { 'level': 1 }, |
139 | | - 'content': { |
140 | | - 'text': 'This is a heading (level 1)', |
141 | | - 'annotations': [ |
142 | | - { |
143 | | - 'type': 'textStyle/italic', |
144 | | - 'range': { |
145 | | - 'start': 10, |
146 | | - 'end': 17 |
147 | | - } |
148 | | - } |
149 | | - ] |
150 | | - } |
151 | | - }, |
152 | | - { |
153 | | - 'type': 'heading', |
154 | | - 'attributes': { 'level': 2 }, |
155 | | - 'content': { |
156 | | - 'text': 'This is a heading (level 2)', |
157 | | - 'annotations': [ |
158 | | - { |
159 | | - 'type': 'textStyle/italic', |
160 | | - 'range': { |
161 | | - 'start': 10, |
162 | | - 'end': 17 |
163 | | - } |
164 | | - } |
165 | | - ] |
166 | | - } |
167 | | - }, |
168 | | - { |
169 | | - 'type': 'heading', |
170 | | - 'attributes': { 'level': 3 }, |
171 | | - 'content': { |
172 | | - 'text': 'This is a heading (level 3)', |
173 | | - 'annotations': [ |
174 | | - { |
175 | | - 'type': 'textStyle/italic', |
176 | | - 'range': { |
177 | | - 'start': 10, |
178 | | - 'end': 17 |
179 | | - } |
180 | | - } |
181 | | - ] |
182 | | - } |
183 | | - }, |
184 | | - { |
185 | | - 'type': 'heading', |
186 | | - 'attributes': { 'level': 4 }, |
187 | | - 'content': { |
188 | | - 'text': 'This is a heading (level 4)', |
189 | | - 'annotations': [ |
190 | | - { |
191 | | - 'type': 'textStyle/italic', |
192 | | - 'range': { |
193 | | - 'start': 10, |
194 | | - 'end': 17 |
195 | | - } |
196 | | - } |
197 | | - ] |
198 | | - } |
199 | | - }, |
200 | | - { |
201 | | - 'type': 'heading', |
202 | | - 'attributes': { 'level': 5 }, |
203 | | - 'content': { |
204 | | - 'text': 'This is a heading (level 5)', |
205 | | - 'annotations': [ |
206 | | - { |
207 | | - 'type': 'textStyle/italic', |
208 | | - 'range': { |
209 | | - 'start': 10, |
210 | | - 'end': 17 |
211 | | - } |
212 | | - } |
213 | | - ] |
214 | | - } |
215 | | - }, |
216 | | - { |
217 | | - 'type': 'heading', |
218 | | - 'attributes': { 'level': 6 }, |
219 | | - 'content': { |
220 | | - 'text': 'This is a heading (level 6)', |
221 | | - 'annotations': [ |
222 | | - { |
223 | | - 'type': 'textStyle/italic', |
224 | | - 'range': { |
225 | | - 'start': 10, |
226 | | - 'end': 17 |
227 | | - } |
228 | | - } |
229 | | - ] |
230 | | - } |
231 | | - }, |
232 | | - { |
233 | | - 'type': 'paragraph', |
234 | | - 'content': { |
235 | | - 'text': 'In text display, line wrap is the feature of continuing on a new line when a line is full, such that each line fits in the viewable window, allowing text to be read from top to bottom without any horizontal scrolling.\nWord wrap is the additional feature of most text editors, word processors, and web browsers, of breaking lines between and not within words, except when a single word is longer than a line.', |
236 | | - 'annotations': [ |
237 | | - // 'In text display' should be bold |
238 | | - { 'type': 'textStyle/bold', 'range': { 'start': 0, 'end': 15 } }, |
239 | | - // 'line wrap' should be italic |
240 | | - { 'type': 'textStyle/italic', 'range': { 'start': 17, 'end': 26 } }, |
241 | | - // 'wrap is' should be a link to '#' |
242 | | - { |
243 | | - 'type': 'link/external', |
244 | | - 'data': { 'href': '#' }, |
245 | | - 'range': { 'start': 22, 'end': 29 } |
246 | | - } |
247 | | - ] |
248 | | - } |
249 | | - }, |
250 | | - { |
251 | | - 'type': 'paragraph', |
252 | | - 'content': { 'text': 'Test 22' } |
253 | | - }, |
254 | | - { |
255 | | - 'type': 'paragraph', |
256 | | - 'content': { 'text': 'Test 333' } |
257 | | - }, |
258 | | - { |
259 | | - 'type': 'list', |
260 | | - 'children': [ |
261 | | - { |
262 | | - 'type': 'listItem', |
263 | | - 'attributes': { |
264 | | - 'styles': ['bullet'] |
265 | | - }, |
266 | | - 'children' : [ |
267 | | - { |
268 | | - 'type': 'paragraph', |
269 | | - 'content': { 'text': 'Test 4444' } |
270 | | - } |
271 | | - ] |
272 | | - }, |
273 | | - { |
274 | | - 'type': 'listItem', |
275 | | - 'attributes': { |
276 | | - 'styles': ['bullet', 'bullet'] |
277 | | - }, |
278 | | - 'children' : [ |
279 | | - { |
280 | | - 'type': 'paragraph', |
281 | | - 'content': { 'text': 'Test 55555' } |
282 | | - } |
283 | | - ] |
284 | | - }, |
285 | | - { |
286 | | - 'type': 'listItem', |
287 | | - 'attributes': { |
288 | | - 'styles': ['bullet', 'bullet', 'bullet'] |
289 | | - }, |
290 | | - 'children' : [ |
291 | | - { |
292 | | - 'type': 'paragraph', |
293 | | - 'content': { 'text': 'Test 666666' } |
294 | | - } |
295 | | - ] |
296 | | - }, |
297 | | - { |
298 | | - 'type': 'listItem', |
299 | | - 'attributes': { |
300 | | - 'styles': ['number'] |
301 | | - }, |
302 | | - 'children' : [ |
303 | | - { |
304 | | - 'type': 'paragraph', |
305 | | - 'content': { 'text': 'Test 7777777' } |
306 | | - } |
307 | | - ] |
308 | | - }, |
309 | | - { |
310 | | - 'type': 'listItem', |
311 | | - 'attributes': { |
312 | | - 'styles': ['number', 'number'] |
313 | | - }, |
314 | | - 'children' : [ |
315 | | - { |
316 | | - 'type': 'paragraph', |
317 | | - 'content': { 'text': 'Test 88888888' } |
318 | | - } |
319 | | - ] |
320 | | - }, |
321 | | - { |
322 | | - 'type': 'listItem', |
323 | | - 'attributes': { |
324 | | - 'styles': ['term'] |
325 | | - }, |
326 | | - 'children' : [ |
327 | | - { |
328 | | - 'type': 'paragraph', |
329 | | - 'content': { 'text': 'Test 999999999' } |
330 | | - } |
331 | | - ] |
332 | | - }, |
333 | | - { |
334 | | - 'type': 'listItem', |
335 | | - 'attributes': { |
336 | | - 'styles': ['definition'] |
337 | | - }, |
338 | | - 'children' : [ |
339 | | - { |
340 | | - 'type': 'paragraph', |
341 | | - 'content': { 'text': 'Test 0000000000' } |
342 | | - } |
343 | | - ] |
344 | | - } |
345 | | - ] |
346 | | - }, |
347 | | - { |
348 | | - 'type': 'table', |
349 | | - 'attributes': { 'html/style': 'width: 600px; border: solid 1px;' }, |
350 | | - 'children': [ |
351 | | - { |
352 | | - 'type': 'tableRow', |
353 | | - 'children': [ |
354 | | - { |
355 | | - 'type': 'tableCell', |
356 | | - 'attributes': { 'html/style': 'border: solid 1px;' }, |
357 | | - 'children': [ |
358 | | - { |
359 | | - 'type': 'paragraph', |
360 | | - 'content': { 'text': 'row 1 & cell 1' } |
361 | | - }, |
362 | | - { |
363 | | - 'type': 'list', |
364 | | - 'children': [ |
365 | | - { |
366 | | - 'type': 'listItem', |
367 | | - 'attributes': { |
368 | | - 'styles': ['bullet'] |
369 | | - }, |
370 | | - 'children' : [ |
371 | | - { |
372 | | - 'type': 'paragraph', |
373 | | - 'content': { 'text': 'Test 4444' } |
374 | | - } |
375 | | - ] |
376 | | - }, |
377 | | - { |
378 | | - 'type': 'listItem', |
379 | | - 'attributes': { |
380 | | - 'styles': ['bullet', 'bullet'] |
381 | | - }, |
382 | | - 'children' : [ |
383 | | - { |
384 | | - 'type': 'paragraph', |
385 | | - 'content': { 'text': 'Test 55555' } |
386 | | - } |
387 | | - ] |
388 | | - }, |
389 | | - { |
390 | | - 'type': 'listItem', |
391 | | - 'attributes': { |
392 | | - 'styles': ['number'] |
393 | | - }, |
394 | | - 'children' : [ |
395 | | - { |
396 | | - 'type': 'paragraph', |
397 | | - 'content': { 'text': 'Test 666666' } |
398 | | - } |
399 | | - ] |
400 | | - } |
401 | | - ] |
402 | | - } |
403 | | - ] |
404 | | - }, |
405 | | - { |
406 | | - 'type': 'tableCell', |
407 | | - 'attributes': { 'html/style': 'border: solid 1px;' }, |
408 | | - 'children': [ |
409 | | - { |
410 | | - 'type': 'paragraph', |
411 | | - 'content': { 'text': 'row 1 & cell 2' } |
412 | | - } |
413 | | - ] |
414 | | - } |
415 | | - ] |
416 | | - } |
417 | | - ] |
418 | | - } |
419 | | - ] |
420 | | - }; |
421 | | - window.doc = es.DocumentModel.newFromPlainObject( window.wikiDom ); |
422 | | - window.surfaceModel = new es.SurfaceModel( window.doc ); |
423 | | - window.surfaceView = new es.SurfaceView( $( '#es-editor' ), window.surfaceModel ); |
424 | | - window.toolbarView = new es.ToolbarView( $( '#es-toolbar' ), window.surfaceView ); |
425 | | - |
426 | | - /* |
427 | | - var tools = { |
428 | | - 'textStyle/bold': $( '#es-toolbar-bold' ), |
429 | | - 'textStyle/italic': $( '#es-toolbar-italic' ), |
430 | | - 'link/internal': $( '#es-toolbar-link' ) |
431 | | - }; |
432 | | - surfaceView.on( 'select', function( range ) { |
433 | | - for ( var key in tools ) { |
434 | | - tools[key].removeClass( 'es-toolbarTool-down' ); |
435 | | - } |
436 | | - var annotations = range.getLength() ? |
437 | | - doc.getAnnotationsFromRange( range ) : doc.getAnnotationsFromOffset( range.start ); |
438 | | - if ( annotations.length ) { |
439 | | - for ( var i = 0; i < annotations.length; i++ ) { |
440 | | - if ( annotations[i].type in tools ) { |
441 | | - tools[annotations[i].type].addClass( 'es-toolbarTool-down' ); |
442 | | - } |
443 | | - } |
444 | | - } |
445 | | - } ); |
446 | | - */ |
447 | | -} ); |
Index: trunk/extensions/VisualEditor/demo/es.css |
— | — | @@ -1,171 +0,0 @@ |
2 | | -body { |
3 | | - font-family: "Arial"; |
4 | | - font-size: 1em; |
5 | | - width: 100%; |
6 | | - margin: 1em 0; |
7 | | - padding: 0; |
8 | | - overflow-y: scroll; |
9 | | - -webkit-user-select: none; |
10 | | - background-color: white; |
11 | | -} |
12 | | -#es-base { |
13 | | - margin: 2em; |
14 | | - -webkit-box-shadow: 0 0.25em 1.5em 0 #dddddd; |
15 | | - -moz-box-shadow: 0 0.25em 1.5em 0 #dddddd; |
16 | | - box-shadow: 0 0.25em 1.5em 0 #dddddd; |
17 | | - -webkit-border-radius: 0.5em; |
18 | | - -moz-border-radius: 0.5em; |
19 | | - -o-border-radius: 0.5em; |
20 | | - border-radius: 0.5em; |
21 | | -} |
22 | | -#es-panes { |
23 | | - border: solid 1px #dddddd; |
24 | | - border-top: none; |
25 | | -} |
26 | | -#es-toolbar { |
27 | | - border: solid 1px #dddddd; |
28 | | - position: relative; |
29 | | - -webkit-border-top-right-radius: 0.25em; |
30 | | - -moz-border-top-right-radius: 0.25em; |
31 | | - -o-border-top-right-radius: 0.25em; |
32 | | - border-top-right-radius: 0.25em; |
33 | | - -webkit-border-top-left-radius: 0.25em; |
34 | | - -moz-border-top-left-radius: 0.25em; |
35 | | - -o-border-top-left-radius: 0.25em; |
36 | | - border-top-left-radius: 0.25em; |
37 | | - background-image: url(images/fade-up.png); |
38 | | - background-position: bottom left; |
39 | | - background-repeat: repeat-x; |
40 | | -} |
41 | | -#es-toolbar.float { |
42 | | - position: fixed; |
43 | | - left: 2em; |
44 | | - right: 2em; |
45 | | - top: 0; |
46 | | - z-index: 100; |
47 | | - border-top: none; |
48 | | - -webkit-border-top-right-radius: 0; |
49 | | - -moz-border-top-right-radius: 0; |
50 | | - -o-border-top-right-radius: 0; |
51 | | - border-top-right-radius: 0; |
52 | | - -webkit-border-top-left-radius: 0; |
53 | | - -moz-border-top-left-radius: 0; |
54 | | - -o-border-top-left-radius: 0; |
55 | | - border-top-left-radius: 0; |
56 | | -} |
57 | | -#es-toolbar-shadow { |
58 | | - background-image: url(images/toolbar-shadow.png); |
59 | | - background-position: top left; |
60 | | - background-repeat: repeat-x; |
61 | | - position: absolute; |
62 | | - bottom: -10px; |
63 | | - height: 9px; |
64 | | - width: 100%; |
65 | | - pointer-events: none; |
66 | | - -webkit-transition: opacity 500ms ease-in-out; |
67 | | - -moz-transition: opacity 500ms ease-in-out; |
68 | | - -o-transition: opacity 500ms ease-in-out; |
69 | | - transition: opacity 500ms ease-in-out; |
70 | | - opacity: 0.125; |
71 | | -} |
72 | | -#es-toolbar.float #es-toolbar-shadow { |
73 | | - opacity: 0.5; |
74 | | -} |
75 | | -.es-showData #es-visual, |
76 | | -.es-showData #es-previews { |
77 | | - width: 50%; |
78 | | - float: left; |
79 | | - overflow: hidden; |
80 | | -} |
81 | | -.es-showData #es-editor { |
82 | | - border-right: solid 1px #dddddd; |
83 | | -} |
84 | | -.es-toolbarGroup { |
85 | | - float: left; |
86 | | - padding: 0.25em; |
87 | | -} |
88 | | -.es-toolbarGroup-preview { |
89 | | - float: right; |
90 | | -} |
91 | | -.es-toolbarDivider { |
92 | | - float: left; |
93 | | - width: 1px; |
94 | | - height: 24px; |
95 | | - margin: 0.5em 0 0.5em 0.5em; |
96 | | - background-color: #dddddd; |
97 | | -} |
98 | | -.es-toolbarLabel { |
99 | | - float: left; |
100 | | - padding: 0.5em 0.75em; |
101 | | - line-height: 22px; |
102 | | - font-size: 0.8em; |
103 | | - color: #555555; |
104 | | -} |
105 | | -.es-toolbarTool { |
106 | | - float: left; |
107 | | - padding: 0.25em; |
108 | | - border: solid 1px transparent; |
109 | | - border-radius: 0.125em; |
110 | | - -webkit-border-radius: 0.125em; |
111 | | - -moz-border-radius: 0.125em; |
112 | | - -o-border-radius: 0.125em; |
113 | | - cursor: pointer; |
114 | | -} |
115 | | -.es-toolbarTool:hover, |
116 | | -.es-toolbarTool-down:hover { |
117 | | - border-color: #eeeeee; |
118 | | -} |
119 | | -.es-toolbarTool:active, |
120 | | -.es-toolbarTool-down { |
121 | | - border-color: #dddddd; |
122 | | - background-image: url(images/fade-down.png); |
123 | | - background-position: top left; |
124 | | - background-repeat: repeat-x; |
125 | | -} |
126 | | -.es-toolbarTool img { |
127 | | - display: block; |
128 | | - width: 22px; |
129 | | - height: 22px; |
130 | | -} |
131 | | -#es-previews { |
132 | | - display: none; |
133 | | -} |
134 | | -.es-showData #es-previews { |
135 | | - display: block; |
136 | | -} |
137 | | -.es-preview { |
138 | | - margin: 0; |
139 | | - padding: 1em; |
140 | | -} |
141 | | -.es-code { |
142 | | - white-space: pre-wrap; |
143 | | - font-family: "Droid Sans Mono", "Courier New", monospace; |
144 | | - font-size: 0.8em; |
145 | | -} |
146 | | -.es-render { |
147 | | - line-height: 1.5em; |
148 | | - padding-top: 0; |
149 | | -} |
150 | | -.es-history { |
151 | | - line-height: 1.5em; |
152 | | - padding: 0; |
153 | | -} |
154 | | - |
155 | | -/* General MediaWiki Styles */ |
156 | | - |
157 | | -.es-render ul { |
158 | | - line-height: 1.5em; |
159 | | - list-style-type: square; |
160 | | - margin: .3em 0 0 1.5em; |
161 | | - padding: 0; |
162 | | - list-style-image: url(images/bullet-icon.png); |
163 | | -} |
164 | | -.es-render ol { |
165 | | - line-height: 1.5em; |
166 | | - margin: .3em 0 0 3.2em; |
167 | | - padding: 0; |
168 | | - list-style-image: none; |
169 | | -} |
170 | | -.es-render li { |
171 | | - margin-bottom: .1em; |
172 | | -} |
Index: trunk/extensions/VisualEditor/demo/index.html |
— | — | @@ -4,40 +4,37 @@ |
5 | 5 | <head> |
6 | 6 | <title>EditSurface Demo</title> |
7 | 7 | <link rel="stylesheet" href="../modules/es/es.Surface.css"> |
8 | | - <link rel="stylesheet" href="es.css"> |
| 8 | + <link rel="stylesheet" href="../modules/sandbox/sandbox.css"> |
| 9 | + <style> |
| 10 | + body { |
| 11 | + font-family: "Arial"; |
| 12 | + font-size: 1em; |
| 13 | + width: 100%; |
| 14 | + margin: 1em 0; |
| 15 | + padding: 0; |
| 16 | + overflow-y: scroll; |
| 17 | + -webkit-user-select: none; |
| 18 | + background-color: white; |
| 19 | + } |
| 20 | + #es-base { |
| 21 | + margin: 2em; |
| 22 | + -webkit-box-shadow: 0 0.25em 1.5em 0 #dddddd; |
| 23 | + -moz-box-shadow: 0 0.25em 1.5em 0 #dddddd; |
| 24 | + box-shadow: 0 0.25em 1.5em 0 #dddddd; |
| 25 | + -webkit-border-radius: 0.5em; |
| 26 | + -moz-border-radius: 0.5em; |
| 27 | + -o-border-radius: 0.5em; |
| 28 | + border-radius: 0.5em; |
| 29 | + } |
| 30 | + #es-panes { |
| 31 | + border: solid 1px #dddddd; |
| 32 | + border-top: none; |
| 33 | + } |
| 34 | + </style> |
9 | 35 | </head> |
10 | 36 | <body> |
11 | 37 | <div id="es-base"> |
12 | 38 | <div id="es-toolbar" class="es-toolbar"> |
13 | | - <!-- |
14 | | - <div class="es-toolbarGroup"> |
15 | | - <div class="es-toolbarLabel">Text</div> |
16 | | - <div class="es-toolbarTool" id="es-toolbar-bold"><img src="images/bold.png"></div> |
17 | | - <div class="es-toolbarTool" id="es-toolbar-italic"><img src="images/italic.png"></div> |
18 | | - <div class="es-toolbarTool" id="es-toolbar-link"><img src="images/link.png"></div> |
19 | | - <div class="es-toolbarTool" id="es-toolbar-small"><img src="images/small.png"></div> |
20 | | - <div class="es-toolbarTool" id="es-toolbar-big"><img src="images/big.png"></div> |
21 | | - <div class="es-toolbarTool" id="es-toolbar-sub"><img src="images/sub.png"></div> |
22 | | - <div class="es-toolbarTool" id="es-toolbar-super"><img src="images/super.png"></div> |
23 | | - <div class="es-toolbarTool" id="es-toolbar-clear"><img src="images/clear.png"></div> |
24 | | - <div style="clear:both"></div> |
25 | | - </div> |
26 | | - <div class="es-toolbarDivider"></div> |
27 | | - <div class="es-toolbarGroup"> |
28 | | - <div class="es-toolbarLabel">Lists</div> |
29 | | - <div class="es-toolbarTool" id="es-toolbar-bullet"><img src="images/bullet.png"></div> |
30 | | - <div class="es-toolbarTool" id="es-toolbar-number"><img src="images/number.png"></div> |
31 | | - <div class="es-toolbarTool" id="es-toolbar-indent"><img src="images/indent.png"></div> |
32 | | - <div class="es-toolbarTool" id="es-toolbar-outdent"><img src="images/outdent.png"></div> |
33 | | - <div style="clear:both"></div> |
34 | | - </div> |
35 | | - <div class="es-toolbarGroup es-toolbarGroup-preview"> |
36 | | - <div class="es-toolbarTool" id="es-toolbar-json" rel="json"><img src="images/json.png"></div> |
37 | | - <div class="es-toolbarTool" id="es-toolbar-wikitext" rel="wikitext"><img src="images/wikitext.png"></div> |
38 | | - <div class="es-toolbarTool" id="es-toolbar-html" rel="html"><img src="images/html.png"></div> |
39 | | - <div class="es-toolbarTool" id="es-toolbar-render" rel="render"><img src="images/render.png"></div> |
40 | | - </div> |
41 | | - --> |
42 | 39 | <div style="clear:both"></div> |
43 | 40 | <div id="es-toolbar-shadow"></div> |
44 | 41 | </div> |
— | — | @@ -110,6 +107,6 @@ |
111 | 108 | <script src="../modules/es/views/es.HeadingView.js"></script> |
112 | 109 | |
113 | 110 | <!-- Demo --> |
114 | | - <script src="es.js"></script> |
| 111 | + <script src="../modules/sandbox/sandbox.js"></script> |
115 | 112 | </body> |
116 | 113 | </html> |
\ No newline at end of file |
Index: trunk/extensions/VisualEditor/modules/es/views/es.SurfaceView.js |
— | — | @@ -80,12 +80,12 @@ |
81 | 81 | this.$.mousedown( function(e) { |
82 | 82 | return _this.onMouseDown( e ); |
83 | 83 | } ); |
84 | | - this.$input.on( { |
| 84 | + this.$input.bind( { |
85 | 85 | 'focus': function() { |
86 | 86 | // Make sure we aren't double-binding |
87 | | - $document.off( '.es-surfaceView' ); |
| 87 | + $document.unbind( '.es-surfaceView' ); |
88 | 88 | // Bind mouse and key events to the document to ensure we don't miss anything |
89 | | - $document.on( { |
| 89 | + $document.bind( { |
90 | 90 | 'mousemove.es-surfaceView': function(e) { |
91 | 91 | return _this.onMouseMove( e ); |
92 | 92 | }, |
— | — | @@ -102,7 +102,7 @@ |
103 | 103 | }, |
104 | 104 | 'blur': function( e ) { |
105 | 105 | // Release our event handlers when not focused |
106 | | - $document.off( '.es-surfaceView' ); |
| 106 | + $document.unbind( '.es-surfaceView' ); |
107 | 107 | _this.hideCursor(); |
108 | 108 | } |
109 | 109 | } ); |
Index: trunk/extensions/VisualEditor/modules/es/views/es.ToolbarView.js |
— | — | @@ -39,7 +39,6 @@ |
40 | 40 | ],
|
41 | 41 | state: function() {
|
42 | 42 | return 'paragraph';
|
43 | | - return '';
|
44 | 43 | }
|
45 | 44 | },
|
46 | 45 | {
|
— | — | @@ -87,12 +86,12 @@ |
88 | 87 | }
|
89 | 88 | };
|
90 | 89 |
|
91 | | -es.ToolbarView.prototype.setup = function() { |
| 90 | +es.ToolbarView.prototype.setup = function() {
|
92 | 91 | for ( var i = this.tools.length - 1; i >= 0; i-- ) {
|
93 | 92 | if ( !es.isPlainObject( this.tools[i] ) ) {
|
94 | 93 | // divider
|
95 | 94 | if ( this.tools[i] === '/' ) {
|
96 | | - this.$.prepend( '<div class="es-toolbarDivider">' );
|
| 95 | + this.$.prepend( '<div class="es-toolbarDivider">' );
|
97 | 96 | }
|
98 | 97 | } else {
|
99 | 98 | var $group = $( '<div>' )
|
— | — | @@ -125,5 +124,5 @@ |
126 | 125 | }
|
127 | 126 | this.$.prepend( $group );
|
128 | 127 | }
|
129 | | - } |
| 128 | + }
|
130 | 129 | }; |
\ No newline at end of file |
Index: trunk/extensions/VisualEditor/modules/sandbox/images/link.png |
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
Property changes on: trunk/extensions/VisualEditor/modules/sandbox/images/link.png |
___________________________________________________________________ |
Added: svn:mime-type |
131 | 130 | + image/png |
Index: trunk/extensions/VisualEditor/modules/sandbox/images/super.png |
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
Property changes on: trunk/extensions/VisualEditor/modules/sandbox/images/super.png |
___________________________________________________________________ |
Added: svn:mime-type |
132 | 131 | + image/png |
Index: trunk/extensions/VisualEditor/modules/sandbox/images/insert-reference.png |
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
Property changes on: trunk/extensions/VisualEditor/modules/sandbox/images/insert-reference.png |
___________________________________________________________________ |
Added: svn:mime-type |
133 | 132 | + image/png |
Index: trunk/extensions/VisualEditor/modules/sandbox/images/big.png |
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
Property changes on: trunk/extensions/VisualEditor/modules/sandbox/images/big.png |
___________________________________________________________________ |
Added: svn:mime-type |
134 | 133 | + image/png |
Index: trunk/extensions/VisualEditor/modules/sandbox/images/fade-down.png |
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
Property changes on: trunk/extensions/VisualEditor/modules/sandbox/images/fade-down.png |
___________________________________________________________________ |
Added: svn:mime-type |
135 | 134 | + image/png |
Index: trunk/extensions/VisualEditor/modules/sandbox/images/html.png |
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
Property changes on: trunk/extensions/VisualEditor/modules/sandbox/images/html.png |
___________________________________________________________________ |
Added: svn:mime-type |
136 | 135 | + image/png |
Index: trunk/extensions/VisualEditor/modules/sandbox/images/italic.png |
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
Property changes on: trunk/extensions/VisualEditor/modules/sandbox/images/italic.png |
___________________________________________________________________ |
Added: svn:mime-type |
137 | 136 | + image/png |
Index: trunk/extensions/VisualEditor/modules/sandbox/images/wikitext.png |
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
Property changes on: trunk/extensions/VisualEditor/modules/sandbox/images/wikitext.png |
___________________________________________________________________ |
Added: svn:mime-type |
138 | 137 | + image/png |
Index: trunk/extensions/VisualEditor/modules/sandbox/images/small.png |
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
Property changes on: trunk/extensions/VisualEditor/modules/sandbox/images/small.png |
___________________________________________________________________ |
Added: svn:mime-type |
139 | 138 | + image/png |
Index: trunk/extensions/VisualEditor/modules/sandbox/images/data.png |
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
Property changes on: trunk/extensions/VisualEditor/modules/sandbox/images/data.png |
___________________________________________________________________ |
Added: svn:mime-type |
140 | 139 | + image/png |
Index: trunk/extensions/VisualEditor/modules/sandbox/images/json.png |
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
Property changes on: trunk/extensions/VisualEditor/modules/sandbox/images/json.png |
___________________________________________________________________ |
Added: svn:mime-type |
141 | 140 | + image/png |
Index: trunk/extensions/VisualEditor/modules/sandbox/images/bullet-icon.png |
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
Property changes on: trunk/extensions/VisualEditor/modules/sandbox/images/bullet-icon.png |
___________________________________________________________________ |
Added: svn:mime-type |
142 | 141 | + image/png |
Index: trunk/extensions/VisualEditor/modules/sandbox/images/render.png |
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
Property changes on: trunk/extensions/VisualEditor/modules/sandbox/images/render.png |
___________________________________________________________________ |
Added: svn:mime-type |
143 | 142 | + image/png |
Index: trunk/extensions/VisualEditor/modules/sandbox/images/bold.png |
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
Property changes on: trunk/extensions/VisualEditor/modules/sandbox/images/bold.png |
___________________________________________________________________ |
Added: svn:mime-type |
144 | 143 | + image/png |
Index: trunk/extensions/VisualEditor/modules/sandbox/images/fade-up.png |
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
Property changes on: trunk/extensions/VisualEditor/modules/sandbox/images/fade-up.png |
___________________________________________________________________ |
Added: svn:mime-type |
145 | 144 | + image/png |
Index: trunk/extensions/VisualEditor/modules/sandbox/images/indent.png |
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
Property changes on: trunk/extensions/VisualEditor/modules/sandbox/images/indent.png |
___________________________________________________________________ |
Added: svn:mime-type |
146 | 145 | + image/png |
Index: trunk/extensions/VisualEditor/modules/sandbox/images/outdent.png |
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
Property changes on: trunk/extensions/VisualEditor/modules/sandbox/images/outdent.png |
___________________________________________________________________ |
Added: svn:mime-type |
147 | 146 | + image/png |
Index: trunk/extensions/VisualEditor/modules/sandbox/images/toolbar-shadow.png |
Cannot display: file marked as a binary type. |
svn:mime-type = application/octet-stream |
Property changes on: trunk/extensions/VisualEditor/modules/sandbox/images/toolbar-shadow.png |
___________________________________________________________________ |
Added: svn:mime-type |
148 | 147 | + application/octet-stream |
Index: trunk/extensions/VisualEditor/modules/sandbox/images/clear.png |
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
Property changes on: trunk/extensions/VisualEditor/modules/sandbox/images/clear.png |
___________________________________________________________________ |
Added: svn:mime-type |
149 | 148 | + image/png |
Index: trunk/extensions/VisualEditor/modules/sandbox/images/bullet.png |
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
Property changes on: trunk/extensions/VisualEditor/modules/sandbox/images/bullet.png |
___________________________________________________________________ |
Added: svn:mime-type |
150 | 149 | + image/png |
Index: trunk/extensions/VisualEditor/modules/sandbox/images/number.png |
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
Property changes on: trunk/extensions/VisualEditor/modules/sandbox/images/number.png |
___________________________________________________________________ |
Added: svn:mime-type |
151 | 150 | + image/png |
Index: trunk/extensions/VisualEditor/modules/sandbox/images/sub.png |
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
Property changes on: trunk/extensions/VisualEditor/modules/sandbox/images/sub.png |
___________________________________________________________________ |
Added: svn:mime-type |
152 | 151 | + image/png |
Index: trunk/extensions/VisualEditor/modules/sandbox/sandbox.css |
— | — | @@ -0,0 +1,147 @@ |
| 2 | +#es-toolbar { |
| 3 | + border: solid 1px #dddddd; |
| 4 | + position: relative; |
| 5 | + -webkit-border-top-right-radius: 0.25em; |
| 6 | + -moz-border-top-right-radius: 0.25em; |
| 7 | + -o-border-top-right-radius: 0.25em; |
| 8 | + border-top-right-radius: 0.25em; |
| 9 | + -webkit-border-top-left-radius: 0.25em; |
| 10 | + -moz-border-top-left-radius: 0.25em; |
| 11 | + -o-border-top-left-radius: 0.25em; |
| 12 | + border-top-left-radius: 0.25em; |
| 13 | + background-image: url(images/fade-up.png); |
| 14 | + background-position: bottom left; |
| 15 | + background-repeat: repeat-x; |
| 16 | +} |
| 17 | +#es-toolbar.float { |
| 18 | + position: fixed; |
| 19 | + left: 2em; |
| 20 | + right: 2em; |
| 21 | + top: 0; |
| 22 | + z-index: 100; |
| 23 | + border-top: none; |
| 24 | + -webkit-border-top-right-radius: 0; |
| 25 | + -moz-border-top-right-radius: 0; |
| 26 | + -o-border-top-right-radius: 0; |
| 27 | + border-top-right-radius: 0; |
| 28 | + -webkit-border-top-left-radius: 0; |
| 29 | + -moz-border-top-left-radius: 0; |
| 30 | + -o-border-top-left-radius: 0; |
| 31 | + border-top-left-radius: 0; |
| 32 | +} |
| 33 | +#es-toolbar-shadow { |
| 34 | + background-image: url(images/toolbar-shadow.png); |
| 35 | + background-position: top left; |
| 36 | + background-repeat: repeat-x; |
| 37 | + position: absolute; |
| 38 | + bottom: -10px; |
| 39 | + height: 9px; |
| 40 | + width: 100%; |
| 41 | + pointer-events: none; |
| 42 | + -webkit-transition: opacity 500ms ease-in-out; |
| 43 | + -moz-transition: opacity 500ms ease-in-out; |
| 44 | + -o-transition: opacity 500ms ease-in-out; |
| 45 | + transition: opacity 500ms ease-in-out; |
| 46 | + opacity: 0.125; |
| 47 | +} |
| 48 | +#es-toolbar.float #es-toolbar-shadow { |
| 49 | + opacity: 0.5; |
| 50 | +} |
| 51 | +.es-showData #es-visual, |
| 52 | +.es-showData #es-previews { |
| 53 | + width: 50%; |
| 54 | + float: left; |
| 55 | + overflow: hidden; |
| 56 | +} |
| 57 | +.es-showData #es-editor { |
| 58 | + border-right: solid 1px #dddddd; |
| 59 | +} |
| 60 | +.es-toolbarGroup { |
| 61 | + float: left; |
| 62 | + padding: 0.25em; |
| 63 | +} |
| 64 | +.es-toolbarGroup-preview { |
| 65 | + float: right; |
| 66 | +} |
| 67 | +.es-toolbarDivider { |
| 68 | + float: left; |
| 69 | + width: 1px; |
| 70 | + height: 24px; |
| 71 | + margin: 0.5em 0 0.5em 0.5em; |
| 72 | + background-color: #dddddd; |
| 73 | +} |
| 74 | +.es-toolbarLabel { |
| 75 | + float: left; |
| 76 | + padding: 0.5em 0.75em; |
| 77 | + line-height: 22px; |
| 78 | + font-size: 0.8em; |
| 79 | + color: #555555; |
| 80 | +} |
| 81 | +.es-toolbarTool { |
| 82 | + float: left; |
| 83 | + padding: 0.25em; |
| 84 | + border: solid 1px transparent; |
| 85 | + border-radius: 0.125em; |
| 86 | + -webkit-border-radius: 0.125em; |
| 87 | + -moz-border-radius: 0.125em; |
| 88 | + -o-border-radius: 0.125em; |
| 89 | + cursor: pointer; |
| 90 | +} |
| 91 | +.es-toolbarTool:hover, |
| 92 | +.es-toolbarTool-down:hover { |
| 93 | + border-color: #eeeeee; |
| 94 | +} |
| 95 | +.es-toolbarTool:active, |
| 96 | +.es-toolbarTool-down { |
| 97 | + border-color: #dddddd; |
| 98 | + background-image: url(images/fade-down.png); |
| 99 | + background-position: top left; |
| 100 | + background-repeat: repeat-x; |
| 101 | +} |
| 102 | +.es-toolbarTool img { |
| 103 | + display: block; |
| 104 | + width: 22px; |
| 105 | + height: 22px; |
| 106 | +} |
| 107 | +#es-previews { |
| 108 | + display: none; |
| 109 | +} |
| 110 | +.es-showData #es-previews { |
| 111 | + display: block; |
| 112 | +} |
| 113 | +.es-preview { |
| 114 | + margin: 0; |
| 115 | + padding: 1em; |
| 116 | +} |
| 117 | +.es-code { |
| 118 | + white-space: pre-wrap; |
| 119 | + font-family: "Droid Sans Mono", "Courier New", monospace; |
| 120 | + font-size: 0.8em; |
| 121 | +} |
| 122 | +.es-render { |
| 123 | + line-height: 1.5em; |
| 124 | + padding-top: 0; |
| 125 | +} |
| 126 | +.es-history { |
| 127 | + line-height: 1.5em; |
| 128 | + padding: 0; |
| 129 | +} |
| 130 | + |
| 131 | +/* General MediaWiki Styles */ |
| 132 | + |
| 133 | +.es-render ul { |
| 134 | + line-height: 1.5em; |
| 135 | + list-style-type: square; |
| 136 | + margin: .3em 0 0 1.5em; |
| 137 | + padding: 0; |
| 138 | + list-style-image: url(images/bullet-icon.png); |
| 139 | +} |
| 140 | +.es-render ol { |
| 141 | + line-height: 1.5em; |
| 142 | + margin: .3em 0 0 3.2em; |
| 143 | + padding: 0; |
| 144 | + list-style-image: none; |
| 145 | +} |
| 146 | +.es-render li { |
| 147 | + margin-bottom: .1em; |
| 148 | +} |
Property changes on: trunk/extensions/VisualEditor/modules/sandbox/sandbox.css |
___________________________________________________________________ |
Added: svn:eol-style |
1 | 149 | + native |
Index: trunk/extensions/VisualEditor/modules/sandbox/sandbox.js |
— | — | @@ -0,0 +1,446 @@ |
| 2 | +$(document).ready( function() { |
| 3 | + window.wikiDom = { |
| 4 | + 'type': 'document', |
| 5 | + 'children': [ |
| 6 | + { |
| 7 | + 'type': 'heading', |
| 8 | + 'attributes': { 'level': 1 }, |
| 9 | + 'content': { 'text': 'Direct manipulation interface' } |
| 10 | + }, |
| 11 | + { |
| 12 | + 'type': 'paragraph', |
| 13 | + 'content': { |
| 14 | + 'text': 'In computer science, direct manipulation is a human-computer interaction style which involves continuous representation of objects of interest, and rapid, reversible, incremental actions and feedback. The intention is to allow a user to directly manipulate objects presented to them, using actions that correspond at least loosely to the physical world. An example of direct-manipulation is resizing a graphical shape, such as a rectangle, by dragging its corners or edges with a mouse.', |
| 15 | + 'annotations': [ |
| 16 | + { |
| 17 | + 'type': 'link/internal', |
| 18 | + 'data': { |
| 19 | + 'title': 'Computer_science' |
| 20 | + }, |
| 21 | + 'range': { |
| 22 | + 'start': 3, |
| 23 | + 'end': 19 |
| 24 | + } |
| 25 | + }, |
| 26 | + { |
| 27 | + 'type': 'link/internal', |
| 28 | + 'data': { |
| 29 | + 'title': 'Human-computer interaction' |
| 30 | + }, |
| 31 | + 'range': { |
| 32 | + 'start': 46, |
| 33 | + 'end': 72 |
| 34 | + } |
| 35 | + } |
| 36 | + ] |
| 37 | + } |
| 38 | + }, |
| 39 | + { |
| 40 | + 'type': 'paragraph', |
| 41 | + 'content': { 'text': 'Having real-world metaphors for objects and actions can make it easier for a user to learn and use an interface (some might say that the interface is more natural or intuitive), and rapid, incremental feedback allows a user to make fewer errors and complete tasks in less time, because they can see the results of an action before completing the action, thus evaluating the output and compensating for mistakes.' } |
| 42 | + }, |
| 43 | + { |
| 44 | + 'type': 'paragraph', |
| 45 | + 'content': { |
| 46 | + 'text': 'The term was introduced by Ben Shneiderman in 1983 within the context of office applications and the desktop metaphor. Individuals in academia and computer scientists doing research on future user interfaces often put as much or even more stress on tactile control and feedback, or sonic control and feedback than on the visual feedback given by most GUIs. As a result the term direct manipulation interface has been more widespread in these environments. ', |
| 47 | + 'annotations': [ |
| 48 | + { |
| 49 | + 'type': 'link/internal', |
| 50 | + 'data': { |
| 51 | + 'title': 'Ben_Shneiderman' |
| 52 | + }, |
| 53 | + 'range': { |
| 54 | + 'start': 27, |
| 55 | + 'end': 42 |
| 56 | + } |
| 57 | + }, |
| 58 | + { |
| 59 | + 'type': 'link/internal', |
| 60 | + 'data': { |
| 61 | + 'title': 'GUI' |
| 62 | + }, |
| 63 | + 'range': { |
| 64 | + 'start': 352, |
| 65 | + 'end': 356 |
| 66 | + } |
| 67 | + }, |
| 68 | + { |
| 69 | + 'type': 'object/hook', |
| 70 | + 'data': { |
| 71 | + 'html': '<sup><small><a href="#">[1]</a></small></sup>' |
| 72 | + }, |
| 73 | + 'range': { |
| 74 | + 'start': 118, |
| 75 | + 'end': 119 |
| 76 | + } |
| 77 | + }, |
| 78 | + { |
| 79 | + 'type': 'object/template', |
| 80 | + 'data': { |
| 81 | + 'html': '<sup><small>[<a href="#">citation needed</a>]</small></sup>' |
| 82 | + }, |
| 83 | + 'range': { |
| 84 | + 'start': 456, |
| 85 | + 'end': 457 |
| 86 | + } |
| 87 | + } |
| 88 | + ] |
| 89 | + } |
| 90 | + }, |
| 91 | + { |
| 92 | + 'type': 'heading', |
| 93 | + 'attributes': { 'level': 2 }, |
| 94 | + 'content': { 'text': 'In contrast to WIMP/GUI interfaces' } |
| 95 | + }, |
| 96 | + { |
| 97 | + 'type': 'paragraph', |
| 98 | + 'content': { |
| 99 | + 'text': 'Direct manipulation is closely associated with interfaces that use windows, icons, menus, and a pointing device (WIMP GUI) as these almost always incorporate direct manipulation to at least some degree. However, direct manipulation should not be confused with these other terms, as it does not imply the use of windows or even graphical output. For example, direct manipulation concepts can be applied to interfaces for blind or vision-impaired users, using a combination of tactile and sonic devices and software.', |
| 100 | + 'annotations': [ |
| 101 | + { |
| 102 | + 'type': 'link/internal', |
| 103 | + 'data': { |
| 104 | + 'title': 'WIMP_(computing)' |
| 105 | + }, |
| 106 | + 'range': { |
| 107 | + 'start': 113, |
| 108 | + 'end': 117 |
| 109 | + } |
| 110 | + } |
| 111 | + ] |
| 112 | + } |
| 113 | + }, |
| 114 | + { |
| 115 | + 'type': 'paragraph', |
| 116 | + 'content': { |
| 117 | + 'text': 'It is also possible to design a WIMP interface that intentionally does not make use of direct manipulation. For example, most versions of windowing interfaces (e.g. Microsoft Windows) allowed users to reposition a window by dragging it with the mouse, but would not continually redraw the complete window at intermediate positions during the drag. Instead, for example, a rectangular outline of the window might be drawn during the drag, with the complete window contents being redrawn only once the user had released the mouse button. This was necessary on older computers that lacked the memory and/or CPU power to quickly redraw data behind a window that was being dragged.', |
| 118 | + 'annotations': [ |
| 119 | + { |
| 120 | + 'type': 'link/internal', |
| 121 | + 'data': { |
| 122 | + 'title': 'Microsoft_Windows' |
| 123 | + }, |
| 124 | + 'range': { |
| 125 | + 'start': 165, |
| 126 | + 'end': 182 |
| 127 | + } |
| 128 | + } |
| 129 | + ] |
| 130 | + } |
| 131 | + }, |
| 132 | + { |
| 133 | + 'type': 'pre', |
| 134 | + 'content': { 'text': 'A lot of text goes here... and at some point it wraps.. A lot of text goes here... and at some point it wraps.. A lot of text goes here... and at some point it wraps.. A lot of text goes here... and at some point it wraps.. A lot of text goes here... and at some point it wraps..' } |
| 135 | + }, |
| 136 | + { |
| 137 | + 'type': 'heading', |
| 138 | + 'attributes': { 'level': 1 }, |
| 139 | + 'content': { |
| 140 | + 'text': 'This is a heading (level 1)', |
| 141 | + 'annotations': [ |
| 142 | + { |
| 143 | + 'type': 'textStyle/italic', |
| 144 | + 'range': { |
| 145 | + 'start': 10, |
| 146 | + 'end': 17 |
| 147 | + } |
| 148 | + } |
| 149 | + ] |
| 150 | + } |
| 151 | + }, |
| 152 | + { |
| 153 | + 'type': 'heading', |
| 154 | + 'attributes': { 'level': 2 }, |
| 155 | + 'content': { |
| 156 | + 'text': 'This is a heading (level 2)', |
| 157 | + 'annotations': [ |
| 158 | + { |
| 159 | + 'type': 'textStyle/italic', |
| 160 | + 'range': { |
| 161 | + 'start': 10, |
| 162 | + 'end': 17 |
| 163 | + } |
| 164 | + } |
| 165 | + ] |
| 166 | + } |
| 167 | + }, |
| 168 | + { |
| 169 | + 'type': 'heading', |
| 170 | + 'attributes': { 'level': 3 }, |
| 171 | + 'content': { |
| 172 | + 'text': 'This is a heading (level 3)', |
| 173 | + 'annotations': [ |
| 174 | + { |
| 175 | + 'type': 'textStyle/italic', |
| 176 | + 'range': { |
| 177 | + 'start': 10, |
| 178 | + 'end': 17 |
| 179 | + } |
| 180 | + } |
| 181 | + ] |
| 182 | + } |
| 183 | + }, |
| 184 | + { |
| 185 | + 'type': 'heading', |
| 186 | + 'attributes': { 'level': 4 }, |
| 187 | + 'content': { |
| 188 | + 'text': 'This is a heading (level 4)', |
| 189 | + 'annotations': [ |
| 190 | + { |
| 191 | + 'type': 'textStyle/italic', |
| 192 | + 'range': { |
| 193 | + 'start': 10, |
| 194 | + 'end': 17 |
| 195 | + } |
| 196 | + } |
| 197 | + ] |
| 198 | + } |
| 199 | + }, |
| 200 | + { |
| 201 | + 'type': 'heading', |
| 202 | + 'attributes': { 'level': 5 }, |
| 203 | + 'content': { |
| 204 | + 'text': 'This is a heading (level 5)', |
| 205 | + 'annotations': [ |
| 206 | + { |
| 207 | + 'type': 'textStyle/italic', |
| 208 | + 'range': { |
| 209 | + 'start': 10, |
| 210 | + 'end': 17 |
| 211 | + } |
| 212 | + } |
| 213 | + ] |
| 214 | + } |
| 215 | + }, |
| 216 | + { |
| 217 | + 'type': 'heading', |
| 218 | + 'attributes': { 'level': 6 }, |
| 219 | + 'content': { |
| 220 | + 'text': 'This is a heading (level 6)', |
| 221 | + 'annotations': [ |
| 222 | + { |
| 223 | + 'type': 'textStyle/italic', |
| 224 | + 'range': { |
| 225 | + 'start': 10, |
| 226 | + 'end': 17 |
| 227 | + } |
| 228 | + } |
| 229 | + ] |
| 230 | + } |
| 231 | + }, |
| 232 | + { |
| 233 | + 'type': 'paragraph', |
| 234 | + 'content': { |
| 235 | + 'text': 'In text display, line wrap is the feature of continuing on a new line when a line is full, such that each line fits in the viewable window, allowing text to be read from top to bottom without any horizontal scrolling.\nWord wrap is the additional feature of most text editors, word processors, and web browsers, of breaking lines between and not within words, except when a single word is longer than a line.', |
| 236 | + 'annotations': [ |
| 237 | + // 'In text display' should be bold |
| 238 | + { 'type': 'textStyle/bold', 'range': { 'start': 0, 'end': 15 } }, |
| 239 | + // 'line wrap' should be italic |
| 240 | + { 'type': 'textStyle/italic', 'range': { 'start': 17, 'end': 26 } }, |
| 241 | + // 'wrap is' should be a link to '#' |
| 242 | + { |
| 243 | + 'type': 'link/external', |
| 244 | + 'data': { 'href': '#' }, |
| 245 | + 'range': { 'start': 22, 'end': 29 } |
| 246 | + } |
| 247 | + ] |
| 248 | + } |
| 249 | + }, |
| 250 | + { |
| 251 | + 'type': 'paragraph', |
| 252 | + 'content': { 'text': 'Test 22' } |
| 253 | + }, |
| 254 | + { |
| 255 | + 'type': 'paragraph', |
| 256 | + 'content': { 'text': 'Test 333' } |
| 257 | + }, |
| 258 | + { |
| 259 | + 'type': 'list', |
| 260 | + 'children': [ |
| 261 | + { |
| 262 | + 'type': 'listItem', |
| 263 | + 'attributes': { |
| 264 | + 'styles': ['bullet'] |
| 265 | + }, |
| 266 | + 'children' : [ |
| 267 | + { |
| 268 | + 'type': 'paragraph', |
| 269 | + 'content': { 'text': 'Test 4444' } |
| 270 | + } |
| 271 | + ] |
| 272 | + }, |
| 273 | + { |
| 274 | + 'type': 'listItem', |
| 275 | + 'attributes': { |
| 276 | + 'styles': ['bullet', 'bullet'] |
| 277 | + }, |
| 278 | + 'children' : [ |
| 279 | + { |
| 280 | + 'type': 'paragraph', |
| 281 | + 'content': { 'text': 'Test 55555' } |
| 282 | + } |
| 283 | + ] |
| 284 | + }, |
| 285 | + { |
| 286 | + 'type': 'listItem', |
| 287 | + 'attributes': { |
| 288 | + 'styles': ['bullet', 'bullet', 'bullet'] |
| 289 | + }, |
| 290 | + 'children' : [ |
| 291 | + { |
| 292 | + 'type': 'paragraph', |
| 293 | + 'content': { 'text': 'Test 666666' } |
| 294 | + } |
| 295 | + ] |
| 296 | + }, |
| 297 | + { |
| 298 | + 'type': 'listItem', |
| 299 | + 'attributes': { |
| 300 | + 'styles': ['number'] |
| 301 | + }, |
| 302 | + 'children' : [ |
| 303 | + { |
| 304 | + 'type': 'paragraph', |
| 305 | + 'content': { 'text': 'Test 7777777' } |
| 306 | + } |
| 307 | + ] |
| 308 | + }, |
| 309 | + { |
| 310 | + 'type': 'listItem', |
| 311 | + 'attributes': { |
| 312 | + 'styles': ['number', 'number'] |
| 313 | + }, |
| 314 | + 'children' : [ |
| 315 | + { |
| 316 | + 'type': 'paragraph', |
| 317 | + 'content': { 'text': 'Test 88888888' } |
| 318 | + } |
| 319 | + ] |
| 320 | + }, |
| 321 | + { |
| 322 | + 'type': 'listItem', |
| 323 | + 'attributes': { |
| 324 | + 'styles': ['term'] |
| 325 | + }, |
| 326 | + 'children' : [ |
| 327 | + { |
| 328 | + 'type': 'paragraph', |
| 329 | + 'content': { 'text': 'Test 999999999' } |
| 330 | + } |
| 331 | + ] |
| 332 | + }, |
| 333 | + { |
| 334 | + 'type': 'listItem', |
| 335 | + 'attributes': { |
| 336 | + 'styles': ['definition'] |
| 337 | + }, |
| 338 | + 'children' : [ |
| 339 | + { |
| 340 | + 'type': 'paragraph', |
| 341 | + 'content': { 'text': 'Test 0000000000' } |
| 342 | + } |
| 343 | + ] |
| 344 | + } |
| 345 | + ] |
| 346 | + }, |
| 347 | + { |
| 348 | + 'type': 'table', |
| 349 | + 'attributes': { 'html/style': 'width: 600px; border: solid 1px;' }, |
| 350 | + 'children': [ |
| 351 | + { |
| 352 | + 'type': 'tableRow', |
| 353 | + 'children': [ |
| 354 | + { |
| 355 | + 'type': 'tableCell', |
| 356 | + 'attributes': { 'html/style': 'border: solid 1px;' }, |
| 357 | + 'children': [ |
| 358 | + { |
| 359 | + 'type': 'paragraph', |
| 360 | + 'content': { 'text': 'row 1 & cell 1' } |
| 361 | + }, |
| 362 | + { |
| 363 | + 'type': 'list', |
| 364 | + 'children': [ |
| 365 | + { |
| 366 | + 'type': 'listItem', |
| 367 | + 'attributes': { |
| 368 | + 'styles': ['bullet'] |
| 369 | + }, |
| 370 | + 'children' : [ |
| 371 | + { |
| 372 | + 'type': 'paragraph', |
| 373 | + 'content': { 'text': 'Test 4444' } |
| 374 | + } |
| 375 | + ] |
| 376 | + }, |
| 377 | + { |
| 378 | + 'type': 'listItem', |
| 379 | + 'attributes': { |
| 380 | + 'styles': ['bullet', 'bullet'] |
| 381 | + }, |
| 382 | + 'children' : [ |
| 383 | + { |
| 384 | + 'type': 'paragraph', |
| 385 | + 'content': { 'text': 'Test 55555' } |
| 386 | + } |
| 387 | + ] |
| 388 | + }, |
| 389 | + { |
| 390 | + 'type': 'listItem', |
| 391 | + 'attributes': { |
| 392 | + 'styles': ['number'] |
| 393 | + }, |
| 394 | + 'children' : [ |
| 395 | + { |
| 396 | + 'type': 'paragraph', |
| 397 | + 'content': { 'text': 'Test 666666' } |
| 398 | + } |
| 399 | + ] |
| 400 | + } |
| 401 | + ] |
| 402 | + } |
| 403 | + ] |
| 404 | + }, |
| 405 | + { |
| 406 | + 'type': 'tableCell', |
| 407 | + 'attributes': { 'html/style': 'border: solid 1px;' }, |
| 408 | + 'children': [ |
| 409 | + { |
| 410 | + 'type': 'paragraph', |
| 411 | + 'content': { 'text': 'row 1 & cell 2' } |
| 412 | + } |
| 413 | + ] |
| 414 | + } |
| 415 | + ] |
| 416 | + } |
| 417 | + ] |
| 418 | + } |
| 419 | + ] |
| 420 | + }; |
| 421 | + window.doc = es.DocumentModel.newFromPlainObject( window.wikiDom ); |
| 422 | + window.surfaceModel = new es.SurfaceModel( window.doc ); |
| 423 | + window.surfaceView = new es.SurfaceView( $( '#es-editor' ), window.surfaceModel ); |
| 424 | + window.toolbarView = new es.ToolbarView( $( '#es-toolbar' ), window.surfaceView ); |
| 425 | + |
| 426 | + /* |
| 427 | + var tools = { |
| 428 | + 'textStyle/bold': $( '#es-toolbar-bold' ), |
| 429 | + 'textStyle/italic': $( '#es-toolbar-italic' ), |
| 430 | + 'link/internal': $( '#es-toolbar-link' ) |
| 431 | + }; |
| 432 | + surfaceView.on( 'select', function( range ) { |
| 433 | + for ( var key in tools ) { |
| 434 | + tools[key].removeClass( 'es-toolbarTool-down' ); |
| 435 | + } |
| 436 | + var annotations = range.getLength() ? |
| 437 | + doc.getAnnotationsFromRange( range ) : doc.getAnnotationsFromOffset( range.start ); |
| 438 | + if ( annotations.length ) { |
| 439 | + for ( var i = 0; i < annotations.length; i++ ) { |
| 440 | + if ( annotations[i].type in tools ) { |
| 441 | + tools[annotations[i].type].addClass( 'es-toolbarTool-down' ); |
| 442 | + } |
| 443 | + } |
| 444 | + } |
| 445 | + } ); |
| 446 | + */ |
| 447 | +} ); |
Property changes on: trunk/extensions/VisualEditor/modules/sandbox/sandbox.js |
___________________________________________________________________ |
Added: svn:eol-style |
1 | 448 | + native |
Index: trunk/extensions/VisualEditor/VisualEditor.i18n.php |
— | — | @@ -0,0 +1,11 @@ |
| 2 | +<?php |
| 3 | +$messages = array(); |
| 4 | + |
| 5 | +/** English |
| 6 | + * @author Trevor Parscal |
| 7 | + */ |
| 8 | +$messages['en'] = array( |
| 9 | + 'visualeditor' => 'VisualEditor', |
| 10 | + 'visualeditor-desc' => 'Visual editor for MediaWiki', |
| 11 | + 'visualeditor-sandbox-title' => 'VisualEditor Sandbox', |
| 12 | +); |