JGonera has submitted this change and it was merged.
Change subject: Story 400: Deal with first time user upload
......................................................................
Story 400: Deal with first time user upload
Update photo success handler to show the upload count in case it has
been hidden and destroy the carousel
Change-Id: Idc891a2b420f1e9b715694519a710c7686e91657
---
M MobileFrontend.i18n.php
M MobileFrontend.php
M includes/MobileFrontend.hooks.php
M javascripts/specials/uploads.js
A javascripts/widgets/carousel.js
M less/mf-mixins.less
M less/mf-variables.less
M less/specials/uploads.less
A stylesheets/specials/images/uploads/Indicator_active.png
A stylesheets/specials/images/uploads/Indicator_default.png
A stylesheets/specials/images/uploads/SplashScreen1.png
A stylesheets/specials/images/uploads/SplashScreen2.png
A stylesheets/specials/images/uploads/SplashScreen3.png
A stylesheets/specials/images/uploads/Tour_1.png
A stylesheets/specials/images/uploads/Tour_2.png
A stylesheets/specials/images/uploads/Tour_3.png
A stylesheets/specials/images/uploads/chevron_left.png
A stylesheets/specials/images/uploads/chevron_right.png
M stylesheets/specials/uploads.css
A templates/specials/uploads/carousel.html
M tests/js/fixtures-templates.js
A tests/js/widgets/carousel.js
22 files changed, 309 insertions(+), 7 deletions(-)
Approvals:
JGonera: Verified; Looks good to me, approved
jenkins-bot: Checked
diff --git a/MobileFrontend.i18n.php b/MobileFrontend.i18n.php
index 95fd39d..4a254ce 100644
--- a/MobileFrontend.i18n.php
+++ b/MobileFrontend.i18n.php
@@ -181,6 +181,9 @@
'mobile-frontend-listed-image-no-description' => 'No description',
'mobile-frontend-donate-photo-upload-success' => 'Success! Your image
can now be used on {{SITENAME}}!',
'mobile-frontend-donate-photo-first-upload-success' => 'Success! Thanks
for your first contribution!',
+ 'mobile-frontend-first-upload-wizard-page-1' => '{{SITENAME}} needs
your photos to bring its pages to life!',
+ 'mobile-frontend-first-upload-wizard-page-2' => 'Please only donate
photos that you took yourself.',
+ 'mobile-frontend-first-upload-wizard-page-3' => 'Your donated photos
can be shared, reused, and remixed by millions.',
// watchlist
'mobile-frontend-watchlist-add' => 'Added $1 to your watchlist',
@@ -232,7 +235,7 @@
'mobile-frontend-photo-ownership' => 'I, $1, created this image.',
'mobile-frontend-photo-ownership-help' => 'What does this mean?',
'mobile-frontend-photo-ownership-confirm' => 'Got it!',
- 'mobile-frontend-photo-ownership-bullet-one' => 'We can only accept
images that you took yourself. Please do not upload images you found somewhere
else on the Internet.',
+ 'mobile-frontend-photo-ownership-bullet-one' => 'We can only accept
photos that you took yourself. Please do not upload images you found somewhere
else on the Internet.',
'mobile-frontend-photo-ownership-bullet-two' => 'Copyrighted and
inappropriate images will be removed.',
'mobile-frontend-photo-ownership-bullet-three' => 'Your uploads are
released under a free license and can be reused by anyone for free.',
'mobile-frontend-image-uploading-wait' => 'Uploading image, please
wait.',
@@ -534,6 +537,9 @@
'mobile-frontend-listed-image-no-description' => 'What to show when no
description available',
'mobile-frontend-donate-photo-upload-success' => 'On upload page -
notification shown after a successful upload',
'mobile-frontend-donate-photo-first-upload-success' => 'On upload page
- notification shown after a successful upload when it is the first upload by
that user',
+ 'mobile-frontend-first-upload-wizard-page-1' => 'Message shown to users
who have never uploaded a photo to commons. Explain why photos are important.',
+ 'mobile-frontend-first-upload-wizard-page-2' => 'Explains important of
the photos being owned by the person uploading them.',
+ 'mobile-frontend-first-upload-wizard-page-3' => 'Explains implications
of uploading a photo.',
'mobile-frontend-watchlist-add' => 'Notification message when you add
an article to your watchlist
*$1 - the title of the article',
'mobile-frontend-watchlist-removed' => 'Notification message when you
remove an article from your watchlist
diff --git a/MobileFrontend.php b/MobileFrontend.php
index d1f9b14..2567ac0 100644
--- a/MobileFrontend.php
+++ b/MobileFrontend.php
@@ -157,6 +157,15 @@
'targets' => 'mobile',
);
+/**
+ * A boilerplate for the MFResourceLoaderModule that supports templates
+ */
+$wgMFMobileResourceTemplateBoilerplate = array(
+ 'localBasePath' => $localBasePath,
+ 'localTemplateBasePath' => $localBasePath . '/templates',
+ 'class' => 'MFResourceLoaderModule',
+);
+
// Filepages
$wgResourceModules['mobile.file.styles'] = $wgMFMobileResourceBoilerplate +
array(
'dependencies' => array( 'mobile.startup' ),
@@ -573,7 +582,17 @@
),
'position' => 'top',
);
-$wgResourceModules['mobile.uploads.scripts'] =
$wgMFMobileSpecialPageResourceScriptBoilerplate + array(
+
+// Special:Uploads
+$wgResourceModules['mobile.uploads.plumbing'] =
$wgMFMobileResourceTemplateBoilerplate + array(
+ 'templates' => array(
+ 'specials/uploads/carousel',
+ ),
+);
+$wgResourceModules['mobile.uploads.scripts'] = $wgMFMobileResourceBoilerplate
+ array(
+ 'dependencies' => array(
+ 'mobile.uploads.plumbing',
+ ),
'messages' => array(
'mobile-frontend-photo-upload-generic',
'mobile-frontend-donate-photo-upload-success',
@@ -581,8 +600,12 @@
'mobile-frontend-donate-image-summary',
'mobile-frontend-listed-image-no-description',
'mobile-frontend-photo-upload-user-count',
+ 'mobile-frontend-first-upload-wizard-page-1',
+ 'mobile-frontend-first-upload-wizard-page-2',
+ 'mobile-frontend-first-upload-wizard-page-3',
),
'scripts' => array(
+ 'javascripts/widgets/carousel.js',
'javascripts/specials/uploads.js',
),
);
diff --git a/includes/MobileFrontend.hooks.php
b/includes/MobileFrontend.hooks.php
index aa86ff6..ce11dfa 100644
--- a/includes/MobileFrontend.hooks.php
+++ b/includes/MobileFrontend.hooks.php
@@ -226,6 +226,7 @@
'javascripts/modules/mf-last-modified.js',
'tests/js/test_mf-last-modified.js',
'javascripts/views/page.js',
'tests/js/views/page.js',
+ 'javascripts/widgets/carousel.js',
'tests/js/widgets/carousel.js',
'javascripts/specials/uploads.js',
'tests/js/specials/uploads.js',
),
'dependencies' => array( ),
diff --git a/javascripts/specials/uploads.js b/javascripts/specials/uploads.js
index 654f284..4bc6f72 100644
--- a/javascripts/specials/uploads.js
+++ b/javascripts/specials/uploads.js
@@ -3,6 +3,8 @@
photo = M.require( 'photo' ),
popup = M.require( 'notifications' ),
View = M.require( 'view' ),
+ Carousel = M.require( 'widgets/carousel' ),
+ carousel,
m;
m = ( function() {
@@ -132,9 +134,18 @@
}
if ( pages.length === 0 ) {
- $( '<p>' ).text( mw.msg(
'mobile-frontend-donate-image-summary' ) ).
- addClass( 'content' ).
- insertBefore( userGallery.$el );
+ $( '.ctaUploadPhoto h2' ).hide(); // hide the
count if 0 uploads have been made
+ carousel = new Carousel( {
+ pages: [
+ { text: mw.msg(
'mobile-frontend-first-upload-wizard-page-1' ), className: 'page-1', id: 1 },
+ { text: mw.msg(
'mobile-frontend-first-upload-wizard-page-2' ), className: 'page-2', id: 2 },
+ { text: mw.msg(
'mobile-frontend-first-upload-wizard-page-3' ), className: 'page-3', id: 3 }
+ ]
+ } );
+ carousel.insertBefore( '.ctaUploadPhoto' );
+ $( function() {
+ window.scrollTo( 0, $( '#mw-mf-header'
).offset().top );
+ } );
}
} );
}
@@ -159,13 +170,16 @@
} ).
appendTo( $container ).
on( 'success', function( image ) {
- var $counter = $container.find( 'h2
span' ), newCount;
+ var $counter = $container.find( 'h2'
).show().find( 'span' ), newCount;
image.width = IMAGE_WIDTH;
userGallery.addPhoto( image, true );
if ( $counter[ 0 ] ) {
newCount = parseInt(
$counter.text(), 10 ) + 1;
$counter.parent().html( mw.msg(
'mobile-frontend-photo-upload-user-count', newCount ) );
}
+ if ( carousel ) {
+ carousel.remove();
+ }
} );
}
if ( username ) {
diff --git a/javascripts/widgets/carousel.js b/javascripts/widgets/carousel.js
new file mode 100644
index 0000000..8d4eae5
--- /dev/null
+++ b/javascripts/widgets/carousel.js
@@ -0,0 +1,53 @@
+( function( M, $ ) {
+
+ var View = M.require( 'view' ), Carousel;
+
+ Carousel = View.extend( {
+ template: M.template.get( 'specials/uploads/carousel' ),
+ initialize: function() {
+ var self = this, $pages;
+ $pages = this.$( '.page' );
+ this.page = 0;
+ this.totalPages = $pages.length;
+ this.$( 'ul li' ).on( 'click', function() {
+ self.page = $( this ).index();
+ self.showCurrentPage();
+ } );
+ this.showCurrentPage();
+ this.$( 'button.prev' ).on( 'click', function() {
+ self.previous();
+ } );
+ this.$( 'button.next' ).on( 'click', function() {
+ self.next();
+ } );
+ },
+ showCurrentPage: function() {
+ this.$( '.page' ).hide();
+ this.$( '.page' ).eq( this.page ).show();
+ this.$( 'ul li' ).removeClass( 'active' ).
+ eq( this.page ).addClass( 'active' );
+ this.$( 'button' ).removeClass( 'active' );
+ if ( this.page > 0 ) {
+ this.$( 'button.prev' ).addClass( 'active' );
+ }
+ if ( this.page < this.totalPages - 1 ) {
+ this.$( 'button.next' ).addClass( 'active' );
+ }
+ },
+ next: function() {
+ if ( this.page < this.totalPages - 1 ) {
+ this.page += 1;
+ }
+ this.showCurrentPage();
+ },
+ previous: function() {
+ if ( this.page > 0 ) {
+ this.page -= 1;
+ }
+ this.showCurrentPage();
+ }
+ } ),
+
+ M.define( 'widgets/carousel', Carousel );
+
+}( mw.mobileFrontend, jQuery ) );
diff --git a/less/mf-mixins.less b/less/mf-mixins.less
index abf01b5..de824e2 100644
--- a/less/mf-mixins.less
+++ b/less/mf-mixins.less
@@ -1,5 +1,9 @@
@import "mf-variables.less";
+.background( @imageOrColor, @repeat: no-repeat, @position: center center ) {
+ background: @imageOrColor @position @repeat;
+}
+
.watchlist-heading() {
font: inherit;
margin: 0;
diff --git a/less/mf-variables.less b/less/mf-variables.less
index 0811856..b5e9cef 100644
--- a/less/mf-variables.less
+++ b/less/mf-variables.less
@@ -23,6 +23,7 @@
@ribbonopencolor:#4B7DCE;
@ribbon-color:#3366BA;
@fontFamily: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+@fontFamilyCarousel: Georgia, serif;
@baseFontSize: 1em;
@headingMarginTop: 14pt;
@headingMarginBottom: 9pt;
diff --git a/less/specials/uploads.less b/less/specials/uploads.less
index bb0e957..96a58cf 100644
--- a/less/specials/uploads.less
+++ b/less/specials/uploads.less
@@ -1,4 +1,85 @@
-@import "../mf-variables.less";
+@import "../mf-mixins.less";
+
+/* carousel css */
+.carousel {
+ @indicatorHeight: 10px;
+ @indicatorPadding: 4px;
+ @buttonPadding: 4px;
+
+ position: relative;
+ background-color: #E7E7E7;
+ box-shadow: 0px 3px 3px #AAA;
+
+ button {
+ padding: 0;
+ visibility: hidden;
+ border: none;
+ text-indent: -9999px;
+ overflow: hidden;
+ position: absolute;
+ top: 0;
+ width: @contentMarginLeft;
+ bottom: @indicatorHeight + @indicatorPadding;
+ .background( url(images/uploads/chevron_left.png) );
+ background-size: auto 20px;
+
+ &.prev {
+ left: @buttonPadding;
+ }
+
+ &.next {
+ right: @buttonPadding;
+ background-image: url(images/uploads/chevron_right.png);
+ }
+
+ &.active {
+ visibility: visible;
+ }
+ }
+
+ @imageSize: 80px;
+ .page {
+ padding: @imageSize + 32px @contentMarginRight + @buttonPadding
0 @contentMarginLeft + @buttonPadding;
+ text-align: center;
+ font-size: 1.2em;
+ line-height: 1.3;
+ font-family: @fontFamilyCarousel;
+ background-size: auto @imageSize;
+ background-repeat: no-repeat;
+ background-position: center 24px;
+ min-height: 70px;
+
+ &.page-1 {
+ background-image: url(images/uploads/SplashScreen1.png);
+ }
+
+ &.page-2 {
+ background-image: url(images/uploads/SplashScreen2.png);
+ }
+
+ &.page-3 {
+ background-image: url(images/uploads/SplashScreen3.png);
+ }
+ }
+
+ ul {
+ padding: @indicatorPadding 0 24px 0;
+ text-align: center;
+
+ li {
+ display: inline-block;
+ text-indent: -999px;
+ overflow: hidden;
+ width: 10px;
+ height: @indicatorHeight;
+ .background( url(images/uploads/Indicator_default.png)
);
+
+ &.active {
+ background-image:
url(images/uploads/Indicator_active.png);
+ }
+ }
+ }
+}
.ctaUploadPhoto {
padding: 8px;
diff --git a/stylesheets/specials/images/uploads/Indicator_active.png
b/stylesheets/specials/images/uploads/Indicator_active.png
new file mode 100644
index 0000000..e176109
--- /dev/null
+++ b/stylesheets/specials/images/uploads/Indicator_active.png
Binary files differ
diff --git a/stylesheets/specials/images/uploads/Indicator_default.png
b/stylesheets/specials/images/uploads/Indicator_default.png
new file mode 100644
index 0000000..6acb2f8
--- /dev/null
+++ b/stylesheets/specials/images/uploads/Indicator_default.png
Binary files differ
diff --git a/stylesheets/specials/images/uploads/SplashScreen1.png
b/stylesheets/specials/images/uploads/SplashScreen1.png
new file mode 100644
index 0000000..9ebbd65
--- /dev/null
+++ b/stylesheets/specials/images/uploads/SplashScreen1.png
Binary files differ
diff --git a/stylesheets/specials/images/uploads/SplashScreen2.png
b/stylesheets/specials/images/uploads/SplashScreen2.png
new file mode 100644
index 0000000..807b860
--- /dev/null
+++ b/stylesheets/specials/images/uploads/SplashScreen2.png
Binary files differ
diff --git a/stylesheets/specials/images/uploads/SplashScreen3.png
b/stylesheets/specials/images/uploads/SplashScreen3.png
new file mode 100644
index 0000000..d2d011d
--- /dev/null
+++ b/stylesheets/specials/images/uploads/SplashScreen3.png
Binary files differ
diff --git a/stylesheets/specials/images/uploads/Tour_1.png
b/stylesheets/specials/images/uploads/Tour_1.png
new file mode 100644
index 0000000..8114932
--- /dev/null
+++ b/stylesheets/specials/images/uploads/Tour_1.png
Binary files differ
diff --git a/stylesheets/specials/images/uploads/Tour_2.png
b/stylesheets/specials/images/uploads/Tour_2.png
new file mode 100644
index 0000000..e8c0c13
--- /dev/null
+++ b/stylesheets/specials/images/uploads/Tour_2.png
Binary files differ
diff --git a/stylesheets/specials/images/uploads/Tour_3.png
b/stylesheets/specials/images/uploads/Tour_3.png
new file mode 100644
index 0000000..4135192
--- /dev/null
+++ b/stylesheets/specials/images/uploads/Tour_3.png
Binary files differ
diff --git a/stylesheets/specials/images/uploads/chevron_left.png
b/stylesheets/specials/images/uploads/chevron_left.png
new file mode 100644
index 0000000..63b4e5a
--- /dev/null
+++ b/stylesheets/specials/images/uploads/chevron_left.png
Binary files differ
diff --git a/stylesheets/specials/images/uploads/chevron_right.png
b/stylesheets/specials/images/uploads/chevron_right.png
new file mode 100644
index 0000000..d61c225
--- /dev/null
+++ b/stylesheets/specials/images/uploads/chevron_right.png
Binary files differ
diff --git a/stylesheets/specials/uploads.css b/stylesheets/specials/uploads.css
index 67e009d..1892760 100644
--- a/stylesheets/specials/uploads.css
+++ b/stylesheets/specials/uploads.css
@@ -1,3 +1,67 @@
+/* carousel css */
+.carousel {
+ position: relative;
+ background-color: #E7E7E7;
+ box-shadow: 0px 3px 3px #AAA;
+}
+.carousel button {
+ padding: 0;
+ visibility: hidden;
+ border: none;
+ text-indent: -9999px;
+ overflow: hidden;
+ position: absolute;
+ top: 0;
+ width: 23px;
+ bottom: 14px;
+ background: url(images/uploads/chevron_left.png) center center no-repeat;
+ background-size: auto 20px;
+}
+.carousel button.prev {
+ left: 4px;
+}
+.carousel button.next {
+ right: 4px;
+ background-image: url(images/uploads/chevron_right.png);
+}
+.carousel button.active {
+ visibility: visible;
+}
+.carousel .page {
+ padding: 112px 27px 0 27px;
+ text-align: center;
+ font-size: 1.2em;
+ line-height: 1.3;
+ font-family: Georgia, serif;
+ background-size: auto 80px;
+ background-repeat: no-repeat;
+ background-position: center 24px;
+ min-height: 70px;
+}
+.carousel .page.page-1 {
+ background-image: url(images/uploads/SplashScreen1.png);
+}
+.carousel .page.page-2 {
+ background-image: url(images/uploads/SplashScreen2.png);
+}
+.carousel .page.page-3 {
+ background-image: url(images/uploads/SplashScreen3.png);
+}
+.carousel ul {
+ padding: 4px 0 24px 0;
+ text-align: center;
+}
+.carousel ul li {
+ display: inline-block;
+ text-indent: -999px;
+ overflow: hidden;
+ width: 10px;
+ height: 10px;
+ background: url(images/uploads/Indicator_default.png) center center
no-repeat;
+}
+.carousel ul li.active {
+ background-image: url(images/uploads/Indicator_active.png);
+}
.ctaUploadPhoto {
padding: 8px;
background-color: #F3F3F3;
diff --git a/templates/specials/uploads/carousel.html
b/templates/specials/uploads/carousel.html
new file mode 100644
index 0000000..a3cf517
--- /dev/null
+++ b/templates/specials/uploads/carousel.html
@@ -0,0 +1,14 @@
+<div class="carousel">
+ <button class='prev'></button>
+ {{#pages}}
+ <div class="page {{className}}">
+ {{text}}
+ </div>
+ {{/pages}}
+ <ul>
+ {{#pages}}
+ <li>{{id}}</li>
+ {{/pages}}
+ </ul>
+ <button class='next'></button>
+</div>
diff --git a/tests/js/fixtures-templates.js b/tests/js/fixtures-templates.js
index 5f30089..e886b0e 100644
--- a/tests/js/fixtures-templates.js
+++ b/tests/js/fixtures-templates.js
@@ -4,3 +4,5 @@
mw.mobileFrontend.template.add( 'ctaDrawer', '' );
mw.mobileFrontend.template.add( 'overlay', '{{{heading}}}/{{{content}}}' );
mw.mobileFrontend.template.add( 'overlays/photoCopyrightDialog', '' );
+mw.mobileFrontend.template.add( 'specials/uploads/carousel',
+ '<div class="carousel"><div class="page" /><div class="page" /><div
class="page" /></div>' );
diff --git a/tests/js/widgets/carousel.js b/tests/js/widgets/carousel.js
new file mode 100644
index 0000000..c812382
--- /dev/null
+++ b/tests/js/widgets/carousel.js
@@ -0,0 +1,39 @@
+( function( M ) {
+
+ var Carousel = M.require( 'widgets/carousel' );
+
+ module( 'MobileFrontend Carousel' );
+
+ test( '#next', function() {
+ var c = new Carousel();
+ strictEqual( c.totalPages, 3, 'There are 3 pages in the
carousel' );
+ strictEqual( c.page, 0, 'Initialises to page 0' );
+ c.next();
+ strictEqual( c.page, 1, 'Now page 1' );
+ c.next();
+ strictEqual( c.page, 2, 'Now page 2' );
+ c.next();
+ strictEqual( c.page, 2, 'Still page 2 (no more pages)' );
+ } );
+
+ test( '#prev', function() {
+ var c = new Carousel();
+ strictEqual( c.page, 0, 'Initialises to page 0' );
+ c.previous();
+ strictEqual( c.page, 0, 'No previous page' );
+ c.next();
+ strictEqual( c.page, 1, 'Now page 1' );
+ c.previous();
+ strictEqual( c.page, 0, 'Back on page 0' );
+ } );
+
+ test( '#showCurrentPage', function() {
+ var c = new Carousel();
+ strictEqual( c.page, 0, 'Initialises to page 0' );
+ c.next();
+ c.showCurrentPage();
+ strictEqual( c.$( '.page' ).eq( 0 ).css( 'display' ), 'none',
'First page is hidden' );
+ strictEqual( c.$( '.page' ).eq( 1 ).css( 'display' ), 'block',
'Second page is visible' );
+ } );
+
+}( mw.mobileFrontend, jQuery ) );
--
To view, visit https://gerrit.wikimedia.org/r/55159
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Idc891a2b420f1e9b715694519a710c7686e91657
Gerrit-PatchSet: 6
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: JGonera <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Maryana <[email protected]>
Gerrit-Reviewer: Siebrand <[email protected]>
Gerrit-Reviewer: awjrichards <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
