Light12306/Web12306/js/ui/chat/roomsession.js

define(function (require, exports, module) {
	var EventObject = require("../../platform/EventObject.js");
	var ep = require("../../platform/extensionPort.js");
	var port = ep.port;
	var mp = require("../widget_message_popup.js");
	var sessMgr = require("../../account/sessionMgr.js");
	var param = require("../../data.js");
	var page = $("#chat_container");
	var user = sessMgr.current;
	var utility = require("../../utility.js");

	sessMgr.on("sessionChanged", function () {
		user = sessMgr.current;
	});

	var RoomSession = function () {
		EventObject.apply(this);
		var that = this;
		var room;
		var chatListContainer = page.find("article.chat-items");
		var chatListContainerDom = chatListContainer[0];
		var roomStateTemplate = $("#chat_connect_server").doT();
		var roomSystemNoticeTemplate = $("#chat_sys_alert").doT();
		var chatMsgItem = $("#chat_msg_item").doT();

		this.clearConnectingState = function () {
			chatListContainer.find(".chat-state").remove();
		};
		this.enterRoom = function (targetRoom) {
			if (targetRoom === room)
				return;
			room = targetRoom;

			//UI
			$("#chat_frame>section").removeClass("chat-page-current");
			page.addClass("chat-page-current");
			page.find(">header>span:eq(0)").html(room.name);
			chatListContainer.empty();
			that.refreshOnlineCount();
			page.find("button.button-primary").prop("disabled", true);

			that.fireEvent("enterRoom");
			if (!room.url) {
				that.appendMessageItem(roomStateTemplate({ state: "connecting", stateIcon: "fa-spin fa-spinner", msg: "正在获得房间地址..." }));
				$.post(param.chatServerGetAddressApi, { roomId: room.id }, "json").done(function (result) {
					if (!result.url) {
						that.clearConnectingState();
						that.appendMessageItem(roomStateTemplate({ state: "disconnect", stateIcon: "fa-times", msg: "无法进入房间，请重试。", exinfo: "<a href='javascript:;' class='chat-frame-reconnect'>重新连接</a>" }));
						that.exitRoom();
						mp.showMessagePopup("error", "无法进入房间，请稍后重试。");
					} else {
						room.url = result.url;
						room.heartbeat = result.heartbeat;

						that.clearConnectingState();
						port.postMessage("enterChatRoom", room);
					}
				}).fail(function () {
					that.clearConnectingState();
					that.appendMessageItem(roomStateTemplate({ state: "disconnect", stateIcon: "fa-times", msg: "无法进入房间，请重试。", exinfo: "<a href='javascript:;' class='chat-frame-reconnect'>重新连接</a>" }));
					that.exitRoom();
					mp.showMessagePopup("error", "无法进入房间，请稍后重试。");
				});
			} else {
				port.postMessage("enterChatRoom", room);
			}
		};
		this.refreshOnlineCount = function () {
			page.find(">header>span:eq(1)").html("当前在线 " + room.onlinecount + " 人");
			page.find(".chat-online-count").html(room.onlinecount);
		};
		this.exitRoom = function () {
			room = null;
			port.postMessage("disconnectChatRoom");
			that.fireEvent("exitRoom");
		};
		this.appendMessageItem = function (html) {
			chatListContainer.append(html);
			chatListContainerDom.scrollTop = chatListContainerDom.scrollHeight;
		};
		this.clearDisplay = function () {
			chatListContainer.empty();
		};
		this.sendMsg = function (msg) {
			var data = {
				items: [msg],
				from: {
					realname: user.dispname,
					username: user.username
				},
				target: msg.target || [],
				time: new Date().getTime()
			}
			port.postMessage("chatRoomSendMsg", data);
		};
		this.reconnect = function () {
			if (!room)
				return;

			port.postMessage("enterChatRoom", room);
		};

		Object.defineProperty(this, "room", {
			get: function () {
				return room;
			}
		});
		port.on("chatRoomConnecting", function () {
			that.appendMessageItem(roomStateTemplate({ state: "connecting", stateIcon: "fa-spin fa-spinner", msg: "正在连接服务器中..." }));
			that.fireEvent("chatRoomConnecting");
		});
		port.on("chatRoomConnected", function () {
			page.find("button.button-primary").prop("disabled", false);
			that.clearConnectingState();
			that.appendMessageItem(roomSystemNoticeTemplate(room));
			that.fireEvent("chatRoomConnected");
		});
		port.on("chatRoomReceiveMsg", function (e, data) {
			that.fireEvent("chatRoomReceiveMsg");

			if (data.time) {
				data.time = new Date(data.time);
				data.timeStr = utility.formatDate(data.time, "hh:mm:ss");
			}
			data.self = data.from.username == sessMgr.current.username;
			data.sys = data.from.username || false;
			data.tome = false;
			if (data.target && data.target.length) {
				var selfTarget = _.findWhere(data.target, { username: sessMgr.current.username });
				if (selfTarget) {
					data.tome = true;
					selfTarget.username = null;
					selfTarget.realname = "我";
				}
			}
			that.appendMessageItem(chatMsgItem(data));
		});
		port.on("chatRoomDisconnected", function () {
			that.clearConnectingState();
			that.appendMessageItem(roomStateTemplate({ state: "disconnect", stateIcon: "fa-times", msg: "服务器已断开连接。", exinfo: "<a href='javascript:;' class='chat-frame-reconnect'>重新连接</a>" }));
			that.fireEvent("chatRoomDisconnected");
			page.find("button.button-primary").prop("disabled", true);
		});
		port.on("chatUpdateOnline", function () {
			if (!room)
				return;
			room.onlinecount = this.detail.count;
			//更新显示
			that.refreshOnlineCount();
		});
		port.on("sendMessageFailed", function (e, data) {
			that.appendMessageItem(roomStateTemplate({ state: "error", stateIcon: "fa-times", msg: "消息发送失败：" + data, exinfo: "" }));
		});

		return this;
	};
	RoomSession.prototype = Object.create(EventObject);
	RoomSession.constructor = RoomSession;

	var session = new RoomSession();

	(function chatEditor() {
		var editor = page.find("section.chat-editor");
		var sendBtn = editor.find(">footer>button.button-primary");
		var editorArea = editor.find(".chat-editor-container");

		var initEditor = function () {
			if (!sessMgr.current)
				return;
			var color = sessMgr.current.options.chatColor || "#000000";
			editor.find(">header .chat-editor-color").val(color);
			editor.find(".chat-editor-container").css("color", color);
		};
		var delayEnableSend = function () {
			sendBtn.prop("disabled", true);
			setTimeout(function () {
				sendBtn.prop("disabled", false);
			}, param.chatSendMsgDelay);
		};
		initEditor();

		editor.find(".chat-editor-container").keyup(function (e) {
			if (e.keyCode === 13 && e.ctrlKey) {
				sendBtn.click();
			}
		});

		sessMgr.on("sessionChanged", function () {
			initEditor();
		});

		editor.find(">header .chat-btn-cls").click(function () {
			session.clearDisplay();
		});
		editor.find(">header .chat-editor-color").change(function () {
			user.options.chatColor = this.value;
			editor.find(".chat-editor-container").css("color", this.value);
			sessMgr.save();
		});

		editor.find(">footer>button.button-default").click(function () {
			session.exitRoom();
		});
		editor.find(">footer>button.button-primary").click(function () {
			var editorObj = editor.find(".chat-editor-container");
			var target = [];
			var addedUser = [];
			editorObj.find("span.chat-editor-at").each(function () {
				var username = this.dataset.un;
				if (addedUser[username])
					return;
				addedUser[username] = true;
				target.push({
					realname: $.trim($(this).text()).substr(1),
					username: username
				});
			}).remove();
			var msg = {
				color: user.options.chatColor,
				text: $.trim(editorObj.text()).replace(/\u00a0/g, ""),
				target: target
			}
			if (!msg.text)
				return;
			editor.find(".chat-editor-container").empty();
			session.sendMsg(msg);
			delayEnableSend();
		});
		$(document).on("click", "a.chat-item-at", function () {
			var un = this.dataset.un;
			var name = this.innerHTML;
			if (!un)
				return;

			var html = "<span class='chat-editor-at' contenteditable='false' data-un='" + un + "'>@" + name + "</span>&nbsp;";
			editorArea.append(html);

			var range = document.createRange();
			range.selectNodeContents(editorArea[0]);
			range.collapse(false);
			var selection = window.getSelection();
			selection.removeAllRanges();
			selection.addRange(range);
			editorArea[0].focus();
		});
		$(document).on("click", "a.chat-frame-reconnect", function () {
			$(".chat-item").remove();
			session.reconnect();
		});
	})();

	return {
		session: session,
		enterRoom: session.enterRoom
	}
});