Added a little character counter next to chatInput.

file/js/TimWolla.WCF.Chat.js

@@ -16,6 +16,7 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
 		messageTemplate: null,
 		init: function(roomID, messageID) {
 			this.bindEvents();
+			
 			$('#chatInput').focus();
 		},
 		/**
@@ -123,6 +124,7 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
 					if (this.loading || target.parent().hasClass('activeMenuItem')) return false;
 					
 					this.loading = true;
+
 					target.parent().addClass('ajaxLoad');
 				}, this)
 			});
@@ -192,18 +194,6 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
 				}
 			});
 		},
-		toggleUserMenu: function (target) {
-			liUserID = '#' + target.parent().parent().attr('id');
-			if ($(liUserID).hasClass('activeMenuItem')) {
-				$(liUserID + ' .chatUserMenu').wcfBlindOut('vertical', function () {
-					$(liUserID).removeClass('activeMenuItem');
-				});
-			}
-			else {
-				$(liUserID).addClass('activeMenuItem');
-				$(liUserID + ' .chatUserMenu').wcfBlindIn();
-			}
-		},
 		toggleSidebarContent: function (target) {
 			if (target.parent().hasClass('active')) return;
 
@@ -221,6 +211,18 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
 				$('#chatUserList').hide();
 				$('#chatRoomList').show();
 			}
+		},
+		toggleUserMenu: function (target) {
+			liUserID = '#' + target.parent().parent().attr('id');
+			if ($(liUserID).hasClass('activeMenuItem')) {
+				$(liUserID + ' .chatUserMenu').wcfBlindOut('vertical', function () {
+					$(liUserID).removeClass('activeMenuItem');
+				});
+			}
+			else {
+				$(liUserID).addClass('activeMenuItem');
+				$(liUserID + ' .chatUserMenu').wcfBlindIn();
+			}
 		}
 	};
 })(jQuery, document);

file/js/jCounter.jQuery.js

@@ -0,0 +1,14 @@
+(function($){
+	$.fn.jCounter = function(jCounterID, options) {
+		var jCounter = $(jCounterID);
+		var defaultClass = jCounter.attr('class');
+		maxChars = (options != null) ? options : 140;
+		this.on('keypress keydown keyup', $.proxy(function() {
+			var length = maxChars - this.val().length;
+			if(length <= maxChars) color = 1;
+			if(length <= maxChars / 2) color = 2;
+			if(length <= maxChars / 7) color = 3;
+			jCounter.text(length).addClass(defaultClass + ' color-'+color);
+		}, this));
+	}
+})(jQuery);

template/chat.tpl

@@ -75,6 +75,8 @@
 		#chatInput {
 			background-position: right center;
 			background-repeat: no-repeat;
+			position: relative;
+    		z-index: 10;
 		}
 		
 		#chatOptions {
@@ -187,6 +189,27 @@
 		.hidden {
 			display: none;
 		}
+		
+		.textCounter {
+			background: none repeat scroll 0 0 red;
+		    margin-left: -5px;
+		    padding: 5px;
+		    position: relative;
+		    z-index: 0 !important;
+		    border-radius: 0px 5px 5px 0px;
+		    background-color: rgba(0, 0, 0, 0.7);
+    		border: 1px solid rgba(255, 255, 255, 0.3);
+		}
+		
+		.textCounter.color-1 {
+			color: #FFFFFF;
+		}
+		.textCounter.color-2 {
+			color: #AF0002;
+		}
+		.textCounter.color-3 {
+			color: #D40D12;
+		}
 	</style>
 </head>
 
@@ -243,7 +266,8 @@
 	</div>
 	
 	<form id="chatForm" action="{link controller="Chat" action="Send"}{/link}" method="post">
-		<input type="text" id="chatInput" class="inputText long" name="text" autocomplete="off" required="required" placeholder="Submit with enter" />
+		<input type="text" id="chatInput" class="inputText long" name="text" autocomplete="off" maxlength="{CHAT_LENGTH}" required="required" placeholder="{lang}wcf.chat.submit.default{/lang}" />
+		<span class="textCounter color-1">{CHAT_LENGTH}</span>
 	</form>
 	
 	<div id="chatControls">
@@ -261,22 +285,22 @@
 				<ul>
 					<li>
 						<a id="chatAutoscroll" href="javascript:;" class="chatToggle balloonTooltip" title="{lang}wcf.global.button.disable{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="1">
-							<img alt="" src="{icon}enabled1{/icon}" /> <span>Scroll</span>
+							<img alt="" src="{icon}enabled1{/icon}" /> <span>{lang}wcf.chat.scroll{/lang}</span>
 						</a>
 					</li>
 					<li>
 						<a id="chatNotify" href="javascript:;" class="chatToggle balloonTooltip" title="{lang}wcf.global.button.enable{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="0">
-							<img alt="" src="{icon}disabled1{/icon}" /> <span>Notify</span>
+							<img alt="" src="{icon}disabled1{/icon}" /> <span>{lang}wcf.chat.notify{/lang}</span>
 						</a>
 					</li>
 					<li>
 						<a id="chatClear" href="javascript:;" class="balloonTooltip" title="Clear the chat">
-							<img alt="" src="{icon}delete1{/icon}" /> <span>Clear</span>
+							<img alt="" src="{icon}delete1{/icon}" /> <span>{lang}wcf.chat.clear{/lang}</span>
 						</a>
 					</li>
 					<li>
 						<a id="chatMark" href="javascript:;" class="balloonTooltip" title="Show checkboxes">
-							<img alt="" src="{icon}check1{/icon}" /> <span>Mark</span>
+							<img alt="" src="{icon}check1{/icon}" /> <span>{lang}wcf.chat.mark{/lang}</span>
 						</a>
 					</li>											
 				</ul>
@@ -296,6 +320,14 @@
 				{@$message->jsonify()}
 			{/implode}
 		]);
+
+		TimWolla.WCF.Chat.config = { 
+					reloadTime: {CHAT_RELOADTIME},
+					animations: {CHAT_ANIMATIONS},
+					maxTextLength: {CHAT_LENGTH}
+		}
+
+		$('#chatInput').jCounter('.textCounter', {CHAT_LENGTH});
 	//]]>
 </script>
 

template/chatJavascriptInclude.tpl

@@ -1 +1,4 @@
-{if $templateName == 'chat'}<script type="text/javascript" src="{@RELATIVE_WCF_DIR}js/TimWolla.WCF.Chat.js{if $chatVersion|isset}?version={$chatVersion|urlencode}{/if}"></script>{/if}
+{if $templateName == 'chat'}
+<script type="text/javascript" src="{@RELATIVE_WCF_DIR}js/TimWolla.WCF.Chat.js{if $chatVersion|isset}?version={$chatVersion|urlencode}{/if}"></script>
+<script type="text/javascript" src="{@RELATIVE_WCF_DIR}js/jCounter.jQuery.js"></script>
+{/if}