| Index: trunk/extensions/VisualEditor/demo/index.html |
| — | — | @@ -63,19 +63,27 @@ |
| 64 | 64 | <body> |
| 65 | 65 | <div id="es-base"> |
| 66 | 66 | <div id="es-toolbar" class="es-toolbar"> |
| | 67 | + <div id="es-modes" class="es-modes"> |
| | 68 | + <div id="es-mode-wikitext" class="es-modes-button"></div> |
| | 69 | + <div id="es-mode-json" class="es-modes-button"></div> |
| | 70 | + <div id="es-mode-html" class="es-modes-button"></div> |
| | 71 | + <div id="es-mode-render" class="es-modes-button"></div> |
| | 72 | + <div id="es-mode-history" class="es-modes-button"></div> |
| | 73 | + </div> |
| 67 | 74 | <div id="es-toolbar-shadow"></div> |
| 68 | 75 | </div> |
| 69 | 76 | <div id="es-panes"> |
| 70 | 77 | <div id="es-visual"> |
| 71 | 78 | <div id="es-editor"></div> |
| 72 | 79 | </div> |
| 73 | | - <div id="es-previews"> |
| 74 | | - <div id="es-preview-wikitext" class="es-preview es-code"></div> |
| 75 | | - <div id="es-preview-json" class="es-preview es-code"></div> |
| 76 | | - <div id="es-preview-html" class="es-preview es-code"></div> |
| 77 | | - <div id="es-preview-render" class="es-preview es-render"></div> |
| 78 | | - <div id="es-preview-history" class="es-preview es-history"></div> |
| | 80 | + <div id="es-panels"> |
| | 81 | + <div id="es-panel-wikitext" class="es-panel es-code"></div> |
| | 82 | + <div id="es-panel-json" class="es-panel es-code"></div> |
| | 83 | + <div id="es-panel-html" class="es-panel es-code"></div> |
| | 84 | + <div id="es-panel-render" class="es-panel es-render"></div> |
| | 85 | + <div id="es-panel-history" class="es-panel es-code"></div> |
| 79 | 86 | </div> |
| | 87 | + <div style="clear:both"></div> |
| 80 | 88 | </div> |
| 81 | 89 | </div> |
| 82 | 90 | |
| Index: trunk/extensions/VisualEditor/modules/es/serializers/es.HtmlSerializer.js |
| — | — | @@ -104,13 +104,13 @@ |
| 105 | 105 | } |
| 106 | 106 | } |
| 107 | 107 | return i; |
| 108 | | - }; |
| | 108 | + } |
| 109 | 109 | |
| 110 | 110 | function popTags( n ) { |
| 111 | 111 | for (var i = 0; i < n; i++ ) { |
| 112 | 112 | out.push(closeTags.pop()); |
| 113 | 113 | } |
| 114 | | - }; |
| | 114 | + } |
| 115 | 115 | |
| 116 | 116 | function openLists( bs, bn, attribs ) { |
| 117 | 117 | var prefix = commonPrefixLength (bs, bn); |
| — | — | @@ -136,7 +136,7 @@ |
| 137 | 137 | throw("Unknown node prefix " + c); |
| 138 | 138 | } |
| 139 | 139 | } |
| 140 | | - }; |
| | 140 | + } |
| 141 | 141 | |
| 142 | 142 | for (var i = 0, length = node.children.length; i < length; i++) { |
| 143 | 143 | var e = node.children[i]; |
| — | — | @@ -152,10 +152,7 @@ |
| 153 | 153 | default: |
| 154 | 154 | tag = 'li'; break; |
| 155 | 155 | } |
| 156 | | - out.push( es.Html.makeTag(tag, e.attributes, |
| 157 | | - this.content(e.content) |
| 158 | | - ) |
| 159 | | - ); |
| | 156 | + out.push( es.Html.makeTag(tag, e.attributes, this.document( e ) ) ); |
| 160 | 157 | bstack = bnext; |
| 161 | 158 | } |
| 162 | 159 | popTags(closeTags.length); |
| Index: trunk/extensions/VisualEditor/modules/es/serializers/es.WikitextSerializer.js |
| — | — | @@ -76,6 +76,10 @@ |
| 77 | 77 | return this.content( node.content ); |
| 78 | 78 | }; |
| 79 | 79 | |
| | 80 | +es.WikitextSerializer.prototype.pre = function( node ) { |
| | 81 | + return ' ' + this.content( node.content ).replace( '\n', '\n ' ); |
| | 82 | +}; |
| | 83 | + |
| 80 | 84 | es.WikitextSerializer.prototype.list = function( node ) { |
| 81 | 85 | var symbolTable = { |
| 82 | 86 | 'bullet': '*', |
| — | — | @@ -95,7 +99,7 @@ |
| 96 | 100 | var childNode = node.children[i]; |
| 97 | 101 | lines.push( |
| 98 | 102 | convertStyles( childNode.attributes.styles ) + ' ' + |
| 99 | | - this.content( childNode.content ) |
| | 103 | + this.document( childNode ) |
| 100 | 104 | ); |
| 101 | 105 | } |
| 102 | 106 | return lines.join( '\n' ); |
| Index: trunk/extensions/VisualEditor/modules/sandbox/sandbox.css |
| — | — | @@ -37,25 +37,27 @@ |
| 38 | 38 | #es-toolbar.float #es-toolbar-shadow { |
| 39 | 39 | opacity: 0.5; |
| 40 | 40 | } |
| 41 | | -.es-showData #es-visual, |
| 42 | | -.es-showData #es-previews { |
| 43 | | - width: 50%; |
| | 41 | +.es-showData #es-editor { |
| | 42 | + border-right: solid 1px #cccccc; |
| | 43 | +} |
| | 44 | +.es-showData #es-visual { |
| 44 | 45 | float: left; |
| | 46 | + width: 48%; |
| 45 | 47 | overflow: hidden; |
| 46 | 48 | } |
| 47 | | -.es-showData #es-editor { |
| 48 | | - border-right: solid 1px #cccccc; |
| 49 | | -} |
| 50 | | - |
| 51 | | -#es-previews { |
| | 49 | +#es-panels { |
| 52 | 50 | display: none; |
| 53 | 51 | } |
| 54 | | -.es-showData #es-previews { |
| | 52 | +.es-showData #es-panels { |
| 55 | 53 | display: block; |
| | 54 | + float: right; |
| | 55 | + width: 48%; |
| | 56 | + overflow: hidden; |
| 56 | 57 | } |
| 57 | | -.es-preview { |
| | 58 | +.es-panel { |
| 58 | 59 | margin: 0; |
| 59 | 60 | padding: 1em; |
| | 61 | + display: none; |
| 60 | 62 | } |
| 61 | 63 | .es-code { |
| 62 | 64 | white-space: pre-wrap; |
| — | — | @@ -92,4 +94,68 @@ |
| 93 | 95 | |
| 94 | 96 | .mediawiki .es-menuView { |
| 95 | 97 | font-size: 0.8em; |
| | 98 | +} |
| | 99 | +.es-modes { |
| | 100 | + position: absolute; |
| | 101 | + right: 0; |
| | 102 | + top: 0; |
| | 103 | + padding: 0.25em; |
| | 104 | +} |
| | 105 | +.es-modes-button { |
| | 106 | + display: inline-block; |
| | 107 | + border: solid 1px transparent; |
| | 108 | + border-radius: 0.125em; |
| | 109 | + -webkit-border-radius: 0.125em; |
| | 110 | + -moz-border-radius: 0.125em; |
| | 111 | + -o-border-radius: 0.125em; |
| | 112 | + cursor: pointer; |
| | 113 | + vertical-align: top; |
| | 114 | + padding: 0.25em; |
| | 115 | + width: 22px; |
| | 116 | + height: 22px; |
| | 117 | + margin-right: 0.125em; |
| | 118 | +} |
| | 119 | +.es-modes-button:before { |
| | 120 | + content: " "; |
| | 121 | + position: absolute; |
| | 122 | + display: block; |
| | 123 | + height: 22px; |
| | 124 | + width: 22px; |
| | 125 | +} |
| | 126 | +.es-modes-button:hover { |
| | 127 | + border-color: #eeeeee; |
| | 128 | +} |
| | 129 | +.es-modes-button:active, |
| | 130 | +.es-modes-button-down { |
| | 131 | + border-color: #dddddd; |
| | 132 | + background-image: url(../es/images/fade-down.png); |
| | 133 | + background-position: top left; |
| | 134 | + background-repeat: repeat-x; |
| | 135 | + -webkit-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.07); |
| | 136 | + -moz-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.07); |
| | 137 | + box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.07); |
| | 138 | +} |
| | 139 | +#es-mode-wikitext:before { |
| | 140 | + background-image: url(../es/images/wikitext.png); |
| | 141 | +} |
| | 142 | + |
| | 143 | +#es-mode-json:before { |
| | 144 | + background-image: url(../es/images/json.png); |
| | 145 | +} |
| | 146 | + |
| | 147 | +#es-mode-html:before { |
| | 148 | + background-image: url(../es/images/html.png); |
| | 149 | +} |
| | 150 | + |
| | 151 | +#es-mode-render:before { |
| | 152 | + background-image: url(../es/images/render.png); |
| | 153 | +} |
| | 154 | + |
| | 155 | +#es-mode-history:before { |
| | 156 | + background-image: url(../es/images/history.png); |
| | 157 | +} |
| | 158 | + |
| | 159 | +#es-panel-history div { |
| | 160 | + border-bottom: solid 1px #dddddd; |
| | 161 | + padding: 0.5em 0; |
| 96 | 162 | } |
| \ No newline at end of file |
| Index: trunk/extensions/VisualEditor/modules/sandbox/sandbox.js |
| — | — | @@ -443,25 +443,111 @@ |
| 444 | 444 | window.toolbarView = new es.ToolbarView( $( '#es-toolbar' ), window.surfaceView ); |
| 445 | 445 | window.surfaceModel.select( new es.Range( 1, 1 ) ); |
| 446 | 446 | |
| 447 | | - /* |
| 448 | | - var tools = { |
| 449 | | - 'textStyle/bold': $( '#es-toolbar-bold' ), |
| 450 | | - 'textStyle/italic': $( '#es-toolbar-italic' ), |
| 451 | | - 'link/internal': $( '#es-toolbar-link' ) |
| 452 | | - }; |
| 453 | | - surfaceView.on( 'select', function( range ) { |
| 454 | | - for ( var key in tools ) { |
| 455 | | - tools[key].removeClass( 'es-toolbarTool-down' ); |
| 456 | | - } |
| 457 | | - var annotations = range.getLength() ? |
| 458 | | - doc.getAnnotationsFromRange( range ) : doc.getAnnotationsFromOffset( range.start ); |
| 459 | | - if ( annotations.length ) { |
| 460 | | - for ( var i = 0; i < annotations.length; i++ ) { |
| 461 | | - if ( annotations[i].type in tools ) { |
| 462 | | - tools[annotations[i].type].addClass( 'es-toolbarTool-down' ); |
| | 447 | + var $modeButtons = $( '.es-modes-button' ), |
| | 448 | + $panels = $( '.es-panel' ), |
| | 449 | + $base = $( '#es-base' ), |
| | 450 | + $window = $(window), |
| | 451 | + currentMode = null, |
| | 452 | + modes = { |
| | 453 | + 'wikitext': { |
| | 454 | + '$': $( '#es-mode-wikitext' ), |
| | 455 | + '$panel': $( '#es-panel-wikitext' ), |
| | 456 | + 'update': function() { |
| | 457 | + this.$panel.text( es.WikitextSerializer.stringify( doc.getPlainObject() ) ); |
| 463 | 458 | } |
| | 459 | + }, |
| | 460 | + 'json': { |
| | 461 | + '$': $( '#es-mode-json' ), |
| | 462 | + '$panel': $( '#es-panel-json' ), |
| | 463 | + 'update': function() { |
| | 464 | + this.$panel.text( es.JsonSerializer.stringify( doc.getPlainObject(), { |
| | 465 | + 'indentWith': ' ' |
| | 466 | + } ) ); |
| | 467 | + } |
| | 468 | + }, |
| | 469 | + 'html': { |
| | 470 | + '$': $( '#es-mode-html' ), |
| | 471 | + '$panel': $( '#es-panel-html' ), |
| | 472 | + 'update': function() { |
| | 473 | + this.$panel.text( es.HtmlSerializer.stringify( doc.getPlainObject() ) ); |
| | 474 | + } |
| | 475 | + }, |
| | 476 | + 'render': { |
| | 477 | + '$': $( '#es-mode-render' ), |
| | 478 | + '$panel': $( '#es-panel-render' ), |
| | 479 | + 'update': function() { |
| | 480 | + this.$panel.html( es.HtmlSerializer.stringify( doc.getPlainObject() ) ); |
| | 481 | + } |
| | 482 | + }, |
| | 483 | + 'history': { |
| | 484 | + '$': $( '#es-mode-history' ), |
| | 485 | + '$panel': $( '#es-panel-history' ), |
| | 486 | + 'update': function() { |
| | 487 | + var events = '', |
| | 488 | + i = surfaceModel.history.length, |
| | 489 | + end = Math.max( 0, i - 25 ), |
| | 490 | + action, |
| | 491 | + ops, |
| | 492 | + data; |
| | 493 | + while ( --i >= end ) { |
| | 494 | + action = surfaceModel.history[i]; |
| | 495 | + if ( action instanceof es.Range ) { |
| | 496 | + events += '<div>select( ' + action.from + ', ' + action.to + ' )</div>'; |
| | 497 | + } else { |
| | 498 | + ops = action.getOperations().slice( 0 ); |
| | 499 | + for ( var j = 0; j < ops.length; j++ ) { |
| | 500 | + data = ops[j].data || ops[j].length; |
| | 501 | + if ( es.isArray( data ) ) { |
| | 502 | + data = data[0]; |
| | 503 | + if ( es.isArray( data ) ) { |
| | 504 | + data = data[0]; |
| | 505 | + } |
| | 506 | + } |
| | 507 | + if ( typeof data !== 'string' && typeof data !== 'number' ) { |
| | 508 | + data = '-'; |
| | 509 | + } |
| | 510 | + ops[j] = ops[j].type + '( ' + data + ' )'; |
| | 511 | + } |
| | 512 | + events += '<div>' + ops.join( ', ' ) + '</div>'; |
| | 513 | + } |
| | 514 | + } |
| | 515 | + this.$panel.html( events ); |
| | 516 | + } |
| 464 | 517 | } |
| | 518 | + }; |
| | 519 | + $.each( modes, function( name, mode ) { |
| | 520 | + mode.$.click( function() { |
| | 521 | + var disable = $(this).hasClass( 'es-modes-button-down' ); |
| | 522 | + var visible = $base.hasClass( 'es-showData' ); |
| | 523 | + $modeButtons.removeClass( 'es-modes-button-down' ); |
| | 524 | + $panels.hide(); |
| | 525 | + if ( disable ) { |
| | 526 | + if ( visible ) { |
| | 527 | + $base.removeClass( 'es-showData' ); |
| | 528 | + $window.resize(); |
| | 529 | + } |
| | 530 | + currentMode = null; |
| | 531 | + } else { |
| | 532 | + $(this).addClass( 'es-modes-button-down' ); |
| | 533 | + mode.$panel.show(); |
| | 534 | + if ( !visible ) { |
| | 535 | + $base.addClass( 'es-showData' ); |
| | 536 | + $window.resize(); |
| | 537 | + } |
| | 538 | + mode.update.call( mode ); |
| | 539 | + currentMode = mode; |
| | 540 | + } |
| | 541 | + } ); |
| | 542 | + } ); |
| | 543 | + |
| | 544 | + surfaceModel.on( 'transact', function() { |
| | 545 | + if ( currentMode ) { |
| | 546 | + currentMode.update.call( currentMode ); |
| 465 | 547 | } |
| 466 | 548 | } ); |
| 467 | | - */ |
| | 549 | + surfaceModel.on( 'select', function() { |
| | 550 | + if ( currentMode === modes.history ) { |
| | 551 | + currentMode.update.call( currentMode ); |
| | 552 | + } |
| | 553 | + } ); |
| 468 | 554 | } ); |