Add opt-out/opt-back link

Change-Id: I998b7ad3ecb0b7e815f9ff0d5f871267b91c109d
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/703
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/704

MultimediaViewer.php

@@ -496,6 +496,7 @@ $wgResourceModules += array(
 			'mmv.ui.reuse.dialog',
 			'mmv.ui.truncatableTextField',
 			'oojs',
+			'jquery.tipsy',
 		),
 
 		'messages' => array(
@@ -524,6 +525,10 @@ $wgResourceModules += array(
 			'multimediaviewer-about-mmv',
 			'multimediaviewer-discuss-mmv',
 			'multimediaviewer-help-mmv',
+			'multimediaviewer-optout-mmv',
+			'multimediaviewer-optin-mmv',
+			'multimediaviewer-optout-help',
+			'multimediaviewer-optin-help',
 
 			// Reuse the preferences message in the top-right menu.
 			'mypreferences',

i18n/en.json

@@ -41,6 +41,10 @@
     "multimediaviewer-about-mmv": "About Media Viewer",
     "multimediaviewer-discuss-mmv": "Discuss this feature",
     "multimediaviewer-help-mmv": "Help",
+	"multimediaviewer-optout-mmv": "Disable Media Viewer",
+	"multimediaviewer-optin-mmv": "Re-enable Media Viewer",
+	"multimediaviewer-optout-help": "Clicking this link will disable Media Viewer for thumbnails; they will take you directly to the file description page instead. You will still be able to reopen Media Viewer using the \"Expand\" button there; and use the same link you just clicked to re-enable it in articles.",
+	"multimediaviewer-optin-help": "Clicking this link will make MediaViewer come up whenever you click on a thumbnail in an article.",
     "multimediaviewer-geoloc-north": "N",
     "multimediaviewer-geoloc-east": "E",
     "multimediaviewer-geoloc-south": "S",

i18n/qqq.json

@@ -47,6 +47,10 @@
 	"multimediaviewer-about-mmv": "Text for a link to a page with more information about Media Viewer software.",
 	"multimediaviewer-discuss-mmv": "Text for a link to a page where the user can discuss the Media Viewer software.\n{{Identical|Leave feedback}}",
 	"multimediaviewer-help-mmv": "Text for a link to a page with help about Media Viewer software.\n{{Identical|Help}}",
+	"multimediaviewer-optout-mmv": "Text for the opt-out link. Clicking on the link will turn off MediaViewer.",
+	"multimediaviewer-optin-mmv": "Text for the opt-back link. Clicking it will undo the opt-out.",
+	"multimediaviewer-optout-help": "Tooltip shown over the disabling link.",
+	"multimediaviewer-optin-help": "Tooltip shown over the enabling link.",
 	"multimediaviewer-geoloc-north": "Symbol for representing \"north\" in geolocation coordinates.\n\nUsed as <code>$4</code> in {{msg-mw|Multimediaviewer-geoloc-coord}}.",
 	"multimediaviewer-geoloc-east": "Symbol for representing \"east\" in geolocation coordinates.\n\nUsed as <code>$4</code> in {{msg-mw|Multimediaviewer-geoloc-coord}}.",
 	"multimediaviewer-geoloc-south": "Symbol for representing \"south\" in geolocation coordinates.\n\nUsed as <code>$4</code> in {{msg-mw|Multimediaviewer-geoloc-coord}}.",

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 = $( '<a>' )
 			.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 = $( '<a>' )
+				.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 = $( '<a>' )
 				.prop( 'href', target )

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(), $( '<div>' ).appendTo( $qf ) );
 
 		assert.strictEqual( $qf.find( '.mw-mmv-about-link' ).length, 1, 'About link is created.' );
 		assert.strictEqual( $qf.find( '.mw-mmv-discuss-link' ).length, 1, 'Discuss link is created.' );
 		assert.strictEqual( $qf.find( '.mw-mmv-help-link' ).length, 1, 'Help link is created.' );
+		assert.strictEqual( $qf.find( '.mw-mmv-optout-link' ).length, 1, 'Opt-out link is created.' );
+		assert.strictEqual( $qf.find( '.mw-mmv-preference-link' ).length, 0, 'Preferences link is not created when not in beta.' );
+
+		mw.config.set( 'wgMediaViewerIsInBeta', true );
+
+		mw.user.isAnon.returns( false );
+		panel = new mw.mmv.ui.MetadataPanel( $qf.empty(), $( '<div>' ).appendTo( $qf ) );
+		assert.strictEqual( $qf.find( '.mw-mmv-optout-link' ).length, 0, 'Opt-out link is not created when in beta.' );
 		assert.strictEqual( $qf.find( '.mw-mmv-preference-link' ).length, 1, 'Preferences link is created for logged-in user.' );
 
 		mw.user.isAnon.returns( true );
 		panel = new mw.mmv.ui.MetadataPanel( $qf.empty(), $( '<div>' ).appendTo( $qf ) );
+		assert.strictEqual( $qf.find( '.mw-mmv-optout-link' ).length, 0, 'Opt-out link is not created when in beta.' );
 		assert.strictEqual( $qf.find( '.mw-mmv-preference-link' ).length, 0, 'Preferences link is not created for anon user.' );
+
+		mw.config.set( 'wgMediaViewerIsInBeta', oldWgMediaViewerIsInBeta );
 	} );
 }( mediaWiki, jQuery ) );