mediawiki-extensions-Visual.../modules/ve/init/sa/ve.init.sa.Target.js

46 lines
1.2 KiB
JavaScript
Raw Normal View History

/*!
* VisualEditor Standalone Initialization Target class.
*
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
* Initialization Standalone target.
*
Floating toolbar cleanup Objective: Move toolbar floating functionality to ve.init and clean it up As a bonus: demo.css * Fix CSS path to set width of inputs properly Changes: demos/ve/index.php * Allow ve.init.sa.Target to construct it's own surface object ve.ce.Surface.js * Move object resizing and table editing disabling commands from ve.Surface * Add method for getting the currently focused node ve.init.mw.ViewPageTarget.js * Remove initializing surface property (now done in parent class) * Normalize all uses of "setup" to "setUp" * Replace uses of getDocumentModel with getModel().getDocument() * Add calls to set up and tear down for toolbar floating ve.init.mw.Target.js * Replace uses of getDocumentModel with getModel().getDocument() ve.init.sa.Target.js * Move example from ve.Surface * Change constructor to accept document model * Create ve.Surface object in constructor * Add set up for toolbar floating ve.ui.init.Target.js * Initialize surface property * Move and cleanup toolbar floating functionality from ve.Surface ve.ui.Surface.js * Remove example now that init.sa creates it's own surface (moved) * Document options * Simplify toolbar options and remove the concept of multiple toolbars * No longer cache the options object * Move toolbar initialization to constructor * Change setupCommands to addCommands, making it useful after construction * Inline selection initialization * Move and cleanup toolbar floating functionality to ve.ce.Surface * Reorganize a few methods * Move toolbar floating to ve.init.Target.js Change-Id: I393a426e35567d57c048122bf64a83c1ef45e6e8
2013-05-10 00:17:51 +00:00
* @example
* new ve.init.sa.Target(
* $( '<div>' ).appendTo( 'body' ), ve.createDocumentFromHtml( '<p>Hello world.</p>' )
Floating toolbar cleanup Objective: Move toolbar floating functionality to ve.init and clean it up As a bonus: demo.css * Fix CSS path to set width of inputs properly Changes: demos/ve/index.php * Allow ve.init.sa.Target to construct it's own surface object ve.ce.Surface.js * Move object resizing and table editing disabling commands from ve.Surface * Add method for getting the currently focused node ve.init.mw.ViewPageTarget.js * Remove initializing surface property (now done in parent class) * Normalize all uses of "setup" to "setUp" * Replace uses of getDocumentModel with getModel().getDocument() * Add calls to set up and tear down for toolbar floating ve.init.mw.Target.js * Replace uses of getDocumentModel with getModel().getDocument() ve.init.sa.Target.js * Move example from ve.Surface * Change constructor to accept document model * Create ve.Surface object in constructor * Add set up for toolbar floating ve.ui.init.Target.js * Initialize surface property * Move and cleanup toolbar floating functionality from ve.Surface ve.ui.Surface.js * Remove example now that init.sa creates it's own surface (moved) * Document options * Simplify toolbar options and remove the concept of multiple toolbars * No longer cache the options object * Move toolbar initialization to constructor * Change setupCommands to addCommands, making it useful after construction * Inline selection initialization * Move and cleanup toolbar floating functionality to ve.ce.Surface * Reorganize a few methods * Move toolbar floating to ve.init.Target.js Change-Id: I393a426e35567d57c048122bf64a83c1ef45e6e8
2013-05-10 00:17:51 +00:00
* );
*
* @class
* @extends ve.init.Target
*
* @constructor
* @param {jQuery} $container Container to render target into
Floating toolbar cleanup Objective: Move toolbar floating functionality to ve.init and clean it up As a bonus: demo.css * Fix CSS path to set width of inputs properly Changes: demos/ve/index.php * Allow ve.init.sa.Target to construct it's own surface object ve.ce.Surface.js * Move object resizing and table editing disabling commands from ve.Surface * Add method for getting the currently focused node ve.init.mw.ViewPageTarget.js * Remove initializing surface property (now done in parent class) * Normalize all uses of "setup" to "setUp" * Replace uses of getDocumentModel with getModel().getDocument() * Add calls to set up and tear down for toolbar floating ve.init.mw.Target.js * Replace uses of getDocumentModel with getModel().getDocument() ve.init.sa.Target.js * Move example from ve.Surface * Change constructor to accept document model * Create ve.Surface object in constructor * Add set up for toolbar floating ve.ui.init.Target.js * Initialize surface property * Move and cleanup toolbar floating functionality from ve.Surface ve.ui.Surface.js * Remove example now that init.sa creates it's own surface (moved) * Document options * Simplify toolbar options and remove the concept of multiple toolbars * No longer cache the options object * Move toolbar initialization to constructor * Change setupCommands to addCommands, making it useful after construction * Inline selection initialization * Move and cleanup toolbar floating functionality to ve.ce.Surface * Reorganize a few methods * Move toolbar floating to ve.init.Target.js Change-Id: I393a426e35567d57c048122bf64a83c1ef45e6e8
2013-05-10 00:17:51 +00:00
* @param {ve.dm.Document} doc Document model
*/
Floating toolbar cleanup Objective: Move toolbar floating functionality to ve.init and clean it up As a bonus: demo.css * Fix CSS path to set width of inputs properly Changes: demos/ve/index.php * Allow ve.init.sa.Target to construct it's own surface object ve.ce.Surface.js * Move object resizing and table editing disabling commands from ve.Surface * Add method for getting the currently focused node ve.init.mw.ViewPageTarget.js * Remove initializing surface property (now done in parent class) * Normalize all uses of "setup" to "setUp" * Replace uses of getDocumentModel with getModel().getDocument() * Add calls to set up and tear down for toolbar floating ve.init.mw.Target.js * Replace uses of getDocumentModel with getModel().getDocument() ve.init.sa.Target.js * Move example from ve.Surface * Change constructor to accept document model * Create ve.Surface object in constructor * Add set up for toolbar floating ve.ui.init.Target.js * Initialize surface property * Move and cleanup toolbar floating functionality from ve.Surface ve.ui.Surface.js * Remove example now that init.sa creates it's own surface (moved) * Document options * Simplify toolbar options and remove the concept of multiple toolbars * No longer cache the options object * Move toolbar initialization to constructor * Change setupCommands to addCommands, making it useful after construction * Inline selection initialization * Move and cleanup toolbar floating functionality to ve.ce.Surface * Reorganize a few methods * Move toolbar floating to ve.init.Target.js Change-Id: I393a426e35567d57c048122bf64a83c1ef45e6e8
2013-05-10 00:17:51 +00:00
ve.init.sa.Target = function VeInitSaTarget( $container, doc ) {
// Parent constructor
ve.init.Target.call( this, $container );
Floating toolbar cleanup Objective: Move toolbar floating functionality to ve.init and clean it up As a bonus: demo.css * Fix CSS path to set width of inputs properly Changes: demos/ve/index.php * Allow ve.init.sa.Target to construct it's own surface object ve.ce.Surface.js * Move object resizing and table editing disabling commands from ve.Surface * Add method for getting the currently focused node ve.init.mw.ViewPageTarget.js * Remove initializing surface property (now done in parent class) * Normalize all uses of "setup" to "setUp" * Replace uses of getDocumentModel with getModel().getDocument() * Add calls to set up and tear down for toolbar floating ve.init.mw.Target.js * Replace uses of getDocumentModel with getModel().getDocument() ve.init.sa.Target.js * Move example from ve.Surface * Change constructor to accept document model * Create ve.Surface object in constructor * Add set up for toolbar floating ve.ui.init.Target.js * Initialize surface property * Move and cleanup toolbar floating functionality from ve.Surface ve.ui.Surface.js * Remove example now that init.sa creates it's own surface (moved) * Document options * Simplify toolbar options and remove the concept of multiple toolbars * No longer cache the options object * Move toolbar initialization to constructor * Change setupCommands to addCommands, making it useful after construction * Inline selection initialization * Move and cleanup toolbar floating functionality to ve.ce.Surface * Reorganize a few methods * Move toolbar floating to ve.init.Target.js Change-Id: I393a426e35567d57c048122bf64a83c1ef45e6e8
2013-05-10 00:17:51 +00:00
// Properties
The Great ve.ui.Surface refactor of 2013 Prologue: Farewell ve.Editor my good chap… Oh, hey there HTML frames - I didn't see you there! In a world where iframes are outlaws, and symbols like document and window are global, there were more than a few assumptions about which document or window was being used. But fear not - for this commit (probably) tracks them all down, leaving a trail of iframe-compatible awesomeness in its wake. With the great ve.ui.Surface now able to be used inside of iframes, let the reference editing commence. But there, lurking in the darkness is a DM issue so fierce it may take Roan and/or Ed up to 3 whole hours to sort it out. Note to Roan and/or Ed: Editing references seems to work fine, but when saving the page there are "no changes" which is a reasonable indication to the contrary. Objectives: * Make it possible to have multiple surfaces be instantiated, get along nicely, and be embedded inside of iframes if needed. * Make reference content editable within a dialog Approach: * Move what's left of ve.Editor to ve.ui.Surface and essentially obliterate all use of it * Make even more stuff inherit from ve.Element (long live this.$$) * Use the correct document or window anywhere it was being assumed to be the top level one * Resolve stacking order issues by removing the excessive use of z-index and introducing global and local overlay elements for each editor * Add a surface to the reference dialog, load up the reference contents and save them back on apply * Actually destroy what we create in ce and ui surfaces * Add recursive frame offset calculation method to ve.Element * Moved ve.ce.Surface's getSelectionRect method to the prototype Bonus: * Move ve.ce.DocumentNode.css contents to ve.ce.Node.css (not sure why it was separate in the first place, but I'm likely the one to blame) * Fix blatant lies in documentation * Whitespace cleanup here and there * Get rid of ve.ui.Window overlays - not used or needed Change-Id: Iede83e7d24f7cb249b6ba3dc45d770445b862e08
2013-05-20 22:45:50 +00:00
this.surface = new ve.ui.Surface( doc );
this.toolbar = new ve.ui.TargetToolbar( this, this.surface, { 'shadow': true } );
Floating toolbar cleanup Objective: Move toolbar floating functionality to ve.init and clean it up As a bonus: demo.css * Fix CSS path to set width of inputs properly Changes: demos/ve/index.php * Allow ve.init.sa.Target to construct it's own surface object ve.ce.Surface.js * Move object resizing and table editing disabling commands from ve.Surface * Add method for getting the currently focused node ve.init.mw.ViewPageTarget.js * Remove initializing surface property (now done in parent class) * Normalize all uses of "setup" to "setUp" * Replace uses of getDocumentModel with getModel().getDocument() * Add calls to set up and tear down for toolbar floating ve.init.mw.Target.js * Replace uses of getDocumentModel with getModel().getDocument() ve.init.sa.Target.js * Move example from ve.Surface * Change constructor to accept document model * Create ve.Surface object in constructor * Add set up for toolbar floating ve.ui.init.Target.js * Initialize surface property * Move and cleanup toolbar floating functionality from ve.Surface ve.ui.Surface.js * Remove example now that init.sa creates it's own surface (moved) * Document options * Simplify toolbar options and remove the concept of multiple toolbars * No longer cache the options object * Move toolbar initialization to constructor * Change setupCommands to addCommands, making it useful after construction * Inline selection initialization * Move and cleanup toolbar floating functionality to ve.ce.Surface * Reorganize a few methods * Move toolbar floating to ve.init.Target.js Change-Id: I393a426e35567d57c048122bf64a83c1ef45e6e8
2013-05-10 00:17:51 +00:00
// Initialization
this.toolbar.$.addClass( 've-init-sa-target-toolbar' );
this.toolbar.setup( this.constructor.static.toolbarGroups );
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.enableFloatable();
The Great ve.ui.Surface refactor of 2013 Prologue: Farewell ve.Editor my good chap… Oh, hey there HTML frames - I didn't see you there! In a world where iframes are outlaws, and symbols like document and window are global, there were more than a few assumptions about which document or window was being used. But fear not - for this commit (probably) tracks them all down, leaving a trail of iframe-compatible awesomeness in its wake. With the great ve.ui.Surface now able to be used inside of iframes, let the reference editing commence. But there, lurking in the darkness is a DM issue so fierce it may take Roan and/or Ed up to 3 whole hours to sort it out. Note to Roan and/or Ed: Editing references seems to work fine, but when saving the page there are "no changes" which is a reasonable indication to the contrary. Objectives: * Make it possible to have multiple surfaces be instantiated, get along nicely, and be embedded inside of iframes if needed. * Make reference content editable within a dialog Approach: * Move what's left of ve.Editor to ve.ui.Surface and essentially obliterate all use of it * Make even more stuff inherit from ve.Element (long live this.$$) * Use the correct document or window anywhere it was being assumed to be the top level one * Resolve stacking order issues by removing the excessive use of z-index and introducing global and local overlay elements for each editor * Add a surface to the reference dialog, load up the reference contents and save them back on apply * Actually destroy what we create in ce and ui surfaces * Add recursive frame offset calculation method to ve.Element * Moved ve.ce.Surface's getSelectionRect method to the prototype Bonus: * Move ve.ce.DocumentNode.css contents to ve.ce.Node.css (not sure why it was separate in the first place, but I'm likely the one to blame) * Fix blatant lies in documentation * Whitespace cleanup here and there * Get rid of ve.ui.Window overlays - not used or needed Change-Id: Iede83e7d24f7cb249b6ba3dc45d770445b862e08
2013-05-20 22:45:50 +00:00
this.$.append( this.toolbar.$, this.surface.$ );
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();
The Great ve.ui.Surface refactor of 2013 Prologue: Farewell ve.Editor my good chap… Oh, hey there HTML frames - I didn't see you there! In a world where iframes are outlaws, and symbols like document and window are global, there were more than a few assumptions about which document or window was being used. But fear not - for this commit (probably) tracks them all down, leaving a trail of iframe-compatible awesomeness in its wake. With the great ve.ui.Surface now able to be used inside of iframes, let the reference editing commence. But there, lurking in the darkness is a DM issue so fierce it may take Roan and/or Ed up to 3 whole hours to sort it out. Note to Roan and/or Ed: Editing references seems to work fine, but when saving the page there are "no changes" which is a reasonable indication to the contrary. Objectives: * Make it possible to have multiple surfaces be instantiated, get along nicely, and be embedded inside of iframes if needed. * Make reference content editable within a dialog Approach: * Move what's left of ve.Editor to ve.ui.Surface and essentially obliterate all use of it * Make even more stuff inherit from ve.Element (long live this.$$) * Use the correct document or window anywhere it was being assumed to be the top level one * Resolve stacking order issues by removing the excessive use of z-index and introducing global and local overlay elements for each editor * Add a surface to the reference dialog, load up the reference contents and save them back on apply * Actually destroy what we create in ce and ui surfaces * Add recursive frame offset calculation method to ve.Element * Moved ve.ce.Surface's getSelectionRect method to the prototype Bonus: * Move ve.ce.DocumentNode.css contents to ve.ce.Node.css (not sure why it was separate in the first place, but I'm likely the one to blame) * Fix blatant lies in documentation * Whitespace cleanup here and there * Get rid of ve.ui.Window overlays - not used or needed Change-Id: Iede83e7d24f7cb249b6ba3dc45d770445b862e08
2013-05-20 22:45:50 +00:00
this.surface.addCommands( this.constructor.static.surfaceCommands );
this.surface.initialize();
};
/* Inheritance */
OO.inheritClass( ve.init.sa.Target, ve.init.Target );