$4
in {{msg-mw|Multimediaviewer-geoloc-coord}}.",
"multimediaviewer-geoloc-east": "Symbol for representing \"east\" in geolocation coordinates.\n\nUsed as $4
in {{msg-mw|Multimediaviewer-geoloc-coord}}.",
"multimediaviewer-geoloc-south": "Symbol for representing \"south\" in geolocation coordinates.\n\nUsed as $4
in {{msg-mw|Multimediaviewer-geoloc-coord}}.",
diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.js b/resources/mmv/ui/mmv.ui.metadataPanel.js
index 98c2b7bc4..2763430d3 100644
--- a/resources/mmv/ui/mmv.ui.metadataPanel.js
+++ b/resources/mmv/ui/mmv.ui.metadataPanel.js
@@ -32,12 +32,23 @@
mw.mmv.ui.Element.call( this, $container );
this.$controlBar = $controlBar;
+
+ /** @property {mw.mmv.Config} config - */
+ this.config = new mw.mmv.Config(
+ mw.config.get( 'wgMultimediaViewer', {} ),
+ mw.config,
+ mw.user,
+ new mw.Api(),
+ window.localStorage
+ );
+
/** @property {mw.mmv.HtmlUtils} htmlUtils - */
this.htmlUtils = new mw.mmv.HtmlUtils();
this.initializeHeader( localStorage );
this.initializeImageMetadata();
this.initializeAboutLinks();
+ this.initializePreferenceLinks();
}
oo.inheritClass( MetadataPanel, mw.mmv.ui.Element );
MPP = MetadataPanel.prototype;
@@ -329,8 +340,7 @@
* Initializes two about links at the bottom of the panel.
*/
MPP.initializeAboutLinks = function () {
- var target,
- separator = ' | ';
+ var separator = ' | ';
this.$mmvAboutLink = $( '' )
.prop( 'href', mw.config.get( 'wgMultimediaViewer' ).infoLink )
@@ -357,15 +367,50 @@
this.$mmvHelpLink
)
.appendTo( this.$imageMetadata );
+ };
- if ( !mw.user.isAnon() ) {
+ /**
+ * Initialize the link for enabling/disabling MediaViewer.
+ */
+ MPP.initializePreferenceLinks = function () {
+ var target,
+ panel = this,
+ separator = ' | ',
+ optInStatus = this.config.isMediaViewerEnabledOnClick();
+
+ function setText( $link, status ) {
+ $link
+ .text( mw.message( status ? 'multimediaviewer-optout-mmv' : 'multimediaviewer-optin-mmv' ).text() )
+ .prop( 'title', mw.message( status ? 'multimediaviewer-optout-help' : 'multimediaviewer-optin-help' ).text() );
+ }
+
+ if ( !mw.config.get( 'wgMediaViewerIsInBeta' ) && this.config.canSetMediaViewerEnabledOnClick() ) {
+ this.$mmvOptOutLink = $( '' )
+ .prop( 'href', '#' )
+ .addClass( 'mw-mmv-optout-link' )
+ .tipsy( { gravity: 's' } )
+ .click( function ( e ) {
+ var newOptInStatus = !panel.config.isMediaViewerEnabledOnClick();
+ e.preventDefault();
+ panel.config.setMediaViewerEnabledOnClick( newOptInStatus).done( function () {
+ setText( panel.$mmvOptOutLink, newOptInStatus );
+ panel.$mmvOptOutLink.tipsy( 'hide' );
+ } ).fail( function () {
+ mw.notify( 'Error while trying to change preference' );
+ } );
+ } );
+
+ setText( this.$mmvOptOutLink, optInStatus );
+
+ this.$mmvAboutLinks.append(
+ separator,
+ this.$mmvOptOutLink
+ );
+ }
+
+ if ( !mw.user.isAnon() && mw.config.get( 'wgMediaViewerIsInBeta' ) ) {
target = mw.Title.newFromText( 'Special:Preferences' ).getUrl();
-
- if ( mw.config.get( 'wgMediaViewerIsInBeta' ) ) {
- target += '#mw-prefsection-betafeatures';
- } else {
- target += '#mw-prefsection-rendering';
- }
+ target += '#mw-prefsection-betafeatures';
this.$mmvPreferenceLink = $( '' )
.prop( 'href', target )
diff --git a/tests/qunit/mmv/ui/mmv.ui.metadataPanel.test.js b/tests/qunit/mmv/ui/mmv.ui.metadataPanel.test.js
index 20a24ed8a..1c81c5b72 100644
--- a/tests/qunit/mmv/ui/mmv.ui.metadataPanel.test.js
+++ b/tests/qunit/mmv/ui/mmv.ui.metadataPanel.test.js
@@ -229,21 +229,33 @@
assert.ok( panel.$repoLi.hasClass( 'commons' ), 'Repo has commons class' );
} );
- QUnit.test( 'About links', 5, function ( assert ) {
+ QUnit.test( 'About links', 9, function ( assert ) {
var panel,
- $qf = $( '#qunit-fixture' );
+ $qf = $( '#qunit-fixture'),
+ oldWgMediaViewerIsInBeta = mw.config.get( 'wgMediaViewerIsInBeta' );
this.sandbox.stub( mw.user, 'isAnon' );
- mw.user.isAnon.returns( false );
+ mw.config.set( 'wgMediaViewerIsInBeta', false );
panel = new mw.mmv.ui.MetadataPanel( $qf.empty(), $( '