Mailing List Archive

[MediaWiki-commits] [Gerrit] Add all logic for edit profile pages in JavaScript - change (mediawiki...MobileFrontend)
Jdlrobson has uploaded a new change for review.

https://gerrit.wikimedia.org/r/96681


Change subject: Add all logic for edit profile pages in JavaScript
......................................................................

Add all logic for edit profile pages in JavaScript

You need JavaScript to open the editor interface so let's just
use JavaScript to do the edit itself.

Bug: 57120
Change-Id: I267ff48b506f89719757e7fd20b72b1e36e69b3e
---
M includes/Resources.php
M includes/specials/SpecialUserProfile.php
M javascripts/specials/userprofile.js
M less/specials/userprofile.less
4 files changed, 33 insertions(+), 38 deletions(-)


git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend refs/changes/81/96681/1

diff --git a/includes/Resources.php b/includes/Resources.php
index cc4c3e5..e2a82b6 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -1030,6 +1030,7 @@
'mobile-frontend-editor-edit',
'mobile-frontend-profile-description-placeholder',
'htmlform-submit',
+ 'mobile-frontend-profile-edit-summary',
),
'templates' => array(
'EditBox',
diff --git a/includes/specials/SpecialUserProfile.php b/includes/specials/SpecialUserProfile.php
index 0ce8294..edcc6ee 100644
--- a/includes/specials/SpecialUserProfile.php
+++ b/includes/specials/SpecialUserProfile.php
@@ -285,25 +285,6 @@
$this->editable = true;
}

- // If the editing form was submitted, process that first.
- if ( $this->editable && $request->wasPosted() ) {
- // Check authentication token
- if ( $user->matchEditToken( $request->getVal( 'authtoken' ) ) ) {
- $title = Title::newFromText(
- $this->targetUser->getName() . '/UserProfileIntro',
- NS_USER
- );
- $article = new Article( $title );
- $description = $request->getVal( 'description' );
- $content = ContentHandler::makeContent( $description, $title );
- // Save the edit
- $article->doEditContent( $content, $this->msg( 'mobile-frontend-profile-edit-summary' ) );
- } else {
- // Show error about bad session.
- $this->showError( 'sessionfailure' );
- }
- }
-
// Prepare content
$this->userInfo = new MobileUserInfo( $this->targetUser );
$activityHtml = $this->getLastEditHtml() . $this->getLastUploadHtml()
@@ -368,13 +349,5 @@
}
}
return $text;
- }
-
- /**
- * Output an error
- * @param string $message Key for error message
- */
- protected function showError( $message ) {
- $this->getOutput()->wrapWikiMsg( '<div class="error">$1</div>', $message );
}
}
diff --git a/javascripts/specials/userprofile.js b/javascripts/specials/userprofile.js
index 726c245..eb03a3b 100644
--- a/javascripts/specials/userprofile.js
+++ b/javascripts/specials/userprofile.js
@@ -1,6 +1,5 @@
( function( M, $ ) {
var View = M.require( 'view' ),
- api = M.require( 'api' ),
limit = mw.config.get( 'wgMFMaxDescriptionChars' ),
EditBox;

@@ -14,22 +13,39 @@
},
initialize: function( options ) {
var self = this, _super = self._super;
- api.getToken().done( function( token ) {
- options.token = token;
+ mw.loader.using( 'mobile.editor', function() {
+ var EditorApi = M.require( 'modules/editor/EditorApi' );
+ self.api = new EditorApi( { title: options.title, sectionId: 0, content: options.description } );
_super.call( self, options );
} );
},
+ switchToEditMode: function() {
+ this.$( '.editor' ).show();
+ this.$( '.edit-button, .user-description' ).hide();
+ },
+ switchToViewMode: function() {
+ this.$( '.editor' ).hide();
+ this.$( '.edit-button,.user-description' ).show();
+ },
postRender: function( options ) {
- var self = this, $form = this.$( 'form' );
+ var self = this, $form = this.$( '.editor' ),
+ $loader = this.$( '.loading' ).hide();
$form.hide();
this.$( 'textarea' ).on( 'keyup focus', $.proxy( this, 'setCount' ) );
// Initialize the character count
this.setCount();
// Initialize the edit button
- this.$( '.edit-button' ).on( 'click', function() {
- $form.show();
- $( this ).hide();
- self.$( '.user-description' ).hide();
+ this.$( '.edit-button' ).on( 'click', $.proxy( self, 'switchToEditMode' ) );
+ this.$( '.editor button' ).on( 'click', function() {
+ var val = self.$( 'textarea' ).val();
+ $loader.show();
+ $form.hide();
+ self.api.setContent( val );
+ self.api.save( { summary: mw.msg( 'mobile-frontend-profile-edit-summary' ) } ).done( function() {
+ $loader.hide();
+ self.$( '.user-description' ).text( val );
+ self.switchToViewMode();
+ } );
} );
this._super( options );
},
@@ -53,11 +69,12 @@

function initialize() {
var $container = $( '.user-description-container' ),
+ username = mw.config.get( 'wgUserName' ),
text = $container.find( '.user-description' ).text() || undefined;

// If current user is this person make it editable
- if ( $( 'h1' ).text() === mw.config.get( 'wgUserName' ) ) {
- new EditBox( { el: $container, description: text } );
+ if ( $( 'h1' ).text() === username ) {
+ new EditBox( { el: $container, description: text, title: 'User:' + username + '/UserProfileIntro' } );
}
}

diff --git a/less/specials/userprofile.less b/less/specials/userprofile.less
index de2fc2d..358daa1 100644
--- a/less/specials/userprofile.less
+++ b/less/specials/userprofile.less
@@ -56,10 +56,14 @@
cursor: pointer;
}

- form {
+ .editor {
text-align: right;
}

+ .loading {
+ height: 50px;
+ }
+
textarea {
.box-sizing( border-box );
width: 100%;

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

Gerrit-MessageType: newchange
Gerrit-Change-Id: I267ff48b506f89719757e7fd20b72b1e36e69b3e
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <jrobson@wikimedia.org>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
[MediaWiki-commits] [Gerrit] Add all logic for edit profile pages in JavaScript - change (mediawiki...MobileFrontend) [ In reply to ]
jenkins-bot has submitted this change and it was merged.

Change subject: Add all logic for edit profile pages in JavaScript
......................................................................


Add all logic for edit profile pages in JavaScript

You need JavaScript to open the editor interface so let's just
use JavaScript to do the edit itself.

Bug: 57120
Change-Id: I267ff48b506f89719757e7fd20b72b1e36e69b3e
---
M includes/Resources.php
M includes/specials/SpecialUserProfile.php
M javascripts/specials/userprofile.js
M less/specials/userprofile.less
M templates/EditBox.html
5 files changed, 35 insertions(+), 44 deletions(-)

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



diff --git a/includes/Resources.php b/includes/Resources.php
index cf19139..da25900 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -1096,11 +1096,13 @@
'mobile.userprofile.scripts' => $wgMFMobileResourceBoilerplate + array(
'dependencies' => array(
'mobile.stable.common',
+ 'mobile.editor.common',
),
'messages' => array(
'mobile-frontend-editor-edit',
'mobile-frontend-profile-description-placeholder',
'htmlform-submit',
+ 'mobile-frontend-profile-edit-summary',
),
'templates' => array(
'EditBox',
diff --git a/includes/specials/SpecialUserProfile.php b/includes/specials/SpecialUserProfile.php
index 0ce8294..edcc6ee 100644
--- a/includes/specials/SpecialUserProfile.php
+++ b/includes/specials/SpecialUserProfile.php
@@ -285,25 +285,6 @@
$this->editable = true;
}

- // If the editing form was submitted, process that first.
- if ( $this->editable && $request->wasPosted() ) {
- // Check authentication token
- if ( $user->matchEditToken( $request->getVal( 'authtoken' ) ) ) {
- $title = Title::newFromText(
- $this->targetUser->getName() . '/UserProfileIntro',
- NS_USER
- );
- $article = new Article( $title );
- $description = $request->getVal( 'description' );
- $content = ContentHandler::makeContent( $description, $title );
- // Save the edit
- $article->doEditContent( $content, $this->msg( 'mobile-frontend-profile-edit-summary' ) );
- } else {
- // Show error about bad session.
- $this->showError( 'sessionfailure' );
- }
- }
-
// Prepare content
$this->userInfo = new MobileUserInfo( $this->targetUser );
$activityHtml = $this->getLastEditHtml() . $this->getLastUploadHtml()
@@ -368,13 +349,5 @@
}
}
return $text;
- }
-
- /**
- * Output an error
- * @param string $message Key for error message
- */
- protected function showError( $message ) {
- $this->getOutput()->wrapWikiMsg( '<div class="error">$1</div>', $message );
}
}
diff --git a/javascripts/specials/userprofile.js b/javascripts/specials/userprofile.js
index 726c245..7677ba4 100644
--- a/javascripts/specials/userprofile.js
+++ b/javascripts/specials/userprofile.js
@@ -1,6 +1,5 @@
( function( M, $ ) {
var View = M.require( 'view' ),
- api = M.require( 'api' ),
limit = mw.config.get( 'wgMFMaxDescriptionChars' ),
EditBox;

@@ -14,22 +13,39 @@
},
initialize: function( options ) {
var self = this, _super = self._super;
- api.getToken().done( function( token ) {
- options.token = token;
+ mw.loader.using( 'mobile.editor', function() {
+ var EditorApi = M.require( 'modules/editor/EditorApi' );
+ self.api = new EditorApi( { title: options.title, sectionId: 0, content: options.description } );
_super.call( self, options );
} );
},
+ switchToEditMode: function() {
+ this.$( '.editor' ).show();
+ this.$( '.edit-button, .user-description' ).hide();
+ },
+ switchToViewMode: function() {
+ this.$( '.editor' ).hide();
+ this.$( '.edit-button,.user-description' ).show();
+ },
postRender: function( options ) {
- var self = this, $form = this.$( 'form' );
+ var self = this, $form = this.$( '.editor' ),
+ $loader = this.$( '.loading' ).hide();
$form.hide();
this.$( 'textarea' ).on( 'keyup focus', $.proxy( this, 'setCount' ) );
// Initialize the character count
this.setCount();
// Initialize the edit button
- this.$( '.edit-button' ).on( 'click', function() {
- $form.show();
- $( this ).hide();
- self.$( '.user-description' ).hide();
+ this.$( '.edit-button' ).on( 'click', $.proxy( self, 'switchToEditMode' ) );
+ this.$( '.editor button' ).on( 'click', function() {
+ var val = self.$( 'textarea' ).val();
+ $loader.show();
+ $form.hide();
+ self.api.setContent( val );
+ self.api.save( { summary: mw.msg( 'mobile-frontend-profile-edit-summary' ) } ).done( function() {
+ $loader.hide();
+ self.$( '.user-description' ).text( val || options.placeholder );
+ self.switchToViewMode();
+ } );
} );
this._super( options );
},
@@ -53,11 +69,12 @@

function initialize() {
var $container = $( '.user-description-container' ),
+ username = mw.config.get( 'wgUserName' ),
text = $container.find( '.user-description' ).text() || undefined;

// If current user is this person make it editable
- if ( $( 'h1' ).text() === mw.config.get( 'wgUserName' ) ) {
- new EditBox( { el: $container, description: text } );
+ if ( $( 'h1' ).text() === username ) {
+ new EditBox( { el: $container, description: text, title: 'User:' + username + '/UserProfileIntro' } );
}
}

diff --git a/less/specials/userprofile.less b/less/specials/userprofile.less
index de2fc2d..aa25da5 100644
--- a/less/specials/userprofile.less
+++ b/less/specials/userprofile.less
@@ -56,7 +56,7 @@
cursor: pointer;
}

- form {
+ .editor {
text-align: right;
}

diff --git a/templates/EditBox.html b/templates/EditBox.html
index bb17f86..b966563 100644
--- a/templates/EditBox.html
+++ b/templates/EditBox.html
@@ -1,10 +1,9 @@
-<div class="user-description">{{description}}</div>
-{{^description}}<div class="user-description">{{placeholder}}</div>{{/description}}
-<form method="post">
- <input type="hidden" value="{{token}}" name="authtoken">
+<div class="user-description">{{^description}}{{placeholder}}{{/description}}{{description}}</div>
+<div class="loading spinner"></div>
+<div class="editor">
<textarea name="description"
placeholder="{{placeholder}}">{{description}}</textarea><br>
<span class="character-counter">{{limit}}</span>
- <button type="submit">{{submit}}</button>
-</form>
+ <button>{{submit}}</button>
+</div>
<div class="edit-button">{{label}}</div>

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

Gerrit-MessageType: merged
Gerrit-Change-Id: I267ff48b506f89719757e7fd20b72b1e36e69b3e
Gerrit-PatchSet: 5
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <jrobson@wikimedia.org>
Gerrit-Reviewer: JGonera <jgonera@wikimedia.org>
Gerrit-Reviewer: Jdlrobson <jrobson@wikimedia.org>
Gerrit-Reviewer: jenkins-bot

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits