Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/55159
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/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
21 files changed, 300 insertions(+), 6 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/59/55159/1
diff --git a/MobileFrontend.i18n.php b/MobileFrontend.i18n.php
index 2ab9c64..5dc65cf 100644
--- a/MobileFrontend.i18n.php
+++ b/MobileFrontend.i18n.php
@@ -179,6 +179,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',
diff --git a/MobileFrontend.php b/MobileFrontend.php
index 8108f3a..a5d9a2f 100644
--- a/MobileFrontend.php
+++ b/MobileFrontend.php
@@ -151,6 +151,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' ),
@@ -494,7 +503,17 @@
'javascripts/specials/userlogin.js',
),
);
-$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',
@@ -502,8 +521,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 8a899e8..c33c9b1 100644
--- a/includes/MobileFrontend.hooks.php
+++ b/includes/MobileFrontend.hooks.php
@@ -213,6 +213,7 @@
'javascripts/modules/mf-watchstar.js',
'tests/js/test_mf-watchstar.js',
'javascripts/modules/mf-last-modified.js',
'tests/js/test_mf-last-modified.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..fd8d337 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,19 @@
}
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( {
+ el: $( '<div
class="upload-first-time-user">' ).
+ insertBefore( '.ctaUploadPhoto'
)[ 0 ],
+ pages: [
+ { text: mw.msg(
'mobile-frontend-first-upload-wizard-page-1' ), className: 'page-1' },
+ { text: mw.msg(
'mobile-frontend-first-upload-wizard-page-2' ), className: 'page-2' },
+ { text: mw.msg(
'mobile-frontend-first-upload-wizard-page-3' ), className: 'page-3' }
+ ]
+ } );
+ $( function() {
+ window.scrollTo( 0, $( '#mw-mf-header'
).offset().top );
+ } );
}
} );
}
@@ -159,13 +171,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..ca944f8
--- /dev/null
+++ b/javascripts/widgets/carousel.js
@@ -0,0 +1,54 @@
+( function( M, $ ) {
+
+ var View = M.require( 'view' ), Carousel;
+
+ Carousel = View.extend( {
+ page: 0,
+ totalPages: 0,
+ template: M.template.get( 'specials/uploads/carousel' ),
+ initialize: function() {
+ var self = this, $pages;
+ $pages = this.$( '.page' );
+ 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 7956f0e..9ec0c14 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/specials/uploads.less b/less/specials/uploads.less
index bb0e957..c81b6cd 100644
--- a/less/specials/uploads.less
+++ b/less/specials/uploads.less
@@ -1,4 +1,82 @@
-@import "../mf-variables.less";
+@import "../mf-mixins.less";
+
+/* carousel css */
+.carousel {
+ @indicatorHeight: 10px;
+ @indicatorPadding: 4px;
+ @buttonPadding: 4px;
+
+ position: relative;
+ 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
24px @contentMarginLeft + @buttonPadding;
+ background-color: #E7E7E7;
+ text-align: center;
+ box-shadow: 0px 3px 3px #AAA;
+ font-size: 1.2em;
+ line-height: 1.3;
+ font-family: Georgia;
+ 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 @indicatorPadding 0;
+ text-align: center;
+
+ li {
+ display: inline-block;
+ 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..15b2187 100644
--- a/stylesheets/specials/uploads.css
+++ b/stylesheets/specials/uploads.css
@@ -1,3 +1,64 @@
+/* carousel css */
+.carousel {
+ position: relative;
+}
+.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 24px 27px;
+ background-color: #E7E7E7;
+ text-align: center;
+ box-shadow: 0px 3px 3px #AAA;
+ font-size: 1.2em;
+ line-height: 1.3;
+ font-family: Georgia;
+ background-size: auto 80px;
+ background-repeat: no-repeat;
+ background-position: center 24px;
+}
+.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 4px 0;
+ text-align: center;
+}
+.carousel ul li {
+ display: inline-block;
+ 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..273e266
--- /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></li>
+ {{/pages}}
+ </ul>
+ <button class='next'></button>
+</div>
diff --git a/tests/js/fixtures-templates.js b/tests/js/fixtures-templates.js
index f49f256..bee9673 100644
--- a/tests/js/fixtures-templates.js
+++ b/tests/js/fixtures-templates.js
@@ -2,3 +2,5 @@
mw.mobileFrontend.template.add( 'leadPhoto', '' );
mw.mobileFrontend.template.add( 'photoUploader', '' );
mw.mobileFrontend.template.add( 'ctaDrawer', '' );
+mw.mobileFrontend.template.add( 'specials/uploads/carousel',
+ '<div class="carousel"><div class="page" /><div class="page" /><div
class="page" /></div>' );
\ No newline at end of file
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: newchange
Gerrit-Change-Id: Idc891a2b420f1e9b715694519a710c7686e91657
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
