diff --git a/src/definitions/modules/chatroom.js b/src/definitions/modules/chatroom.js deleted file mode 100644 index aaf32bed3..000000000 --- a/src/definitions/modules/chatroom.js +++ /dev/null @@ -1,776 +0,0 @@ -/* - * # Semantic - Chatroom - * http://github.com/semantic-org/semantic-ui/ - * - * - * Copyright 2014 Contributor - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -;(function ($, window, document, undefined) { - -"use strict"; - -$.fn.chatroom = function(parameters) { - var - $allModules = $(this), - moduleSelector = $allModules.selector || '', - - time = new Date().getTime(), - performance = [], - - query = arguments[0], - methodInvoked = (typeof query == 'string'), - queryArguments = [].slice.call(arguments, 1), - returnedValue - ; - $(this) - .each(function() { - var - settings = $.extend(true, {}, $.fn.chatroom.settings, parameters), - - className = settings.className, - namespace = settings.namespace, - selector = settings.selector, - error = settings.error, - - $module = $(this), - - $expandButton = $module.find(selector.expandButton), - $userListButton = $module.find(selector.userListButton), - - $userList = $module.find(selector.userList), - $room = $module.find(selector.room), - $userCount = $module.find(selector.userCount), - - $log = $module.find(selector.log), - $message = $module.find(selector.message), - - $messageInput = $module.find(selector.messageInput), - $messageButton = $module.find(selector.messageButton), - - instance = $module.data('module'), - element = this, - - html = '', - users = {}, - - channel, - loggedInUser, - - message, - count, - - height, - - pusher, - module - ; - - module = { - - width: { - log : $log.width(), - userList : $userList.outerWidth() - }, - - initialize: function() { - - // check error conditions - if(Pusher === undefined) { - module.error(error.pusher); - } - if(settings.key === undefined || settings.channelName === undefined) { - module.error(error.key); - return false; - } - else if( !(settings.endpoint.message || settings.endpoint.authentication) ) { - module.error(error.endpoint); - return false; - } - - // define pusher - pusher = new Pusher(settings.key); - Pusher.channel_auth_endpoint = settings.endpoint.authentication; - - channel = pusher.subscribe(settings.channelName); - - channel.bind('pusher:subscription_succeeded', module.user.list.create); - channel.bind('pusher:subscription_error', module.error); - channel.bind('pusher:member_added', module.user.joined); - channel.bind('pusher:member_removed', module.user.left); - channel.bind('update_messages', module.message.receive); - - $.each(settings.customEvents, function(label, value) { - channel.bind(label, value); - }); - - // bind module events - $userListButton - .on('click.' + namespace, module.event.toggleUserList) - ; - $expandButton - .on('click.' + namespace, module.event.toggleExpand) - ; - $messageInput - .on('keydown.' + namespace, module.event.input.keydown) - .on('keyup.' + namespace, module.event.input.keyup) - ; - $messageButton - .on('mouseenter.' + namespace, module.event.hover) - .on('mouseleave.' + namespace, module.event.hover) - .on('click.' + namespace, module.event.submit) - ; - // scroll to bottom of chat log - $log - .animate({ - scrollTop: $log.prop('scrollHeight') - }, 400) - ; - $module - .data('module', module) - .addClass(className.loading) - ; - - }, - - // refresh module - refresh: function() { - // reset width calculations - $userListButton - .removeClass(className.active) - ; - module.width = { - log : $log.width(), - userList : $userList.outerWidth() - }; - if( $userListButton.hasClass(className.active) ) { - module.user.list.hide(); - } - $module.data('module', module); - }, - - user: { - - updateCount: function() { - if(settings.userCount) { - users = $module.data('users'); - count = 0; - $.each(users, function() { - count++; - }); - $userCount - .html( settings.templates.userCount(count) ) - ; - } - }, - - // add user to user list - joined: function(member) { - users = $module.data('users'); - if(member.id != 'anonymous' && users[ member.id ] === undefined ) { - users[ member.id ] = member.info; - if(settings.randomColor && member.info.color === undefined) { - member.info.color = settings.templates.color(member.id); - } - html = settings.templates.userList(member.info); - if(member.info.isAdmin) { - $(html) - .prependTo($userList) - ; - } - else { - $(html) - .appendTo($userList) - ; - } - if(settings.partingMessages) { - $log - .append( settings.templates.joined(member.info) ) - ; - module.message.scroll.test(); - } - module.user.updateCount(); - } - }, - - // remove user from user list - left: function(member) { - users = $module.data('users'); - if(member !== undefined && member.id !== 'anonymous') { - delete users[ member.id ]; - $module - .data('users', users) - ; - $userList - .find('[data-id='+ member.id + ']') - .remove() - ; - if(settings.partingMessages) { - $log - .append( settings.templates.left(member.info) ) - ; - module.message.scroll.test(); - } - module.user.updateCount(); - } - }, - - list: { - - // receives list of members and generates user list - create: function(members) { - users = {}; - members.each(function(member) { - if(member.id !== 'anonymous' && member.id !== 'undefined') { - if(settings.randomColor && member.info.color === undefined) { - member.info.color = settings.templates.color(member.id); - } - // sort list with admin first - html = (member.info.isAdmin) - ? settings.templates.userList(member.info) + html - : html + settings.templates.userList(member.info) - ; - users[ member.id ] = member.info; - } - }); - $module - .data('users', users) - .data('user', users[members.me.id] ) - .removeClass(className.loading) - ; - $userList - .html(html) - ; - module.user.updateCount(); - $.proxy(settings.onJoin, $userList.children())(); - }, - - // shows user list - show: function() { - $log - .animate({ - width: (module.width.log - module.width.userList) - }, { - duration : settings.speed, - easing : settings.easing, - complete : module.message.scroll.move - }) - ; - }, - - // hides user list - hide: function() { - $log - .stop() - .animate({ - width: (module.width.log) - }, { - duration : settings.speed, - easing : settings.easing, - complete : module.message.scroll.move - }) - ; - } - - } - - }, - - message: { - - // handles scrolling of chat log - scroll: { - test: function() { - height = $log.prop('scrollHeight') - $log.height(); - if( Math.abs($log.scrollTop() - height) < settings.scrollArea) { - module.message.scroll.move(); - } - }, - - move: function() { - height = $log.prop('scrollHeight') - $log.height(); - $log - .scrollTop(height) - ; - } - }, - - // sends chat message - send: function(message) { - if( !module.utils.emptyString(message) ) { - $.api({ - url : settings.endpoint.message, - method : 'POST', - data : { - 'message': { - content : message, - timestamp : new Date().getTime() - } - } - }); - } - }, - - // receives chat response and processes - receive: function(response) { - message = response.data; - users = $module.data('users'); - loggedInUser = $module.data('user'); - if(users[ message.userID] !== undefined) { - // logged in user's messages already pushed instantly - if(loggedInUser === undefined || loggedInUser.id != message.userID) { - message.user = users[ message.userID ]; - module.message.display(message); - } - } - }, - - // displays message in chat log - display: function(message) { - $log - .append( settings.templates.message(message) ) - ; - module.message.scroll.test(); - $.proxy(settings.onMessage, $log.children().last() )(); - } - - }, - - expand: function() { - $module - .addClass(className.expand) - ; - $.proxy(settings.onExpand, $module )(); - module.refresh(); - }, - - contract: function() { - $module - .removeClass(className.expand) - ; - $.proxy(settings.onContract, $module )(); - module.refresh(); - }, - - event: { - - input: { - - keydown: function(event) { - if(event.which == 13) { - $messageButton - .addClass(className.down) - ; - } - }, - - keyup: function(event) { - if(event.which == 13) { - $messageButton - .removeClass(className.down) - ; - module.event.submit(); - } - } - - }, - - // handles message form submit - submit: function() { - var - message = $messageInput.val(), - loggedInUser = $module.data('user') - ; - if(loggedInUser !== undefined && !module.utils.emptyString(message)) { - module.message.send(message); - // display immediately - module.message.display({ - user: loggedInUser, - text: message - }); - module.message.scroll.move(); - $messageInput - .val('') - ; - - } - }, - - // handles button click on expand button - toggleExpand: function() { - if( !$module.hasClass(className.expand) ) { - $expandButton - .addClass(className.active) - ; - module.expand(); - } - else { - $expandButton - .removeClass(className.active) - ; - module.contract(); - } - }, - - // handles button click on user list button - toggleUserList: function() { - if( !$log.is(':animated') ) { - if( !$userListButton.hasClass(className.active) ) { - $userListButton - .addClass(className.active) - ; - module.user.list.show(); - } - else { - $userListButton - .removeClass('active') - ; - module.user.list.hide(); - } - } - - } - }, - - utils: { - - emptyString: function(string) { - if(typeof string == 'string') { - return (string.search(/\S/) == -1); - } - return false; - } - - }, - - setting: function(name, value) { - if(value !== undefined) { - if( $.isPlainObject(name) ) { - $.extend(true, settings, name); - } - else { - settings[name] = value; - } - } - else { - return settings[name]; - } - }, - internal: function(name, value) { - if( $.isPlainObject(name) ) { - $.extend(true, module, name); - } - else if(value !== undefined) { - module[name] = value; - } - else { - return module[name]; - } - }, - debug: function() { - if(settings.debug) { - if(settings.performance) { - module.performance.log(arguments); - } - else { - module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); - module.debug.apply(console, arguments); - } - } - }, - verbose: function() { - if(settings.verbose && settings.debug) { - if(settings.performance) { - module.performance.log(arguments); - } - else { - module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); - module.verbose.apply(console, arguments); - } - } - }, - error: function() { - module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); - module.error.apply(console, arguments); - }, - performance: { - log: function(message) { - var - currentTime, - executionTime, - previousTime - ; - if(settings.performance) { - currentTime = new Date().getTime(); - previousTime = time || currentTime; - executionTime = currentTime - previousTime; - time = currentTime; - performance.push({ - 'Element' : element, - 'Name' : message[0], - 'Arguments' : [].slice.call(message, 1) || '', - 'Execution Time' : executionTime - }); - } - clearTimeout(module.performance.timer); - module.performance.timer = setTimeout(module.performance.display, 100); - }, - display: function() { - var - title = settings.name + ':', - totalTime = 0 - ; - time = false; - clearTimeout(module.performance.timer); - $.each(performance, function(index, data) { - totalTime += data['Execution Time']; - }); - title += ' ' + totalTime + 'ms'; - if(moduleSelector) { - title += ' \'' + moduleSelector + '\''; - } - if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { - console.groupCollapsed(title); - if(console.table) { - console.table(performance); - } - else { - $.each(performance, function(index, data) { - console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); - }); - } - console.groupEnd(); - } - performance = []; - } - }, - invoke: function(query, passedArguments, context) { - var - maxDepth, - found - ; - passedArguments = passedArguments || queryArguments; - context = element || context; - if(typeof query == 'string' && instance !== undefined) { - query = query.split(/[\. ]/); - maxDepth = query.length - 1; - $.each(query, function(depth, value) { - if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) { - instance = instance[value]; - } - else if( instance[value] !== undefined ) { - found = instance[value]; - } - else { - module.error(error.method, query); - } - }); - } - if ( $.isFunction( found ) ) { - return found.apply(context, passedArguments); - } - return found || false; - } - }; - - if(methodInvoked) { - if(instance === undefined) { - module.initialize(); - } - module.invoke(query); - } - else { - if(instance !== undefined) { - module.destroy(); - } - module.initialize(); - } - }) -; - - return (returnedValue !== undefined) - ? returnedValue - : this - ; -}; - - $.fn.chatroom.settings = { - - name : 'Chat', - namespace : 'chat', - - debug : false, - - channel : 'present-chat', - - onJoin : function(){}, - onMessage : function(){}, - onExpand : function(){}, - onContract : function(){}, - - customEvents : {}, - - partingMessages : false, - userCount : true, - randomColor : true, - - speed : 300, - easing : 'easeOutQuint', - - // pixels from bottom of chat log that should trigger auto scroll to bottom - scrollArea : 9999, - - endpoint : { - message : false, - authentication : false - }, - - error: { - method : 'The method you called is not defined', - endpoint : 'Please define a message and authentication endpoint.', - key : 'You must specify a pusher key and channel.', - pusher : 'You must include the Pusher library.' - }, - - className : { - expand : 'expand', - active : 'active', - hover : 'hover', - down : 'down', - loading : 'loading' - }, - - selector : { - userCount : '.actions .message', - userListButton : '.actions .list.button', - expandButton : '.actions .expand.button', - room : '.room', - userList : '.room .list', - log : '.room .log', - message : '.room .log .message', - author : '.room log .message .author', - messageInput : '.talk input', - messageButton : '.talk .send.button' - }, - - templates: { - - userCount: function(number) { - return number + ' users in chat'; - }, - - color: function(userID) { - var - colors = [ - '#000000', - '#333333', - '#666666', - '#999999', - '#CC9999', - '#CC6666', - '#CC3333', - '#993333', - '#663333', - '#CC6633', - '#CC9966', - '#CC9933', - '#999966', - '#CCCC66', - '#99CC66', - '#669933', - '#669966', - '#33A3CC', - '#336633', - '#33CCCC', - '#339999', - '#336666', - '#336699', - '#6666CC', - '#9966CC', - '#333399', - '#663366', - '#996699', - '#993366', - '#CC6699' - ] - ; - return colors[ Math.floor( Math.random() * colors.length) ]; - }, - - message: function(message) { - var - html = '' - ; - if(message.user.isAdmin) { - message.user.color = '#55356A'; - html += '
'; - html += ''; - } - /* - else if(message.user.isPro) { - html += '
'; - html += ''; - } - */ - else { - html += '
'; - } - html += '

'; - if(message.user.color !== undefined) { - html += '' + message.user.name + ': '; - } - else { - html += '' + message.user.name + ': '; - } - html += '' - + message.text - + '

' - + '
' - ; - return html; - }, - - joined: function(member) { - return (typeof member.name !== undefined) - ? '
' + member.name + ' has joined the chat.
' - : false - ; - }, - left: function(member) { - return (typeof member.name !== undefined) - ? '
' + member.name + ' has left the chat.
' - : false - ; - }, - - userList: function(member) { - var - html = '' - ; - if(member.isAdmin) { - member.color = '#55356A'; - } - html += '' - + '
' - + '
' - + ' ' - + '
' - ; - if(member.color !== undefined) { - html += '

' + member.name + '

'; - } - else { - html += '

' + member.name + '

'; - } - html += '
'; - return html; - } - - } - - }; - -})( jQuery, window , document ); diff --git a/src/definitions/modules/chatroom.less b/src/definitions/modules/chatroom.less deleted file mode 100755 index b23d7db16..000000000 --- a/src/definitions/modules/chatroom.less +++ /dev/null @@ -1,280 +0,0 @@ -/* - * # Semantic - Chat Room - * http://github.com/semantic-org/semantic-ui/ - * - * - * Copyright 2014 Contributor - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -/******************************* - Theme -*******************************/ - -@type : 'module'; -@element : 'chatroom'; - -@import '../../theme.config'; - -/******************************* - Chat Room -*******************************/ - -.ui.chatroom { - background-color: #F8F8F8; - width: 330px; - height: 370px; - padding: 0px; -} -.ui.chatroom .room { - position: relative; - background-color: #FFFFFF; - overflow: hidden; - height: 286px; - border: 1px solid rgba(0, 0, 0, 0.1); - border-top: none; - border-bottom: none; -} -.ui.chatroom .room .loader { - display: none; - margin: -25px 0px 0px -25px; -} -/* Chat Room Actions */ -.ui.chatroom .actions { - overflow: hidden; - background-color: #EEEEEE; - padding: 4px; - border: 1px solid rgba(0, 0, 0, 0.1); - - border-radius: 5px 5px 0px 0px; -} -.ui.chatroom .actions .button { - float: right; - margin-left: 3px; -} - -/* Online User Count */ -.ui.chatroom .actions .message { - float: left; - margin-left: 6px; - font-size: 11px; - color: #AAAAAA; - text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8); - line-height: 28px; -} -.ui.chatroom .actions .message .loader { - display: inline-block; - margin-right: 8px; -} - - -/* Chat Room Text Log */ -.ui.chatroom .log { - float: left; - - overflow: auto; - overflow-x: hidden; - overflow-y: auto; -} -.ui.chatroom .log .message { - padding: 3px 0px; - border-top: 1px dotted #DADADA; -} -.ui.chatroom .log .message:first-child { - border-top: none; -} -/* status event */ -.ui.chatroom .status { - padding: 5px 0px; - color: #AAAAAA; - - font-size: 12px; - font-style: italic; - line-height: 1.33; - border-top: 1px dotted #DADADA; -} -.ui.chatroom .log .status:first-child { - border-top: none; -} - - - -.ui.chatroom .log .flag { - float: left; -} -.ui.chatroom .log p { - margin-left: 0px; -} -.ui.chatroom .log .author { - font-weight: bold; - transition: color 0.3s ease-out; -} -.ui.chatroom .log a.author:hover { - opacity: 0.8; -} - -.ui.chatroom .log .message.admin p { - font-weight: bold; - margin: 1px 0px 0px 23px; -} -.ui.chatroom .log .divider { - margin: -1px 0px; - font-size: 11px; - padding: 10px 0px; - border-top: 1px solid #F8F8F8; - border-bottom: 1px solid #F8F8F8; -} -.ui.chatroom .log .divider .rule { - top: 50%; - width: 15%; -} - -.ui.chatroom .log .divider .label { - color: #777777; - margin: 0px; -} - -/* Chat Room User List */ -.ui.chatroom .room .list { - position: relative; - overflow: auto; - overflow-x: hidden; - overflow-y: auto; - - float: left; - background-color: #EEEEEE; - border-left: 1px solid #DDDDDD; -} -.ui.chatroom .room .list .user { - display: table; - padding: 3px 7px; - border-bottom: 1px solid #DDDDDD; -} -.ui.chatroom .room .list .user:hover { - background-color: #F8F8F8; -} -.ui.chatroom .room .list .image { - display: table-cell; - vertical-align: middle; - width: 20px; -} -.ui.chatroom .room .list .image img { - width: 20px; - height: 20px; - vertical-align: middle; -} -.ui.chatroom .room .list p { - display: table-cell; - vertical-align: middle; - padding-left: 7px; - padding-right: 14px; - font-size: 11px; - line-height: 1.2; - font-weight: bold; -} -.ui.chatroom .room .list a:hover { - opacity: 0.8; -} - -/* User List Loading */ -.ui.chatroom.loading .loader { - display: block; -} - - - -/* Chat Room Talk Input */ -.ui.chatroom .talk { - border: 1px solid rgba(0, 0, 0, 0.1); - padding: 5px 0px 0px; - - background-color: #EEEEEE; - border-radius: 0px 0px 5px 5px; -} -.ui.chatroom .talk .avatar, -.ui.chatroom .talk input, -.ui.chatroom .talk .button { - float: left; -} - -.ui.chatroom .talk .avatar img { - display: block; - width: 30px; - height: 30px; - margin-right: 4px; - border-radius: 500rem; -} -.ui.chatroom .talk input { - border: 1px solid #CCCCCC; - margin: 0px; - width: 196px; - height: 14px; - padding: 8px 5px; - font-size: 12px; - color: #555555; -} -.ui.chatroom .talk input.focus { - border: 1px solid #AAAAAA; -} -.ui.chatroom .send { - width: 80px; - height: 32px; - - margin-left: -1px; - padding: 4px 12px; - font-size: 12px; - line-height: 23px; - - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; - border-radius: 0 5px 5px 0; -} -.ui.chatroom .talk .log-in.button { - display: block; - float: none; - margin-top: -6px; - height: 22px; - border-radius: 0px 0px 4px 4px; -} -.ui.chatroom .talk .log-in.button i { - vertical-align: text-top; -} - -/* Quirky Flags */ -.ui.chatroom .log .team.flag { - width: 18px; -} - -/* Chat room Loaded */ -.ui.chatroom.loading .loader { - display: block; -} - - -/* Standard Size */ -.ui.chatroom { - width: 330px; - height: 370px; -} -.ui.chatroom .room .container { - width: 3000px; -} -.ui.chatroom .log { - width: 314px; - height: 278px; - padding: 4px 7px; -} -.ui.chatroom .room .list { - width: 124px; - height: 278px; - padding: 4px 0px; -} -.ui.chatroom .room .list .user { - width: 110px; -} -.ui.chatroom .talk { - height: 40px; -} - -.loadUIOverrides(); diff --git a/src/definitions/modules/modal.js b/src/definitions/modules/modal.js index 4488e453d..4c7824820 100644 --- a/src/definitions/modules/modal.js +++ b/src/definitions/modules/modal.js @@ -97,6 +97,7 @@ $.fn.modal = function(parameters) { $dimmer = $dimmable.dimmer('get dimmer'); $otherModals = $module.siblings(selector.modal); $allModals = $otherModals.add($module); + module.cacheSizes(); module.verbose('Attaching close events', $close); module.bind.events(); @@ -126,7 +127,7 @@ $.fn.modal = function(parameters) { observeChanges: function() { if('MutationObserver' in window) { observer = new MutationObserver(function(mutations) { - module.debug('DOM tree modified, updating selector cache'); + module.debug('DOM tree modified, refreshing'); module.refresh(); }); observer.observe(element, { @@ -271,7 +272,6 @@ $.fn.modal = function(parameters) { $.proxy(settings.onShow, element)(); if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { module.debug('Showing modal with css animations'); - module.cacheSizes(); module.set.position(); module.set.screenHeight(); module.set.type();