r104479 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:r104478‎ | r104479 | r104480 >
Date:20:28, 28 November 2011
Author:tparscal
Status:deferred
Tags:
Comment:
Initial MediaWiki Integration
Modified paths:
  • /trunk/extensions/VisualEditor/SpecialVisualEditorSandbox.php (added) (history)
  • /trunk/extensions/VisualEditor/VisualEditor.i18n.php (added) (history)
  • /trunk/extensions/VisualEditor/VisualEditor.php (added) (history)
  • /trunk/extensions/VisualEditor/demo/es.css (deleted) (history)
  • /trunk/extensions/VisualEditor/demo/es.js (deleted) (history)
  • /trunk/extensions/VisualEditor/demo/images (deleted) (history)
  • /trunk/extensions/VisualEditor/demo/index.html (modified) (history)
  • /trunk/extensions/VisualEditor/modules/es/views/es.SurfaceView.js (modified) (history)
  • /trunk/extensions/VisualEditor/modules/es/views/es.ToolbarView.js (modified) (history)
  • /trunk/extensions/VisualEditor/modules/sandbox (added) (history)
  • /trunk/extensions/VisualEditor/modules/sandbox/images (added) (history)
  • /trunk/extensions/VisualEditor/modules/sandbox/sandbox.css (added) (history)
  • /trunk/extensions/VisualEditor/modules/sandbox/sandbox.js (added) (history)

Diff [purge]

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 @@
55 <head>
66 <title>EditSurface Demo</title>
77 <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>
935 </head>
1036 <body>
1137 <div id="es-base">
1238 <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 - -->
4239 <div style="clear:both"></div>
4340 <div id="es-toolbar-shadow"></div>
4441 </div>
@@ -110,6 +107,6 @@
111108 <script src="../modules/es/views/es.HeadingView.js"></script>
112109
113110 <!-- Demo -->
114 - <script src="es.js"></script>
 111+ <script src="../modules/sandbox/sandbox.js"></script>
115112 </body>
116113 </html>
\ No newline at end of file
Index: trunk/extensions/VisualEditor/modules/es/views/es.SurfaceView.js
@@ -80,12 +80,12 @@
8181 this.$.mousedown( function(e) {
8282 return _this.onMouseDown( e );
8383 } );
84 - this.$input.on( {
 84+ this.$input.bind( {
8585 'focus': function() {
8686 // Make sure we aren't double-binding
87 - $document.off( '.es-surfaceView' );
 87+ $document.unbind( '.es-surfaceView' );
8888 // Bind mouse and key events to the document to ensure we don't miss anything
89 - $document.on( {
 89+ $document.bind( {
9090 'mousemove.es-surfaceView': function(e) {
9191 return _this.onMouseMove( e );
9292 },
@@ -102,7 +102,7 @@
103103 },
104104 'blur': function( e ) {
105105 // Release our event handlers when not focused
106 - $document.off( '.es-surfaceView' );
 106+ $document.unbind( '.es-surfaceView' );
107107 _this.hideCursor();
108108 }
109109 } );
Index: trunk/extensions/VisualEditor/modules/es/views/es.ToolbarView.js
@@ -39,7 +39,6 @@
4040 ],
4141 state: function() {
4242 return 'paragraph';
43 - return '';
4443 }
4544 },
4645 {
@@ -87,12 +86,12 @@
8887 }
8988 };
9089
91 -es.ToolbarView.prototype.setup = function() {
 90+es.ToolbarView.prototype.setup = function() {
9291 for ( var i = this.tools.length - 1; i >= 0; i-- ) {
9392 if ( !es.isPlainObject( this.tools[i] ) ) {
9493 // divider
9594 if ( this.tools[i] === '/' ) {
96 - this.$.prepend( '<div class="es-toolbarDivider">' );
 95+ this.$.prepend( '<div class="es-toolbarDivider">' );
9796 }
9897 } else {
9998 var $group = $( '<div>' )
@@ -125,5 +124,5 @@
126125 }
127126 this.$.prepend( $group );
128127 }
129 - }
 128+ }
130129 };
\ 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
131130 + 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
132131 + 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
133132 + 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
134133 + 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
135134 + 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
136135 + 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
137136 + 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
138137 + 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
139138 + 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
140139 + 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
141140 + 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
142141 + 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
143142 + 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
144143 + 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
145144 + 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
146145 + 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
147146 + 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
148147 + 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
149148 + 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
150149 + 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
151150 + 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
152151 + 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
1149 + 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
1448 + 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+);

Follow-up revisions

RevisionCommit summaryAuthorDate
r104545r104479: Adding extension to translatewiki.netraymond08:38, 29 November 2011

Status & tagging log