Optimizing use of chatMessage-Template. We can now insert messages via JS

file/js/TimWolla.WCF.Chat.js

@@ -12,12 +12,13 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
 
 (function ($, document) {
 	TimWolla.WCF.Chat = {
-		titleTemplate: '',
+		titleTemplate: null,
+		messageTemplate: null,
 		init: function(roomID, messageID) {
 			this.bindEvents();
 		},
-		bindEvents: function() {
+		bindEvents: function () {
-			$('.smiley').click(function(event) {
+			$('.smiley').click(function (event) {
 				alert($(event.target).attr('alt'));
 			});
 			
@@ -37,7 +38,7 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
 				this.toggleUserMenu($(event.target));
 			}, this));
 		},
-		changeRoom: function(target) {
+		changeRoom: function (target) {
 			window.history.replaceState({}, '', target.attr('href'));
 			
 			// actually change the room
@@ -64,7 +65,7 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
 					if (data.topic == '') {
 						if (data.topic == '' && $('#topic').text().trim() == '') return;
 						
-						$('#topic').wcfBlindOut('vertical', function() {
+						$('#topic').wcfBlindOut('vertical', function () {
 							$(this).text('');
 						});
 					}
@@ -92,11 +93,11 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
 					})
 					.parent()
 					.append('<img class="ajaxLoad" src="' + RELATIVE_WCF_DIR + 'icon/spinner1.svg" alt="" />')
-					.css({'marginTop' : function(index) {return (target.parent().height() / 2) - ($(this).height() / 2)}});
+					.css({'marginTop' : function (index) {return (target.parent().height() / 2) - ($(this).height() / 2)}});
 				}, this)
 			});
 		},
-		toggleUserMenu: function(target) {
+		toggleUserMenu: function (target) {
 			liUserID = '#' + target.parent().attr('id');
 			if ($(liUserID).hasClass('activeMenuItem')) {
 				$(liUserID + ' .chatUserMenu').wcfBlindOut('vertical', function() {
@@ -107,6 +108,19 @@ if (typeof TimWolla.WCF == 'undefined') TimWolla.WCF = {};
 				$(liUserID).addClass('activeMenuItem');
 				$(liUserID + ' .chatUserMenu').wcfBlindIn();
 			}
+		},
+		handleMessages: function (messages) {
+			for (message in messages) {
+				message = messages[message];
+				output = this.messageTemplate.fetch(message);
+				
+				li = $('<li></li>');
+				li.addClass('chatMessage'+message.type);
+				if (message.sender == WCF.User.userID) li.addClass('ownMessage');
+				li.append(output);
+				
+				$('.chatMessage ul').append(li);
+			}
 		}
 	};
 })(jQuery, document);

file/lib/data/chat/message/ChatMessage.class.php

@@ -41,7 +41,7 @@ class ChatMessage extends \wcf\data\DatabaseObject {
 	 * @return	string
 	 */
 	public function __toString() {
-		return $this->getFormattedMessage;
+		return $this->getFormattedMessage();
 	}
 	
 	/**
@@ -66,9 +66,9 @@ public function getFormattedMessage() {
 	 * @return	string
 	 */
 	public function getFormattedUsername() {
-		if ($this->type == self::TYPE_INFORMATION) return '<strong>'.WCF::getLanguage()->get('wcf.chat.information').'</strong>';
+		if ($this->type == self::TYPE_INFORMATION) return '<strong>'.$this->getUsername().'</strong>';
 		
-		$string = str_split($this->username);
+		$string = str_split($this->getUsername());
 		$r = (int) (($this->color1 >> 16 & 255) - ($this->color2 >> 16 & 255)) / (count($string) - 1);
 		$g = (int)  (($this->color1 >> 8 & 255) - ($this->color2 >> 8 & 255)) / (count($string) - 1);
 		$b = (int)  (($this->color1 & 255) - ($this->color2 & 255)) / (count($string) - 1);
@@ -79,4 +79,27 @@ public function getFormattedUsername() {
 		
 		return '<strong>'.$result.'</strong>';
 	}
+	
+	/**
+	 * Returns the unformatted username
+	 *
+	 * @return	string
+	 */
+	public function getUsername() {
+		if ($this->type == self::TYPE_INFORMATION) return WCF::getLanguage()->get('wcf.chat.information');
+		return $this->username;
+	}
+	
+	public function jsonify() {
+		return \wcf\util\JSON::encode(array(
+			'formattedUsername' => $this->getFormattedUsername(),
+			'formattedMessage' => $this->getFormattedMessage(),
+			'time' => $this->time,
+			'sender' => $this->sender,
+			'username' => $this->getUsername(),
+			'receiver' => $this->receiver,
+			'type' => $this->type
+		));
+			
+	}
 }

template/chat.tpl

@@ -204,15 +204,6 @@
 					</div>
 					<div class="chatMessage border content">
 						<ul>
-							{foreach from=$newestMessages item='message'}
-								<li>
-									{* TODO: Use an own time-function to display a short timestamp *}
-									{assign var='time' value=$message->time|time}
-									{assign var='username' value=$message->getFormattedUsername()|concat:': '}
-									{assign var='message' value=$message->getFormattedMessage()}
-									{include file='chatMessage'}
-								</li>
-							{/foreach}
 						</ul>
 					</div>
 					<form style="margin-top: 10px;" id="chatForm" action="index.php?form=Chat" method="post">
@@ -269,12 +260,14 @@
 <script type="text/javascript">
 	//<![CDATA[
 		TimWolla.WCF.Chat.titleTemplate = new WCF.Template('{ldelim}$title} - {'wcf.chat.title'|language|encodeJS} - {PAGE_TITLE|language|encodeJS}');
-		{capture assign='time'}{literal}{@$time}{/literal}{/capture}
-		{capture assign='username'}{literal}{@$username}{/literal}{/capture}
-		{capture assign='message'}{literal}{@$message}{/literal}{/capture}
 		{capture assign='chatMessageTemplate'}{include file='chatMessage'}{/capture}
 		TimWolla.WCF.Chat.messageTemplate = new WCF.Template('{$chatMessageTemplate|encodeJS}');
 		TimWolla.WCF.Chat.init({$room->roomID}, 1);
+		TimWolla.WCF.Chat.handleMessages([
+			{implode from=$newestMessages item='message'}
+				{@$message->jsonify()}
+			{/implode}
+		]);
 	//]]>
 </script>
 

template/chatMessage.tpl

@@ -1 +1 @@
-{@$time} {@$username}{@$message}
+{literal}{@$time} {@$formattedUsername}{@$formattedMessage}{/literal}