Bastelstube/Tims-Chat
1
0
Fork 0
mirror of https://github.com/wbbaddons/Tims-Chat.git synced 2024-12-22 21:40:08 +00:00
Code Issues Releases Wiki Activity

Merge branch 'master' into acp

Browse Source
This commit is contained in:
Tim Düsterhus 2012-02-05 18:08:25 +01:00
commit 3bd1f13faa
5 changed files with 137 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
file/js/TimWolla.WCF.Chat.coffee
View File

@ -52,7 +52,7 @@ consoleMock ?=
users = [] users = []
# Search all matching users # Search all matching users
for user in $ '.chatUser' for user in $ '.timsChatUser'
username = $(user).data('username'); username = $(user).data('username');
if username.indexOf(firstChars) is 0 if username.indexOf(firstChars) is 0
users.push username users.push username
@ -65,7 +65,8 @@ consoleMock ?=
### ###
bindEvents: () -> bindEvents: () ->
$(window).focus $.proxy () -> $(window).focus $.proxy () ->
document.title = @titleTemplate.fetch({ title: $('#chatRoomList .activeMenuItem a').text() }) document.title = @titleTemplate.fetch
title: $('#timsChatRoomList .activeMenuItem a').text()
@newMessageCount = 0 @newMessageCount = 0
@isActive = true @isActive = true
, @ , @
@ -80,24 +81,24 @@ consoleMock ?=
, @ , @
# Switch sidebar tab # Switch sidebar tab
$('.chatSidebarTabs li').click $.proxy (event) -> $('.timsChatSidebarTabs li').click $.proxy (event) ->
event.preventDefault() event.preventDefault()
@toggleSidebarContents $ event.target @toggleSidebarContents $ event.target
, @ , @
# Submit Handler # Submit Handler
$('#chatForm').submit $.proxy (event) -> $('#timsChatForm').submit $.proxy (event) ->
event.preventDefault() event.preventDefault()
@submit $ event.target @submit $ event.target
, @ , @
# Autocompleter # Autocompleter
$('#chatInput').keydown $.proxy (event) -> $('#timsChatInput').keydown $.proxy (event) ->
# tab key # tab key
if event.keyCode is 9 if event.keyCode is 9
event.preventDefault() event.preventDefault()
if @autocompleteValue is null if @autocompleteValue is null
@autocompleteValue = $('#chatInput').val() @autocompleteValue = $('#timsChatInput').val()
firstChars = @autocompleteValue.substring(@autocompleteValue.lastIndexOf(' ')+1) firstChars = @autocompleteValue.substring(@autocompleteValue.lastIndexOf(' ')+1)
@ -105,7 +106,7 @@ consoleMock ?=
return if firstChars.length is 0 return if firstChars.length is 0
# Insert name and increment offset # Insert name and increment offset
$('#chatInput').val(@autocompleteValue.substring(0, @autocompleteValue.lastIndexOf(' ') + 1) + @autocomplete(firstChars) + ', ') $('#timsChatInput').val(@autocompleteValue.substring(0, @autocompleteValue.lastIndexOf(' ') + 1) + @autocomplete(firstChars) + ', ')
@autocompleteOffset++ @autocompleteOffset++
else else
@autocompleteOffset = 0 @autocompleteOffset = 0
@ -113,18 +114,18 @@ consoleMock ?=
, @ , @
# Refreshes the roomlist # Refreshes the roomlist
$('#chatRoomList button').click $.proxy(@refreshRoomList, @) $('#timsChatRoomList button').click $.proxy(@refreshRoomList, @)
# Clears the stream # Clears the stream
$('#chatClear').click (event) -> $('#timsChatClear').click (event) ->
event.preventDefault() event.preventDefault()
$('.chatMessage').remove() $('.timsChatMessage').remove()
@oldScrollTop = $('.chatMessageContainer').scrollTop() @oldScrollTop = $('.timsChatMessageContainer').scrollTop()
$('.chatMessageContainer').scrollTop $('.chatMessageContainer ul').height() $('.timsChatMessageContainer').scrollTop $('.timsChatMessageContainer ul').height()
$('#chatInput').focus() $('#timsChatInput').focus()
# Toggle Buttons # Toggle Buttons
$('.chatToggle').click (event) -> $('.timsChatToggle').click (event) ->
element = $ @ element = $ @
icon = element.find 'img' icon = element.find 'img'
if element.data('status') is 1 if element.data('status') is 1
@ -137,15 +138,15 @@ consoleMock ?=
element.attr 'title', element.data 'disableMessage' element.attr 'title', element.data 'disableMessage'
# Immediatly scroll down when activating autoscroll # Immediatly scroll down when activating autoscroll
$('#chatAutoscroll').click (event) -> $('#timsChatAutoscroll').click (event) ->
$(this).removeClass('hot') $(this).removeClass('hot')
if $(this).data 'status' if $(this).data 'status'
$('.chatMessageContainer').scrollTop $('.chatMessageContainer ul').height() $('.timsChatMessageContainer').scrollTop $('.timsChatMessageContainer ul').height()
@oldScrollTop = $('.chatMessageContainer').scrollTop() @oldScrollTop = $('.timsChatMessageContainer').scrollTop()
# Desktop Notifications # Desktop Notifications
unless typeof window.webkitNotifications is 'undefined' unless typeof window.webkitNotifications is 'undefined'
$('#chatNotify').click (event) -> $('#timsChatNotify').click (event) ->
window.webkitNotifications.requestPermission() if $(this).data 'status' window.webkitNotifications.requestPermission() if $(this).data 'status'
### ###
@ -166,7 +167,7 @@ consoleMock ?=
target.parent().removeClass 'ajaxLoad' target.parent().removeClass 'ajaxLoad'
# Mark as active # Mark as active
$('.activeMenuItem .chatRoom').parent().removeClass 'activeMenuItem' $('.activeMenuItem .timsChatRoom').parent().removeClass 'activeMenuItem'
target.parent().addClass 'activeMenuItem' target.parent().addClass 'activeMenuItem'
# Set new topic # Set new topic
@ -179,8 +180,9 @@ consoleMock ?=
$('#topic').text data.topic $('#topic').text data.topic
$('#topic').wcfBlindIn() if $('#topic').text().trim() isnt '' and $('#topic').is(':hidden') $('#topic').wcfBlindIn() if $('#topic').text().trim() isnt '' and $('#topic').is(':hidden')
@handleMessages(data.messages) $('.timsChatMessage').animate('opacity', .8);
document.title = @titleTemplate.fetch(data) @handleMessages data.messages
document.title = @titleTemplate.fetch data
, @) , @)
error: () -> error: () ->
# Reload the page to change the room the old fashion-way # Reload the page to change the room the old fashion-way
@ -243,10 +245,10 @@ consoleMock ?=
handleMessages: (messages) -> handleMessages: (messages) ->
# Disable scrolling automagically when user manually scrolled # Disable scrolling automagically when user manually scrolled
unless @oldScrollTop is null unless @oldScrollTop is null
if $('.chatMessageContainer').scrollTop() < @oldScrollTop if $('.timsChatMessageContainer').scrollTop() < @oldScrollTop
if $('#chatAutoscroll').data('status') is 1 if $('#timsChatAutoscroll').data('status') is 1
$('#chatAutoscroll').click() $('#timsChatAutoscroll').click()
$('#chatAutoscroll').addClass('hot').fadeOut('slow').fadeIn('slow') $('#timsChatAutoscroll').addClass('hot').fadeOut('slow').fadeIn('slow')
# Insert the messages # Insert the messages
for message in messages for message in messages
@ -254,16 +256,16 @@ consoleMock ?=
output = @messageTemplate.fetch message output = @messageTemplate.fetch message
li = $ '<li></li>' li = $ '<li></li>'
li.addClass 'chatMessage chatMessage'+message.type li.addClass 'timsChatMessage timsChatMessage'+message.type
li.addClass 'ownMessage' if message.sender is WCF.User.userID li.addClass 'ownMessage' if message.sender is WCF.User.userID
li.append output li.append output
li.appendTo $ '.chatMessageContainer ul' li.appendTo $ '.timsChatMessageContainer ul'
# Autoscroll down # Autoscroll down
if $('#chatAutoscroll').data('status') is 1 if $('#timsChatAutoscroll').data('status') is 1
$('.chatMessageContainer').scrollTop $('.chatMessageContainer ul').height() $('.timsChatMessageContainer').scrollTop $('.timsChatMessageContainer ul').height()
@oldScrollTop = $('.chatMessageContainer').scrollTop() @oldScrollTop = $('.timsChatMessageContainer').scrollTop()
### ###
# Builds the userlist. # Builds the userlist.
# #
@ -272,20 +274,20 @@ consoleMock ?=
handleUsers: (users) -> handleUsers: (users) ->
foundUsers = { } foundUsers = { }
for user in users for user in users
id = 'chatUser-'+user.userID id = 'timsChatUser-'+user.userID
element = $('#'+id) element = $('#'+id)
# Move the user to the correct position # Move the user to the correct position
if element[0] if element[0]
console.log '[TimWolla.WCF.Chat] Moving User: "' + user.username + '"' console.log '[TimWolla.WCF.Chat] Moving User: "' + user.username + '"'
element = element.detach() element = element.detach()
$('#chatUserList').append element $('#timsChatUserList').append element
# Insert the user # Insert the user
else else
console.log '[TimWolla.WCF.Chat] Inserting User: "' + user.username + '"' console.log '[TimWolla.WCF.Chat] Inserting User: "' + user.username + '"'
li = $ '<li></li>' li = $ '<li></li>'
li.attr 'id', id li.attr 'id', id
li.addClass 'chatUser' li.addClass 'timsChatUser'
li.data 'username', user.username li.data 'username', user.username
a = $ '<a href="javascript:;">'+user.username+'</a>' a = $ '<a href="javascript:;">'+user.username+'</a>'
a.click $.proxy (event) -> a.click $.proxy (event) ->
@ -294,19 +296,19 @@ consoleMock ?=
, @ , @
li.append a li.append a
menu = $ '<ul></ul>' menu = $ '<ul></ul>'
menu.addClass 'chatUserMenu' menu.addClass 'timsChatUserMenu'
menu.append $ '<li><a href="javascript:;">' + WCF.Language.get('wcf.chat.query') + '</a></li>' menu.append $ '<li><a href="javascript:;">' + WCF.Language.get('wcf.chat.query') + '</a></li>'
menu.append $ '<li><a href="javascript:;">' + WCF.Language.get('wcf.chat.kick') + '</a></li>' menu.append $ '<li><a href="javascript:;">' + WCF.Language.get('wcf.chat.kick') + '</a></li>'
menu.append $ '<li><a href="javascript:;">' + WCF.Language.get('wcf.chat.ban') + '</a></li>' menu.append $ '<li><a href="javascript:;">' + WCF.Language.get('wcf.chat.ban') + '</a></li>'
menu.append $ '<li><a href="index.php/User/' + user.userID + '">' + WCF.Language.get('wcf.chat.profile') + '</a></li>' menu.append $ '<li><a href="index.php/User/' + user.userID + '">' + WCF.Language.get('wcf.chat.profile') + '</a></li>'
@events.userMenu.fire user, menu @events.userMenu.fire user, menu
li.append menu li.append menu
li.appendTo $ '#chatUserList' li.appendTo $ '#timsChatUserList'
foundUsers[id] = true foundUsers[id] = true
# Remove users that were not found # Remove users that were not found
$('.chatUser').each () -> $('.timsChatUser').each () ->
if typeof foundUsers[$(@).attr('id')] is 'undefined' if typeof foundUsers[$(@).attr('id')] is 'undefined'
console.log '[TimWolla.WCF.Chat] Removing User: "' + $(@).data('username') + '"' console.log '[TimWolla.WCF.Chat] Removing User: "' + $(@).data('username') + '"'
$(@).remove(); $(@).remove();
@ -325,29 +327,33 @@ consoleMock ?=
submit: false submit: false
, options or {} , options or {}
text = $('#chatInput').val() + text if options.append text = $('#timsChatInput').val() + text if options.append
$('#chatInput').val(text) $('#timsChatInput').val(text)
$('#chatInput').keyup() $('#timsChatInput').keyup()
if (options.submit) if (options.submit)
$('#chatForm').submit() $('#timsChatForm').submit()
else else
$('#chatInput').focus() $('#timsChatInput').focus()
### ###
# Sends a notification about a message. # Sends a notification about a message.
# #
# @param object message # @param object message
### ###
notify: (message) -> notify: (message) ->
return if @isActive or $('#chatNotify').data('status') is 0 return if @isActive or $('#timsChatNotify').data('status') is 0
@newMessageCount++ @newMessageCount++
document.title = '(' + @newMessageCount + ') ' + @titleTemplate.fetch({ title: $('#chatRoomList .activeMenuItem a').text() }) document.title = '(' + @newMessageCount + ') ' + @titleTemplate.fetch
title: $('#timsChatRoomList .activeMenuItem a').text()
# Desktop Notifications # Desktop Notifications
if typeof window.webkitNotifications isnt 'undefined' if typeof window.webkitNotifications isnt 'undefined'
if window.webkitNotifications.checkPermission() is 0 if window.webkitNotifications.checkPermission() is 0
notification = window.webkitNotifications.createNotification WCF.Icon.get('timwolla.wcf.chat.chat'), WCF.Language.get('wcf.chat.newMessages'), message.username + ' ' + message.message title = WCF.Language.get('wcf.chat.newMessages')
icon = WCF.Icon.get('timwolla.wcf.chat.chat')
content = message.username + message.separator + ' ' + message.message
notification = window.webkitNotifications.createNotification icon, title, content
notification.show() notification.show()
setTimeout(() -> setTimeout(() ->
notification.cancel() notification.cancel()
@ -363,17 +369,17 @@ consoleMock ?=
dataType: 'json' dataType: 'json'
type: 'POST' type: 'POST'
success: $.proxy((data, textStatus, jqXHR) -> success: $.proxy((data, textStatus, jqXHR) ->
$('#chatRoomList li').remove() $('#timsChatRoomList li').remove()
$('#toggleRooms a').removeClass 'ajaxLoad' $('#toggleRooms a').removeClass 'ajaxLoad'
$('#toggleRooms .badge').text(data.length); $('#toggleRooms .badge').text(data.length);
for room in data for room in data
li = $ '<li></li>' li = $ '<li></li>'
li.addClass 'activeMenuItem' if room.active li.addClass 'activeMenuItem' if room.active
$('<a href="' + room.link + '">' + room.title + '</a>').addClass('chatRoom').appendTo li $('<a href="' + room.link + '">' + room.title + '</a>').addClass('timsChatRoom').appendTo li
$('#chatRoomList ul').append li $('#timsChatRoomList ul').append li
$('.chatRoom').click $.proxy (event) -> $('.timsChatRoom').click $.proxy (event) ->
return if typeof window.history.replaceState is 'undefined' return if typeof window.history.replaceState is 'undefined'
event.preventDefault() event.preventDefault()
@changeRoom $ event.target @changeRoom $ event.target
@ -388,25 +394,25 @@ consoleMock ?=
### ###
submit: (target) -> submit: (target) ->
# Break if input contains only whitespace # Break if input contains only whitespace
return false if $('#chatInput').val().trim().length is 0 return false if $('#timsChatInput').val().trim().length is 0
# Finally free the fish # Finally free the fish
@freeTheFish() if $('#chatInput').val().trim().toLowerCase() is '/free the fish' @freeTheFish() if $('#timsChatInput').val().trim().toLowerCase() is '/free the fish'
$.ajax $('#chatForm').attr('action'), $.ajax $('#timsChatForm').attr('action'),
data: data:
text: $('#chatInput').val(), text: $('#timsChatInput').val(),
smilies: $('#chatSmilies').data('status') smilies: $('#timsChatSmilies').data('status')
type: 'POST', type: 'POST',
beforeSend: (jqXHR) -> beforeSend: (jqXHR) ->
$('#chatInput').addClass 'ajaxLoad' $('#timsChatInput').addClass 'ajaxLoad'
success: $.proxy((data, textStatus, jqXHR) -> success: $.proxy((data, textStatus, jqXHR) ->
@getMessages() @getMessages()
$('#chatInput').val('').focus() $('#timsChatInput').val('').focus()
$('#chatInput').keyup() $('#timsChatInput').keyup()
, @) , @)
complete: () -> complete: () ->
$('#chatInput').removeClass 'ajaxLoad' $('#timsChatInput').removeClass 'ajaxLoad'
### ###
# Toggles between user- and room-list. # Toggles between user- and room-list.
# #
@ -419,14 +425,14 @@ consoleMock ?=
$('#toggleUsers').addClass 'active' $('#toggleUsers').addClass 'active'
$('#toggleRooms').removeClass 'active' $('#toggleRooms').removeClass 'active'
$('#chatRoomList').hide() $('#timsChatRoomList').hide()
$('#chatUserList').show() $('#timsChatUserList').show()
else if target.parents('li').attr('id') is 'toggleRooms' else if target.parents('li').attr('id') is 'toggleRooms'
$('#toggleRooms').addClass 'active' $('#toggleRooms').addClass 'active'
$('#toggleUsers').removeClass 'active' $('#toggleUsers').removeClass 'active'
$('#chatUserList').hide() $('#timsChatUserList').hide()
$('#chatRoomList').show() $('#timsChatRoomList').show()
### ###
# Toggles the user-menu. # Toggles the user-menu.
# #
@ -436,9 +442,9 @@ consoleMock ?=
li = target.parent() li = target.parent()
if li.hasClass 'activeMenuItem' if li.hasClass 'activeMenuItem'
li.find('.chatUserMenu').wcfBlindOut 'vertical', () -> li.find('.timsChatUserMenu').wcfBlindOut 'vertical', () ->
li.removeClass 'activeMenuItem' li.removeClass 'activeMenuItem'
else else
li.addClass 'activeMenuItem' li.addClass 'activeMenuItem'
li.find('.chatUserMenu').wcfBlindIn 'vertical' li.find('.timsChatUserMenu').wcfBlindIn 'vertical'
)(jQuery, @, consoleMock) )(jQuery, @, consoleMock)

4
file/js/jCounter.jQuery.coffee
View File

@ -10,7 +10,7 @@
$.fn.jCounter = (container, options) -> $.fn.jCounter = (container, options) ->
options = $.extend options = $.extend
max: 0 max: 0
counterClass: 'counter' counterClass: 'jsCounter'
countUp: false countUp: false
, options , options
@ -19,7 +19,7 @@
else max = options.max else max = options.max
if !container if !container
this.wrap('<div class="counterContainer"><div></div></div>').parent().append('<div class="' + options.counterClass + ' color-1">' + max + '</div>'); this.wrap('<div class="jsCounterContainer"><div></div></div>').parent().append('<div class="' + options.counterClass + ' color-1">' + max + '</div>');
jCounterContainer = $(this).parent().children('.' + options.counterClass) jCounterContainer = $(this).parent().children('.' + options.counterClass)
else else
if typeof container is 'object' if typeof container is 'object'

41
file/style/timwolla.wcf.chat.scss
View File

@ -7,7 +7,7 @@
* @package timwolla.wcf.chat * @package timwolla.wcf.chat
*/ */
#chatRoomContent { #timsChatRoomContent {
text-align: left; text-align: left;
} }
@ -32,11 +32,11 @@ .sidebar {
} }
} }
#topic, #smileyList, #chatOptions { #timsChatTopic, #smileyList, #timsChatOptions {
padding: 5px; padding: 5px;
} }
.chatMessageContainer { .timsChatMessageContainer {
height: 200px; height: 200px;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
@ -50,32 +50,24 @@ #smileyList .smilies, .smallButtons {
} }
} }
#chatForm { #timsChatForm {
white-space: nowrap; white-space: nowrap;
margin-top: 10px; margin-top: 10px;
// Fix to align chatInput in center // Fix to align chatInput in center
text-align: center; text-align: center;
} }
#chatInput { #timsChatInput {
position: relative; position: relative;
z-index: 10; z-index: 10;
} }
#chatOptions { #timsChatOptions {
display: inline-block; display: inline-block;
} }
#chatUserList { #timsChatUserList {
> li > .bgFix a { .timsChatUserMenu {
background: {
position: 15px center;
repeat: no-repeat;
size: 16px auto;
}
}
.chatUserMenu {
display: none; display: none;
li { li {
a { a {
@ -91,7 +83,7 @@ #chatUserList {
} }
} }
.chatMessage { .timsChatMessage {
padding-left: 16px; padding-left: 16px;
min-height: 16px; min-height: 16px;
@ -107,6 +99,10 @@ .chatMessage {
content: "]"; content: "]";
} }
} }
.unloaded {
opacity: 0.4;
}
} }
.ajaxLoad { .ajaxLoad {
@ -116,11 +112,7 @@ .ajaxLoad {
} }
} }
.bgFix { .timsChatSidebarTabs {
display: block;
}
.chatSidebarTabs {
height: 32px; height: 32px;
z-index: 101; z-index: 101;
position: relative; position: relative;
@ -201,7 +193,7 @@ .chatSidebarTabs {
} }
} }
#chatRoomList { #timsChatRoomList {
margin-top: 5px; margin-top: 5px;
} }
@ -213,9 +205,10 @@ #sidebarContainer {
#sidebarContainer a { #sidebarContainer a {
outline: none; outline: none;
overflow: hidden;
} }
#chatCopyright { #timsChatCopyright {
bottom: 5px; bottom: 5px;
position: absolute; position: absolute;
} }

84
template/chat.tpl
View File

@ -6,61 +6,67 @@
{include file='headInclude' sandbox=false} {include file='headInclude' sandbox=false}
<style type="text/css"> <style type="text/css">
@import url("{@RELATIVE_WCF_DIR}style/timwolla.wcf.chat.css"); @import url("{@RELATIVE_WCF_DIR}style/timwolla.wcf.chat.css");
#chatCopyrightDialog { #timsChatCopyrightDialog {
background-image: url("{link controller='Chat' action='Copyright' sheep=1}{/link}"); background-image: url("{link controller='Chat' action='Copyright' sheep=1}{/link}");
background-position: right 45px; background-position: right 45px;
background-repeat: no-repeat; background-repeat: no-repeat;
min-height: 50%; min-height: 50%;
} }
#chatUserList > li > a {
#timsChatUserList > li > a {
background-image: url({icon size='S'}arrowRight{/icon}); background-image: url({icon size='S'}arrowRight{/icon});
background-position: 15px center; background-position: 15px center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
#chatUserList > li.activeMenuItem > a { #timsChatUserList > li.activeMenuItem > a {
background-image: url({icon size='S'}arrowDown{/icon}); background-image: url({icon size='S'}arrowDown{/icon});
} }
{assign var='type' value='\wcf\data\chat\message\ChatMessage::TYPE_'} {assign var='type' value='\wcf\data\chat\message\ChatMessage::TYPE_'}
.chatMessage{$type|concat:'JOIN'|constant}, .chatMessage{$type|concat:'LEAVE'|constant} { .timsChatMessage{$type|concat:'JOIN'|constant}, .timsChatMessage{$type|concat:'LEAVE'|constant} {
background-position: left top; background-position: left top;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.chatMessage{$type|concat:'JOIN'|constant} { .timsChatMessage{$type|concat:'JOIN'|constant} {
background-image: url({icon size='S'}toRight1{/icon}); background-image: url({icon size='S'}toRight1{/icon});
} }
.chatMessage{$type|concat:'LEAVE'|constant} { .timsChatMessage{$type|concat:'LEAVE'|constant} {
background-image: url({icon size='S'}toLeft1{/icon}); background-image: url({icon size='S'}toLeft1{/icon});
} }
.ajaxLoad { .ajaxLoad {
background-image: url({icon size='S'}spinner1{/icon}); background-image: url({icon size='S'}spinner1{/icon});
} }
.counterContainer { /*
* jCounter CSS
*
* TODO: Seperate jCounter completely from Tims-Chat
*/
.jsCounterContainer {
display: table; display: table;
} }
.counterContainer > div { .jsCounterContainer > div {
display: table-row; display: table-row;
} }
.counterInput { .jsCounterInput {
height: 16px; height: 16px;
} }
.counterInput, .counter { .jsCounterInput, .jsCounter {
display: table-cell; display: table-cell;
} }
.counterInput, .counterContainer { .jsCounterInput, .jsCounterContainer {
width: 100%; width: 100%;
} }
.counter { .jsCounter {
background-color: rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.7);
padding: 0 5px 0 10px; padding: 0 5px 0 10px;
position: relative; position: relative;
@ -70,13 +76,13 @@
width: 30px; width: 30px;
} }
.counter.color-1 { .jsCounter.color-1 {
color: #FFFFFF; color: #FFFFFF;
} }
.counter.color-2 { .jsCounter.color-2 {
color: rgba(255,255,255,0.5); color: rgba(255,255,255,0.5);
} }
.counter.color-3 { .jsCounter.color-3 {
color: #D40D12; color: #D40D12;
} }
</style> </style>
@ -85,7 +91,7 @@
<body id="tpl{$templateName|ucfirst}"> <body id="tpl{$templateName|ucfirst}">
{capture assign='sidebar'} {capture assign='sidebar'}
<div id="sidebarContent" class="sidebarContent"> <div id="sidebarContent" class="sidebarContent">
<nav class="chatSidebarTabs"> <nav class="timsChatSidebarTabs">
<ul> <ul>
<li id="toggleUsers" class="active"><a href="javascript:;" title="{lang}wcf.chat.users{/lang}">{lang}wcf.chat.users{/lang} <span class="badge">0</span></a></li> <li id="toggleUsers" class="active"><a href="javascript:;" title="{lang}wcf.chat.users{/lang}">{lang}wcf.chat.users{/lang} <span class="badge">0</span></a></li>
<li id="toggleRooms"><a href="javascript:;" title="{lang}wcf.chat.rooms{/lang}" data-refresh-url="{link controller="Chat" action="RefreshRoomList"}{/link}">{lang}wcf.chat.rooms{/lang} <span class="badge">{#$rooms|count}</span></a></li> <li id="toggleRooms"><a href="javascript:;" title="{lang}wcf.chat.rooms{/lang}" data-refresh-url="{link controller="Chat" action="RefreshRoomList"}{/link}">{lang}wcf.chat.rooms{/lang} <span class="badge">{#$rooms|count}</span></a></li>
@ -93,11 +99,11 @@
</nav> </nav>
<div id="sidebarContainer"> <div id="sidebarContainer">
<ul id="chatUserList"> <ul id="timsChatUserList">
{*section name=user start=1 loop=26} {*section name=user start=1 loop=26}
<li class="chatUser"> <li class="timsChatUser">
<a href="javascript:;">User {$user}</a> <a href="javascript:;">User {$user}</a>
<ul class="chatUserMenu"> <ul class="timsChatUserMenu">
<li> <li>
<a href="javascript:;">{lang}wcf.chat.query{/lang}</a> <a href="javascript:;">{lang}wcf.chat.query{/lang}</a>
<a href="javascript:;">{lang}wcf.chat.kick{/lang}</a> <a href="javascript:;">{lang}wcf.chat.kick{/lang}</a>
@ -108,13 +114,13 @@
</li> </li>
{/section*} {/section*}
</ul> </ul>
<nav id="chatRoomList" class="sidebarMenu" style="display: none;"> <nav id="timsChatRoomList" class="sidebarMenu" style="display: none;">
<div> <div>
<ul> <ul>
{foreach from=$rooms item='roomListRoom'} {foreach from=$rooms item='roomListRoom'}
{if $roomListRoom->canEnter()} {if $roomListRoom->canEnter()}
<li{if $roomListRoom->roomID == $room->roomID} class="activeMenuItem"{/if}> <li{if $roomListRoom->roomID == $room->roomID} class="activeMenuItem"{/if}>
<a href="{link controller='Chat' object=$roomListRoom}{/link}" class="chatRoom">{$roomListRoom}</a> <a href="{link controller='Chat' object=$roomListRoom}{/link}" class="timsChatRoom">{$roomListRoom}</a>
</li> </li>
{/if} {/if}
{/foreach} {/foreach}
@ -127,19 +133,19 @@
{/capture} {/capture}
{include file='header' sandbox=false sidebarOrientation='right'} {include file='header' sandbox=false sidebarOrientation='right'}
<div id="chatRoomContent"> <div id="timsChatRoomContent">
<div id="topic" class="border"{if $room->topic|language === ''} style="display: none;"{/if}>{$room->topic|language}</div> <div id="timsChatTopic" class="border"{if $room->topic|language === ''} style="display: none;"{/if}>{$room->topic|language}</div>
<div class="chatMessageContainer border content"> <div class="timsChatMessageContainer border content">
<ul> <ul>
<noscript><li class="error">{lang}wcf.chat.noJs{/lang}</li></noscript> <noscript><li class="error">{lang}wcf.chat.noJs{/lang}</li></noscript>
</ul> </ul>
</div> </div>
<form id="chatForm" action="{link controller="Chat" action="Send"}{/link}" method="post"> <form id="timsChatForm" action="{link controller="Chat" action="Send"}{/link}" method="post">
<input type="text" id="chatInput" class="inputText long counterInput" name="text" autocomplete="off" maxlength="{CHAT_LENGTH}" disabled="disabled" required="required" placeholder="{lang}wcf.chat.submit.default{/lang}" /> <input type="text" id="timsChatInput" class="inputText long jsCounterInput" name="text" autocomplete="off" maxlength="{CHAT_LENGTH}" disabled="disabled" required="required" placeholder="{lang}wcf.chat.submit.default{/lang}" />
</form> </form>
<div id="chatControls"> <div id="timsChatControls">
<div id="smileyList" class="border"> <div id="smileyList" class="border">
<ul class="smilies"> <ul class="smilies">
{foreach from=$smilies item='smiley'} {foreach from=$smilies item='smiley'}
@ -149,31 +155,31 @@
{/foreach} {/foreach}
</ul> </ul>
</div> </div>
<div id="chatOptions" class="border"> <div id="timsChatOptions" class="border">
<div class="smallButtons"> <div class="smallButtons">
<ul> <ul>
<li> <li>
<a id="chatAutoscroll" href="javascript:;" class="chatToggle balloonTooltip" 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="1"> <a id="timsChatAutoscroll" href="javascript:;" class="timsChatToggle balloonTooltip" 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="1">
<img alt="" src="{icon size='S'}enabled1{/icon}" /> <span>{lang}wcf.chat.scroll{/lang}</span> <img alt="" src="{icon size='S'}enabled1{/icon}" /> <span>{lang}wcf.chat.scroll{/lang}</span>
</a> </a>
</li> </li>
<li> <li>
<a id="chatNotify" href="javascript:;" class="chatToggle balloonTooltip" title="{lang}wcf.global.button.enable{/lang}" data-disable-message="{lang}wcf.global.button.disable{/lang}" data-enable-message="{lang}wcf.global.button.enable{/lang}" data-status="0"> <a id="timsChatNotify" href="javascript:;" class="timsChatToggle balloonTooltip" title="{lang}wcf.global.button.enable{/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'}disabled1{/icon}" /> <span>{lang}wcf.chat.notify{/lang}</span> <img alt="" src="{icon size='S'}disabled1{/icon}" /> <span>{lang}wcf.chat.notify{/lang}</span>
</a> </a>
</li> </li>
<li> <li>
<a id="chatSmilies" href="javascript:;" class="chatToggle balloonTooltip" 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="1"> <a id="timsChatSmilies" href="javascript:;" class="timsChatToggle balloonTooltip" 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="1">
<img alt="" src="{icon size='S'}enabled1{/icon}" /> <span>{lang}wcf.chat.smilies{/lang}</span> <img alt="" src="{icon size='S'}enabled1{/icon}" /> <span>{lang}wcf.chat.smilies{/lang}</span>
</a> </a>
</li> </li>
<li> <li>
<a id="chatClear" href="javascript:;" class="balloonTooltip" title="{lang}wcf.chat.clear.description{/lang}"> <a id="timsChatClear" href="javascript:;" class="balloonTooltip" title="{lang}wcf.chat.clear.description{/lang}">
<img alt="" src="{icon size='S'}delete1{/icon}" /> <span>{lang}wcf.chat.clear{/lang}</span> <img alt="" src="{icon size='S'}delete1{/icon}" /> <span>{lang}wcf.chat.clear{/lang}</span>
</a> </a>
</li> </li>
<li> <li>
<a id="chatMark" href="javascript:;" class="balloonTooltip" title="{lang}wcf.chat.mark.description{/lang}"> <a id="timsChatMark" href="javascript:;" class="balloonTooltip" title="{lang}wcf.chat.mark.description{/lang}">
<img alt="" src="{icon size='S'}check1{/icon}" /> <span>{lang}wcf.chat.mark{/lang}</span> <img alt="" src="{icon size='S'}check1{/icon}" /> <span>{lang}wcf.chat.mark{/lang}</span>
</a> </a>
</li> </li>
@ -221,14 +227,14 @@
]); ]);
// enable user-interface // enable user-interface
$('#chatInput').enable().jCounter().focus(); $('#timsChatInput').enable().jCounter().focus();
$('#chatControls .copyright').click(function (event) { $('#timsChatControls .copyright').click(function (event) {
event.preventDefault(); event.preventDefault();
if ($.wcfIsset('chatCopyrightDialog')) return WCF.showDialog('chatCopyrightDialog', true, { title: 'Tims Chat{if CHAT_SHOW_VERSION} {$chatVersion}{/if}' }); if ($.wcfIsset('timsChatCopyrightDialog')) return WCF.showDialog('timsChatCopyrightDialog', { title: 'Tims Chat{if CHAT_SHOW_VERSION} {$chatVersion}{/if}' });
var container = $('<div id="chatCopyrightDialog"></div>'); var container = $('<div id="timsChatCopyrightDialog"></div>');
container.load('{link controller='Chat' action='Copyright'}{/link}', function() { container.load('{link controller='Chat' action='Copyright'}{/link}', function() {
$('body').append(container); $('body').append(container);
WCF.showDialog('chatCopyrightDialog', true, { title: 'Tims Chat{if CHAT_SHOW_VERSION} {$chatVersion}{/if}' }); WCF.showDialog('timsChatCopyrightDialog', { title: 'Tims Chat{if CHAT_SHOW_VERSION} {$chatVersion}{/if}' });
}); });
}); });
})(jQuery, this) })(jQuery, this)

6
template/chatCopyright.tpl
View File

@ -1,8 +1,8 @@
{if $templateName == 'chat'}<address id="chatCopyright" class="copyright">{lang}wcf.chat.copyright{/lang}</address> {if $templateName == 'chat'}<address id="timsChatCopyright" class="copyright">{lang}wcf.chat.copyright{/lang}</address>
{elseif $templateName == 'chatCopyright'} {elseif $templateName == 'chatCopyright'}
<dl><dt>Project-Leader</dt><dd><ul><li><a href="http://timwolla.wbbaddons.de/">Tim Düsterhus</a></li></ul></dd></dl> <dl><dt>Project-Leader</dt><dd><ul><li><a href="http://timwolla.wbbaddons.de/">Tim Düsterhus</a></li></ul></dd></dl>
<dl><dt>Developer</dt><dd><ul><li><a href="http://timwolla.wbbaddons.de/">Tim Düsterhus</a></li><li><a href="https://github.com/max-m">Maximilian Mader</a></li></ul></dd></dl> <dl><dt>Developer</dt><dd><ul><li><a href="http://timwolla.wbbaddons.de/">Tim Düsterhus</a></li><li><a href="https://github.com/max-m">Maximilian Mader</a></li></ul></dd></dl>
<dl><dt>Graphics</dt><dd><ul><li>Tom</li></ul></dd></dl> <dl><dt>Graphics</dt><dd><ul><li><a href="http://www.cls-design.com/">Tom</a></li></ul></dd></dl>
<dl><dt>Translation</dt><dd><ul><li>Riccardo Vianello (it)</li></ul></dd></dl> <dl><dt>Translation</dt><dd><ul><li>Riccardo Vianello (it)</li></ul></dd></dl>
<dl><dt>Thanks</dt><dd><ul><li>-noone-</li><li>Alexander Ebert</li><li>Gabi</li><li>Stefan Hahn</li><li><a href="http://packageforge.de">Oliver Kliebisch</a></li><li>Christian Kubandt</li><li><a href="http://www.wbbaddons.de">Martin Schwendowius</a></li></ul></dd></dl> <dl><dt>Thanks</dt><dd><ul><li><a href="http://www.wbbaddons.de/user/2020-noone/">-noone-</a></li><li><a href="https://github.com/dtdesign">Alexander Ebert</a></li><li>Gabi</li><li><a href="https://github.com/Leon-">Stefan Hahn</a></li><li><a href="http://packageforge.de">Oliver Kliebisch</a></li><li>Christian Kubandt</li><li><a href="http://www.wbbaddons.de">Martin Schwendowius</a></li></ul></dd></dl>
{/if} {/if}