jenkins-bot has submitted this change and it was merged.

Change subject: Story 1289: Promote image viewer overlay to beta
......................................................................


Story 1289: Promote image viewer overlay to beta

If CommonsMetadata extension is present and is able to fetch the license
information and return it in the API response, then we show the license.
As a fallback we show a "License information" link pointing to the file
page, just like desktop media viewer does.

Note: license information is only shown when you click the image.

Change-Id: Iab2b857d009f25f077edb940d836ad84d576a9b8
Dependency: Ibaf09360041408e9bf9692056572f5b23b7f7c08
---
M MobileFrontend.i18n.php
M includes/Resources.php
M javascripts/common/history-alpha.js
M javascripts/modules/mediaViewer.js
M less/modules/mediaViewer.less
M templates/modules/ImageOverlay.html
6 files changed, 34 insertions(+), 16 deletions(-)

Approvals:
  Jdlrobson: Looks good to me, approved
  jenkins-bot: Verified



diff --git a/MobileFrontend.i18n.php b/MobileFrontend.i18n.php
index 326af9f..b6c8468 100644
--- a/MobileFrontend.i18n.php
+++ b/MobileFrontend.i18n.php
@@ -331,6 +331,7 @@
 
        // media viewer
        'mobile-frontend-media-details' => 'Details',
+       'mobile-frontend-media-license-link' => 'License information',
 
        // AbuseFilter variable
        'abusefilter-edit-builder-vars-user-mobile' => 'Whether or not a user 
is editing through the mobile interface',
@@ -914,6 +915,7 @@
 {{Identical|Reply}}',
        'mobile-frontend-media-details' => 'Caption for a button leading to the 
details of a media file (e.g. an image) in a preview.
 {{Identical|Detail}}',
+       'mobile-frontend-media-license-link' => 'Link to license information in 
media viewer.',
        'abusefilter-edit-builder-vars-user-mobile' => 'See 
{{msg-mw|Abusefilter-edit-builder-vars-user-name}} (from AbuseFilter 
extension), for example.',
        'mobile-frontend-profile-title' => 'Title of the 
[[Special:UserProfile]] page.
 {{Identical|User profile}}',
diff --git a/includes/Resources.php b/includes/Resources.php
index 1843496..1ddeca9 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -420,12 +420,14 @@
                'styles' => array(
                        'less/common/OverlayNew.less',
                        'less/modules/talk.less',
+                       'less/modules/mediaViewer.less',
                ),
                'scripts' => array(
                        'javascripts/common/OverlayNew.js',
                        'javascripts/common/LoadingOverlayNew.js',
                        'javascripts/modules/mf-toggle-dynamic.js',
                        'javascripts/modules/talk/talk.js',
+                       'javascripts/modules/mediaViewer.js',
                        'javascripts/modules/search/pageImages.js',
                        'javascripts/modules/languages/preferred.js',
                        'javascripts/modules/lastEdited/lastEditedBeta.js',
@@ -433,6 +435,7 @@
                ),
                'templates' => array(
                        'OverlayNew',
+                       'modules/ImageOverlay',
                ),
                'position' => 'bottom',
                'messages' => array(
@@ -451,6 +454,10 @@
                        'mobile-frontend-last-modified-with-user-months',
                        'mobile-frontend-last-modified-with-user-years',
                        'mobile-frontend-last-modified-with-user-just-now',
+
+                       // mediaViewer.js
+                       'mobile-frontend-media-details',
+                       'mobile-frontend-media-license-link',
                ),
        ),
 
@@ -486,9 +493,6 @@
        ),
 
        'mobile.alpha' => $wgMFMobileResourceBoilerplate + array(
-               'templates' => array(
-                       'modules/ImageOverlay',
-               ),
                'dependencies' => array(
                        'mobile.stable',
                        'mobile.beta',
@@ -501,13 +505,9 @@
 
                        // for mf-table.js
                        'mobile-frontend-table',
-
-                       // mediaViewer.js
-                       'mobile-frontend-media-details',
                ),
                'styles' => array(
                        'less/common/mainmenuAnimation.less',
-                       'less/modules/mediaViewer.less',
                ),
                'scripts' => array(
                        'javascripts/externals/micro.tap.js',
@@ -515,7 +515,6 @@
                        'javascripts/common/history-alpha.js',
                        'javascripts/modules/mf-translator.js',
                        'javascripts/modules/lazyload.js',
-                       'javascripts/modules/mediaViewer.js',
                        'javascripts/modules/random/random.js',
                ),
        ),
diff --git a/javascripts/common/history-alpha.js 
b/javascripts/common/history-alpha.js
index fb87b7d..94c3792 100644
--- a/javascripts/common/history-alpha.js
+++ b/javascripts/common/history-alpha.js
@@ -67,7 +67,8 @@
                                $a.on( 'click', lazyLoad );
                        }
 
-                       $container.find( 'a' ).each( function() {
+                       // do not hijack image links, media viewer does it
+                       $container.find( 'a:not([class="image"])' ).each( 
function() {
                                var $a = $( this ), title = $a.data( 'title' ),
                                        tooltip = $a.attr( 'title' ), 
namespaced, canHijack;
 
diff --git a/javascripts/modules/mediaViewer.js 
b/javascripts/modules/mediaViewer.js
index 1eeecbc..da4de50 100644
--- a/javascripts/modules/mediaViewer.js
+++ b/javascripts/modules/mediaViewer.js
@@ -1,5 +1,5 @@
 ( function( M, $ ) {
-       M.assertMode( [ 'alpha' ] );
+       M.assertMode( [ 'alpha', 'beta' ] );
 
        var Overlay = M.require( 'Overlay' ),
                Api = M.require( 'api' ).Api,
@@ -21,7 +21,7 @@
                                        action: 'query',
                                        prop: 'imageinfo',
                                        titles: title,
-                                       iiprop: 'url',
+                                       iiprop: ['url', 'extmetadata'],
                                        // request an image two times bigger 
than the reported screen size
                                        // for retina displays and zooming
                                        iiurlwidth: $( window ).width() * 2,
@@ -47,7 +47,8 @@
                closeOnBack: true,
 
                defaults: {
-                       detailsMsg: mw.msg( 'mobile-frontend-media-details' )
+                       detailsMsg: mw.msg( 'mobile-frontend-media-details' ),
+                       licenseLinkMsg: mw.msg( 
'mobile-frontend-media-license-link' )
                },
 
                postRender: function( options ) {
@@ -62,6 +63,9 @@
                                self.$( '.container div' ).append( $img );
                                self._positionImage();
                                self.$( '.details a' ).attr( 'href', 
data.descriptionurl );
+                               if ( data.extmetadata && 
data.extmetadata.LicenseShortName ) {
+                                       self.$( '.license a' ).text( 
data.extmetadata.LicenseShortName.value );
+                               }
 
                                self.$el.on( M.tapEvent( 'click' ), function() {
                                        self.$( '.details' ).toggleClass( 
'visible' );
diff --git a/less/modules/mediaViewer.less b/less/modules/mediaViewer.less
index 4aa33c5..7d3f79a 100644
--- a/less/modules/mediaViewer.less
+++ b/less/modules/mediaViewer.less
@@ -59,9 +59,20 @@
                        opacity: 1;
                }
 
-               a {
+               .button {
                        float: right;
                }
+
+               // FIXME: use general license styling when license in editor and
+               // uploads is not hardcoded in MobileFrontend
+               .license {
+                       font-size: .75em;
+                       line-height: 1.2;
+
+                       a {
+                               color: #3670C8;
+                       }
+               }
        }
 }
 
diff --git a/templates/modules/ImageOverlay.html 
b/templates/modules/ImageOverlay.html
index 779b948..e0539e0 100644
--- a/templates/modules/ImageOverlay.html
+++ b/templates/modules/ImageOverlay.html
@@ -1,6 +1,7 @@
 <button class="cancel">{{closeMsg}}</button>
 <div class="container loading"><div></div></div>
-<p class="content details">
+<div class="content details">
        <a class="button" href="#">{{detailsMsg}}</a>
-       {{caption}}
-</p>
+       <p>{{caption}}</p>
+       <p class="license"><a href="#">{{licenseLinkMsg}}</a></p>
+</div>

-- 
To view, visit https://gerrit.wikimedia.org/r/93908
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: merged
Gerrit-Change-Id: Iab2b857d009f25f077edb940d836ad84d576a9b8
Gerrit-PatchSet: 5
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: JGonera <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: jenkins-bot

_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to