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