Implement Ajax-loading of message protocol

acptemplate/__messageLogTable.tpl

@@ -0,0 +1,26 @@
+{if $messages|count > 0}
+	<table class="table">
+		<thead>
+			<tr>
+				<th>{lang}wcf.global.objectID{/lang}</th>
+				<th>{lang}chat.general.time{/lang}</th>
+				<th colspan="2">{lang}wcf.user.username{/lang}</th>
+				<th>{lang}chat.acp.log.message{/lang}</th>
+			</tr>
+		</thead>
+		
+		<tbody>
+			{foreach from=$messages item="message"}
+				<tr>
+					<td class="columnID">{$message->messageID}</td>
+					<td style="width: 1px !important;">{$message->time|date:"H:i:s"}</td>
+					<td class="columnIcon"><p class="framed">{@$message->getUserProfile()->getAvatar()->getImageTag(24)}</p></td>
+					<td class="columnTitle columnUsername right" style="width: 1px !important;">{$message->username}</td>
+					<td>{@$message->getFormattedMessage("text/simplified-html")}</td>
+				</tr>
+			{/foreach}
+		</tbody>
+	</table>
+{else}
+	<p class="info">{lang}wcf.global.noItems{/lang}</p>
+{/if}

acptemplate/messageLog.tpl

@@ -1,8 +1,11 @@
 {include file='header' pageTitle='chat.acp.log.title'}
 
-<script>
+<script data-relocate="true" src="{$__wcf->getPath('chat')}acp/js/be.bastelstu.Chat.ACP.Log{if !ENABLE_DEBUG_MODE}.min{/if}.js?version={PACKAGE_VERSION|rawurlencode}"></script>
+
+<script data-relocate="true">
 	//<![CDATA[
 	$(function() {
+		be.bastelstu.Chat.ACP.Log.TabMenu.init();
 		WCF.TabMenu.init();
 	});
 	//]]>
@@ -53,67 +56,40 @@
 		<p class="info">{lang}wcf.global.noItems{/lang}</p>
 	{/if}
 {else}
-	<div class="tabMenuContainer marginTop" data-active="timeTab-0" data-store="activeTabMenuItem">
+	<div id="messageLogContent" class="tabMenuContainer marginTop" data-active="timeTab-0" data-store="activeTabMenuItem" data-base-time="{$date}" data-room-id="{$room->roomID}">
 		<nav class="tabMenu">
 			<ul>
 				{section name=tabLoop loop=24 step=3}
-					{if $messages[$tabLoop * 2]|isset || $messages[$tabLoop * 2 + 1]|isset || $messages[$tabLoop * 2 + 2]|isset || $messages[$tabLoop * 2 + 3]|isset || $messages[$tabLoop * 2 + 4]|isset || $messages[$tabLoop * 2 + 5]|isset}
+					<li>
-						<li>
+						{assign var=anchor value='timeTab-'|concat:$tabLoop}
-							{assign var=anchor value='timeTab-'|concat:$tabLoop}
+						<a href="{@$__wcf->getAnchor($anchor)}">{if $tabLoop < 10}0{/if}{$tabLoop}:00 - {if $tabLoop + 2 < 10}0{/if}{$tabLoop + 2}:59</a>
-							<a href="{@$__wcf->getAnchor($anchor)}">{if $tabLoop < 10}0{/if}{$tabLoop}:00 - {if $tabLoop + 2 < 10}0{/if}{$tabLoop + 2}:59</a>
+					</li>
-						</li>
-					{/if}
 				{/section}
 			</ul>
 		</nav>
 		
 		{section name=contentLoop loop=24 step=3}
-			{if $messages[$contentLoop * 2]|isset || $messages[$contentLoop * 2 + 1]|isset || $messages[$contentLoop * 2 + 2]|isset || $messages[$contentLoop * 2 + 3]|isset || $messages[$contentLoop * 2 + 4]|isset || $messages[$contentLoop * 2 + 5]|isset}
+			<div id="timeTab-{$contentLoop}" class="container containerPadding tabMenuContainer tabMenuContent" data-menu-item="timeTab-{$contentLoop}">
-				<div id="timeTab-{$contentLoop}" class="container containerPadding tabMenuContainer tabMenuContent">
+				<nav class="menu">
-					<nav class="menu">
+					<ul>
-						<ul>
+						{section name=subTabLoop loop=6}
-							{section name=subTabLoop loop=6}
-								{if $messages[$contentLoop * 2 + $subTabLoop]|isset}
-									{assign var=subAnchor value='timeTab-'|concat:$contentLoop|concat:'-subTab-'|concat:$subTabLoop}
-									<li>
-										<a href="{@$__wcf->getAnchor($subAnchor)}">{if $contentLoop + $subTabLoop / 2 < 10}0{/if}{$contentLoop + $subTabLoop / 2|floor}:{if $subTabLoop % 2 == 0}0{/if}{($subTabLoop % 2) * 30} - {if $contentLoop + $subTabLoop / 2 < 10}0{/if}{$contentLoop + $subTabLoop / 2|floor}:{($subTabLoop % 2) * 30 + 29}</a>
-									</li>
-								{/if}
-							{/section}
-						</ul>
-					</nav>
-					
-					{section name=subTabLoop loop=6}
-						{if $messages[$contentLoop * 2 + $subTabLoop]|isset}
 							{assign var=subAnchor value='timeTab-'|concat:$contentLoop|concat:'-subTab-'|concat:$subTabLoop}
-							<div id="{$subAnchor}" class="hidden tabularBox">
+								<li data-hour="{$contentLoop + $subTabLoop / 2|floor}" data-minutes="{($subTabLoop % 2) * 30}">
-								<table class="table">
+									<a href="{@$__wcf->getAnchor($subAnchor)}">{if $contentLoop + $subTabLoop / 2 < 10}0{/if}{$contentLoop + $subTabLoop / 2|floor}:{if $subTabLoop % 2 == 0}0{/if}{($subTabLoop % 2) * 30} - {if $contentLoop + $subTabLoop / 2 < 10}0{/if}{$contentLoop + $subTabLoop / 2|floor}:{($subTabLoop % 2) * 30 + 29}</a>
-									<thead>
+								</li>
-										<tr>
+						{/section}
-											<th>{lang}wcf.global.objectID{/lang}</th>
+					</ul>
-											<th>{lang}chat.general.time{/lang}</th>
+				</nav>
-											<th colspan="2">{lang}wcf.user.username{/lang}</th>
+				
-											<th>{lang}chat.acp.log.message{/lang}</th>
+				{section name=subTabLoop loop=6}
-										</tr>
+					{assign var=subAnchor value='timeTab-'|concat:$contentLoop|concat:'-subTab-'|concat:$subTabLoop}
-									</thead>
+					<div id="{$subAnchor}" class="hidden subTabMenuContent{if !$messages[$contentLoop * 2 + $subTabLoop]|isset} empty{else} tabularBox{/if}">
-									
+						{if $messages[$contentLoop * 2 + $subTabLoop]|isset}
-									<tbody>
+							{include application='chat' file='__messageLogTable' sandbox='true' messages=$messages[$contentLoop * 2 + $subTabLoop]}
-										{foreach from=$messages[$contentLoop * 2 + $subTabLoop] item='message'}
-											<tr>
-												<td class="columnID">{$message->messageID}</td>
-												<td style="width: 1px !important;">{$message->time|date:'H:i:s'}</td>
-												<td class="columnIcon"><p class="framed">{@$message->getUserProfile()->getAvatar()->getImageTag(24)}</p></td>
-												<td class="columnTitle columnUsername right" style="width: 1px !important;">{$message->username}</td>
-												<td>{@$message->getFormattedMessage('text/simplified-html')}</td>
-											</tr>
-										{/foreach}
-									</tbody>
-								</table>
-							</div>
 						{/if}
-					{/section}
+					</div>
-				</div>
+				{/section}
-			{/if}
+			</div>
 		{/section}
 	</div>
 {/if}

file/acp/js/be.bastelstu.Chat.ACP.Log.litcoffee

@@ -0,0 +1,102 @@
+Tims Chat 3
+===========
+
+This is the javascript file providing functions related to the message log for [##Tims Chat##](https://github.com/wbbaddons/Tims-Chat).
+
+	### Copyright Information
+	# @author	Maximilian Mader
+	# @copyright	2010-2013 Tim Düsterhus
+	# @license	Creative Commons Attribution-NonCommercial-ShareAlike <http://creativecommons.org/licenses/by-nc-sa/3.0/legalcode>
+	# @package	be.bastelstu.chat
+	###
+
+## Code
+
+	(($, window) ->
+		"use strict";
+		
+		###
+		# message log content
+		# @var jQuery
+		###
+		_messageLogContent = null
+		
+		###
+		# list of containers
+		# @var object
+		###
+		_hasContent = {}
+		
+		###
+		# action proxy
+		# @var WCF.Action.Proxy
+		###
+		_proxy = null
+		
+		init = ->
+			_messageLogContent = $('#messageLogContent')
+			
+			activeMenuItem = _messageLogContent.data 'active'
+			enableProxy = false
+			
+			_messageLogContent.find('div.tabMenuContent > .subTabMenuContent').each (index, container) ->
+				containerID = $(container).wcfIdentify()
+				
+				if (! $("##{containerID}").hasClass 'empty')
+					_hasContent[containerID] = true
+				else
+					_hasContent[containerID] = false
+					enableProxy = true
+					
+			if (enableProxy)
+				_proxy = new WCF.Action.Proxy
+					success: _success
+					
+					_messageLogContent.bind 'wcftabsbeforeactivate',
+					_loadContent
+					
+		_loadContent = (event, ui) ->
+			containerID = $(ui.newPanel).attr 'id'
+			
+			if ($("##{$(ui.newPanel).attr('id')}").hasClass 'tabMenuContainer')
+				containerID = $("##{containerID} > .subTabMenuContent").first().attr 'id'
+				tab = $("##{containerID}").parent().find(".menu > ul > li").first()
+			else
+				tab = $(ui.newTab)
+				
+			unless _hasContent[containerID]
+				start = _messageLogContent.data('baseTime') + (tab.data('hour') * 3600) + (tab.data('minutes') * 60)
+				
+				_proxy.setOption 'data',
+					actionName: 'getMessages'
+					className: 'chat\\data\\message\\MessageAction'
+					parameters:
+						containerID: containerID
+						start: start
+						end: start + 1799
+						roomID: _messageLogContent.data('roomID')
+				_proxy.sendRequest()
+				
+		_success = (data, textStatus, jqWHR) ->
+			containerID = data.returnValues.containerID
+			_hasContent[containerID] = true
+			
+			content = _messageLogContent.find "##{containerID}"
+			if(data.returnValues.template != '')
+				$("<div>#{data.returnValues.template}</div>").hide().appendTo content
+				if(!data.returnValues.noMessages)
+					content.addClass 'tabularBox'
+				
+			content.children().first().show()
+		
+		Log =
+			TabMenu:
+				init: init
+				
+		window.be ?= {}
+		be.bastelstu ?= {}
+		be.bastelstu.Chat ?= {}
+		be.bastelstu.Chat.ACP ?= {}
+		be.bastelstu.Chat.ACP.Log ?= {}
+		window.be.bastelstu.Chat.ACP.Log = Log
+	)(jQuery, @)

file/lib/acp/page/MessageLogPage.class.php

@@ -101,7 +101,7 @@ public function readData() {
 			return;
 		}
 		
-		$messages = \chat\data\message\ViewableMessageList::getMessagesBetween($this->room, $this->date, $this->date + 86399);
+		$messages = \chat\data\message\ViewableMessageList::getMessagesBetween($this->room, $this->date, $this->date + 1799);
 		
 		foreach ($messages as $message) {
 			$hour = ((int) date('H', $message->time)) * 2;

file/lib/data/message/MessageAction.class.php

@@ -164,4 +164,37 @@ public function send() {
 		// add activity points
 		\wcf\system\user\activity\point\UserActivityPointHandler::getInstance()->fireEvent('be.bastelstu.chat.activityPointEvent.message', $returnValues['returnValues']->messageID, WCF::getUser()->userID);
 	}
+	
+	/**
+	 * Fetches messages in between the specified timestamps.
+	 *
+	 * @return array Array containing message table, containerID and information about an empty message table.
+	 */
+	public function getMessages() {
+		// read messages
+		$messages = \chat\data\message\ViewableMessageList::getMessagesBetween($this->parameters['room'], $this->parameters['start'], $this->parameters['end']);
+		
+		return array(
+			'noMessages' => (count($messages) == 0) ? true : null,
+			'containerID' => $this->parameters['containerID'],
+			'template' => WCF::getTPL()->fetch('__messageLogTable', 'chat', array('messages' => $messages), true)
+		);
+	}
+	
+	/**
+	 * Validates getting messages.
+	 */
+	public function validateGetMessages() {
+		// check permissions
+		WCF::getSession()->checkPermissions(array('mod.chat.canReadLog'));
+		
+		// read parameters
+		$this->readInteger('roomID');
+		$this->readInteger('start');
+		$this->readInteger('end');
+		
+		// read and validate room
+		$this->parameters['room'] = room\RoomCache::getInstance()->getRoom($this->parameters['roomID']);
+		if ($this->parameters['room'] === null) throw new \wcf\system\exception\IllegalLinkException();
+	}
 }