jenkins-bot has submitted this change and it was merged.
Change subject: Move toolbar scroll hack to surface
......................................................................
Move toolbar scroll hack to surface
Instead of having the toolbar scroll the surface, just tell the surface
the toolbar's height and let it scroll itself into view. Knowing the
toolbar's height will be useful for other interfaces that need to know
if something is in view.
Change-Id: I854951de6aa6c9053013b9e35417508ed6a9451f
---
M src/ce/ve.ce.Surface.js
M src/ui/ve.ui.Surface.js
M src/ui/ve.ui.Toolbar.js
3 files changed, 35 insertions(+), 48 deletions(-)
Approvals:
Catrope: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/ce/ve.ce.Surface.js b/src/ce/ve.ce.Surface.js
index 7e4be8f..b39730c 100644
--- a/src/ce/ve.ce.Surface.js
+++ b/src/ce/ve.ce.Surface.js
@@ -1239,6 +1239,24 @@
this.selecting = false;
this.emit( 'selectionEnd' );
}
+
+ var nativeRange, clientRect, scrollTo;
+
+ if ( !this.surface.toolbarHeight ) {
+ return;
+ }
+
+ nativeRange = this.getNativeRange();
+ if ( !nativeRange ) {
+ return null;
+ }
+
+ clientRect = RangeFix.getBoundingClientRect( nativeRange );
+
+ if ( clientRect && clientRect.top < this.surface.toolbarHeight ) {
+ scrollTo = this.$window.scrollTop() + clientRect.top -
this.surface.toolbarHeight;
+ this.$window.scrollTop( scrollTo );
+ }
};
/**
diff --git a/src/ui/ve.ui.Surface.js b/src/ui/ve.ui.Surface.js
index 7bbf2ec..d648ffd 100644
--- a/src/ui/ve.ui.Surface.js
+++ b/src/ui/ve.ui.Surface.js
@@ -56,6 +56,8 @@
this.showProgressDebounced = ve.debounce( this.showProgress.bind( this
) );
this.filibuster = null;
+ this.toolbarHeight = 0;
+
// Initialization
this.setupCommands( config.excludeCommands );
this.$menus.append( this.context.$element );
@@ -350,6 +352,17 @@
};
/**
+ * Set the current height of the toolbar.
+ *
+ * Used for scroll-into-view calculations.
+ *
+ * @param {number} toolbarHeight Toolbar height
+ */
+ve.ui.Surface.prototype.setToolbarHeight = function ( toolbarHeight ) {
+ this.toolbarHeight = toolbarHeight;
+};
+
+/**
* Create a progress bar in the progress dialog
*
* @param {jQuery.Promise} progressCompletePromise Promise which resolves when
the progress action is complete
diff --git a/src/ui/ve.ui.Toolbar.js b/src/ui/ve.ui.Toolbar.js
index b807877..4be9240 100644
--- a/src/ui/ve.ui.Toolbar.js
+++ b/src/ui/ve.ui.Toolbar.js
@@ -28,7 +28,6 @@
this.floating = false;
this.floatable = false;
this.$window = null;
- this.$surfaceView = null;
this.elementOffset = null;
this.windowEvents = {
// Must use Function#bind (or a closure) instead of direct
reference
@@ -36,9 +35,6 @@
// to avoid $window.off() from unbinding other toolbars' event
handlers.
resize: toolbar.onWindowResize.bind( toolbar ),
scroll: toolbar.onWindowScroll.bind( toolbar )
- };
- this.surfaceViewEvents = {
- keyup: toolbar.onSurfaceViewKeyUp.bind( toolbar )
};
// Default directions
this.contextDirection = { inline: 'ltr', block: 'ltr' };
@@ -113,42 +109,6 @@
left: this.elementOffset.left,
right: this.elementOffset.right
} );
- }
-};
-
-/**
- * Method to scroll the content editable surface to the cursor position.
- *
- * This is for when the cursor is obscured by a floating toolbar.
- *
- * FIXME: this code should be in a target class or something
- */
-ve.ui.Toolbar.prototype.onSurfaceViewKeyUp = function () {
- var surfaceView, nativeRange, clientRect, barHeight, scrollTo, obscured;
-
- if ( !this.floating ) {
- return;
- }
-
- surfaceView = this.getSurface().getView();
-
- nativeRange = surfaceView.getNativeRange();
- if ( !nativeRange ) {
- return null;
- }
-
- clientRect = RangeFix.getBoundingClientRect( nativeRange );
- if ( !clientRect ) {
- return;
- }
-
- barHeight = this.$bar.height();
- obscured = clientRect.top < barHeight;
-
- // If toolbar is floating and cursor is obscured, scroll cursor into
view
- if ( obscured ) {
- scrollTo = this.$window.scrollTop() + clientRect.top -
barHeight;
- this.$window.scrollTop( scrollTo );
}
};
@@ -235,7 +195,6 @@
// Properties
this.$window = this.$( this.getElementWindow() );
- this.$surfaceView = this.surface.getView().$element;
this.calculateOffset();
// Initial state
@@ -243,7 +202,6 @@
if ( this.floatable ) {
this.$window.on( this.windowEvents );
- this.$surfaceView.on( this.surfaceViewEvents );
// The page may start with a non-zero scroll position
this.onWindowScroll();
}
@@ -275,16 +233,18 @@
*/
ve.ui.Toolbar.prototype.float = function () {
if ( !this.floating ) {
+ var height = this.$element.height();
// When switching into floating mode, set the height of the
wrapper and
// move the bar to the same offset as the in-flow element
this.$element
- .css( 'height', this.$element.height() )
+ .css( 'height', height )
.addClass( 've-ui-toolbar-floating' );
this.$bar.css( {
left: this.elementOffset.left,
right: this.elementOffset.right
} );
this.floating = true;
+ this.surface.setToolbarHeight( height );
}
};
@@ -298,6 +258,7 @@
.removeClass( 've-ui-toolbar-floating' );
this.$bar.css( { left: '', right: '' } );
this.floating = false;
+ this.surface.setToolbarHeight( 0 );
}
};
@@ -313,7 +274,6 @@
if ( this.initialized ) {
this.$window.on( this.windowEvents );
- this.$surfaceView.on( this.surfaceViewEvents );
}
};
@@ -323,10 +283,6 @@
ve.ui.Toolbar.prototype.disableFloatable = function () {
if ( this.$window ) {
this.$window.off( this.windowEvents );
- }
-
- if ( this.$surfaceView ) {
- this.$surfaceView.off( this.surfaceViewEvents );
}
if ( this.floating ) {
--
To view, visit https://gerrit.wikimedia.org/r/175305
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I854951de6aa6c9053013b9e35417508ed6a9451f
Gerrit-PatchSet: 5
Gerrit-Project: VisualEditor/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Esanders <[email protected]>
Gerrit-Reviewer: Catrope <[email protected]>
Gerrit-Reviewer: Esanders <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
