jenkins-bot has submitted this change and it was merged.
Change subject: Show similar experience for both WikiGrok versions A and B.
......................................................................
Show similar experience for both WikiGrok versions A and B.
* Both versions have the same first (welcome) and last (thanks) steps
* Make 'no-thanks' not a permanent opt-out
* Show 'tell me more' button in the last step
Change-Id: Id86375a7e9a7aba1ec3db2a37d61c76413a88b63
---
M javascripts/modules/wikigrok/WikiGrokDialog.js
M javascripts/modules/wikigrok/WikiGrokDialogB.js
M javascripts/modules/wikigrok/wikigrok.js
M less/modules/wikigrok/WikiGrokDialog.less
M templates/modules/wikigrok/WikiGrokDialog.hogan
M templates/modules/wikigrok/WikiGrokDialogB.hogan
6 files changed, 123 insertions(+), 71 deletions(-)
Approvals:
Jdlrobson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/javascripts/modules/wikigrok/WikiGrokDialog.js
b/javascripts/modules/wikigrok/WikiGrokDialog.js
index e209ecb..97284e0 100644
--- a/javascripts/modules/wikigrok/WikiGrokDialog.js
+++ b/javascripts/modules/wikigrok/WikiGrokDialog.js
@@ -187,16 +187,10 @@
options.thankUser = true;
if ( claimRecorded ) {
options.contentMsg = 'You just made Wikipedia a
little better, thanks!';
- options.buttons = [
- { classes: 'quit inline mw-ui-button
mw-ui-progressive', label: 'Great!' }
- ];
} else {
options.contentMsg = 'That\'s OK, thanks for
taking the time.';
- options.buttons = [
- { classes: 'quit inline mw-ui-button
mw-ui-progressive', label: 'Done' }
- ];
}
- options.noticeMsg = '<a class="wg-notice-link"
href="#/wikigrok/about">Tell me more</a>';
+ options.noticeMsg = '';
// Re-render with new content for 'Thanks' step
this.render( options );
this.log( 'widget-impression-success' );
@@ -282,17 +276,24 @@
this.log( 'page-impression' );
}
},
-
+ /**
+ * @inheritdoc
+ */
postRender: function ( options ) {
var self = this;
+
+ self.$( '.wg-link' ).hide();
// If you're wondering where the DOM insertion happens,
look in wikigrokeval.js.
// Initialize all the buttons and links
// ...for final 'Thanks' step
if ( options.thankUser ) {
- this.$( '.wg-buttons .quit' ).on( 'click',
function () {
+ self.$('.wg-buttons' ).hide();
+ self.$('.wg-link' ).show();
+ this.$( '.wg-link .tell-more' ).on( 'click',
function () {
self.hide();
+ self.log( 'widget-click-moreinfo' );
} );
// ...for intermediate 'Question' step
} else if ( options.beginQuestions ) {
@@ -315,7 +316,6 @@
this.$( '.wg-buttons .cancel' ).on( 'click',
function () {
self.hide();
self.log( 'widget-click-nothanks' );
- M.settings.saveUserSetting(
'mfHideWikiGrok', 'true' );
} );
this.$( '.wg-buttons .proceed' ).on( 'click',
function () {
self.log( 'widget-click-accept' );
@@ -335,6 +335,7 @@
this.reveal( options );
},
+
reveal: function ( options ) {
var self = this;
diff --git a/javascripts/modules/wikigrok/WikiGrokDialogB.js
b/javascripts/modules/wikigrok/WikiGrokDialogB.js
index 8630eab..ac4465e 100644
--- a/javascripts/modules/wikigrok/WikiGrokDialogB.js
+++ b/javascripts/modules/wikigrok/WikiGrokDialogB.js
@@ -15,10 +15,9 @@
WikiGrokDialogB = WikiGrokDialog.extend( {
version: 'b',
template: M.template.get(
'modules/wikigrok/WikiGrokDialogB.hogan' ),
- initialize: function ( options ) {
+ initialize: function () {
var self = this;
- options.contentMsg = 'Which of these tags best describe
' + options.title + '?';
WikiGrokDialog.prototype.initialize.apply( this,
arguments );
// log page impression and widget impression when the
widget is shown
@@ -67,6 +66,7 @@
// Now work out the labels if we have some suggestions
if ( suggestionsList.length ) {
self.apiWikiData.getLabels( suggestionsList
).done( function ( labels ) {
+ self.$( '.wg-buttons' ).html('');
$.each( labels, function ( itemId,
label ) {
var btnLabel, $tag,
prop =
lookupProp[itemId],
@@ -77,7 +77,7 @@
$( this
).toggleClass( 'mw-ui-progressive' );
// Update save
button
setTimeout(
function () {
-
self.$save.prop( 'disabled', self.$( '.initial-pane .mw-ui-progressive'
).length === 0 );
+
self.$save.prop( 'disabled', self.$( '.wg-buttons .mw-ui-progressive' ).length
=== 0 );
}, 100 );
} ).appendTo( self.$(
'.wg-buttons' ) );
@@ -109,23 +109,26 @@
} );
}
},
- postRender: function () {
+ /**
+ * Fetch suggestions from the server and show them to the user.
+ * Also record claims when the user hits the save button.
+ * @method
+ * @param {Object} options
+ */
+ askWikidataQuestion: function ( options ) {
var self = this;
- this.$save = this.$( '.mw-ui-constructive' );
- // hide the completion screen
- self.$( '.final-pane' ).hide();
- this.hide();
- self.apiWikiData.getClaims().done( function ( claims ) {
- if ( claims.isHuman ) {
- self.apiWikiGrok.getSuggestions().done(
function ( suggestions ) {
- self._renderSuggestions(
suggestions );
- } );
- }
- } );
+ self.$( '.wg-notice' ).hide();
+ self.$( '.wg-buttons' ).html( '<div class="spinner
loading"></div>' );
+ self.$( 'wg-content' ).text( 'Which of these tags best
describe ' + options.title + '?' );
+ self.$( '.footer' ).show();
+
+ self._renderSuggestions( options.suggestions );
+
+ this.$save = this.$( '.mw-ui-constructive' );
this.$save.on( 'click', function () {
var answers = [];
- self.$( '.initial-pane .mw-ui-progressive'
).hide().each( function () {
+ self.$( '.wg-buttons .mw-ui-progressive'
).each( function () {
answers.push( {
correct: true,
prop: $( this ).data(
'propName' ),
@@ -134,12 +137,12 @@
valueid: $( this ).data(
'itemId' )
} );
} );
- $( this ).hide();
+
self.$( '.spinner' ).show();
self.apiWikiGrok.recordClaims( answers ).done(
function () {
- self.$( '.spinner' ).hide();
- self.$( '.initial-pane' ).hide();
- self.$( '.final-pane' ).show();
+ self.$( '.wg-buttons, .footer' ).hide();
+ self.$( '.wg-content' ).text( 'You just
made Wikipedia a little better, thanks!' );
+ self.$( '.wg-link' ).show();
self.log( 'widget-click-submit' );
} );
} );
@@ -147,6 +150,52 @@
// hide this Dialog when the user reads more about
Wikigrok
this.$( '.tell-more' ).on( 'click', function () {
self.hide();
+ self.log( 'widget-click-moreinfo' );
+ } );
+ },
+ /**
+ * @inheritdoc
+ */
+ postRender: function ( options ) {
+ var self = this;
+
+ // hide the completion screen and the spinner
+ self.$( '.wg-link, .footer, .spinner' ).hide();
+
+ // show the welcome screen once
+ if ( !options.beginQuestions ) {
+ options.beginQuestions = true;
+ this.$( '.wg-buttons .cancel' ).on( 'click',
function () {
+ self.hide();
+ self.log( 'widget-click-nothanks' );
+ } );
+ this.$( '.wg-buttons .proceed' ).on( 'click',
function () {
+ self.log( 'widget-click-accept' );
+ // Proceed with asking the user a
metadata question.
+ self.askWikidataQuestion( options );
+ } );
+ // Log more info clicks
+ this.$( '.wg-notice-link' ).on( 'click',
function () {
+ self.log( 'widget-click-moreinfo' );
+ } );
+
+ this.reveal( options );
+ }
+ },
+
+ reveal: function ( options ) {
+ var self = this;
+
+ options.suggestions = {};
+ self.apiWikiData.getClaims().done( function ( claims ) {
+ if ( claims.isHuman ) {
+ self.apiWikiGrok.getSuggestions().done(
function ( suggestions ) {
+ if ( !$.isEmptyObject(
suggestions ) ) {
+ options.suggestions =
suggestions;
+ self.show();
+ }
+ } );
+ }
} );
}
} );
diff --git a/javascripts/modules/wikigrok/wikigrok.js
b/javascripts/modules/wikigrok/wikigrok.js
index e2d2694..f3f3be1 100644
--- a/javascripts/modules/wikigrok/wikigrok.js
+++ b/javascripts/modules/wikigrok/wikigrok.js
@@ -128,9 +128,7 @@
}
}
- if ( !M.settings.getUserSetting( 'mfHideWikiGrok' ) ) {
- init();
- }
+ init();
} );
// Make OverlayManager handle '#/wikigrok/about' links.
diff --git a/less/modules/wikigrok/WikiGrokDialog.less
b/less/modules/wikigrok/WikiGrokDialog.less
index b11a91b..6d834f0 100644
--- a/less/modules/wikigrok/WikiGrokDialog.less
+++ b/less/modules/wikigrok/WikiGrokDialog.less
@@ -39,14 +39,18 @@
text-align: left;
}
- .final-pane {
- @imageSize: 6em;
- padding-bottom: @imageSize;
- margin-bottom: @bottomMargin;
- background-repeat: no-repeat;
- .background-size( auto, @imageSize );
- background-position: center bottom;
- .background-image-svg-quick('images/heart');
+ .wg-link {
+ @imageSize: 6em;
+ padding-top: @imageSize;
+ margin-bottom: @bottomMargin;
+ background-repeat: no-repeat;
+ .background-size( auto, @imageSize );
+ background-position: center top;
+ .background-image-svg-quick('images/heart');
+
+ a {
+ margin-top: 1em;
+ }
}
.wg-buttons {
@@ -69,27 +73,18 @@
.footer {
position: relative;
text-align: left;
- background: @colorGray13;
+ padding: .6em 0;
- &.initial-pane {
- padding: .6em 1em;
-
- .spinner,
- .mw-ui-button {
- top: 0;
- right: 0;
- position: absolute;
- bottom: 0;
- }
- }
-
- &.final-pane {
- padding: 0;
+ .spinner,
+ .mw-ui-button {
+ top: 0;
+ right: 0;
+ position: absolute;
+ bottom: 0;
}
.license {
margin-right: 4.2em;
- font-size: .8em;
}
.spinner {
diff --git a/templates/modules/wikigrok/WikiGrokDialog.hogan
b/templates/modules/wikigrok/WikiGrokDialog.hogan
index fbc1544..331078a 100644
--- a/templates/modules/wikigrok/WikiGrokDialog.hogan
+++ b/templates/modules/wikigrok/WikiGrokDialog.hogan
@@ -1,9 +1,12 @@
<div class="pane content">
<p class="wg-header">{{headerMsg}}</p>
<p class="wg-content">{{contentMsg}}</p>
+ <p class="wg-link">
+ <a href="#/wikigrok/about" class="mw-ui-button
mw-ui-progressive mw-ui-block tell-more">Tell me more</a>
+ </p>
<p class="wg-buttons">
{{#buttons}}
- <button class="{{classes}}">{{label}}</button>
+ <button class="{{classes}}">{{label}}</button>
{{/buttons}}
</p>
{{#noticeMsg}}
diff --git a/templates/modules/wikigrok/WikiGrokDialogB.hogan
b/templates/modules/wikigrok/WikiGrokDialogB.hogan
index 762c764..2925af4 100644
--- a/templates/modules/wikigrok/WikiGrokDialogB.hogan
+++ b/templates/modules/wikigrok/WikiGrokDialogB.hogan
@@ -1,16 +1,22 @@
<!-- note English language only! -->
-<div class="initial-pane content">
+<div class="pane content">
+ <p class="wg-header">{{headerMsg}}</p>
<p class="wg-content">{{contentMsg}}</p>
- <p class="wg-buttons ui-tag-button-group"></p>
-</div>
-<div class="initial-pane footer">
- <span class="license">All submissions are <a
href="#/wikigrok/about">released freely</a>.</span>
- <button class="mw-ui-button mw-ui-constructive" disabled>Next</button>
- <div class="spinner loading"></div>
-</div>
-<div class="final-pane content">
- <p class="wg-content">You just made Wikipedia a little better,
thanks!</p>
-</div>
-<div class="final-pane footer">
- <a href="#/wikigrok/about" class="mw-ui-button mw-ui-progressive
mw-ui-block tell-more">Tell me more</a>
+ <p class="wg-link">
+ <a href="#/wikigrok/about" class="mw-ui-button
mw-ui-progressive mw-ui-block tell-more">Tell me more</a>
+ </p>
+ <p class="wg-buttons">
+ {{#buttons}}
+ <button class="{{classes}}">{{label}}</button>
+ {{/buttons}}
+ </p>
+ {{#noticeMsg}}
+ <p class="wg-notice">{{{noticeMsg}}}</p>
+ {{/noticeMsg}}
+
+ <div class="footer">
+ <span class="license">All submissions are <a
href="#/wikigrok/about">released freely</a>.</span>
+ <button class="mw-ui-button mw-ui-constructive save"
disabled>Next</button>
+ <div class="spinner loading"></div>
+ </div>
</div>
--
To view, visit https://gerrit.wikimedia.org/r/169544
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Id86375a7e9a7aba1ec3db2a37d61c76413a88b63
Gerrit-PatchSet: 8
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Bmansurov <bmansu...@wikimedia.org>
Gerrit-Reviewer: Awjrichards <aricha...@wikimedia.org>
Gerrit-Reviewer: Bmansurov <bmansu...@wikimedia.org>
Gerrit-Reviewer: Jdlrobson <jrob...@wikimedia.org>
Gerrit-Reviewer: Jhernandez <jhernan...@wikimedia.org>
Gerrit-Reviewer: Kaldari <rkald...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
