1
0
mirror of https://github.com/wbbaddons/Tims-Chat.git synced 2024-10-31 14:10:08 +00:00

Show Chatlog inline

This commit is contained in:
Tim Düsterhus 2013-01-09 19:59:32 +01:00
parent 9a5f3043ba
commit d2f23cb5a7
8 changed files with 102 additions and 266 deletions

View File

@ -7,104 +7,28 @@
# @package be.bastelstu.wcf.chat
###
(($, window, _console) ->
be.bastelstu.WCF.Chat.Log = $.extend true, { }, be.bastelstu.WCF.Chat,
init: () ->
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
###
(($, window) ->
be.bastelstu.WCF.Chat.Log = be.bastelstu.WCF.Chat.extend
init: (@chat) ->
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'
###
# 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'
li.appendTo $ '#timsChatLog .timsChatMessageContainer > ul'
$('#timsChatRoomList').hide()
$('#timsChatUserList').show()
else if target.parents('li').attr('id') is 'toggleRooms'
$('#toggleRooms').addClass 'active'
$('#toggleUsers').removeClass 'active'
$('#timsChatUserList').hide()
$('#timsChatRoomList').show()
)(jQuery, @, console)
be.bastelstu.WCF.Chat.Log.loadOverlay = () ->
if !$.wcfIsset 'timsChatLogDialog'
container = $ '<fieldset id="timsChatLogDialog"></fieldset>'
$('#content').append container
$('#timsChatLogDialog').load 'http://127.0.0.1/wbb/wbb4/index.php/Chat/Log/1-Hauptchat/', () ->
WCF.showDialog 'timsChatLogDialog',
title: 'Log'
)(jQuery, @)

View File

@ -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()
@oldScrollTop = $('.timsChatMessageContainer').scrollTop()
$('#timsChatMessageContainer').scrollTop $('#timsChatMessageContainer ul').height() if $('#timsChatAutoscroll').data('status') is 1
@oldScrollTop = $('#timsChatMessageContainer').scrollTop()
###
# Builds the userlist.
#

View File

@ -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 {
height: 200px;
overflow-y: scroll;
overflow-x: hidden;
padding-left: 7px !important;
.timsChatMessage {
padding-left: 16px;
min-height: 16px;
clear: both;
time:first-child {
font-size: .8em;
&::before, &::after {
font-size: .8em;
}
&::before {
content: "[";
}
&::after {
content: "]";
}
}
.username {
font-weight: bold;
}
&.unloaded {
opacity: 0.4;
}
time:first-child {
font-size: .8em;
&::before, &::after {
font-size: .8em;
}
&::before {
content: "[";
}
&::after {
content: "]";
}
}
.username {
font-weight: bold;
}
&.unloaded {
opacity: 0.4;
}
}
}
#timsChatLog .timsChatMessageContainer {
height: auto;
overflow: visible;
}
.sidebar {
margin-bottom: -20px !important;
padding: 0;

View File

@ -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();
be.bastelstu.WCF.Chat.init();
new WCF.Message.Smilies();{*
*}{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([
{implode from=$newestMessages item='message'}
{@$message->jsonify()}
{/implode}
chat.handleMessages([
{implode from=$newestMessages item='message'}{@$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>

View File

@ -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{if $chatVersion|isset}?version={$chatVersion|urlencode}{/if}"></script>
{/if}
<script type="text/javascript" src="{@$__wcf->getPath('wcf')}js/be.bastelstu.WCF.Chat.Log.js"></script>
{event name='javascript'}

View File

@ -1,108 +1,16 @@
{include file='documentHeader'}
<head>
<title>{$room} - {lang}wcf.chat.log.title{/lang} - {PAGE_TITLE|language}</title>
{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 id="timsChatLog">
<div class="timsChatMessageContainer">
<ul>
</ul>
</div>
{include file='chatCopyright'}
</div>
{include file='chatJavascriptInclude'}
<script type="text/javascript">
//<![CDATA[
(function ($, window) {
// remove noscript message
$('.timsChatMessageContainer .error').remove();
// populate templates
{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)
var log = new be.bastelstu.WCF.Chat.Log(chat);
log.handleMessages([
{implode from=$messages item='message'}
{@$message->jsonify()}
{/implode}
]);
//]]>
</script>
{include file='footer' sandbox=false}
</body>
</html>

View File

@ -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>