RAN1 has uploaded a new change for review.
https://gerrit.wikimedia.org/r/182054
Change subject: Redid JS so chars left output as in Twitter.
......................................................................
Redid JS so chars left output as in Twitter.
Redid the JavaScript so the chars left is displayed on the left of the tweet
button. The enclosing
strong element is now output by JS to ease future HTMLForm conversion.
Change-Id: Ief436256ddb23e05064e68cc249bca6edc6c8f64
---
M CommunityTwitter_body.php
M css/ext.CommunityTwitter.css
M js/ext.CommunityTwitter.updatecount.js
3 files changed, 16 insertions(+), 12 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/CommunityTwitter
refs/changes/54/182054/1
diff --git a/CommunityTwitter_body.php b/CommunityTwitter_body.php
index 200c7cc..94b619e 100755
--- a/CommunityTwitter_body.php
+++ b/CommunityTwitter_body.php
@@ -240,7 +240,7 @@
// Tweet textarea; javascript
ResourceLoader module enables an updating counter with button disabling if
tweet is too long (for convenience, Twitter won't allow a >140 char post
anyways)
$output->addModules(
'ext.CommunityTwitter.updatecount' );
$output->addHTML("<form
action=\"".$title->getLinkURL()."\" method=\"post\"
id=\"status_update_form\">\n".
-
"<span class=\"ct-tweet\">".wfMsg("communitytwitter-remaining-chars").":
<strong id=\"stringlength\">140</strong><br/>\n".
+
"<span class=\"ct-tweet\">\n".
"<textarea tabindex=\"1\" autocomplete=\"off\" accesskey=\"u\" name=\"status\"
id=\"status\" rows=\"2\" cols=\"40\" class=\"ct-tweet-input\"></textarea>\n".
"<br/><input type=\"submit\" id=\"tweetbutton\" value=\" Tweet \"></span>\n".
"</form><br /><br /><br /><br /><br /><br />\n".
diff --git a/css/ext.CommunityTwitter.css b/css/ext.CommunityTwitter.css
index e097144..42c9378 100644
--- a/css/ext.CommunityTwitter.css
+++ b/css/ext.CommunityTwitter.css
@@ -38,6 +38,9 @@
margin: 10px 25px 10px 25px;
float: right;
}
+.ct-chars-left {
+ padding-right: 6px;
+}
table.ct-tweet-section {
width: 550px;
height: 100px;
diff --git a/js/ext.CommunityTwitter.updatecount.js
b/js/ext.CommunityTwitter.updatecount.js
index 5c3d795..c74206c 100644
--- a/js/ext.CommunityTwitter.updatecount.js
+++ b/js/ext.CommunityTwitter.updatecount.js
@@ -4,8 +4,7 @@
*
* Notes for the gets: 'status_update_form' refers to the form element that
contains all relevant
* elements for updating the Twitter status, the textarea element is the
textbox for inputting the status
- * update, the strong element encloses the "number of characters remaining"
output (140 by default),
- * and the input element is the "Tweet" button.
+ * update and the input element is the "Tweet" button. The count is output
before the Tweet button.
*
* Notes about scope: ResourceLoader already provides a closure for JavaScript
modules, so the variables
* which are defined below are not actually in the global scope. There is no
need to rewrite them in
@@ -16,23 +15,25 @@
var ctStatusForm = document.getElementById( 'status_update_form' );
var ctStatusTextarea = ctStatusForm.getElementsByTagName( 'textarea' )[0];
-var ctCountOutput = ctStatusForm.getElementsByTagName( 'strong' )[0];
var ctTweetButton = ctStatusForm.getElementsByTagName( 'input' )[0];
-ctStatusTextarea.onkeyup = function () {
+
+// setup the count output node, insert before tweet button
+var ctStrong = document.createElement( 'strong' );
+ctStrong.setAttribute( 'class', 'ct-chars-left' );
+ctStrong.appendChild( document.createTextNode( '140' ); // initial value
+
+var ctCountOutput = ctTweetButton.parentNode.insertBefore( ctStrong,
ctTweetButton ); // insertBefore only works with parent
+
+ctStatusTextarea.oninput = function () {
var ctCharsLeft = 140 - ctStatusTextarea.value.length; // get the
number of characters left from the text box
// using the number of chars, change count output color and
disable/enable tweet button as needed
-
if ( ctCharsLeft < 0 ) {
- ctCountOutput.style.color = 'red'; // red means bad
+ ctCountOutputMsg.style.color = 'red'; // red means bad
ctTweetButton.setAttribute( 'disabled', 'disabled' ); //
disables Tweet button
} else {
ctTweetButton.removeAttribute( 'disabled' ); // enables Tweet
button
- if ( ctCharsLeft < 25 ) {
- ctCountOutput.style.color = '#CC0'; // yellow
- } else {
- ctCountOutput.style.color = 'inherit'; // default
- }
+ ctCountOutput.style.color = 'inherit'; // default
}
ctCountOutput.innerHTML = ctCharsLeft; // output the count
};
--
To view, visit https://gerrit.wikimedia.org/r/182054
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ief436256ddb23e05064e68cc249bca6edc6c8f64
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/CommunityTwitter
Gerrit-Branch: master
Gerrit-Owner: RAN1 <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
