Show Chatlog inline

file/js/be.bastelstu.WCF.Chat.Log.coffee

@@ -7,104 +7,28 @@
 # @package	be.bastelstu.wcf.chat
 ###
 
-(($, window, _console) ->
+(($, window) ->
-	be.bastelstu.WCF.Chat.Log = $.extend true, { }, be.bastelstu.WCF.Chat, 
+	be.bastelstu.WCF.Chat.Log = be.bastelstu.WCF.Chat.extend
-		init: () ->
+		init: (@chat) ->
-			console.log 'Initializing'
-			@bindEvents()
-			console.log 'Finished initializing - Shields at 104 percent'
-		###
-		# Binds all the events needed for Tims Chat.
-		###
-		bindEvents: () ->
-			# Switch sidebar tab
-			$('.timsChatSidebarTabs li').click $.proxy (event) ->
-				event.preventDefault()
-				@toggleSidebarContents $ event.target
-			, @
-			
-			# Refreshes the roomlist
-			$('#timsChatRoomList button').click $.proxy(@refreshRoomList, @)
-			
-			# Toggle Buttons
-			$('.timsChatToggle').click (event) ->
-				element = $ @
-				icon = element.find 'img'
-				if element.data('status') is 1
-					element.data 'status', 0
-					icon.attr 'src', icon.attr('src').replace /enabled(Inverse)?.([a-z]{3})$/, 'disabled$1.$2'
-					element.attr 'title', element.data 'enableMessage'
-				else
-					element.data 'status', 1
-					icon.attr 'src', icon.attr('src').replace /disabled(Inverse)?.([a-z]{3})$/, 'enabled$1.$2'
-					element.attr 'title', element.data 'disableMessage'
-					
-				$('#timsChatInput').focus()
-			
-			# Enable fullscreen-mode
-			$('#timsChatFullscreen').click (event) ->
-				if $(@).data 'status'
-					$('html').addClass 'fullscreen'
-				else
-					$('html').removeClass 'fullscreen'
-		###
-		# Inserts the new messages.
-		#
-		# @param	array<object>	messages
-		###
 		handleMessages: (messages) ->
 			# Insert the messages
 			for message in messages
-				continue if $.wcfIsset 'timsChatMessage' + message.messageID # Prevent problems with race condition
+				@events.newMessage.fire message
 				
-				output = @messageTemplate.fetch message
+				output = @chat.messageTemplate.fetch message
 				li = $ '<li></li>'
-				li.attr 'id', 'timsChatMessage'+message.messageID
 				li.addClass 'timsChatMessage timsChatMessage'+message.type
+				li.addClass 'ownMessage' if message.sender is WCF.User.userID
 				li.append output
 				
-				li.appendTo $ '.timsChatMessageContainer > ul'
+				li.appendTo $ '#timsChatLog .timsChatMessageContainer > ul'
-		###
-		# Refreshes the room-list.
-		###
-		refreshRoomList: () ->
-			console.log 'Refreshing the roomlist'
-			$('#toggleRooms a').addClass 'ajaxLoad'
-			
-			$.ajax $('#toggleRooms a').data('refreshUrl'),
-				dataType: 'json'
-				type: 'POST'
-				success: $.proxy((data, textStatus, jqXHR) ->
-					$('#timsChatRoomList li').remove()
-					$('#toggleRooms a').removeClass 'ajaxLoad'
-					$('#toggleRooms .badge').text data.length
-					
-					for room in data
-						li = $ '<li></li>'
-						li.addClass 'activeMenuItem' if room.active
-						$('<a href="' + room.link + '">' + room.title + '</a>').addClass('timsChatRoom').appendTo li
-						$('#timsChatRoomList ul').append li
-					
-					console.log 'Found ' + data.length + ' rooms'
-				, @)
-		###
-		# Toggles between user- and room-list.
-		# 
-		# @param	jQuery-object	target
-		###
-		toggleSidebarContents: (target) ->
-			return if target.parents('li').hasClass 'active'
-			
-			if target.parents('li').attr('id') is 'toggleUsers'
-				$('#toggleUsers').addClass 'active'
-				$('#toggleRooms').removeClass 'active'
 				
-				$('#timsChatRoomList').hide()
+	be.bastelstu.WCF.Chat.Log.loadOverlay = () ->
-				$('#timsChatUserList').show()
+		if !$.wcfIsset 'timsChatLogDialog'
-			else if target.parents('li').attr('id') is 'toggleRooms'
+			container = $ '<fieldset id="timsChatLogDialog"></fieldset>'
-				$('#toggleRooms').addClass 'active'
+			$('#content').append container
-				$('#toggleUsers').removeClass 'active'
+			
-				
+		$('#timsChatLogDialog').load 'http://127.0.0.1/wbb/wbb4/index.php/Chat/Log/1-Hauptchat/', () ->
-				$('#timsChatUserList').hide()
+			WCF.showDialog 'timsChatLogDialog', 
-				$('#timsChatRoomList').show()
+				title: 'Log'
-)(jQuery, @, console)
+)(jQuery, @)

file/js/be.bastelstu.WCF.Chat.coffee

@@ -26,7 +26,7 @@ window.console ?=
 			_console.error '[be.bastelstu.WCF.Chat] '+message
 		
 	
-	be.bastelstu.WCF.Chat =
+	be.bastelstu.WCF.Chat = Class.extend
 		# Tims Chat stops loading when this reaches zero
 		# TODO: We need an explosion animation
 		shields: 3
@@ -63,7 +63,7 @@ window.console ?=
 			getMessages: null
 			refreshRoomList: null
 			fish: null
-		init: () ->
+		init: (@config, @titleTemplate, @messageTemplate) ->
 			console.log 'Initializing'
 			@bindEvents()
 			@events.newMessage.add $.proxy @notify, @
@@ -178,7 +178,7 @@ window.console ?=
 				event.preventDefault()
 				$('.timsChatMessage').remove()
 				@oldScrollTop = null
-				$('.timsChatMessageContainer').scrollTop $('.timsChatMessageContainer ul').height()
+				$('#timsChatMessageContainer').scrollTop $('#timsChatMessageContainer ul').height()
 			
 			# Toggle Buttons
 			$('.timsChatToggle').click (event) ->
@@ -206,7 +206,7 @@ window.console ?=
 			$('#timsChatAutoscroll').click (event) ->
 				$(@).removeClass 'active'
 				if $(@).data 'status'
-					$('.timsChatMessageContainer').scrollTop $('.timsChatMessageContainer ul').height()
+					$('#timsChatMessageContainer').scrollTop $('#timsChatMessageContainer ul').height()
 					@oldScrollTop = $('.timsChatMessageContainer').scrollTop()
 					
 			# Desktop Notifications
@@ -299,13 +299,13 @@ window.console ?=
 			$.ajax @config.messageURL,
 				dataType: 'json'
 				type: 'POST'
-				success: $.proxy((data, textStatus, jqXHR) ->
+				success: $.proxy (data, textStatus, jqXHR) ->
 					WCF.DOMNodeInsertedHandler.enable()
 					@handleMessages(data.messages)
 					@handleUsers(data.users)
 					WCF.DOMNodeInsertedHandler.disable()
-				, @)
+				, @
-				error: $.proxy((jqXHR, textStatus, errorThrown) ->
+				error: $.proxy (jqXHR, textStatus, errorThrown) ->
 					console.error 'Battle Station hit - shields at ' + (--@shields / 3 * 104) + ' percent'
 					if @shields is 0
 						@pe.refreshRoomList.stop()
@@ -313,15 +313,15 @@ window.console ?=
 						@freeTheFish()
 						console.error 'We got destroyed, but could free our friend the fish before he was killed as well. Have a nice life in freedom!'
 						alert 'herp i cannot load messages'
-				, @),
+				, @
-				complete: $.proxy(() ->
+				complete: $.proxy () ->
 					@loading = false
-				, @)
+				, @
-				beforeSend: $.proxy(() ->
+				beforeSend: $.proxy () ->
 					return false if @loading
 					
 					@loading = true
-				, @)
+				, @
 		###
 		# Inserts the new messages.
 		#
@@ -330,7 +330,7 @@ window.console ?=
 		handleMessages: (messages) ->
 			# Disable scrolling automagically when user manually scrolled
 			unless @oldScrollTop is null
-				if $('.timsChatMessageContainer').scrollTop() < @oldScrollTop
+				if $('#timsChatMessageContainer').scrollTop() < @oldScrollTop
 					if $('#timsChatAutoscroll').data('status') is 1
 						$('#timsChatAutoscroll').click()
 						$('#timsChatAutoscroll').addClass 'active'
@@ -348,12 +348,11 @@ window.console ?=
 				li.addClass 'ownMessage' if message.sender is WCF.User.userID
 				li.append output
 				
-				li.appendTo $ '.timsChatMessageContainer > ul'
+				li.appendTo $ '#timsChatMessageContainer > ul'
 				
 			# Autoscroll down
-			if $('#timsChatAutoscroll').data('status') is 1
+			$('#timsChatMessageContainer').scrollTop $('#timsChatMessageContainer ul').height() if $('#timsChatAutoscroll').data('status') is 1
-				$('.timsChatMessageContainer').scrollTop $('.timsChatMessageContainer ul').height()
+			@oldScrollTop = $('#timsChatMessageContainer').scrollTop()
-			@oldScrollTop = $('.timsChatMessageContainer').scrollTop()
 		###
 		# Builds the userlist.
 		#

file/style/be.bastelstu.wcf.chat.less

@@ -7,7 +7,7 @@
  * @package	be.bastelstu.wcf.chat
  */
 
-#tplChat, #tplChatLog {
+#tplChat {
 	#content {
 		#timsChatRoomContent {
 			text-align: left;
@@ -15,43 +15,48 @@
 			#timsChatTopic {
 				padding: 5px;
 			}
+		}
+	}
+	
+	.timsChatMessageContainer {
+		height: 200px;
+		overflow-y: scroll;
+		overflow-x: hidden;
+		padding-left: 7px !important;
+		
+		.timsChatMessage {
+			padding-left: 16px;
+			min-height: 16px;
+			clear: both;
 			
-			.timsChatMessageContainer {
+			time:first-child {
-				height: 200px;
+				font-size: .8em;
-				overflow-y: scroll;
+				&::before, &::after {
-				overflow-x: hidden;
+					font-size: .8em;
-				padding-left: 7px !important;
+				}
-				
+				&::before {
-				.timsChatMessage {
+					content: "[";
-					padding-left: 16px;
+				}
-					min-height: 16px;
+				&::after {
-					clear: both;
+					content: "]";
-					
-					time:first-child {
-						font-size: .8em;
-						&::before, &::after {
-							font-size: .8em;
-						}
-						&::before {
-							content: "[";
-						}
-						&::after {
-							content: "]";
-						}
-					}
-					
-					.username {
-						font-weight: bold;
-					}
-					
-					&.unloaded {
-						opacity: 0.4;
-					}
 				}
 			}
+			
+			.username {
+				font-weight: bold;
+			}
+			
+			&.unloaded {
+				opacity: 0.4;
+			}
 		}
 	}
 	
+	#timsChatLog .timsChatMessageContainer {
+		height: auto;
+		overflow: visible;
+	}
+	
 	.sidebar {
 		margin-bottom: -20px !important;
 		padding: 0;

template/chat.tpl

@@ -43,7 +43,7 @@
 <div id="timsChatRoomContent">
 	<div id="timsChatTopic" class="container"{if $room->topic|language === ''} style="display: none;"{/if}>{$room->topic|language}</div>
 	<fieldset>
-		<div class="timsChatMessageContainer container box shadow1">
+		<div id="timsChatMessageContainer" class="timsChatMessageContainer container box shadow1">
 			<ul>
 				<li class="error">{lang}wcf.chat.noJs{/lang}</li>
 			</ul>
@@ -123,22 +123,11 @@
 {include file='chatJavascriptInclude'}
 <script type="text/javascript">
 	//<![CDATA[
+		var chat;
 		(function ($, window) {
 			// remove noscript message
 			$('.timsChatMessageContainer .error').remove();
 			
-			// populate templates
-			be.bastelstu.WCF.Chat.titleTemplate = (new WCF.Template('{ldelim}$title} - {'wcf.chat.title'|language|encodeJS} - {PAGE_TITLE|language|encodeJS}')).compile();
-			{capture assign='chatMessageTemplate'}{include file='chatMessage'}{/capture}
-			be.bastelstu.WCF.Chat.messageTemplate = (new WCF.Template('{@$chatMessageTemplate|encodeJS}')).compile();
-			
-			// populate config
-			be.bastelstu.WCF.Chat.config = {
-				reloadTime: {@CHAT_RELOADTIME},
-				unloadURL: '{link controller="Chat" action="Leave"}{/link}',
-				messageURL: '{link controller="Chat" action="Message"}{/link}',
-				socketIOPath: '{@CHAT_SOCKET_IO_PATH|encodeJS}'
-			}
 			WCF.Language.addObject({
 				'wcf.chat.query': '{lang}wcf.chat.query{/lang}',
 				'wcf.chat.kick': '{lang}wcf.chat.kick{/lang}',
@@ -152,19 +141,26 @@
 			{event name='shouldInit'}
 			// Boot the chat
 			WCF.TabMenu.init();
-			new WCF.Message.Smilies();
+			new WCF.Message.Smilies();{*
-			be.bastelstu.WCF.Chat.init();
+			*}{capture assign='chatMessageTemplate'}{include file='chatMessage'}{/capture}
+			
+			
+			chat = new be.bastelstu.WCF.Chat({
+				reloadTime: {@CHAT_RELOADTIME},
+				unloadURL: '{link controller="Chat" action="Leave"}{/link}',
+				messageURL: '{link controller="Chat" action="Message"}{/link}',
+				socketIOPath: '{@CHAT_SOCKET_IO_PATH|encodeJS}'
+			}, (new WCF.Template('{ldelim}$title} - {'wcf.chat.title'|language|encodeJS} - {PAGE_TITLE|language|encodeJS}')).compile(), (new WCF.Template('{@$chatMessageTemplate|encodeJS}')).compile());
 			{event name='didInit'}
 			
 			// show the last X messages
-			be.bastelstu.WCF.Chat.handleMessages([
+			chat.handleMessages([
-				{implode from=$newestMessages item='message'}
+				{implode from=$newestMessages item='message'}{@$message->jsonify()}{/implode}
-					{@$message->jsonify()}
-				{/implode}
 			]);
 			
 			// enable user-interface
 			$('#timsChatInput').enable().jCounter().focus();
+			
 			$('#timsChatCopyright').click(function (event) {
 				event.preventDefault();
 				if ($.wcfIsset('timsChatCopyrightDialog')) return WCF.showDialog('timsChatCopyrightDialog', { title: 'Tims Chat{if CHAT_SHOW_VERSION && $chatVersion|isset} {$chatVersion}{/if}' });
@@ -174,6 +170,12 @@
 					WCF.showDialog('timsChatCopyrightDialog', { title: 'Tims Chat{if CHAT_SHOW_VERSION && $chatVersion|isset} {$chatVersion}{/if}' });
 				});
 			});
+			
+			$('#chatLogLink').click(function (event) {
+				event.preventDefault();
+				
+				be.bastelstu.WCF.Chat.Log.loadOverlay();
+			});
 		})(jQuery, this)
 	//]]>
 </script>

template/chatJavascriptInclude.tpl

@@ -1,7 +1,5 @@
 <script type="text/javascript" src="{@$__wcf->getPath('wcf')}js/be.bastelstu.WCF.Chat.js{if $chatVersion|isset}?version={$chatVersion|urlencode}{/if}"></script>
 <script type="text/javascript" src="{@$__wcf->getPath('wcf')}js/jCounter.jQuery.js"></script>
 {if CHAT_SOCKET_IO_PATH}<script type="text/javascript" src="{CHAT_SOCKET_IO_PATH}/socket.io/socket.io.js"></script>{/if}
-{if $templateName == 'chatLog'}
+<script type="text/javascript" src="{@$__wcf->getPath('wcf')}js/be.bastelstu.WCF.Chat.Log.js"></script>
-	<script type="text/javascript" src="{@$__wcf->getPath('wcf')}js/be.bastelstu.WCF.Chat.Log.js{if $chatVersion|isset}?version={$chatVersion|urlencode}{/if}"></script>
-{/if}
 {event name='javascript'}

template/chatLog.tpl

@@ -1,108 +1,16 @@
-{include file='documentHeader'}
+<div id="timsChatLog">
-
+	<div class="timsChatMessageContainer">
-<head>
+		<ul>
-	<title>{$room} - {lang}wcf.chat.log.title{/lang} - {PAGE_TITLE|language}</title>
+		</ul>
-	
-	{include file='headInclude' sandbox=false}
-	<style type="text/css">
-		#timsChatCopyrightDialog {
-			background-image: url("{link controller='Chat' action='Copyright' sheep=1}{/link}");
-		}
-		
-		{assign var='type' value='\wcf\data\chat\message\ChatMessage::TYPE_'}
-		.timsChatMessage{$type|concat:'JOIN'|constant}, .timsChatMessage{$type|concat:'LEAVE'|constant},
-		.timsChatMessage{$type|concat:'INFORMATION'|constant}, .timsChatMessage{$type|concat:'ERROR'|constant} {
-			background-position: left top;
-			background-repeat: no-repeat;
-			background-size: 16px 16px;
-		}
-		
-		.timsChatMessage{$type|concat:'JOIN'|constant} {
-			background-image: url({icon size='S'}circleArrowRight{/icon});
-		}
-		
-		.timsChatMessage{$type|concat:'LEAVE'|constant} {
-			background-image: url({icon size='S'}circleArrowLeft{/icon});
-		}
-		
-		.timsChatMessage{$type|concat:'INFORMATION'|constant} {
-			background-image: url({icon size='S'}systemInfo{/icon});
-		}
-		
-		.timsChatMessage{$type|concat:'ERROR'|constant} {
-			background-image: url({icon size='S'}systemError{/icon});
-		}
-	</style>
-</head>
-
-<body id="tpl{$templateName|ucfirst}">
-{capture assign='sidebar'}{include file='chatLogSidebar'}{/capture}
-{capture assign='headerNavigation'}{include file='chatNavigationInclude'}{/capture}
-{include file='header' sandbox=false sidebarOrientation='right'}
-
-<div id="timsChatRoomContent">
-	<fieldset>
-		<div class="timsChatMessageContainer container box shadow1">
-			<ul>
-				<li class="error">{lang}wcf.chat.noJs{/lang}</li>
-			</ul>
-		</div>
-	</fieldset>
-	
-	<div id="timsChatControls" class="marginTop">
-		<nav id="timsChatOptions">
-			<ul class="smallButtons">
-				<li>
-					<a id="timsChatFullscreen" accesskey="f" class="timsChatToggle jsTooltip button" title="{lang}wcf.global.button.disable{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="0">
-						<img alt="" src="{icon size='S'}disabled{/icon}" /> <span>{lang}wcf.chat.fullscreen{/lang}</span>
-					</a>
-				</li>
-				<li>
-					<a id="timsChatMark" class="jsTooltip button" title="{lang}wcf.chat.mark.description{/lang}">
-						<img alt="" src="{icon size='S'}check{/icon}" /> <span>{lang}wcf.chat.mark{/lang}</span>
-					</a>
-				</li>
-			</ul>
-		</nav>
 	</div>
-	{include file='chatCopyright'}
 </div>
-{include file='chatJavascriptInclude'}
 <script type="text/javascript">
 	//<![CDATA[
-		(function ($, window) {
+		var log = new be.bastelstu.WCF.Chat.Log(chat);
-			// remove noscript message
+		log.handleMessages([
-			$('.timsChatMessageContainer .error').remove();
+			{implode from=$messages item='message'}
-			
+				{@$message->jsonify()}
-			// populate templates
+			{/implode}
-			{capture assign='chatMessageTemplate'}{include file='chatMessage'}{/capture}
+		]);
-			be.bastelstu.WCF.Chat.Log.messageTemplate = (new WCF.Template('{@$chatMessageTemplate|encodeJS}')).compile();
-			
-			{event name='shouldInit'}
-			// Boot the chat
-			be.bastelstu.WCF.Chat.Log.init();
-			{event name='didInit'}
-			
-			// show the last X messages
-			be.bastelstu.WCF.Chat.Log.handleMessages([
-				{implode from=$messages item='message'}
-					{@$message->jsonify()}
-				{/implode}
-			]);
-			
-			$('#timsChatCopyright').click(function (event) {
-				event.preventDefault();
-				if ($.wcfIsset('timsChatCopyrightDialog')) return WCF.showDialog('timsChatCopyrightDialog', { title: 'Tims Chat{if CHAT_SHOW_VERSION && $chatVersion|isset} {$chatVersion}{/if}' });
-				var container = $('<fieldset id="timsChatCopyrightDialog"></fieldset>');
-				container.load('{link controller='Chat' action='Copyright'}{/link}', function() {
-					$('body').append(container);
-					WCF.showDialog('timsChatCopyrightDialog', { title: 'Tims Chat{if CHAT_SHOW_VERSION && $chatVersion|isset} {$chatVersion}{/if}' });
-				});
-			});
-		})(jQuery, this)
 	//]]>
 </script>
-
-{include file='footer' sandbox=false}
-</body>
-</html>

template/chatNavigationInclude.tpl

@@ -1,5 +1,5 @@
 <li>
-	<a href="{link controller="Chat" action="Log"}{/link}" title="{lang}wcf.chat.protocol{/lang}" class="jsTooltip">
+	<a id="chatLogLink" title="{lang}wcf.chat.protocol{/lang}" class="jsTooltip">
 		<img src="{icon size='S'}eye{/icon}" alt="" /> <span>{lang}wcf.chat.protocol{/lang}</span>
 	</a>
 </li>