JGonera has submitted this change and it was merged.
Change subject: Alpha: Allow users to start conversations on talk page
......................................................................
Alpha: Allow users to start conversations on talk page
WIN
Introduces:
* common .error class styling
* Moves preRender and initialize into the render function
Change-Id: I4aa6b827e3ee0660dfc0c3b0b8c61dcfe457b12f
---
M MobileFrontend.i18n.php
M MobileFrontend.php
M javascripts/common/mf-view.js
M javascripts/modules/talk.js
M javascripts/views/page.js
M less/common/mf-navigation.less
M stylesheets/common/mf-navigation.css
M templates/overlays/talk.html
A templates/overlays/talkSectionAdd.html
9 files changed, 194 insertions(+), 35 deletions(-)
Approvals:
JGonera: Verified; Looks good to me, approved
jenkins-bot: Checked
diff --git a/MobileFrontend.i18n.php b/MobileFrontend.i18n.php
index 6ef12bf..2302f61 100644
--- a/MobileFrontend.i18n.php
+++ b/MobileFrontend.i18n.php
@@ -235,6 +235,10 @@
'mobile-frontend-talk-explained-empty' => 'There are no conversations
about this page.',
'mobile-frontend-talk-overlay-header' => 'Talk',
'mobile-frontend-talk-overlay-lead-header' => 'Unnamed discussion',
+ 'mobile-frontend-talk-add-overlay-submit' => 'Add discussion',
+ 'mobile-frontend-talk-add-overlay-subject-placeholder' => 'Topic
subject',
+ 'mobile-frontend-talk-add-overlay-content-placeholder' => 'What is on
your mind?',
+ 'mobile-frontend-talk-edit-summary' => 'New talk section: $1',
);
/** Message documentation (Message documentation)
@@ -593,6 +597,10 @@
'mobile-frontend-talk-overlay-header' => 'Heading for talk overlay.
{{Identical|Talk}}',
'mobile-frontend-talk-overlay-lead-header' => 'Heading for a discussion
which has no heading (lead section of talk page)',
+ 'mobile-frontend-talk-add-overlay-submit' => 'Label for button which
submits a new talk page topic',
+ 'mobile-frontend-talk-add-overlay-subject-placeholder' => 'Placeholder
text to prompt user to add a talk page topic subject',
+ 'mobile-frontend-talk-add-overlay-content-placeholder' => 'Placeholder
text to prompt user to add content to talk page content',
+ 'mobile-frontend-talk-edit-summary' => 'Edit summary when creating a
new talk section ($1 is name of section)',
);
/** Achinese (Acèh)
diff --git a/MobileFrontend.php b/MobileFrontend.php
index 78e2b6e..2cffe2e 100644
--- a/MobileFrontend.php
+++ b/MobileFrontend.php
@@ -356,6 +356,7 @@
'localTemplateBasePath' => $localBasePath . '/templates',
'templates' => array(
'overlays/talk',
+ 'overlays/talkSectionAdd',
'talkSection',
),
'class' => 'MFResourceLoaderModule',
@@ -384,6 +385,10 @@
'mobile-frontend-talk-explained-empty',
'mobile-frontend-talk-overlay-lead-header',
'mobile-frontend-talk-overlay-header',
+ 'mobile-frontend-talk-add-overlay-subject-placeholder',
+ 'mobile-frontend-talk-add-overlay-content-placeholder',
+ 'mobile-frontend-talk-edit-summary',
+ 'mobile-frontend-talk-add-overlay-submit',
),
'styles' => array(
'stylesheets/modules/mf-random.css',
diff --git a/javascripts/common/mf-view.js b/javascripts/common/mf-view.js
index 45ee291..4c23598 100644
--- a/javascripts/common/mf-view.js
+++ b/javascripts/common/mf-view.js
@@ -64,9 +64,8 @@
this.template = M.template.compile( this.template );
}
- this.preRender( options );
+ this.options = options;
this.render( options );
- this.initialize( options );
}
View.prototype = new EventEmitter();
@@ -93,9 +92,12 @@
* @param {Object} data Template data.
*/
View.prototype.render = function( data ) {
+ data = data || this.options;
+ this.preRender( data );
if ( this.template ) {
this.$el.html( this.template.render( data ) );
}
+ this.initialize( data );
};
/**
diff --git a/javascripts/modules/talk.js b/javascripts/modules/talk.js
index 55514c7..fcdae49 100644
--- a/javascripts/modules/talk.js
+++ b/javascripts/modules/talk.js
@@ -1,15 +1,103 @@
( function( M, $ ) {
var nav = M.require( 'navigation' ),
+ api = M.require( 'api' ),
+ leadHeading = mw.msg(
'mobile-frontend-talk-overlay-lead-header' ),
+ TalkSectionAddOverlay = nav.Overlay.extend( {
+ defaults: {
+ topicAdd: mw.msg(
'mobile-frontend-talk-add-overlay-submit' ),
+ topicTitlePlaceHolder: mw.msg(
'mobile-frontend-talk-add-overlay-subject-placeholder' ),
+ topicContentPlaceHolder: mw.msg(
'mobile-frontend-talk-add-overlay-content-placeholder' )
+ },
+ template: M.template.get( 'overlays/talkSectionAdd' ),
+ initialize: function( options ) {
+ var self = this;
+ this._super( options );
+ this.talkOverlay = options.parent;
+ this.title = 'Talk:' + mw.config.get( 'wgTitle'
);
+ this.$( 'button.save' ).click( function() {
+ self.save();
+ } );
+ },
+ save: function() {
+ var $subject = this.$( 'input' ),
+ $ta = this.$( 'textarea' ),
+ heading = $subject.val(),
+ self = this,
+ text = $ta.val();
+ $ta.removeClass( 'error' );
+ $subject.removeClass( 'error' );
+ if ( text && heading ) {
+ this.$( '.content' ).empty().addClass(
'loading' );
+ api.getToken().done( function( token ) {
+ api.post( {
+ action: 'edit',
+ section: 'new',
+ sectiontitle: heading,
+ title: self.title,
+ token: token,
+ summary: mw.msg(
'mobile-frontend-talk-edit-summary', heading ),
+ text: text + ' ~~~~'
+ } ).done( function() {
+ self.hide();
+
self.talkOverlay.appendSection( { heading: heading, content: text } ); //
FIXME: doesn't add signature and doesn't wikify
+ } );
+ } );
+ } else {
+ if ( !text ) {
+ $ta.addClass( 'error' );
+ }
+ if ( !heading ) {
+ $subject.addClass( 'error' );
+ }
+ }
+ }
+ } ),
TalkOverlay = nav.Overlay.extend( {
- template: M.template.get( 'overlays/talk' )
+ template: M.template.get( 'overlays/talk' ),
+ appendSection: function( heading, text ) {
+ var $newTopic;
+ this.options.page.appendSection( heading, text
);
+ this.render( this.options );
+ $newTopic = this.$( 'li' ).last();
+ window.scrollTo( 0, $newTopic.offset().top );
+ // FIXME: add fade in animation
+ },
+ initialize: function( options ) {
+ var self = this,
+ page = options.page;
+
+ this._super( options );
+ this.$( 'button.add' ).click( function() {
+ var overlay = new
TalkSectionAddOverlay( {
+ parent: self
+ } );
+ overlay.show();
+ } );
+
+ this.$( 'a' ).on( 'click', function() {
+ var id = parseFloat( $( this ).data(
'id' ), 10 ),
+ leadSection = {
+ content: page.lead,
+ heading: leadHeading
+ },
+ section = id === 0 ?
leadSection : page.getSubSection( id ),
+ childOverlay = new nav.Overlay(
{
+ content:
M.template.get( 'talkSection' ).render( section ),
+ parent: self
+ } );
+ childOverlay.show();
+ } );
+ if ( !$.trim( page.lead ) ) {
+ this.$( '.lead-discussion' ).remove();
+ }
+ }
} ),
talkPage = mw.config.get( 'wgFormattedNamespaces'
)[mw.config.get( 'wgNamespaceNumber' ) + 1] +
':' + mw.config.get( 'wgTitle' ),
Page = M.require( 'page'),
$talk = $( '#talk' ),
- req,
- api = M.require( 'api' );
+ req;
$talk.on( 'click', function( ev ) {
// FIXME: this currently gives an indication something async is
happening. We can do better.
@@ -24,7 +112,6 @@
} );
req.done( function( resp ) {
var topOverlay, sections, page,
- leadHeading = mw.msg(
'mobile-frontend-talk-overlay-lead-header' ),
explanation;
if ( resp.error ) {
@@ -42,25 +129,10 @@
heading: mw.msg(
'mobile-frontend-talk-overlay-header' ),
leadHeading: leadHeading,
explanation: explanation,
+ page: page,
sections: sections
} );
topOverlay.show();
- if ( !page.lead ) {
- topOverlay.$( '.lead-discussion' ).remove();
- }
- topOverlay.$( 'a' ).on( 'click', function() {
- var id = parseInt( $( this ).data( 'id' ), 10 ),
- leadSection = {
- content: page.lead,
- heading: leadHeading
- },
- section = id === 0 ? leadSection :
page.getSubSection( id ),
- childOverlay = new nav.Overlay( {
- content: M.template.get(
'talkSection' ).render( section ),
- parent: topOverlay
- } );
- childOverlay.show();
- } );
} ).error( function() {
$talk.css( 'opacity', '' );
} );
diff --git a/javascripts/views/page.js b/javascripts/views/page.js
index e206694..fe85273 100644
--- a/javascripts/views/page.js
+++ b/javascripts/views/page.js
@@ -26,8 +26,9 @@
initialize: function( options ) {
var s, i, level, text,
$tmpContainer = $( '<div>' ),
- html, section,
+ html,
sectionNum = 0,
+ lastId = 0,
secs = options.sections,
sectionData = {};
@@ -41,6 +42,7 @@
}
if ( level === '2' ) {
+ lastId = s.id;
sectionNum = sectionNum + 1;
sectionData[ sectionNum ] = { content:
text,
id: s.id, heading: s.line };
@@ -63,11 +65,20 @@
this._sectionLookup = {};
for ( s in sectionData ) {
if ( sectionData.hasOwnProperty( s ) ) {
- section = new Section( sectionData[ s ]
);
- this.sections.push( section );
- this._sectionLookup[ section.id ] =
section; // allow easy lookup of section
+ this.appendSection( sectionData[ s ] );
}
}
+ this._lastSectionId = lastId;
+ },
+ appendSection: function( data ) {
+ var section;
+ if ( !data.id ) {
+ data.id = ++this._lastSectionId;
+ }
+ section = new Section( data );
+ this.sections.push( section );
+ this._sectionLookup[ section.id ] = section; // allow
easy lookup of section
+ return section;
},
getSubSection: function( id ) {
return this._sectionLookup[ id ];
diff --git a/less/common/mf-navigation.less b/less/common/mf-navigation.less
index 79a27db..23afeaf 100644
--- a/less/common/mf-navigation.less
+++ b/less/common/mf-navigation.less
@@ -139,6 +139,11 @@
div.content {
padding-bottom: 20px;
+
+ textarea {
+ display: block;
+ width: 100%;
+ }
}
.content {
@@ -183,6 +188,12 @@
}
}
+.search.error,
+.error {
+ border: solid @overlayBorderWidth @overlayAlertErrorBorderColor;
+ background-color: @overlayAlertErrorBackgroundColor;
+}
+
.alert {
padding: @overlayAlertPadding;
background-repeat: no-repeat;
@@ -201,11 +212,6 @@
background-image: url(images/success.png);
}
- &.error {
- border: solid @overlayBorderWidth @overlayAlertErrorBorderColor;
- background-color: @overlayAlertErrorBackgroundColor;
- }
-
h2 {
font-family: @fontFamily;
font-size: 100%;
@@ -220,6 +226,27 @@
}
}
+#mw-mf-page-center .header,
+.overlay .header {
+
+ input.search {
+ margin-top: 0;
+ }
+
+ button.add {
+ position: absolute;
+ right: 0;
+ top: 0;
+ }
+
+ h2 {
+ margin: 0;
+ padding: 0;
+ line-height: @headerHeight;
+ font-family: @fontFamily;
+ }
+}
+
.overlay ul {
text-align: left;
left: 0;
diff --git a/stylesheets/common/mf-navigation.css
b/stylesheets/common/mf-navigation.css
index 6c92997..cde3406 100644
--- a/stylesheets/common/mf-navigation.css
+++ b/stylesheets/common/mf-navigation.css
@@ -141,6 +141,10 @@
.mw-mf-overlay div.content {
padding-bottom: 20px;
}
+.mw-mf-overlay div.content textarea {
+ display: block;
+ width: 100%;
+}
.mw-mf-overlay .content {
margin-top: 14pt;
}
@@ -173,6 +177,11 @@
display: inline;
color: #002BB8;
}
+.search.error,
+.error {
+ border: solid 1px #dd0000;
+ background-color: #fae1e1;
+}
.alert {
padding: 0.5em 1em;
background-repeat: no-repeat;
@@ -189,10 +198,6 @@
border: solid 1px #008000;
background-image: url(images/success.png);
}
-.alert.error {
- border: solid 1px #dd0000;
- background-color: #fae1e1;
-}
.alert h2 {
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: 100%;
@@ -202,6 +207,23 @@
#content .alert {
margin: 0;
}
+#mw-mf-page-center .header input.search,
+.overlay .header input.search {
+ margin-top: 0;
+}
+#mw-mf-page-center .header button.add,
+.overlay .header button.add {
+ position: absolute;
+ right: 0;
+ top: 0;
+}
+#mw-mf-page-center .header h2,
+.overlay .header h2 {
+ margin: 0;
+ padding: 0;
+ line-height: 46px;
+ font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+}
.overlay ul {
text-align: left;
left: 0;
diff --git a/templates/overlays/talk.html b/templates/overlays/talk.html
index 9e74098..92c95ee 100644
--- a/templates/overlays/talk.html
+++ b/templates/overlays/talk.html
@@ -1,6 +1,7 @@
<div class="header">
<button class="cancel">{{closeMsg}}</button>
<h2>{{heading}}</h2>
+ <button class="add">+</button>
</div>
<p class="mw-mf-overlay-header">{{explanation}}</p>
<ul class="suggestions-results">
diff --git a/templates/overlays/talkSectionAdd.html
b/templates/overlays/talkSectionAdd.html
new file mode 100644
index 0000000..c2414fc
--- /dev/null
+++ b/templates/overlays/talkSectionAdd.html
@@ -0,0 +1,11 @@
+<div class="header">
+ <button class="cancel escapeOverlay">{{closeMsg}}</button>
+ <div class="search-box">
+ <input type="text" class="search"
placeholder="{{topicTitlePlaceHolder}}">
+ </div>
+</div>
+<div class="content">
+ <textarea placeholder="{{topicContentPlaceHolder}}"></textarea>
+ <button class='save'>{{topicAdd}}</button>
+</div>
+</div>
--
To view, visit https://gerrit.wikimedia.org/r/59560
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I4aa6b827e3ee0660dfc0c3b0b8c61dcfe457b12f
Gerrit-PatchSet: 11
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: MaxSem <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
