Skip to content

C
chat_webview
Commit 13a9186f by Lee Munkyeong
Options

CHATルームUI

parent f4a505f0
Showing with 242 additions and 72 deletions
public_new/css/chat.css
......@@ -675,6 +675,17 @@ input[name="tab_item"] {
background: #5B666F;
}
.message_input_send {
margin: auto 10px;
text-align: center;
height: 45px;
width: 90px;
background: #0070CA;
color: #fff;
border: none;
font-size: 18px;
}
/**************************** modal *************************/
/* メニューモーダル */
.menu_modal .modal-body ul {
......
public_new/js/chat-db.js
......@@ -105,3 +105,12 @@ CHAT_DB.getGroupByName = function(groupName) {
return JSON.parse(android.getGroupByName(groupName));
}
};
CHAT_DB.getUsersInRoom = function(roomId) {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getUsersInRoom(roomId));
}
}
public_new/js/chat-ui.js
......@@ -1100,79 +1100,123 @@ CHAT_UI.refreshRoomList = function(roomType) {
};
CHAT_UI.joinRoom = function(roomId,roomName) {
//native側に入場対象のroomId,roomNameを保存。(ルーム詳細画面初期化の時に使用。)
android.joinRoom(roomId,roomName);
};
CHAT_UI.loadMessages = function(roomId, roomName) {
console.log('loadMessages] START--');
console.log(CHAT.globalLoginParameter);
if (IS_ONLINE == 'true') {
CHAT_SOCKET.connectSocket();
console.log('loadMessages] isOnline--');
android.updateMessages(roomId);
socket.emit('joinRoom', roomId, roomName, function() {
console.log('loadMessages] Seccess Emit Soket (joinRoom)');
});
}
var messages = CHAT_DB.getMessages(roomId);
CHAT_UI.loadMessages(messages, roomId, roomName)
};
var usersInRoom = CHAT_DB.getUsersInRoom(roomId);
console.log(usersInRoom);
CHAT_UI.loadMessages = function(messages, roomId, roomName) {
$('#messages').html('');
$('.titleRoomName').text(roomName).data('roomName', roomName);
$('#pills-chat-tab').tab('show');
$("#message-search").attr("placeholder", getLocalizedString("chat_search_placeholder"));
$('#roomTitle').text(roomName).data('roomName', roomName);
let jQueryMessages = $('#messages');
// スクロールの変化を防ぐため以前画面の高さを保存する
let beforeHeight = jQueryMessages.prop('scrollHeight');
// メッセージ文字列の生成
let workVal = "";
messages.forEach(function(message) {
let template = $('#message-template').html();
if (message.selfFlg == 1) {
template = $('#message-template-me').html();
}
let messageTime = CHAT_UTIL.formatDate(message.insertDate);
// スクロールの変化を防ぐため以前画面の高さを保存する
let beforeHeight = jQueryMessages.prop('scrollHeight');
// メッセージ文字列の生成
let workVal = "";
var userTemplate;
$.get({ url: "./template/template_user_list.html", async: false }
, function(text) {
userTemplate = text;
});
var userMessageTemplate;
$.get({ url: "./template/template_user_message.html", async: false }
, function(text) {
userMessageTemplate = text;
});
var myMessageTemplate;
$.get({ url: "./template/template_my_message.html", async: false }
, function(text) {
myMessageTemplate = text;
});
var systemMessageTemplate;
$.get({ url: "./template/template_system_message.html", async: false }
, function(text) {
systemMessageTemplate = text;
});
var topUserListTemplate;
$.get({ url: "./template/template_chatroom_user_list.html", async: false }
, function(text) {
topUserListTemplate = text;
});
if (message.profileUrl) {
message.profileImagePath = CHAT.getProfileImgUrl(message.profileUrl)
} else {
message.profileImagePath = CHAT.getProfileImgUrl("")
}
usersInRoom.forEach(function(user) {
user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
});
let html = Mustache.render(topUserListTemplate, {
userList: usersInRoom
});
let obj = jQuery.parseHTML(html);
$('#user_list').append(obj);
// #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,
shopMemberId: message.shopMemberId,
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;
})
messages.forEach(function(message) {
console.log(message);
let template = userMessageTemplate;
if (message.shopMemberId == CHAT.globalLoginParameter.shopMemberId) {
template = myMessageTemplate;
}
if (message.messageType == messageType.SYSTEM) {
template = systemMessageTemplate;
}
let messageTime = CHAT_UTIL.formatDate(message.insertDate);
// ユーザの様式を読み込む
// メッセージの画面描画
jQueryMessages.prepend(workVal);
if (beforeHeight !== 0) {
// 追加のメッセージ読み込み時は読み込み前のスクロール位置を維持
setTimeout(function() {
jQueryMessages.scrollTop(jQueryMessages.prop('scrollHeight') - beforeHeight);
}, 400);
if (message.profileUrl) {
message.profileImagePath = CHAT.getProfileImgUrl(message.profileUrl)
} else {
// 新規に入室の場合は最下部へスクロール
CHAT_UI.waitForLoadingImage(jQueryMessages, CHAT_UI.scrollToBottom);
// タブレット等、画面サイズが大きい場合、スクロール出来なくならないよう追加で10件メッセージを取得
if ($(window).height() > jQueryMessages.height()) {
$('#messages').scroll();
}
message.profileImagePath = CHAT.getProfileImgUrl("")
}
// ユーザ削除ボタン表示しない
$("#userSelectionDeleteBtn").hide();
// #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,
shopMemberId: message.shopMemberId,
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;
})
CHAT_UI.dismissLoadingIndicator();// add some...
// メッセージの画面描画
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();
// チャットに遷移する
$('#pills-chat-tab').tab('show');
// チャットに遷移する
$('#pills-chat-tab').tab('show');
};
......
public_new/js/chat-websocket.js
......@@ -4,25 +4,16 @@ var socket;
var CHAT_SOCKET = {};
CHAT_SOCKET.connectSocket = function () {
CHAT_UI.dismissLoadingIndicator();
if (IS_ONLINE == 'true') {
socket = io(CHAT_SERVER_URL);
console.log(socket);
setSocketAction();
android.updateRoomList();
CHAT_UI.refreshRoomList(chatRoomType.DM);
CHAT_UI.dismissLoadingIndicator();
$('#createChatRoom').show();
} else {
//オフラインの場合、DBからルーム一覧を表示。
if (CHAT_UTIL.isIOS()) {
//TODO IOSの場合
} else if (CHAT_UTIL.isAndroid()) {
//$('.overlay').removeClass('active undismissable');
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
CHAT_UI.refreshRoomList(chatRoomType.DM);
CHAT_UI.dismissLoadingIndicator();
$('#createChatRoom').show();
}
}
};
......@@ -280,7 +271,10 @@ function setSocketAction () {
// Update User List In Room
// サイドバーのユーザーリストアップデート。
socket.on('updateUserList', function(users, onlineUsers) {
/* socket.on('updateUserList', function(users, onlineUsers) {
console.log(users);
console.log(onlineUsers);
if (users.length > 0) {
$('#users').removeData();
$('#users').data(users);
......@@ -318,7 +312,7 @@ function setSocketAction () {
ul.append(li);
});
$('#users').html(ul);
});
});*/
// Update Group List(Invite)
socket.on('refreshGroupList', function(groups, isInvite) {
......
public_new/js/chat.js
......@@ -215,13 +215,14 @@ CHAT.createThumbnailAndUpload = function(sourceImage, callback) {
}
// 該当チャットルームに参加するためログイン情報をサーバに渡す
getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomName = undefined, languageCode) {
getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomName = undefined, languageCode, shopMemberId) {
var loginParam = new Object()
loginParam.sid = sid;
loginParam.loginId = loginId;
loginParam.shopName = shopName;
loginParam.roomId = roomId;
loginParam.roomName = roomName;
loginParam.shopMemberId = shopMemberId;
CHAT.globalLoginParameter = loginParam;
......
public_new/js/common.js
......@@ -50,4 +50,16 @@ $(function() {
$('.overlay_src_msg').empty();
});
$('.message_input_form').click(function(){
console.log('ONCLICK---');
$('.message_input_send').removeClass('none');
$('.attach_file').addClass('none');
});
$('.message_input_form').focusout(function(){
console.log('OUTFOCUS---');
$('.message_input_send').addClass('none');
$('.attach_file').removeClass('none');
});
});
public_new/template/template_chatroom_user_list.html 0 → 100644
{{#userList}}
<div class="user_item">
<a href="javascript:return false;" onclick="CHAT_UI.makeNameCard({{shopMemberId}})">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="{{profileUrl}}" onError="this.src='./img/noImage.png'">
</div>
<span>{{shopMemberName}}</span>
</div>
</a>
</div>
{{/userList}}
\ No newline at end of file
public_new/template/template_close_collaboration_message.html 0 → 100644
<!-- 通話 -->
<div class="collabo_area_container">
<!-- 時刻 -->
<div class="collabo_date text-right">
<span>12:23 PM</span>
</div>
<div class="collabo_area disable">
<div class="collabo_desc">
<div class="collabo_room_name d-flex flex-row">
<span>ルーム名ルーム名</span>
<span>の通話</span>
</div>
<div class="d-flex flex-row justify-content-between">
<div class="collabo_user_list d-flex flex-row">
<div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
<div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
<div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
<div class="num"><span>10</span></div>
</div>
<div class="collabo_time">
<span>1:10:20</span>
</div>
</div>
<div class="collabo_btn">
<button type="button" name="button">
<img src="icon/icon_profile_phone.png" alt="通話">
<span>終了しました</span>
</button>
</div>
</div>
</div>
</div>
\ No newline at end of file
public_new/template/template_my_message.html 0 → 100644
<div class="room_right">
<div class="text">{{from}}</div>
<div class="date d-flex flex-column"><span>{{createdAtDay}}</span><span>{{createdAtTime}}</span></div>
<div class="read d-flex align-items-end"><span></span></div>
</div>
\ No newline at end of file
public_new/template/template_open_collaboration_message.html 0 → 100644
<!-- 通話 -->
<div class="collabo_area_container">
<!-- 時刻 -->
<div class="collabo_date text-right">
<span>12:23 PM</span>
</div>
<div class="collabo_area">
<div class="collabo_desc">
<div class="collabo_room_name d-flex flex-row">
<span>ルーム名ルーム名ルーム名ルーム名</span>
<span>の通話</span>
</div>
<div class="d-flex flex-row justify-content-between">
<div class="collabo_user_list d-flex flex-row">
<div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
<div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
<div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
<div class="num"><span>10</span></div>
</div>
<div class="collabo_time">
<span>1:10:20</span>
</div>
</div>
<div class="collabo_btn">
<button type="button" name="button">
<img src="icon/icon_profile_phone.png" alt="通話">
<span>参加する</span>
</button>
</div>
</div>
</div>
</div>
\ No newline at end of file
public_new/template/template_room_list.html
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<a href="#" class="w-100" onclick="CHAT_UI.joinRoom({{roomId}},'{{roomName}}');">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thubnail{{thumbnailCount}} thubnail">
......
public_new/template/template_system_message.html 0 → 100644
<div class="sys_msg text-center">2021/03/04</div>
\ No newline at end of file
public_new/template/template_user_message.html 0 → 100644
<div class="room_left">
<figure>
<a href="#" data-toggle="modal" data-target="#profileModal1"><img src="img/noImage.png" alt="プロフィール画像"></a>
</figure>
<div class="room_left-text">
<div class="name">{{from}}</div>
<div class="text">{{text}}</div>
</div>
<div class="date d-flex flex-column"><span>{{createdAtDay}}</span><span>{{createdAtTime}}</span></div>
<div class="read d-flex align-items-end"><span></span></div>
</div>
\ No newline at end of file
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