Skip to content

C
chat_webview
Commit 25a58f71 by Kim Peace
Options

Fixed chat-web-socket

parent 493cf8aa
Showing with 535 additions and 573 deletions
public_new/js/chat-websocket-message.js 0 → 100644
var bindOnNewMessage = function () {
// New Message
// #36170
socket.on(SOCKET_KEY.NEW_MESSAGE, function (message, roomId, roomName) {
console.log(message);
const systemMessageTemplate = getTemplate(TemplateURL.SYSTEM_MESSAGE);
const unwrappedMessageInfo = decodeMessage(message.text);
if (
unwrappedMessageInfo ==
DATA_MESSAGE_SCHEME + FINISH_ALL_COLLABORATION_SIGNAL
) {
cleanUpCollaborationMessage();
return;
}
if (unwrappedMessageInfo.includes(messageSeperator)) {
const messageInfo = unwrappedMessageInfo.split(messageSeperator);
const messageText = messageInfo[0];
const messageType = messageInfo[1];
if (
messageType == MessageType.COMMUNICATIONSTART ||
messageType == MessageType.COMMUNICATIONEND
) {
addCollaborationMessage(
messageInfo,
message.userId,
roomName,
message.insertDate,
message.createdAt
);
} else {
addTextMessage(messageText, message, socket.id);
}
}
// 画像、動画の描画を待ってからスクロール
setTimeout(function () {
CHAT_UI.scrollToBottom();
}, 300);
});
};
var decodeMessage = function (text) {
try {
return decodeURIComponent(text);
} catch (e) {
return text;
}
};
var addCollaborationMessage = function (
messageInfo,
userID,
roomName,
insertDate,
createdAt
) {
const collaborationType = messageInfo[2];
const meetingID = getMeetingID(collaborationType, messageInfo);
const userInCollaboration = getUserInfoList(userID);
userInCollaboration.forEach(function (user) {
user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
});
const openCollaborationMessageTemplate = getTemplate(
TemplateURL.OPEN_COLLABORATION_MESSAGE
);
const html = renderCollaborationMessage(
openCollaborationMessageTemplate,
roomName,
userInCollaboration,
insertDate,
collaborationType,
meetingID,
createdAt
);
$("#messages").append(html);
};
var getMeetingID = function (collaborationType, messageInfo) {
if (
collaborationType ==
CHAT_UTIL.getCollaborationType(CollaborationTypeKey.DOCUMENT)
) {
return messageInfo[3];
} else {
return 0;
}
};
var renderCollaborationMessage = function (
template,
roomName,
userList,
insertDate,
collaborationType,
meetingID,
createdAt
) {
let messageTime = CHAT_UTIL.formatDate(createdAt);
return Mustache.render(template, {
roomName: roomName,
userCount: 1,
userList: userList,
insertDate: insertDate,
collaborationType: collaborationType,
isToday: true,
meetingId: meetingID,
createdAtDay: messageTime.createdAtDay,
createdAtTime: messageTime.createdAtTime,
isOtherYear: false,
});
};
var addTextMessage = function (messageText, message, socketID) {
const messageTextWithSID = insertSID(messageText);
const messageSender = getUserInfoList(message.userId);
const shopMemberName = messageSender[0].shopMemberName;
const textMessageTemplate = getTextMessageTemplate(message.id === socketID);
const profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath);
const html = renderTextMessage(
textMessageTemplate,
messageTextWithSID,
shopMemberName,
profileImagePath,
message.userId,
message.createdAt
);
$("#messages").append(html);
};
var renderTextMessage = function (
template,
text,
from,
profileImagePath,
userID,
createdAt
) {
let messageTime = CHAT_UTIL.formatDate(createdAt);
let dataInsertedTemplate = Mustache.render(template, {
text: text,
from: from,
profileImage: profileImagePath,
shopMemberId: userID,
createdAtDay: messageTime.createdAtDay,
createdAtTime: messageTime.createdAtTime,
isToday: true,
});
// イメージの場合、img tagを追加する
if (text.includes("attachedImages") || text.includes("attachedVideos")) {
return CHAT_UTIL.htmlDecode(dataInsertedTemplate);
} else {
return dataInsertedTemplate;
}
};
var getUserInfoList = function (userID) {
if (CHAT_UTIL.isIOS()) {
return JSON.parse(CHAT_DB.getUserInfoList(userID));
} else if (CHAT_UTIL.isAndroid()) {
return JSON.parse(android.getUserInfoList(userID));
}
};
var cleanUpCollaborationMessage = function () {
$(".collabo_area.start").each(function (index, collaborationMessage) {
$(collaborationMessage).removeClass("start");
$(collaborationMessage).addClass("end");
$(collaborationMessage).addClass("disable");
$(collaborationMessage)
.find(".collaboation_join_button")
.attr("disabled", "disabled");
$(collaborationMessage)
.find(".collaboration_join_message")
.text(getLocalizedString("message_ended"));
});
};
var insertSID = function (text) {
let replacePath = text;
replacePath = replacePath.replaceAll(
"?fileName=",
"?sid=" + CHAT.globalLoginParameter.sid + "&fileName="
);
return replacePath;
};
var getTextMessageTemplate = function (isSenderMySelf) {
return getTemplate(
isSenderMySelf
? TemplateURL.MY_MESSAGE // ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する
: TemplateURL.USER_MESSAGE
);
};
public_new/js/chat-websocket-refresh-group-list.js 0 → 100644
var bindOnRefreshGroupList = function () {
// Update Group List(Invite)
socket.on(SOCKET_KEY.REFRESH_GROUPLIST, function (groups, isInvite) {
const groupListElement = $("#group_list");
groupListElement.html("");
const template = $("#group-template").html();
if (groups.length === 0) {
groupListElement.append(
'<center class="text-secondary">' +
getLocalizedString(everyoneIsHere) +
"</center>"
);
}
addGroupNameAndNumberOfUsers(groups);
// Rotate
handleRotate();
updateTopBar();
// Set Title
updateTopBar(isInvite);
updateUserSelectionLength();
setupBackButton();
});
};
var addGroupNameAndNumberOfUsers = function (groups) {
// グループ名と人数を表記する。
groups.forEach(function (group) {
let html = Mustache.render(template, {
name: group.groupName,
info: group.memberCnt + getLocalizedString("people"),
});
// グループをクリックすると、該当グループのユーザーリストを読み込むようにイベントを与える
let obj = $(jQuery.parseHTML(html)).on("click", function () {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
socket.emit("getUserListInGroup", group.groupId, isInvite);
$("#groupName").text(group.groupName);
});
groupListElement.append(obj);
});
};
var handleRotate = function () {
if (CHAT_UI.isLandscapeMode()) {
$(".group_list").addClass("col-6").removeClass("col-12");
}
};
var setupBackButton = function () {
const backButton = $("#backButton");
backButton.show();
backButton.off().on("click", function () {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
if (isInvite) {
$("#pills-chat-tab").tab("show");
} else {
if (IS_ONLINE == "true") {
android.updateRoomList();
CHAT_UI.refreshRoomList(ChatRoomType.DM);
CHAT_UI.dismissLoadingIndicator();
}
}
});
};
var updateUserSelectionLength = function () {
const userSelectionLength = $("#userSelectionLength");
if (CHAT.globalSelectedUserList.length > 0) {
userSelectionLength.text(CHAT.globalSelectedUserList.length);
} else {
userSelectionLength.text("");
}
};
var updateTopBar = function (isInvite) {
// Set Title
let memberSelectTitle = getLocalizedString("groupSearch");
$("#pills-group-tab").tab("show");
const titleRoomName = $(".titleRoomName");
const userSelectionConfirmButton = $("#userSelectionConfirmBtn");
titleRoomName.text(memberSelectTitle);
if (isInvite) {
$("#newRoomName, .roomListIcon, .chatRoomIcon").hide();
} else {
$(".roomListIcon, .chatRoomIcon, #newRoomName").hide();
}
userSelectionConfirmButton.show();
userSelectionConfirmButton.off().on("click", function () {
CHAT_UI.setConfirmButtonEvent(isInvite);
});
};
public_new/js/chat-websocket-refresh-user-list-in-group.js 0 → 100644
var bindOnRefreshUserListInGroup = function () {
// Update User List(Invite)
// #36170
socket.on(
SOCKET_KEY.REFRESH_USERLIST_INGROUP,
function (users, groupId, isInvite) {
$("#user_list").html("");
// Set Title
updateTitle();
addUserList(users);
// Rotate
handleRotateOnUserListInGroup();
setupBackButtonOnUserListInGroup(isInvite);
setupUserSelectionConfirmButton(isInvite);
updateUIOnUserListInGroup();
}
);
};
var updateTitle = function () {
let memberSelectTitle = getLocalizedString("userSearch");
$(".titleRoomName").text(memberSelectTitle);
};
var addUserList = function (users) {
users.forEach(function (user) {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
user.profileImagePath = CHAT.getProfileImgUrl(user.profileImagePath);
// クリックするとactive クラスを与え、チェック表示を出させる。
let obj = activateCheckUser(
user.loginId,
user.shopMemberId,
user.profileImagePath
);
let findObj = CHAT.globalSelectedUserList.find(function (selectedUser) {
return selectedUser.loginId == user.loginId;
});
if (findObj) {
$(obj).find(".userCheckBox").toggleClass("active");
}
$("#user_list").append(obj);
});
};
var renderUser = function (template, userID, profileImagePath, userName) {
return Mustache.render(template, {
id: userID,
profileImage: profileImagePath,
name: userName,
});
};
var activateCheckUser = function (loginID, shopMemberID, profileImagePath) {
const template = $("#user-template").html();
let html = renderUser(template, shopMemberID, profileImagePath, loginID);
return $(jQuery.parseHTML(html)).on("click", function () {
if ($(this).find(".userCheckBox.active").length > 0) {
// remove
CHAT.globalSelectedUserList = filterRemovedUser(loginID);
} else {
// add
addSelectedUser(loginID, shopMemberID, profileImagePath);
}
$(this).find(".userCheckBox").toggleClass("active");
updateUserSelectionLength();
});
};
var filterRemovedUser = function (userID) {
return CHAT.globalSelectedUserList.filter(function (element) {
return userID != element.loginId;
});
};
var addSelectedUser = function (loginID, shopMemberID, profileImagePath) {
CHAT.globalSelectedUserList.push({
loginId: loginID,
shopMemberId: shopMemberID,
profileImagePath: profileImagePath,
});
};
var handleRotateOnUserListInGroup = function () {
if (CHAT_UI.isLandscapeMode()) {
$(".user_list").addClass("col-6").removeClass("col-12");
$(".squareBoxContent span").addClass("landscape_span");
}
};
var setupBackButtonOnUserListInGroup = function (isInvite) {
const backButton = $("#backButton");
backButton.off().on("click", function () {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
socket.emit("getGroupList", isInvite);
});
backButton.show();
};
var setupUserSelectionConfirmButton = function (isInvite) {
const userSelectionConfirmButton = $("#userSelectionConfirmBtn");
userSelectionConfirmButton.off().on("click", function () {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
CHAT_UI.setConfirmButtonEvent(isInvite);
});
userSelectionConfirmButton.show();
};
var updateUIOnUserListInGroup = function () {
$(".roomListIcon, .chatRoomIcon").hide();
$(".userCheckBox").show();
$("#pills-user-tab").tab("show");
};
public_new/js/chat-websocket.js
...@@ -3,6 +3,10 @@ var socket; ...@@ -3,6 +3,10 @@ var socket;
// 名前空間 // 名前空間
var CHAT_SOCKET = {}; var CHAT_SOCKET = {};
includeJs("./js/chat-websocket-message.js");
includeJs("./js/chat-websocket-refresh-group-list.js");
includeJs("./js/chat-websocket-refresh-user-list-in-group.js");
CHAT_SOCKET.socketCheck = function () { CHAT_SOCKET.socketCheck = function () {
if (socket == null || socket.disconnected) { if (socket == null || socket.disconnected) {
window.location.reload(); window.location.reload();
...@@ -22,272 +26,67 @@ CHAT_SOCKET.connectSocket = function () { ...@@ -22,272 +26,67 @@ CHAT_SOCKET.connectSocket = function () {
} }
}; };
/* ---------------------------------------------------
* Socket Connect/Disconnectc
* --------------------------------------------------- */
function setSocketAction() { function setSocketAction() {
socket.on("connect", function () { /* ---------------------------------------------------
* Socket Connect/Disconnect
* --------------------------------------------------- */
bindOnConnect();
bindOnDisconnect();
bindOnConnectError();
/* ---------------------------------------------------
* Chat Room List Tab
* --------------------------------------------------- */
bindOnNewMessage();
bindOnNewNotification();
bindOnRefreshGroupList();
bindOnRefreshUserListInGroup();
/* ---------------------------------------------------
/* Show Error Log
/* --------------------------------------------------- */
bindOnShowServerError();
bindOnRetryJoinProcess();
}
var bindOnConnect = function () {
socket.on(SOCKET_KEY.CONNECT, function () {
// socketが接続されたらチャット画面で画面を更新する // socketが接続されたらチャット画面で画面を更新する
$(".overlay").removeClass("active undismissable"); $(".overlay").removeClass("active undismissable");
// loadingIndicatorを表示 // loadingIndicatorを表示
CHAT_UI.showLoadingIndicator(); CHAT_UI.showLoadingIndicator();
// チャットルームに入場する際、sid, loginId, shopName, roomId, roomNameの情報を取得しNodeJsに渡す requestLoginInfo();
if (CHAT_UTIL.isIOS()) {
webkit.messageHandlers.loginInfoRequestMessageHandlerId.postMessage({});
} else if (CHAT_UTIL.isAndroid()) {
android.getLoginParameter();
}
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
}); });
};
var requestLoginInfo = function () {
// チャットルームに入場する際、sid, loginId, shopName, roomId, roomNameの情報を取得しNodeJsに渡す
if (CHAT_UTIL.isIOS()) {
webkit.messageHandlers.loginInfoRequestMessageHandlerId.postMessage({});
} else if (CHAT_UTIL.isAndroid()) {
android.getLoginParameter();
}
};
socket.on("disconnect", function () { var bindOnDisconnect = function () {
socket.on(SOCKET_KEY.DISCONNECT, function () {
//socketが切断されたら黒画面で画面を更新する //socketが切断されたら黒画面で画面を更新する
$(".overlay").addClass("active undismissable"); $(".overlay").addClass("active undismissable");
//alert('Disconnected from the server');
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
}); });
};
socket.on("connect_error", function () { var bindOnConnectError = function () {
socket.on(SOCKET_KEY.CONNECT_ERROR, function () {
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
}); });
};
/* ---------------------------------------------------------------------- var bindOnNewNotification = function () {
*
* Chat Room List Tab
*
* ---------------------------------------------------------------------- */
// Update Room List
//TODO APIの連動が終わったら削除予定
/*socket.on('refreshRoomList', function(rooms, activeRoomId = null){
CHAT.globalIsInvite = false;
// #36146に対応
let keywordSearchMode = false;
if ($('#room-search').val().length > 0) {
keywordSearchMode = true;
}
$('#room_list').html('');
let roomListTitle = getLocalizedString("roomListTitle");
$('.titleRoomName').text(roomListTitle);
if (rooms.length === 0) {
// #36146に対応
// 検索結果がない場合のメッセージを追加
if (!keywordSearchMode) {
let emptyListString = getLocalizedString("roomListEmptyString")
$('#room_list').append(`<center class="text-secondary">${emptyListString}</center>`);
} else {
let emptyListString = getLocalizedString("searchRoomListEmptyString")
$('#room_list').append(`<center class="text-secondary">${emptyListString}</center>`);
}
}
// チャットルームの様式を読み込む
const template = $('#room-template').html();
rooms.forEach( function(room) {
room.profileImagePath = ASSET_PATH + 'images/user-profile.png'
if (room.message) {
room.message = room.message.toString()
} else {
room.message = getLocalizedString("noMessages")
}
let html = Mustache.render(template, {
roomName: room.roomName,
roomId: room.roomId,
profileImage: room.profileImagePath,
active: activeRoomId === room.roomId ? 'active_chat' : null, // 現在、入っているルームだとhilight表示
lastMessage: room.message.includes('<img') ? getLocalizedString("image") : (keywordSearchMode ? `${room.message}${getLocalizedString("searchResult")}` : room.message) ,
time: room.time ? CHAT_UTIL.formatDate(room.time.time).createdAt : '',
unreadMsgCnt: room.unreadCnt,
userCnt: room.userCnt
});
// Click event
let obj = $(jQuery.parseHTML(html)).on('click',function(){
if (activeRoomId === room.roomId) {
// 既存チャットルームをタッチする場合、チャット画面に遷移
$('#pills-chat-tab').tab('show');
} else {
// loadingIndicatorを表示しない
CHAT_UI.showLoadingIndicator();
// 新しいチャットルームをタッチする場合、チャットルームの接続処理を実行
socket.emit('joinRoom', room.roomId, room.roomName, function (){
CHAT.saveRoomInfo(room.roomId, room.roomName);
$('#messages').html('');
// チャットルーム名を変更する
$('.titleRoomName').text(room.roomName).data('roomName', room.roomName);
});
}
});
// チャットルームリストに追加する
$('#room_list').append(obj);
});
// #36146に対応
if(rooms.length > 0) {
if(!keywordSearchMode) {
$(".roomListIcon").show()
$('#roomDeleteButton, #arrangeRooms').show()
} else {
$(".roomListIcon").show()
$('#roomDeleteButton, #arrangeRooms').hide()
}
} else {
if(!keywordSearchMode) {
$(".roomListIcon").hide()
} else {
$(".roomListIcon").show()
$('#roomDeleteButton, #arrangeRooms').hide()
}
}
$('#createChatRoom').show()
// Rotate
if(CHAT_UI.isLandscapeMode()) {
$(".chat_list").removeClass("col-12").addClass("col-6");
}
$("#userSelectionDeleteBtn").hide();
// チャットルームリスト画面に遷移
$('#pills-chatlist-tab').tab('show');
// loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator();
});*/
// New Message
// #36170
socket.on("newMessage", function (message, roomId, roomName) {
console.log(message);
var userMessageTemplate = getTemplate(TemplateURL.USER_MESSAGE);
var myMessageTemplate = getTemplate(TemplateURL.MY_MESSAGE);
var systemMessageTemplate = getTemplate(TemplateURL.SYSTEM_MESSAGE);
var openCollaborationMessageTemplate = getTemplate(
TemplateURL.OPEN_COLLABORATION_MESSAGE
);
let template = userMessageTemplate;
if (message.id === socket.id) {
// ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する
template = myMessageTemplate;
}
let messageTime = CHAT_UTIL.formatDate(message.createdAt);
message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath);
try {
message.text = decodeURIComponent(message.text);
} catch (e) {
message.text = message.text;
}
if (message.text == DATA_MESSAGE_SCHEME + FINISH_ALL_COLLABORATION_SIGNAL) {
$(".collabo_area.start").each(function (index, collaborationMessage) {
$(collaborationMessage).removeClass("start");
$(collaborationMessage).addClass("end");
$(collaborationMessage).addClass("disable");
$(collaborationMessage)
.find(".collaboation_join_button")
.attr("disabled", "disabled");
$(collaborationMessage)
.find(".collaboration_join_message")
.text(getLocalizedString("message_ended"));
});
return;
}
let type;
let collaborationType;
if (message.text.includes(messageSeperator)) {
let text = message.text.split(messageSeperator);
message.text = text[0];
type = text[1];
if (
type == MessageType.COMMUNICATIONSTART ||
type == MessageType.COMMUNICATIONEND
) {
collaborationType = text[2];
var meetingId = 0;
if (
collaborationType ==
CHAT_UTIL.getCollaborationType(CollaborationTypeKey.DOCUMENT)
) {
meetingId = text[3];
}
var userInCollaboration;
if (CHAT_UTIL.isIOS()) {
userInCollaboration = JSON.parse(
CHAT_DB.getUserInfoList(message.userId)
);
} else if (CHAT_UTIL.isAndroid()) {
userInCollaboration = JSON.parse(
android.getUserInfoList(message.userId)
);
}
userInCollaboration.forEach(function (user) {
user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
});
template = openCollaborationMessageTemplate;
let html = Mustache.render(template, {
roomName: roomName,
userCount: 1,
userList: userInCollaboration,
insertDate: message.insertDate,
collaborationType: collaborationType,
isToday: true,
meetingId: meetingId,
createdAtDay: messageTime.createdAtDay,
createdAtTime: messageTime.createdAtTime,
isOtherYear: false,
});
$("#messages").append(html);
} else {
var replacePath = message.text;
replacePath = replacePath.replaceAll(
"?fileName=",
"?sid=" + CHAT.globalLoginParameter.sid + "&fileName="
);
message.text = replacePath;
var messageSender;
if (CHAT_UTIL.isIOS()) {
messageSender = JSON.parse(CHAT_DB.getUserInfoList(message.userId));
} else if (CHAT_UTIL.isAndroid()) {
messageSender = JSON.parse(android.getUserInfoList(message.userId));
}
let html = Mustache.render(template, {
text: message.text,
from: messageSender[0].shopMemberName,
profileImage: message.profileImagePath,
shopMemberId: message.userId,
createdAtDay: messageTime.createdAtDay,
createdAtTime: messageTime.createdAtTime,
isToday: true,
});
// イメージの場合、img tagを追加する
html =
message.text.includes("attachedImages") ||
message.text.includes("attachedVideos")
? CHAT_UTIL.htmlDecode(html)
: html;
$("#messages").append(html);
}
}
// 画像、動画の描画を待ってからスクロール
setTimeout(function () {
CHAT_UI.scrollToBottom();
}, 300);
});
// Notification // Notification
socket.on("newNotification", function (keyword, event) { socket.on(SOCKET_KEY.NEW_NOTIFICATION, function (keyword, event) {
var notificationString = getLocalizedString(event, keyword); const notificationString = getLocalizedString(event, keyword);
$("#messageNotification") $("#messageNotification")
.finish() .finish()
.text(notificationString) .text(notificationString)
...@@ -296,299 +95,10 @@ function setSocketAction() { ...@@ -296,299 +95,10 @@ function setSocketAction() {
.delay(1500) .delay(1500)
.slideUp(); .slideUp();
}); });
};
// 新しいメッセージを受信する場合の処理 var bindOnShowServerError = function () {
// #36170 socket.on(SOCKET_KEY.SHOW_SERVER_ERROR, function (message) {
// socket.on('loadMessages', function(messages, shopMemberId, users, roomId, roomName){
// let jQueryMessages = $('#messages');
// // スクロールの変化を防ぐため以前画面の高さを保存する
// let beforeHeight = jQueryMessages.prop('scrollHeight');
// // メッセージ文字列の生成
// let workVal = "";
// messages.forEach(function(message) {
// let template = $('#message-template').html();
// if (message.shopMemberId == shopMemberId) {
// template = $('#message-template-me').html();
// }
// let messageTime = CHAT_UTIL.formatDate(message.time.time);
//
// if (users != undefined) {
// let user = users.find((user) => user.loginId == message.loginId)
//
// // userProfilePathが使えるpathかをcheckして使えないpathの場合、default画像の経路に変更
// if (user) {
// message.profileImagePath = CHAT.getProfileImgUrl(user.profileImagePath)
// } else {
// message.profileImagePath = CHAT.getProfileImgUrl("")
// }
// } else {
// message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath)
// }
//
// // #36147
// message.message = message.message.toString();
// var replacePath = message.message;
// replacePath = replacePath.replaceAll('/acms',CHAT_SERVER_URL+'/acms');
// message.message = replacePath;
// let html = Mustache.render(template, {
// text: message.message,
// from: message.loginId,
// profileImage: message.profileImagePath,
// createdAtDay: messageTime.createdAtDay,
// createdAtTime: messageTime.createdAtTime
// });
// html = message.message.includes('attachedImages') || message.message.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
// workVal = html + workVal;
// })
//
// // メッセージの画面描画
// jQueryMessages.prepend(workVal);
// if (beforeHeight !== 0) {
// // 追加のメッセージ読み込み時は読み込み前のスクロール位置を維持
// setTimeout(function () {
// jQueryMessages.scrollTop(jQueryMessages.prop('scrollHeight') - beforeHeight);
// }, 400);
// } else {
// // 新規に入室の場合は最下部へスクロール
// CHAT_UI.waitForLoadingImage(jQueryMessages, CHAT_UI.scrollToBottom);
// // タブレット等、画面サイズが大きい場合、スクロール出来なくならないよう追加で10件メッセージを取得
// if ($(window).height() > jQueryMessages.height()) {
// $('#messages').scroll();
// }
// }
//
// // ユーザ削除ボタン表示しない
// $("#userSelectionDeleteBtn").hide();
//
// CHAT_UI.dismissLoadingIndicator();// add some...
//
// // チャットに遷移する
// $('#pills-chat-tab').tab('show');
// });
// Update User List In Room
// サイドバーのユーザーリストアップデート。
/* socket.on('updateUserList', function(users, onlineUsers) {
console.log(users);
console.log(onlineUsers);
if (users.length > 0) {
$('#users').removeData();
$('#users').data(users);
} else {
const data = $('#users').data();
if (data && Object.keys(data).length > 0) {
users = Object.keys(data).map(function(key) {
return data[key];
});
}
}
const ul = $('<ul/>', {class: 'list-unstyled components'});
// ユーザーリストを入れる前にユーザー招待ボタンを入れてくれる。
let inviteString = getLocalizedString("inviteUsersButton")
ul.append($('<li/>').append(`<a>${inviteString} <i class='fa fa-user-plus'><i/></a>`).on('click', function(event) {
$('#dismiss').click();
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
let isInvite = true;
CHAT.globalIsInvite = isInvite;
socket.emit('getGroupList', isInvite);
}));
// ユーザーリストを入れる
users.forEach(function(user) {
let li = $('<li/>');
let a = $('<a/>').text(user);
if (onlineUsers.includes(user)) {
// 接続されているユーザにバッジを付ける。
a.append($('<span/>',{class:'badge badge-success'}).text('online'));
}
li.append(a);
ul.append(li);
});
$('#users').html(ul);
});*/
// Update Group List(Invite)
socket.on("refreshGroupList", function (groups, isInvite) {
$("#group_list").html("");
const template = $("#group-template").html();
if (groups.length === 0) {
$("#group_list").append(
'<center class="text-secondary">' +
getLocalizedString(everyoneIsHere) +
"</center>"
);
}
// グループ名と人数を表記する。
groups.forEach(function (group) {
let html = Mustache.render(template, {
name: group.groupName,
info: group.memberCnt + getLocalizedString("people"),
});
// グループをクリックすると、該当グループのユーザーリストを読み込むようにイベントを与える
let obj = $(jQuery.parseHTML(html)).on("click", function () {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
socket.emit("getUserListInGroup", group.groupId, isInvite);
$("#groupName").text(group.groupName);
});
$("#group_list").append(obj);
});
// Rotate
if (CHAT_UI.isLandscapeMode()) {
$(".group_list").addClass("col-6").removeClass("col-12");
}
// Set Title
let memberSelectTitle = getLocalizedString("groupSearch");
$("#pills-group-tab").tab("show");
$("#backButton").show();
if (isInvite) {
$(".titleRoomName").text(memberSelectTitle);
$("#newRoomName, .roomListIcon, .chatRoomIcon").hide();
$("#userSelectionConfirmBtn").show();
$("#userSelectionConfirmBtn")
.off()
.on("click", function () {
CHAT_UI.setConfirmButtonEvent(isInvite);
});
} else {
$(".titleRoomName").text(memberSelectTitle);
$(".roomListIcon, .chatRoomIcon, #newRoomName").hide();
$("#userSelectionConfirmBtn").show();
$("#userSelectionConfirmBtn")
.off()
.on("click", function () {
CHAT_UI.setConfirmButtonEvent(isInvite);
});
}
if (CHAT.globalSelectedUserList.length > 0) {
$("#userSelectionLength").text(CHAT.globalSelectedUserList.length);
} else {
$("#userSelectionLength").text("");
}
$("#backButton")
.off()
.on("click", function () {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
if (isInvite) {
$("#pills-chat-tab").tab("show");
} else {
if (IS_ONLINE == "true") {
android.updateRoomList();
CHAT_UI.refreshRoomList(ChatRoomType.DM);
CHAT_UI.dismissLoadingIndicator();
}
}
});
});
// Update User List(Invite)
// #36170
socket.on("refreshUserListInGroup", function (users, groupId, isInvite) {
$("#user_list").html("");
const template = $("#user-template").html();
// Set Title
let memberSelectTitle = getLocalizedString("userSearch");
$(".titleRoomName").text(memberSelectTitle);
users.forEach(function (user) {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
user.profileImagePath = CHAT.getProfileImgUrl(user.profileImagePath);
let html = Mustache.render(template, {
id: user.shopMemberId,
profileImage: user.profileImagePath,
name: user.loginId,
});
// クリックするとactive クラスを与え、チェック表示を出させる。
let obj = $(jQuery.parseHTML(html)).on("click", function () {
if ($(this).find(".userCheckBox.active").length > 0) {
// remove
CHAT.globalSelectedUserList = CHAT.globalSelectedUserList.filter(
function (element) {
return user.loginId != element.loginId;
}
);
} else {
// add
CHAT.globalSelectedUserList.push({
loginId: user.loginId,
shopMemberId: user.shopMemberId,
profileImagePath: user.profileImagePath,
});
}
$(this).find(".userCheckBox").toggleClass("active");
if (CHAT.globalSelectedUserList.length > 0) {
$("#userSelectionLength").text(CHAT.globalSelectedUserList.length);
} else {
$("#userSelectionLength").text("");
}
});
let findObj = CHAT.globalSelectedUserList.find(function (selectedUser) {
return selectedUser.loginId == user.loginId;
});
if (findObj) {
$(obj).find(".userCheckBox").toggleClass("active");
}
$("#user_list").append(obj);
});
$(".userCheckBox").show();
// Rotate
if (CHAT_UI.isLandscapeMode()) {
$(".user_list").addClass("col-6").removeClass("col-12");
$(".squareBoxContent span").addClass("landscape_span");
}
$("#backButton")
.off()
.on("click", function () {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
socket.emit("getGroupList", isInvite);
});
$("#userSelectionConfirmBtn")
.off()
.on("click", function () {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
CHAT_UI.setConfirmButtonEvent(isInvite);
});
$("#backButton").show();
$(".roomListIcon, .chatRoomIcon").hide();
$("#userSelectionConfirmBtn").show();
$(".userCheckBox").show();
$("#pills-user-tab").tab("show");
});
/* ---------------------------------------------------------------------- */
/* Show Error Log */
/* ---------------------------------------------------------------------- */
socket.on("showServerError", function (message) {
// #36174
// #36215 // #36215
if (message.includes("SC_FORBIDDEN")) { if (message.includes("SC_FORBIDDEN")) {
alert("SC_FORBIDDEN"); alert("SC_FORBIDDEN");
...@@ -616,47 +126,59 @@ function setSocketAction() { ...@@ -616,47 +126,59 @@ function setSocketAction() {
CHAT.saveRoomInfo(); CHAT.saveRoomInfo();
} }
}); });
};
// server's request : user info (retry join) var bindOnRetryJoinProcess = function () {
socket.on("retryJoinProcess", () => { socket.on(SOCKET_KEY.RETRY_JOIN_PROCESS, function () {
var ua = window.navigator.userAgent.toLowerCase(); var ua = window.navigator.userAgent.toLowerCase();
//if ((ua.indexOf('iphone') > 0 || ua.indexOf('ipad') > 0) && ua.indexOf("safari") == -1) {
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
// iosでの場合
webkit.messageHandlers.loginInfoRequestMessageHandlerId.postMessage({}); webkit.messageHandlers.loginInfoRequestMessageHandlerId.postMessage({});
// } else if (ua.indexOf('android') > 0 && ua.indexOf('linux') == -1){
} else if (CHAT_UTIL.isAndroid()) { } else if (CHAT_UTIL.isAndroid()) {
// androidでの場合
android.getLoginParameter(); android.getLoginParameter();
} else { } else {
CHAT_UI.htmlElementTextInitialize("ko"); CHAT_UI.htmlElementTextInitialize("ko");
// webでのsocket connect // webでのsocket connect
socket.emit("join", params, function (err) { emitJoin();
if (err) { }
// #36174 });
$("#customAlertTitle").text(err); };
$("#customAlertOk").text(getLocalizedString("yesTitle"));
$("#customAlert") var emitJoin = function () {
.appendTo("body") socket.emit(SOCKET_KEY.JOIN, params, function (err) {
.modal({ if (err) {
backdrop: "static", errorHandlingForEmitJoin();
keyboard: false, CHAT_UI.dismissLoadingIndicator();
}) return;
.on("click", "#customAlertOk", function (e) {});
} else {
if (params.roomName != undefined) {
$(".titleRoomName")
.text(params.roomName)
.data("roomName", params.roomName);
} else {
let roomListTitle = getLocalizedString("roomListTitle");
$(".titleRoomName").text(roomListTitle);
}
}
// loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator();
});
} }
updateRoomName(params.roomName);
// loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator();
}); });
} };
var errorHandlingForEmitJoin = function () {
const positiveButton = $("#customAlertOk");
// #36174
$("#customAlertTitle").text(err);
positiveButton.text(getLocalizedString("yesTitle"));
$("#customAlert")
.appendTo("body")
.modal({
backdrop: "static",
keyboard: false,
})
.on("click", "#customAlertOk", function (e) {});
};
var updateRoomName = function (roomName) {
const titleRoomName = $(".titleRoomName");
if (roomName != undefined) {
titleRoomName.text(roomName).data("roomName", roomName);
} else {
let roomListTitle = getLocalizedString("roomListTitle");
titleRoomName.text(roomListTitle);
}
};
public_new/js/constant.js
...@@ -97,3 +97,16 @@ const TemplateURL = { ...@@ -97,3 +97,16 @@ const TemplateURL = {
ADD_USER_GROUP_PATH_IN_COLLABORATION: ADD_USER_GROUP_PATH_IN_COLLABORATION:
"./template/template_add_user_group_path_in_collaboration.html", "./template/template_add_user_group_path_in_collaboration.html",
}; };
const SOCKET_KEY = {
CONNECT: "connect",
DISCONNECT: "disconnect",
CONNECT_ERROR: "connect_error",
NEW_MESSAGE: "newMessage",
NEW_NOTIFICATION: "newNotification",
REFRESH_GROUPLIST: "refreshGroupList",
REFRESH_USERLIST_INGROUP: "refreshUserListInGroup",
SHOW_SERVER_ERROR: "showServerError",
RETRY_JOIN_PROCESS: "retryJoinProcess",
JOIN: "join"
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment