https://www.mediawiki.org/wiki/Special:Code/MediaWiki/105461
Revision: 105461
Author: tparscal
Date: 2011-12-07 21:17:34 +0000 (Wed, 07 Dec 2011)
Log Message:
-----------
Back, by popular demand, the great side-by-side preview!
Modified Paths:
--------------
trunk/extensions/VisualEditor/demo/index.html
trunk/extensions/VisualEditor/modules/es/serializers/es.HtmlSerializer.js
trunk/extensions/VisualEditor/modules/es/serializers/es.WikitextSerializer.js
trunk/extensions/VisualEditor/modules/sandbox/sandbox.css
trunk/extensions/VisualEditor/modules/sandbox/sandbox.js
Modified: trunk/extensions/VisualEditor/demo/index.html
===================================================================
--- trunk/extensions/VisualEditor/demo/index.html 2011-12-07 21:14:35 UTC
(rev 105460)
+++ trunk/extensions/VisualEditor/demo/index.html 2011-12-07 21:17:34 UTC
(rev 105461)
@@ -63,19 +63,27 @@
<body>
<div id="es-base">
<div id="es-toolbar" class="es-toolbar">
+ <div id="es-modes" class="es-modes">
+ <div id="es-mode-wikitext"
class="es-modes-button"></div>
+ <div id="es-mode-json"
class="es-modes-button"></div>
+ <div id="es-mode-html"
class="es-modes-button"></div>
+ <div id="es-mode-render"
class="es-modes-button"></div>
+ <div id="es-mode-history"
class="es-modes-button"></div>
+ </div>
<div id="es-toolbar-shadow"></div>
</div>
<div id="es-panes">
<div id="es-visual">
<div id="es-editor"></div>
</div>
- <div id="es-previews">
- <div id="es-preview-wikitext"
class="es-preview es-code"></div>
- <div id="es-preview-json"
class="es-preview es-code"></div>
- <div id="es-preview-html"
class="es-preview es-code"></div>
- <div id="es-preview-render"
class="es-preview es-render"></div>
- <div id="es-preview-history"
class="es-preview es-history"></div>
+ <div id="es-panels">
+ <div id="es-panel-wikitext"
class="es-panel es-code"></div>
+ <div id="es-panel-json" class="es-panel
es-code"></div>
+ <div id="es-panel-html" class="es-panel
es-code"></div>
+ <div id="es-panel-render"
class="es-panel es-render"></div>
+ <div id="es-panel-history"
class="es-panel es-code"></div>
</div>
+ <div style="clear:both"></div>
</div>
</div>
Modified:
trunk/extensions/VisualEditor/modules/es/serializers/es.HtmlSerializer.js
===================================================================
--- trunk/extensions/VisualEditor/modules/es/serializers/es.HtmlSerializer.js
2011-12-07 21:14:35 UTC (rev 105460)
+++ trunk/extensions/VisualEditor/modules/es/serializers/es.HtmlSerializer.js
2011-12-07 21:17:34 UTC (rev 105461)
@@ -104,13 +104,13 @@
}
}
return i;
- };
+ }
function popTags( n ) {
for (var i = 0; i < n; i++ ) {
out.push(closeTags.pop());
}
- };
+ }
function openLists( bs, bn, attribs ) {
var prefix = commonPrefixLength (bs, bn);
@@ -136,7 +136,7 @@
throw("Unknown node prefix " + c);
}
}
- };
+ }
for (var i = 0, length = node.children.length; i < length; i++) {
var e = node.children[i];
@@ -152,10 +152,7 @@
default:
tag = 'li'; break;
}
- out.push( es.Html.makeTag(tag, e.attributes,
- this.content(e.content)
- )
- );
+ out.push( es.Html.makeTag(tag, e.attributes, this.document( e )
) );
bstack = bnext;
}
popTags(closeTags.length);
Modified:
trunk/extensions/VisualEditor/modules/es/serializers/es.WikitextSerializer.js
===================================================================
---
trunk/extensions/VisualEditor/modules/es/serializers/es.WikitextSerializer.js
2011-12-07 21:14:35 UTC (rev 105460)
+++
trunk/extensions/VisualEditor/modules/es/serializers/es.WikitextSerializer.js
2011-12-07 21:17:34 UTC (rev 105461)
@@ -76,6 +76,10 @@
return this.content( node.content );
};
+es.WikitextSerializer.prototype.pre = function( node ) {
+ return ' ' + this.content( node.content ).replace( '\n', '\n ' );
+};
+
es.WikitextSerializer.prototype.list = function( node ) {
var symbolTable = {
'bullet': '*',
@@ -95,7 +99,7 @@
var childNode = node.children[i];
lines.push(
convertStyles( childNode.attributes.styles ) + ' ' +
- this.content( childNode.content )
+ this.document( childNode )
);
}
return lines.join( '\n' );
Modified: trunk/extensions/VisualEditor/modules/sandbox/sandbox.css
===================================================================
--- trunk/extensions/VisualEditor/modules/sandbox/sandbox.css 2011-12-07
21:14:35 UTC (rev 105460)
+++ trunk/extensions/VisualEditor/modules/sandbox/sandbox.css 2011-12-07
21:17:34 UTC (rev 105461)
@@ -37,25 +37,27 @@
#es-toolbar.float #es-toolbar-shadow {
opacity: 0.5;
}
-.es-showData #es-visual,
-.es-showData #es-previews {
- width: 50%;
+.es-showData #es-editor {
+ border-right: solid 1px #cccccc;
+}
+.es-showData #es-visual {
float: left;
+ width: 48%;
overflow: hidden;
}
-.es-showData #es-editor {
- border-right: solid 1px #cccccc;
-}
-
-#es-previews {
+#es-panels {
display: none;
}
-.es-showData #es-previews {
+.es-showData #es-panels {
display: block;
+ float: right;
+ width: 48%;
+ overflow: hidden;
}
-.es-preview {
+.es-panel {
margin: 0;
padding: 1em;
+ display: none;
}
.es-code {
white-space: pre-wrap;
@@ -92,4 +94,68 @@
.mediawiki .es-menuView {
font-size: 0.8em;
+}
+.es-modes {
+ position: absolute;
+ right: 0;
+ top: 0;
+ padding: 0.25em;
+}
+.es-modes-button {
+ display: inline-block;
+ border: solid 1px transparent;
+ border-radius: 0.125em;
+ -webkit-border-radius: 0.125em;
+ -moz-border-radius: 0.125em;
+ -o-border-radius: 0.125em;
+ cursor: pointer;
+ vertical-align: top;
+ padding: 0.25em;
+ width: 22px;
+ height: 22px;
+ margin-right: 0.125em;
+}
+.es-modes-button:before {
+ content: " ";
+ position: absolute;
+ display: block;
+ height: 22px;
+ width: 22px;
+}
+.es-modes-button:hover {
+ border-color: #eeeeee;
+}
+.es-modes-button:active,
+.es-modes-button-down {
+ border-color: #dddddd;
+ background-image: url(../es/images/fade-down.png);
+ background-position: top left;
+ background-repeat: repeat-x;
+ -webkit-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.07);
+ -moz-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.07);
+ box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.07);
+}
+#es-mode-wikitext:before {
+ background-image: url(../es/images/wikitext.png);
+}
+
+#es-mode-json:before {
+ background-image: url(../es/images/json.png);
+}
+
+#es-mode-html:before {
+ background-image: url(../es/images/html.png);
+}
+
+#es-mode-render:before {
+ background-image: url(../es/images/render.png);
+}
+
+#es-mode-history:before {
+ background-image: url(../es/images/history.png);
+}
+
+#es-panel-history div {
+ border-bottom: solid 1px #dddddd;
+ padding: 0.5em 0;
}
\ No newline at end of file
Modified: trunk/extensions/VisualEditor/modules/sandbox/sandbox.js
===================================================================
--- trunk/extensions/VisualEditor/modules/sandbox/sandbox.js 2011-12-07
21:14:35 UTC (rev 105460)
+++ trunk/extensions/VisualEditor/modules/sandbox/sandbox.js 2011-12-07
21:17:34 UTC (rev 105461)
@@ -443,25 +443,111 @@
window.toolbarView = new es.ToolbarView( $( '#es-toolbar' ),
window.surfaceView );
window.surfaceModel.select( new es.Range( 1, 1 ) );
- /*
- var tools = {
- 'textStyle/bold': $( '#es-toolbar-bold' ),
- 'textStyle/italic': $( '#es-toolbar-italic' ),
- 'link/internal': $( '#es-toolbar-link' )
- };
- surfaceView.on( 'select', function( range ) {
- for ( var key in tools ) {
- tools[key].removeClass( 'es-toolbarTool-down' );
- }
- var annotations = range.getLength() ?
- doc.getAnnotationsFromRange( range ) :
doc.getAnnotationsFromOffset( range.start );
- if ( annotations.length ) {
- for ( var i = 0; i < annotations.length; i++ ) {
- if ( annotations[i].type in tools ) {
- tools[annotations[i].type].addClass(
'es-toolbarTool-down' );
+ var $modeButtons = $( '.es-modes-button' ),
+ $panels = $( '.es-panel' ),
+ $base = $( '#es-base' ),
+ $window = $(window),
+ currentMode = null,
+ modes = {
+ 'wikitext': {
+ '$': $( '#es-mode-wikitext' ),
+ '$panel': $( '#es-panel-wikitext' ),
+ 'update': function() {
+ this.$panel.text(
es.WikitextSerializer.stringify( doc.getPlainObject() ) );
}
+ },
+ 'json': {
+ '$': $( '#es-mode-json' ),
+ '$panel': $( '#es-panel-json' ),
+ 'update': function() {
+ this.$panel.text(
es.JsonSerializer.stringify( doc.getPlainObject(), {
+ 'indentWith': ' '
+ } ) );
+ }
+ },
+ 'html': {
+ '$': $( '#es-mode-html' ),
+ '$panel': $( '#es-panel-html' ),
+ 'update': function() {
+ this.$panel.text(
es.HtmlSerializer.stringify( doc.getPlainObject() ) );
+ }
+ },
+ 'render': {
+ '$': $( '#es-mode-render' ),
+ '$panel': $( '#es-panel-render' ),
+ 'update': function() {
+ this.$panel.html(
es.HtmlSerializer.stringify( doc.getPlainObject() ) );
+ }
+ },
+ 'history': {
+ '$': $( '#es-mode-history' ),
+ '$panel': $( '#es-panel-history' ),
+ 'update': function() {
+ var events = '',
+ i = surfaceModel.history.length,
+ end = Math.max( 0, i - 25 ),
+ action,
+ ops,
+ data;
+ while ( --i >= end ) {
+ action =
surfaceModel.history[i];
+ if ( action instanceof es.Range
) {
+ events += '<div>select(
' + action.from + ', ' + action.to + ' )</div>';
+ } else {
+ ops =
action.getOperations().slice( 0 );
+ for ( var j = 0; j <
ops.length; j++ ) {
+ data =
ops[j].data || ops[j].length;
+ if (
es.isArray( data ) ) {
+ data =
data[0];
+ if (
es.isArray( data ) ) {
+
data = data[0];
+ }
+ }
+ if ( typeof
data !== 'string' && typeof data !== 'number' ) {
+ data =
'-';
+ }
+ ops[j] =
ops[j].type + '( ' + data + ' )';
+ }
+ events += '<div>' +
ops.join( ', ' ) + '</div>';
+ }
+ }
+ this.$panel.html( events );
+ }
}
+ };
+ $.each( modes, function( name, mode ) {
+ mode.$.click( function() {
+ var disable = $(this).hasClass( 'es-modes-button-down'
);
+ var visible = $base.hasClass( 'es-showData' );
+ $modeButtons.removeClass( 'es-modes-button-down' );
+ $panels.hide();
+ if ( disable ) {
+ if ( visible ) {
+ $base.removeClass( 'es-showData' );
+ $window.resize();
+ }
+ currentMode = null;
+ } else {
+ $(this).addClass( 'es-modes-button-down' );
+ mode.$panel.show();
+ if ( !visible ) {
+ $base.addClass( 'es-showData' );
+ $window.resize();
+ }
+ mode.update.call( mode );
+ currentMode = mode;
+ }
+ } );
+ } );
+
+ surfaceModel.on( 'transact', function() {
+ if ( currentMode ) {
+ currentMode.update.call( currentMode );
}
} );
- */
+ surfaceModel.on( 'select', function() {
+ if ( currentMode === modes.history ) {
+ currentMode.update.call( currentMode );
+ }
+ } );
} );
_______________________________________________
MediaWiki-CVS mailing list
MediaWiki-CVS@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-cvs
