mw.ViewPageTarget: Move save dialog out of toolbar tree

Bug: 49275
Bug: 49361
Change-Id: I2fbc4c8af943f1b096b8912191924961405d5c47

modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget.css

@@ -106,6 +106,14 @@
 
 /* Save dialog styles */
 
+.ve-init-mw-viewPageTarget-toolbarTracker {
+	position: absolute;
+	top: 0;
+	right: 0;
+	height: 0;
+	overflow: visible;
+}
+
 .ve-init-mw-viewPageTarget-saveDialog .ve-ui-buttonWidget {
 	float: right;
 	margin-left: 0.5em;

modules/ve/init/mw/targets/ve.init.mw.ViewPageTarget.js

@@ -48,6 +48,7 @@ ve.init.mw.ViewPageTarget = function VeInitMwViewPageTarget() {
 	// Properties
 	this.$document = null;
 	this.$spinner = $( '<div class="ve-init-mw-viewPageTarget-loading"></div>' );
+	this.$toolbarTracker = $( '<div class="ve-init-mw-viewPageTarget-toolbarTracker"></div>' );
 	this.toolbarCancelButton = null;
 	this.toolbarSaveButton = null;
 	this.saveDialogSlideHistory = [];
@@ -830,6 +831,7 @@ ve.init.mw.ViewPageTarget.prototype.setupToolbarBetaNotice = function () {
 ve.init.mw.ViewPageTarget.prototype.setUpSurface = function ( doc ) {
 	// Initialize surface
 	this.surface = new ve.ui.Surface( doc, this.surfaceOptions );
+	this.surface.connect( this, { 'toolbarPosition': 'onSurfaceToolbarPosition' } );
 	this.surface.getContext().hide();
 	this.$document = this.surface.$.find( '.ve-ce-documentNode' );
 	this.surface.getModel().connect( this, { 'transact': 'onSurfaceModelTransact' } );
@@ -839,6 +841,7 @@ ve.init.mw.ViewPageTarget.prototype.setUpSurface = function ( doc ) {
 	this.setUpToolbar();
 	this.transformPageTitle();
 	this.changeDocumentTitle();
+
 	// Update UI
 	this.hidePageContent();
 	this.hideSpinner();
@@ -847,10 +850,57 @@ ve.init.mw.ViewPageTarget.prototype.setUpSurface = function ( doc ) {
 		'lang': mw.config.get( 'wgVisualEditor' ).pageLanguageCode,
 		'dir': mw.config.get( 'wgVisualEditor' ).pageLanguageDir
 	} );
+
 	// Add appropriately mw-content-ltr or mw-content-rtl class
 	this.surface.$.addClass( 'mw-content-' + mw.config.get( 'wgVisualEditor' ).pageLanguageDir );
 };
 
+/**
+ * The toolbar has updated its position.
+ * @param {jQuery} $bar
+ */
+ve.init.mw.ViewPageTarget.prototype.onSurfaceToolbarPosition = function ( $bar ) {
+	var css, offset, startProp, startOffset,
+		dir = mw.config.get( 'wgVisualEditor' ).pageLanguageDir,
+		type = $bar.css( 'position' );
+
+	// It's important that the toolbar tracker has 0 height. Else it will block events on the
+	// toolbar (e.g. clicking "Save page") as it would overlap that space. The save dialog
+	// will remain visible for the same reason elsewhere: As long as we don't have overflow:hidden,
+	// the save dialog will stick out of the tracker in the right place without the tracker itself
+	// blocking the toolbar.
+
+	if ( type === 'relative' ) {
+		offset = $bar.offset();
+
+		css = {
+			'position': 'absolute',
+			'top': offset.top
+		};
+
+		if ( dir === 'ltr' ) {
+			startProp = 'left';
+			startOffset = offset.left;
+		} else {
+			startProp = 'right';
+			startOffset = $( window ).width() - ( offset.left + $bar.outerWidth() );
+
+		}
+
+		css[ startProp ] = startOffset;
+
+	} else if ( type === 'absolute' || type === 'fixed' ) {
+		css = {
+			'position': type,
+			'top': $bar.css( 'top' ),
+			'left': $bar.css( 'left' )
+		};
+	} else {
+		return;
+	}
+	this.$toolbarTracker.css( css );
+};
+
 /**
  * Set up the logging of analytic edit events using EventLogging.
  *
@@ -1485,7 +1535,11 @@ ve.init.mw.ViewPageTarget.prototype.swapSaveDialog = function ( slide, options )
  * @method
  */
 ve.init.mw.ViewPageTarget.prototype.attachSaveDialog = function () {
-	this.toolbar.$bar.append( this.$saveDialog );
+	this.surface.$globalOverlay.append(
+		this.$toolbarTracker.append(
+			this.$saveDialog
+		)
+	);
 };
 
 /**
@@ -1619,6 +1673,11 @@ ve.init.mw.ViewPageTarget.prototype.setUpToolbar = function () {
 		// Check the surface wasn't torn down while the toolbar was animating
 		if ( this.surface ) {
 			this.surface.getContext().update();
+
+			// Emit event for initial position. Must be done here after the
+			// slide down instead of in ve.ui.Toolbar#constructor because
+			// back there it'll still be out of view.
+			this.surface.emit( 'toolbarPosition', this.toolbar.$bar );
 		}
 	}, this ) );
 };

modules/ve/ui/styles/ve.ui.Surface.css

@@ -20,6 +20,7 @@
 	font-size: 1em;
 	position: absolute;
 	top: 0;
+	right: 0;
 	left: 0;
 	z-index: 1000;
 }

modules/ve/ui/ve.ui.Surface.js

@@ -19,6 +19,9 @@ ve.ui.Surface = function VeUiSurface( data, config ) {
 	// Parent constructor
 	ve.Element.call( this, config );
 
+	// Mixin constructor
+	ve.EventEmitter.call( this, config );
+
 	// Properties
 	this.$globalOverlay = $( '<div>' );
 	this.$localOverlay = this.$$( '<div>' );
@@ -48,6 +51,15 @@ ve.ui.Surface = function VeUiSurface( data, config ) {
 
 ve.inheritClass( ve.ui.Surface, ve.Element );
 
+ve.mixinClass( ve.ui.Surface, ve.EventEmitter );
+
+/* Events */
+
+/**
+ * @event toolbarPosition
+ * @param {jQuery} $bar Toolbar bar
+ */
+
 /* Methods */
 
 ve.ui.Surface.prototype.initialize = function () {

modules/ve/ui/ve.ui.Toolbar.js

@@ -106,6 +106,7 @@ ve.ui.Toolbar.prototype.onWindowScroll = function () {
  * Toolbar will stick to the top of the screen unless it would be over or under the last visible
  * branch node in the root of the document being edited, at which point it will stop just above it.
  *
+ * @see ve.ui.Surface#event-toolbarPosition
  * @returns {jQuery.Event} e Window scroll event
  */
 ve.ui.Toolbar.prototype.onWindowResize = function () {
@@ -116,6 +117,7 @@ ve.ui.Toolbar.prototype.onWindowResize = function () {
 			'left': offset.left,
 			'right': this.$window.width() - this.$.outerWidth() - offset.left
 		} );
+		this.surface.emit( 'toolbarPosition', this.$bar );
 	}
 };
 
@@ -198,7 +200,7 @@ ve.ui.Toolbar.prototype.destroy = function () {
 /**
  * Float the toolbar.
  *
- * @method
+ * @see ve.ui.Surface#event-toolbarPosition
  * @param {number} top Top position, in pixels
  * @param {number} left Left position, in pixels
  * @param {number} right Right position, in pixels
@@ -217,12 +219,13 @@ ve.ui.Toolbar.prototype.setPosition = function ( top, left, right ) {
 	} else {
 		this.$.removeClass( 've-ui-toolbar-bottom' );
 	}
+	this.surface.emit( 'toolbarPosition', this.$bar );
 };
 
 /**
  * Reset the toolbar to it's default position.
  *
- * @method
+ * @see ve.ui.Surface#event-toolbarPosition
  */
 ve.ui.Toolbar.prototype.resetPosition = function () {
 	this.$
@@ -230,6 +233,7 @@ ve.ui.Toolbar.prototype.resetPosition = function () {
 		.removeClass( 've-ui-toolbar-floating ve-ui-toolbar-bottom' );
 	this.$bar.css( { 'top': 0, 'left': 0, 'right': 0 } );
 	this.floating = false;
+	this.surface.emit( 'toolbarPosition', this.$bar  );
 };
 
 /**
@@ -240,8 +244,7 @@ ve.ui.Toolbar.prototype.resetPosition = function () {
  * @method
  */
 ve.ui.Toolbar.prototype.enableFloating = function () {
-	this.$window = $( this.getElementWindow() );
-	this.$window.on( this.windowEvents );
+	this.$window = $( this.getElementWindow() ).on( this.windowEvents );
 };
 
 /**