Merge branch 'master' of github.com:wbbaddons/Tims-Chat

file/js/jCounter.jQuery.coffee

@@ -10,16 +10,23 @@
 	$.fn.jCounter = (container, options) ->
 		options = $.extend
 			max: 0
-			counterClass: 'jsCounter'
+			counterClass: 'jCounter'
 			countUp: false
+			cssFile: 'wcf/style/jCounter.css'
+			width: '100%'
 		, options
 		
 		if this.attr('maxlength')
 			max = this.attr('maxlength')
 		else max = options.max
 		
+		if $('#jCounterCSS').length == 0
+			$('head').append('<link id="jCounterCSS" rel="stylesheet" type="text/css" href="' + options.cssFile + '" >')
+
 		if !container
-			this.wrap('<div class="jsCounterContainer"><div></div></div>').parent().append('<div class="' + options.counterClass + ' color-1">' + max + '</div>');
+			if !this.hasClass('jCounterInput')
+				this.addClass('jCounterInput')
+			this.wrap('<div class="jCounterContainer" style="width: ' + options.width + '"><div></div></div>').parent().append('<div class="' + options.counterClass + ' color-1">' + max + '</div>');
 			jCounterContainer = $(this).parent().children('.' + options.counterClass)
 		else
 			if typeof container is 'object'
@@ -33,7 +40,14 @@
 			else
 				length = max - this.val().length
 			
-			if options.countUp
+			if options.countUp && max > 0
+				if length < max / 2
+					color = 1
+				else if length >= max / 2 and length <= max / 1.2
+					color = 2
+				else
+					color = 3
+			else if options.countUp
 				color = 1
 			else
 				if length > max / 2

file/style/jCounter.scss

@@ -0,0 +1,42 @@
+.jCounterContainer {
+	display: table;
+	
+	> div {
+		display: table-row;
+	}
+}
+
+.jCounterInput {
+	height: 16px;
+	width: 100%;
+	position: relative;
+	z-index: 9999;
+	box-sizing: content-box !important;
+}
+
+.jCounterInput, .jCounter {
+	display: table-cell;
+}
+
+.jCounter {
+	text-align: center;
+	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;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+	width: 30px;
+	
+	&.color-1 {
+		color: #FFFFFF;
+	}
+	
+	&.color-2 {
+		color: rgba(255,255,255,0.5);
+	}
+	
+	&.color-3 {
+		color: #D40D12;
+	}
+}

template/chat.tpl

@@ -40,52 +40,6 @@
 		.ajaxLoad {
 			background-image: url({icon size='S'}spinner1{/icon});
 		}
-
-		/*
-		 * jCounter CSS
-		 * 
-		 * TODO: Seperate jCounter completely from Tims-Chat
-		 */
-		.jsCounterContainer {
-			display: table;
-		}
-		
-		.jsCounterContainer > div {
-			display: table-row;
-		}
-		
-		.jsCounterInput {
-			height: 16px;
-			box-sizing: content-box !important;
-		}
-		
-		.jsCounterInput, .jsCounter {
-			display: table-cell;
-		}
-		
-		.jsCounterInput, .jsCounterContainer {
-			width: 100%;
-		}
-		
-		.jsCounter {
-			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;
-			border: 1px solid rgba(255, 255, 255, 0.3);
-			width: 30px;
-		}
-		
-		.jsCounter.color-1 {
-			color: #FFFFFF;
-		}
-		.jsCounter.color-2 {
-			color: rgba(255,255,255,0.5);
-		}
-		.jsCounter.color-3 {
-			color: #D40D12;
-		}
 	</style>
 </head>
 
@@ -103,7 +57,7 @@
 	</div>
 	
 	<form id="timsChatForm" action="{link controller="Chat" action="Send"}{/link}" method="post">
-		<input type="text" id="timsChatInput" class="inputText long jsCounterInput" name="text" autocomplete="off" maxlength="{@CHAT_MAX_LENGTH}" disabled="disabled" required="required" placeholder="{lang}wcf.chat.submit.default{/lang}" />
+		<input type="text" id="timsChatInput" class="inputText long" name="text" autocomplete="off" maxlength="{@CHAT_MAX_LENGTH}" disabled="disabled" required="required" placeholder="{lang}wcf.chat.submit.default{/lang}" />
 	</form>
 	
 	<div id="timsChatControls" class="wcf-box wcf-marginTop">