mediawiki-extensions-Visual.../modules/ve/ui/widgets/ve.ui.SurfaceWidget.js

107 lines
2.2 KiB
JavaScript
Raw Normal View History

/*!
* VisualEditor UserInterface SurfaceWidget class.
*
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
* Creates an ve.ui.SurfaceWidget object.
*
* @class
* @abstract
* @extends ve.ui.Widget
*
* @constructor
* @param {ve.dm.ElementLinearData} data Content data
* @param {Object} [config] Config options
* @cfg {Object[]} [tools] Toolbar configuration
* @cfg {string[]} [commands] List of supported commands
*/
ve.ui.SurfaceWidget = function VeUiSurfaceWidget( data, config ) {
// Config intialization
config = config || {};
// Parent constructor
ve.ui.Widget.call( this, config );
// Properties
this.surface = new ve.ui.Surface( data, { '$$': this.$$ } );
this.toolbar = new ve.ui.Toolbar( this.surface, { '$$': this.$$ } );
// Initialization
this.$
.addClass( 've-ui-surfaceWidget' )
.append( this.toolbar.$, this.surface.$ );
if ( config.tools ) {
this.toolbar.addTools( config.tools );
}
if ( config.commands ) {
this.surface.addCommands( config.commands );
}
};
/* Inheritance */
ve.inheritClass( ve.ui.SurfaceWidget, ve.ui.Widget );
/* Methods */
/**
* Get surface.
*
* @method
* @returns {ve.ui.Surface} Surface
*/
ve.ui.SurfaceWidget.prototype.getSurface = function () {
return this.surface;
};
/**
* Get toolbar.
*
* @method
* @returns {ve.ui.Toolbar} Toolbar
*/
ve.ui.SurfaceWidget.prototype.getToolbar = function () {
return this.toolbar;
};
/**
* Get content data.
*
* @method
* @returns {ve.dm.ElementLinearData} Content data
*/
ve.ui.SurfaceWidget.prototype.getContent = function () {
return this.surface.getModel().getDocument().getData();
};
/**
* Initialize surface and toolbar.
*
* Widget must be attached to DOM before initializing.
*
* @method
*/
ve.ui.SurfaceWidget.prototype.initialize = function () {
ve.ui.Toolbar: Refactor floating logic for performance == Renamed methods == * enableFloating -> enableFloatable * disableFloating -> disableFloatable * setPosition -> float * resetPosition -> unfloat == Scroll and resize event == Timeline for scroll event reduced from about half a dozen "Recalculate style" and various forced "Paint" down to 0. New timeline for scroll is clean (for me: from ~35 to ~59 fps): * 1 Event (scroll) * 1 Composite Layer The composite layer action is the browser changing the viewport to a different portion of the document drawing. Exactly the one thing a simple scroll should do. Timeline for resize event is still pretty crowded and low fps, but it has improved. Further improvement would likely be around using requestAnimation and going outside ve.ui.Toolbar. == Changes == * New: ve.ui.Toolbar#initialize. Similar to what surface has. Users of Toolbar should decide whether to call enableFloatable, append it to the DOM at some point and then call initialize() once. * Don't compute offset() every time. Eliminated by doing it once in #initialize. These 'top' and 'left' offsets do not change. * Don't compute outerWidth() and $window.width() every time. Reduced by doing it once in #initialize to compute the 'right' offset. Updating it only on resize. * Don't set 'top' every time. This is already in the stylesheet. It was never set to anything else so the abstraction for it in #float has been removed. This also made it obvious that code for "ve-ui-toolbar-bottom" was unused and left behind. Tha class was only ever being removed from something (never added). The one addClass call for it was in a condition that is always false ("if top > 0"). * Don't set 'left' every time. Eliminated by doing it once in #float. * Don't set 'right' every time. Reduced by no longer doing it on scroll. Done once in #float, and on resize after computing the new value for it. * Remove no-op style operations. Wrapped methods in if-floatable, if-floated etc. to reduce a fair amount of easily avoided re-paint overhead. * Avoid double re-paint in mw.ViewPageTarget. Though we prevent a lot of redundant re-paints now, whenever we do repaint we want to do it in 1 repaint instead of 2. ve.ui.Toolbar emits #toolbarPosition, which tells mw.ViewPageTarget to update toolbarTracker which would read the new $bar style properties and copy them over to the $toolbarTracker. However, this read operation forces the browser to do an immediate re-paint half-way just for $bar. Browsers only repaint when style properties are changed and JS has yielded. The exception to this is JS reading style properties: in that case the browser is forced to do those deferred repaints directly and reflect the new values. We can avoid this double repaint by passing the updated values as data instead of requiring the receiver to read the DOM (and thus a keep the deferred repaint). Now toolbarTracker can use them directly whilst the browser hasn't even repainted $bar yet. == Clean up == * Redundant "border-radius: 0". This would reset something, but it never does. None of the things it inherits from set a border-radius. There is one subclass where toolbar is used with a border-radius (".ve-ui-surfaceWidget .ve-ui-toolbar-bar" sets a border-radius) which overrides this on purpose, so the default of 0 is redundant. * Pattern "if ( .. ) addClass() else removeClass()" changed to: "toggleClass( , .. )" Bug: 52014 Change-Id: I9be855148962eee068a77fe83e98eb20bbdcfeec
2013-07-25 02:36:01 +00:00
this.toolbar.initialize();
this.surface.initialize();
this.surface.view.documentView.documentNode.$.focus();
};
/**
* Destroy surface and toolbar.
*
* @method
*/
ve.ui.SurfaceWidget.prototype.destroy = function () {
if ( this.surface ) {
this.surface.destroy();
}
if ( this.toolbar ) {
this.toolbar.destroy();
}
this.$.remove();
};