Skip to content

C
chat_webview
Commit b994ba6e by Lee Munkyeong
Options

チャット詳細実装

parent 0ce71caa
Showing with 168 additions and 75 deletions
public/js/chat-ui.js
......@@ -131,7 +131,7 @@ $('#room-search').on('input', function(event) {
// 検索結果が有る場合、結果を表示する
socket.emit('roomSearch', encodeURIComponent($('#room-search').val()));
} else {
if (isOnline == 'true') {
if (IS_ONLINE == 'true') {
android.updateRoomList();
CHAT_UI.refreshRoomList();
CHAT_UI.dismissLoadingIndicator();
......@@ -396,7 +396,7 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
CHAT_UI.showLoadingIndicator();
socket.emit('leaveRoom', function() {
CHAT.saveRoomInfo();
if (isOnline == 'true') {
if (IS_ONLINE == 'true') {
android.updateRoomList();
CHAT_UI.refreshRoomList();
CHAT_UI.dismissLoadingIndicator();
......@@ -654,15 +654,16 @@ CHAT_UI.showConfirmView = function(isInvite) {
let newRoomName = CHAT.globalLoginParameter.loginId + ',' + userNameList.join(',');
// ルーム名のURIencodingを行う
const encodedRoomName = encodeURIComponent(newRoomName);
//const encodedRoomName = encodeURIComponent(newRoomName);
//todo android create room api
//android.createChatRoom(type,userIdList,encodedRoomName) need to add joinRoom method and call here as callback ..
android.createChatRoom("1",userIdList.join(','),newRoomName);
socket.emit('createNewRoom', userIdList, encodedRoomName, function(newRoomId) {
/*socket.emit('createNewRoom', userIdList, encodedRoomName, function(newRoomId) {
socket.emit('joinRoom', newRoomId, newRoomName, function () {
CHAT.saveRoomInfo(newRoomId, newRoomName);
$('#messages').html('');
......@@ -670,10 +671,7 @@ CHAT_UI.showConfirmView = function(isInvite) {
$("#userSelectionDeleteBtn").hide();
$('#pills-chat-tab').tab('show');
});
});
});*/
/*socket.on('createNewRoom', (shopMemberIdList, newRoomName, callback) => {
const user = onlineUsers.getUser(socket.id)
......@@ -940,6 +938,9 @@ CHAT_UI.refreshRoomList = function() {
});
// Click event
let obj = $(jQuery.parseHTML(html)).on('click', function() {
let roomId = $(this).data('roomId');
let roomName = $(this).data('roomname');
CHAT_UI.joinRoom(roomId,roomName);
//TODO ルームに入る処理追加必要
});
// チャットルームリストに追加する
......@@ -973,3 +974,91 @@ CHAT_UI.refreshRoomList = function() {
// loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator();
};
CHAT_UI.joinRoom = function(roomId,roomName) {
console.log(roomId);
if (IS_ONLINE == 'true') {
android.updateMessages(roomId);
// socket.emit('joinRoom', roomId, roomName, function() {
// $('#messages').html('');
// $('.titleRoomName').text(roomName).data('roomName', roomName);
// $('#pills-chat-tab').tab('show');
// $("#message-search").attr("placeholder", $("#message-search").attr("placeholder")+getLocalizedString("chat_search_placeholder"));
// });
} else {
}
//var roomInfo = android.getMessages(roomId);
//ui.loadMessages();
};
CHAT_UI.loadMessages = function(messages, shopMemberId, users, roomId, roomName) {
$('#messages').html('');
$('.titleRoomName').text(roomName).data('roomName', roomName);
$('#pills-chat-tab').tab('show');
$("#message-search").attr("placeholder", $("#message-search").attr("placeholder")+getLocalizedString("chat_search_placeholder"));
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');
};
\ No newline at end of file
public/js/chat-websocket.js
......@@ -2,14 +2,17 @@ var socket;
connectSocket(IS_ONLINE);
function connectSocket(isOnline) {
console.log(isOnline)
if (isOnline == 'true') {
socket = io(CHAT_SERVER_URL);
console.log('insOnline');
setSocketAction();
android.updateRoomList();
CHAT_UI.refreshRoomList();
CHAT_UI.dismissLoadingIndicator();
$('#createChatRoom').show();
} else {
console.log('insOffline');
//オフラインの場合、DBからルーム一覧を表示。
if (CHAT_UTIL.isIOS()) {
//TODO IOSの場合
......@@ -211,72 +214,72 @@ function setSocketAction () {
// 新しいメッセージを受信する場合の処理
// #36170
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');
});
// 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
// サイドバーのユーザーリストアップデート。
......
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