mirror of
https://github.com/ENSL/ensl_gathers.git
synced 2024-11-23 04:52:00 +00:00
ES2015 strikes again
This commit is contained in:
parent
6ecdba9232
commit
c7c7c4eb24
4 changed files with 42 additions and 43 deletions
|
@ -2,8 +2,8 @@
|
||||||
|
|
||||||
var socket;
|
var socket;
|
||||||
|
|
||||||
function initialiseVisibilityMonitoring (socket) {
|
var initialiseVisibilityMonitoring = (socket) => {
|
||||||
var hidden, visibilityChange;
|
let hidden, visibilityChange;
|
||||||
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
|
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
|
||||||
hidden = "hidden";
|
hidden = "hidden";
|
||||||
visibilityChange = "visibilitychange";
|
visibilityChange = "visibilitychange";
|
||||||
|
@ -18,7 +18,7 @@ function initialiseVisibilityMonitoring (socket) {
|
||||||
visibilityChange = "webkitvisibilitychange";
|
visibilityChange = "webkitvisibilitychange";
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener(visibilityChange, function () {
|
document.addEventListener(visibilityChange, () => {
|
||||||
if (document[hidden]) {
|
if (document[hidden]) {
|
||||||
socket.emit("users:away");
|
socket.emit("users:away");
|
||||||
} else {
|
} else {
|
||||||
|
@ -27,16 +27,16 @@ function initialiseVisibilityMonitoring (socket) {
|
||||||
}, false);
|
}, false);
|
||||||
}
|
}
|
||||||
|
|
||||||
function initialiseComponents () {
|
var initialiseComponents = () => {
|
||||||
var socketUrl = window.location.protocol + "//" + window.location.host;
|
let socketUrl = window.location.protocol + "//" + window.location.host;
|
||||||
socket = io(socketUrl)
|
socket = io(socketUrl)
|
||||||
.on("connect", function () {
|
.on("connect", () => {
|
||||||
console.log("Connected");
|
console.log("Connected");
|
||||||
})
|
})
|
||||||
.on("reconnect", function () {
|
.on("reconnect", () => {
|
||||||
console.log("Reconnected");
|
console.log("Reconnected");
|
||||||
})
|
})
|
||||||
.on("disconnect", function () {
|
.on("disconnect", () => {
|
||||||
console.log("Disconnected")
|
console.log("Disconnected")
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -32,18 +32,17 @@ var Chatroom = React.createClass({
|
||||||
|
|
||||||
sendMessage(message) {
|
sendMessage(message) {
|
||||||
socket.emit("newMessage", {message: message});
|
socket.emit("newMessage", {message: message});
|
||||||
}
|
},
|
||||||
|
|
||||||
scrollToBottom() {
|
scrollToBottom() {
|
||||||
var node = React.findDOMNode(this.refs.messageContainer);
|
let node = React.findDOMNode(this.refs.messageContainer);
|
||||||
node.scrollTop = node.scrollHeight;
|
node.scrollTop = node.scrollHeight;
|
||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
var messages = this.props.history.map(message => {
|
let messages = this.props.history.map(message =>
|
||||||
return (<ChatMessage message={message} key={message.id} />);
|
<ChatMessage message={message} key={message.id} />
|
||||||
});
|
);
|
||||||
}
|
|
||||||
return (
|
return (
|
||||||
<div className="panel panel-default">
|
<div className="panel panel-default">
|
||||||
<div className="panel-heading">Gather Chat</div>
|
<div className="panel-heading">Gather Chat</div>
|
||||||
|
@ -60,22 +59,21 @@ var Chatroom = React.createClass({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
var updateMessageCallbacks = [];
|
let updateMessageCallbacks = [];
|
||||||
|
|
||||||
var timer = setInterval(function () {
|
let timer = setInterval(() => {
|
||||||
updateMessageCallbacks.forEach(function (callback) {
|
updateMessageCallbacks.forEach(callback => callback())
|
||||||
callback();
|
|
||||||
});
|
|
||||||
}, 60000);
|
}, 60000);
|
||||||
|
|
||||||
var ChatMessage = React.createClass({
|
var ChatMessage = React.createClass({
|
||||||
componentDidMount: function () {
|
componentDidMount() {
|
||||||
var self = this;
|
let self = this;
|
||||||
updateMessageCallbacks.push(function () {
|
updateMessageCallbacks.push(() => {
|
||||||
self.forceUpdate();
|
self.forceUpdate();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
render: function () {
|
|
||||||
|
render() {
|
||||||
return (
|
return (
|
||||||
<li className="left clearfix">
|
<li className="left clearfix">
|
||||||
<span className="chat-img pull-left">
|
<span className="chat-img pull-left">
|
||||||
|
@ -101,20 +99,22 @@ var ChatMessage = React.createClass({
|
||||||
});
|
});
|
||||||
|
|
||||||
var MessageBar = React.createClass({
|
var MessageBar = React.createClass({
|
||||||
sendMessage: function (content) {
|
sendMessage(content) {
|
||||||
socket.emit("message:new", {
|
socket.emit("message:new", {
|
||||||
content: content
|
content: content
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleSubmit: function (e) {
|
|
||||||
|
handleSubmit(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
var content = React.findDOMNode(this.refs.content).value.trim();
|
let content = React.findDOMNode(this.refs.content).value.trim();
|
||||||
if (!content) return;
|
if (!content) return;
|
||||||
React.findDOMNode(this.refs.content).value = '';
|
React.findDOMNode(this.refs.content).value = '';
|
||||||
this.sendMessage(content);
|
this.sendMessage(content);
|
||||||
return;
|
return;
|
||||||
},
|
},
|
||||||
render: function () {
|
|
||||||
|
render() {
|
||||||
return (
|
return (
|
||||||
<form onSubmit={this.handleSubmit} >
|
<form onSubmit={this.handleSubmit} >
|
||||||
<div className="input-group">
|
<div className="input-group">
|
||||||
|
@ -136,3 +136,4 @@ var MessageBar = React.createClass({
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -142,3 +142,4 @@ var CurrentUser = React.createClass({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -929,8 +929,9 @@ var CompletedGather = React.createClass({
|
||||||
|
|
||||||
var socket;
|
var socket;
|
||||||
|
|
||||||
function initialiseVisibilityMonitoring(socket) {
|
var initialiseVisibilityMonitoring = function initialiseVisibilityMonitoring(socket) {
|
||||||
var hidden, visibilityChange;
|
var hidden = undefined,
|
||||||
|
visibilityChange = undefined;
|
||||||
if (typeof document.hidden !== "undefined") {
|
if (typeof document.hidden !== "undefined") {
|
||||||
// Opera 12.10 and Firefox 18 and later support
|
// Opera 12.10 and Firefox 18 and later support
|
||||||
hidden = "hidden";
|
hidden = "hidden";
|
||||||
|
@ -953,9 +954,9 @@ function initialiseVisibilityMonitoring(socket) {
|
||||||
socket.emit("users:online");
|
socket.emit("users:online");
|
||||||
}
|
}
|
||||||
}, false);
|
}, false);
|
||||||
}
|
};
|
||||||
|
|
||||||
function initialiseComponents() {
|
var initialiseComponents = function initialiseComponents() {
|
||||||
var socketUrl = window.location.protocol + "//" + window.location.host;
|
var socketUrl = window.location.protocol + "//" + window.location.host;
|
||||||
socket = io(socketUrl).on("connect", function () {
|
socket = io(socketUrl).on("connect", function () {
|
||||||
console.log("Connected");
|
console.log("Connected");
|
||||||
|
@ -985,9 +986,9 @@ var Chatroom = React.createClass({
|
||||||
history: []
|
history: []
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
componentDidMount: function componentDidMount() {
|
componentDidMount: function componentDidMount() {
|
||||||
var self = this;
|
var self = this;
|
||||||
var TIMER_INTERVAL = 5000; // Every minute
|
|
||||||
|
|
||||||
socket.on("message:new", function (data) {
|
socket.on("message:new", function (data) {
|
||||||
var history = self.props.history;
|
var history = self.props.history;
|
||||||
|
@ -1007,27 +1008,20 @@ var Chatroom = React.createClass({
|
||||||
});
|
});
|
||||||
|
|
||||||
socket.emit("message:refresh", {});
|
socket.emit("message:refresh", {});
|
||||||
|
|
||||||
self.timer = setInterval(function () {
|
|
||||||
self.forceUpdate();
|
|
||||||
}, TIMER_INTERVAL);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
componentDidUnmount: function componentDidUnmount() {
|
|
||||||
clearInterval(this.timer);
|
|
||||||
},
|
|
||||||
sendMessage: function sendMessage(message) {
|
sendMessage: function sendMessage(message) {
|
||||||
socket.emit("newMessage", { message: message });
|
socket.emit("newMessage", { message: message });
|
||||||
},
|
},
|
||||||
|
|
||||||
scrollToBottom: function scrollToBottom() {
|
scrollToBottom: function scrollToBottom() {
|
||||||
var node = React.findDOMNode(this.refs.messageContainer);
|
var node = React.findDOMNode(this.refs.messageContainer);
|
||||||
node.scrollTop = node.scrollHeight;
|
node.scrollTop = node.scrollHeight;
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function render() {
|
render: function render() {
|
||||||
var messages = this.props.history.map(function (message) {
|
var messages = this.props.history.map(function (message) {
|
||||||
return React.createElement(ChatMessage, {
|
return React.createElement(ChatMessage, { message: message, key: message.id });
|
||||||
message: message,
|
|
||||||
key: message.id });
|
|
||||||
});
|
});
|
||||||
return React.createElement(
|
return React.createElement(
|
||||||
"div",
|
"div",
|
||||||
|
@ -1059,7 +1053,7 @@ var updateMessageCallbacks = [];
|
||||||
|
|
||||||
var timer = setInterval(function () {
|
var timer = setInterval(function () {
|
||||||
updateMessageCallbacks.forEach(function (callback) {
|
updateMessageCallbacks.forEach(function (callback) {
|
||||||
callback();
|
return callback();
|
||||||
});
|
});
|
||||||
}, 60000);
|
}, 60000);
|
||||||
|
|
||||||
|
@ -1072,6 +1066,7 @@ var ChatMessage = React.createClass({
|
||||||
self.forceUpdate();
|
self.forceUpdate();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function render() {
|
render: function render() {
|
||||||
return React.createElement(
|
return React.createElement(
|
||||||
"li",
|
"li",
|
||||||
|
@ -1123,6 +1118,7 @@ var MessageBar = React.createClass({
|
||||||
content: content
|
content: content
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
handleSubmit: function handleSubmit(e) {
|
handleSubmit: function handleSubmit(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
var content = React.findDOMNode(this.refs.content).value.trim();
|
var content = React.findDOMNode(this.refs.content).value.trim();
|
||||||
|
@ -1131,6 +1127,7 @@ var MessageBar = React.createClass({
|
||||||
this.sendMessage(content);
|
this.sendMessage(content);
|
||||||
return;
|
return;
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function render() {
|
render: function render() {
|
||||||
return React.createElement(
|
return React.createElement(
|
||||||
"form",
|
"form",
|
||||||
|
|
Loading…
Reference in a new issue