Skip to content

C
chat_webview
Commit 13a9186f by Lee Munkyeong
Options

CHATルームUI

parent f4a505f0
Showing with 304 additions and 336 deletions
public_new/chat_room.html
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<link rel="stylesheet" href="./css/chat_room_footer.css"> <link rel="stylesheet" href="./css/chat_room_footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body style="background: #F3F3F3;">
<!-- ナビメニュー --> <!-- ナビメニュー -->
<nav> <nav>
<div class="chat_room_src_form none"> <div class="chat_room_src_form none">
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
</div> </div>
<div class="col-4 p-0"> <div class="col-4 p-0">
<div class="nav-item p-0"> <div class="nav-item p-0">
<h1 class="nav-ttl">ルーム名ルーム名ルーム名ルーム名</h1> <h1 class="nav-ttl" id="roomTitle"></h1>
</div> </div>
</div> </div>
<div class="col-4 pl-0"> <div class="col-4 pl-0">
...@@ -48,76 +48,7 @@ ...@@ -48,76 +48,7 @@
<!-- コンテンツ --> <!-- コンテンツ -->
<main id="chat_room"> <main id="chat_room">
<div id="user_list" class="user_list d-flex flex-row"> <div id="user_list" class="user_list d-flex flex-row">
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal1">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="img/noImage.png" alt="プロフィール画像">
</div>
<span>名前名前名前名前名前名前名前名前</span>
</div>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal1">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="img/noImage.png" alt="プロフィール画像">
</div>
<span>名前名前名前名前名前名前名前名前</span>
</div>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal1">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="img/noImage.png" alt="プロフィール画像">
</div>
<span>名前名前名前名前名前名前名前名前</span>
</div>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal1">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="img/noImage.png" alt="プロフィール画像">
</div>
<span>名前名前名前名前名前名前名前名前</span>
</div>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal1">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="img/noImage.png" alt="プロフィール画像">
</div>
<span>名前名前名前名前名前名前名前名前</span>
</div>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal1">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="img/noImage.png" alt="プロフィール画像">
</div>
<span>名前名前名前名前名前名前名前名前</span>
</div>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal1">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="img/noImage.png" alt="プロフィール画像">
</div>
<span>名前名前名前名前名前名前名前名前</span>
</div>
</a>
</div>
</div> </div>
<!-- フィルター --> <!-- フィルター -->
...@@ -164,189 +95,7 @@ ...@@ -164,189 +95,7 @@
<!-- チャット内容 --> <!-- チャット内容 -->
<div class="room_container"> <div class="room_container">
<div class="room_contents scroll"> <div class="room_contents scroll">
<div id="messages"></div>
<div class="sys_msg text-center">
チャット開始<br>
参加ユーザ<br>
OOさん<br>
OOさん<br>
OOさん
</div>
<!-- 相手の吹き出し -->
<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">名前名前名前名前</div>
<div class="text">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</div>
</div>
<div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div>
<div class="read d-flex align-items-end"><span>既読</span></div>
</div>
<div class="sys_msg text-center">2021/03/04</div>
<!-- 自分の吹き出し -->
<div class="room_right">
<div class="text">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</div>
<div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div>
<div class="read d-flex align-items-end"><span>既読</span></div>
</div>
<div class="sys_msg text-center">OOさんが参加しました</div>
<div class="sys_msg text-center">OOさんがルームを非表示にしました</div>
<!-- 相手の吹き出し -->
<div class="room_left">
<figure>
<img src="img/noImage.png" alt="プロフィール画像">
</figure>
<div class="room_left-text">
<div class="name">名前名前名前名前</div>
<div class="text">ここにテキストが入ります。</div>
</div>
<div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div>
<div class="unread d-flex align-items-end"><span>10</span></div>
</div>
<!-- 相手の吹き出し -->
<div class="room_left">
<figure>
<img src="img/noImage.png" alt="プロフィール画像">
</figure>
<div class="room_left-text">
<div class="name">名前名前名前名前</div>
<div class="text">ここにテキストが入ります。</div>
</div>
<div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div>
<div class="read d-flex align-items-end"><span>既読</span></div>
</div>
<!-- 相手の吹き出し -->
<div class="room_left">
<figure>
<img src="img/noImage.png" alt="プロフィール画像">
</figure>
<div class="room_left-text">
<div class="name">名前名前名前名前</div>
<div class="img_wrap">
<img src="img/sample.jpg" alt="画像">
</div>
</div>
<div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div>
<div class="read d-flex align-items-end"><span>既読</span></div>
</div>
<!-- 自分の吹き出し -->
<div class="room_right">
<div class="text">ここにテキストが入ります。</div>
<div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div>
<div class="unread d-flex align-items-end"><span>999+</span></div>
</div>
<!-- 自分の吹き出し -->
<div class="room_right">
<div class="img_wrap">
<img src="img/sample.jpg" alt="画像">
</div>
<div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div>
<div class="read d-flex align-items-end"><span>既読</span></div>
</div>
<!-- 相手の吹き出し -->
<div class="room_left">
<figure>
<img src="img/noImage.png" alt="プロフィール画像">
</figure>
<div class="room_left-text">
<div class="name">名前名前名前名前</div>
<div class="text">ここにテキストが入ります。</div>
</div>
<div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div>
<div class="read d-flex align-items-end"><span>既読</span></div>
</div>
<!-- 相手の吹き出し -->
<div class="room_left">
<figure>
<img src="img/noImage.png" alt="プロフィール画像">
</figure>
<div class="room_left-text latest">
<div class="name">名前名前名前名前</div>
<div class="text">ここにテキストが入ります。</div>
</div>
<div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div>
<div class="read d-flex align-items-end"><span>既読</span></div>
</div>
<!-- 通話 -->
<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>
<!-- 通話 -->
<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>
</div> </div>
</div> </div>
</main> </main>
...@@ -357,17 +106,24 @@ ...@@ -357,17 +106,24 @@
<div class="footer-wrap d-flex flex-column"> <div class="footer-wrap d-flex flex-column">
<div class="footer_content_t"> <div class="footer_content_t">
<div class="d-flex flex-row h-100"> <div class="d-flex flex-row h-100">
<div class="footer_item"> <div class="footer_item attach_file">
<a href="#"> <a href="#">
<img src="icon/icon_camera.png" alt="写真アイコン"> <img src="icon/icon_camera.png" alt="写真アイコン">
</a> </a>
</div> </div>
<div class="footer_item"> <div class="footer_item attach_file">
<a href="#"> <a href="#">
<img src="icon/icon_videocam.png" alt="動画アイコン"> <img src="icon/icon_videocam.png" alt="動画アイコン">
</a> </a>
</div> </div>
<input type="text" name="message" placeholder="メッセージを入力してください"> <input type="text" name="message" class="message_input_form" placeholder="メッセージを入力してください">
<button type="button" name="button" class="message_input_send none" style="text-align: center;
height: 45px;
width: 100px;
background: #0070CA;
color: #fff;
border: none;
font-size: 18px;">送信</button>
</div> </div>
</div> </div>
<!-- フッター下 --> <!-- フッター下 -->
...@@ -407,15 +163,57 @@ ...@@ -407,15 +163,57 @@
</div> </div>
</div> </div>
</footer> </footer>
<div id="loadingArea"></div>
<div id="userProfileModal"></div>
<div id="chatMenuModal"></div>
<!-- メニューモーダル --> <!-- メニューモーダル -->
<!--#include virtual="modal_chat_menu.html" --> <!--#include virtual="modal_chat_menu.html" -->
<!-- プロフィールモーダル --> <!-- プロフィールモーダル -->
<!--#include virtual="modal_chat_profile.html" --> <!--#include virtual="modal_chat_profile.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/socket.io.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/chat.js"></script> <script src="./js/libs/locale/ko.js" charset="UTF-8"></script>
<script src="./js/common.js"></script> <script src="./js/libs/locale/ja.js" charset="UTF-8"></script>
<script src="./js/libs/mustache.min.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/common.js"></script>
<script src="./js/language.js"></script>
<script src="./js/language_ko.js" charset="UTF-8"></script>
<script src="./js/language_ja.js" charset="UTF-8"></script>
<script src="./js/language_en.js" charset="UTF-8"></script>
<script src="./js/constant.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/chat-ui.js"></script>
<script src="./js/chat-util.js"></script>
<script src="./js/chat-db.js"></script>
<script src="./js/chat-websocket.js"></script>
<script>
String.prototype.replaceAll = function(org, dest) {
return this.split(org).join(dest);
}
let CHAT_SERVER_URL = '';
let CMS_SERVER_URL = '';
let ASSET_PATH = './';
let PLATFORM = '';
let IS_MOBILE = true;
let IS_ONLINE = false;
$("#chatMenuModal").load("./modal_chat_menu.html");
android.getLoginParameter();
android.getGlobalParameter();
function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
CHAT_SERVER_URL = chatServerUrl;
CMS_SERVER_URL = cmsServerUrl;
PLATFORM = platform;
IS_MOBILE = isMobile;
IS_ONLINE = isOnline;
CHAT_UI.loadMessages(CHAT.globalLoginParameter.roomId, CHAT.globalLoginParameter.roomName);
};
</script>
</body> </body>
</html> </html>
public_new/css/chat.css
...@@ -675,6 +675,17 @@ input[name="tab_item"] { ...@@ -675,6 +675,17 @@ input[name="tab_item"] {
background: #5B666F; 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 *************************/ /**************************** modal *************************/
/* メニューモーダル */ /* メニューモーダル */
.menu_modal .modal-body ul { .menu_modal .modal-body ul {
......
public_new/js/chat-db.js
...@@ -105,3 +105,12 @@ CHAT_DB.getGroupByName = function(groupName) { ...@@ -105,3 +105,12 @@ CHAT_DB.getGroupByName = function(groupName) {
return JSON.parse(android.getGroupByName(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) { ...@@ -1100,79 +1100,123 @@ CHAT_UI.refreshRoomList = function(roomType) {
}; };
CHAT_UI.joinRoom = function(roomId,roomName) { 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') { if (IS_ONLINE == 'true') {
CHAT_SOCKET.connectSocket();
console.log('loadMessages] isOnline--');
android.updateMessages(roomId); android.updateMessages(roomId);
socket.emit('joinRoom', roomId, roomName, function() { socket.emit('joinRoom', roomId, roomName, function() {
console.log('loadMessages] Seccess Emit Soket (joinRoom)');
}); });
} }
var messages = CHAT_DB.getMessages(roomId); 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) { $('#roomTitle').text(roomName).data('roomName', roomName);
$('#messages').html('');
$('.titleRoomName').text(roomName).data('roomName', roomName);
$('#pills-chat-tab').tab('show');
$("#message-search").attr("placeholder", getLocalizedString("chat_search_placeholder"));
let jQueryMessages = $('#messages'); let jQueryMessages = $('#messages');
// スクロールの変化を防ぐため以前画面の高さを保存する // スクロールの変化を防ぐため以前画面の高さを保存する
let beforeHeight = jQueryMessages.prop('scrollHeight'); let beforeHeight = jQueryMessages.prop('scrollHeight');
// メッセージ文字列の生成 // メッセージ文字列の生成
let workVal = ""; let workVal = "";
messages.forEach(function(message) { var userTemplate;
let template = $('#message-template').html(); $.get({ url: "./template/template_user_list.html", async: false }
if (message.selfFlg == 1) { , function(text) {
template = $('#message-template-me').html(); userTemplate = text;
} });
let messageTime = CHAT_UTIL.formatDate(message.insertDate); 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) { usersInRoom.forEach(function(user) {
message.profileImagePath = CHAT.getProfileImgUrl(message.profileUrl) user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
} else { });
message.profileImagePath = CHAT.getProfileImgUrl("") let html = Mustache.render(topUserListTemplate, {
} userList: usersInRoom
});
let obj = jQuery.parseHTML(html);
$('#user_list').append(obj);
// #36147 messages.forEach(function(message) {
message.message = message.message.toString(); console.log(message);
var replacePath = message.message;
replacePath = replacePath.replaceAll('/acms',CHAT_SERVER_URL+'/acms'); let template = userMessageTemplate;
message.message = replacePath; if (message.shopMemberId == CHAT.globalLoginParameter.shopMemberId) {
let html = Mustache.render(template, { template = myMessageTemplate;
text: message.message, }
from: message.loginId, if (message.messageType == messageType.SYSTEM) {
shopMemberId: message.shopMemberId, template = systemMessageTemplate;
profileImage: message.profileImagePath, }
createdAtDay: messageTime.createdAtDay, let messageTime = CHAT_UTIL.formatDate(message.insertDate);
createdAtTime: messageTime.createdAtTime // ユーザの様式を読み込む
});
html = message.message.includes('attachedImages') || message.message.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
workVal = html + workVal;
})
// メッセージの画面描画 if (message.profileUrl) {
jQueryMessages.prepend(workVal); message.profileImagePath = CHAT.getProfileImgUrl(message.profileUrl)
if (beforeHeight !== 0) {
// 追加のメッセージ読み込み時は読み込み前のスクロール位置を維持
setTimeout(function() {
jQueryMessages.scrollTop(jQueryMessages.prop('scrollHeight') - beforeHeight);
}, 400);
} else { } else {
// 新規に入室の場合は最下部へスクロール message.profileImagePath = CHAT.getProfileImgUrl("")
CHAT_UI.waitForLoadingImage(jQueryMessages, CHAT_UI.scrollToBottom);
// タブレット等、画面サイズが大きい場合、スクロール出来なくならないよう追加で10件メッセージを取得
if ($(window).height() > jQueryMessages.height()) {
$('#messages').scroll();
}
} }
// ユーザ削除ボタン表示しない // #36147
$("#userSelectionDeleteBtn").hide(); 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; ...@@ -4,25 +4,16 @@ var socket;
var CHAT_SOCKET = {}; var CHAT_SOCKET = {};
CHAT_SOCKET.connectSocket = function () { CHAT_SOCKET.connectSocket = function () {
CHAT_UI.dismissLoadingIndicator();
if (IS_ONLINE == 'true') { if (IS_ONLINE == 'true') {
socket = io(CHAT_SERVER_URL); socket = io(CHAT_SERVER_URL);
console.log(socket);
setSocketAction(); setSocketAction();
android.updateRoomList();
CHAT_UI.refreshRoomList(chatRoomType.DM);
CHAT_UI.dismissLoadingIndicator();
$('#createChatRoom').show();
} else { } else {
//オフラインの場合、DBからルーム一覧を表示。 //オフラインの場合、DBからルーム一覧を表示。
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
//TODO IOSの場合 //TODO IOSの場合
} else if (CHAT_UTIL.isAndroid()) { } 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 () { ...@@ -280,7 +271,10 @@ function setSocketAction () {
// Update User List In Room // 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) { if (users.length > 0) {
$('#users').removeData(); $('#users').removeData();
$('#users').data(users); $('#users').data(users);
...@@ -318,7 +312,7 @@ function setSocketAction () { ...@@ -318,7 +312,7 @@ function setSocketAction () {
ul.append(li); ul.append(li);
}); });
$('#users').html(ul); $('#users').html(ul);
}); });*/
// Update Group List(Invite) // Update Group List(Invite)
socket.on('refreshGroupList', function(groups, isInvite) { socket.on('refreshGroupList', function(groups, isInvite) {
......
public_new/js/chat.js
...@@ -215,13 +215,14 @@ CHAT.createThumbnailAndUpload = function(sourceImage, callback) { ...@@ -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() var loginParam = new Object()
loginParam.sid = sid; loginParam.sid = sid;
loginParam.loginId = loginId; loginParam.loginId = loginId;
loginParam.shopName = shopName; loginParam.shopName = shopName;
loginParam.roomId = roomId; loginParam.roomId = roomId;
loginParam.roomName = roomName; loginParam.roomName = roomName;
loginParam.shopMemberId = shopMemberId;
CHAT.globalLoginParameter = loginParam; CHAT.globalLoginParameter = loginParam;
......
public_new/js/common.js
...@@ -50,4 +50,16 @@ $(function() { ...@@ -50,4 +50,16 @@ $(function() {
$('.overlay_src_msg').empty(); $('.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"> <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 d-flex flex-row align-items-center">
<div class="chat_item_l"> <div class="chat_item_l">
<div class="thubnail{{thumbnailCount}} thubnail"> <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