Skip to content

C
chat_webview
Commit ed4601f6 by Lee Munkyeong
Options

チャット画面UI作業

parent 6f694ccd
Showing with 110 additions and 43 deletions
public_new/chat.html
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,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="chatTitle">チャット</h1>
</div> </div>
</div> </div>
<div class="col-4 pl-0"> <div class="col-4 pl-0">
...@@ -57,8 +57,8 @@ ...@@ -57,8 +57,8 @@
<input id="tab2" type="radio" name="tab_item"> <input id="tab2" type="radio" name="tab_item">
<label class="tab_item" for="tab2">DM</label> <label class="tab_item" for="tab2">DM</label>
<div class="tab_content" id="tab1_content"> <div class="tab_content" id="tab1_content">
<div class="chat_list"> <div class="chat_list" id="dmChatList">
<ul> <ul id="chatRoomList">
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100"> <a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center"> <div class="chat_item d-flex flex-row align-items-center">
...@@ -473,9 +473,45 @@ ...@@ -473,9 +473,45 @@
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.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/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.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/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>
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;
$("#loadingArea").load("./loading.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;
console.log("onChat");
CHAT_UI.refreshRoomList(chatRoomType.DM);
};
</script>
</body> </body>
</html> </html>
public_new/js/chat-db.js
...@@ -65,6 +65,7 @@ CHAT_DB.getGroupInfo = function(groupId) { ...@@ -65,6 +65,7 @@ CHAT_DB.getGroupInfo = function(groupId) {
//TODO IOS処理追加必要 //TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) { } else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn //String形式をJsonに変更してReturn
console.log(JSON.parse(android.getGroupInfo(groupId)));
return JSON.parse(android.getGroupInfo(groupId)); return JSON.parse(android.getGroupInfo(groupId));
} }
}; };
......
public_new/js/chat-ui.js
...@@ -10,7 +10,7 @@ $(window).on('resize', function() { ...@@ -10,7 +10,7 @@ $(window).on('resize', function() {
console.log(`width : ${$(this).width()}`); console.log(`width : ${$(this).width()}`);
console.log(`height : ${$(this).height()}`); console.log(`height : ${$(this).height()}`);
if(CHAT_UI.isLandscapeMode()) { /*if(CHAT_UI.isLandscapeMode()) {
$(".group_list").addClass("col-6").removeClass("col-12"); $(".group_list").addClass("col-6").removeClass("col-12");
$(".user_list").addClass("col-6").removeClass("col-12"); $(".user_list").addClass("col-6").removeClass("col-12");
$(".chat_list").addClass("col-6").removeClass("col-12"); $(".chat_list").addClass("col-6").removeClass("col-12");
...@@ -25,7 +25,7 @@ $(window).on('resize', function() { ...@@ -25,7 +25,7 @@ $(window).on('resize', function() {
$(".squareBoxContent span").removeClass("landscape_span"); $(".squareBoxContent span").removeClass("landscape_span");
$(".mesgs").removeClass("landscape_mesgs"); $(".mesgs").removeClass("landscape_mesgs");
} }*/
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
if (isLandscape == true) { if (isLandscape == true) {
...@@ -1003,18 +1003,19 @@ CHAT_UI.refreshContactScreen = function() { ...@@ -1003,18 +1003,19 @@ CHAT_UI.refreshContactScreen = function() {
} }
CHAT_UI.refreshRoomList = function(roomType) { CHAT_UI.refreshRoomList = function(roomType) {
if (IS_ONLINE == 'true') {
android.updateRoomList();
}
var rooms = CHAT_DB.getRoomList(roomType); var rooms = CHAT_DB.getRoomList(roomType);
CHAT.globalIsInvite = false; CHAT.globalIsInvite = false;
activeRoomId = null; activeRoomId = null;
console.log(rooms);
// #36146に対応 // #36146に対応
let keywordSearchMode = false; $('.chat_list').empty();
if ($('#room-search').val().length > 0) {
keywordSearchMode = true;
}
$('#room_list').html('');
let roomListTitle = getLocalizedString("roomListTitle"); let roomListTitle = getLocalizedString("roomListTitle");
$('.titleRoomName').text(roomListTitle); $('#chatTitle').text(roomListTitle);
if (rooms.length === 0) { if (rooms.length === 0) {
console.log('noRoom')
// 検索結果がない場合のメッセージを追加 // 検索結果がない場合のメッセージを追加
if (!keywordSearchMode) { if (!keywordSearchMode) {
let emptyListString = getLocalizedString("roomListEmptyString") let emptyListString = getLocalizedString("roomListEmptyString")
...@@ -1024,8 +1025,12 @@ CHAT_UI.refreshRoomList = function(roomType) { ...@@ -1024,8 +1025,12 @@ CHAT_UI.refreshRoomList = function(roomType) {
$('#room_list').append(`<center class="text-secondary">${emptyListString}</center>`); $('#room_list').append(`<center class="text-secondary">${emptyListString}</center>`);
} }
} }
// チャットルームの様式を読み込む
const template = $('#room-template').html(); var template;
$.get({ url: "./template/template_room_list.html", async: false }
, function(text) {
template = text;
});
rooms.forEach(function(room) { rooms.forEach(function(room) {
room.profileImagePath = ASSET_PATH + 'images/user-profile.png' room.profileImagePath = ASSET_PATH + 'images/user-profile.png'
if (room.message) { if (room.message) {
...@@ -1041,7 +1046,6 @@ CHAT_UI.refreshRoomList = function(roomType) { ...@@ -1041,7 +1046,6 @@ CHAT_UI.refreshRoomList = function(roomType) {
roomName: room.chatRoomName, roomName: room.chatRoomName,
roomId: room.chatRoomId, roomId: room.chatRoomId,
profileImage: room.profileImagePath, profileImage: room.profileImagePath,
active: activeRoomId === room.chatRoomId ? 'active_chat' : null, // 現在、入っているルームだとhilight表示
lastMessage: displayMsg , lastMessage: displayMsg ,
time: room.insertDate ? CHAT_UTIL.formatDate(room.insertDate).createdAt : '', time: room.insertDate ? CHAT_UTIL.formatDate(room.insertDate).createdAt : '',
unreadMsgCnt: room.unreadCount == 0 ? '' : room.unreadCount, unreadMsgCnt: room.unreadCount == 0 ? '' : room.unreadCount,
...@@ -1049,41 +1053,28 @@ CHAT_UI.refreshRoomList = function(roomType) { ...@@ -1049,41 +1053,28 @@ CHAT_UI.refreshRoomList = function(roomType) {
}); });
// Click event // Click event
let obj = $(jQuery.parseHTML(html)).on('click', function() { let obj = $(jQuery.parseHTML(html)).on('click', function() {
let roomId = $(this).data('roomId'); /* let roomId = $(this).data('roomId');
let roomName = $(this).data('roomname'); let roomName = $(this).data('roomname');
CHAT_UI.joinRoom(roomId,roomName); CHAT_UI.joinRoom(roomId,roomName);*/
//TODO ルームに入る処理追加必要 //TODO ルームに入る処理追加必要
}); });
// チャットルームリストに追加する
$('#room_list').append(obj); // ルームグループごとに追加。
}); switch(roomType) {
if (rooms.length > 0) { case chatRoomType.GROUP:
if (!keywordSearchMode) { $('#groupChatList').append(obj);
$(".roomListIcon").show() break;
$('#roomDeleteButton, #arrangeRooms').show() case chatRoomType.DM:
} else { $('#dmChatList').append(obj);
$(".roomListIcon").show() break;
$('#roomDeleteButton, #arrangeRooms').hide() default:
}
} else {
if (!keywordSearchMode) {
$(".roomListIcon").hide()
} else {
$(".roomListIcon").show()
$('#roomDeleteButton, #arrangeRooms').hide()
}
} }
$('#createChatRoom').show(); });
if (CHAT_UI.isLandscapeMode()) { if (CHAT_UI.isLandscapeMode()) {
$(".chat_list").removeClass("col-12").addClass("col-6"); $(".chat_list").removeClass("col-12").addClass("col-6");
} }
$("#userSelectionDeleteBtn").hide();
// チャットルームリスト画面に遷移
$('#pills-chatlist-tab').tab('show');
// loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator();
}; };
CHAT_UI.joinRoom = function(roomId,roomName) { CHAT_UI.joinRoom = function(roomId,roomName) {
...@@ -1293,7 +1284,8 @@ CHAT_UI.refesshAllGroupSearch = function(groupId) { ...@@ -1293,7 +1284,8 @@ CHAT_UI.refesshAllGroupSearch = function(groupId) {
result.childGroupList.forEach(function(childGroup) { result.childGroupList.forEach(function(childGroup) {
let html = Mustache.render(groupTemplate, { let html = Mustache.render(groupTemplate, {
name: childGroup.groupName, name: childGroup.groupName,
id: childGroup.groupId id: childGroup.groupId,
isFavorite: childGroup.isFavorite
}); });
let obj = $(jQuery.parseHTML(html)).on('click', function() { let obj = $(jQuery.parseHTML(html)).on('click', function() {
......
public_new/template/template_room_list.html 0 → 100644
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thubnail4 thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="d-flex flex-row">
<div class="chat_item_t ">
<span class="chat_item_ttl">{{roomName}}</span>
</div>
<span class="chat_item_num">({{userCnt}})</span>
</div>
<div class="chat_item_desc">
{{lastMessage}}
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">{{time}}</span>
{{#unreadMsgCnt}}
<span class="chat_item_unread">{{unreadMsgCnt}}</span>
{{/unreadMsgCnt}}
</div>
</div>
</div>
</a>
</li>
\ 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