wikimedia/mediawiki-extensions-WikiEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/WikiEditor synced 2024-11-28 02:00:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Realtime Preview: Move loading bar to be a proper element"

Browse source
This commit is contained in:
jenkins-bot 2022-04-13 19:46:59 +00:00 committed by Gerrit Code Review
parent b9e516e646 f5f39d41d4
commit 9b6b58ae43
3 changed files with 42 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
modules/realtimepreview/RealtimePreview.js
View file

@ -19,11 +19,18 @@ function RealtimePreview() {
this.$previewNode = $( '<div>' )
.addClass( 'ext-WikiEditor-realtimepreview-preview' )
.append( $previewContent );
// Loading bar.
this.$loadingBar = $( '<div>' ).addClass( 'ext-WikiEditor-realtimepreview-loadingbar' );
this.$loadingBar.hide();
// Error layout.
this.errorLayout = new ErrorLayout();
this.errorLayout.getReloadButton().connect( this, {
click: this.doRealtimePreview.bind( this )
} );
this.twoPaneLayout.getPane2().append( this.$previewNode, this.errorLayout.$element );
this.twoPaneLayout.getPane2().append( this.$loadingBar, this.$previewNode, this.errorLayout.$element );
this.eventNames = 'change.realtimepreview input.realtimepreview cut.realtimepreview paste.realtimepreview';
// Used to ensure we wait for a response before making new requests.
this.isPreviewing = false;
@ -191,7 +198,7 @@ RealtimePreview.prototype.doRealtimePreview = function () {
}
this.isPreviewing = true;
this.twoPaneLayout.getPane2().addClass( 'ext-WikiEditor-twopanes-loading' );
this.$loadingBar.show();
var loadingSelectors = this.pagePreview.getLoadingSelectors();
loadingSelectors.push( '.ext-WikiEditor-realtimepreview-preview' );
this.errorLayout.toggle( false );
@ -205,7 +212,7 @@ RealtimePreview.prototype.doRealtimePreview = function () {
this.showError( ( new mw.Api() ).getErrorMessage( result ) );
mw.log.error( 'WikiEditor realtime preview error', result );
}.bind( this ) ).always( function () {
this.twoPaneLayout.getPane2().removeClass( 'ext-WikiEditor-twopanes-loading' );
this.$loadingBar.hide();
this.isPreviewing = false;
this.checkResponseTimes( time );

28
modules/realtimepreview/RealtimePreview.less
View file

@ -21,3 +21,31 @@
.ext-WikiEditor-ResizingDragBar-ns {
border-top: 1px solid @colorGray12;
}
@loadingbar-width: 20%;
.ext-WikiEditor-realtimepreview-loadingbar {
position: absolute;
z-index: 5;
display: block;
opacity: 1;
content: ' ';
background-color: @color-primary;
width: @loadingbar-width;
height: 4px;
// Hide the loading bar to start with; it'll be shown if the loading state persists for more than 1s.
visibility: hidden;
animation: loadingbar 1.5s 1s infinite linear alternate;
}
@keyframes loadingbar {
0% {
visibility: visible;
left: 0;
}
100% {
// stylelint-disable-next-line plugin/no-unsupported-browser-features
left: calc( 100% - @loadingbar-width );
}
}

33
modules/realtimepreview/TwoPaneLayout.less
View file

@ -17,37 +17,12 @@
border: 1px solid @colorGray12;
border-width: 0 0 0 1px;
flex: 1 1 0;
overflow: auto;
overflow: hidden;
padding: 0;
}
@loadingbar-width: 20%;
// stylelint-disable-next-line selector-pseudo-element-colon-notation
.ext-WikiEditor-twopanes-pane2.ext-WikiEditor-twopanes-loading::before {
position: absolute;
top: 0;
z-index: 5;
display: block;
opacity: 1;
content: ' ';
background-color: @color-primary;
width: @loadingbar-width;
height: 4px;
// Hide the loading bar to start with; it'll be shown if the loading state persists for more than 1s.
visibility: hidden;
animation: loadingbar 1.5s 1s infinite linear alternate;
}
@keyframes loadingbar {
0% {
visibility: visible;
left: 0;
}
100% {
// stylelint-disable-next-line plugin/no-unsupported-browser-features
left: calc( 100% - @loadingbar-width );
.ext-WikiEditor-realtimepreview-preview {
overflow: auto;
height: 100%;
}
}
}