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 @@
</div>
<div class="col-4 p-0">
<div class="nav-item p-0">
<h1 class="nav-ttl">チャット</h1>
<h1 class="nav-ttl" id="chatTitle">チャット</h1>
</div>
</div>
<div class="col-4 pl-0">
......@@ -57,8 +57,8 @@
<input id="tab2" type="radio" name="tab_item">
<label class="tab_item" for="tab2">DM</label>
<div class="tab_content" id="tab1_content">
<div class="chat_list">
<ul>
<div class="chat_list" id="dmChatList">
<ul id="chatRoomList">
<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">
......@@ -473,9 +473,45 @@
<script src="./js/libs/jquery-3.3.1.min.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/chat.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>
</html>
public_new/js/chat-db.js
......@@ -65,6 +65,7 @@ CHAT_DB.getGroupInfo = function(groupId) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
console.log(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() {
console.log(`width : ${$(this).width()}`);
console.log(`height : ${$(this).height()}`);
if(CHAT_UI.isLandscapeMode()) {
/*if(CHAT_UI.isLandscapeMode()) {
$(".group_list").addClass("col-6").removeClass("col-12");
$(".user_list").addClass("col-6").removeClass("col-12");
$(".chat_list").addClass("col-6").removeClass("col-12");
......@@ -25,7 +25,7 @@ $(window).on('resize', function() {
$(".squareBoxContent span").removeClass("landscape_span");
$(".mesgs").removeClass("landscape_mesgs");
}
}*/
if (CHAT_UTIL.isIOS()) {
if (isLandscape == true) {
......@@ -1003,18 +1003,19 @@ CHAT_UI.refreshContactScreen = function() {
}
CHAT_UI.refreshRoomList = function(roomType) {
if (IS_ONLINE == 'true') {
android.updateRoomList();
}
var rooms = CHAT_DB.getRoomList(roomType);
CHAT.globalIsInvite = false;
activeRoomId = null;
console.log(rooms);
// #36146に対応
let keywordSearchMode = false;
if ($('#room-search').val().length > 0) {
keywordSearchMode = true;
}
$('#room_list').html('');
$('.chat_list').empty();
let roomListTitle = getLocalizedString("roomListTitle");
$('.titleRoomName').text(roomListTitle);
$('#chatTitle').text(roomListTitle);
if (rooms.length === 0) {
console.log('noRoom')
// 検索結果がない場合のメッセージを追加
if (!keywordSearchMode) {
let emptyListString = getLocalizedString("roomListEmptyString")
......@@ -1024,8 +1025,12 @@ CHAT_UI.refreshRoomList = function(roomType) {
$('#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) {
room.profileImagePath = ASSET_PATH + 'images/user-profile.png'
if (room.message) {
......@@ -1041,7 +1046,6 @@ CHAT_UI.refreshRoomList = function(roomType) {
roomName: room.chatRoomName,
roomId: room.chatRoomId,
profileImage: room.profileImagePath,
active: activeRoomId === room.chatRoomId ? 'active_chat' : null, // 現在、入っているルームだとhilight表示
lastMessage: displayMsg ,
time: room.insertDate ? CHAT_UTIL.formatDate(room.insertDate).createdAt : '',
unreadMsgCnt: room.unreadCount == 0 ? '' : room.unreadCount,
......@@ -1049,41 +1053,28 @@ CHAT_UI.refreshRoomList = function(roomType) {
});
// Click event
let obj = $(jQuery.parseHTML(html)).on('click', function() {
let roomId = $(this).data('roomId');
/* let roomId = $(this).data('roomId');
let roomName = $(this).data('roomname');
CHAT_UI.joinRoom(roomId,roomName);
CHAT_UI.joinRoom(roomId,roomName);*/
//TODO ルームに入る処理追加必要
});
// チャットルームリストに追加する
$('#room_list').append(obj);
// ルームグループごとに追加。
switch(roomType) {
case chatRoomType.GROUP:
$('#groupChatList').append(obj);
break;
case chatRoomType.DM:
$('#dmChatList').append(obj);
break;
default:
}
});
if (rooms.length > 0) {
if (!keywordSearchMode) {
$(".roomListIcon").show()
$('#roomDeleteButton, #arrangeRooms').show()
} else {
$(".roomListIcon").show()
$('#roomDeleteButton, #arrangeRooms').hide()
}
} else {
if (!keywordSearchMode) {
$(".roomListIcon").hide()
} else {
$(".roomListIcon").show()
$('#roomDeleteButton, #arrangeRooms').hide()
}
}
$('#createChatRoom').show();
if (CHAT_UI.isLandscapeMode()) {
$(".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) {
......@@ -1293,7 +1284,8 @@ CHAT_UI.refesshAllGroupSearch = function(groupId) {
result.childGroupList.forEach(function(childGroup) {
let html = Mustache.render(groupTemplate, {
name: childGroup.groupName,
id: childGroup.groupId
id: childGroup.groupId,
isFavorite: childGroup.isFavorite
});
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