MarkTraceur has uploaded a new change for review. https://gerrit.wikimedia.org/r/160814
Change subject: WIP make the download pane into its own dialog ...................................................................... WIP make the download pane into its own dialog Change-Id: Ia92545ed1ef7f2e4ba7934c682eef684a22ca17f Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/841 --- M MultimediaViewer.php M resources/mmv/mmv.globals.less M resources/mmv/mmv.lightboxinterface.js A resources/mmv/ui/img/mw-download.svg M resources/mmv/ui/mmv.ui.canvasButtons.js M resources/mmv/ui/mmv.ui.canvasButtons.less A resources/mmv/ui/mmv.ui.dialog.js A resources/mmv/ui/mmv.ui.dialog.less A resources/mmv/ui/mmv.ui.download.dialog.js A resources/mmv/ui/mmv.ui.download.dialog.less A resources/mmv/ui/mmv.ui.download.js R resources/mmv/ui/mmv.ui.download.pane.js R resources/mmv/ui/mmv.ui.download.pane.less M resources/mmv/ui/mmv.ui.reuse.dialog.js M resources/mmv/ui/mmv.ui.reuse.dialog.less M resources/mmv/ui/mmv.ui.reuse.embed.js R resources/mmv/ui/mmv.ui.utils.js 17 files changed, 578 insertions(+), 227 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MultimediaViewer refs/changes/14/160814/1 diff --git a/MultimediaViewer.php b/MultimediaViewer.php index 8538f0a..dc240a4 100644 --- a/MultimediaViewer.php +++ b/MultimediaViewer.php @@ -128,6 +128,7 @@ 'mmv.ui.canvas', 'mmv.ui.canvasButtons', 'mmv.ui.description', + 'mmv.ui.download.dialog', 'mmv.ui.metadataPanel', 'mmv.ui.reuse.dialog', ), @@ -341,6 +342,82 @@ ), ), + 'mmv.ui.dialog' => $wgMediaViewerResourceTemplate + array( + 'scripts' => array( + 'mmv/ui/mmv.ui.dialog.js', + ), + + 'styles' => array( + 'mmv/ui/mmv.ui.dialog.less', + ), + + 'dependencies' => array( + 'mmv.ui', + 'oojs', + ), + ), + + 'mmv.ui.download' => $wgMediaViewerResourceTemplate + array( + 'scripts' => array( + 'mmv/ui/mmv.ui.download.js', + ), + + 'dependencies' => array( + 'mmv.ui', + ), + ), + + 'mmv.ui.download.dialog' => $wgMediaViewerResourceTemplate + array( + 'scripts' => array( + 'mmv/ui/mmv.ui.download.dialog.js', + ), + + 'styles' => array( + 'mmv/ui/mmv.ui.download.dialog.less', + ), + + 'dependencies' => array( + 'mmv.ui.dialog', + 'mmv.ui.download', + 'oojs', + ), + ), + + 'mmv.ui.download.pane' => $wgMediaViewerResourceTemplate + array( + 'scripts' => array( + 'mmv/ui/mmv.ui.download.pane.js', + ), + + 'styles' => array( + 'mmv/ui/mmv.ui.download.pane.less', + ), + + 'dependencies' => array( + 'mediawiki.ui', + 'mediawiki.ui.button', + 'mmv.ui', + 'mmv.ui.download', + 'mmv.ui.utils', + 'mmv.embedFileFormatter', + 'mmv.logging.ActionLogger', + 'oojs', + ), + + 'messages' => array( + 'multimediaviewer-download-preview-link-title', + 'multimediaviewer-download-original-button-name', + 'multimediaviewer-download-small-button-name', + 'multimediaviewer-download-medium-button-name', + 'multimediaviewer-download-large-button-name', + 'multimediaviewer-embed-dimensions', + 'multimediaviewer-embed-dimensions-with-file-format', + 'multimediaviewer-download-attribution-cta-header', + 'multimediaviewer-download-attribution-cta', + 'multimediaviewer-attr-plain', + 'multimediaviewer-attr-html', + ), + ), + 'mmv.ui.stripeButtons' => $wgMediaViewerResourceTemplate + array( 'scripts' => array( 'mmv/ui/mmv.ui.stripeButtons.js', @@ -548,21 +625,8 @@ ), 'dependencies' => array( - 'mmv.ui', + 'mmv.ui.dialog', 'oojs', - ), - ), - - 'mmv.ui.reuse.utils' => $wgMediaViewerResourceTemplate + array( - 'scripts' => array( - 'mmv/ui/mmv.ui.reuse.utils.js', - ), - - 'dependencies' => array( - 'mmv.HtmlUtils', - 'mmv.ui', - 'oojs', - 'oojs-ui', ), ), @@ -589,7 +653,6 @@ 'dependencies' => array( 'mmv.ui.reuse.tab', - 'mmv.ui.reuse.utils', 'mmv.routing', 'oojs', 'oojs-ui', @@ -619,7 +682,7 @@ 'dependencies' => array( 'mediawiki.user', 'mmv.ui.reuse.tab', - 'mmv.ui.reuse.utils', + 'mmv.ui.utils', 'oojs', 'oojs-ui', 'mmv.model.EmbedFileInfo', @@ -658,27 +721,22 @@ ), 'dependencies' => array( - 'mediawiki.ui', - 'mediawiki.ui.button', - 'mmv.ui.reuse.tab', - 'mmv.ui.reuse.utils', - 'mmv.embedFileFormatter', - 'mmv.logging.ActionLogger', ), 'messages' => array( - 'multimediaviewer-download-tab', - 'multimediaviewer-download-preview-link-title', - 'multimediaviewer-download-original-button-name', - 'multimediaviewer-download-small-button-name', - 'multimediaviewer-download-medium-button-name', - 'multimediaviewer-download-large-button-name', - 'multimediaviewer-embed-dimensions', - 'multimediaviewer-embed-dimensions-with-file-format', - 'multimediaviewer-download-attribution-cta-header', - 'multimediaviewer-download-attribution-cta', - 'multimediaviewer-attr-plain', - 'multimediaviewer-attr-html', + ), + ), + + 'mmv.ui.utils' => $wgMediaViewerResourceTemplate + array( + 'scripts' => array( + 'mmv/ui/mmv.ui.utils.js', + ), + + 'dependencies' => array( + 'mmv.HtmlUtils', + 'mmv.ui', + 'oojs', + 'oojs-ui', ), ), diff --git a/resources/mmv/mmv.globals.less b/resources/mmv/mmv.globals.less index 5a03e44..5ce0e49 100644 --- a/resources/mmv/mmv.globals.less +++ b/resources/mmv/mmv.globals.less @@ -6,3 +6,9 @@ // Height of the progress bar @progress-bar-height: 14px; + +// Height of dialogs +@dialog-height: 350px; + +// Border radius for dialogs +@border-radius: 3px; diff --git a/resources/mmv/mmv.lightboxinterface.js b/resources/mmv/mmv.lightboxinterface.js index 65f00d9..655e91c 100644 --- a/resources/mmv/mmv.lightboxinterface.js +++ b/resources/mmv/mmv.lightboxinterface.js @@ -101,6 +101,7 @@ this.canvas = new mw.mmv.ui.Canvas( this.$innerWrapper, this.$imageWrapper, this.$wrapper ); this.fileReuse = new mw.mmv.ui.reuse.Dialog( this.$postDiv, this.buttons.$reuse, this.config ); + this.downloadDialog = new mw.mmv.ui.download.Dialog( this.$postDiv, this.buttons.$download, this.config ); }; /** @@ -111,6 +112,7 @@ */ LIP.setFileReuseData = function ( image, repo, caption ) { this.fileReuse.set( image, repo, caption ); + this.downloadDialog.set( image, repo ); }; /** @@ -208,6 +210,7 @@ this.buttons.attach(); this.fileReuse.attach(); + this.downloadDialog.attach(); // Reset the cursor fading this.fadeStopped(); diff --git a/resources/mmv/ui/img/mw-download.svg b/resources/mmv/ui/img/mw-download.svg new file mode 100644 index 0000000..1d56fd8 --- /dev/null +++ b/resources/mmv/ui/img/mw-download.svg @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> +<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"; version="1.1" width="22.86124" height="22.83745" id="svg2"> + <defs id="defs4"/> + <metadata id="metadata7"> + <rdf:RDF> + <cc:Work rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/> + <dc:title/> + </cc:Work> + </rdf:RDF> + </metadata> + <g transform="matrix(1.0348268,0,0,1.0348268,-0.39874977,-0.39825602)" id="g3864"> + <path d="M 10.34375,0.40625 C 9.8999226,0.40625 9.4893223,0.57317775 9.1875,0.875 8.8856777,1.1768223 8.71875,1.5874226 8.71875,2.03125 l 0,7.875 -3.78125,0 c -0.012819,-1.548e-4 -0.024452,-4.07e-5 -0.03125,0 -0.00735,-3.53e-5 -0.030234,-7.95e-5 -0.03125,0 -0.00367,-3.15e-5 -0.027864,6.5e-6 -0.03125,0 -0.00122,5.33e-5 -0.031376,2.13e-5 -0.03125,0 -0.00199,9.97e-5 -0.031125,-2.36e-5 -0.03125,0 -1.095e-4,1.34e-5 -0.031188,-1.63e-5 -0.03125,0 0,0 -0.03125,0 -0.03125,0 -1.4e-5,1.12e-5 0.00617,0.025114 0,0.03125 -0.00617,0.00614 -0.031237,-1.81e-5 -0.03125,0 -2.91e-5,1.3e-5 0.00471,0.028469 0,0.03125 -0.00471,0.00278 -0.031197,-4.02e-5 -0.03125,0 -0.00356,0.00359 -0.027566,-0.00381 -0.03125,0 -1.045e-4,2.56e-5 -0.031194,-3.12e-5 -0.03125,0 -5.44e-5,3.31e-5 1.037e-4,0.031164 0,0.03125 -0.00333,0.0034 -0.027551,-0.00378 -0.03125,0 -5.05e-5,1.6e-5 0.00732,0.02755 0,0.03125 -0.00732,0.0037 -0.031224,-1.9e-5 -0.03125,0 0,0 -0.00452,0.02474 0,0.03125 -0.011104,-0.005 -0.031244,-1.4e-5 -0.03125,0 -4.77e-5,1.9e-5 -0.031215,-2.1e-5 -0.03125,0 0,0 -0.00402,0.02442 0,0.03125 -4.59e-5,2e-5 -0.031217,-2.2e-5 -0.03125,0 0,0 -0.00444,0.02468 0,0.03125 -2.2e-5,1.1e-5 0.00413,0.02868 0,0.03125 0,0 -0.03125,0.03125 -0.03125,0.03125 -2.08e-5,1.2e-5 -0.026773,-0.0032 -0.03125,0 -2.91e-5,1.02e-4 2.31e-5,0.0311 0,0.03125 1.42e-5,-1.3e-5 0.026773,0.0032 0.03125,0 0,0 -0.03125,0.03125 -0.03125,0.03125 -0.0058,-0.004 0.00435,-0.02825 0,-0.03125 -0.00653,-0.0045 -0.03125,0 -0.03125,0 a 0.09677853,0.09677853 0 0 0 0,0.03125 c -2.34e-5,1.06e-4 1.86e-5,0.0311 0,0.03125 -0.00383,0.0037 0.00378,0.02752 0,0.03125 0.0046,0.0026 -0.00613,0.02777 0,0.03125 -0.01124,-0.0047 -0.03125,0 -0.03125,0 -1.67e-5,6.1e-5 1.37e-5,0.03114 0,0.03125 -2.67e-5,1.25e-4 1.258e-4,0.02904 0,0.03125 1.36e-5,0.0037 -5.15e-5,0.02757 0,0.03125 8.7e-6,0.0035 -3.79e-5,0.02758 0,0.03125 -8.67e-5,0.001 -3.9e-5,0.0239 0,0.03125 -6.34e-5,0.002 -1.573e-4,0.0433 0,0.03125 4.69e-5,0.002 -8.37e-5,0.02921 0,0.03125 -4.41e-5,0.0073 -9.69e-5,0.03024 0,0.03125 -4.04e-5,0.0037 9.5e-6,0.02773 0,0.03125 -5.4e-5,0.0037 1.45e-5,0.02752 0,0.03125 -1.32e-5,-1.1e-4 1.62e-5,0.03131 0,0.03125 1.42e-5,1.09e-4 -1.73e-5,0.03119 0,0.03125 0,0 0.020047,0.0048 0.03125,0 -0.00577,0.004 0.00432,0.02821 0,0.03125 1.63e-5,1.52e-4 -2.04e-5,0.03114 0,0.03125 1.9e-5,1.51e-4 -2.38e-5,0.03115 0,0.03125 0,0 0,0.03125 0,0.03125 0,0 0.024685,0.0044 0.03125,0 0.00438,-0.003 -0.00584,-0.0273 0,-0.03125 0.00875,-0.0059 0.022497,0.0059 0.03125,0 -0.00576,0.0041 0.00432,0.02821 0,0.03125 -0.00648,0.0046 -0.03125,0 -0.03125,0 2.63e-5,1.04e-4 -3.21e-5,0.0312 0,0.03125 7e-5,1.06e-4 0.029947,-0.0014 0.03125,0 0.00328,0.0033 -0.00377,0.02755 0,0.03125 0.00387,0.0074 0.031269,2.5e-5 0.03125,0 0.012729,-0.01293 0.018521,-0.01832 0.03125,-0.03125 0.00636,-0.0065 0.03125,0 0.03125,0 2e-5,1.3e-5 0.011106,0.03694 0,0.0625 -0.00185,0.0043 -0.029631,-0.0037 -0.03125,0 -0.00432,0.0067 0,0.03125 0,0.03125 l 0.03125,0 6.03125,7.4375 -6.90625,0 c -0.00152,-1.23e-4 -0.024103,-5.2e-5 -0.03125,0 -0.00957,-2.58e-4 -0.024105,-10e-6 -0.03125,0 -0.00715,-5.2e-5 -0.029733,-1.23e-4 -0.03125,0 -0.00928,-1.65e-4 -0.023904,-5e-6 -0.03125,0 -10e-8,0 -0.03125,0 -0.03125,0 a 0.09677853,0.09677853 0 0 0 -0.03125,0 c -3.189e-4,3.1e-5 -0.031111,-4.7e-5 -0.03125,0 -6.84e-5,2.6e-5 -0.031135,-8.1e-5 -0.03125,0 -1.152e-4,8.1e-5 0.00147,0.03004 0,0.03125 -0.00376,0.0038 -0.027604,-0.0038 -0.03125,0 -1.62e-5,9e-6 0.00607,0.02662 0,0.03125 -0.00607,0.0046 -0.031235,-1.5e-5 -0.03125,0 1.095e-4,-3.3e-5 -0.031312,4e-5 -0.03125,0 -1.087e-4,3.4e-5 -0.031189,-4.1e-5 -0.03125,0 -2.99e-5,2.1e-5 2.72e-5,0.03122 0,0.03125 -1.36e-5,1.7e-5 0.00249,0.02741 0,0.03125 -0.00249,0.0038 -0.031238,-2.3e-5 -0.03125,0 -2.8e-5,2.4e-5 -0.031224,-3.6e-5 -0.03125,0 -2.55e-5,3.6e-5 2.3e-5,0.0312 0,0.03125 -2.6e-5,2.6e-5 0.00525,0.02344 0,0.03125 -0.00525,0.0078 -0.031229,-5.1e-5 -0.03125,0 -2.4e-5,1.2e-5 0.00371,0.02899 0,0.03125 -0.00371,0.0023 -0.031232,-1.3e-5 -0.03125,0 -1.395e-4,4e-5 -0.031159,-5.1e-5 -0.03125,0 -4.54e-5,2.5e-5 3.26e-5,0.03122 0,0.03125 -3.26e-5,2.8e-5 -0.031231,-3.1e-5 -0.03125,0 -3.88e-5,6.2e-5 3.19e-5,0.03114 0,0.03125 3.75e-5,-6.3e-5 -3.06e-5,0.03136 0,0.03125 -1.45e-5,1.5e-5 0.0045,0.02465 0,0.03125 -0.0045,0.0066 -0.031242,-1.7e-5 -0.03125,0 -2.53e-5,1.14e-4 2.01e-5,0.03109 0,0.03125 4.54e-5,0.0048 -1.212e-4,0.02759 0,0.03125 -1.19e-5,1.6e-5 0.0039,0.02322 0,0.03125 -0.0039,0.008 -0.031245,-1.8e-5 -0.03125,0 -3.57e-5,1.42e-4 1.96e-4,0.02857 0,0.03125 1.97e-5,0.004 -6.9e-5,0.0276 0,0.03125 4.76e-5,-2.9e-4 4.6e-6,0.03096 0,0.03125 6.1e-6,0.0034 -3.27e-5,0.02761 0,0.03125 -6.91e-5,0.0012 -2.87e-5,0.02397 0,0.03125 -8.2e-6,0.0073 -2.644e-4,0.02034 0,0.03125 l 0,2.78125 c -2.679e-4,-0.01333 -1.248e-4,0.02847 0,0.03125 -5.76e-5,0.0072 -1.31e-4,0.02986 0,0.03125 -4.61e-5,0.0036 9.1e-6,0.02762 0,0.03125 -7.18e-5,0.0036 1.92e-5,0.02723 0,0.03125 1.873e-4,0.0026 -3.76e-5,0.03108 0,0.03125 2.09e-5,8.5e-5 -7.61e-5,0.03112 0,0.03125 7.61e-5,1.28e-4 0.031122,-1.69e-4 0.03125,0 -1.299e-4,0.0036 4.86e-5,0.02634 0,0.03125 4.34e-5,3.33e-4 -6.63e-5,0.03109 0,0.03125 1.76e-5,4e-5 0.023522,-0.0097 0.03125,0 0.00773,0.0097 -4.39e-5,0.03122 0,0.03125 1.819e-4,0.0028 -5.84e-5,0.03092 0,0.03125 3.67e-5,1.2e-4 -4.47e-5,0.03118 0,0.03125 2.23e-5,3.7e-5 0.023502,-0.008 0.03125,0 0.00775,0.008 -4.78e-5,0.03122 0,0.03125 9.56e-5,6.1e-5 0.031107,-4.9e-5 0.03125,0 0.00327,0.0033 -0.00371,0.0276 0,0.03125 0.00371,0.0036 0.028695,-0.0025 0.03125,0 9.357e-4,0.001 -0.00738,0.02391 0,0.03125 0.00738,0.0073 0.039533,0.0087 0.03125,0 -0.00869,-0.0083 -0.00734,0.02387 0,0.03125 0.00734,0.0074 0.030217,-9.35e-4 0.03125,0 0.00253,0.0026 -0.00365,0.02754 0,0.03125 0.00365,0.0037 0.02799,-0.0033 0.03125,0 a 0.09677853,0.09677853 0 0 0 0,0.03125 c 0.00762,0.0077 0.031287,2.3e-5 0.03125,0 0.00799,0.0077 -3.74e-5,0.03123 0,0.03125 7.48e-5,4.5e-5 0.03113,-3.7e-5 0.03125,0 0.00325,0.0059 0.031217,-4.4e-5 0.03125,0 1.228e-4,3.2e-5 0.031085,-2.6e-5 0.03125,0 0.00969,0.0077 -3.99e-5,0.03123 0,0.03125 1.611e-4,6.6e-5 0.030917,-4.3e-5 0.03125,0 0.00491,-4.9e-5 0.027632,1.3e-4 0.03125,0 1.693e-4,1.28e-4 -1.284e-4,0.03117 0,0.03125 1.284e-4,7.6e-5 0.031165,-2.1e-5 0.03125,0 1.701e-4,3.8e-5 0.028695,-1.87e-4 0.03125,0 0.00402,-1.9e-5 0.027647,7.2e-5 0.03125,0 0.00363,-9e-6 0.02765,4.6e-5 0.03125,0 0.00139,1.31e-4 0.024054,5.7e-5 0.03125,0 0.00278,1.25e-4 0.044587,2.68e-4 0.03125,0 l 15.59375,0 c -0.01334,2.68e-4 0.02847,1.25e-4 0.03125,0 0.0072,5.7e-5 0.02986,1.31e-4 0.03125,0 0.0036,4.6e-5 0.02762,-9e-6 0.03125,0 a 0.09677853,0.09677853 0 0 0 0.03125,0 c 0.0026,-1.87e-4 0.03108,3.8e-5 0.03125,0 8.5e-5,-2.1e-5 0.03112,7.6e-5 0.03125,0 1.28e-4,-7.6e-5 -1.69e-4,-0.03112 0,-0.03125 0.0036,1.3e-4 0.02634,-4.9e-5 0.03125,0 3.33e-4,-4.3e-5 0.03109,6.6e-5 0.03125,0 4e-5,-1.8e-5 -0.0097,-0.02352 0,-0.03125 -3.2e-5,1.5e-5 0.02411,0.0059 0.03125,0 3.3e-5,-4.4e-5 0.028,0.0059 0.03125,0 1.2e-4,-3.7e-5 0.03118,4.5e-5 0.03125,0 3.7e-5,-2.2e-5 -0.008,-0.0235 0,-0.03125 0.008,-0.0077 0.03122,4.8e-5 0.03125,0 0.0076,-0.0077 3e-5,-0.0313 0,-0.03125 0.0033,-0.0033 0.0276,0.0037 0.03125,0 0.0036,-0.0037 -0.0025,-0.02869 0,-0.03125 0.001,-9.36e-4 0.02391,0.0074 0.03125,0 0.0073,-0.0074 0.0087,-0.03952 0,-0.03125 -0.0083,0.0087 0.02387,0.0073 0.03125,0 0.0074,-0.0073 -9.36e-4,-0.03022 0,-0.03125 0.0026,-0.0025 0.02754,0.0036 0.03125,0 0.0037,-0.0036 -0.0033,-0.02799 0,-0.03125 -9.7e-5,6e-5 0.0313,-0.03132 0.03125,-0.03125 0.0077,-0.008 0.03123,3.7e-5 0.03125,0 4.5e-5,-7.5e-5 -3.7e-5,-0.03113 0,-0.03125 a 0.09677853,0.09677853 0 0 0 0,-0.03125 c 0.0059,-0.0071 1.5e-5,-0.03128 0,-0.03125 0.0077,-0.0097 0.03123,4e-5 0.03125,0 6.6e-5,-1.61e-4 -4.3e-5,-0.03092 0,-0.03125 5.8e-5,-1.64e-4 -3.8e-5,-0.03092 0,-0.03125 1.28e-4,-1.69e-4 0.03117,1.28e-4 0.03125,0 7.6e-5,-1.28e-4 -2.1e-5,-0.03117 0,-0.03125 3.8e-5,-1.7e-4 -1.87e-4,-0.02869 0,-0.03125 a 0.09677853,0.09677853 0 0 0 0,-0.03125 c -9e-6,-0.0036 4.6e-5,-0.02765 0,-0.03125 1.31e-4,-0.0014 5.7e-5,-0.02405 0,-0.03125 1.25e-4,-0.0028 2.68e-4,-0.04459 0,-0.03125 l 0,-2.78125 c 2.68e-4,0.01334 1.25e-4,-0.02847 0,-0.03125 5.7e-5,-0.0072 1.31e-4,-0.02986 0,-0.03125 4.6e-5,-0.0036 -9e-6,-0.02762 0,-0.03125 7.2e-5,-0.0036 -1.9e-5,-0.02723 0,-0.03125 -1.87e-4,-0.0026 3.8e-5,-0.03108 0,-0.03125 -2.1e-5,-8.5e-5 7.6e-5,-0.03112 0,-0.03125 -7.6e-5,-1.28e-4 -0.03112,1.69e-4 -0.03125,0 -0.0043,-0.0042 0.0038,-0.02767 0,-0.03125 -4.3e-5,-3.33e-4 6.6e-5,-0.03109 0,-0.03125 -1.8e-5,-4e-5 -0.02352,0.0097 -0.03125,0 1.5e-5,3.2e-5 0.0059,-0.02411 0,-0.03125 -1.82e-4,-0.0028 5.8e-5,-0.03092 0,-0.03125 -3.7e-5,-1.2e-4 4.5e-5,-0.03118 0,-0.03125 -2.2e-5,-3.7e-5 -0.0235,0.008 -0.03125,0 4.6e-5,7.4e-5 -0.03135,-0.03131 -0.03125,-0.03125 -0.0033,-0.0033 0.0037,-0.0276 0,-0.03125 -0.0037,-0.0036 -0.02869,0.0025 -0.03125,0 -9.36e-4,-0.001 0.0074,-0.02391 0,-0.03125 -0.0074,-0.0073 -0.03952,-0.0087 -0.03125,0 0.0087,0.0083 0.0073,-0.02387 0,-0.03125 -0.0073,-0.0074 -0.03022,9.36e-4 -0.03125,0 -0.0025,-0.0026 0.0036,-0.02754 0,-0.03125 -0.0036,-0.0037 -0.02799,0.0033 -0.03125,0 -4.9e-5,-1.43e-4 6.1e-5,-0.03115 0,-0.03125 -0.0076,-0.0077 -0.03129,-2.3e-5 -0.03125,0 -0.008,-0.0077 3.7e-5,-0.03123 0,-0.03125 -7.5e-5,-4.5e-5 -0.03113,3.7e-5 -0.03125,0 -0.0032,-0.0059 -0.03122,4.4e-5 -0.03125,0 -0.0071,-0.0059 -0.03128,-1.5e-5 -0.03125,0 -0.0097,-0.0077 4e-5,-0.03123 0,-0.03125 -1.61e-4,-6.6e-5 -0.03092,4.3e-5 -0.03125,0 1.28e-4,7.8e-5 -0.03133,-2.3e-5 -0.03125,0 -1.69e-4,-1.28e-4 1.28e-4,-0.03117 0,-0.03125 -1.28e-4,-7.6e-5 -0.03117,2.1e-5 -0.03125,0 -1.7e-4,-3.8e-5 -0.02869,1.87e-4 -0.03125,0 -0.004,1.9e-5 -0.02765,-7.2e-5 -0.03125,0 -0.0036,9e-6 -0.02765,-4.6e-5 -0.03125,0 -0.0014,-1.31e-4 -0.02405,-5.7e-5 -0.03125,0 -0.0028,-1.25e-4 -0.04459,-2.68e-4 -0.03125,0 l -7.71875,0 c -8.2e-5,3.19e-4 -2.55e-4,-0.02843 0,-0.03125 l 6.625,-7.40625 0.03125,0 c 4.6e-5,-1.9e-5 0.03122,2.2e-5 0.03125,0 0,0 0.0043,-0.02462 0,-0.03125 -0.0044,-0.0029 0.0059,-0.02733 0,-0.03125 0,0 -0.03125,0.03125 -0.03125,0.03125 0,0 -0.01257,-0.04271 -0.03125,-0.0625 0.0047,0.0022 0.01859,-0.0058 0.03125,0 0.01266,0.0058 0.02017,-0.0051 0.03125,0 0.0044,0.0014 -0.0039,0.03001 0,0.03125 0.01162,0.0037 0.03124,1.5e-5 0.03125,0 0.0038,-0.0037 -0.0033,-0.028 0,-0.03125 2.1e-5,-1.1e-5 0.02672,0.0032 0.03125,0 3.1e-5,-5.3e-5 -2.6e-5,-0.03115 0,-0.03125 0,0 -0.02482,0.0046 -0.03125,0 0,0 0.03125,-0.03125 0.03125,-0.03125 2.5e-5,-1.03e-4 -3.1e-5,0.0313 0,0.03125 0.0065,0.0045 0.03125,0 0.03125,0 a 0.09677853,0.09677853 0 0 0 0,-0.03125 c 2.3e-5,-1.04e-4 -1.8e-5,-0.0311 0,-0.03125 -4e-5,-0.0046 1.09e-4,-0.02755 0,-0.03125 -1.9e-5,1.06e-4 1.5e-5,-0.0314 0,-0.03125 0.01121,0.0048 0.03125,0 0.03125,0 1.8e-5,-5.9e-5 -1.4e-5,-0.03114 0,-0.03125 2.7e-5,-1.2e-4 -1.3e-4,-0.029 0,-0.03125 -1.4e-5,-0.0037 5.2e-5,-0.02757 0,-0.03125 -9e-6,-0.0035 3.9e-5,-0.02757 0,-0.03125 9.6e-5,-9.83e-4 4.4e-5,-0.02389 0,-0.03125 8.8e-5,-0.002 -5.4e-5,-0.02928 0,-0.03125 6e-5,0.0074 5e-5,-0.02928 0,-0.03125 4.3e-5,-0.0074 9.4e-5,-0.03027 0,-0.03125 3.4e-5,-0.0037 -8e-6,-0.02782 0,-0.03125 -7.6e-5,-0.0015 -2.5e-5,-0.03137 0,-0.03125 1.3e-5,1.08e-4 -1.5e-5,-0.03131 0,-0.03125 -1.4e-5,-1.08e-4 1.6e-5,-0.03119 0,-0.03125 0,0 -0.02003,-0.0048 -0.03125,0 9.3e-5,-0.0037 -3.2e-5,-0.02693 0,-0.03125 -0.0037,-0.0037 0.0038,-0.02757 0,-0.03125 -1.8e-5,-1.5e-4 2.3e-5,-0.03115 0,-0.03125 0,0 0,-0.03125 0,-0.03125 0,0 -0.02473,-0.0045 -0.03125,0 -0.0043,0.003 0.0058,0.02725 0,0.03125 -0.0232,0.01602 -0.0625,0.03125 -0.0625,0.03125 0.0059,-0.0069 -0.0079,-0.02211 0,-0.03125 0.0078,-0.01429 0.02349,-0.01696 0.03125,-0.03125 0.0064,-0.0046 0.03125,0 0.03125,0 -2.6e-5,-1.03e-4 3.1e-5,-0.0312 0,-0.03125 -3.4e-5,-5.1e-5 -0.03116,1.01e-4 -0.03125,0 -0.0033,-0.0033 0.0038,-0.02754 0,-0.03125 0,0 -0.02022,-0.0052 -0.03125,0 -1.77e-4,-0.0028 5.4e-5,-0.03096 0,-0.03125 0,0 -0.02048,-0.0057 -0.03125,0 0.0043,-0.0067 0,-0.03125 0,-0.03125 -1.9e-5,-4.7e-5 2.1e-5,-0.03122 0,-0.03125 0,0 -0.02448,-0.0041 -0.03125,0 -2e-5,-4.5e-5 2.2e-5,-0.03122 0,-0.03125 0,0 -0.02473,-0.0045 -0.03125,0 0,0 -0.02498,-0.0066 -0.03125,0 -0.0025,-0.0025 0.0037,-0.02746 0,-0.03125 -10e-5,-3.01e-5 -0.0311,2.4e-5 -0.03125,0 -1.02e-4,-8.54e-5 5.3e-5,-0.031218 0,-0.03125 a 0.09677853,0.09677853 0 0 0 -0.03125,0 c -0.0044,-0.00267 -0.03128,-1.33e-5 -0.03125,0 -5.3e-5,-4e-5 -0.02657,0.0028 -0.03125,0 -3.9e-5,-1.243e-4 4.9e-5,-0.031178 0,-0.03125 -0.006,-0.00621 -0.03126,-1.12e-5 -0.03125,0 0,0 0,-0.03125 0,-0.03125 0,0 -0.03125,0 -0.03125,0 -6e-5,-1.53e-5 -0.03114,1.26e-5 -0.03125,0 -0.0038,1.69e-5 -0.02756,-5.95e-5 -0.03125,0 a 0.09677853,0.09677853 0 0 0 -0.03125,0 c -0.0034,6.1e-6 -0.02757,-2.97e-5 -0.03125,0 -9.84e-4,-7.53e-5 -0.02389,-3.35e-5 -0.03125,0 l -3.75,0 0.1875,-8.875 c 2.68e-4,0.013337 1.25e-4,-0.028465 0,-0.03125 5.7e-5,-0.007196 1.31e-4,-0.0298624 0,-0.03125 4.6e-5,-0.0036 -9e-6,-0.0276234 0,-0.03125 -1.03e-4,-0.00166 -3.3e-5,-0.031421 0,-0.03125 -1.87e-4,-0.002555 3.8e-5,-0.0310799 0,-0.03125 -2.1e-5,-8.456e-5 7.6e-5,-0.0311216 0,-0.03125 -7.6e-5,-1.2836e-4 -0.03112,1.6934e-4 -0.03125,0 -0.0043,-0.004208 0.0038,-0.0276657 0,-0.03125 -4.3e-5,-3.3317e-4 6.6e-5,-0.0310889 0,-0.03125 -1.8e-5,-3.986e-5 -0.02352,0.009691 -0.03125,0 -1.02e-4,-0.001712 -5.5e-5,-0.0315775 0,-0.03125 -1.82e-4,-0.002765 5.8e-5,-0.0309244 0,-0.03125 -3.7e-5,-1.2026e-4 4.5e-5,-0.0311752 0,-0.03125 -2.2e-5,-3.739e-5 -0.0235,0.007992 -0.03125,0 2.3e-5,3.683e-5 0.0077,-0.0236267 0,-0.03125 a 0.09677853,0.09677853 0 0 0 -0.03125,0 c -0.0033,-0.00326 0.0037,-0.0276028 0,-0.03125 -0.0037,-0.003647 -0.0287,0.002535 -0.03125,0 -9.35e-4,-0.001033 0.0074,-0.0239101 0,-0.03125 -0.0074,-0.00734 -0.03953,-0.008694 -0.03125,0 0.0087,0.008284 0.0073,-0.0238736 0,-0.03125 -0.0073,-0.007376 -0.03022,9.3568e-4 -0.03125,0 -0.0025,-0.002555 0.0036,-0.0275357 0,-0.03125 -0.0036,-0.003714 -0.02799,0.003272 -0.03125,0 a 0.09677853,0.09677853 0 0 0 0,-0.03125 c -3.1e-5,-4.779e-5 -0.02326,0.007748 -0.03125,0 -0.008,-0.007748 3.7e-5,-0.0312277 0,-0.03125 -7.5e-5,-4.468e-5 -0.03113,3.667e-5 -0.03125,0 -0.0032,-0.005942 -0.03122,4.388e-5 -0.03125,0 -3.3e-5,-4.388e-5 -0.02156,0.007728 -0.03125,0 -0.0097,-0.007728 4e-5,-0.0312324 0,-0.03125 -1.61e-4,-6.63e-5 -0.03092,4.344e-5 -0.03125,0 1.28e-4,7.806e-5 -0.03133,-2.298e-5 -0.03125,0 -1.69e-4,-1.2776e-4 1.28e-4,-0.0311739 0,-0.03125 -1.28e-4,-7.611e-5 -0.03116,2.09e-5 -0.03125,0 -1.7e-4,-3.761e-5 -0.0287,1.873e-4 -0.03125,0 1.71e-4,3.34e-5 -0.02959,1.0353e-4 -0.03125,0 -0.0036,9.09e-6 -0.02765,-4.607e-5 -0.03125,0 -0.0014,-1.3103e-4 -0.02405,-5.756e-5 -0.03125,0 -0.0028,-1.2478e-4 -0.04458,-2.6786e-4 -0.03125,0 l -3.1875,0 z m -5.875,10.53125 c 0,0 -0.03125,-0.03125 -0.03125,-0.03125 0.0041,0.0076 -1.98e-5,0.03122 0,0.03125 0,0 0.024886,0.0065 0.03125,0 z m 0.09375,-0.875 c 0.00388,0.01156 -0.00443,0.01804 0,0.03125 -0.0085,-0.0086 -0.024876,0.0065 -0.03125,0 0,0 0.03125,-0.03125 0.03125,-0.03125 z m 13.59375,0.09375 c 0.0084,-0.004 0.02285,0.03522 0.03125,0.03125 -0.0089,0.0057 -0.02236,-0.0057 -0.03125,0 0.0044,-0.0029 -0.0059,-0.02734 0,-0.03125 z M 4.40625,10.25 c 0.0086,0.0061 0.022652,-0.0061 0.03125,0 0.00607,0.0067 0,0.03125 0,0.03125 0,0 -0.01674,-0.02126 -0.03125,-0.03125 z" transform="translate(0.008822,-0.00314999)" id="path3833" style="fill:#000000;fill-opacity:0.52941165"/> + <path d="m 10.110573,0.83456199 c -0.599999,0 -0.999999,0.40000001 -0.999999,1.00000001 l 0,8.500001 -4.406251,0 6.09375,7.5 6.6875,-7.5 -4.375,0 0.1875,-9.50000101 -3.1875,0 z m -6.71875,18.00000101 0,2.78125 15.59375,0 0,-2.78125 -15.59375,0 z" id="Shape_5_-9" style="fill:#ffffff;fill-opacity:1"/> + </g> +</svg> \ No newline at end of file diff --git a/resources/mmv/ui/mmv.ui.canvasButtons.js b/resources/mmv/ui/mmv.ui.canvasButtons.js index d782890..2aca3fc 100644 --- a/resources/mmv/ui/mmv.ui.canvasButtons.js +++ b/resources/mmv/ui/mmv.ui.canvasButtons.js @@ -29,7 +29,9 @@ * @param {jQuery} $fullscreenButton The fullscreen button from the parent class. */ function CanvasButtons( $container, $closeButton, $fullscreenButton ) { - var buttons = this; + var buttons = this, + isRtl = $( document.body ).hasClass( 'rtl' ), + tooltipDelay = mw.config.get( 'wgMultimediaViewer' ).tooltipDelay; mw.mmv.ui.Element.call( this, $container ); @@ -38,11 +40,20 @@ this.$reuse = $( '<div>' ) .addClass( 'mw-mmv-reuse-button' ) - .html( ' ' ) + .html( ' ' ) .prop( 'title', mw.message( 'multimediaviewer-reuse-link' ).text() ) .tipsy( { - delayIn: mw.config.get( 'wgMultimediaViewer' ).tooltipDelay, - gravity: $( document.body ).hasClass( 'rtl' ) ? 'sw' : 'se' + delayIn: tooltipDelay, + gravity: isRtl ? 'sw' : 'se' + } ); + + this.$download = $( '<div>' ) + .addClass( 'mw-mmv-download-button' ) + .html( ' ' ) + .prop( 'title', mw.message( 'multimediaviewer-download-link' ).text() ) + .tipsy( { + delayIn: tooltipDelay, + gravity: isRtl ? 'sw' : 'se' } ); this.$next = $( '<div>' ) @@ -57,6 +68,7 @@ .add( this.$prev ); this.$buttons = this.$close + .add( this.$download ) .add( this.$reuse ) .add( this.$fullscreen ) .add( this.$next ) @@ -197,12 +209,24 @@ this.handleEvent( 'mmv-reuse-closed', function () { buttons.$reuse.removeClass( 'open' ); } ); + + this.$download.on( 'click.mmv-canvasButtons', function ( e ) { + $( document ).trigger( 'mmv-download-open' ); + e.stopPropagation(); + } ); + this.handleEvent( 'mmv-download-opened', function () { + buttons.$download.addClass( 'open' ); + } ); + this.handleEvent( 'mmv-download-closed', function () { + buttons.$download.removeClass( 'open' ); + } ); }; /** * Removes all UI things from the DOM, or hides them */ CBP.unattach = function () { + this.$download.off( 'click.mmv-canvasButtons' ).tipsy( 'hide' ); this.$reuse.off( 'click.mmv-canvasButtons' ).tipsy( 'hide' ); this.$close.tipsy( 'hide' ); this.$fullscreen.tipsy( 'hide' ); diff --git a/resources/mmv/ui/mmv.ui.canvasButtons.less b/resources/mmv/ui/mmv.ui.canvasButtons.less index 2e1bf8a..3dabe0b 100644 --- a/resources/mmv/ui/mmv.ui.canvasButtons.less +++ b/resources/mmv/ui/mmv.ui.canvasButtons.less @@ -4,6 +4,7 @@ @navbutton-width: 18px; @buttons-offset: 5px; +.mw-mmv-download-button, .mw-mmv-reuse-button, .mw-mmv-close, .mw-mmv-fullscreen, @@ -23,6 +24,7 @@ .unselectable; } +.mw-mmv-download-button.hidden, .mw-mmv-reuse-button.hidden, .mw-mmv-close.hidden, .mw-mmv-fullscreen.hidden, @@ -32,6 +34,7 @@ } .cursor-hidden { + .mw-mmv-download-button, .mw-mmv-reuse-button, .mw-mmv-close, .mw-mmv-fullscreen, @@ -41,6 +44,7 @@ } } +.mw-mmv-download-button, .mw-mmv-reuse-button, .mw-mmv-close, .mw-mmv-fullscreen { @@ -118,3 +122,12 @@ height: 24px; width: 24px; } + +.mw-mmv-download-button { + bottom: @buttons-offset + @metadatabar-above-fold-height + @progress-bar-height + 37px; + /* @embed */ + background-image: url(img/mw-download.svg); + background-size: 24px 24px; + height: 24px; + width: 24px; +} diff --git a/resources/mmv/ui/mmv.ui.dialog.js b/resources/mmv/ui/mmv.ui.dialog.js new file mode 100644 index 0000000..8be82f8 --- /dev/null +++ b/resources/mmv/ui/mmv.ui.dialog.js @@ -0,0 +1,173 @@ +/* + * 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 DP; + + /** + * Represents a dialog and the link to open it. + * @class mw.mmv.ui.Dialog + * @extends mw.mmv.ui.Element + * @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 Dialog( $container, $openButton, config ) { + mw.mmv.ui.Element.call( this, $container ); + + /** @property {mw.mmv.Config} config - */ + this.config = config; + + this.$openButton = $openButton; + + this.$dialog = $( '<div>' ) + .addClass( 'mw-mmv-dialog' ); + + this.$downArrow = $( '<div>' ) + .addClass( 'mw-mmv-dialog-down-arrow' ) + .appendTo( this.$dialog ); + + this.$dialog.appendTo( this.$container ); + + /** @property {boolean} Whether or not the dialog is open. */ + this.isOpen = false; + + /** + * @property {string[]} loadDependencies Dependencies to load before showing the dialog. + */ + this.loadDependencies = []; + }; + + oo.inheritClass( Dialog, mw.mmv.ui.Element ); + DP = Dialog.prototype; + + /** + * Handles click on link that opens/closes the dialog. + */ + DP.handleOpenCloseClick = function () { + var dialog = this, + $deferred = $.Deferred(); + + mw.loader.using( this.loadDependencies, function () { + dialog.dependenciesLoaded = true; + dialog.toggleDialog(); + }, function (error) { + if ( window.console && window.console.error ) { + window.console.error( 'mw.loader.using error when trying to load dialog dependencies', error ); + } + } ); + + return false; + }; + + /** + * Toggles the open state on the dialog. + */ + DP.toggleDialog = function () { + if ( this.isOpen ) { + this.closeDialog(); + } else { + this.openDialog(); + } + }; + + /** + * Opens a dialog. + */ + DP.openDialog = function () { + this.startListeningToOutsideClick(); + this.$dialog.show(); + this.fixDownArrowPosition(); + this.isOpen = true; + }; + + /** + * Closes a dialog. + */ + DP.closeDialog = function () { + this.stopListeningToOutsideClick(); + this.$dialog.hide(); + this.isOpen = false; + }; + + /** + * Sets up the event handler which closes the dialog when the user clicks outside. + */ + DP.startListeningToOutsideClick = function () { + var dialog = this; + + this.outsideClickHandler = this.outsideClickHandler || function ( e ) { + var $clickTarget = $( e.target ); + + if ( $clickTarget.closest( dialog.$dialog ).length ) { + return; + } + + dialog.closeDialog(); + return false; + }; + $( document ).on( 'click.mmv', this.outsideClickHandler ); + }; + + /** + * Removes the event handler set up by startListeningToOutsideClick(). + */ + DP.stopListeningToOutsideClick = function () { + $( document ).off( 'click.mmv', this.outsideClickHandler ); + }; + + /** + * Fixes the tip of the container to point to the icon which opens it. + */ + DP.fixDownArrowPosition = function() { + var buttonPosition, + arrowPositionBase, + buttonWidth, + arrowWidth, + offset; + + buttonPosition = this.$openButton.offset().left; + arrowPositionBase = this.$downArrow.offsetParent().offset().left; + buttonWidth = this.$openButton.outerWidth(); + arrowWidth = this.$downArrow.outerWidth(); + + // this is the correct position of the arrow relative to the viewport - we want + // the middle of the arrow to be positioned over the middle of the button + offset = buttonPosition + ( buttonWidth - arrowWidth ) / 2; + + this.$downArrow.css( 'left', ( offset - arrowPositionBase ) + 'px' ); + }; + + /** + * Clears listeners. + */ + DP.unattach = function () { + this.constructor['super'].prototype.unattach.call( this ); + + this.stopListeningToOutsideClick(); + }; + + /** + * @inheritdoc + */ + DP.empty = function () { + this.closeDialog(); + }; + + mw.mmv.ui.Dialog = Dialog; +}( mediaWiki, jQuery, OO ) ); diff --git a/resources/mmv/ui/mmv.ui.dialog.less b/resources/mmv/ui/mmv.ui.dialog.less new file mode 100644 index 0000000..c15d9c5 --- /dev/null +++ b/resources/mmv/ui/mmv.ui.dialog.less @@ -0,0 +1,32 @@ +@import "../mmv.mixins"; +@import "../mmv.globals"; + +.mw-mmv-dialog { + @background-color: rgb(255, 255, 255); + @shadow-color: #aaaaaa; + @dialog-width: 450px; + + display: none; + width: @dialog-width; + height: @dialog-height; + background-color: @background-color; + box-shadow: 0 2px 0 @shadow-color; + .box-round(@border-radius); + + .mw-mmv-dialog-down-arrow { + @arrow-size: 20px; + @arrow-border-color: #aaaaaa; + @arrow-border-size: 2px; + + background-color: @background-color; + width: @arrow-size; + height: @arrow-size; + /* @noflip */ + border-right: @arrow-border-size solid @arrow-border-color; + border-bottom: @arrow-border-size solid @arrow-border-color; + .rotate(45deg); + position: absolute; + // horizontal positioning will be done in JS + bottom: -1 * ( @arrow-size / 2 ) - @arrow-border-size; + } +} diff --git a/resources/mmv/ui/mmv.ui.download.dialog.js b/resources/mmv/ui/mmv.ui.download.dialog.js new file mode 100644 index 0000000..356738d --- /dev/null +++ b/resources/mmv/ui/mmv.ui.download.dialog.js @@ -0,0 +1,101 @@ +/* + * 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 DP; + + /** + * Represents the file download dialog and the link to open it. + * @class mw.mmv.ui.download.Dialog + * @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 Dialog( $container, $openButton, config ) { + Dialog['super'].call( this, $container, $openButton, config ); + + this.loadDependencies.push( 'mmv.ui.download.pane' ); + + this.$dialog.addClass( 'mw-mmv-download-dialog' ); + } + + oo.inheritClass( Dialog, mw.mmv.ui.Dialog ); + DP = Dialog.prototype; + + /** + * Registers listeners. + */ + DP.attach = function () { + var dialog = this; + + this.handleEvent( 'mmv-download-open', $.proxy( dialog.handleOpenCloseClick, dialog ) ); + }; + + /** + * Sets data needed by contaned tabs and makes dialog launch link visible. + * @param {mw.mmv.model.Image} image + * @param {mw.mmv.model.Repo} repo + */ + DP.set = function ( image, repo ) { + if ( this.download ) { + this.download.set( image, repo ); + } else { + this.setValues = { + image: image, + repo: repo + }; + } + }; + + /** + * @event mmv-download-opened + * Fired when the dialog is opened. + */ + /** + * Opens a dialog with information about file download. + */ + DP.openDialog = function () { + if ( !this.download ) { + this.download = new mw.mmv.ui.download.Pane( this.$dialog ); + } + + if ( this.setValues ) { + this.download.set( this.setValues.image, this.setValues.repo ); + this.setValues = undefined; + } + + this.constructor['super'].prototype.openDialog.call( this ); + + $( document ).trigger( 'mmv-download-opened' ); + }; + + /** + * @event mmv-download-closed + * Fired when the dialog is closed. + */ + /** + * Closes the download dialog. + */ + DP.closeDialog = function () { + this.constructor['super'].prototype.closeDialog.call( this ); + $( document ).trigger( 'mmv-download-closed' ); + }; + + mw.mmv.ui.download.Dialog = Dialog; +}( mediaWiki, jQuery, OO ) ); diff --git a/resources/mmv/ui/mmv.ui.download.dialog.less b/resources/mmv/ui/mmv.ui.download.dialog.less new file mode 100644 index 0000000..1fd0329 --- /dev/null +++ b/resources/mmv/ui/mmv.ui.download.dialog.less @@ -0,0 +1,35 @@ +@import "../mmv.mixins"; +@import "../mmv.globals"; + +.mw-mmv-download-dialog { + @divider-border-height: 1px; + + // positioned relative to the download button + position: absolute; + right: 5px; + top: -1 * (@dialog-height + 5px + @progress-bar-height + 78px); + + .oo-ui-optionWidget { + @tab-border-height: 3px; + @highlighted-tab-color: rgb(225, 243, 255); + @selected-tab-color: rgb(0, 113, 188); + + display: inline-block; + padding: 10px 25px; + + font-size: 1.2em; + + &.oo-ui-optionWidget-highlighted { + border-bottom: (@tab-border-height - @divider-border-height) solid @highlighted-tab-color; + } + + &.oo-ui-optionWidget-selected, + &.oo-ui-optionWidget-highlighted.oo-ui-optionWidget-selected { + border-bottom: @tab-border-height solid @selected-tab-color; + } + + &:first-child { + .box-round(@border-radius 0 0 0); + } + } +} diff --git a/resources/mmv/ui/mmv.ui.download.js b/resources/mmv/ui/mmv.ui.download.js new file mode 100644 index 0000000..58c5d26 --- /dev/null +++ b/resources/mmv/ui/mmv.ui.download.js @@ -0,0 +1,20 @@ +/* + * 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 ) { + mw.mmv.ui.download = {}; +}( mediaWiki ) ); diff --git a/resources/mmv/ui/mmv.ui.reuse.download.js b/resources/mmv/ui/mmv.ui.download.pane.js similarity index 90% rename from resources/mmv/ui/mmv.ui.reuse.download.js rename to resources/mmv/ui/mmv.ui.download.pane.js index 805957b..d63b729 100644 --- a/resources/mmv/ui/mmv.ui.reuse.download.js +++ b/resources/mmv/ui/mmv.ui.download.pane.js @@ -22,19 +22,20 @@ /** * UI component that provides functionality to download the media asset displayed. * - * @class mw.mmv.ui.reuse.Download - * @extends mw.mmv.ui.reuse.Tab + * @class mw.mmv.ui.download.Pane + * @extends mw.mmv.ui.Element * @constructor * @param {jQuery} $container */ - function Download( $container ) { - Download['super'].call( this, $container ); + function Pane( $container ) { + Pane['super'].call( this, $container ); - /** @property {mw.mmv.ui.reuse.Utils} utils - */ - this.utils = new mw.mmv.ui.reuse.Utils(); + /** @property {mw.mmv.ui.Utils} utils - */ + this.utils = new mw.mmv.ui.Utils(); - this.$pane.addClass( 'mw-mmv-download-pane' ); - this.$pane.appendTo( this.$container ); + this.$pane = $( '<div>' ) + .addClass( 'mw-mmv-download-pane' ) + .appendTo( this.$container ); this.createDownloadButton( this.$pane ); this.createSizePulldownMenu( this.$pane ); @@ -53,8 +54,8 @@ /** @property {mw.mmv.model.Image|null} Image the download button currently points to. */ this.image = null; } - oo.inheritClass( Download, mw.mmv.ui.reuse.Tab ); - DP = Download.prototype; + oo.inheritClass( Pane, mw.mmv.ui.Element ); + DP = Pane.prototype; /** @@ -74,7 +75,7 @@ this.$downloadButton = $( '<a>' ) .attr( 'target', '_blank' ) .attr( 'download', '' ) - .addClass( 'mw-ui-button mw-ui-constructive mw-mmv-download-button' ) + .addClass( 'mw-ui-button mw-ui-constructive mw-mmv-download-go-button' ) .click( function ( e ) { self.trackLinkClick.call( this, 'download', e ); } ); @@ -104,10 +105,10 @@ */ DP.createSizePulldownMenu = function ( $container ) { this.downloadSizeMenu = this.utils.createPulldownMenu( - [ 'original', 'small', 'medium', 'large' ], - [ 'mw-mmv-download-size' ], - 'original' - ); + [ 'original', 'small', 'medium', 'large' ], + [ 'mw-mmv-download-size' ], + 'original' + ); this.downloadSizeMenu.onMenuSelect = function( item ) { mw.mmv.actionLogger.log( 'download-select-menu-' + item.data.name ); @@ -138,7 +139,7 @@ var dl = this, attributionInput = new oo.ui.TextInputWidget( { classes: [ 'mw-mmv-download-attr-input' ], - readOnly: true + readOnly: true } ), attributionSwitch = new oo.ui.ButtonSelectWidget( { classes: [ 'mw-mmv-download-attr-select' ] @@ -151,9 +152,9 @@ } ); attributionSwitch.addItems( [ - plainOption, - htmlOption - ] ); + plainOption, + htmlOption + ] ); attributionSwitch.selectItem( plainOption ); @@ -170,34 +171,34 @@ this.$attributionCta = $( '<div>' ) .addClass( 'mw-mmv-download-attribution-cta' ) .append( - $( '<p>' ) + $( '<p>' ) .addClass( 'mw-mmv-download-attribution-cta-header' ) .text( mw.message( 'multimediaviewer-download-attribution-cta-header' ).text() ), - $( '<p>' ) + $( '<p>' ) .addClass( 'mw-mmv-download-attribution-cta-invite' ) .text( mw.message( 'multimediaviewer-download-attribution-cta' ).text() ) - ) + ) .click( function () { dl.$attributionSection.removeClass( 'mw-mmv-download-attribution-collapsed' ); dl.attributionInput.$element.find( 'input' ).focus(); } ) - .appendTo( this.$attributionSection ); + .appendTo( this.$attributionSection ); this.$attributionHow = $( '<div>' ) .addClass( 'mw-mmv-download-attribution-how' ) .append( - $( '<p>' ) + $( '<p>' ) .addClass( 'mw-mmv-download-attribution-how-header' ) .text( mw.message( 'multimediaviewer-download-attribution-cta-header' ).text() ), - attributionInput.$element, - attributionSwitch.$element, - $( '<p>' ) + attributionInput.$element, + attributionSwitch.$element, + $( '<p>' ) .addClass( 'mw-mmv-download-attribution-close-button' ) .click( function () { dl.$attributionSection.addClass( 'mw-mmv-download-attribution-collapsed' ); } ) .text( ' ' ) - ) + ) .appendTo( this.$attributionSection ); this.attributionInput = attributionInput; @@ -346,6 +347,8 @@ // Note: This extension will not be the real one for file types other than: png/gif/jpg/jpeg this.imageExtension = image.title.getExtension().toLowerCase(); + console.log( this.defaultItem ); + // Reset size menu to default item and update download button label now that we have the info this.downloadSizeMenu.getMenu().chooseItem( this.defaultItem ); @@ -368,15 +371,5 @@ this.image = null; }; - DP.show = function () { - mw.mmv.ui.reuse.Tab.prototype.show.call( this ); - this.$container.addClass( 'mw-mmv-reuse-download-active' ); - }; - - DP.hide = function () { - mw.mmv.ui.reuse.Tab.prototype.hide.call( this ); - this.$container.removeClass( 'mw-mmv-reuse-download-active' ); - }; - - mw.mmv.ui.reuse.Download = Download; + mw.mmv.ui.download.Pane = Pane; }( mediaWiki, jQuery, OO ) ); diff --git a/resources/mmv/ui/mmv.ui.reuse.download.less b/resources/mmv/ui/mmv.ui.download.pane.less similarity index 98% rename from resources/mmv/ui/mmv.ui.reuse.download.less rename to resources/mmv/ui/mmv.ui.download.pane.less index 82ed220..5abfe08 100644 --- a/resources/mmv/ui/mmv.ui.reuse.download.less +++ b/resources/mmv/ui/mmv.ui.download.pane.less @@ -18,7 +18,7 @@ cursor: default; } - .mw-mmv-download-button { + .mw-mmv-download-go-button { border-top-right-radius: 0; border-bottom-right-radius: 0; } diff --git a/resources/mmv/ui/mmv.ui.reuse.dialog.js b/resources/mmv/ui/mmv.ui.reuse.dialog.js index 820a0d0..e13c5be 100644 --- a/resources/mmv/ui/mmv.ui.reuse.dialog.js +++ b/resources/mmv/ui/mmv.ui.reuse.dialog.js @@ -28,24 +28,7 @@ * @param {mw.mmv.Config} config */ function Dialog( $container, $openButton, config ) { - mw.mmv.ui.Element.call( this, $container ); - - /** @property {mw.mmv.Config} config - */ - this.config = config; - - this.$openButton = $openButton; - - this.$reuseDialog = $( '<div>' ) - .addClass( 'mw-mmv-reuse-dialog' ); - - this.$downArrow = $( '<div>' ) - .addClass( 'mw-mmv-reuse-down-arrow' ) - .appendTo( this.$reuseDialog ); - - this.$reuseDialog.appendTo( this.$container ); - - /** @property {boolean} Whether or not the dialog is open. */ - this.isOpen = false; + Dialog['super'].call( this, $container, $openButton, config ); /** * @property {Object.<string, mw.mmv.ui.Element>} tabs List of tab ui objects. @@ -56,8 +39,14 @@ * @property {Object.<string, OO.ui.MenuItemWidget>} ooTabs List of tab OOJS UI objects. */ this.ooTabs = null; + + this.loadDependencies.push( 'mmv.ui.reuse.share' ); + this.loadDependencies.push( 'mmv.ui.reuse.embed' ); + + this.$dialog.addClass( 'mw-mmv-reuse-dialog' ); } - oo.inheritClass( Dialog, mw.mmv.ui.Element ); + + oo.inheritClass( Dialog, mw.mmv.ui.Dialog ); DP = Dialog.prototype; // FIXME this should happen outside the dialog and the tabs, but we need to improve @@ -74,22 +63,19 @@ // MenuWidget has a nasty tendency to hide itself, maybe we're not using it right? this.reuseTabs.hide = $.noop; - this.reuseTabs.$element.show().appendTo( this.$reuseDialog ); + this.reuseTabs.$element.show().appendTo( this.$dialog ); this.tabs = { - download: new mw.mmv.ui.reuse.Download( this.$reuseDialog ), - share: new mw.mmv.ui.reuse.Share( this.$reuseDialog ), - embed: new mw.mmv.ui.reuse.Embed( this.$reuseDialog ) + share: new mw.mmv.ui.reuse.Share( this.$dialog ), + embed: new mw.mmv.ui.reuse.Embed( this.$dialog ) }; this.ooTabs = { share: makeTab( 'share' ), - download: makeTab( 'download' ), embed: makeTab( 'embed' ) }; this.reuseTabs.addItems( [ - this.ooTabs.download, this.ooTabs.share, this.ooTabs.embed ] ); @@ -98,7 +84,7 @@ // In case nothing is saved in localStorage or it contains junk if ( ! this.tabs.hasOwnProperty( this.selectedTab ) ) { - this.selectedTab = 'download'; + this.selectedTab = 'share'; } this.reuseTabs.selectItem( this.ooTabs[this.selectedTab] ); @@ -110,44 +96,18 @@ if ( this.tabsSetValues ) { // This is a delayed set() for the elements we've just created on demand this.tabs.share.set.apply( this.tabs.share, this.tabsSetValues.share ); - this.tabs.download.set.apply( this.tabs.download, this.tabsSetValues.download ); this.tabs.embed.set.apply( this.tabs.embed, this.tabsSetValues.embed ); this.tabsSetValues = undefined; } }; - /** - * Handles click on link that opens/closes the dialog. - */ - DP.handleOpenCloseClick = function () { - var dialog = this, - $deferred = $.Deferred(); - + DP.toggleDialog = function () { if ( this.tabs === null ) { - // initTabs() needs to have these dependencies loaded in order to run - mw.loader.using( [ 'mmv.ui.reuse.share', 'mmv.ui.reuse.embed', 'mmv.ui.reuse.download' ], function () { - dialog.initTabs(); - $deferred.resolve(); - }, function (error) { - $deferred.reject( error ); - if ( window.console && window.console.error ) { - window.console.error( 'mw.loader.using error when trying to load reuse dependencies', error ); - } - } ); - } else { - $deferred.resolve(); + this.initTabs(); } - $deferred.then( function() { - if ( dialog.isOpen ) { - dialog.closeDialog(); - } else { - dialog.openDialog(); - } - } ); - - return false; - }; + this.constructor['super'].prototype.toggleDialog.call( this ); + }; /** * Handles tab selection. @@ -214,8 +174,6 @@ this.constructor['super'].prototype.unattach.call( this ); - this.stopListeningToOutsideClick(); - if ( this.reuseTabs ) { this.reuseTabs.off( 'select' ); } @@ -237,12 +195,10 @@ DP.set = function ( image, repo, caption ) { if ( this.tabs !== null ) { this.tabs.share.set( image ); - this.tabs.download.set( image, repo ); this.tabs.embed.set( image, repo, caption ); } else { this.tabsSetValues = { share : [ image ], - download : [ image, repo ], embed : [ image, repo, caption ] }; } @@ -252,7 +208,7 @@ * @inheritdoc */ DP.empty = function () { - this.closeDialog(); + this.constructor['super'].prototype.empty.call( this ); for ( var tab in this.tabs ) { this.tabs[tab].empty(); @@ -267,14 +223,9 @@ * Opens a dialog with information about file reuse. */ DP.openDialog = function () { - mw.mmv.actionLogger.log( 'use-this-file-open' ); - - this.startListeningToOutsideClick(); - this.$reuseDialog.show(); - this.fixDownArrowPosition(); - $( document ).trigger( 'mmv-reuse-opened' ); - this.isOpen = true; + this.constructor['super'].prototype.openDialog.call( this ); this.tabs[this.selectedTab].show(); + $( document ).trigger( 'mmv-reuse-opened' ); }; /** @@ -289,58 +240,9 @@ mw.mmv.actionLogger.log( 'use-this-file-close' ); } - this.stopListeningToOutsideClick(); - this.$reuseDialog.hide(); + this.constructor['super'].prototype.closeDialog.call( this ); + $( document ).trigger( 'mmv-reuse-closed' ); - this.isOpen = false; - }; - - /** - * Sets up the event handler which closes the dialog when the user clicks outside. - */ - DP.startListeningToOutsideClick = function () { - var dialog = this; - - this.outsideClickHandler = this.outsideClickHandler || function ( e ) { - var $clickTarget = $( e.target ); - - if ( $clickTarget.closest( dialog.$reuseDialog ).length ) { - return; - } - - dialog.closeDialog(); - return false; - }; - $( document ).on( 'click.mmv', this.outsideClickHandler ); - }; - - /** - * Removes the event handler set up by startListeningToOutsideClick(). - */ - DP.stopListeningToOutsideClick = function () { - $( document ).off( 'click.mmv', this.outsideClickHandler ); - }; - - /** - * Fixes the tip of the container to point to the icon which opens it. - */ - DP.fixDownArrowPosition = function() { - var buttonPosition, - arrowPositionBase, - buttonWidth, - arrowWidth, - offset; - - buttonPosition = this.$openButton.offset().left; - arrowPositionBase = this.$downArrow.offsetParent().offset().left; - buttonWidth = this.$openButton.outerWidth(); - arrowWidth = this.$downArrow.outerWidth(); - - // this is the correct position of the arrow relative to the viewport - we want - // the middle of the arrow to be positioned over the middle of the button - offset = buttonPosition + ( buttonWidth - arrowWidth ) / 2; - - this.$downArrow.css( 'left', ( offset - arrowPositionBase ) + 'px' ); }; mw.mmv.ui.reuse.Dialog = Dialog; diff --git a/resources/mmv/ui/mmv.ui.reuse.dialog.less b/resources/mmv/ui/mmv.ui.reuse.dialog.less index f47955a..476bf8a 100644 --- a/resources/mmv/ui/mmv.ui.reuse.dialog.less +++ b/resources/mmv/ui/mmv.ui.reuse.dialog.less @@ -2,22 +2,12 @@ @import "../mmv.globals"; .mw-mmv-reuse-dialog { - @background-color: rgb(255, 255, 255); - @shadow-color: #aaaaaa; - @border-radius: 3px; @divider-border-height: 1px; - @dialog-width: 450px; - @dialog-height: 350px; // positioned relative to the reuse button position: absolute; right: 5px; top: -1 * (@dialog-height + 5px + @progress-bar-height + 38px); - width: @dialog-width; - height: @dialog-height; - background-color: @background-color; - box-shadow: 0 2px 0 @shadow-color; - .box-round(@border-radius); .mw-mmv-reuse-tabs { @divider-color: rgb(204, 204, 204); @@ -63,22 +53,5 @@ &.active { display: block; } - } - - .mw-mmv-reuse-down-arrow { - @arrow-size: 20px; - @arrow-border-color: #aaaaaa; - @arrow-border-size: 2px; - - background-color: @background-color; - width: @arrow-size; - height: @arrow-size; - /* @noflip */ - border-right: @arrow-border-size solid @arrow-border-color; - border-bottom: @arrow-border-size solid @arrow-border-color; - .rotate(45deg); - position: absolute; - // horizontal positioning will be done in JS - bottom: -1 * ( @arrow-size / 2 ) - @arrow-border-size; } } diff --git a/resources/mmv/ui/mmv.ui.reuse.embed.js b/resources/mmv/ui/mmv.ui.reuse.embed.js index 00d8707..31f82cd 100644 --- a/resources/mmv/ui/mmv.ui.reuse.embed.js +++ b/resources/mmv/ui/mmv.ui.reuse.embed.js @@ -37,8 +37,8 @@ */ this.formatter = new mw.mmv.EmbedFileFormatter(); - /** @property {mw.mmv.ui.reuse.Utils} utils - */ - this.utils = new mw.mmv.ui.reuse.Utils(); + /** @property {mw.mmv.ui.Utils} utils - */ + this.utils = new mw.mmv.ui.Utils(); /** * Indicates whether or not the default option has been reset for both size menus. diff --git a/resources/mmv/ui/mmv.ui.reuse.utils.js b/resources/mmv/ui/mmv.ui.utils.js similarity index 99% rename from resources/mmv/ui/mmv.ui.reuse.utils.js rename to resources/mmv/ui/mmv.ui.utils.js index e417efd..189e000 100644 --- a/resources/mmv/ui/mmv.ui.reuse.utils.js +++ b/resources/mmv/ui/mmv.ui.utils.js @@ -206,5 +206,5 @@ ).text(); }; - mw.mmv.ui.reuse.Utils = Utils; + mw.mmv.ui.Utils = Utils; }( mediaWiki, jQuery, OO ) ); -- To view, visit https://gerrit.wikimedia.org/r/160814 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Ia92545ed1ef7f2e4ba7934c682eef684a22ca17f Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/MultimediaViewer Gerrit-Branch: master Gerrit-Owner: MarkTraceur <[email protected]> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
