Unicodesnowman has uploaded a new change for review.
https://gerrit.wikimedia.org/r/185670
Change subject: Add interactive tour of Media Viewer
......................................................................
Add interactive tour of Media Viewer
This patch adds a new interactive tour of Media Viewer, powered by
Extension:GuidedTour. If the wiki has the extension installed, a new
'Interactive tour' link will appear next to the about / discuss / help
links.
Bug: T77726
Change-Id: I7f66cce4fc3730b55e7e44f9d9120c8351eeb429
---
M MultimediaViewer.php
M i18n/en.json
M i18n/qqq.json
A resources/mmv/mmv.interactivetour.js
M resources/mmv/ui/mmv.ui.metadataPanel.js
5 files changed, 171 insertions(+), 2 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MultimediaViewer
refs/changes/70/185670/1
diff --git a/MultimediaViewer.php b/MultimediaViewer.php
index d2eb903..6edd0d1 100644
--- a/MultimediaViewer.php
+++ b/MultimediaViewer.php
@@ -612,6 +612,7 @@
'multimediaviewer-about-mmv',
'multimediaviewer-discuss-mmv',
'multimediaviewer-help-mmv',
+ 'multimediaviewer-interactivetour-mmv',
'multimediaviewer-optout-mmv',
'multimediaviewer-optin-mmv',
'multimediaviewer-optout-pending-mmv',
@@ -1054,6 +1055,32 @@
'position' => 'top',
),
+ 'ext.guidedTour.tour.multimediaviewerintro' =>
$wgMediaViewerResourceTemplate + array(
+ 'scripts' => array(
+ 'mmv/mmv.interactivetour.js',
+ ),
+
+ 'dependencies' => array(
+ 'ext.guidedTour',
+ 'ext.guidedTour.lib',
+ ),
+
+ 'messages' => array(
+ 'multimediaviewer-tour-intro-title',
+ 'multimediaviewer-tour-intro-description',
+ 'multimediaviewer-tour-metadatapanel-title',
+ 'multimediaviewer-tour-metadatapanel-description',
+ 'multimediaviewer-tour-moredetails-title',
+ 'multimediaviewer-tour-moredetails-description',
+ 'multimediaviewer-tour-download-title',
+ 'multimediaviewer-tour-download-description',
+ 'multimediaviewer-tour-settings-title',
+ 'multimediaviewer-tour-settings-description',
+ 'multimediaviewer-tour-close-title',
+ 'multimediaviewer-tour-close-description',
+ ),
+ ),
+
'jquery.scrollTo' => $wgMediaViewerResourceTemplate + array(
'scripts' => array(
'jquery.scrollTo/jquery.scrollTo.js',
@@ -1089,6 +1116,10 @@
$wgResourceModules['mmv.logging.DimensionLogger']['dependencies'][] =
'ext.eventLogging';
}
+ if ( isset( $wgResourceModules['ext.guidedTour'] ) ) {
+ $wgResourceModules['mmv.ui.metadataPanel']['dependencies'][] =
'ext.guidedTour.launcher';
+ }
+
if ( $wgMediaViewerEnableByDefault ) {
$wgDefaultUserOptions['multimediaviewer-enable'] = true;
}
diff --git a/i18n/en.json b/i18n/en.json
index e105b2a..89acd85 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -47,6 +47,7 @@
"multimediaviewer-about-mmv": "About Media Viewer",
"multimediaviewer-discuss-mmv": "Discuss this feature",
"multimediaviewer-help-mmv": "Help",
+ "multimediaviewer-interactivetour-mmv": "Interactive tour",
"multimediaviewer-optout-mmv": "Disable Media Viewer",
"multimediaviewer-optin-mmv": "Enable Media Viewer",
"multimediaviewer-optout-pending-mmv": "Disabling Media Viewer",
@@ -145,5 +146,17 @@
"multimediaviewer-enable-confirmation-text": "Next time you click on a
thumbnail on $1, Media Viewer will be used.",
"multimediaviewer-enable-alert": "Media Viewer is now disabled",
"multimediaviewer-disable-info-title": "You have disabled Media Viewer",
- "multimediaviewer-disable-info": "You can still view individual files
with Media Viewer."
+ "multimediaviewer-disable-info": "You can still view individual files
with Media Viewer.",
+ "multimediaviewer-tour-intro-title": "Welcome",
+ "multimediaviewer-tour-intro-description": "Media Viewer is a new and
more immersive way of of viewing images. This interactive tour will show you
some of the features of Media Viewer.",
+ "multimediaviewer-tour-metadatapanel-title": "Metadata panel",
+ "multimediaviewer-tour-metadatapanel-description": "You can view the
author, description, licensing information, and more here. You can expand the
panel by scrolling down, or by presing the Down key.",
+ "multimediaviewer-tour-moredetails-title": "More details",
+ "multimediaviewer-tour-moredetails-description": "This button will take
you to the image's File page. You can view additional information, edit it, or
upload a new version of the image there.",
+ "multimediaviewer-tour-download-title": "Download images",
+ "multimediaviewer-tour-download-description": "This panel allows you to
download the original file. The image that is displayed in the lightbox is
resized to fit your screen, and should not be downloaded.",
+ "multimediaviewer-tour-settings-title": "Settings panel",
+ "multimediaviewer-tour-settings-description": "You can enable or
disable Media Viewer in this panel.",
+ "multimediaviewer-tour-close-title": "Close Media Viewer",
+ "multimediaviewer-tour-close-description": "Finally, you can close
Media Viewer by pressing this button, or by pressing the Esc key on your
keyboard. This concludes the tour."
}
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 8ebf712..c8803a4 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -54,6 +54,7 @@
"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.",
"multimediaviewer-help-mmv": "Text for a link to a page with help about
Media Viewer software.\n{{Identical|Help}}",
+ "multimediaviewer-interactivetour-mmv": "Text for a link which starts
an interactive tour of Media Viewer.",
"multimediaviewer-optout-mmv": "Text for the opt-out link. Clicking on
the link will turn off MediaViewer.\n\nSee also:\n*
{{msg-mw|Multimediaviewer-optout-pending-mmv}}\n*
{{msg-mw|Multimediaviewer-optin-mmv}}",
"multimediaviewer-optin-mmv": "Text for the opt-back link. Clicking it
will undo the opt-out.\n\nSee also:\n*
{{msg-mw|Multimediaviewer-optin-pending-mmv}}\n*
{{msg-mw|Multimediaviewer-optout-mmv}}",
"multimediaviewer-optout-pending-mmv": "Text shown for the opt-out link
while the optout request is being processed.\n\nSee also:\n*
{{msg-mw|Multimediaviewer-optout-mmv}}\n*
{{msg-mw|Multimediaviewer-optin-pending-mmv}}",
@@ -152,5 +153,17 @@
"multimediaviewer-enable-confirmation-text": "Text confirming that the
user successfully re-enabled the media viewer. $1 is the wiki's name.",
"multimediaviewer-enable-alert": "Text shown in the enable panel to
alert the user that the media viewer is currently disabled.",
"multimediaviewer-disable-info-title": "Used as title for
{{msg-mw|Multimediaviewer-disable-info}}.",
- "multimediaviewer-disable-info": "The title for this message is
{{msg-mw|Multimediaviewer-disable-info-title}}."
+ "multimediaviewer-disable-info": "The title for this message is
{{msg-mw|Multimediaviewer-disable-info-title}}.",
+ "multimediaviewer-tour-intro-title": "Title for the introduction guider
in the interactive tour..",
+ "multimediaviewer-tour-intro-description": "Description for the
introduction guider in the interactive tour.",
+ "multimediaviewer-tour-metadatapanel-title": "Title for the metadata
panel guider in the interactive tour.",
+ "multimediaviewer-tour-metadatapanel-description": "Description for the
metadata panel guider in the interactive tour.",
+ "multimediaviewer-tour-moredetails-title": "Title for the more details
button guider in the interactive tour.",
+ "multimediaviewer-tour-moredetails-description": "Description for the
more details button guider in the interactive tour.",
+ "multimediaviewer-tour-download-title": "Title for the download images
panel guider in the interactive tour.",
+ "multimediaviewer-tour-download-description": "Description for the
download images panel guider in the interactive tour.",
+ "multimediaviewer-tour-settings-title": "Title for the settings guider
in the interactive tour.",
+ "multimediaviewer-tour-settings-description": "Description for the
settings guider in the interactive tour.",
+ "multimediaviewer-tour-close-title": "Title for the close button guider
in the interactive tour.",
+ "multimediaviewer-tour-close-description": "Description for the close
button guider in the interactive tour."
}
diff --git a/resources/mmv/mmv.interactivetour.js
b/resources/mmv/mmv.interactivetour.js
new file mode 100644
index 0000000..30d2a5e
--- /dev/null
+++ b/resources/mmv/mmv.interactivetour.js
@@ -0,0 +1,95 @@
+/*
+ * This file is part of the MediaWiki extension MultimediaViewer.
+ *
+ * MultimediaViewer is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * MultimediaViewer is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+( function ( window, document, $, mw, gt ) {
+
+ var tour;
+
+ tour = new gt.TourBuilder( {
+ name: 'multimediaviewerintro'
+ } );
+
+ tour.firstStep( {
+ name: 'intro',
+ titlemsg: 'multimediaviewer-tour-intro-title',
+ descriptionmsg: 'multimediaviewer-tour-intro-description',
+ overlay: true
+ } )
+ .next( 'metadatapanel' );
+
+ tour.step( {
+ name: 'metadatapanel',
+ titlemsg: 'multimediaviewer-tour-metadatapanel-title',
+ descriptionmsg:
'multimediaviewer-tour-metadatapanel-description',
+ attachTo: '.mw-mmv-post-image',
+ position: 'topLeft'
+ } )
+ .next( 'moredetails' );
+
+ tour.step( {
+ name: 'moredetails',
+ titlemsg: 'multimediaviewer-tour-moredetails-title',
+ descriptionmsg: 'multimediaviewer-tour-moredetails-description',
+ attachTo: '.mw-mmv-description-page-button',
+ position: 'topRight',
+ onShow: function() {
+ mw.mmv.viewer.ui.panel.scroller.toggle( 'down' );
+ }
+ } )
+ .next( 'download' );
+
+ tour.step( {
+ name: 'download',
+ titlemsg: 'multimediaviewer-tour-download-title',
+ descriptionmsg: 'multimediaviewer-tour-download-description',
+ // The download panel popping up is async, it's not very easy
to attach.
+ onShow: function() {
+ // Prevent the next button click from interfering
+ setTimeout( function () {
+ $( '.mw-mmv-download-button' ).click();
+ }, 0 );
+ }
+ } )
+ .next( 'settings' );
+
+ tour.step( {
+ name: 'settings',
+ titlemsg: 'multimediaviewer-tour-settings-title',
+ descriptionmsg: 'multimediaviewer-tour-settings-description',
+ attachTo: '.mw-mmv-options-dialog',
+ position: 'right',
+ onShow: function () {
+ setTimeout( function () {
+ $( '.mw-mmv-options-button' ).click();
+ mw.libs.guiders.reposition();
+ }, 0 );
+ }
+ } )
+ .next( 'close' );
+
+ tour.step( {
+ name: 'close',
+ titlemsg: 'multimediaviewer-tour-close-title',
+ descriptionmsg: 'multimediaviewer-tour-close-description',
+ attachTo: '.mw-mmv-close',
+ position: 'right',
+ buttons: [ {
+ action: 'end'
+ } ]
+ } );
+
+} ( window, document, jQuery, mediaWiki, mediaWiki.guidedTour ) );
diff --git a/resources/mmv/ui/mmv.ui.metadataPanel.js
b/resources/mmv/ui/mmv.ui.metadataPanel.js
index cb18a43..2cad6d7 100644
--- a/resources/mmv/ui/mmv.ui.metadataPanel.js
+++ b/resources/mmv/ui/mmv.ui.metadataPanel.js
@@ -424,6 +424,7 @@
* Initializes two about links at the bottom of the panel.
*/
MPP.initializeAboutLinks = function () {
+ /* jshint scripturl:true */
var separator = ' | ',
self = this;
@@ -445,6 +446,17 @@
.addClass( 'mw-mmv-help-link' )
.click( function( e ) { self.trackLinkClick.call( this,
'help-page', e ); } );
+ this.$mmvInteractiveTourLink = $( '<a>' )
+ // Doesn't seem to be another way to do this, other
than javascript:; as # breaks
+ // Media Viewer for obvious reasons (even with
e.preventDefault)
+ .prop( 'href', 'javascript:;' )
+ .text( mw.message(
'multimediaviewer-interactivetour-mmv' ).text() )
+ .addClass( 'mw-mmv-interactivetour-link' )
+ .click( function( e ) {
+ mw.guidedTour.launcher.launchTour(
'multimediaviewerintro' );
+ self.trackLinkClick.call( this,
'interactivetour', e );
+ } );
+
this.$mmvAboutLinks = $( '<div>' )
.addClass( 'mw-mmv-about-links' )
.append(
@@ -455,6 +467,11 @@
this.$mmvHelpLink
)
.appendTo( this.$imageMetadata );
+
+ // Only show link if GuidedTour is available
+ if ( mw.guidedTour ) {
+ this.$mmvAboutLinks.append( separator,
this.$mmvInteractiveTourLink );
+ }
};
// *********************************
--
To view, visit https://gerrit.wikimedia.org/r/185670
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I7f66cce4fc3730b55e7e44f9d9120c8351eeb429
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MultimediaViewer
Gerrit-Branch: master
Gerrit-Owner: Unicodesnowman <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
