diff --git a/MultimediaViewer.php b/MultimediaViewer.php index 5634206bd..06fe90ea8 100644 --- a/MultimediaViewer.php +++ b/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', diff --git a/i18n/en.json b/i18n/en.json index f7090beeb..914b88a5d 100644 --- a/i18n/en.json +++ b/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", diff --git a/i18n/qqq.json b/i18n/qqq.json index e210079f1..c7f958ad4 100644 --- a/i18n/qqq.json +++ b/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 $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(), $( '
' ).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(), $( '
' ).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(), $( '
' ).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 ) );