Skip to content

C
chat_webview
Commit 13a9186f by Lee Munkyeong
Options

CHATルームUI

parent f4a505f0
Showing with 260 additions and 292 deletions
public_new/chat_room.html
......@@ -13,7 +13,7 @@
<link rel="stylesheet" href="./css/chat_room_footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<body style="background: #F3F3F3;">
<!-- ナビメニュー -->
<nav>
<div class="chat_room_src_form none">
......@@ -33,7 +33,7 @@
</div>
<div class="col-4 p-0">
<div class="nav-item p-0">
<h1 class="nav-ttl">ルーム名ルーム名ルーム名ルーム名</h1>
<h1 class="nav-ttl" id="roomTitle"></h1>
</div>
</div>
<div class="col-4 pl-0">
......@@ -48,76 +48,7 @@
<!-- コンテンツ -->
<main id="chat_room">
<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>
<!-- フィルター -->
......@@ -164,189 +95,7 @@
<!-- チャット内容 -->
<div class="room_container">
<div class="room_contents scroll">
<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 id="messages"></div>
</div>
</div>
</main>
......@@ -357,17 +106,24 @@
<div class="footer-wrap d-flex flex-column">
<div class="footer_content_t">
<div class="d-flex flex-row h-100">
<div class="footer_item">
<div class="footer_item attach_file">
<a href="#">
<img src="icon/icon_camera.png" alt="写真アイコン">
</a>
</div>
<div class="footer_item">
<div class="footer_item attach_file">
<a href="#">
<img src="icon/icon_videocam.png" alt="動画アイコン">
</a>
</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>
<!-- フッター下 -->
......@@ -407,15 +163,57 @@
</div>
</div>
</footer>
<div id="loadingArea"></div>
<div id="userProfileModal"></div>
<div id="chatMenuModal"></div>
<!-- メニューモーダル -->
<!--#include virtual="modal_chat_menu.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/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/socket.io.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/locale/ko.js" charset="UTF-8"></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>
</html>
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,32 +1100,78 @@ 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)
};
CHAT_UI.loadMessages = function(messages, roomId, roomName) {
var usersInRoom = CHAT_DB.getUsersInRoom(roomId);
console.log(usersInRoom);
$('#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 = "";
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;
});
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);
messages.forEach(function(message) {
let template = $('#message-template').html();
if (message.selfFlg == 1) {
template = $('#message-template-me').html();
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);
// ユーザの様式を読み込む
if (message.profileUrl) {
message.profileImagePath = CHAT.getProfileImgUrl(message.profileUrl)
......@@ -1169,8 +1215,6 @@ CHAT_UI.loadMessages = function(messages, roomId, roomName) {
// ユーザ削除ボタン表示しない
$("#userSelectionDeleteBtn").hide();
CHAT_UI.dismissLoadingIndicator();// add some...
// チャットに遷移する
$('#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