Changeset View
Changeset View
Standalone View
Standalone View
assets/js/api.js
import {Socket, LongPoll, Presence} from "phoenix" | import {Socket, LongPoll, Presence} from "phoenix" | ||||
import UserListWidget from "./widgets/userlist" | import UserListWidget from "./widgets/userlist" | ||||
import UserStatusWidget from "./widgets/userstatus" | import UserStatusWidget from "./widgets/userstatus" | ||||
import ChannelListWidget from "./widgets/channellist" | |||||
import ChatInputWidget from "./widgets/chatinput" | import ChatInputWidget from "./widgets/chatinput" | ||||
import ChatRoomWidget from "./widgets/chatroom" | import ChatRoomWidget from "./widgets/chatroom" | ||||
import ChatDetailsWidget from "./widgets/chatdetails" | |||||
class KolabChat | class KolabChat | ||||
{ | { | ||||
/** | /** | ||||
* Configuration parameters: | * Configuration parameters: | ||||
* - token: User session token | * - token: User session token | ||||
* - context: KolabChat instance identifier | * - context: KolabChat instance identifier | ||||
* - roomId: Chat room Id to join in | * - roomId: Chat room Id to join in | ||||
* - userListElement: Id of HTML element where to put userslist widget | * - userListElement: Id of HTML element where to put userslist widget | ||||
* - userStatusElement: Id of HTML element where to put users status widget | * - userStatusElement: Id of HTML element where to put users status widget | ||||
* - chatInputElement: Id of HTML element which is a text chat input | * - chatInputElement: Id of HTML element which is a text chat input | ||||
* - chatRoomElement: Id of HTML element where to put text conversation | * - chatRoomElement: Id of HTML element where to put text conversation | ||||
* - chatDetailsElement: Id of HTML element where to put chat room details widget | |||||
* - channelListElement: Id of HTML element where to put channellist widget | |||||
*/ | */ | ||||
constructor(config) | constructor(config) | ||||
{ | { | ||||
this.config = config || {} | this.config = config || {} | ||||
if (!this.config.context) | if (!this.config.context) | ||||
this.config.context = location.hostname; | this.config.context = location.hostname; | ||||
} | } | ||||
Show All 32 Lines | class KolabChat | ||||
*/ | */ | ||||
initWidgets() | initWidgets() | ||||
{ | { | ||||
let config | let config | ||||
if (this.config.userListElement && $('#' + this.config.userListElement).length) { | if (this.config.userListElement && $('#' + this.config.userListElement).length) { | ||||
config = { | config = { | ||||
username: this.username, | username: this.username, | ||||
title: true, | |||||
openChat: (e, user) => { this.openChat(e, user) } | openChat: (e, user) => { this.openChat(e, user) } | ||||
} | } | ||||
this.userListWidget = new UserListWidget(this.config.userListElement, config) | this.userListWidget = new UserListWidget(this.config.userListElement, config) | ||||
} | } | ||||
if (this.config.userStatusElement && $('#' + this.config.userStatusElement).length) { | if (this.config.userStatusElement && $('#' + this.config.userStatusElement).length) { | ||||
config = { | config = { | ||||
username: this.username, | username: this.username, | ||||
statusChange: status => { this.setStatus(status) } | statusChange: status => { this.setStatus(status) } | ||||
} | } | ||||
this.userStatusWidget = new UserStatusWidget(this.config.userStatusElement, config) | this.userStatusWidget = new UserStatusWidget(this.config.userStatusElement, config) | ||||
} | } | ||||
if (this.config.channelListElement && $('#' + this.config.channelListElement).length) { | |||||
config = { | |||||
username: this.username, | |||||
title: true, | |||||
openChat: (e, roomId) => { this.openExistingChat(roomId) }, | |||||
createChat: (e) => { this.openChat(e); } | |||||
} | |||||
this.channelListWidget = new ChannelListWidget(this.config.channelListElement, config) | |||||
} | |||||
if (this.config.chatDetailsElement && $('#' + this.config.chatDetailsElement).length) { | |||||
config = { | |||||
submit: (e, data) => { this.updateChatDetails(data); } | |||||
} | |||||
this.chatDetailsWidget = new ChatDetailsWidget(this.config.chatDetailsElement, config) | |||||
} | |||||
if (this.config.chatRoomElement && $('#' + this.config.chatRoomElement).length) { | if (this.config.chatRoomElement && $('#' + this.config.chatRoomElement).length) { | ||||
this.chatRoomWidget = new ChatRoomWidget(this.config.chatRoomElement) | this.chatRoomWidget = new ChatRoomWidget(this.config.chatRoomElement) | ||||
} | } | ||||
if (this.config.chatInputElement && $('#' + this.config.chatInputElement).length) { | if (this.config.chatInputElement && $('#' + this.config.chatInputElement).length) { | ||||
config = { | config = { | ||||
submit: (e, msg) => { this.sendTxtMessage(e, msg) } | submit: (e, msg) => { this.sendTxtMessage(e, msg) } | ||||
} | } | ||||
Show All 38 Lines | class KolabChat | ||||
/** | /** | ||||
* Initialize chat channel | * Initialize chat channel | ||||
*/ | */ | ||||
initRoom(roomId, invitees) | initRoom(roomId, invitees) | ||||
{ | { | ||||
let channelName = roomId.startsWith("room:") ? roomId | let channelName = roomId.startsWith("room:") ? roomId | ||||
: "room:" + roomId | : "room:" + roomId | ||||
this.chat = this.socket.channel(channelName) | |||||
this.chat = this.socket.channel(channelName, {context: this.config.context}) | |||||
if (this.chatRoomWidget) { | if (this.chatRoomWidget) { | ||||
this.chat.on("new:message", message => { | this.chat.on("new:message", message => { | ||||
this.chatRoomWidget.append(message.user, message.body) | this.chatRoomWidget.append(message.user, message.body) | ||||
}) | }) | ||||
} | } | ||||
if (this.chatDetailsWidget) { | |||||
this.chat.on("info", message => { | |||||
this.chatDetailsWidget.setRoom(message) | |||||
}) | |||||
} | |||||
let join = this.chat.join() | let join = this.chat.join() | ||||
if (invitees) { | if (invitees) { | ||||
join.receive("ok", () => this.chat.push("ctl:invite", {users: invitees})) | join.receive("ok", () => this.chat.push("ctl:invite", {users: invitees})) | ||||
} | } | ||||
} | } | ||||
/** | /** | ||||
* Initialize the user's own notifications channel | * Initialize the user's own notifications channel | ||||
*/ | */ | ||||
initNotifications(userId) | initNotifications(userId) | ||||
{ | { | ||||
this.notifications = this.socket.channel("user:" + userId) | this.notifications = this.socket.channel("user:" + userId, {context: this.config.context}) | ||||
this.notifications.on("notify:invite", message => { | this.notifications.on("notify:invite", message => { | ||||
console.log("Invite from " + message.user + " to room " + message.room) | console.log("Invite from " + message.user + " to room " + message.room) | ||||
this.openExistingChat(message.room) | this.openExistingChat(message.room) | ||||
}) | }) | ||||
this.notifications.join() | this.notifications.join() | ||||
.receive("ok", () => console.log("Starting to receive notifications")) | .receive("ok", () => console.log("Starting to receive notifications")) | ||||
▲ Show 20 Lines • Show All 63 Lines • ▼ Show 20 Lines | class KolabChat | ||||
} | } | ||||
/** | /** | ||||
* Open chat window (and create a new chat room) | * Open chat window (and create a new chat room) | ||||
*/ | */ | ||||
openChat(event, user) | openChat(event, user) | ||||
{ | { | ||||
let windowName = 'KolabChat' + new Date().getTime() | let windowName = 'KolabChat' + new Date().getTime() | ||||
let url = "/chat/?token=" + encodeURIComponent(this.config.token) + "&invite=" + encodeURIComponent(user) | let url = "/chat/?token=" + encodeURIComponent(this.config.token) | ||||
if (user) { | |||||
url += "&invite=" + encodeURIComponent(user) | |||||
} | |||||
var extwin = window.open(url, windowName); | var extwin = window.open(url, windowName); | ||||
} | } | ||||
/** | /** | ||||
* Open a chat window to an existing chat | * Open a chat window to an existing chat | ||||
*/ | */ | ||||
openExistingChat(roomId) | openExistingChat(roomId) | ||||
{ | { | ||||
let windowName = 'KolabChat' + new Date().getTime() | let windowName = 'KolabChat' + new Date().getTime() | ||||
let url = "/chat/" + encodeURIComponent(roomId) | let url = "/chat/" + encodeURIComponent(roomId) | ||||
+ "/?token=" + encodeURIComponent(this.config.token) | + "/?token=" + encodeURIComponent(this.config.token) | ||||
var extwin = window.open(url, windowName); | var extwin = window.open(url, windowName); | ||||
} | } | ||||
/** | |||||
* Update chat room details (e.g. name) | |||||
*/ | |||||
updateChatDetails(data) | |||||
{ | |||||
// TODO | |||||
} | |||||
static extend(obj, src) | static extend(obj, src) | ||||
{ | { | ||||
Object.keys(src).forEach(function(key) { obj[key] = src[key] }) | Object.keys(src).forEach(function(key) { obj[key] = src[key] }) | ||||
return obj | return obj | ||||
} | } | ||||
} | } | ||||
export default KolabChat | export default KolabChat |