Browse Source
Former-commit-id: 9428ec0cae6bfc600ece09c8fdc9f9a6e8ccb4d9 Former-commit-id: 8e3955beec38879e4399a48a751bc73efadd81fcbeta
jlukic
11 years ago
25 changed files with 5871 additions and 427 deletions
@ -0,0 +1,766 @@ |
|||
/* ****************************** |
|||
Module - Chat Room |
|||
Author: Jack Lukic |
|||
Notes: First Commit Aug 8, 2012 |
|||
|
|||
Designed as a simple modular chat component |
|||
****************************** */ |
|||
|
|||
;(function ($, window, document, undefined) { |
|||
|
|||
$.fn.chatroom = function(parameters) { |
|||
var |
|||
settings = $.extend(true, {}, $.fn.chatroom.settings, parameters), |
|||
|
|||
className = settings.className, |
|||
namespace = settings.namespace, |
|||
selector = settings.selector, |
|||
error = settings.error, |
|||
|
|||
// hoist arguments
|
|||
moduleArguments = arguments || false |
|||
; |
|||
$(this) |
|||
.each(function() { |
|||
var |
|||
$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'), |
|||
|
|||
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(value !== undefined) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else { |
|||
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 + '\''; |
|||
} |
|||
title += ' ' + '(' + $allDropdowns.size() + ')'; |
|||
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); |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
return found.apply(context, passedArguments); |
|||
} |
|||
return found || false; |
|||
} |
|||
}; |
|||
|
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
invokedResponse = module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
|
|||
return (invokedResponse) |
|||
? invokedResponse |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.chatroom.settings = { |
|||
|
|||
name : 'Chat', |
|||
debug : false, |
|||
namespace : 'chat', |
|||
|
|||
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 ); |
@ -0,0 +1,358 @@ |
|||
/* ****************************** |
|||
Star Review |
|||
Author: Jack Lukic |
|||
Notes: First Commit Sep 04, 2012 |
|||
|
|||
Simple rating module |
|||
****************************** */ |
|||
|
|||
;(function ($, window, document, undefined) { |
|||
|
|||
$.fn.rating = function(parameters) { |
|||
var |
|||
$allModules = $(this), |
|||
moduleSelector = $allModules.selector || '', |
|||
|
|||
settings = $.extend(true, {}, $.fn.rating.settings, parameters), |
|||
|
|||
namespace = settings.namespace, |
|||
className = settings.className, |
|||
metadata = settings.metadata, |
|||
selector = settings.selector, |
|||
error = settings.error, |
|||
|
|||
eventNamespace = '.' + namespace, |
|||
moduleNamespace = 'module-' + namespace, |
|||
|
|||
time = new Date().getTime(), |
|||
performance = [], |
|||
|
|||
query = arguments[0], |
|||
methodInvoked = (typeof query == 'string'), |
|||
queryArguments = [].slice.call(arguments, 1), |
|||
invokedResponse |
|||
; |
|||
$allModules |
|||
.each(function() { |
|||
var |
|||
$module = $(this), |
|||
$icon = $module.find(selector.icon), |
|||
|
|||
element = this, |
|||
instance = $module.data(moduleNamespace), |
|||
module |
|||
; |
|||
|
|||
module = { |
|||
|
|||
initialize: function() { |
|||
module.verbose('Initializing rating module'); |
|||
if(settings.interactive) { |
|||
$icon |
|||
.bind('mouseenter' + eventNamespace, module.event.mouseenter) |
|||
.bind('mouseleave' + eventNamespace, module.event.mouseleave) |
|||
.bind('click' + eventNamespace, module.event.click) |
|||
; |
|||
} |
|||
if(settings.initialRating) { |
|||
module.debug('Setting initial rating'); |
|||
module.setRating(settings.initialRating); |
|||
} |
|||
if( $module.data(metadata.rating) ) { |
|||
module.debug('Rating found in metadata'); |
|||
module.setRating( $module.data(metadata.rating) ); |
|||
} |
|||
$module |
|||
.addClass(className.active) |
|||
; |
|||
module.instantiate(); |
|||
}, |
|||
|
|||
instantiate: function() { |
|||
module.verbose('Instantiating module', settings); |
|||
$module |
|||
.data(moduleNamespace, module) |
|||
; |
|||
}, |
|||
|
|||
destroy: function() { |
|||
$module |
|||
.removeData(moduleNamespace) |
|||
; |
|||
$icon |
|||
.off(eventNamespace) |
|||
; |
|||
}, |
|||
|
|||
setRating: function(rating) { |
|||
var |
|||
$activeIcon = $icon.eq(rating - 1) |
|||
; |
|||
module.verbose('Setting current rating to', rating); |
|||
$module |
|||
.removeClass(className.hover) |
|||
; |
|||
$icon |
|||
.removeClass(className.hover) |
|||
; |
|||
$activeIcon |
|||
.nextAll() |
|||
.removeClass(className.active) |
|||
; |
|||
$activeIcon |
|||
.addClass(className.active) |
|||
.prevAll() |
|||
.addClass(className.active) |
|||
; |
|||
$.proxy(settings.onRate, element)(); |
|||
}, |
|||
|
|||
event: { |
|||
mouseenter: function() { |
|||
var |
|||
$activeIcon = $(this) |
|||
; |
|||
$activeIcon |
|||
.nextAll() |
|||
.removeClass(className.hover) |
|||
; |
|||
$module |
|||
.addClass(className.hover) |
|||
; |
|||
$activeIcon |
|||
.addClass(className.hover) |
|||
.prevAll() |
|||
.addClass(className.hover) |
|||
; |
|||
}, |
|||
mouseleave: function() { |
|||
$module |
|||
.removeClass(className.hover) |
|||
; |
|||
$icon |
|||
.removeClass(className.hover) |
|||
; |
|||
}, |
|||
click: function() { |
|||
var |
|||
$activeIcon = $(this) |
|||
; |
|||
module.setRating( $icon.index($activeIcon) + 1); |
|||
} |
|||
}, |
|||
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(value !== undefined) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else { |
|||
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.moduleName + ':'); |
|||
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.moduleName + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':'); |
|||
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($allModules.size() > 1) { |
|||
title += ' ' + '(' + $allModules.size() + ')'; |
|||
} |
|||
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, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && instance !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) { |
|||
instance = instance[value]; |
|||
} |
|||
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
instance = instance[camelCaseValue]; |
|||
} |
|||
else if( instance[value] !== undefined ) { |
|||
found = instance[value]; |
|||
return false; |
|||
} |
|||
else if( instance[camelCaseValue] !== undefined ) { |
|||
found = instance[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else { |
|||
module.error(error.method); |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(invokedResponse)) { |
|||
invokedResponse.push(response); |
|||
} |
|||
else if(typeof invokedResponse == 'string') { |
|||
invokedResponse = [invokedResponse, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
invokedResponse = response; |
|||
} |
|||
return found; |
|||
} |
|||
}; |
|||
|
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
|
|||
return (invokedResponse !== undefined) |
|||
? invokedResponse |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.rating.settings = { |
|||
|
|||
name : 'Rating', |
|||
namespace : 'rating', |
|||
|
|||
verbose : true, |
|||
debug : true, |
|||
performance : true, |
|||
|
|||
initialRating : 0, |
|||
interactive : true, |
|||
onRate : function(){}, |
|||
|
|||
error : { |
|||
method : 'The method you called is not defined' |
|||
}, |
|||
|
|||
metadata: { |
|||
rating: 'rating' |
|||
}, |
|||
|
|||
className : { |
|||
active : 'active', |
|||
hover : 'hover', |
|||
loading : 'loading' |
|||
}, |
|||
|
|||
selector : { |
|||
icon : '.icon' |
|||
} |
|||
|
|||
}; |
|||
|
|||
})( jQuery, window , document ); |
@ -0,0 +1,766 @@ |
|||
/* ****************************** |
|||
Module - Chat Room |
|||
Author: Jack Lukic |
|||
Notes: First Commit Aug 8, 2012 |
|||
|
|||
Designed as a simple modular chat component |
|||
****************************** */ |
|||
|
|||
;(function ($, window, document, undefined) { |
|||
|
|||
$.fn.chatroom = function(parameters) { |
|||
var |
|||
settings = $.extend(true, {}, $.fn.chatroom.settings, parameters), |
|||
|
|||
className = settings.className, |
|||
namespace = settings.namespace, |
|||
selector = settings.selector, |
|||
error = settings.error, |
|||
|
|||
// hoist arguments
|
|||
moduleArguments = arguments || false |
|||
; |
|||
$(this) |
|||
.each(function() { |
|||
var |
|||
$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'), |
|||
|
|||
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(value !== undefined) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else { |
|||
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 + '\''; |
|||
} |
|||
title += ' ' + '(' + $allDropdowns.size() + ')'; |
|||
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); |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
return found.apply(context, passedArguments); |
|||
} |
|||
return found || false; |
|||
} |
|||
}; |
|||
|
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
invokedResponse = module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
|
|||
return (invokedResponse) |
|||
? invokedResponse |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.chatroom.settings = { |
|||
|
|||
name : 'Chat', |
|||
debug : false, |
|||
namespace : 'chat', |
|||
|
|||
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 ); |
@ -0,0 +1,358 @@ |
|||
/* ****************************** |
|||
Star Review |
|||
Author: Jack Lukic |
|||
Notes: First Commit Sep 04, 2012 |
|||
|
|||
Simple rating module |
|||
****************************** */ |
|||
|
|||
;(function ($, window, document, undefined) { |
|||
|
|||
$.fn.rating = function(parameters) { |
|||
var |
|||
$allModules = $(this), |
|||
moduleSelector = $allModules.selector || '', |
|||
|
|||
settings = $.extend(true, {}, $.fn.rating.settings, parameters), |
|||
|
|||
namespace = settings.namespace, |
|||
className = settings.className, |
|||
metadata = settings.metadata, |
|||
selector = settings.selector, |
|||
error = settings.error, |
|||
|
|||
eventNamespace = '.' + namespace, |
|||
moduleNamespace = 'module-' + namespace, |
|||
|
|||
time = new Date().getTime(), |
|||
performance = [], |
|||
|
|||
query = arguments[0], |
|||
methodInvoked = (typeof query == 'string'), |
|||
queryArguments = [].slice.call(arguments, 1), |
|||
invokedResponse |
|||
; |
|||
$allModules |
|||
.each(function() { |
|||
var |
|||
$module = $(this), |
|||
$icon = $module.find(selector.icon), |
|||
|
|||
element = this, |
|||
instance = $module.data(moduleNamespace), |
|||
module |
|||
; |
|||
|
|||
module = { |
|||
|
|||
initialize: function() { |
|||
module.verbose('Initializing rating module'); |
|||
if(settings.interactive) { |
|||
$icon |
|||
.bind('mouseenter' + eventNamespace, module.event.mouseenter) |
|||
.bind('mouseleave' + eventNamespace, module.event.mouseleave) |
|||
.bind('click' + eventNamespace, module.event.click) |
|||
; |
|||
} |
|||
if(settings.initialRating) { |
|||
module.debug('Setting initial rating'); |
|||
module.setRating(settings.initialRating); |
|||
} |
|||
if( $module.data(metadata.rating) ) { |
|||
module.debug('Rating found in metadata'); |
|||
module.setRating( $module.data(metadata.rating) ); |
|||
} |
|||
$module |
|||
.addClass(className.active) |
|||
; |
|||
module.instantiate(); |
|||
}, |
|||
|
|||
instantiate: function() { |
|||
module.verbose('Instantiating module', settings); |
|||
$module |
|||
.data(moduleNamespace, module) |
|||
; |
|||
}, |
|||
|
|||
destroy: function() { |
|||
$module |
|||
.removeData(moduleNamespace) |
|||
; |
|||
$icon |
|||
.off(eventNamespace) |
|||
; |
|||
}, |
|||
|
|||
setRating: function(rating) { |
|||
var |
|||
$activeIcon = $icon.eq(rating - 1) |
|||
; |
|||
module.verbose('Setting current rating to', rating); |
|||
$module |
|||
.removeClass(className.hover) |
|||
; |
|||
$icon |
|||
.removeClass(className.hover) |
|||
; |
|||
$activeIcon |
|||
.nextAll() |
|||
.removeClass(className.active) |
|||
; |
|||
$activeIcon |
|||
.addClass(className.active) |
|||
.prevAll() |
|||
.addClass(className.active) |
|||
; |
|||
$.proxy(settings.onRate, element)(); |
|||
}, |
|||
|
|||
event: { |
|||
mouseenter: function() { |
|||
var |
|||
$activeIcon = $(this) |
|||
; |
|||
$activeIcon |
|||
.nextAll() |
|||
.removeClass(className.hover) |
|||
; |
|||
$module |
|||
.addClass(className.hover) |
|||
; |
|||
$activeIcon |
|||
.addClass(className.hover) |
|||
.prevAll() |
|||
.addClass(className.hover) |
|||
; |
|||
}, |
|||
mouseleave: function() { |
|||
$module |
|||
.removeClass(className.hover) |
|||
; |
|||
$icon |
|||
.removeClass(className.hover) |
|||
; |
|||
}, |
|||
click: function() { |
|||
var |
|||
$activeIcon = $(this) |
|||
; |
|||
module.setRating( $icon.index($activeIcon) + 1); |
|||
} |
|||
}, |
|||
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(value !== undefined) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else { |
|||
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.moduleName + ':'); |
|||
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.moduleName + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':'); |
|||
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($allModules.size() > 1) { |
|||
title += ' ' + '(' + $allModules.size() + ')'; |
|||
} |
|||
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, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && instance !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) { |
|||
instance = instance[value]; |
|||
} |
|||
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
instance = instance[camelCaseValue]; |
|||
} |
|||
else if( instance[value] !== undefined ) { |
|||
found = instance[value]; |
|||
return false; |
|||
} |
|||
else if( instance[camelCaseValue] !== undefined ) { |
|||
found = instance[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else { |
|||
module.error(error.method); |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(invokedResponse)) { |
|||
invokedResponse.push(response); |
|||
} |
|||
else if(typeof invokedResponse == 'string') { |
|||
invokedResponse = [invokedResponse, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
invokedResponse = response; |
|||
} |
|||
return found; |
|||
} |
|||
}; |
|||
|
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
|
|||
return (invokedResponse !== undefined) |
|||
? invokedResponse |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.rating.settings = { |
|||
|
|||
name : 'Rating', |
|||
namespace : 'rating', |
|||
|
|||
verbose : true, |
|||
debug : true, |
|||
performance : true, |
|||
|
|||
initialRating : 0, |
|||
interactive : true, |
|||
onRate : function(){}, |
|||
|
|||
error : { |
|||
method : 'The method you called is not defined' |
|||
}, |
|||
|
|||
metadata: { |
|||
rating: 'rating' |
|||
}, |
|||
|
|||
className : { |
|||
active : 'active', |
|||
hover : 'hover', |
|||
loading : 'loading' |
|||
}, |
|||
|
|||
selector : { |
|||
icon : '.icon' |
|||
} |
|||
|
|||
}; |
|||
|
|||
})( jQuery, window , document ); |
@ -0,0 +1,242 @@ |
|||
/******************************* |
|||
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); |
|||
-moz-border-radius: 5px 5px 0px 0px; |
|||
-webkit-border-radius: 5px 5px 0px 0px; |
|||
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; |
|||
-webkit-transition: color 0.3s ease-out; |
|||
-moz-transition: color 0.3s ease-out; |
|||
-o-transition: color 0.3s ease-out; |
|||
-ms-transition: color 0.3s ease-out; |
|||
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; |
|||
-webkit-border-radius: 0px 0px 5px 5px; |
|||
-moz-border-radius: 0px 0px 5px 5px; |
|||
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; |
|||
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; |
|||
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; |
|||
} |
@ -0,0 +1,766 @@ |
|||
/* ****************************** |
|||
Module - Chat Room |
|||
Author: Jack Lukic |
|||
Notes: First Commit Aug 8, 2012 |
|||
|
|||
Designed as a simple modular chat component |
|||
****************************** */ |
|||
|
|||
;(function ($, window, document, undefined) { |
|||
|
|||
$.fn.chatroom = function(parameters) { |
|||
var |
|||
settings = $.extend(true, {}, $.fn.chatroom.settings, parameters), |
|||
|
|||
className = settings.className, |
|||
namespace = settings.namespace, |
|||
selector = settings.selector, |
|||
error = settings.error, |
|||
|
|||
// hoist arguments
|
|||
moduleArguments = arguments || false |
|||
; |
|||
$(this) |
|||
.each(function() { |
|||
var |
|||
$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'), |
|||
|
|||
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(value !== undefined) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else { |
|||
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 + '\''; |
|||
} |
|||
title += ' ' + '(' + $allDropdowns.size() + ')'; |
|||
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); |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
return found.apply(context, passedArguments); |
|||
} |
|||
return found || false; |
|||
} |
|||
}; |
|||
|
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
invokedResponse = module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
|
|||
return (invokedResponse) |
|||
? invokedResponse |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.chatroom.settings = { |
|||
|
|||
name : 'Chat', |
|||
debug : false, |
|||
namespace : 'chat', |
|||
|
|||
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 ); |
@ -0,0 +1,120 @@ |
|||
/******************************* |
|||
Star Rating |
|||
*******************************/ |
|||
.ui.rating { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin: 0em 0.5em; |
|||
} |
|||
.ui.rating:first-child { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.rating:last-child { |
|||
margin-right: 0em; |
|||
} |
|||
.ui.rating:after { |
|||
display: block; |
|||
content: ''; |
|||
visibility: hidden; |
|||
clear: both; |
|||
height: 0; |
|||
} |
|||
/* Icon */ |
|||
.ui.rating .icon { |
|||
cursor: default; |
|||
float: left; |
|||
margin: 0em; |
|||
width: 1em; |
|||
height: auto; |
|||
padding: 0em; |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
.ui.rating .icon:after { |
|||
content: "\2605"; |
|||
color: rgba(0, 0, 0, 0.15); |
|||
-webkit-transition: color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
-moz-transition: color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
-ms-transition: color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
-o-transition: color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
transition: color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
} |
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
/*------------------- |
|||
Star |
|||
--------------------*/ |
|||
.ui.star.rating .icon:after { |
|||
content: '\e800'; |
|||
font-family: 'Icons'; |
|||
} |
|||
.ui.star.rating .active.icon:after { |
|||
content: '\e801'; |
|||
font-family: 'Icons'; |
|||
} |
|||
/*------------------- |
|||
Heart |
|||
--------------------*/ |
|||
.ui.heart.rating .icon:after { |
|||
content: '\2661'; |
|||
font-family: 'Icons'; |
|||
} |
|||
.ui.heart.rating .active.icon:after { |
|||
content: '\2665'; |
|||
font-family: 'Icons'; |
|||
color: #EF404A; |
|||
} |
|||
.ui.heart.rating .hover.icon:after, |
|||
.ui.heart.rating .active.hover.icon:after { |
|||
color: #FF2733; |
|||
} |
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
/*------------------- |
|||
Active |
|||
--------------------*/ |
|||
/* active rating */ |
|||
.ui.active.rating .icon { |
|||
cursor: pointer; |
|||
} |
|||
/* active icons */ |
|||
.ui.rating .active.icon:after { |
|||
color: #FFCB08; |
|||
} |
|||
/*------------------- |
|||
Hover |
|||
--------------------*/ |
|||
/* rating */ |
|||
.ui.rating.hover .active.icon:after { |
|||
opacity: 0.5; |
|||
} |
|||
/* icon */ |
|||
.ui.rating .icon.hover:after, |
|||
.ui.rating .icon.hover.active:after { |
|||
opacity: 1; |
|||
color: #FFB70A; |
|||
} |
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
.ui.small.rating { |
|||
font-size: 1rem; |
|||
} |
|||
.ui.rating { |
|||
font-size: 1.5rem; |
|||
} |
|||
.ui.large.rating { |
|||
font-size: 2rem; |
|||
} |
@ -0,0 +1,358 @@ |
|||
/* ****************************** |
|||
Star Review |
|||
Author: Jack Lukic |
|||
Notes: First Commit Sep 04, 2012 |
|||
|
|||
Simple rating module |
|||
****************************** */ |
|||
|
|||
;(function ($, window, document, undefined) { |
|||
|
|||
$.fn.rating = function(parameters) { |
|||
var |
|||
$allModules = $(this), |
|||
moduleSelector = $allModules.selector || '', |
|||
|
|||
settings = $.extend(true, {}, $.fn.rating.settings, parameters), |
|||
|
|||
namespace = settings.namespace, |
|||
className = settings.className, |
|||
metadata = settings.metadata, |
|||
selector = settings.selector, |
|||
error = settings.error, |
|||
|
|||
eventNamespace = '.' + namespace, |
|||
moduleNamespace = 'module-' + namespace, |
|||
|
|||
time = new Date().getTime(), |
|||
performance = [], |
|||
|
|||
query = arguments[0], |
|||
methodInvoked = (typeof query == 'string'), |
|||
queryArguments = [].slice.call(arguments, 1), |
|||
invokedResponse |
|||
; |
|||
$allModules |
|||
.each(function() { |
|||
var |
|||
$module = $(this), |
|||
$icon = $module.find(selector.icon), |
|||
|
|||
element = this, |
|||
instance = $module.data(moduleNamespace), |
|||
module |
|||
; |
|||
|
|||
module = { |
|||
|
|||
initialize: function() { |
|||
module.verbose('Initializing rating module'); |
|||
if(settings.interactive) { |
|||
$icon |
|||
.bind('mouseenter' + eventNamespace, module.event.mouseenter) |
|||
.bind('mouseleave' + eventNamespace, module.event.mouseleave) |
|||
.bind('click' + eventNamespace, module.event.click) |
|||
; |
|||
} |
|||
if(settings.initialRating) { |
|||
module.debug('Setting initial rating'); |
|||
module.setRating(settings.initialRating); |
|||
} |
|||
if( $module.data(metadata.rating) ) { |
|||
module.debug('Rating found in metadata'); |
|||
module.setRating( $module.data(metadata.rating) ); |
|||
} |
|||
$module |
|||
.addClass(className.active) |
|||
; |
|||
module.instantiate(); |
|||
}, |
|||
|
|||
instantiate: function() { |
|||
module.verbose('Instantiating module', settings); |
|||
$module |
|||
.data(moduleNamespace, module) |
|||
; |
|||
}, |
|||
|
|||
destroy: function() { |
|||
$module |
|||
.removeData(moduleNamespace) |
|||
; |
|||
$icon |
|||
.off(eventNamespace) |
|||
; |
|||
}, |
|||
|
|||
setRating: function(rating) { |
|||
var |
|||
$activeIcon = $icon.eq(rating - 1) |
|||
; |
|||
module.verbose('Setting current rating to', rating); |
|||
$module |
|||
.removeClass(className.hover) |
|||
; |
|||
$icon |
|||
.removeClass(className.hover) |
|||
; |
|||
$activeIcon |
|||
.nextAll() |
|||
.removeClass(className.active) |
|||
; |
|||
$activeIcon |
|||
.addClass(className.active) |
|||
.prevAll() |
|||
.addClass(className.active) |
|||
; |
|||
$.proxy(settings.onRate, element)(); |
|||
}, |
|||
|
|||
event: { |
|||
mouseenter: function() { |
|||
var |
|||
$activeIcon = $(this) |
|||
; |
|||
$activeIcon |
|||
.nextAll() |
|||
.removeClass(className.hover) |
|||
; |
|||
$module |
|||
.addClass(className.hover) |
|||
; |
|||
$activeIcon |
|||
.addClass(className.hover) |
|||
.prevAll() |
|||
.addClass(className.hover) |
|||
; |
|||
}, |
|||
mouseleave: function() { |
|||
$module |
|||
.removeClass(className.hover) |
|||
; |
|||
$icon |
|||
.removeClass(className.hover) |
|||
; |
|||
}, |
|||
click: function() { |
|||
var |
|||
$activeIcon = $(this) |
|||
; |
|||
module.setRating( $icon.index($activeIcon) + 1); |
|||
} |
|||
}, |
|||
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(value !== undefined) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else { |
|||
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.moduleName + ':'); |
|||
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.moduleName + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':'); |
|||
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($allModules.size() > 1) { |
|||
title += ' ' + '(' + $allModules.size() + ')'; |
|||
} |
|||
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, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && instance !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) { |
|||
instance = instance[value]; |
|||
} |
|||
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
instance = instance[camelCaseValue]; |
|||
} |
|||
else if( instance[value] !== undefined ) { |
|||
found = instance[value]; |
|||
return false; |
|||
} |
|||
else if( instance[camelCaseValue] !== undefined ) { |
|||
found = instance[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else { |
|||
module.error(error.method); |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(invokedResponse)) { |
|||
invokedResponse.push(response); |
|||
} |
|||
else if(typeof invokedResponse == 'string') { |
|||
invokedResponse = [invokedResponse, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
invokedResponse = response; |
|||
} |
|||
return found; |
|||
} |
|||
}; |
|||
|
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
|
|||
return (invokedResponse !== undefined) |
|||
? invokedResponse |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.rating.settings = { |
|||
|
|||
name : 'Rating', |
|||
namespace : 'rating', |
|||
|
|||
verbose : true, |
|||
debug : true, |
|||
performance : true, |
|||
|
|||
initialRating : 0, |
|||
interactive : true, |
|||
onRate : function(){}, |
|||
|
|||
error : { |
|||
method : 'The method you called is not defined' |
|||
}, |
|||
|
|||
metadata: { |
|||
rating: 'rating' |
|||
}, |
|||
|
|||
className : { |
|||
active : 'active', |
|||
hover : 'hover', |
|||
loading : 'loading' |
|||
}, |
|||
|
|||
selector : { |
|||
icon : '.icon' |
|||
} |
|||
|
|||
}; |
|||
|
|||
})( jQuery, window , document ); |
@ -0,0 +1,766 @@ |
|||
/* ****************************** |
|||
Module - Chat Room |
|||
Author: Jack Lukic |
|||
Notes: First Commit Aug 8, 2012 |
|||
|
|||
Designed as a simple modular chat component |
|||
****************************** */ |
|||
|
|||
;(function ($, window, document, undefined) { |
|||
|
|||
$.fn.chatroom = function(parameters) { |
|||
var |
|||
settings = $.extend(true, {}, $.fn.chatroom.settings, parameters), |
|||
|
|||
className = settings.className, |
|||
namespace = settings.namespace, |
|||
selector = settings.selector, |
|||
error = settings.error, |
|||
|
|||
// hoist arguments
|
|||
moduleArguments = arguments || false |
|||
; |
|||
$(this) |
|||
.each(function() { |
|||
var |
|||
$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'), |
|||
|
|||
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(value !== undefined) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else { |
|||
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 + '\''; |
|||
} |
|||
title += ' ' + '(' + $allDropdowns.size() + ')'; |
|||
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); |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
return found.apply(context, passedArguments); |
|||
} |
|||
return found || false; |
|||
} |
|||
}; |
|||
|
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
invokedResponse = module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
|
|||
return (invokedResponse) |
|||
? invokedResponse |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.chatroom.settings = { |
|||
|
|||
name : 'Chat', |
|||
debug : false, |
|||
namespace : 'chat', |
|||
|
|||
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 ); |
@ -0,0 +1,271 @@ |
|||
|
|||
/******************************* |
|||
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); |
|||
|
|||
-moz-border-radius: 5px 5px 0px 0px; |
|||
-webkit-border-radius: 5px 5px 0px 0px; |
|||
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; |
|||
-webkit-transition: color 0.3s ease-out; |
|||
-moz-transition: color 0.3s ease-out; |
|||
-o-transition: color 0.3s ease-out; |
|||
-ms-transition: color 0.3s ease-out; |
|||
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; |
|||
|
|||
-webkit-border-radius: 0px 0px 5px 5px; |
|||
-moz-border-radius: 0px 0px 5px 5px; |
|||
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; |
|||
|
|||
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; |
|||
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; |
|||
} |
@ -0,0 +1,358 @@ |
|||
/* ****************************** |
|||
Star Review |
|||
Author: Jack Lukic |
|||
Notes: First Commit Sep 04, 2012 |
|||
|
|||
Simple rating module |
|||
****************************** */ |
|||
|
|||
;(function ($, window, document, undefined) { |
|||
|
|||
$.fn.rating = function(parameters) { |
|||
var |
|||
$allModules = $(this), |
|||
moduleSelector = $allModules.selector || '', |
|||
|
|||
settings = $.extend(true, {}, $.fn.rating.settings, parameters), |
|||
|
|||
namespace = settings.namespace, |
|||
className = settings.className, |
|||
metadata = settings.metadata, |
|||
selector = settings.selector, |
|||
error = settings.error, |
|||
|
|||
eventNamespace = '.' + namespace, |
|||
moduleNamespace = 'module-' + namespace, |
|||
|
|||
time = new Date().getTime(), |
|||
performance = [], |
|||
|
|||
query = arguments[0], |
|||
methodInvoked = (typeof query == 'string'), |
|||
queryArguments = [].slice.call(arguments, 1), |
|||
invokedResponse |
|||
; |
|||
$allModules |
|||
.each(function() { |
|||
var |
|||
$module = $(this), |
|||
$icon = $module.find(selector.icon), |
|||
|
|||
element = this, |
|||
instance = $module.data(moduleNamespace), |
|||
module |
|||
; |
|||
|
|||
module = { |
|||
|
|||
initialize: function() { |
|||
module.verbose('Initializing rating module'); |
|||
if(settings.interactive) { |
|||
$icon |
|||
.bind('mouseenter' + eventNamespace, module.event.mouseenter) |
|||
.bind('mouseleave' + eventNamespace, module.event.mouseleave) |
|||
.bind('click' + eventNamespace, module.event.click) |
|||
; |
|||
} |
|||
if(settings.initialRating) { |
|||
module.debug('Setting initial rating'); |
|||
module.setRating(settings.initialRating); |
|||
} |
|||
if( $module.data(metadata.rating) ) { |
|||
module.debug('Rating found in metadata'); |
|||
module.setRating( $module.data(metadata.rating) ); |
|||
} |
|||
$module |
|||
.addClass(className.active) |
|||
; |
|||
module.instantiate(); |
|||
}, |
|||
|
|||
instantiate: function() { |
|||
module.verbose('Instantiating module', settings); |
|||
$module |
|||
.data(moduleNamespace, module) |
|||
; |
|||
}, |
|||
|
|||
destroy: function() { |
|||
$module |
|||
.removeData(moduleNamespace) |
|||
; |
|||
$icon |
|||
.off(eventNamespace) |
|||
; |
|||
}, |
|||
|
|||
setRating: function(rating) { |
|||
var |
|||
$activeIcon = $icon.eq(rating - 1) |
|||
; |
|||
module.verbose('Setting current rating to', rating); |
|||
$module |
|||
.removeClass(className.hover) |
|||
; |
|||
$icon |
|||
.removeClass(className.hover) |
|||
; |
|||
$activeIcon |
|||
.nextAll() |
|||
.removeClass(className.active) |
|||
; |
|||
$activeIcon |
|||
.addClass(className.active) |
|||
.prevAll() |
|||
.addClass(className.active) |
|||
; |
|||
$.proxy(settings.onRate, element)(); |
|||
}, |
|||
|
|||
event: { |
|||
mouseenter: function() { |
|||
var |
|||
$activeIcon = $(this) |
|||
; |
|||
$activeIcon |
|||
.nextAll() |
|||
.removeClass(className.hover) |
|||
; |
|||
$module |
|||
.addClass(className.hover) |
|||
; |
|||
$activeIcon |
|||
.addClass(className.hover) |
|||
.prevAll() |
|||
.addClass(className.hover) |
|||
; |
|||
}, |
|||
mouseleave: function() { |
|||
$module |
|||
.removeClass(className.hover) |
|||
; |
|||
$icon |
|||
.removeClass(className.hover) |
|||
; |
|||
}, |
|||
click: function() { |
|||
var |
|||
$activeIcon = $(this) |
|||
; |
|||
module.setRating( $icon.index($activeIcon) + 1); |
|||
} |
|||
}, |
|||
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(value !== undefined) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else { |
|||
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.moduleName + ':'); |
|||
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.moduleName + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':'); |
|||
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($allModules.size() > 1) { |
|||
title += ' ' + '(' + $allModules.size() + ')'; |
|||
} |
|||
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, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && instance !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) { |
|||
instance = instance[value]; |
|||
} |
|||
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
instance = instance[camelCaseValue]; |
|||
} |
|||
else if( instance[value] !== undefined ) { |
|||
found = instance[value]; |
|||
return false; |
|||
} |
|||
else if( instance[camelCaseValue] !== undefined ) { |
|||
found = instance[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else { |
|||
module.error(error.method); |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(invokedResponse)) { |
|||
invokedResponse.push(response); |
|||
} |
|||
else if(typeof invokedResponse == 'string') { |
|||
invokedResponse = [invokedResponse, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
invokedResponse = response; |
|||
} |
|||
return found; |
|||
} |
|||
}; |
|||
|
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
|
|||
return (invokedResponse !== undefined) |
|||
? invokedResponse |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.rating.settings = { |
|||
|
|||
name : 'Rating', |
|||
namespace : 'rating', |
|||
|
|||
verbose : true, |
|||
debug : true, |
|||
performance : true, |
|||
|
|||
initialRating : 0, |
|||
interactive : true, |
|||
onRate : function(){}, |
|||
|
|||
error : { |
|||
method : 'The method you called is not defined' |
|||
}, |
|||
|
|||
metadata: { |
|||
rating: 'rating' |
|||
}, |
|||
|
|||
className : { |
|||
active : 'active', |
|||
hover : 'hover', |
|||
loading : 'loading' |
|||
}, |
|||
|
|||
selector : { |
|||
icon : '.icon' |
|||
} |
|||
|
|||
}; |
|||
|
|||
})( jQuery, window , document ); |
@ -0,0 +1,151 @@ |
|||
/******************************* |
|||
Star Rating |
|||
*******************************/ |
|||
|
|||
.ui.rating { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin: 0em 0.5em; |
|||
} |
|||
.ui.rating:first-child { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.rating:last-child { |
|||
margin-right: 0em; |
|||
} |
|||
|
|||
.ui.rating:after { |
|||
display: block; |
|||
content: ''; |
|||
visibility: hidden; |
|||
clear: both; |
|||
height: 0; |
|||
} |
|||
|
|||
/* Icon */ |
|||
.ui.rating .icon { |
|||
cursor: default; |
|||
float: left; |
|||
|
|||
margin: 0em; |
|||
|
|||
width: 1em; |
|||
height: auto; |
|||
padding: 0em; |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
.ui.rating .icon:after { |
|||
content: "\2605"; |
|||
color: rgba(0, 0, 0, 0.15); |
|||
|
|||
-webkit-transition: |
|||
color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
-moz-transition: |
|||
color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
-ms-transition: |
|||
color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
-o-transition: |
|||
color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
transition: |
|||
color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
} |
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Star |
|||
--------------------*/ |
|||
|
|||
.ui.star.rating .icon:after { |
|||
content: '\e800'; |
|||
font-family: 'Icons'; |
|||
} |
|||
|
|||
.ui.star.rating .active.icon:after { |
|||
content: '\e801'; |
|||
font-family: 'Icons'; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Heart |
|||
--------------------*/ |
|||
|
|||
.ui.heart.rating .icon:after { |
|||
content: '\2661'; |
|||
font-family: 'Icons'; |
|||
} |
|||
|
|||
.ui.heart.rating .active.icon:after { |
|||
content: '\2665'; |
|||
font-family: 'Icons'; |
|||
color: #EF404A; |
|||
} |
|||
.ui.heart.rating .hover.icon:after, |
|||
.ui.heart.rating .active.hover.icon:after { |
|||
color: #FF2733; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Active |
|||
--------------------*/ |
|||
|
|||
/* active rating */ |
|||
.ui.active.rating .icon { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
/* active icons */ |
|||
.ui.rating .active.icon:after { |
|||
color: #FFCB08; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Hover |
|||
--------------------*/ |
|||
|
|||
/* rating */ |
|||
.ui.rating.hover .active.icon:after { |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
/* icon */ |
|||
.ui.rating .icon.hover:after, |
|||
.ui.rating .icon.hover.active:after { |
|||
opacity: 1; |
|||
color: #FFB70A; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
.ui.small.rating { |
|||
font-size: 1rem; |
|||
} |
|||
.ui.rating { |
|||
font-size: 1.5rem; |
|||
} |
|||
.ui.large.rating { |
|||
font-size: 2rem; |
|||
} |
Loading…
Reference in new issue