Add length display of the title and text fields during submission

Add length display of the title and text fields during submission.
Title length display turns red to indicate when the title is too long
(>300 characters).

Applies to issue honestbleeps#149

lib/reddit_enhancement_suite.user.js

@@ -850,7 +850,7 @@ var RESUtils = {
 	friendsCommentsRegex: /https?:\/\/([a-z]+).reddit.com\/r\/friends\/*comments\/?/i,
 	inboxRegex: /https?:\/\/([a-z]+).reddit.com\/message\/[-\w\.\/]*/i,
 	profileRegex: /https?:\/\/([a-z]+).reddit.com\/user\/[-\w\.#=]*\/?(comments)?\/?(\?([a-z]+=[a-zA-Z0-9_%]*&?)*)?$/i, // fix to regex contributed by s_quark
-	submitRegex: /https?:\/\/([a-z]+).reddit.com\/[-\w\.\/]*\/submit\/?$/i,
+	submitRegex: /https?:\/\/([a-z]+).reddit.com\/([-\w\.\/]*\/)?submit\/?$/i,
 	prefsRegex: /https?:\/\/([a-z]+).reddit.com\/prefs\/?/i,
 	pageType: function() {
 		if (typeof(this.pageTypeSaved) == 'undefined') {
@@ -6388,6 +6388,11 @@ modules['betteReddit'] = {
 			type: 'boolean',
 			value: true,
 			description: 'Preload selftext data to make selftext expandos faster (preloads after first expando)'
+		},
+		showInputLength: {
+			type: 'boolean',
+			value: true,
+			description: 'When submitting, display the number of characters entered in the title and text fields and indicate when you go over the 300 character limit for titles.'
 		}
 	},
 	description: 'Adds a number of interface enhancements to Reddit, such as "full comments" links, the ability to unhide accidentally hidden posts, and more',
@@ -6485,6 +6490,9 @@ modules['betteReddit'] = {
 				default:
 					break;
 			}
+			if ((RESUtils.pageType() == 'submit') && (this.options.showInputLength.value)) {
+				this.showInputLength();
+			}
 		}
 	},
 	setUpTurboSelfText: function() {
@@ -7033,6 +7041,24 @@ modules['betteReddit'] = {
 			   // reddit's subreddit menu (not the RES one); only shows up if you are subscribed to enough subreddits (>= ~20).
 			   RESUtils.addCSS('div#subreddit_dropdown.drop-choices {position: fixed;}');
 		}
+	},
+	showInputLength: function() {
+		RESUtils.addCSS('.RESCharCounter { color: grey; float: right; }');
+		RESUtils.addCSS('.RESCharCounter.tooLong { color: red; }');
+		$('#title-field span.title').after($('<span>').attr('id', 'titleLength').addClass('RESCharCounter').html('0'));
+		$('#title-field textarea[name="title"]').bind('input', function() {
+			var len = $(this).val().length;
+			if (len > 300) {
+				$('#titleLength').html(len).addClass('tooLong');
+			} else {
+				$('#titleLength').html(len).removeClass('tooLong');
+			}
+		});
+
+		$('#text-field span.title + span').after($('<span>').attr('id', 'textLength').addClass('RESCharCounter').html('0'));
+		$('#text-field textarea[name="text"]').bind('input', function() {
+			$('#textLength').html($(this).val().length);
+		});
 	}
 };