jlukic
10 years ago
3 changed files with 2 additions and 1058 deletions
Unified View
Diff Options
-
776src/definitions/modules/chatroom.js
-
280src/definitions/modules/chatroom.less
-
4src/definitions/modules/modal.js
@ -1,776 +0,0 @@ |
|||||
/* |
|
||||
* # Semantic - Chatroom |
|
||||
* http://github.com/semantic-org/semantic-ui/
|
|
||||
* |
|
||||
* |
|
||||
* Copyright 2014 Contributor |
|
||||
* Released under the MIT license |
|
||||
* http://opensource.org/licenses/MIT
|
|
||||
* |
|
||||
*/ |
|
||||
|
|
||||
;(function ($, window, document, undefined) { |
|
||||
|
|
||||
"use strict"; |
|
||||
|
|
||||
$.fn.chatroom = function(parameters) { |
|
||||
var |
|
||||
$allModules = $(this), |
|
||||
moduleSelector = $allModules.selector || '', |
|
||||
|
|
||||
time = new Date().getTime(), |
|
||||
performance = [], |
|
||||
|
|
||||
query = arguments[0], |
|
||||
methodInvoked = (typeof query == 'string'), |
|
||||
queryArguments = [].slice.call(arguments, 1), |
|
||||
returnedValue |
|
||||
; |
|
||||
$(this) |
|
||||
.each(function() { |
|
||||
var |
|
||||
settings = $.extend(true, {}, $.fn.chatroom.settings, parameters), |
|
||||
|
|
||||
className = settings.className, |
|
||||
namespace = settings.namespace, |
|
||||
selector = settings.selector, |
|
||||
error = settings.error, |
|
||||
|
|
||||
$module = $(this), |
|
||||
|
|
||||
$expandButton = $module.find(selector.expandButton), |
|
||||
$userListButton = $module.find(selector.userListButton), |
|
||||
|
|
||||
$userList = $module.find(selector.userList), |
|
||||
$room = $module.find(selector.room), |
|
||||
$userCount = $module.find(selector.userCount), |
|
||||
|
|
||||
$log = $module.find(selector.log), |
|
||||
$message = $module.find(selector.message), |
|
||||
|
|
||||
$messageInput = $module.find(selector.messageInput), |
|
||||
$messageButton = $module.find(selector.messageButton), |
|
||||
|
|
||||
instance = $module.data('module'), |
|
||||
element = this, |
|
||||
|
|
||||
html = '', |
|
||||
users = {}, |
|
||||
|
|
||||
channel, |
|
||||
loggedInUser, |
|
||||
|
|
||||
message, |
|
||||
count, |
|
||||
|
|
||||
height, |
|
||||
|
|
||||
pusher, |
|
||||
module |
|
||||
; |
|
||||
|
|
||||
module = { |
|
||||
|
|
||||
width: { |
|
||||
log : $log.width(), |
|
||||
userList : $userList.outerWidth() |
|
||||
}, |
|
||||
|
|
||||
initialize: function() { |
|
||||
|
|
||||
// check error conditions
|
|
||||
if(Pusher === undefined) { |
|
||||
module.error(error.pusher); |
|
||||
} |
|
||||
if(settings.key === undefined || settings.channelName === undefined) { |
|
||||
module.error(error.key); |
|
||||
return false; |
|
||||
} |
|
||||
else if( !(settings.endpoint.message || settings.endpoint.authentication) ) { |
|
||||
module.error(error.endpoint); |
|
||||
return false; |
|
||||
} |
|
||||
|
|
||||
// define pusher
|
|
||||
pusher = new Pusher(settings.key); |
|
||||
Pusher.channel_auth_endpoint = settings.endpoint.authentication; |
|
||||
|
|
||||
channel = pusher.subscribe(settings.channelName); |
|
||||
|
|
||||
channel.bind('pusher:subscription_succeeded', module.user.list.create); |
|
||||
channel.bind('pusher:subscription_error', module.error); |
|
||||
channel.bind('pusher:member_added', module.user.joined); |
|
||||
channel.bind('pusher:member_removed', module.user.left); |
|
||||
channel.bind('update_messages', module.message.receive); |
|
||||
|
|
||||
$.each(settings.customEvents, function(label, value) { |
|
||||
channel.bind(label, value); |
|
||||
}); |
|
||||
|
|
||||
// bind module events
|
|
||||
$userListButton |
|
||||
.on('click.' + namespace, module.event.toggleUserList) |
|
||||
; |
|
||||
$expandButton |
|
||||
.on('click.' + namespace, module.event.toggleExpand) |
|
||||
; |
|
||||
$messageInput |
|
||||
.on('keydown.' + namespace, module.event.input.keydown) |
|
||||
.on('keyup.' + namespace, module.event.input.keyup) |
|
||||
; |
|
||||
$messageButton |
|
||||
.on('mouseenter.' + namespace, module.event.hover) |
|
||||
.on('mouseleave.' + namespace, module.event.hover) |
|
||||
.on('click.' + namespace, module.event.submit) |
|
||||
; |
|
||||
// scroll to bottom of chat log
|
|
||||
$log |
|
||||
.animate({ |
|
||||
scrollTop: $log.prop('scrollHeight') |
|
||||
}, 400) |
|
||||
; |
|
||||
$module |
|
||||
.data('module', module) |
|
||||
.addClass(className.loading) |
|
||||
; |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
// refresh module
|
|
||||
refresh: function() { |
|
||||
// reset width calculations
|
|
||||
$userListButton |
|
||||
.removeClass(className.active) |
|
||||
; |
|
||||
module.width = { |
|
||||
log : $log.width(), |
|
||||
userList : $userList.outerWidth() |
|
||||
}; |
|
||||
if( $userListButton.hasClass(className.active) ) { |
|
||||
module.user.list.hide(); |
|
||||
} |
|
||||
$module.data('module', module); |
|
||||
}, |
|
||||
|
|
||||
user: { |
|
||||
|
|
||||
updateCount: function() { |
|
||||
if(settings.userCount) { |
|
||||
users = $module.data('users'); |
|
||||
count = 0; |
|
||||
$.each(users, function() { |
|
||||
count++; |
|
||||
}); |
|
||||
$userCount |
|
||||
.html( settings.templates.userCount(count) ) |
|
||||
; |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// add user to user list
|
|
||||
joined: function(member) { |
|
||||
users = $module.data('users'); |
|
||||
if(member.id != 'anonymous' && users[ member.id ] === undefined ) { |
|
||||
users[ member.id ] = member.info; |
|
||||
if(settings.randomColor && member.info.color === undefined) { |
|
||||
member.info.color = settings.templates.color(member.id); |
|
||||
} |
|
||||
html = settings.templates.userList(member.info); |
|
||||
if(member.info.isAdmin) { |
|
||||
$(html) |
|
||||
.prependTo($userList) |
|
||||
; |
|
||||
} |
|
||||
else { |
|
||||
$(html) |
|
||||
.appendTo($userList) |
|
||||
; |
|
||||
} |
|
||||
if(settings.partingMessages) { |
|
||||
$log |
|
||||
.append( settings.templates.joined(member.info) ) |
|
||||
; |
|
||||
module.message.scroll.test(); |
|
||||
} |
|
||||
module.user.updateCount(); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// remove user from user list
|
|
||||
left: function(member) { |
|
||||
users = $module.data('users'); |
|
||||
if(member !== undefined && member.id !== 'anonymous') { |
|
||||
delete users[ member.id ]; |
|
||||
$module |
|
||||
.data('users', users) |
|
||||
; |
|
||||
$userList |
|
||||
.find('[data-id='+ member.id + ']') |
|
||||
.remove() |
|
||||
; |
|
||||
if(settings.partingMessages) { |
|
||||
$log |
|
||||
.append( settings.templates.left(member.info) ) |
|
||||
; |
|
||||
module.message.scroll.test(); |
|
||||
} |
|
||||
module.user.updateCount(); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
list: { |
|
||||
|
|
||||
// receives list of members and generates user list
|
|
||||
create: function(members) { |
|
||||
users = {}; |
|
||||
members.each(function(member) { |
|
||||
if(member.id !== 'anonymous' && member.id !== 'undefined') { |
|
||||
if(settings.randomColor && member.info.color === undefined) { |
|
||||
member.info.color = settings.templates.color(member.id); |
|
||||
} |
|
||||
// sort list with admin first
|
|
||||
html = (member.info.isAdmin) |
|
||||
? settings.templates.userList(member.info) + html |
|
||||
: html + settings.templates.userList(member.info) |
|
||||
; |
|
||||
users[ member.id ] = member.info; |
|
||||
} |
|
||||
}); |
|
||||
$module |
|
||||
.data('users', users) |
|
||||
.data('user', users[members.me.id] ) |
|
||||
.removeClass(className.loading) |
|
||||
; |
|
||||
$userList |
|
||||
.html(html) |
|
||||
; |
|
||||
module.user.updateCount(); |
|
||||
$.proxy(settings.onJoin, $userList.children())(); |
|
||||
}, |
|
||||
|
|
||||
// shows user list
|
|
||||
show: function() { |
|
||||
$log |
|
||||
.animate({ |
|
||||
width: (module.width.log - module.width.userList) |
|
||||
}, { |
|
||||
duration : settings.speed, |
|
||||
easing : settings.easing, |
|
||||
complete : module.message.scroll.move |
|
||||
}) |
|
||||
; |
|
||||
}, |
|
||||
|
|
||||
// hides user list
|
|
||||
hide: function() { |
|
||||
$log |
|
||||
.stop() |
|
||||
.animate({ |
|
||||
width: (module.width.log) |
|
||||
}, { |
|
||||
duration : settings.speed, |
|
||||
easing : settings.easing, |
|
||||
complete : module.message.scroll.move |
|
||||
}) |
|
||||
; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
message: { |
|
||||
|
|
||||
// handles scrolling of chat log
|
|
||||
scroll: { |
|
||||
test: function() { |
|
||||
height = $log.prop('scrollHeight') - $log.height(); |
|
||||
if( Math.abs($log.scrollTop() - height) < settings.scrollArea) { |
|
||||
module.message.scroll.move(); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
move: function() { |
|
||||
height = $log.prop('scrollHeight') - $log.height(); |
|
||||
$log |
|
||||
.scrollTop(height) |
|
||||
; |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// sends chat message
|
|
||||
send: function(message) { |
|
||||
if( !module.utils.emptyString(message) ) { |
|
||||
$.api({ |
|
||||
url : settings.endpoint.message, |
|
||||
method : 'POST', |
|
||||
data : { |
|
||||
'message': { |
|
||||
content : message, |
|
||||
timestamp : new Date().getTime() |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// receives chat response and processes
|
|
||||
receive: function(response) { |
|
||||
message = response.data; |
|
||||
users = $module.data('users'); |
|
||||
loggedInUser = $module.data('user'); |
|
||||
if(users[ message.userID] !== undefined) { |
|
||||
// logged in user's messages already pushed instantly
|
|
||||
if(loggedInUser === undefined || loggedInUser.id != message.userID) { |
|
||||
message.user = users[ message.userID ]; |
|
||||
module.message.display(message); |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// displays message in chat log
|
|
||||
display: function(message) { |
|
||||
$log |
|
||||
.append( settings.templates.message(message) ) |
|
||||
; |
|
||||
module.message.scroll.test(); |
|
||||
$.proxy(settings.onMessage, $log.children().last() )(); |
|
||||
} |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
expand: function() { |
|
||||
$module |
|
||||
.addClass(className.expand) |
|
||||
; |
|
||||
$.proxy(settings.onExpand, $module )(); |
|
||||
module.refresh(); |
|
||||
}, |
|
||||
|
|
||||
contract: function() { |
|
||||
$module |
|
||||
.removeClass(className.expand) |
|
||||
; |
|
||||
$.proxy(settings.onContract, $module )(); |
|
||||
module.refresh(); |
|
||||
}, |
|
||||
|
|
||||
event: { |
|
||||
|
|
||||
input: { |
|
||||
|
|
||||
keydown: function(event) { |
|
||||
if(event.which == 13) { |
|
||||
$messageButton |
|
||||
.addClass(className.down) |
|
||||
; |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
keyup: function(event) { |
|
||||
if(event.which == 13) { |
|
||||
$messageButton |
|
||||
.removeClass(className.down) |
|
||||
; |
|
||||
module.event.submit(); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
// handles message form submit
|
|
||||
submit: function() { |
|
||||
var |
|
||||
message = $messageInput.val(), |
|
||||
loggedInUser = $module.data('user') |
|
||||
; |
|
||||
if(loggedInUser !== undefined && !module.utils.emptyString(message)) { |
|
||||
module.message.send(message); |
|
||||
// display immediately
|
|
||||
module.message.display({ |
|
||||
user: loggedInUser, |
|
||||
text: message |
|
||||
}); |
|
||||
module.message.scroll.move(); |
|
||||
$messageInput |
|
||||
.val('') |
|
||||
; |
|
||||
|
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// handles button click on expand button
|
|
||||
toggleExpand: function() { |
|
||||
if( !$module.hasClass(className.expand) ) { |
|
||||
$expandButton |
|
||||
.addClass(className.active) |
|
||||
; |
|
||||
module.expand(); |
|
||||
} |
|
||||
else { |
|
||||
$expandButton |
|
||||
.removeClass(className.active) |
|
||||
; |
|
||||
module.contract(); |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
// handles button click on user list button
|
|
||||
toggleUserList: function() { |
|
||||
if( !$log.is(':animated') ) { |
|
||||
if( !$userListButton.hasClass(className.active) ) { |
|
||||
$userListButton |
|
||||
.addClass(className.active) |
|
||||
; |
|
||||
module.user.list.show(); |
|
||||
} |
|
||||
else { |
|
||||
$userListButton |
|
||||
.removeClass('active') |
|
||||
; |
|
||||
module.user.list.hide(); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
utils: { |
|
||||
|
|
||||
emptyString: function(string) { |
|
||||
if(typeof string == 'string') { |
|
||||
return (string.search(/\S/) == -1); |
|
||||
} |
|
||||
return false; |
|
||||
} |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
setting: function(name, value) { |
|
||||
if(value !== undefined) { |
|
||||
if( $.isPlainObject(name) ) { |
|
||||
$.extend(true, settings, name); |
|
||||
} |
|
||||
else { |
|
||||
settings[name] = value; |
|
||||
} |
|
||||
} |
|
||||
else { |
|
||||
return settings[name]; |
|
||||
} |
|
||||
}, |
|
||||
internal: function(name, value) { |
|
||||
if( $.isPlainObject(name) ) { |
|
||||
$.extend(true, module, name); |
|
||||
} |
|
||||
else if(value !== undefined) { |
|
||||
module[name] = value; |
|
||||
} |
|
||||
else { |
|
||||
return module[name]; |
|
||||
} |
|
||||
}, |
|
||||
debug: function() { |
|
||||
if(settings.debug) { |
|
||||
if(settings.performance) { |
|
||||
module.performance.log(arguments); |
|
||||
} |
|
||||
else { |
|
||||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|
||||
module.debug.apply(console, arguments); |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
verbose: function() { |
|
||||
if(settings.verbose && settings.debug) { |
|
||||
if(settings.performance) { |
|
||||
module.performance.log(arguments); |
|
||||
} |
|
||||
else { |
|
||||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|
||||
module.verbose.apply(console, arguments); |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
error: function() { |
|
||||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|
||||
module.error.apply(console, arguments); |
|
||||
}, |
|
||||
performance: { |
|
||||
log: function(message) { |
|
||||
var |
|
||||
currentTime, |
|
||||
executionTime, |
|
||||
previousTime |
|
||||
; |
|
||||
if(settings.performance) { |
|
||||
currentTime = new Date().getTime(); |
|
||||
previousTime = time || currentTime; |
|
||||
executionTime = currentTime - previousTime; |
|
||||
time = currentTime; |
|
||||
performance.push({ |
|
||||
'Element' : element, |
|
||||
'Name' : message[0], |
|
||||
'Arguments' : [].slice.call(message, 1) || '', |
|
||||
'Execution Time' : executionTime |
|
||||
}); |
|
||||
} |
|
||||
clearTimeout(module.performance.timer); |
|
||||
module.performance.timer = setTimeout(module.performance.display, 100); |
|
||||
}, |
|
||||
display: function() { |
|
||||
var |
|
||||
title = settings.name + ':', |
|
||||
totalTime = 0 |
|
||||
; |
|
||||
time = false; |
|
||||
clearTimeout(module.performance.timer); |
|
||||
$.each(performance, function(index, data) { |
|
||||
totalTime += data['Execution Time']; |
|
||||
}); |
|
||||
title += ' ' + totalTime + 'ms'; |
|
||||
if(moduleSelector) { |
|
||||
title += ' \'' + moduleSelector + '\''; |
|
||||
} |
|
||||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
|
||||
console.groupCollapsed(title); |
|
||||
if(console.table) { |
|
||||
console.table(performance); |
|
||||
} |
|
||||
else { |
|
||||
$.each(performance, function(index, data) { |
|
||||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
|
||||
}); |
|
||||
} |
|
||||
console.groupEnd(); |
|
||||
} |
|
||||
performance = []; |
|
||||
} |
|
||||
}, |
|
||||
invoke: function(query, passedArguments, context) { |
|
||||
var |
|
||||
maxDepth, |
|
||||
found |
|
||||
; |
|
||||
passedArguments = passedArguments || queryArguments; |
|
||||
context = element || context; |
|
||||
if(typeof query == 'string' && instance !== undefined) { |
|
||||
query = query.split(/[\. ]/); |
|
||||
maxDepth = query.length - 1; |
|
||||
$.each(query, function(depth, value) { |
|
||||
if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) { |
|
||||
instance = instance[value]; |
|
||||
} |
|
||||
else if( instance[value] !== undefined ) { |
|
||||
found = instance[value]; |
|
||||
} |
|
||||
else { |
|
||||
module.error(error.method, query); |
|
||||
} |
|
||||
}); |
|
||||
} |
|
||||
if ( $.isFunction( found ) ) { |
|
||||
return found.apply(context, passedArguments); |
|
||||
} |
|
||||
return found || false; |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
if(methodInvoked) { |
|
||||
if(instance === undefined) { |
|
||||
module.initialize(); |
|
||||
} |
|
||||
module.invoke(query); |
|
||||
} |
|
||||
else { |
|
||||
if(instance !== undefined) { |
|
||||
module.destroy(); |
|
||||
} |
|
||||
module.initialize(); |
|
||||
} |
|
||||
}) |
|
||||
; |
|
||||
|
|
||||
return (returnedValue !== undefined) |
|
||||
? returnedValue |
|
||||
: this |
|
||||
; |
|
||||
}; |
|
||||
|
|
||||
$.fn.chatroom.settings = { |
|
||||
|
|
||||
name : 'Chat', |
|
||||
namespace : 'chat', |
|
||||
|
|
||||
debug : false, |
|
||||
|
|
||||
channel : 'present-chat', |
|
||||
|
|
||||
onJoin : function(){}, |
|
||||
onMessage : function(){}, |
|
||||
onExpand : function(){}, |
|
||||
onContract : function(){}, |
|
||||
|
|
||||
customEvents : {}, |
|
||||
|
|
||||
partingMessages : false, |
|
||||
userCount : true, |
|
||||
randomColor : true, |
|
||||
|
|
||||
speed : 300, |
|
||||
easing : 'easeOutQuint', |
|
||||
|
|
||||
// pixels from bottom of chat log that should trigger auto scroll to bottom
|
|
||||
scrollArea : 9999, |
|
||||
|
|
||||
endpoint : { |
|
||||
message : false, |
|
||||
authentication : false |
|
||||
}, |
|
||||
|
|
||||
error: { |
|
||||
method : 'The method you called is not defined', |
|
||||
endpoint : 'Please define a message and authentication endpoint.', |
|
||||
key : 'You must specify a pusher key and channel.', |
|
||||
pusher : 'You must include the Pusher library.' |
|
||||
}, |
|
||||
|
|
||||
className : { |
|
||||
expand : 'expand', |
|
||||
active : 'active', |
|
||||
hover : 'hover', |
|
||||
down : 'down', |
|
||||
loading : 'loading' |
|
||||
}, |
|
||||
|
|
||||
selector : { |
|
||||
userCount : '.actions .message', |
|
||||
userListButton : '.actions .list.button', |
|
||||
expandButton : '.actions .expand.button', |
|
||||
room : '.room', |
|
||||
userList : '.room .list', |
|
||||
log : '.room .log', |
|
||||
message : '.room .log .message', |
|
||||
author : '.room log .message .author', |
|
||||
messageInput : '.talk input', |
|
||||
messageButton : '.talk .send.button' |
|
||||
}, |
|
||||
|
|
||||
templates: { |
|
||||
|
|
||||
userCount: function(number) { |
|
||||
return number + ' users in chat'; |
|
||||
}, |
|
||||
|
|
||||
color: function(userID) { |
|
||||
var |
|
||||
colors = [ |
|
||||
'#000000', |
|
||||
'#333333', |
|
||||
'#666666', |
|
||||
'#999999', |
|
||||
'#CC9999', |
|
||||
'#CC6666', |
|
||||
'#CC3333', |
|
||||
'#993333', |
|
||||
'#663333', |
|
||||
'#CC6633', |
|
||||
'#CC9966', |
|
||||
'#CC9933', |
|
||||
'#999966', |
|
||||
'#CCCC66', |
|
||||
'#99CC66', |
|
||||
'#669933', |
|
||||
'#669966', |
|
||||
'#33A3CC', |
|
||||
'#336633', |
|
||||
'#33CCCC', |
|
||||
'#339999', |
|
||||
'#336666', |
|
||||
'#336699', |
|
||||
'#6666CC', |
|
||||
'#9966CC', |
|
||||
'#333399', |
|
||||
'#663366', |
|
||||
'#996699', |
|
||||
'#993366', |
|
||||
'#CC6699' |
|
||||
] |
|
||||
; |
|
||||
return colors[ Math.floor( Math.random() * colors.length) ]; |
|
||||
}, |
|
||||
|
|
||||
message: function(message) { |
|
||||
var |
|
||||
html = '' |
|
||||
; |
|
||||
if(message.user.isAdmin) { |
|
||||
message.user.color = '#55356A'; |
|
||||
html += '<div class="admin message">'; |
|
||||
html += '<span class="quirky ui flag team"></span>'; |
|
||||
} |
|
||||
/* |
|
||||
else if(message.user.isPro) { |
|
||||
html += '<div class="indent message">'; |
|
||||
html += '<span class="quirky ui flag pro"></span>'; |
|
||||
} |
|
||||
*/ |
|
||||
else { |
|
||||
html += '<div class="message">'; |
|
||||
} |
|
||||
html += '<p>'; |
|
||||
if(message.user.color !== undefined) { |
|
||||
html += '<span class="author" style="color: ' + message.user.color + ';">' + message.user.name + '</span>: '; |
|
||||
} |
|
||||
else { |
|
||||
html += '<span class="author">' + message.user.name + '</span>: '; |
|
||||
} |
|
||||
html += '' |
|
||||
+ message.text |
|
||||
+ ' </p>' |
|
||||
+ '</div>' |
|
||||
; |
|
||||
return html; |
|
||||
}, |
|
||||
|
|
||||
joined: function(member) { |
|
||||
return (typeof member.name !== undefined) |
|
||||
? '<div class="status">' + member.name + ' has joined the chat.</div>' |
|
||||
: false |
|
||||
; |
|
||||
}, |
|
||||
left: function(member) { |
|
||||
return (typeof member.name !== undefined) |
|
||||
? '<div class="status">' + member.name + ' has left the chat.</div>' |
|
||||
: false |
|
||||
; |
|
||||
}, |
|
||||
|
|
||||
userList: function(member) { |
|
||||
var |
|
||||
html = '' |
|
||||
; |
|
||||
if(member.isAdmin) { |
|
||||
member.color = '#55356A'; |
|
||||
} |
|
||||
html += '' |
|
||||
+ '<div class="user" data-id="' + member.id + '">' |
|
||||
+ ' <div class="image">' |
|
||||
+ ' <img src="' + member.avatarURL + '">' |
|
||||
+ ' </div>' |
|
||||
; |
|
||||
if(member.color !== undefined) { |
|
||||
html += ' <p><a href="/users/' + member.id + '" target="_blank" style="color: ' + member.color + ';">' + member.name + '</a></p>'; |
|
||||
} |
|
||||
else { |
|
||||
html += ' <p><a href="/users/' + member.id + '" target="_blank">' + member.name + '</a></p>'; |
|
||||
} |
|
||||
html += '</div>'; |
|
||||
return html; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
|
|
||||
}; |
|
||||
|
|
||||
})( jQuery, window , document ); |
|
||||
@ -1,280 +0,0 @@ |
|||||
/* |
|
||||
* # Semantic - Chat Room |
|
||||
* http://github.com/semantic-org/semantic-ui/ |
|
||||
* |
|
||||
* |
|
||||
* Copyright 2014 Contributor |
|
||||
* Released under the MIT license |
|
||||
* http://opensource.org/licenses/MIT |
|
||||
* |
|
||||
*/ |
|
||||
|
|
||||
/******************************* |
|
||||
Theme |
|
||||
*******************************/ |
|
||||
|
|
||||
@type : 'module'; |
|
||||
@element : 'chatroom'; |
|
||||
|
|
||||
@import '../../theme.config'; |
|
||||
|
|
||||
/******************************* |
|
||||
Chat Room |
|
||||
*******************************/ |
|
||||
|
|
||||
.ui.chatroom { |
|
||||
background-color: #F8F8F8; |
|
||||
width: 330px; |
|
||||
height: 370px; |
|
||||
padding: 0px; |
|
||||
} |
|
||||
.ui.chatroom .room { |
|
||||
position: relative; |
|
||||
background-color: #FFFFFF; |
|
||||
overflow: hidden; |
|
||||
height: 286px; |
|
||||
border: 1px solid rgba(0, 0, 0, 0.1); |
|
||||
border-top: none; |
|
||||
border-bottom: none; |
|
||||
} |
|
||||
.ui.chatroom .room .loader { |
|
||||
display: none; |
|
||||
margin: -25px 0px 0px -25px; |
|
||||
} |
|
||||
/* Chat Room Actions */ |
|
||||
.ui.chatroom .actions { |
|
||||
overflow: hidden; |
|
||||
background-color: #EEEEEE; |
|
||||
padding: 4px; |
|
||||
border: 1px solid rgba(0, 0, 0, 0.1); |
|
||||
|
|
||||
border-radius: 5px 5px 0px 0px; |
|
||||
} |
|
||||
.ui.chatroom .actions .button { |
|
||||
float: right; |
|
||||
margin-left: 3px; |
|
||||
} |
|
||||
|
|
||||
/* Online User Count */ |
|
||||
.ui.chatroom .actions .message { |
|
||||
float: left; |
|
||||
margin-left: 6px; |
|
||||
font-size: 11px; |
|
||||
color: #AAAAAA; |
|
||||
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8); |
|
||||
line-height: 28px; |
|
||||
} |
|
||||
.ui.chatroom .actions .message .loader { |
|
||||
display: inline-block; |
|
||||
margin-right: 8px; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
/* Chat Room Text Log */ |
|
||||
.ui.chatroom .log { |
|
||||
float: left; |
|
||||
|
|
||||
overflow: auto; |
|
||||
overflow-x: hidden; |
|
||||
overflow-y: auto; |
|
||||
} |
|
||||
.ui.chatroom .log .message { |
|
||||
padding: 3px 0px; |
|
||||
border-top: 1px dotted #DADADA; |
|
||||
} |
|
||||
.ui.chatroom .log .message:first-child { |
|
||||
border-top: none; |
|
||||
} |
|
||||
/* status event */ |
|
||||
.ui.chatroom .status { |
|
||||
padding: 5px 0px; |
|
||||
color: #AAAAAA; |
|
||||
|
|
||||
font-size: 12px; |
|
||||
font-style: italic; |
|
||||
line-height: 1.33; |
|
||||
border-top: 1px dotted #DADADA; |
|
||||
} |
|
||||
.ui.chatroom .log .status:first-child { |
|
||||
border-top: none; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
|
|
||||
.ui.chatroom .log .flag { |
|
||||
float: left; |
|
||||
} |
|
||||
.ui.chatroom .log p { |
|
||||
margin-left: 0px; |
|
||||
} |
|
||||
.ui.chatroom .log .author { |
|
||||
font-weight: bold; |
|
||||
transition: color 0.3s ease-out; |
|
||||
} |
|
||||
.ui.chatroom .log a.author:hover { |
|
||||
opacity: 0.8; |
|
||||
} |
|
||||
|
|
||||
.ui.chatroom .log .message.admin p { |
|
||||
font-weight: bold; |
|
||||
margin: 1px 0px 0px 23px; |
|
||||
} |
|
||||
.ui.chatroom .log .divider { |
|
||||
margin: -1px 0px; |
|
||||
font-size: 11px; |
|
||||
padding: 10px 0px; |
|
||||
border-top: 1px solid #F8F8F8; |
|
||||
border-bottom: 1px solid #F8F8F8; |
|
||||
} |
|
||||
.ui.chatroom .log .divider .rule { |
|
||||
top: 50%; |
|
||||
width: 15%; |
|
||||
} |
|
||||
|
|
||||
.ui.chatroom .log .divider .label { |
|
||||
color: #777777; |
|
||||
margin: 0px; |
|
||||
} |
|
||||
|
|
||||
/* Chat Room User List */ |
|
||||
.ui.chatroom .room .list { |
|
||||
position: relative; |
|
||||
overflow: auto; |
|
||||
overflow-x: hidden; |
|
||||
overflow-y: auto; |
|
||||
|
|
||||
float: left; |
|
||||
background-color: #EEEEEE; |
|
||||
border-left: 1px solid #DDDDDD; |
|
||||
} |
|
||||
.ui.chatroom .room .list .user { |
|
||||
display: table; |
|
||||
padding: 3px 7px; |
|
||||
border-bottom: 1px solid #DDDDDD; |
|
||||
} |
|
||||
.ui.chatroom .room .list .user:hover { |
|
||||
background-color: #F8F8F8; |
|
||||
} |
|
||||
.ui.chatroom .room .list .image { |
|
||||
display: table-cell; |
|
||||
vertical-align: middle; |
|
||||
width: 20px; |
|
||||
} |
|
||||
.ui.chatroom .room .list .image img { |
|
||||
width: 20px; |
|
||||
height: 20px; |
|
||||
vertical-align: middle; |
|
||||
} |
|
||||
.ui.chatroom .room .list p { |
|
||||
display: table-cell; |
|
||||
vertical-align: middle; |
|
||||
padding-left: 7px; |
|
||||
padding-right: 14px; |
|
||||
font-size: 11px; |
|
||||
line-height: 1.2; |
|
||||
font-weight: bold; |
|
||||
} |
|
||||
.ui.chatroom .room .list a:hover { |
|
||||
opacity: 0.8; |
|
||||
} |
|
||||
|
|
||||
/* User List Loading */ |
|
||||
.ui.chatroom.loading .loader { |
|
||||
display: block; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
|
|
||||
/* Chat Room Talk Input */ |
|
||||
.ui.chatroom .talk { |
|
||||
border: 1px solid rgba(0, 0, 0, 0.1); |
|
||||
padding: 5px 0px 0px; |
|
||||
|
|
||||
background-color: #EEEEEE; |
|
||||
border-radius: 0px 0px 5px 5px; |
|
||||
} |
|
||||
.ui.chatroom .talk .avatar, |
|
||||
.ui.chatroom .talk input, |
|
||||
.ui.chatroom .talk .button { |
|
||||
float: left; |
|
||||
} |
|
||||
|
|
||||
.ui.chatroom .talk .avatar img { |
|
||||
display: block; |
|
||||
width: 30px; |
|
||||
height: 30px; |
|
||||
margin-right: 4px; |
|
||||
border-radius: 500rem; |
|
||||
} |
|
||||
.ui.chatroom .talk input { |
|
||||
border: 1px solid #CCCCCC; |
|
||||
margin: 0px; |
|
||||
width: 196px; |
|
||||
height: 14px; |
|
||||
padding: 8px 5px; |
|
||||
font-size: 12px; |
|
||||
color: #555555; |
|
||||
} |
|
||||
.ui.chatroom .talk input.focus { |
|
||||
border: 1px solid #AAAAAA; |
|
||||
} |
|
||||
.ui.chatroom .send { |
|
||||
width: 80px; |
|
||||
height: 32px; |
|
||||
|
|
||||
margin-left: -1px; |
|
||||
padding: 4px 12px; |
|
||||
font-size: 12px; |
|
||||
line-height: 23px; |
|
||||
|
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; |
|
||||
border-radius: 0 5px 5px 0; |
|
||||
} |
|
||||
.ui.chatroom .talk .log-in.button { |
|
||||
display: block; |
|
||||
float: none; |
|
||||
margin-top: -6px; |
|
||||
height: 22px; |
|
||||
border-radius: 0px 0px 4px 4px; |
|
||||
} |
|
||||
.ui.chatroom .talk .log-in.button i { |
|
||||
vertical-align: text-top; |
|
||||
} |
|
||||
|
|
||||
/* Quirky Flags */ |
|
||||
.ui.chatroom .log .team.flag { |
|
||||
width: 18px; |
|
||||
} |
|
||||
|
|
||||
/* Chat room Loaded */ |
|
||||
.ui.chatroom.loading .loader { |
|
||||
display: block; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
/* Standard Size */ |
|
||||
.ui.chatroom { |
|
||||
width: 330px; |
|
||||
height: 370px; |
|
||||
} |
|
||||
.ui.chatroom .room .container { |
|
||||
width: 3000px; |
|
||||
} |
|
||||
.ui.chatroom .log { |
|
||||
width: 314px; |
|
||||
height: 278px; |
|
||||
padding: 4px 7px; |
|
||||
} |
|
||||
.ui.chatroom .room .list { |
|
||||
width: 124px; |
|
||||
height: 278px; |
|
||||
padding: 4px 0px; |
|
||||
} |
|
||||
.ui.chatroom .room .list .user { |
|
||||
width: 110px; |
|
||||
} |
|
||||
.ui.chatroom .talk { |
|
||||
height: 40px; |
|
||||
} |
|
||||
|
|
||||
.loadUIOverrides(); |
|
||||
Write
Preview
Loading…
Cancel
Save