wikimedia/mediawiki-extensions-WikiEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/WikiEditor synced 2024-09-23 10:26:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Realtime Preview: add hover button for reloading

Browse source 
Add a 'reload' button to the right-side preview pane (that shows
on hover, and stays in the same place when the preview is
scrolled), and also an accesskey to trigger the preview. If the
preview is not open when the accesskey is pressed, it'll be
opened.

Bug: T303532
Change-Id: Ifa77ad7cf6d2ed6a8b955f9a324986d1c6f9a993
This commit is contained in:
Sam Wilson 2022-04-08 11:45:34 +08:00
parent 9b6b58ae43
commit 94d4912103
5 changed files with 39 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
extension.json
View file

@ -321,7 +321,9 @@
"messages": [
"wikieditor-realtimepreview-preview",
"wikieditor-realtimepreview-error",
"wikieditor-realtimepreview-reload"
"wikieditor-realtimepreview-reload",
"wikieditor-realtimepreview-reload-title",
"accesskey-wikieditor-realtimepreview"
],
"packageFiles": [
"realtimepreview/init.js",

4
i18n/en.json
View file

@ -202,5 +202,7 @@
"wikieditor-realtimepreview-error": "Preview not loading",
"wikieditor-realtimepreview-reload": "Reload",
"wikieditor-realtimepreview-beta-label": "Realtime Preview",
"wikieditor-realtimepreview-beta-desc": "See how wikitext changes will appear to readers inside the [[mw:Special:MyLanguage/Extension:WikiEditor|2010 editor]]."
"wikieditor-realtimepreview-beta-desc": "See how wikitext changes will appear to readers inside the [[mw:Special:MyLanguage/Extension:WikiEditor|2010 editor]].",
"wikieditor-realtimepreview-reload-title": "Reload the realtime preview pane",
"accesskey-wikieditor-realtimepreview": ")"
}

4
i18n/qqq.json
View file

@ -233,5 +233,7 @@
"wikieditor-realtimepreview-error": "Header text for realtime preview errors.",
"wikieditor-realtimepreview-reload": "Button text for the 'reload' button on realtime preview errors.",
"wikieditor-realtimepreview-beta-label": "Used in [[Special:Preferences]].\n\nUsed as label for checkbox to enable Realtime Preview as a Beta Feature.\n\nThe description for this checkbox is: {{msg-mw|wikieditor-realtimepreview-beta-desc}}.",
"wikieditor-realtimepreview-beta-desc": "Used in [[Special:Preferences]].\n\nUsed as description for the checkbox to enable Realtime Preview as a Beta Feature.\n\nThe label for this checkbox is {{msg-mw|wikieditor-realtimepreview-beta-label}}."
"wikieditor-realtimepreview-beta-desc": "Used in [[Special:Preferences]].\n\nUsed as description for the checkbox to enable Realtime Preview as a Beta Feature.\n\nThe label for this checkbox is {{msg-mw|wikieditor-realtimepreview-beta-label}}.",
"wikieditor-realtimepreview-reload-title": "Tooltip text for the manual reload button.",
"accesskey-wikieditor-realtimepreview": "{{doc-accesskey}}\nAccesskey for the manual reload button."
}

19
modules/realtimepreview/RealtimePreview.js
View file

@ -30,7 +30,24 @@ function RealtimePreview() {
click: this.doRealtimePreview.bind( this )
} );
this.twoPaneLayout.getPane2().append( this.$loadingBar, this.$previewNode, this.errorLayout.$element );
// Manual reload button (visible on hover).
var reloadButton = new OO.ui.ButtonWidget( {
classes: [ 'ext-WikiEditor-reloadButton' ],
icon: 'reload',
label: mw.msg( 'wikieditor-realtimepreview-reload' ),
accessKey: mw.msg( 'accesskey-wikieditor-realtimepreview' ),
title: mw.msg( 'wikieditor-realtimepreview-reload-title' )
} );
reloadButton.connect( this, {
click: function () {
if ( !this.enabled ) {
this.enable();
}
this.doRealtimePreview();
}.bind( this )
} );
this.twoPaneLayout.getPane2().append( reloadButton.$element, 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;

12
modules/realtimepreview/RealtimePreview.less
View file

@ -49,3 +49,15 @@
left: calc( 100% - @loadingbar-width );
}
}
.ext-WikiEditor-twopanes-pane2 .ext-WikiEditor-reloadButton {
display: none;
position: absolute;
top: 12px;
right: 12px;
z-index: 5;
}
.ext-WikiEditor-twopanes-pane2:hover .ext-WikiEditor-reloadButton {
display: block;
}