Add viewing options panel

Enable, disable, and get confirmations.

Lots of UI work on this one.

Change-Id: I1f731992bd240e7ea403592872f7c7e270158753
This commit is contained in:
Mark Holmquist 2014-07-23 16:00:37 -07:00 committed by Gilles Dubuc
parent 82831601b8
commit 1853540cd3
22 changed files with 873 additions and 303 deletions

View file

@ -141,6 +141,7 @@ $wgResourceModules += array(
'mmv.ui.download.dialog',
'mmv.ui.metadataPanel',
'mmv.ui.reuse.dialog',
'mmv.ui.viewingOptions',
),
'messages' => array(
@ -748,12 +749,50 @@ $wgResourceModules += array(
'dependencies' => array(
'mmv.ui',
'mmv.ui.viewingOptions',
'oojs',
),
'messages' => array(
'multimediaviewer-download-link',
'multimediaviewer-reuse-link',
'multimediaviewer-options-tooltip',
),
),
'mmv.ui.viewingOptions' => $wgMediaViewerResourceTemplate + array(
'scripts' => array(
'mmv/ui/mmv.ui.viewingOptions.js',
),
'styles' => array(
'mmv/ui/mmv.ui.viewingOptions.less',
),
'dependencies' => array(
'mmv.ui',
'mmv.ui.dialog',
'oojs',
),
'messages' => array(
'multimediaviewer-options-dialog-header',
'multimediaviewer-option-header-viewer',
'multimediaviewer-option-header-filepage',
'multimediaviewer-option-desc-viewer',
'multimediaviewer-option-desc-filepage',
'multimediaviewer-option-submit-button',
'multimediaviewer-option-cancel-button',
'multimediaviewer-options-text-header',
'multimediaviewer-enable-alert',
'multimediaviewer-options-text-body',
'multimediaviewer-disable-confirmation-header',
'multimediaviewer-disable-confirmation-text',
'multimediaviewer-enable-dialog-header',
'multimediaviewer-enable-text-header',
'multimediaviewer-enable-submit-button',
'multimediaviewer-enable-confirmation-header',
'multimediaviewer-enable-confirmation-text',
),
),

View file

@ -1,116 +1,131 @@
{
"@metadata": {
"authors": [
"Mark Holmquist <mtraceur@member.fsf.org>"
]
},
"multimediaviewer-desc": "Expand thumbnails in a larger size in a fullscreen interface.",
"multimediaviewer-desc-nil": "No description available.",
"multimediaviewer-pref": "Media Viewer",
"multimediaviewer-pref-desc": "Improve your multimedia viewing experience with this new tool. It displays images in larger size on pages that have thumbnails. Images are shown in a nicer fullscreen interface overlay, and can also be viewed in full-size.",
"multimediaviewer-optin-pref": "Enable <span class=\"plainlinks\">[https://www.mediawiki.org/wiki/Special:MyLanguage/Multimedia/About_Media_Viewer Media Viewer]</span>",
"multimediaviewer-file-page": "Go to corresponding file page",
"multimediaviewer-repository-local": "More details",
"multimediaviewer-datetime-created": "Created: $1",
"multimediaviewer-datetime-uploaded": "Uploaded: $1",
"multimediaviewer-userpage-link": "{{GENDER:$2|Uploaded}} by $1",
"multimediaviewer-credit": "$1 - $2",
"multimediaviewer-metadata-error": "Error: Could not load image data. $1",
"multimediaviewer-thumbnail-error": "Error: Could not load thumbnail data. $1",
"multimediaviewer-license-cc-by-1.0": "CC BY 1.0",
"multimediaviewer-license-cc-sa-1.0": "CC SA 1.0",
"multimediaviewer-license-cc-by-sa-1.0": "CC BY-SA 1.0",
"multimediaviewer-license-cc-by-2.0": "CC BY 2.0",
"multimediaviewer-license-cc-by-sa-2.0": "CC BY-SA 2.0",
"multimediaviewer-license-cc-by-2.1": "CC BY 2.1",
"multimediaviewer-license-cc-by-sa-2.1": "CC BY-SA 2.1",
"multimediaviewer-license-cc-by-2.5": "CC BY 2.5",
"multimediaviewer-license-cc-by-sa-2.5": "CC BY-SA 2.5",
"multimediaviewer-license-cc-by-3.0": "CC BY 3.0",
"multimediaviewer-license-cc-by-sa-3.0": "CC BY-SA 3.0",
"multimediaviewer-license-cc-by-4.0": "CC BY 4.0",
"multimediaviewer-license-cc-by-sa-4.0": "CC BY-SA 4.0",
"multimediaviewer-license-cc-pd": "Public Domain",
"multimediaviewer-license-cc-zero": "CC 0",
"multimediaviewer-license-pd": "Public Domain",
"multimediaviewer-license-default": "View license",
"multimediaviewer-permission-title": "License details",
"multimediaviewer-permission-link": "view terms",
"multimediaviewer-permission-viewmore": "View more",
"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": "Enable Media Viewer",
"multimediaviewer-optout-pending-mmv": "Disabling Media Viewer",
"multimediaviewer-optin-pending-mmv": "Enabling Media Viewer",
"multimediaviewer-optout-help": "Media Viewer will no longer be used to show images. To use it again, click on the \"{{int:multimediaviewer-view-expanded}}\" button next to any image. Then click on \"{{int:multimediaviewer-optin-mmv}}\".",
"multimediaviewer-optin-help": "Media Viewer will be used to show images.",
"multimediaviewer-geoloc-north": "N",
"multimediaviewer-geoloc-east": "E",
"multimediaviewer-geoloc-south": "S",
"multimediaviewer-geoloc-west": "W",
"multimediaviewer-geoloc-coord": "$1° $2 $3″ $4",
"multimediaviewer-geoloc-coords": "$1, $2",
"multimediaviewer-geolocation": "Location: $1",
"multimediaviewer-reuse-link": "Share or embed this file",
"multimediaviewer-reuse-loading-placeholder": "Loading…",
"multimediaviewer-share-tab": "Share",
"multimediaviewer-embed-tab": "Embed",
"multimediaviewer-download-link": "Download this file",
"multimediaviewer-download-preview-link-title": "View in browser",
"multimediaviewer-download-original-button-name": "Download original file",
"multimediaviewer-download-small-button-name": "Download small size",
"multimediaviewer-download-medium-button-name": "Download medium size",
"multimediaviewer-download-large-button-name": "Download large size",
"multimediaviewer-link-to-page": "Link to file description page",
"multimediaviewer-link-to-file": "Link to original file",
"multimediaviewer-share-explanation": "Copy and freely share the link",
"multimediaviewer-embed-wt": "Wikitext",
"multimediaviewer-embed-html": "HTML",
"multimediaviewer-embed-explanation": "Use this code to embed the file",
"multimediaviewer-text-embed-credit-text-tbls": "\"$1\" by $2. Licensed under $3 via $4",
"multimediaviewer-text-embed-credit-text-tls": "\"$1\". Licensed under $2 via $3",
"multimediaviewer-text-embed-credit-text-tbs": "\"$1\" by $2. Via $3",
"multimediaviewer-text-embed-credit-text-tbl": "\"$1\" by $2. Licensed under $3",
"multimediaviewer-text-embed-credit-text-tb": "\"$1\" by $2",
"multimediaviewer-text-embed-credit-text-ts": "\"$1\". Via $2",
"multimediaviewer-text-embed-credit-text-tl": "\"$1\". Licensed under $2",
"multimediaviewer-text-embed-credit-text-t": "\"$1\"",
"multimediaviewer-html-embed-credit-text-tbls": "\"$1\" by $2. Licensed under $3 via $4.",
"multimediaviewer-html-embed-credit-text-tls": "\"$1\". Licensed under $2 via $3.",
"multimediaviewer-html-embed-credit-text-tbs": "\"$1\" by $2. Via $3.",
"multimediaviewer-html-embed-credit-text-tbl": "\"$1\" by $2. Licensed under $3.",
"multimediaviewer-html-embed-credit-text-tb": "\"$1\" by $2.",
"multimediaviewer-html-embed-credit-text-ts": "\"$1\". Via $2.",
"multimediaviewer-html-embed-credit-text-tl": "\"$1\". Licensed under $2.",
"multimediaviewer-html-embed-credit-text-t": "\"$1\".",
"multimediaviewer-embed-byline": "By $1",
"multimediaviewer-embed-license": "Licensed under $1.",
"multimediaviewer-embed-via": "Via $1.",
"multimediaviewer-default-embed-dimensions": "Default thumbnail size",
"multimediaviewer-original-embed-dimensions": "Original file $1",
"multimediaviewer-large-embed-dimensions": "Large $1",
"multimediaviewer-medium-embed-dimensions": "Medium $1",
"multimediaviewer-small-embed-dimensions": "Small $1",
"multimediaviewer-embed-dimensions": "$1 × $2 px",
"multimediaviewer-embed-dimensions-separated": "- $1",
"multimediaviewer-embed-dimensions-with-file-format": "$1 $2",
"multimediaviewer-description-page-button-text": "More details about this file",
"multimediaviewer-description-page-popup-text": "More details about this file on $1",
"multimediaviewer-commons-subtitle": "The free media repository",
"multimediaviewer-view-expanded": "Open in Media Viewer",
"multimediaviewer-close-popup-text": "Close this tool (Esc)",
"multimediaviewer-fullscreen-popup-text": "Show in full screen",
"multimediaviewer-defullscreen-popup-text": "Exit full screen",
"multimediaviewer-title-popup-text": "File name",
"multimediaviewer-credit-popup-text": "Author and source information",
"multimediaviewer-title-popup-text-more": "Click to show full file name",
"multimediaviewer-credit-popup-text-more": "Click to show full author and source",
"multimediaviewer-panel-open-popup-text": "More details",
"multimediaviewer-panel-close-popup-text": "Fewer details",
"multimediaviewer-download-attribution-cta-header": "You need to attribute the author",
"multimediaviewer-download-attribution-cta": "Show me how",
"multimediaviewer-attr-plain": "Plain",
"multimediaviewer-attr-html": "HTML"
"@metadata": {
"authors": [
"Mark Holmquist <mtraceur@member.fsf.org>"
]
},
"multimediaviewer-desc": "Expand thumbnails in a larger size in a fullscreen interface.",
"multimediaviewer-desc-nil": "No description available.",
"multimediaviewer-pref": "Media Viewer",
"multimediaviewer-pref-desc": "Improve your multimedia viewing experience with this new tool. It displays images in larger size on pages that have thumbnails. Images are shown in a nicer fullscreen interface overlay, and can also be viewed in full-size.",
"multimediaviewer-optin-pref": "Enable <span class=\"plainlinks\">[https://www.mediawiki.org/wiki/Special:MyLanguage/Multimedia/About_Media_Viewer Media Viewer]</span>",
"multimediaviewer-file-page": "Go to corresponding file page",
"multimediaviewer-repository-local": "More details",
"multimediaviewer-datetime-created": "Created: $1",
"multimediaviewer-datetime-uploaded": "Uploaded: $1",
"multimediaviewer-userpage-link": "{{GENDER:$2|Uploaded}} by $1",
"multimediaviewer-credit": "$1 - $2",
"multimediaviewer-metadata-error": "Error: Could not load image data. $1",
"multimediaviewer-thumbnail-error": "Error: Could not load thumbnail data. $1",
"multimediaviewer-license-cc-by-1.0": "CC BY 1.0",
"multimediaviewer-license-cc-sa-1.0": "CC SA 1.0",
"multimediaviewer-license-cc-by-sa-1.0": "CC BY-SA 1.0",
"multimediaviewer-license-cc-by-2.0": "CC BY 2.0",
"multimediaviewer-license-cc-by-sa-2.0": "CC BY-SA 2.0",
"multimediaviewer-license-cc-by-2.1": "CC BY 2.1",
"multimediaviewer-license-cc-by-sa-2.1": "CC BY-SA 2.1",
"multimediaviewer-license-cc-by-2.5": "CC BY 2.5",
"multimediaviewer-license-cc-by-sa-2.5": "CC BY-SA 2.5",
"multimediaviewer-license-cc-by-3.0": "CC BY 3.0",
"multimediaviewer-license-cc-by-sa-3.0": "CC BY-SA 3.0",
"multimediaviewer-license-cc-by-4.0": "CC BY 4.0",
"multimediaviewer-license-cc-by-sa-4.0": "CC BY-SA 4.0",
"multimediaviewer-license-cc-pd": "Public Domain",
"multimediaviewer-license-cc-zero": "CC 0",
"multimediaviewer-license-pd": "Public Domain",
"multimediaviewer-license-default": "View license",
"multimediaviewer-permission-title": "License details",
"multimediaviewer-permission-link": "view terms",
"multimediaviewer-permission-viewmore": "View more",
"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": "Enable Media Viewer",
"multimediaviewer-optout-pending-mmv": "Disabling Media Viewer",
"multimediaviewer-optin-pending-mmv": "Enabling Media Viewer",
"multimediaviewer-optout-help": "Media Viewer will no longer be used to show images. To use it again, click on the \"{{int:multimediaviewer-view-expanded}}\" button next to any image. Then click on \"{{int:multimediaviewer-optin-mmv}}\".",
"multimediaviewer-optin-help": "Media Viewer will be used to show images.",
"multimediaviewer-geoloc-north": "N",
"multimediaviewer-geoloc-east": "E",
"multimediaviewer-geoloc-south": "S",
"multimediaviewer-geoloc-west": "W",
"multimediaviewer-geoloc-coord": "$1° $2 $3″ $4",
"multimediaviewer-geoloc-coords": "$1, $2",
"multimediaviewer-geolocation": "Location: $1",
"multimediaviewer-reuse-link": "Share or embed this file",
"multimediaviewer-reuse-loading-placeholder": "Loading…",
"multimediaviewer-share-tab": "Share",
"multimediaviewer-embed-tab": "Embed",
"multimediaviewer-download-link": "Download this file",
"multimediaviewer-download-preview-link-title": "View in browser",
"multimediaviewer-download-original-button-name": "Download original file",
"multimediaviewer-download-small-button-name": "Download small size",
"multimediaviewer-download-medium-button-name": "Download medium size",
"multimediaviewer-download-large-button-name": "Download large size",
"multimediaviewer-link-to-page": "Link to file description page",
"multimediaviewer-link-to-file": "Link to original file",
"multimediaviewer-share-explanation": "Copy and freely share the link",
"multimediaviewer-embed-wt": "Wikitext",
"multimediaviewer-embed-html": "HTML",
"multimediaviewer-embed-explanation": "Use this code to embed the file",
"multimediaviewer-text-embed-credit-text-tbls": "\"$1\" by $2. Licensed under $3 via $4",
"multimediaviewer-text-embed-credit-text-tls": "\"$1\". Licensed under $2 via $3",
"multimediaviewer-text-embed-credit-text-tbs": "\"$1\" by $2. Via $3",
"multimediaviewer-text-embed-credit-text-tbl": "\"$1\" by $2. Licensed under $3",
"multimediaviewer-text-embed-credit-text-tb": "\"$1\" by $2",
"multimediaviewer-text-embed-credit-text-ts": "\"$1\". Via $2",
"multimediaviewer-text-embed-credit-text-tl": "\"$1\". Licensed under $2",
"multimediaviewer-text-embed-credit-text-t": "\"$1\"",
"multimediaviewer-html-embed-credit-text-tbls": "\"$1\" by $2. Licensed under $3 via $4.",
"multimediaviewer-html-embed-credit-text-tls": "\"$1\". Licensed under $2 via $3.",
"multimediaviewer-html-embed-credit-text-tbs": "\"$1\" by $2. Via $3.",
"multimediaviewer-html-embed-credit-text-tbl": "\"$1\" by $2. Licensed under $3.",
"multimediaviewer-html-embed-credit-text-tb": "\"$1\" by $2.",
"multimediaviewer-html-embed-credit-text-ts": "\"$1\". Via $2.",
"multimediaviewer-html-embed-credit-text-tl": "\"$1\". Licensed under $2.",
"multimediaviewer-html-embed-credit-text-t": "\"$1\".",
"multimediaviewer-embed-byline": "By $1",
"multimediaviewer-embed-license": "Licensed under $1.",
"multimediaviewer-embed-via": "Via $1.",
"multimediaviewer-default-embed-dimensions": "Default thumbnail size",
"multimediaviewer-original-embed-dimensions": "Original file $1",
"multimediaviewer-large-embed-dimensions": "Large $1",
"multimediaviewer-medium-embed-dimensions": "Medium $1",
"multimediaviewer-small-embed-dimensions": "Small $1",
"multimediaviewer-embed-dimensions": "$1 × $2 px",
"multimediaviewer-embed-dimensions-separated": "- $1",
"multimediaviewer-embed-dimensions-with-file-format": "$1 $2",
"multimediaviewer-description-page-button-text": "More details about this file",
"multimediaviewer-description-page-popup-text": "More details about this file on $1",
"multimediaviewer-commons-subtitle": "The free media repository",
"multimediaviewer-view-expanded": "Open in Media Viewer",
"multimediaviewer-close-popup-text": "Close this tool (Esc)",
"multimediaviewer-fullscreen-popup-text": "Show in full screen",
"multimediaviewer-defullscreen-popup-text": "Exit full screen",
"multimediaviewer-title-popup-text": "File name",
"multimediaviewer-credit-popup-text": "Author and source information",
"multimediaviewer-title-popup-text-more": "Click to show full file name",
"multimediaviewer-credit-popup-text-more": "Click to show full author and source",
"multimediaviewer-panel-open-popup-text": "More details",
"multimediaviewer-panel-close-popup-text": "Fewer details",
"multimediaviewer-download-attribution-cta-header": "You need to attribute the author",
"multimediaviewer-download-attribution-cta": "Show me how",
"multimediaviewer-attr-plain": "Plain",
"multimediaviewer-attr-html": "HTML",
"multimediaviewer-options-tooltip": "Settings: Disable or enable previews",
"multimediaviewer-options-dialog-header": "Disable Media Viewer?",
"multimediaviewer-options-text-header": "Skip this viewing feature for all files.",
"multimediaviewer-options-text-body": "You can enable it later through the file details page.",
"multimediaviewer-options-learn-more": "Learn more",
"multimediaviewer-option-submit-button": "Disable Media Viewer",
"multimediaviewer-option-cancel-button": "Cancel",
"multimediaviewer-disable-confirmation-header": "You have disabled Media Viewer",
"multimediaviewer-disable-confirmation-text": "Next time you click on a thumbnail on $1, you will directly view all file details.",
"multimediaviewer-enable-dialog-header": "Enable Media Viewer?",
"multimediaviewer-enable-text-header": "Enable this media viewing feature for all files by default.",
"multimediaviewer-enable-submit-button": "Enable Media Viewer",
"multimediaviewer-enable-confirmation-header": "You have enabled Media Viewer for all files",
"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"
}

View file

@ -118,5 +118,22 @@
"multimediaviewer-download-attribution-cta-header": "Header for telling the user that the author of an image must be attributed, during a download action.",
"multimediaviewer-download-attribution-cta": "Call to action for a user to find out how to attribute the author of an image.",
"multimediaviewer-attr-plain": "Label for a button that lets the user pick plain text as an output format.",
"multimediaviewer-attr-html": "Label for a button that lets the user pick HTML as an output format."
"multimediaviewer-attr-html": "Label for a button that lets the user pick HTML as an output format.",
"multimediaviewer-options-dialog-header": "Header for a dialog that gives the user the option to disable the media viewer.",
"multimediaviewer-option-header-filepage": "Header for the viewing option that gives the user the file page when they click on image thumbnails.",
"multimediaviewer-option-desc-filepage": "Longer form description for the viewing option that gives the user the file page when they click on image thumbnails.",
"multimediaviewer-option-submit-button": "Button for submitting a preference change that modifies the default behaviour for image clicks - disables the viewer.",
"multimediaviewer-option-cancel-button": "Button for canceling an action on a preference change that modifies the default behaviour for image clicks - closes the dialog with no action.",
"multimediaviewer-options-tooltip": "Tooltip for a button that opens a panel for enabling or disabling the media viewer.",
"multimediaviewer-options-text-header": "Text explaining the changes that happen when a user disables media viewer.",
"multimediaviewer-options-text-body": "Text explaining how to re-enable the media viewer after disabling.",
"multimediaviewer-options-learn-more": "Text for a link to more information about the media viewer.",
"multimediaviewer-disable-confirmation-header": "Header on a dialog that informs the user they've successfully disabled the media viewer.",
"multimediaviewer-disable-confirmation-text": "Text informing the user that they've successfully disabled the media viewer. $1 is the wiki's name.",
"multimediaviewer-enable-dialog-header": "Header for a dialog that allows users to re-enable media viewer.",
"multimediaviewer-enable-text-header": "Text for a dialog that allows users to re-enable media viewer.",
"multimediaviewer-enable-submit-button": "Text for a button that re-enables media viewer.",
"multimediaviewer-enable-confirmation-header": "Header for a dialog that confirms that the user successfully re-enabled the media viewer.",
"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."
}

View file

@ -170,7 +170,8 @@
// which in turn will cause the options API to delete the row and revert the pref to default
newPrefValue = enabled ? '1' : undefined;
}
return this.setUserPreference( 'multimediaviewer-enable', newPrefValue ).then( function () {
return this.setUserPreference( 'multimediaviewer-enable', newPrefValue ).done( function () {
config.mwConfig.set( 'wgMediaViewerOnClick', enabled );
} );
}

View file

@ -217,6 +217,7 @@
link = $thumb.closest( 'a' ).prop( 'href' );
$( '<p>' )
.addClass( 'mw-mmv-filepage-menu' )
.append(
$link = $( '<a>' )
// It won't matter because we catch the click event anyway, but

View file

@ -16,3 +16,8 @@
// Arrow size for dialogs
@arrow-size: 20px;
@arrow-border-size: 2px;
// Some button things that get included all over
@navbutton-width: 18px;
@buttons-offset-right: 5px;
@buttons-offset-each-top: 37px;

View file

@ -102,6 +102,7 @@
this.fileReuse = new mw.mmv.ui.reuse.Dialog( this.$innerWrapper, this.buttons.$reuse, this.config );
this.downloadDialog = new mw.mmv.ui.download.Dialog( this.$innerWrapper, this.buttons.$download, this.config );
this.optionsDialog = new mw.mmv.ui.OptionsDialog( this.$innerWrapper, this.buttons.$options, this.config );
};
/**
@ -209,6 +210,7 @@
this.fileReuse.attach();
this.downloadDialog.attach();
this.optionsDialog.attach();
// Reset the cursor fading
this.fadeStopped();
@ -238,6 +240,9 @@
this.downloadDialog.unattach();
this.downloadDialog.closeDialog();
this.optionsDialog.unattach();
this.optionsDialog.closeDialog();
this.clearEvents();
// We trigger this event on the document because unattach() can run

View file

@ -0,0 +1,3 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" xml:space="preserve"><path style="fill:#ffffff;stroke:none" d="M96,56.8V39.2l-10.8-1.8c-0.8-2.9-2-5.7-3.4-8.2l6.3-8.9L75.7,7.8l-8.9,6.3c-2.6-1.4-5.3-2.6-8.2-3.4L56.8,0H39.2l-1.8,10.8c-2.9,0.8-5.7,2-8.2,3.4l-8.9-6.3L7.8,20.3l6.3,8.9c-1.4,2.6-2.6,5.3-3.4,8.3L0,39.2v17.6l10.7,1.8c0.8,2.9,2,5.7,3.4,8.3l-6.3,8.9l12.4,12.4l8.9-6.3c2.6,1.4,5.3,2.6,8.3,3.4L39.2,96h17.6l1.8-10.8c2.9-0.8,5.7-2,8.2-3.4l8.9,6.3l12.4-12.4l-6.3-8.9c1.4-2.6,2.6-5.3,3.4-8.3L96,56.8z M48,66.4c-10.2,0-18.4-8.3-18.4-18.4c0-10.2,8.3-18.4,18.4-18.4S66.4,37.8,66.4,48C66.4,58.2,58.2,66.4,48,66.4z"/></svg>

After

Width:  |  Height:  |  Size: 788 B

View file

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 58.4 52.3" enable-background="new 0 0 58.4 52.3" xml:space="preserve">
<g>
<g>
<path fill="#347BFF" d="M0,0v44.7h58.4V0H0z M51.9,35.4H6l13.7-17.7l2-0.8l12.9,13.7l6.8-4L51.9,35.4L51.9,35.4L51.9,35.4z"/>
<polygon fill="#FFFFFF" points="48,4.2 49.9,6.1 44.8,11.2 43.5,9.9 43.2,15.2 48.4,14.9 47.1,13.6 52.3,8.5 54.1,10.4 54.5,3.8
"/>
</g>
<rect x="0" y="44.7" fill="#E6E6E6" width="58.4" height="7.7"/>
<rect x="1.9" y="46.2" fill="#347BFF" width="13.8" height="1.6"/>
<rect x="1.9" y="49.3" fill="#347BFF" width="54.7" height="1.6"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 949 B

View file

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 58.4 52.3" enable-background="new 0 0 58.4 52.3" xml:space="preserve">
<g>
<rect x="0" y="0" fill="#E6E6E6" width="58.4" height="52.3"/>
<g>
<rect x="14.9" y="28.2" fill="#347BFF" width="13.8" height="1.6"/>
<rect x="14.9" y="31.3" fill="#347BFF" width="38.8" height="1.6"/>
<rect x="14.9" y="34.3" fill="#347BFF" width="38.8" height="1.6"/>
<rect x="14.9" y="39.5" fill="#347BFF" width="13.8" height="1.6"/>
<rect x="14.9" y="42.5" fill="#347BFF" width="38.8" height="1.6"/>
<rect x="14.9" y="45.6" fill="#347BFF" width="38.8" height="1.6"/>
</g>
<path fill="#347BFF" d="M14.4,7.8v17.4h22.7V7.8H14.4z M34.6,21.6H16.7l5.3-6.9l0.8-0.3l5,5.3l2.7-1.6L34.6,21.6L34.6,21.6
L34.6,21.6z"/>
<rect x="0" y="10.8" fill="#CCCCCC" width="9.8" height="41.6"/>
<circle fill="#CCCCCC" cx="5.4" cy="4.8" r="3.7"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View file

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve" inkscape:version="0.48.2 r9819" width="100%" height="100%" sodipodi:docname="x_darkgreen.svg"><metadata id="metadata9"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><defs id="defs7"/><sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="721" inkscape:window-height="480" id="namedview5" showgrid="false" inkscape:zoom="0.2979798" inkscape:cx="306" inkscape:cy="364.11864" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="0" inkscape:current-layer="Layer_1"/>
<polygon fill="#999999" points="612,179.2 522.8,90 306,306.8 89.2,90 0,179.2 216.8,396 0,612.8 89.2,702 306,485.2 522.8,702 612,612.8 395.2,396 " id="polygon3" style="fill:#0a604c;fill-opacity:1"/>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -174,9 +174,15 @@
case 'mmv-reuse-closed':
this.reuseOpen = false;
break;
case 'mmv-options-opened':
this.optionsOpen = true;
break;
case 'mmv-options-closed':
this.optionsOpen = false;
break;
}
this.dialogOpen = this.reuseOpen || this.downloadOpen;
this.dialogOpen = this.reuseOpen || this.downloadOpen || this.optionsOpen;
this.$image.toggleClass( 'mw-mmv-dialog-is-open', this.dialogOpen );
};
@ -190,6 +196,8 @@
this.handleEvent( 'mmv-reuse-closed', $.proxy( this.handleDialogEvent, this ) );
this.handleEvent( 'mmv-download-opened', $.proxy( this.handleDialogEvent, this ) );
this.handleEvent( 'mmv-download-closed', $.proxy( this.handleDialogEvent, this ) );
this.handleEvent( 'mmv-options-opened', $.proxy( this.handleDialogEvent, this ) );
this.handleEvent( 'mmv-options-closed', $.proxy( this.handleDialogEvent, this ) );
this.$image
.on( 'click.mmv-view-original', function () {

View file

@ -47,6 +47,11 @@
gravity: isRtl ? 'sw' : 'se'
} );
this.$options = $( '<div>' )
.text( ' ' )
.prop( 'title', mw.message( 'multimediaviewer-options-tooltip' ) )
.addClass( 'mw-mmv-options-button' );
this.$download = $( '<div>' )
.addClass( 'mw-mmv-download-button' )
.html( '&nbsp;' )
@ -71,6 +76,7 @@
.add( this.$download )
.add( this.$reuse )
.add( this.$fullscreen )
.add( this.$options )
.add( this.$next )
.add( this.$prev );
@ -200,7 +206,7 @@
var buttons = this;
this.$reuse.on( 'click.mmv-canvasButtons', function ( e ) {
$( document ).trigger( 'mmv-reuse-open' );
$( document ).trigger( 'mmv-reuse-open', e );
e.stopPropagation(); // the dialog would take it as an outside click and close
} );
this.handleEvent( 'mmv-reuse-opened', function () {
@ -211,7 +217,7 @@
} );
this.$download.on( 'click.mmv-canvasButtons', function ( e ) {
$( document ).trigger( 'mmv-download-open' );
$( document ).trigger( 'mmv-download-open', e );
e.stopPropagation();
} );
this.handleEvent( 'mmv-download-opened', function () {
@ -220,6 +226,17 @@
this.handleEvent( 'mmv-download-closed', function () {
buttons.$download.removeClass( 'open' );
} );
this.$options.on( 'click.mmv-canvasButtons', function ( e ) {
$( document ).trigger( 'mmv-options-open', e );
e.stopPropagation();
} );
this.handleEvent( 'mmv-options-opened', function () {
buttons.$options.addClass( 'open' );
} );
this.handleEvent( 'mmv-options-closed', function () {
buttons.$options.removeClass( 'open' );
} );
};
/**

View file

@ -1,11 +1,9 @@
@import "../mmv.globals";
@import "../mmv.mixins";
@navbutton-width: 18px;
@buttons-offset: 5px;
.mw-mmv-download-button,
.mw-mmv-reuse-button,
.mw-mmv-options-button,
.mw-mmv-close,
.mw-mmv-fullscreen,
.mw-mmv-next-image,
@ -27,6 +25,7 @@
.mw-mmv-download-button.hidden,
.mw-mmv-reuse-button.hidden,
.mw-mmv-options-button.hidden,
.mw-mmv-close.hidden,
.mw-mmv-fullscreen.hidden,
.mw-mmv-next-image.hidden,
@ -47,9 +46,10 @@
.mw-mmv-download-button,
.mw-mmv-reuse-button,
.mw-mmv-options-button,
.mw-mmv-close,
.mw-mmv-fullscreen {
right: @buttons-offset;
right: @buttons-offset-right;
left: auto;
transition: opacity 0.25s;
background-position: center;
@ -71,7 +71,7 @@
}
.mw-mmv-close {
top: @buttons-offset;
top: @buttons-offset-right;
/* @embed */
background-image: url(img/mw-close.svg);
height: 23px;
@ -79,13 +79,21 @@
}
.mw-mmv-fullscreen {
top: (@buttons-offset + 37px);
top: (@buttons-offset-right + (@buttons-offset-each-top));
/* @embed */
background-image: url(img/mw-fullscreen-ltr.svg);
width: 21px;
height: 22px;
}
.mw-mmv-options-button {
top: (@buttons-offset-right + (2 * @buttons-offset-each-top));
/* @embed */
background-image: url(img/gear.svg);
height: 23px;
width: 23px;
}
.jq-fullscreened {
.mw-mmv-fullscreen {
/* @embed */
@ -116,8 +124,8 @@
}
.mw-mmv-reuse-button {
right: @buttons-offset - 2px;
bottom: @buttons-offset + @metadatabar-above-fold-height + @progress-bar-height;
right: @buttons-offset-right - 2px;
bottom: @buttons-offset-right + @metadatabar-above-fold-height + @progress-bar-height;
/* @embed */
background-image: url(img/use-ltr.svg);
height: 24px;
@ -125,7 +133,7 @@
}
.mw-mmv-download-button {
bottom: @buttons-offset + @metadatabar-above-fold-height + @progress-bar-height + 37px;
bottom: @buttons-offset-right + @metadatabar-above-fold-height + @progress-bar-height + 37px;
/* @embed */
background-image: url(img/mw-download.svg);
height: 24px;

View file

@ -63,13 +63,15 @@
/**
* Handles click on link that opens/closes the dialog.
* @param {Event} openEvent Event object for the mmv-$dialog-open event.
* @param {Event} e Event object for the click event.
*/
DP.handleOpenCloseClick = function () {
DP.handleOpenCloseClick = function ( openEvent, e ) {
var dialog = this;
mw.loader.using( this.loadDependencies, function () {
dialog.dependenciesLoaded = true;
dialog.toggleDialog();
dialog.toggleDialog( e );
}, function (error) {
if ( window.console && window.console.error ) {
window.console.error( 'mw.loader.using error when trying to load dialog dependencies', error );
@ -79,12 +81,14 @@
return false;
};
/**
* Toggles the open state on the dialog.
*/
DP.toggleDialog = function () {
/**
* Toggles the open state on the dialog.
* @param {Event} [e] Event object when the close action is caused by a user
* action, as opposed to closing the window or something.
*/
DP.toggleDialog = function ( e ) {
if ( this.isOpen ) {
this.closeDialog();
this.closeDialog( e );
} else {
this.openDialog();
}

View file

@ -47,6 +47,7 @@
this.handleEvent( 'mmv-download-open', $.proxy( this.handleOpenCloseClick, this ) );
this.handleEvent( 'mmv-reuse-open', $.proxy( this.closeDialog, this ) );
this.handleEvent( 'mmv-options-open', $.proxy( this.closeDialog, this ) );
};
/**

View file

@ -43,7 +43,6 @@
this.initializeHeader( localStorage );
this.initializeImageMetadata();
this.initializeAboutLinks();
this.initializePreferenceLinks();
}
oo.inheritClass( MetadataPanel, mw.mmv.ui.Element );
MPP = MetadataPanel.prototype;
@ -78,11 +77,6 @@
MPP.unattach = function() {
this.$title.tipsy( 'hide' );
// This is created conditionally if MMV is in beta
if ( this.$mmvOptOutLink ) {
this.$mmvOptOutLink.tipsy( 'hide' );
}
this.$authorAndSource.tipsy( 'hide' );
this.scroller.unattach();
@ -367,88 +361,6 @@
.appendTo( this.$imageMetadata );
};
/**
* @private
* Set text and appearance of the optin/optout link.
* This is a helper function for #initializePreferenceLinks().
* @param {jQuery} $link the link that needs to be changed
* @param {boolean} status true if the user is currently opted in
* @param {boolean} pending true if the link has been clicked already (there is a request pending)
*/
MPP.setOptInOutLink = function ( $link, status, pending ) {
var messageKey = ( status ? 'optout' : 'optin' ) + ( pending ? '-pending' : '' );
$link
.toggleClass( 'pending', !!pending )
.text( mw.message( 'multimediaviewer-' + messageKey + '-mmv' ).text() )
.attr( 'title', pending ? '' : mw.message( 'multimediaviewer-' + messageKey + '-help' ).text() )
.attr( 'original-title', pending ? '' : mw.message( 'multimediaviewer-' + messageKey + '-help' ).text() );
};
/**
* Initialize the link for enabling/disabling MediaViewer.
*/
MPP.initializePreferenceLinks = function () {
var target,
panel = this,
separator = ' | ',
optInStatus = this.config.isMediaViewerEnabledOnClick();
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 changePreferencePromise,
newOptInStatus = !panel.config.isMediaViewerEnabledOnClick();
e.preventDefault();
if ( $( this).is( '.pending' ) ) {
return false;
}
changePreferencePromise = panel.config.setMediaViewerEnabledOnClick( newOptInStatus );
if ( changePreferencePromise.state() === 'pending' ) {
// use ! for status param because we want to show text for old state
// (e.g. enabled -> "Disabling...") while pending
panel.setOptInOutLink( panel.$mmvOptOutLink, !newOptInStatus, true );
}
changePreferencePromise.done( function () {
panel.setOptInOutLink( panel.$mmvOptOutLink, newOptInStatus );
panel.$mmvOptOutLink.tipsy( 'hide' );
mw.mmv.actionLogger.log( 'opt' + ( newOptInStatus ? 'in' : 'out' )
+ '-' + ( mw.user.isAnon() ? 'anon' : 'loggedin' ) );
} ).fail( function () {
mw.notify( 'Error while trying to change preference' );
} );
} );
this.setOptInOutLink( this.$mmvOptOutLink, optInStatus );
this.$mmvAboutLinks.append(
separator,
this.$mmvOptOutLink
);
}
if ( !mw.user.isAnon() && mw.config.get( 'wgMediaViewerIsInBeta' ) ) {
target = mw.Title.newFromText( 'Special:Preferences' ).getUrl();
target += '#mw-prefsection-betafeatures';
this.$mmvPreferenceLink = $( '<a>' )
.prop( 'href', target )
.text( mw.message( 'mypreferences' ) )
.addClass( 'mw-mmv-preference-link' );
this.$mmvAboutLinks.append(
separator,
this.$mmvPreferenceLink
);
}
};
// *********************************
// ******** Setting methods ********
// *********************************

View file

@ -144,6 +144,7 @@
this.handleEvent( 'mmv-reuse-open', $.proxy( this.handleOpenCloseClick, this ) );
this.handleEvent( 'mmv-download-open', $.proxy( this.closeDialog, this ) );
this.handleEvent( 'mmv-options-open', $.proxy( this.closeDialog, this ) );
this.attachDependencies();
};

View file

@ -0,0 +1,360 @@
/*
* 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 ( mw, $, oo ) {
// Shortcut for prototype later
var ODP;
/**
* Represents the viewing options dialog and the link to open it.
* @class mw.mmv.ui.OptionsDialog
* @extends mw.mmv.ui.Dialog
* @param {jQuery} $container the element to which the dialog will be appended
* @param {jQuery} $openButton the button which opens the dialog. Only used for positioning.
* @param {mw.mmv.Config} config
*/
function OptionsDialog( $container, $openButton, config ) {
mw.mmv.ui.Dialog.call( this, $container, $openButton, config );
this.$dialog.addClass( 'mw-mmv-options-dialog' );
this.eventPrefix = 'options';
this.initPanel();
}
oo.inheritClass( OptionsDialog, mw.mmv.ui.Dialog );
ODP = OptionsDialog.prototype;
ODP.attach = function () {
this.handleEvent( 'mmv-options-open', $.proxy( this.handleOpenCloseClick, this ) );
this.handleEvent( 'mmv-reuse-open', $.proxy( this.closeDialog, this ) );
this.handleEvent( 'mmv-download-open', $.proxy( this.closeDialog, this ) );
};
/**
* Initialises UI elements.
*/
ODP.initPanel = function () {
this.initEnableConfirmation();
this.initDisableConfirmation();
this.initEnableDiv();
this.initDisableDiv();
};
/**
* Initialises the enable confirmation pane.
*/
ODP.initEnableConfirmation = function () {
this.createConfirmationPane(
'mw-mmv-enable-confirmation',
'$enableConfirmation',
[
mw.message( 'multimediaviewer-enable-confirmation-header' ).text(),
mw.message( 'multimediaviewer-enable-confirmation-text', mw.config.get( 'wgSiteName' ) ).text()
] );
};
/**
* Initialises the disable confirmation pane.
*/
ODP.initDisableConfirmation = function () {
this.createConfirmationPane(
'mw-mmv-disable-confirmation',
'$disableConfirmation',
[
mw.message( 'multimediaviewer-disable-confirmation-header' ).text(),
mw.message( 'multimediaviewer-disable-confirmation-text', mw.config.get( 'wgSiteName' ) ).text()
] );
};
/**
* Initialises the enable action pane.
*/
ODP.initEnableDiv = function () {
this.createActionPane(
'mw-mmv-options-enable',
'$enableDiv',
mw.message( 'multimediaviewer-enable-submit-button' ).text(),
[
mw.message( 'multimediaviewer-enable-dialog-header' ).text(),
mw.message( 'multimediaviewer-enable-text-header' ).text()
], true );
};
/**
* Initialises the disable action pane.
*/
ODP.initDisableDiv = function () {
this.createActionPane(
'mw-mmv-options-disable',
'$disableDiv',
mw.message( 'multimediaviewer-option-submit-button' ).text(),
[
mw.message( 'multimediaviewer-options-dialog-header' ).text(),
mw.message( 'multimediaviewer-options-text-header' ).text(),
mw.message( 'multimediaviewer-options-text-body' ).text()
], false );
};
/**
* Hides all of the divs.
*/
ODP.hideDivs = function () {
this.$dialog.removeClass( 'mw-mmv-disable-confirmation-shown mw-mmv-enable-confirmation-shown mw-mmv-enable-div-shown' );
this.$disableDiv
.add( this.$disableConfirmation )
.add( this.$enableDiv )
.add( this.$enableConfirmation )
.removeClass( 'mw-mmv-shown' );
};
/**
* Shows the confirmation div for the disable action.
*/
ODP.showDisableConfirmation = function () {
this.hideDivs();
this.$disableConfirmation.addClass( 'mw-mmv-shown' );
this.$dialog.addClass( 'mw-mmv-disable-confirmation-shown' );
};
/**
* Shows the confirmation div for the enable action.
*/
ODP.showEnableConfirmation = function () {
this.hideDivs();
this.$enableConfirmation.addClass( 'mw-mmv-shown' );
this.$dialog.addClass( 'mw-mmv-enable-confirmation-shown' );
};
/**
* @event mmv-options-opened
* Fired when the dialog is opened.
*/
/**
* Opens a dialog with information about file reuse.
*/
ODP.openDialog = function () {
if ( this.isEnabled() ) {
this.$disableDiv.addClass( 'mw-mmv-shown' );
} else {
this.$enableDiv.addClass( 'mw-mmv-shown' );
this.$dialog.addClass( 'mw-mmv-enable-div-shown' );
}
mw.mmv.ui.Dialog.prototype.openDialog.call( this );
$( document ).trigger( 'mmv-options-opened' );
};
/**
* @event mmv-options-closed
* Fired when the dialog is closed.
*/
/**
* Closes the options dialog.
* @param {Event} [e] Event object when the close action is caused by a user
* action, as opposed to closing the window or something.
*/
ODP.closeDialog = function ( e ) {
var wasConfirmation = this.$dialog.is( '.mw-mmv-disable-confirmation-shown' ) || this.$dialog.is( '.mw-mmv-enable-confirmation-shown' );
mw.mmv.ui.Dialog.prototype.closeDialog.call( this );
$( document ).trigger( 'mmv-options-closed' );
this.hideDivs();
if ( e && $( e.target ).is( '.mw-mmv-options-button' ) && wasConfirmation ) {
this.openDialog();
}
};
/**
* Creates a confirmation pane.
*/
ODP.createConfirmationPane = function ( divClass, propName, msgs ) {
var dialog = this,
$div = $( '<div>' )
.addClass( divClass )
.appendTo( this.$dialog );
$( '<div>' )
.html( '&nbsp;' )
.addClass( 'mw-mmv-confirmation-close' )
.click( function () {
dialog.closeDialog();
} )
.appendTo( $div );
this.addText( $div, msgs );
this[propName] = $div;
};
/**
* Creates an action pane.
* @param {string} divClass Class applied to main div.
* @param {string} propName Name of the property on this object to which we'll assign the div.
* @param {string} smsg Message for the submit button.
* @param {string} msgs See #addText
* @param {boolean} enabled Whether this dialog is an enable one.
*/
ODP.createActionPane = function ( divClass, propName, smsg, msgs, enabled ) {
var $div = $( '<div>' )
.addClass( divClass )
.appendTo( this.$dialog );
if ( enabled ) {
$( '<div>' )
.addClass( 'mw-mmv-options-enable-alert' )
.text( mw.message( 'multimediaviewer-enable-alert' ).text() )
.appendTo( $div );
}
$( '<div>' )
.html( '&nbsp;' )
.addClass( 'mw-mmv-options-icon' )
.appendTo( $div );
this.addText( $div, msgs );
this.makeButtons( $div, smsg, enabled );
this[propName] = $div;
};
/**
* Creates buttons for the dialog.
* @param {jQuery} $container
* @param {string} smsg Message for the submit button.
* @param {boolean} enabled Whether the viewer is enabled after this dialog is submitted.
*/
ODP.makeButtons = function ( $container, smsg, enabled ) {
var $submitDiv = $( '<div>' )
.addClass( 'mw-mmv-options-submit' )
.appendTo( $container );
this.makeSubmitButton(
$submitDiv,
smsg,
enabled
);
this.makeCancelButton( $submitDiv );
};
/**
* Makes a submit button for one of the panels.
* @param {jQuery} $submitDiv The div for the buttons in the dialog.
* @param {string} msg The string to put in the button.
* @param {boolean} enabled Whether to turn the viewer on or off when this button is pressed.
*/
ODP.makeSubmitButton = function ( $submitDiv, msg, enabled ) {
var dialog = this;
return $( '<button>' )
.addClass( 'mw-mmv-options-submit-button mw-ui-button mw-ui-progressive' )
.text( msg )
.appendTo( $submitDiv )
.click( function () {
var $buttons = $( this ).closest( '.mw-mmv-options-submit' ).find( '.mw-mmv-options-submit-button, .mw-mmv-options-cancel-button' );
$buttons.prop( 'disabled', true );
dialog.config.setMediaViewerEnabledOnClick( enabled ).done( function () {
mw.mmv.actionLogger.log( 'opt' + ( enabled ? 'in' : 'out' ) + '-' + ( mw.user.isAnon() ? 'anon' : 'loggedin' ) );
if ( enabled ) {
dialog.showEnableConfirmation();
} else {
dialog.showDisableConfirmation();
}
} )
.always( function() {
$buttons.prop( 'disabled', false );
} );
return false;
} );
};
/**
* Makes a cancel button for one of the panels.
* @param {jQuery} $submitDiv The div for the buttons in the dialog.
*/
ODP.makeCancelButton = function ( $submitDiv ) {
var dialog = this;
return $( '<button>' )
.addClass( 'mw-mmv-options-cancel-button mw-ui-button mw-ui-quiet' )
.text( mw.message( 'multimediaviewer-option-cancel-button' ).text() )
.appendTo( $submitDiv )
.click( function () {
dialog.closeDialog();
return false;
} );
};
/**
* Adds text to a dialog.
* @param {jQuery} $container
* @param {string[]} msgs The messages to be added.
*/
ODP.addText = function ( $container, msgs ) {
var i, $text,
adders = [
function ( msg ) {
$( '<h3>' )
.text( msg )
.addClass( 'mw-mmv-options-dialog-header' )
.appendTo( $container );
},
function ( msg ) {
$( '<p>' )
.text( msg )
.addClass( 'mw-mmv-options-text-header' )
.appendTo( $text );
},
function ( msg ) {
$( '<p>' )
.text( msg )
.addClass( 'mw-mmv-options-text-body' )
.appendTo( $text );
}
];
$text = $( '<div>' )
.addClass( 'mw-mmv-options-text' )
.appendTo( $container );
for ( i = 0; i < msgs.length && i < adders.length; i++ ) {
adders[i]( msgs[i] );
}
};
/**
* Checks the preference.
*/
ODP.isEnabled = function () {
return this.config.isMediaViewerEnabledOnClick();
};
mw.mmv.ui.OptionsDialog = OptionsDialog;
}( mediaWiki, jQuery, OO ) );

View file

@ -0,0 +1,209 @@
@import "../mmv.globals";
@import "../mmv.mixins";
@shadow-color: #aaaaaa;
@divider-border-height: 1px;
.mw-mmv-options-dialog {
@offset-top: (@buttons-offset-right + (2 * @buttons-offset-each-top) + 6px);
top: @offset-top;
height: auto;
z-index: 1004;
padding: 10px;
&.mw-mmv-enable-confirmation-shown {
background-color: #00AF89;
box-shadow: 0 2px 0 #00634E;
.mw-mmv-dialog-down-arrow {
background-color: #00AF89;
}
}
&.mw-mmv-disable-confirmation-shown {
background-color: #EEE;
.mw-mmv-dialog-down-arrow {
background-color: #eee;
}
}
&.mw-mmv-enable-div-shown {
.mw-mmv-dialog-down-arrow {
background-color: #EEE;
}
}
.mw-mmv-dialog-down-arrow {
@arrow-size: 20px;
top: (@offset-top + (@arrow-size / 2 ));
}
.mw-mmv-options-enable,
.mw-mmv-options-disable {
height: 150px;
}
.mw-mmv-enable-confirmation,
.mw-mmv-disable-confirmation {
height: 100px;
}
.mw-mmv-enable-confirmation,
.mw-mmv-disable-confirmation,
.mw-mmv-options-enable,
.mw-mmv-options-disable {
position: relative;
display: none;
&.mw-mmv-shown {
display: block;
}
}
.mw-mmv-confirmation-close {
display: inline-block;
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 20px;
cursor: pointer;
opacity: 0.75;
/* @embed */
background-image: url(img/x_gray.svg);
&:hover {
opacity: 1;
}
}
.mw-mmv-disable-confirmation {
.mw-mmv-options-dialog-header {
color: #333;
padding: 0;
}
.mw-mmv-options-text-header {
color: #555;
}
}
.mw-mmv-enable-confirmation {
.mw-mmv-options-dialog-header {
color: #FFF;
padding: 0;
}
.mw-mmv-options-text-header {
color: #FFF;
}
.mw-mmv-confirmation-close {
/* @embed */
background-image: url(img/x_darkgreen.svg);
background-size: 20px 20px;
background-repeat: no-repeat;
}
}
.mw-mmv-disable-confirmation,
.mw-mmv-enable-confirmation {
padding: 0;
.mw-mmv-options-text {
left: 0;
}
}
}
.mw-mmv-options-text,
.mw-mmv-options-icon {
position: absolute;
top: 35px;
.mw-mmv-options-enable & {
top: 70px;
}
}
.mw-mmv-options-submit {
position: absolute;
bottom: 0;
right: 0;
}
.mw-mmv-options-text {
left: 68px;
right: 0;
}
.mw-mmv-options-icon {
left: 0;
width: 58px;
height: 52px;
/* @embed */
background-image: url(img/icon_mmv.svg);
}
.mw-mmv-options-cancel-button,
.mw-mmv-options-submit-button {
float: right;
}
.mw-mmv-filepage-menu .mw-mmv-options-button {
display: inline-block;
margin-left: 10px;
width: 23px;
height: 23px;
cursor: pointer;
border: 1px solid #dddddd;
/* @embed */
background-image: url('img/gear.svg');
padding: 5px;
}
.mw-mmv-options-dialog-header {
padding-top: 0;
font-weight: normal;
font-size: 1.25em;
color: #333;
position: absolute;
top: 0;
.mw-mmv-options-enable & {
top: 35px;
}
}
.mw-mmv-options-text-header {
margin: 0;
font-size: 1em;
color: #555;
}
.mw-mmv-options-text-body {
font-size: .75em;
color: #555;
}
.mw-mmv-options-enable-alert {
position: absolute;
left: -10px;
right: -10px;
top: -10px;
padding: 10px;
background-color: #EEE;
color: #555;
font-weight: 500;
}

View file

@ -202,7 +202,7 @@
restoreScrollTo();
} );
QUnit.test( 'isAnyActiveButtonHovered', 30, function ( assert ) {
QUnit.test( 'isAnyActiveButtonHovered', 35, function ( assert ) {
var lightbox = new mw.mmv.LightboxInterface();
stubScrollTo();

View file

@ -188,7 +188,7 @@
} );
} );
QUnit.test( 'About links', 9, function ( assert ) {
QUnit.test( 'About links', 3, function ( assert ) {
var panel,
$qf = $( '#qunit-fixture'),
oldWgMediaViewerIsInBeta = mw.config.get( 'wgMediaViewerIsInBeta' );
@ -200,84 +200,6 @@
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 ), window.localStorage, new mw.mmv.Config( {}, mw.config, mw.user, new mw.Api(), window.localStorage ) );
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 ), window.localStorage, new mw.mmv.Config( {}, mw.config, mw.user, new mw.Api(), window.localStorage ) );
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 );
} );
QUnit.test( 'About links', 12, function ( assert ) {
var panel,
deferred,
$qf = $( '#qunit-fixture' ),
config = {
isMediaViewerEnabledOnClick: this.sandbox.stub(),
setMediaViewerEnabledOnClick: this.sandbox.stub(),
canSetMediaViewerEnabledOnClick: this.sandbox.stub()
},
oldWgMediaViewerIsInBeta = mw.config.get( 'wgMediaViewerIsInBeta' );
this.sandbox.stub( mw.user, 'isAnon' );
this.sandbox.stub( mw.mmv.actionLogger, 'log' );
this.sandbox.stub( $.fn, 'tipsy' ).returnsThis(); // interferes with the fake clock in other tests
mw.config.set( 'wgMediaViewerIsInBeta', false );
panel = new mw.mmv.ui.MetadataPanel( $qf, $( '<div>' ).appendTo( $qf ), window.localStorage, new mw.mmv.Config( {}, mw.config, mw.user, new mw.Api(), window.localStorage ) );
panel.config = config;
// FIXME should not do work in the constructor
panel.$mmvOptOutLink.remove();
panel.$mmvOptOutLink = undefined;
config.canSetMediaViewerEnabledOnClick.returns( false );
panel.initializePreferenceLinks();
assert.strictEqual( $qf.find( '.mw-mmv-optout-link' ).length, 0, 'Optout link is hidden when option cannot be set' );
config.canSetMediaViewerEnabledOnClick.returns( true );
config.isMediaViewerEnabledOnClick.returns( true );
panel.initializePreferenceLinks();
assert.ok( $qf.find( '.mw-mmv-optout-link' ).text().match( /disable/i ), 'Optout link is visible when MediaViewer can be disabled' );
deferred = $.Deferred();
config.setMediaViewerEnabledOnClick.returns( deferred );
mw.user.isAnon.returns( true );
$qf.find( '.mw-mmv-optout-link' ).click();
assert.ok( config.setMediaViewerEnabledOnClick.calledWith( false ), 'When MediaViewer is active, it is disabled on click' );
assert.ok( $qf.find( '.mw-mmv-optout-link' ).is( '.pending' ), 'Pending class is set while disabling in progress' );
config.setMediaViewerEnabledOnClick.reset();
$qf.find( '.mw-mmv-optout-link' ).click();
assert.ok( !config.setMediaViewerEnabledOnClick.called, 'click has no effect when another request is pending' );
deferred.resolve();
assert.ok( !$qf.find( '.mw-mmv-optout-link' ).is( '.pending' ), 'Pending class removed after change has finished' );
assert.ok( mw.mmv.actionLogger.log.called, 'The optout action is logged' );
assert.strictEqual( mw.mmv.actionLogger.log.firstCall.args[0], 'optout-anon' , 'The correct event is logged' );
config.isMediaViewerEnabledOnClick.returns( false );
mw.user.isAnon.returns( false );
panel.initializePreferenceLinks();
assert.ok( $qf.find( '.mw-mmv-optout-link' ).text().match( /enable/i ), 'Optin link is visible when MediaViewer can be enabled' );
mw.mmv.actionLogger.log.reset();
config.setMediaViewerEnabledOnClick.reset();
config.setMediaViewerEnabledOnClick.returns( deferred );
$qf.find( '.mw-mmv-optout-link' ).click();
assert.ok( config.setMediaViewerEnabledOnClick.calledWith( true ), 'When MediaViewer is inactive, it is enabled on click' );
assert.ok( mw.mmv.actionLogger.log.called, 'The optin action is logged' );
assert.ok( mw.mmv.actionLogger.log.firstCall.args[0], 'optin-loggedin', 'The correct event is logged' );
mw.config.set( 'wgMediaViewerIsInBeta', oldWgMediaViewerIsInBeta );
} );
}( mediaWiki, jQuery ) );