From 9001c668ea4b23f54e4216f38026e81560e8da77 Mon Sep 17 00:00:00 2001
From: max-m <maximilian.mader@gmx.de>
Date: Sun, 18 Dec 2011 15:46:16 +0100
Subject: [PATCH] Changed counter a bit.

---
 file/js/TimWolla.WCF.Chat.js |  1 +
 file/js/jCounter.jQuery.js   | 39 ++++++++++++++++++++++-------
 template/chat.tpl            | 48 ++++++++++++++++++++++++++----------
 3 files changed, 66 insertions(+), 22 deletions(-)

diff --git a/file/js/TimWolla.WCF.Chat.js b/file/js/TimWolla.WCF.Chat.js
index 5881417..ed531fa 100644
--- a/file/js/TimWolla.WCF.Chat.js
+++ b/file/js/TimWolla.WCF.Chat.js
@@ -188,6 +188,7 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
 				success: $.proxy(function (data, textStatus, jqXHR) {
 					this.getMessages();
 					$('#chatInput').val('').focus();
+					$('#chatForm .counter').text(this.config.maxTextLength);
 				}, this),
 				complete: function() {
 					submitButton.removeClass('ajaxLoad');
diff --git a/file/js/jCounter.jQuery.js b/file/js/jCounter.jQuery.js
index b2c691c..0ddea83 100644
--- a/file/js/jCounter.jQuery.js
+++ b/file/js/jCounter.jQuery.js
@@ -1,14 +1,35 @@
+/**
+ * jCounter - a simple character counter
+ * 
+ * @author	Maximilian Mader
+ * @copyright	2011 Maximilian Mader
+ * @license	Creative Commons Attribution-NonCommercial-ShareAlike <http://creativecommons.org/licenses/by-nc-sa/3.0/legalcode>
+ * @package	jQuery.jCounter
+ */
 (function($){
-	$.fn.jCounter = function(jCounterID, options) {
-		var jCounter = $(jCounterID);
-		var defaultClass = jCounter.attr('class');
-		maxChars = (options != null) ? options : 140;
+	$.fn.jCounter = function(max, options) {
+		maxChars = max || 140;
+		options = $.extend({
+			container: '<span></span>',
+			counterClass: 'counter',
+			countUp: false
+		}, options);
+		var timeout;
+		
+		jCounterContainer = $(options.container);
+		
 		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);
+			if(options.countUp) length = this.val().length;
+			else length = maxChars - this.val().length;
+			
+			if(options.countUp) color = 1;
+			else {
+				if (length > maxChars / 2) color = 1;
+				else if (length <= maxChars / 2 && length >= maxChars / 6) color = 2;
+				else color = 3;
+			}
+			
+			jCounterContainer.text(length).attr('class', '').addClass(options.counterClass + ' color-'+color);
 		}, this));
 	}
 })(jQuery);
\ No newline at end of file
diff --git a/template/chat.tpl b/template/chat.tpl
index e8d0580..3f656ec 100644
--- a/template/chat.tpl
+++ b/template/chat.tpl
@@ -190,24 +190,43 @@
 			display: none;
 		}
 		
-		.textCounter {
-			background: none repeat scroll 0 0 red;
-		    margin-left: -5px;
-		    padding: 5px;
+		.counterContainer {
+			display: table;
+		}
+		
+		.counterContainer > div {
+			display: table-row;
+		}
+		
+		.counterInput {
+			height: 16px;
+		}
+		
+		.counterInput, .counter {
+			display: table-cell;
+		}
+		
+		.counterInput, .counterContainer {
+			width: 100%;
+		}
+		
+		.counter {
+		    background-color: rgba(0, 0, 0, 0.7);
+		    padding: 0 5px 0 10px;
 		    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);
+    		width: 30px;
 		}
 		
-		.textCounter.color-1 {
+		.counter.color-1 {
 			color: #FFFFFF;
 		}
-		.textCounter.color-2 {
-			color: #AF0002;
+		.counter.color-2 {
+			color: rgba(255,255,255,0.5);
 		}
-		.textCounter.color-3 {
+		.counter.color-3 {
 			color: #D40D12;
 		}
 	</style>
@@ -255,7 +274,7 @@
 </aside>
 <!-- CONTENT -->{/capture}
 {capture assign='header'}{include file='header' sandbox=false}{/capture}
-{assign var='header' value='class="main"'|str_replace:'class="main right"':$header}
+{assign var='header' value='class="main"'|str_replace:'class="main left"':$header}
 {assign var='header' value='<!-- CONTENT -->'|str_replace:$sidebar:$header}
 {@$header}
 
@@ -266,8 +285,10 @@
 	</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" maxlength="{CHAT_LENGTH}" required="required" placeholder="{lang}wcf.chat.submit.default{/lang}" />
-		<span class="textCounter color-1">{CHAT_LENGTH}</span>
+		<div class="counterContainer"><div>
+			<input type="text" id="chatInput" class="inputText long counterInput" name="text" autocomplete="off" maxlength="{CHAT_LENGTH}" required="required" placeholder="{lang}wcf.chat.submit.default{/lang}" />
+			<div class="counter color-1">{CHAT_LENGTH}</div>
+		</div></div>
 	</form>
 	
 	<div id="chatControls">
@@ -327,7 +348,8 @@
 					maxTextLength: {CHAT_LENGTH}
 		}
 
-		$('#chatInput').jCounter('.textCounter', {CHAT_LENGTH});
+		$('#chatInput').jCounter($('#chatInput').attr('maxlength'), { container: '.counter' });
+		$('#sidebar').wcfSidebar();
 	//]]>
 </script>