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
parent
9a5f3043ba
commit
d2f23cb5a7
@ -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'
|
||||
li.appendTo $ '#timsChatLog .timsChatMessageContainer > ul'
|
||||
|
||||
$.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
|
||||
be.bastelstu.WCF.Chat.Log.loadOverlay = () ->
|
||||
if !$.wcfIsset 'timsChatLogDialog'
|
||||
container = $ '<fieldset id="timsChatLogDialog"></fieldset>'
|
||||
$('#content').append container
|
||||
|
||||
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()
|
||||
$('#timsChatUserList').show()
|
||||
else if target.parents('li').attr('id') is 'toggleRooms'
|
||||
$('#toggleRooms').addClass 'active'
|
||||
$('#toggleUsers').removeClass 'active'
|
||||
|
||||
$('#timsChatUserList').hide()
|
||||
$('#timsChatRoomList').show()
|
||||
)(jQuery, @, console)
|
||||
$('#timsChatLogDialog').load 'http://127.0.0.1/wbb/wbb4/index.php/Chat/Log/1-Hauptchat/', () ->
|
||||
WCF.showDialog 'timsChatLogDialog',
|
||||
title: 'Log'
|
||||
)(jQuery, @)
|
||||
|
||||
@ -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.
|
||||
#
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
* @package be.bastelstu.wcf.chat
|
||||
*/
|
||||
|
||||
#tplChat, #tplChatLog {
|
||||
#tplChat {
|
||||
#content {
|
||||
#timsChatRoomContent {
|
||||
text-align: left;
|
||||
@ -15,6 +15,8 @@
|
||||
#timsChatTopic {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timsChatMessageContainer {
|
||||
height: 200px;
|
||||
@ -49,7 +51,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#timsChatLog .timsChatMessageContainer {
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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'}
|
||||
@ -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">
|
||||
<div id="timsChatLog">
|
||||
<div class="timsChatMessageContainer">
|
||||
<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) {
|
||||
// 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([
|
||||
var log = new be.bastelstu.WCF.Chat.Log(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>
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user