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

Conflicts:
	template/chat.tpl

file/js/TimWolla.WCF.Chat.js

@@ -191,6 +191,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() {
 					$('#chatInput').removeClass('ajaxLoad');

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) {
+	$.fn.jCounter = function(max, options) {
-		var jCounter = $(jCounterID);
+		maxChars = max || 140;
-		var defaultClass = jCounter.attr('class');
+		options = $.extend({
-		maxChars = (options != null) ? options : 140;
+			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(options.countUp) length = this.val().length;
-			if(length <= maxChars) color = 1;
+			else length = maxChars - this.val().length;
-			if(length <= maxChars / 2) color = 2;
+			
-			if(length <= maxChars / 7) color = 3;
+			if(options.countUp) color = 1;
-			jCounter.text(length).addClass(defaultClass + ' color-'+color);
+			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);

file/lib/page/ChatPage.class.php

@@ -107,15 +107,17 @@ public function readParameters() {
 			//TODO: Initialise LogPage
 			exit;
 		}
+		else if ($this->action == 'RefreshRoomList') {
+			new ChatRefreshRoomListPage();
+			exit;
+		}
 		else if ($this->action == 'Send') {
 			new \wcf\form\ChatForm();
 			exit;
 		}
 		
 		if (isset($_REQUEST['id'])) $this->roomID = (int) $_REQUEST['id'];
-		if (isset($_REQUEST['ajax'])) {
+		if (isset($_REQUEST['ajax'])) $this->useTemplate = false;
-			$this->useTemplate = false;
-		}
 	}
 	
 	/**
@@ -184,8 +186,10 @@ public function show() {
 		// remove index breadcrumb
 		WCF::getBreadcrumbs()->remove(0);
 		parent::show();
+		// break if not ajax
 		if ($this->useTemplate) exit;
 		@header('Content-type: application/json');
+		
 		echo \wcf\util\JSON::encode(array(
 			'title' => $this->room->getTitle(),
 			'topic' => WCF::getLanguage()->get($this->room->topic)

file/lib/system/event/listener/ChatRouteListener.class.php

@@ -8,7 +8,7 @@
  * @copyright	2010-2011 Tim Düsterhus
  * @license	Creative Commons Attribution-NonCommercial-ShareAlike <http://creativecommons.org/licenses/by-nc-sa/3.0/legalcode>
  * @package	timwolla.wcf.chat
- * @subpackage system.event.listner
+ * @subpackage system.event.listener
  */
 class ChatRouteListener implements \wcf\system\event\IEventListener {
 	/**
@@ -18,7 +18,7 @@ public function execute($eventObj, $className, $eventName) {
 		$route = new \wcf\system\request\Route('chatAction');
 		$route->setSchema('/{controller}/{action}');
 		$route->setParameterOption('controller', null, 'Chat');
-		$route->setParameterOption('action', null, '(Log|Send)');
+		$route->setParameterOption('action', null, '(Log|Send|RefreshRoomList)');
 		$eventObj->addRoute($route);
 	}
 }

template/chat.tpl

@@ -184,24 +184,43 @@
 			display: none;
 		}
 		
-		.textCounter {
+		.counterContainer {
-			background: none repeat scroll 0 0 red;
+			display: table;
-			margin-left: -5px;
+		}
-			padding: 5px;
+		
+		.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 {
+		.counter.color-2 {
-			color: #AF0002;
+			color: rgba(255,255,255,0.5);
 		}
-		.textCounter.color-3 {
+		.counter.color-3 {
 			color: #D40D12;
 		}
 	</style>
@@ -249,7 +268,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}
 
@@ -260,8 +279,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}" />
+		<div class="counterContainer"><div>
-		<span class="textCounter color-1">{CHAT_LENGTH}</span>
+			<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">
@@ -321,7 +342,8 @@
 					maxTextLength: {CHAT_LENGTH}
 		}
 
-		$('#chatInput').jCounter('.textCounter', {CHAT_LENGTH});
+		$('#chatInput').jCounter($('#chatInput').attr('maxlength'), { container: '.counter' });
+		$('#sidebar').wcfSidebar();
 	//]]>
 </script>