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

mw.ViewPageTarget: Grey-out body content as soon as edit is clicked

Browse source 
Set 've-activated' as soon as edit is clicked, with a 've-loading' state.

This necessitates moving the relevant styles to mw.ViewPageTarget.init.css.

Change-Id: Ic9757cdbf63a2f72eda0dd03ff5588d79028ba0e
This commit is contained in:
Ed Sanders 2015-03-16 16:07:14 +00:00 committed by Timo Tijhof
parent c62c5c0df3
commit ba20a26292
4 changed files with 45 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
modules/ve-mw/init/styles/ve.init.mw.ViewPageTarget.css
View file

@ -5,43 +5,6 @@
* @license The MIT License (MIT); see LICENSE.txt
*/
/*!
* State | <html> classes
* Reading | ve-available
* Activate editor | ve-available ve-activated ve-activating
* Active | ve-available ve-activated ve-active
* Deactivate editor | ve-available ve-deactivating
* Deactivated | ve-available
*/
.ve-activated #toc,
.ve-activated #siteNotice,
.ve-activated .mw-indicators,
/* Most of bodyContent can be hidden as VE has an equivalent of most children
in ve-init-target (sibling of #bodyContent). However, we can't hide it
completely as subs should remain visible (for persistence with read mode),
and ve-ui-mwTocWidget is also part of #bodyContent. */
.ve-active #bodyContent > :not(#siteSub):not(#contentSub):not(.ve-ui-mwTocWidget),
.ve-activated #t-print,
.ve-activated #t-permalink,
.ve-activated #p-coll-print_export,
.ve-activated #t-cite,
.ve-activating .ve-ui-surface,
.ve-deactivating .ve-ui-surface {
display: none;
}
.ve-activating #bodyContent,
.ve-activated #firstHeading,
.ve-activated #siteSub,
.ve-activated #contentSub {
opacity: 0.6;
}
.ve-activated #firstHeading {
cursor: default;
}
/* Toolbar */
.ve-activating .ve-init-mw-viewPageTarget-toolbar,

42
modules/ve-mw/init/styles/ve.init.mw.ViewPageTarget.init.css
View file

@ -8,7 +8,47 @@
/*csslint known-properties:false */
/* Bug: https://github.com/stubbornella/csslint/issues/436 */
/* Visual Editor */
/*!
* State | <html> classes
* - mw.ViewPageTarget.init.css is loaded
* Reading | ve-available
* Loading editor | ve-available ve-activated ve-loading
* - mw.ViewPageTarget.css is loaded
* Activate editor | ve-available ve-activated ve-activating
* Active | ve-available ve-activated ve-active
* Deactivate editor | ve-available ve-deactivating
* Deactivated | ve-available
*/
.ve-activated #toc,
.ve-activated #siteNotice,
.ve-activated .mw-indicators,
/* Most of bodyContent can be hidden as VE has an equivalent of most children
in ve-init-target (sibling of #bodyContent). However, we can't hide it
completely as subs should remain visible (for persistence with read mode),
and ve-ui-mwTocWidget is also part of #bodyContent. */
.ve-active #bodyContent > :not(#siteSub):not(#contentSub):not(.ve-ui-mwTocWidget),
.ve-activated #t-print,
.ve-activated #t-permalink,
.ve-activated #p-coll-print_export,
.ve-activated #t-cite,
.ve-activating .ve-ui-surface,
.ve-deactivating .ve-ui-surface {
display: none;
}
.ve-activated #bodyContent,
.ve-activated #firstHeading,
.ve-activated #siteSub,
.ve-activated #contentSub {
opacity: 0.6;
}
.ve-activated #firstHeading {
cursor: default;
}
/* Progress bar */
.mw-viewPageTarget-loading {
width: 128px;

4
modules/ve-mw/init/targets/ve.init.mw.ViewPageTarget.init.js
View file

@ -86,7 +86,6 @@
*
* @private
* @param {jQuery.Promise} [targetPromise] Promise that will be resolved with a ve.init.mw.Target
* @return {jQuery.Promise} Resolved when the target has finished activating
*/
function activateTarget( targetPromise ) {
// The TargetLoader module is loaded in the bottom queue, so it should have been
@ -98,6 +97,9 @@
uri.query.oldid
);
} );
$( 'html' ).addClass( 've-activated ve-loading' );
targetPromise = targetPromise || getTarget();
targetPromise
.then( function ( target ) {

2
modules/ve-mw/init/targets/ve.init.mw.ViewPageTarget.js
View file

@ -281,7 +281,7 @@ ve.init.mw.ViewPageTarget.prototype.activate = function ( dataPromise ) {
this.activatingDeferred = $.Deferred();
this.toolbarSetupDeferred = $.Deferred();
$( 'html' ).addClass( 've-activating ve-activated' );
$( 'html' ).removeClass( 've-loading' ).addClass( 've-activating' );
$.when( this.activatingDeferred, this.toolbarSetupDeferred ).always( function () {
$( 'html' ).removeClass( 've-activating' ).addClass( 've-active' );
// We have to focus the page after hiding the original content, otherwise