wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-11-15 10:35:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Position VE desktop loading bar with position:fixed

Browse source 
This doesn't change the position of the loading bar, but it keeps it
still if any scrolling happens. Previously we expected the user probably
wouldn't scroll while VE is loading, but in subsequent commits we
will trigger automatic scrolling in section editing mode.

Change-Id: I1404ccd77583d808ef79291c6cb4f561e76bd41c
This commit is contained in:
Ed Sanders 2022-01-24 12:47:05 +00:00
parent d1aaf3d451
commit 6f5fe8cdb0
2 changed files with 22 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
modules/ve-mw/preinit/styles/ve.init.mw.DesktopArticleTarget.init.less
View file

@ -95,12 +95,17 @@
/* stylelint-enable selector-max-id */
.ve-init-mw-desktopArticleTarget-loading-overlay {
position: absolute;
/* Center progress bar within toolbar */
top: 0.875em;
left: 0;
right: 0;
z-index: 1;
&-visual {
position: fixed;
}
&-source {
position: absolute;
width: 100%;
top: 0.875em;
}
}
.ve-init-mw-desktopArticleTarget-toolbarPlaceholder {

21
modules/ve-mw/preinit/ve.init.mw.DesktopArticleTarget.init.js
View file

@ -55,17 +55,20 @@
// eslint-disable-next-line no-use-before-define
$( document ).on( 'keydown', onDocumentKeyDown );
init.$loading.toggleClass( 've-init-mw-desktopArticleTarget-loading-overlay-source', mode === 'source' );
init.$loading.toggleClass( 've-init-mw-desktopArticleTarget-loading-overlay-visual', mode === 'visual' );
var $content = $( '#content' );
if ( mode !== 'source' ) {
// Center within visible part of the target
var windowHeight = window.innerHeight;
var clientTop = $content[ 0 ].offsetTop - window.pageYOffset;
var top = Math.max( clientTop, 0 );
var bottom = Math.min( clientTop + $content[ 0 ].offsetHeight, windowHeight );
var middle = ( bottom - top ) / 2;
init.$loading.css( 'top', middle + Math.max( -clientTop, 0 ) );
if ( mode === 'visual' ) {
init.$loading.css( {
top: window.innerHeight / 2,
width: $content.outerWidth()
} );
} else {
init.$loading.css( 'top', '' );
init.$loading.css( {
top: '',
width: ''
} );
}
$content.prepend( init.$loading );