socket io is connecting
This commit is contained in:
Michael Q Larson
82
app.js
82
app.js
@ -42,7 +42,20 @@ var passportConf = require('./config/passport');
|
|||||||
* Create Express server.
|
* Create Express server.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
var socket = require('socket.io');
|
||||||
|
var express = require('express');
|
||||||
|
var http = require('http');
|
||||||
|
|
||||||
var app = express();
|
var app = express();
|
||||||
|
var server = http.createServer(app);
|
||||||
|
|
||||||
|
server.listen(2999, function() {
|
||||||
|
console.log('server started on %d', 2999);
|
||||||
|
});
|
||||||
|
|
||||||
|
var io = socket.listen(server);
|
||||||
|
|
||||||
|
//console.log('Express server started on port %s', server.address().port);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Connect to MongoDB.
|
* Connect to MongoDB.
|
||||||
@ -205,4 +218,71 @@ app.listen(app.get('port'), function() {
|
|||||||
console.log('Express server listening on port %d in %s mode', app.get('port'), app.get('env'));
|
console.log('Express server listening on port %d in %s mode', app.get('port'), app.get('env'));
|
||||||
});
|
});
|
||||||
|
|
||||||
module.exports = app;
|
module.exports = app;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Chat
|
||||||
|
*/
|
||||||
|
|
||||||
|
var usernames = {};
|
||||||
|
var numUsers = 0;
|
||||||
|
|
||||||
|
io.on('connection', function (socket) {
|
||||||
|
var addedUser = false;
|
||||||
|
|
||||||
|
// when the client emits 'new message', this listens and executes
|
||||||
|
socket.on('new message', function (data) {
|
||||||
|
// we tell the client to execute 'new message'
|
||||||
|
socket.broadcast.emit('new message', {
|
||||||
|
username: socket.username,
|
||||||
|
message: data
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// when the client emits 'add user', this listens and executes
|
||||||
|
socket.on('add user', function (username) {
|
||||||
|
// we store the username in the socket session for this client
|
||||||
|
socket.username = username;
|
||||||
|
// add the client's username to the global list
|
||||||
|
usernames[username] = username;
|
||||||
|
++numUsers;
|
||||||
|
addedUser = true;
|
||||||
|
socket.emit('login', {
|
||||||
|
numUsers: numUsers
|
||||||
|
});
|
||||||
|
// echo globally (all clients) that a person has connected
|
||||||
|
socket.broadcast.emit('user joined', {
|
||||||
|
username: socket.username,
|
||||||
|
numUsers: numUsers
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// when the client emits 'typing', we broadcast it to others
|
||||||
|
socket.on('typing', function () {
|
||||||
|
socket.broadcast.emit('typing', {
|
||||||
|
username: socket.username
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// when the client emits 'stop typing', we broadcast it to others
|
||||||
|
socket.on('stop typing', function () {
|
||||||
|
socket.broadcast.emit('stop typing', {
|
||||||
|
username: socket.username
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// when the user disconnects.. perform this
|
||||||
|
socket.on('disconnect', function () {
|
||||||
|
// remove the username from global usernames list
|
||||||
|
if (addedUser) {
|
||||||
|
delete usernames[socket.username];
|
||||||
|
--numUsers;
|
||||||
|
|
||||||
|
// echo globally that this client has left
|
||||||
|
socket.broadcast.emit('user left', {
|
||||||
|
username: socket.username,
|
||||||
|
numUsers: numUsers
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -64,6 +64,7 @@ passport.use(new TwitterStrategy(secrets.twitter, function(req, accessToken, tok
|
|||||||
user.profile.name = user.profile.name || profile.displayName;
|
user.profile.name = user.profile.name || profile.displayName;
|
||||||
user.profile.location = user.profile.location || profile._json.location;
|
user.profile.location = user.profile.location || profile._json.location;
|
||||||
user.profile.picture = user.profile.picture || profile._json.profile_image_url_https;
|
user.profile.picture = user.profile.picture || profile._json.profile_image_url_https;
|
||||||
|
user.profile.username = profile.displayName;
|
||||||
user.save(function(err) {
|
user.save(function(err) {
|
||||||
req.flash('info', { msg: 'Twitter account has been linked.' });
|
req.flash('info', { msg: 'Twitter account has been linked.' });
|
||||||
done(err, user);
|
done(err, user);
|
||||||
|
|||||||
@ -6,7 +6,5 @@
|
|||||||
exports.index = function(req, res) {
|
exports.index = function(req, res) {
|
||||||
res.render('curriculum/curriculum', {
|
res.render('curriculum/curriculum', {
|
||||||
title: 'Curriculum',
|
title: 'Curriculum',
|
||||||
test: 'hi',
|
|
||||||
courses: Course.all
|
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
@ -15,7 +15,8 @@ var userSchema = new mongoose.Schema({
|
|||||||
gender: { type: String, default: '' },
|
gender: { type: String, default: '' },
|
||||||
location: { type: String, default: '' },
|
location: { type: String, default: '' },
|
||||||
website: { type: String, default: '' },
|
website: { type: String, default: '' },
|
||||||
picture: { type: String, default: '' }
|
picture: { type: String, default: '' },
|
||||||
|
username: { type: String, default: '' }
|
||||||
},
|
},
|
||||||
|
|
||||||
resetPasswordToken: String,
|
resetPasswordToken: String,
|
||||||
|
|||||||
@ -49,6 +49,7 @@
|
|||||||
"passport-oauth": "^1.0.0",
|
"passport-oauth": "^1.0.0",
|
||||||
"passport-twitter": "^1.0.2",
|
"passport-twitter": "^1.0.2",
|
||||||
"request": "^2.44.0",
|
"request": "^2.44.0",
|
||||||
|
"socket.io": "^1.1.0",
|
||||||
"stripe": "^2.8.0",
|
"stripe": "^2.8.0",
|
||||||
"tumblr.js": "^0.0.4",
|
"tumblr.js": "^0.0.4",
|
||||||
"twilio": "^1.7.0",
|
"twilio": "^1.7.0",
|
||||||
|
|||||||
@ -1,944 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
/* Boilerplate: Reset
|
|
||||||
============================================================ */
|
|
||||||
#firechat div,
|
|
||||||
#firechat span,
|
|
||||||
#firechat applet,
|
|
||||||
#firechat object,
|
|
||||||
#firechat iframe,
|
|
||||||
#firechat h1,
|
|
||||||
#firechat h2,
|
|
||||||
#firechat h3,
|
|
||||||
#firechat h4,
|
|
||||||
#firechat h5,
|
|
||||||
#firechat h6,
|
|
||||||
#firechat p,
|
|
||||||
#firechat blockquote,
|
|
||||||
#firechat pre,
|
|
||||||
#firechat a,
|
|
||||||
#firechat abbr,
|
|
||||||
#firechat acronym,
|
|
||||||
#firechat address,
|
|
||||||
#firechat big,
|
|
||||||
#firechat cite,
|
|
||||||
#firechat code,
|
|
||||||
#firechat del,
|
|
||||||
#firechat dfn,
|
|
||||||
#firechat em,
|
|
||||||
#firechat img,
|
|
||||||
#firechat ins,
|
|
||||||
#firechat kbd,
|
|
||||||
#firechat q,
|
|
||||||
#firechat s,
|
|
||||||
#firechat samp,
|
|
||||||
#firechat small,
|
|
||||||
#firechat strike,
|
|
||||||
#firechat strong,
|
|
||||||
#firechat sub,
|
|
||||||
#firechat sup,
|
|
||||||
#firechat tt,
|
|
||||||
#firechat var,
|
|
||||||
#firechat b,
|
|
||||||
#firechat u,
|
|
||||||
#firechat i,
|
|
||||||
#firechat center,
|
|
||||||
#firechat dl,
|
|
||||||
#firechat dt,
|
|
||||||
#firechat dd,
|
|
||||||
#firechat ol,
|
|
||||||
#firechat ul,
|
|
||||||
#firechat li,
|
|
||||||
#firechat fieldset,
|
|
||||||
#firechat form,
|
|
||||||
#firechat label,
|
|
||||||
#firechat legend,
|
|
||||||
#firechat table,
|
|
||||||
#firechat caption,
|
|
||||||
#firechat tbody,
|
|
||||||
#firechat tfoot,
|
|
||||||
#firechat thead,
|
|
||||||
#firechat tr,
|
|
||||||
#firechat th,
|
|
||||||
#firechat td,
|
|
||||||
#firechat article,
|
|
||||||
#firechat aside,
|
|
||||||
#firechat canvas,
|
|
||||||
#firechat details,
|
|
||||||
#firechat embed,
|
|
||||||
#firechat figure,
|
|
||||||
#firechat figcaption,
|
|
||||||
#firechat footer,
|
|
||||||
#firechat header,
|
|
||||||
#firechat hgroup,
|
|
||||||
#firechat menu,
|
|
||||||
#firechat nav,
|
|
||||||
#firechat output,
|
|
||||||
#firechat ruby,
|
|
||||||
#firechat section,
|
|
||||||
#firechat summary,
|
|
||||||
#firechat time,
|
|
||||||
#firechat mark,
|
|
||||||
#firechat audio,
|
|
||||||
#firechat video {
|
|
||||||
border: 0;
|
|
||||||
font-size: 12px;
|
|
||||||
font-family: arial, helvetica, sans-serif;
|
|
||||||
vertical-align: baseline;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
#firechat article,
|
|
||||||
#firechat aside,
|
|
||||||
#firechat details,
|
|
||||||
#firechat figcaption,
|
|
||||||
#firechat figure,
|
|
||||||
#firechat footer,
|
|
||||||
#firechat header,
|
|
||||||
#firechat hgroup,
|
|
||||||
#firechat menu,
|
|
||||||
#firechat nav,
|
|
||||||
#firechat section {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
#firechat body {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
#firechat ol,
|
|
||||||
#firechat ul {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
#firechat blockquote,
|
|
||||||
#firechat q {
|
|
||||||
quotes: none;
|
|
||||||
}
|
|
||||||
#firechat blockquote:before,
|
|
||||||
#firechat blockquote:after,
|
|
||||||
#firechat q:before,
|
|
||||||
#firechat q:after {
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
#firechat table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0;
|
|
||||||
}
|
|
||||||
/* Boilerplate: Mixins
|
|
||||||
============================================================ */
|
|
||||||
.clearfix {
|
|
||||||
*zoom: 1;
|
|
||||||
}
|
|
||||||
.clearfix:before,
|
|
||||||
.clearfix:after {
|
|
||||||
display: table;
|
|
||||||
content: "";
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
.clearfix:after {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
/* Boilerplate: Responsive Layout
|
|
||||||
============================================================ */
|
|
||||||
#firechat {
|
|
||||||
color: #333;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
#firechat .center {
|
|
||||||
float: none !important;
|
|
||||||
margin-left: auto !important;
|
|
||||||
margin-right: auto !important;
|
|
||||||
}
|
|
||||||
#firechat .left {
|
|
||||||
float: left !important;
|
|
||||||
}
|
|
||||||
#firechat .right {
|
|
||||||
float: right !important;
|
|
||||||
}
|
|
||||||
#firechat .alignleft {
|
|
||||||
text-align: left !important;
|
|
||||||
}
|
|
||||||
#firechat .alignright {
|
|
||||||
text-align: right !important;
|
|
||||||
}
|
|
||||||
#firechat .aligncenter {
|
|
||||||
text-align: center !important;
|
|
||||||
}
|
|
||||||
#firechat .hidden {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
#firechat .row {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
#firechat .fifth,
|
|
||||||
#firechat .fivesixth,
|
|
||||||
#firechat .fourfifth,
|
|
||||||
#firechat .half,
|
|
||||||
#firechat .ninetenth,
|
|
||||||
#firechat .quarter,
|
|
||||||
#firechat .sevententh,
|
|
||||||
#firechat .sixth,
|
|
||||||
#firechat .tenth,
|
|
||||||
#firechat .third,
|
|
||||||
#firechat .threefifth,
|
|
||||||
#firechat .threequarter,
|
|
||||||
#firechat .threetenth,
|
|
||||||
#firechat .twofifth,
|
|
||||||
#firechat .twothird,
|
|
||||||
#firechat .full {
|
|
||||||
margin-left: 2.127659574468085%;
|
|
||||||
float: left;
|
|
||||||
min-height: 1px;
|
|
||||||
}
|
|
||||||
#firechat .fifth:first-child,
|
|
||||||
#firechat .fivesixth:first-child,
|
|
||||||
#firechat .fourfifth:first-child,
|
|
||||||
#firechat .half:first-child,
|
|
||||||
#firechat .ninetenth:first-child,
|
|
||||||
#firechat .quarter:first-child,
|
|
||||||
#firechat .sevententh:first-child,
|
|
||||||
#firechat .sixth:first-child,
|
|
||||||
#firechat .tenth:first-child,
|
|
||||||
#firechat .third:first-child,
|
|
||||||
#firechat .threefifth:first-child,
|
|
||||||
#firechat .threequarter:first-child,
|
|
||||||
#firechat .threetenth:first-child,
|
|
||||||
#firechat .twofifth:first-child,
|
|
||||||
#firechat .twothird:first-child,
|
|
||||||
#firechat .full:first-child {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
#firechat .tenth {
|
|
||||||
width: 8.08510638297872%;
|
|
||||||
}
|
|
||||||
#firechat .sixth {
|
|
||||||
width: 14.893617021276595%;
|
|
||||||
}
|
|
||||||
#firechat .fifth {
|
|
||||||
width: 18.297872340425535%;
|
|
||||||
}
|
|
||||||
#firechat .quarter {
|
|
||||||
width: 23.404255319148938%;
|
|
||||||
}
|
|
||||||
#firechat .threetenth {
|
|
||||||
width: 26.3829787235%;
|
|
||||||
}
|
|
||||||
#firechat .third {
|
|
||||||
width: 31.914893617021278%;
|
|
||||||
}
|
|
||||||
#firechat .twofifth {
|
|
||||||
width: 38.72340425531915%;
|
|
||||||
}
|
|
||||||
#firechat .half {
|
|
||||||
width: 48.93617021276596%;
|
|
||||||
}
|
|
||||||
#firechat .sevententh {
|
|
||||||
width: 58.7234042555%;
|
|
||||||
}
|
|
||||||
#firechat .threefifth {
|
|
||||||
width: 59.14893617021278%;
|
|
||||||
}
|
|
||||||
#firechat .twothird {
|
|
||||||
width: 65.95744680851064%;
|
|
||||||
}
|
|
||||||
#firechat .threequarter {
|
|
||||||
width: 74.46808510638297%;
|
|
||||||
}
|
|
||||||
#firechat .ninetenth {
|
|
||||||
width: 74.8936170215%;
|
|
||||||
}
|
|
||||||
#firechat .fourfifth {
|
|
||||||
width: 79.57446808510639%;
|
|
||||||
}
|
|
||||||
#firechat .fivesixth {
|
|
||||||
width: 82.9787234042553%;
|
|
||||||
}
|
|
||||||
#firechat .full {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
#firechat .clipped {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
#firechat strong {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
#firechat em {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
#firechat label {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
#firechat a {
|
|
||||||
color: #005580;
|
|
||||||
}
|
|
||||||
#firechat a:visited,
|
|
||||||
#firechat a:hover,
|
|
||||||
#firechat a:active {
|
|
||||||
color: #005580;
|
|
||||||
}
|
|
||||||
#firechat p {
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
#firechat h1,
|
|
||||||
#firechat h2,
|
|
||||||
#firechat h3,
|
|
||||||
#firechat h4,
|
|
||||||
#firechat h5,
|
|
||||||
#firechat h6 {
|
|
||||||
margin: 10px 0;
|
|
||||||
font-family: inherit;
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: 20px;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
#firechat h1,
|
|
||||||
#firechat h2,
|
|
||||||
#firechat h3 {
|
|
||||||
line-height: 40px;
|
|
||||||
}
|
|
||||||
#firechat h1 {
|
|
||||||
font-size: 38.5px;
|
|
||||||
}
|
|
||||||
#firechat h2 {
|
|
||||||
font-size: 31.5px;
|
|
||||||
}
|
|
||||||
#firechat h3 {
|
|
||||||
font-size: 24.5px;
|
|
||||||
}
|
|
||||||
#firechat h4 {
|
|
||||||
font-size: 17.5px;
|
|
||||||
}
|
|
||||||
#firechat h5 {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
#firechat h6 {
|
|
||||||
font-size: 11.9px;
|
|
||||||
}
|
|
||||||
#firechat small {
|
|
||||||
font-size: 90%;
|
|
||||||
}
|
|
||||||
/* Component: Tabs
|
|
||||||
============================================================ */
|
|
||||||
#firechat .nav {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
#firechat .nav > li > a {
|
|
||||||
display: block;
|
|
||||||
background-color: #eeeeee;
|
|
||||||
text-decoration: none;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
#firechat .nav > li > a:hover,
|
|
||||||
#firechat .nav > li > a:focus {
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
#firechat .nav-tabs {
|
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
#firechat .nav-tabs > li {
|
|
||||||
float: left;
|
|
||||||
margin-bottom: -1px;
|
|
||||||
max-width: 45%;
|
|
||||||
}
|
|
||||||
#firechat .nav-tabs > li > a {
|
|
||||||
-webkit-border-top-right-radius: 4px;
|
|
||||||
-webkit-border-bottom-right-radius: 0;
|
|
||||||
-webkit-border-bottom-left-radius: 0;
|
|
||||||
-webkit-border-top-left-radius: 4px;
|
|
||||||
-moz-border-radius-topright: 4px;
|
|
||||||
-moz-border-radius-bottomright: 0;
|
|
||||||
-moz-border-radius-bottomleft: 0;
|
|
||||||
-moz-border-radius-topleft: 4px;
|
|
||||||
border-top-right-radius: 4px;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
border-top-left-radius: 4px;
|
|
||||||
padding: 4px 8px;
|
|
||||||
margin-right: 2px;
|
|
||||||
line-height: 20px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
border-color: #cccccc;
|
|
||||||
}
|
|
||||||
#firechat .nav-tabs > .active > a,
|
|
||||||
#firechat .nav-tabs > .active > a:hover,
|
|
||||||
#firechat .nav-tabs > .active > a:focus {
|
|
||||||
border-bottom-color: transparent;
|
|
||||||
background-color: #ffffff;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
#firechat .tab-content {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
#firechat .tab-content > .tab-pane {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#firechat .tab-content > .active {
|
|
||||||
display: block;
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
/* Component: dropdowns
|
|
||||||
============================================================ */
|
|
||||||
#firechat .caret {
|
|
||||||
display: inline-block;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
vertical-align: top;
|
|
||||||
border-top: 4px solid #000000;
|
|
||||||
border-right: 4px solid transparent;
|
|
||||||
border-left: 4px solid transparent;
|
|
||||||
content: "";
|
|
||||||
margin-top: 8px;
|
|
||||||
margin-left: 2px;
|
|
||||||
}
|
|
||||||
#firechat .firechat-dropdown {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
#firechat .firechat-dropdown-toggle {
|
|
||||||
-webkit-touch-callout: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-khtml-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
#firechat .firechat-dropdown-toggle:focus,
|
|
||||||
#firechat .firechat-dropdown-toggle:active {
|
|
||||||
outline: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
#firechat .firechat-dropdown-toggle.btn {
|
|
||||||
padding: 4px 0 0;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
#firechat .firechat-dropdown-menu {
|
|
||||||
*zoom: 1;
|
|
||||||
-webkit-border-top-right-radius: 0;
|
|
||||||
-webkit-border-bottom-right-radius: 4px;
|
|
||||||
-webkit-border-bottom-left-radius: 4px;
|
|
||||||
-webkit-border-top-left-radius: 0;
|
|
||||||
-moz-border-radius-topright: 0;
|
|
||||||
-moz-border-radius-bottomright: 4px;
|
|
||||||
-moz-border-radius-bottomleft: 4px;
|
|
||||||
-moz-border-radius-topleft: 0;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-bottom-right-radius: 4px;
|
|
||||||
border-bottom-left-radius: 4px;
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
z-index: 1000;
|
|
||||||
display: none;
|
|
||||||
float: left;
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #ffffff;
|
|
||||||
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
|
||||||
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
|
||||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
|
||||||
-webkit-background-clip: padding-box;
|
|
||||||
-moz-background-clip: padding;
|
|
||||||
background-clip: padding-box;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
min-width: 98%;
|
|
||||||
padding: 0;
|
|
||||||
margin: -1px 0 0;
|
|
||||||
}
|
|
||||||
#firechat .firechat-dropdown-menu:before,
|
|
||||||
#firechat .firechat-dropdown-menu:after {
|
|
||||||
display: table;
|
|
||||||
content: "";
|
|
||||||
line-height: 0;
|
|
||||||
}
|
|
||||||
#firechat .firechat-dropdown-menu:after {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
#firechat .firechat-dropdown-menu ul {
|
|
||||||
background-color: #ffffff;
|
|
||||||
list-style: none;
|
|
||||||
overflow-y: scroll;
|
|
||||||
max-height: 300px;
|
|
||||||
}
|
|
||||||
#firechat .firechat-dropdown-menu ul > li > a {
|
|
||||||
display: block;
|
|
||||||
padding: 1px 1px 1px 3px;
|
|
||||||
clear: both;
|
|
||||||
font-weight: normal;
|
|
||||||
line-height: 20px;
|
|
||||||
color: #333333;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
#firechat .firechat-dropdown-menu ul > li > a.highlight {
|
|
||||||
background-color: #d9edf7;
|
|
||||||
}
|
|
||||||
#firechat .firechat-dropdown-menu ul > li > a:hover,
|
|
||||||
#firechat .firechat-dropdown-menu ul > li > a:focus,
|
|
||||||
#firechat .firechat-dropdown-menu ul > .active > a,
|
|
||||||
#firechat .firechat-dropdown-menu ul > .active > a:hover,
|
|
||||||
#firechat .firechat-dropdown-menu ul > .active > a:focus {
|
|
||||||
text-decoration: none;
|
|
||||||
color: #000000;
|
|
||||||
background-color: #d9edf7;
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
#firechat .firechat-dropdown-menu ul > .disabled > a,
|
|
||||||
#firechat .firechat-dropdown-menu ul > .disabled > a:hover,
|
|
||||||
#firechat .firechat-dropdown-menu ul > .disabled > a:focus {
|
|
||||||
color: #999999;
|
|
||||||
text-decoration: none;
|
|
||||||
background-color: transparent;
|
|
||||||
background-image: none;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
#firechat .firechat-dropdown-header {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px 0;
|
|
||||||
background-color: #eeeeee;
|
|
||||||
border-bottom: 1px solid #cccccc;
|
|
||||||
}
|
|
||||||
#firechat .firechat-dropdown-footer {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px 0px;
|
|
||||||
background-color: #eeeeee;
|
|
||||||
border-top: 1px solid #cccccc;
|
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
#firechat .open {
|
|
||||||
*z-index: 1000;
|
|
||||||
}
|
|
||||||
#firechat .open > .firechat-dropdown-menu {
|
|
||||||
display: block;
|
|
||||||
border: 1px solid #cccccc;
|
|
||||||
-webkit-border-top-right-radius: 0;
|
|
||||||
-webkit-border-bottom-right-radius: 4px;
|
|
||||||
-webkit-border-bottom-left-radius: 4px;
|
|
||||||
-webkit-border-top-left-radius: 0;
|
|
||||||
-moz-border-radius-topright: 0;
|
|
||||||
-moz-border-radius-bottomright: 4px;
|
|
||||||
-moz-border-radius-bottomleft: 4px;
|
|
||||||
-moz-border-radius-topleft: 0;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-bottom-right-radius: 4px;
|
|
||||||
border-bottom-left-radius: 4px;
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
}
|
|
||||||
#firechat .open > .firechat-dropdown-toggle {
|
|
||||||
outline: none;
|
|
||||||
text-decoration: none;
|
|
||||||
-webkit-border-top-right-radius: 4px;
|
|
||||||
-webkit-border-bottom-right-radius: 0;
|
|
||||||
-webkit-border-bottom-left-radius: 0;
|
|
||||||
-webkit-border-top-left-radius: 4px;
|
|
||||||
-moz-border-radius-topright: 4px;
|
|
||||||
-moz-border-radius-bottomright: 0;
|
|
||||||
-moz-border-radius-bottomleft: 0;
|
|
||||||
-moz-border-radius-topleft: 4px;
|
|
||||||
border-top-right-radius: 4px;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
border-top-left-radius: 4px;
|
|
||||||
}
|
|
||||||
/* Component: Prompts
|
|
||||||
============================================================ */
|
|
||||||
#firechat .prompt-wrapper {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
#firechat .prompt {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1001;
|
|
||||||
background-color: #ffffff;
|
|
||||||
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.45);
|
|
||||||
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.45);
|
|
||||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.45);
|
|
||||||
}
|
|
||||||
#firechat .prompt-header {
|
|
||||||
padding: 4px 8px;
|
|
||||||
font-weight: bold;
|
|
||||||
background-color: #eeeeee;
|
|
||||||
border: 1px solid #cccccc;
|
|
||||||
-webkit-border-top-right-radius: 4px;
|
|
||||||
-webkit-border-bottom-right-radius: 0;
|
|
||||||
-webkit-border-bottom-left-radius: 0;
|
|
||||||
-webkit-border-top-left-radius: 4px;
|
|
||||||
-moz-border-radius-topright: 4px;
|
|
||||||
-moz-border-radius-bottomright: 0;
|
|
||||||
-moz-border-radius-bottomleft: 0;
|
|
||||||
-moz-border-radius-topleft: 4px;
|
|
||||||
border-top-right-radius: 4px;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
border-top-left-radius: 4px;
|
|
||||||
}
|
|
||||||
#firechat .prompt-header a.close {
|
|
||||||
opacity: 0.6;
|
|
||||||
font-size: 13px;
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
#firechat .prompt-header a.close:hover {
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
#firechat .prompt-body {
|
|
||||||
background-color: #ffffff;
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-left: 1px solid #cccccc;
|
|
||||||
border-right: 1px solid #cccccc;
|
|
||||||
}
|
|
||||||
#firechat .prompt-footer {
|
|
||||||
padding: 4px 8px;
|
|
||||||
background-color: #eeeeee;
|
|
||||||
border: 1px solid #cccccc;
|
|
||||||
-webkit-border-top-right-radius: 0;
|
|
||||||
-webkit-border-bottom-right-radius: 4px;
|
|
||||||
-webkit-border-bottom-left-radius: 4px;
|
|
||||||
-webkit-border-top-left-radius: 0;
|
|
||||||
-moz-border-radius-topright: 0;
|
|
||||||
-moz-border-radius-bottomright: 4px;
|
|
||||||
-moz-border-radius-bottomleft: 4px;
|
|
||||||
-moz-border-radius-topleft: 0;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-bottom-right-radius: 4px;
|
|
||||||
border-bottom-left-radius: 4px;
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
}
|
|
||||||
#firechat .prompt-background {
|
|
||||||
background-color: #333333;
|
|
||||||
border: 1px solid #333333;
|
|
||||||
opacity: 0.8;
|
|
||||||
z-index: 1000;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
/* Component: Buttons
|
|
||||||
============================================================ */
|
|
||||||
#firechat .btn {
|
|
||||||
-webkit-touch-callout: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-khtml-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
-webkit-border-radius: 4px;
|
|
||||||
-moz-border-radius: 4px;
|
|
||||||
border-radius: 4px;
|
|
||||||
height: 24px;
|
|
||||||
display: inline-block;
|
|
||||||
*display: inline;
|
|
||||||
*zoom: 1;
|
|
||||||
padding: 2px 5px;
|
|
||||||
margin-bottom: 0;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #333333;
|
|
||||||
font-size: 12px;
|
|
||||||
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
|
|
||||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
|
|
||||||
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
|
|
||||||
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
|
|
||||||
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
|
|
||||||
background-repeat: repeat-x;
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
|
|
||||||
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
|
|
||||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
|
||||||
*background-color: #e6e6e6;
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
|
||||||
border: 1px solid #cccccc;
|
|
||||||
*border: 0;
|
|
||||||
border-bottom-color: #b3b3b3;
|
|
||||||
*margin-left: .3em;
|
|
||||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
||||||
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
||||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
#firechat .btn:hover,
|
|
||||||
#firechat .btn:focus,
|
|
||||||
#firechat .btn:active,
|
|
||||||
#firechat .btn.active,
|
|
||||||
#firechat .btn.disabled,
|
|
||||||
#firechat .btn[disabled] {
|
|
||||||
color: #333333;
|
|
||||||
background-color: #e6e6e6;
|
|
||||||
*background-color: #d9d9d9;
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
#firechat .btn:active,
|
|
||||||
#firechat .btn.active {
|
|
||||||
background-color: #cccccc;
|
|
||||||
}
|
|
||||||
#firechat .btn:first-child {
|
|
||||||
*margin-left: 0;
|
|
||||||
}
|
|
||||||
#firechat .btn:hover,
|
|
||||||
#firechat .btn:focus {
|
|
||||||
color: #333333;
|
|
||||||
text-decoration: none;
|
|
||||||
background-position: 0 -15px;
|
|
||||||
-webkit-transition: background-position 0.1s linear;
|
|
||||||
-moz-transition: background-position 0.1s linear;
|
|
||||||
-o-transition: background-position 0.1s linear;
|
|
||||||
transition: background-position 0.1s linear;
|
|
||||||
}
|
|
||||||
#firechat .btn.active,
|
|
||||||
#firechat .btn:active {
|
|
||||||
background-image: none;
|
|
||||||
outline: 0;
|
|
||||||
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
||||||
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
||||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
#firechat .btn.disabled,
|
|
||||||
#firechat .btn[disabled] {
|
|
||||||
cursor: default;
|
|
||||||
background-image: none;
|
|
||||||
opacity: 0.65;
|
|
||||||
filter: alpha(opacity=65);
|
|
||||||
}
|
|
||||||
#firechat .btn.disabled:active,
|
|
||||||
#firechat .btn[disabled]:active {
|
|
||||||
-webkit-box-shadow: inherit;
|
|
||||||
-moz-box-shadow: inherit;
|
|
||||||
box-shadow: inherit;
|
|
||||||
background-color: #e6e6e6;
|
|
||||||
}
|
|
||||||
/* Component: Context Menu
|
|
||||||
============================================================ */
|
|
||||||
#firechat .contextmenu {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 1001;
|
|
||||||
min-width: 150px;
|
|
||||||
border: 1px solid #cccccc;
|
|
||||||
-webkit-border-radius: 4px;
|
|
||||||
-moz-border-radius: 4px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
#firechat .contextmenu ul {
|
|
||||||
background-color: #ffffff;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
#firechat .contextmenu ul > li > a {
|
|
||||||
display: block;
|
|
||||||
padding: 3px 10px;
|
|
||||||
clear: both;
|
|
||||||
font-weight: normal;
|
|
||||||
line-height: 20px;
|
|
||||||
color: #333333;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
#firechat .contextmenu ul > li > a.highlight {
|
|
||||||
background-color: #d9edf7;
|
|
||||||
}
|
|
||||||
#firechat .contextmenu ul > li > a:hover,
|
|
||||||
#firechat .contextmenu ul > li > a:focus {
|
|
||||||
text-decoration: none;
|
|
||||||
color: #ffffff;
|
|
||||||
background-color: #0081c2;
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
/* Custom Styles
|
|
||||||
============================================================ */
|
|
||||||
#firechat {
|
|
||||||
padding: 0;
|
|
||||||
font-family: sans-serif;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 18px;
|
|
||||||
}
|
|
||||||
#firechat input,
|
|
||||||
#firechat textarea {
|
|
||||||
width: 100%;
|
|
||||||
font-family: sans-serif;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 18px;
|
|
||||||
padding: 2px 5px;
|
|
||||||
border: 1px solid #cccccc;
|
|
||||||
-webkit-border-radius: 1px;
|
|
||||||
-moz-border-radius: 1px;
|
|
||||||
border-radius: 1px;
|
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
-moz-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
#firechat input:-moz-placeholder,
|
|
||||||
#firechat textarea:-moz-placeholder {
|
|
||||||
color: #aaaaaa;
|
|
||||||
}
|
|
||||||
#firechat input:-ms-input-placeholder,
|
|
||||||
#firechat textarea:-ms-input-placeholder {
|
|
||||||
color: #aaaaaa;
|
|
||||||
}
|
|
||||||
#firechat input::-webkit-input-placeholder,
|
|
||||||
#firechat textarea::-webkit-input-placeholder {
|
|
||||||
color: #aaaaaa;
|
|
||||||
}
|
|
||||||
#firechat input[disabled],
|
|
||||||
#firechat textarea[disabled] {
|
|
||||||
background-color: #eeeeee;
|
|
||||||
}
|
|
||||||
#firechat input {
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
#firechat textarea {
|
|
||||||
resize: none;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
#firechat .search-wrapper {
|
|
||||||
-webkit-border-radius: 15px;
|
|
||||||
-moz-border-radius: 15px;
|
|
||||||
border-radius: 15px;
|
|
||||||
border: 1px solid #cccccc;
|
|
||||||
margin: 0 5px;
|
|
||||||
padding: 2px 5px;
|
|
||||||
background: #ffffff;
|
|
||||||
}
|
|
||||||
#firechat .search-wrapper > input[type=text] {
|
|
||||||
padding-left: 0px;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
#firechat .search-wrapper > input[type=text]:focus,
|
|
||||||
#firechat .search-wrapper > input[type=text]:active {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
#firechat .chat {
|
|
||||||
overflow: auto;
|
|
||||||
-ms-overflow-x: hidden;
|
|
||||||
overflow-x: hidden;
|
|
||||||
height: 290px;
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
border: 1px solid #cccccc;
|
|
||||||
border-top: none;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
#firechat .chat textarea {
|
|
||||||
overflow: auto;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
#firechat .message {
|
|
||||||
color: #333;
|
|
||||||
padding: 3px 5px;
|
|
||||||
border-bottom: 1px solid #ccc;
|
|
||||||
}
|
|
||||||
#firechat .message.highlighted {
|
|
||||||
background-color: #d9edf7;
|
|
||||||
}
|
|
||||||
#firechat .message .name {
|
|
||||||
font-weight: bold;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
#firechat .message.message-self {
|
|
||||||
color: #2675ab;
|
|
||||||
}
|
|
||||||
#firechat .message:nth-child(odd) {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
#firechat .message:nth-child(odd).highlighted {
|
|
||||||
background-color: #d9edf7;
|
|
||||||
}
|
|
||||||
#firechat .message:nth-child(odd).message-local {
|
|
||||||
background-color: #effafc;
|
|
||||||
}
|
|
||||||
#firechat .message-content {
|
|
||||||
word-wrap: break-word;
|
|
||||||
padding-right: 45px;
|
|
||||||
}
|
|
||||||
#firechat .message-content.red {
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
#firechat .message.message-notification .message-content {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
#firechat ul::-webkit-scrollbar {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
width: 7px;
|
|
||||||
}
|
|
||||||
#firechat ul::-webkit-scrollbar-thumb {
|
|
||||||
border-radius: 4px;
|
|
||||||
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
#firechat #firechat-header {
|
|
||||||
padding: 6px 0 0 0;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
#firechat #firechat-tabs {
|
|
||||||
height: 435px;
|
|
||||||
}
|
|
||||||
#firechat #firechat-tab-list {
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
#firechat #firechat-tab-content {
|
|
||||||
width: 100%;
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
#firechat .tab-pane-menu {
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-top: none;
|
|
||||||
vertical-align: middle;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
}
|
|
||||||
#firechat .tab-pane-menu .firechat-dropdown {
|
|
||||||
margin: 5px 0 0 5px;
|
|
||||||
}
|
|
||||||
#firechat .tab-pane-menu > .icon {
|
|
||||||
margin: 5px 2px 0;
|
|
||||||
}
|
|
||||||
#firechat .icon {
|
|
||||||
display: inline-block;
|
|
||||||
*margin-right: .3em;
|
|
||||||
line-height: 20px;
|
|
||||||
vertical-align: middle;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
padding: 0;
|
|
||||||
background: url(data:image/png;base64,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) no-repeat top left;
|
|
||||||
opacity: 0.3;
|
|
||||||
font-size: 22px;
|
|
||||||
font-family: Arial;
|
|
||||||
font-weight: bold;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
#firechat .icon.plus {
|
|
||||||
margin-top: 0;
|
|
||||||
vertical-align: top;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
#firechat .icon.search {
|
|
||||||
background-position: 0 0;
|
|
||||||
width: 13px;
|
|
||||||
height: 13px;
|
|
||||||
}
|
|
||||||
#firechat .icon.close {
|
|
||||||
background-position: -120px 0;
|
|
||||||
width: 13px;
|
|
||||||
height: 13px;
|
|
||||||
}
|
|
||||||
#firechat .icon.user-chat {
|
|
||||||
background-position: -138px 0;
|
|
||||||
width: 17px;
|
|
||||||
height: 13px;
|
|
||||||
}
|
|
||||||
#firechat .icon.user-group {
|
|
||||||
background-position: -18px 0;
|
|
||||||
width: 17px;
|
|
||||||
height: 13px;
|
|
||||||
}
|
|
||||||
#firechat .icon.user-mute {
|
|
||||||
background-position: -84px 0;
|
|
||||||
width: 13px;
|
|
||||||
height: 13px;
|
|
||||||
}
|
|
||||||
#firechat .icon.user-mute.red {
|
|
||||||
background-position: -102px 0;
|
|
||||||
width: 13px;
|
|
||||||
height: 13px;
|
|
||||||
}
|
|
||||||
#firechat .icon:hover,
|
|
||||||
#firechat .btn:hover > .icon {
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
#firechat a > .icon {
|
|
||||||
margin: 3px 1px;
|
|
||||||
}
|
|
||||||
@ -97,4 +97,127 @@ body { margin: 0; height: 100%; position: relative; }
|
|||||||
|
|
||||||
.btn-nav {
|
.btn-nav {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pages */
|
||||||
|
|
||||||
|
.pages {
|
||||||
|
height: inherit;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Login Page */
|
||||||
|
|
||||||
|
.login.page {
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login.page .form {
|
||||||
|
height: 100px;
|
||||||
|
margin-top: -100px;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
top: 50%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login.page .form .usernameInput {
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
border-bottom: 2px solid #fff;
|
||||||
|
outline: none;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
text-align: center;
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login.page .title {
|
||||||
|
font-size: 200%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login.page .usernameInput {
|
||||||
|
font-size: 200%;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login.page .title, .login.page .usernameInput {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Chat page */
|
||||||
|
|
||||||
|
.chat.page {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Font */
|
||||||
|
|
||||||
|
.messages {
|
||||||
|
font-size: 150%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputMessage {
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log {
|
||||||
|
color: gray;
|
||||||
|
font-size: 70%;
|
||||||
|
margin: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Messages */
|
||||||
|
|
||||||
|
.chatArea {
|
||||||
|
height: 100%;
|
||||||
|
padding-bottom: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.messages {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
overflow-y: scroll;
|
||||||
|
padding: 10px 20px 10px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.typing .messageBody {
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.username {
|
||||||
|
float: left;
|
||||||
|
font-weight: 700;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-right: 15px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Input */
|
||||||
|
|
||||||
|
.inputMessage {
|
||||||
|
border: 10px solid #000;
|
||||||
|
bottom: 0;
|
||||||
|
height: 60px;
|
||||||
|
left: 0;
|
||||||
|
outline: none;
|
||||||
|
padding-left: 10px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
File diff suppressed because one or more lines are too long
@ -1,38 +1,269 @@
|
|||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
|
|
||||||
function init() {
|
var FADE_TIME = 150; // ms
|
||||||
var firepadRef = getExampleRef();
|
var TYPING_TIMER_LENGTH = 400; // ms
|
||||||
var ref = new Firebase('scorching-heat-2873.firebaseIO.com');
|
var COLORS = [
|
||||||
var codeMirror = CodeMirror(document.getElementById('firepad-container'), {
|
'#e21400', '#91580f', '#f8a700', '#f78b00',
|
||||||
lineNumbers: true,
|
'#58dc00', '#287b00', '#a8f07a', '#4ae8c4',
|
||||||
mode: 'javascript'
|
'#3b88eb', '#3824aa', '#a700ff', '#d300e7'
|
||||||
});
|
];
|
||||||
var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror, {
|
|
||||||
defaultText: '// JavaScript Editing with Firepad!\\nfunction go() {\n var message = "Hello, world.";\n console.log(message);\n}'
|
// Initialize varibles
|
||||||
});
|
var $window = $(window);
|
||||||
}
|
var $usernameInput = $('.usernameInput'); // Input for username
|
||||||
function getExampleRef() {
|
var $messages = $('.messages'); // Messages area
|
||||||
var ref = new Firebase('https://firepad.firebaseio-demo.com');
|
var $inputMessage = $('.inputMessage'); // Input message input box
|
||||||
var hash = window.location.hash.replace(/#/g, '');
|
|
||||||
if (hash) {
|
var $loginPage = $('.login.page'); // The login page
|
||||||
ref = ref.child(hash);
|
var $chatPage = $('.chat.page'); // The chatroom page
|
||||||
|
|
||||||
|
// Prompt for setting a username
|
||||||
|
var username;
|
||||||
|
var connected = false;
|
||||||
|
var typing = false;
|
||||||
|
var lastTypingTime;
|
||||||
|
var $currentInput = $usernameInput.focus();
|
||||||
|
|
||||||
|
var socket = io("http://localhost:2999");
|
||||||
|
|
||||||
|
|
||||||
|
function addParticipantsMessage (data) {
|
||||||
|
var message = '';
|
||||||
|
if (data.numUsers === 1) {
|
||||||
|
message += "there's 1 participant";
|
||||||
} else {
|
} else {
|
||||||
ref = ref.push(); // generate unique location.
|
message += "there are " + data.numUsers + " participants";
|
||||||
window.location = window.location + '#' + ref.name(); // add it as a hash to the URL.
|
|
||||||
}
|
}
|
||||||
if (typeof console !== 'undefined')
|
log(message);
|
||||||
console.log('Firebase data: ', ref.toString());
|
|
||||||
return ref;
|
|
||||||
}
|
}
|
||||||
init();
|
|
||||||
var chatRef = new Firebase('https://scorching-heat-2873.firebaseio.com/chat');
|
// Sets the client's username
|
||||||
var auth = new FirebaseSimpleLogin(chatRef, function(err, user) {
|
function setUsername () {
|
||||||
console.log("HEY!")
|
username = cleanInput($usernameInput.val().trim());
|
||||||
if (user) {
|
|
||||||
var chat = new FirechatUI(chatRef, document.getElementById('firechat-wrapper'));
|
// If the username is valid
|
||||||
chat.setUser(user.uid, user.displayName);
|
if (username) {
|
||||||
|
$loginPage.fadeOut();
|
||||||
|
$chatPage.show();
|
||||||
|
$loginPage.off('click');
|
||||||
|
$currentInput = $inputMessage.focus();
|
||||||
|
|
||||||
|
// Tell the server your username
|
||||||
|
socket.emit('add user', username);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sends a chat message
|
||||||
|
function sendMessage () {
|
||||||
|
var message = $inputMessage.val();
|
||||||
|
// Prevent markup from being injected into the message
|
||||||
|
message = cleanInput(message);
|
||||||
|
// if there is a non-empty message and a socket connection
|
||||||
|
if (message && connected) {
|
||||||
|
$inputMessage.val('');
|
||||||
|
addChatMessage({
|
||||||
|
username: username,
|
||||||
|
message: message
|
||||||
|
});
|
||||||
|
// tell server to execute 'new message' and send along one parameter
|
||||||
|
socket.emit('new message', message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Log a message
|
||||||
|
function log (message, options) {
|
||||||
|
var $el = $('<li>').addClass('log').text(message);
|
||||||
|
addMessageElement($el, options);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adds the visual chat message to the message list
|
||||||
|
function addChatMessage (data, options) {
|
||||||
|
// Don't fade the message in if there is an 'X was typing'
|
||||||
|
var $typingMessages = getTypingMessages(data);
|
||||||
|
options = options || {};
|
||||||
|
if ($typingMessages.length !== 0) {
|
||||||
|
options.fade = false;
|
||||||
|
$typingMessages.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
var $usernameDiv = $('<span class="username"/>')
|
||||||
|
.text(data.username)
|
||||||
|
.css('color', getUsernameColor(data.username));
|
||||||
|
var $messageBodyDiv = $('<span class="messageBody">')
|
||||||
|
.text(data.message);
|
||||||
|
|
||||||
|
var typingClass = data.typing ? 'typing' : '';
|
||||||
|
var $messageDiv = $('<li class="message"/>')
|
||||||
|
.data('username', data.username)
|
||||||
|
.addClass(typingClass)
|
||||||
|
.append($usernameDiv, $messageBodyDiv);
|
||||||
|
|
||||||
|
addMessageElement($messageDiv, options);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adds the visual chat typing message
|
||||||
|
function addChatTyping (data) {
|
||||||
|
data.typing = true;
|
||||||
|
data.message = 'is typing';
|
||||||
|
addChatMessage(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Removes the visual chat typing message
|
||||||
|
function removeChatTyping (data) {
|
||||||
|
getTypingMessages(data).fadeOut(function () {
|
||||||
|
$(this).remove();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adds a message element to the messages and scrolls to the bottom
|
||||||
|
// el - The element to add as a message
|
||||||
|
// options.fade - If the element should fade-in (default = true)
|
||||||
|
// options.prepend - If the element should prepend
|
||||||
|
// all other messages (default = false)
|
||||||
|
function addMessageElement (el, options) {
|
||||||
|
var $el = $(el);
|
||||||
|
|
||||||
|
// Setup default options
|
||||||
|
if (!options) {
|
||||||
|
options = {};
|
||||||
|
}
|
||||||
|
if (typeof options.fade === 'undefined') {
|
||||||
|
options.fade = true;
|
||||||
|
}
|
||||||
|
if (typeof options.prepend === 'undefined') {
|
||||||
|
options.prepend = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Apply options
|
||||||
|
if (options.fade) {
|
||||||
|
$el.hide().fadeIn(FADE_TIME);
|
||||||
|
}
|
||||||
|
if (options.prepend) {
|
||||||
|
$messages.prepend($el);
|
||||||
|
} else {
|
||||||
|
$messages.append($el);
|
||||||
|
}
|
||||||
|
$messages[0].scrollTop = $messages[0].scrollHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Prevents input from having injected markup
|
||||||
|
function cleanInput (input) {
|
||||||
|
return $('<div/>').text(input).text();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Updates the typing event
|
||||||
|
function updateTyping () {
|
||||||
|
if (connected) {
|
||||||
|
if (!typing) {
|
||||||
|
typing = true;
|
||||||
|
socket.emit('typing');
|
||||||
|
}
|
||||||
|
lastTypingTime = (new Date()).getTime();
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
var typingTimer = (new Date()).getTime();
|
||||||
|
var timeDiff = typingTimer - lastTypingTime;
|
||||||
|
if (timeDiff >= TYPING_TIMER_LENGTH && typing) {
|
||||||
|
socket.emit('stop typing');
|
||||||
|
typing = false;
|
||||||
|
}
|
||||||
|
}, TYPING_TIMER_LENGTH);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Gets the 'X is typing' messages of a user
|
||||||
|
function getTypingMessages (data) {
|
||||||
|
return $('.typing.message').filter(function (i) {
|
||||||
|
return $(this).data('username') === data.username;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Gets the color of a username through our hash function
|
||||||
|
function getUsernameColor (username) {
|
||||||
|
// Compute hash code
|
||||||
|
var hash = 7;
|
||||||
|
for (var i = 0; i < username.length; i++) {
|
||||||
|
hash = username.charCodeAt(i) + (hash << 5) - hash;
|
||||||
|
}
|
||||||
|
// Calculate color
|
||||||
|
var index = Math.abs(hash % COLORS.length);
|
||||||
|
return COLORS[index];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Keyboard events
|
||||||
|
|
||||||
|
$window.keydown(function (event) {
|
||||||
|
// Auto-focus the current input when a key is typed
|
||||||
|
if (!(event.ctrlKey || event.metaKey || event.altKey)) {
|
||||||
|
$currentInput.focus();
|
||||||
|
}
|
||||||
|
// When the client hits ENTER on their keyboard
|
||||||
|
if (event.which === 13) {
|
||||||
|
if (username) {
|
||||||
|
sendMessage();
|
||||||
|
socket.emit('stop typing');
|
||||||
|
typing = false;
|
||||||
|
} else {
|
||||||
|
setUsername();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$inputMessage.on('input', function() {
|
||||||
|
updateTyping();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Click events
|
||||||
|
|
||||||
|
// Focus input when clicking anywhere on login page
|
||||||
|
$loginPage.click(function () {
|
||||||
|
$currentInput.focus();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Focus input when clicking on the message input's border
|
||||||
|
$inputMessage.click(function () {
|
||||||
|
$inputMessage.focus();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Socket events
|
||||||
|
|
||||||
|
// Whenever the server emits 'login', log the login message
|
||||||
|
socket.on('login', function (data) {
|
||||||
|
connected = true;
|
||||||
|
// Display the welcome message
|
||||||
|
var message = "Welcome to Socket.IO Chat – ";
|
||||||
|
log(message, {
|
||||||
|
prepend: true
|
||||||
|
});
|
||||||
|
addParticipantsMessage(data);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Whenever the server emits 'new message', update the chat body
|
||||||
|
socket.on('new message', function (data) {
|
||||||
|
addChatMessage(data);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Whenever the server emits 'user joined', log it in the chat body
|
||||||
|
socket.on('user joined', function (data) {
|
||||||
|
log(data.username + ' joined');
|
||||||
|
addParticipantsMessage(data);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Whenever the server emits 'user left', log it in the chat body
|
||||||
|
socket.on('user left', function (data) {
|
||||||
|
log(data.username + ' left');
|
||||||
|
addParticipantsMessage(data);
|
||||||
|
removeChatTyping(data);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Whenever the server emits 'typing', show the typing message
|
||||||
|
socket.on('typing', function (data) {
|
||||||
|
addChatTyping(data);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Whenever the server emits 'stop typing', kill the typing message
|
||||||
|
socket.on('stop typing', function (data) {
|
||||||
|
removeChatTyping(data);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -2,4 +2,14 @@ extends ../layout
|
|||||||
|
|
||||||
block content
|
block content
|
||||||
.page-header
|
.page-header
|
||||||
h3 Your Curriculum
|
h3 Your Curriculum
|
||||||
|
.col-xs-12.col-sm-12.col-md-12
|
||||||
|
ul.pages
|
||||||
|
li.chat.page
|
||||||
|
div.chatArea
|
||||||
|
ul.messages
|
||||||
|
input.inputMessage(placeholder='Type here...')
|
||||||
|
li.login.page
|
||||||
|
div.form
|
||||||
|
h3.title What's your nickname?
|
||||||
|
input.usernameInput(type='text', maxlength='14')
|
||||||
|
|||||||
@ -7,6 +7,7 @@ html
|
|||||||
meta(name='description', content='')
|
meta(name='description', content='')
|
||||||
meta(name='csrf-token', content=_csrf)
|
meta(name='csrf-token', content=_csrf)
|
||||||
meta(name='author', content='')
|
meta(name='author', content='')
|
||||||
|
script(src='https://cdn.socket.io/socket.io-1.0.0.js')
|
||||||
title #{title} | Free Code Camp
|
title #{title} | Free Code Camp
|
||||||
!= css('styles')
|
!= css('styles')
|
||||||
body
|
body
|
||||||
|
|||||||
Reference in New Issue
Block a user