Skip to content

C
chat_webview
Commit 64d2007a by Takatoshi Miura
Options

Merge branch 'origin/deverop_archiveUI' into 'release_sp3' 

Origin/deverop archive ui

See merge request !4
parents 7cc4d958 bdd013b8
Showing with 528 additions and 6 deletions
public/css/chat.css
......@@ -759,3 +759,132 @@ a.article:hover {
color: white;
text-align: center;
}
.inbox_archive {
width: 100%;
}
#archive_list {
margin: 0;
padding: 5px 5px 5px;
overflow-y: scroll;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
height: calc(100vh - 200px);
}
.archive_data {
overflow-y: scroll;
clear: both;
}
.archive_img {
float: left;
padding: 10px;
width: 20%;
}
.archive_img img {
height: 80px;
}
.archive_ib {
float: left;
padding: 15px;
width: 80%;
line-height: 1.8;
}
.archive_date_font {
font: 1rem !important;
color:#464646;
}
.archive_date {
display: inline-flex;
max-width: 100%;
}
.archive_file_name {
overflow-x: hidden;
}
.type_image {
text-align: center;
background-color: seagreen;
color: white;
}
.type_movie {
text-align: center;
background-color: blue;
color: white;
}
.type_sound {
text-align: center;
background-color: orange;
color: white;
}
.type_document {
/* 今回のリリースに文書とその他は含めないため非表示 */
display: none;
}
.type_other {
/* 今回のリリースに文書とその他は含めないため非表示 */
display: none;
}
.player {
background-color: black;
text-align : center;
}
.archive_player {
width: auto;
max-width: 100%;
max-height: 50vh;
}
.archive_audio_player {
width: 100%;
}
.archive_info {
overflow-y: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
height: calc(50vh - 50px);
}
.fileName, .insertDate, .chatRoomName, .saveUser, .joinUser {
padding: 10px;
padding-left: 10px;
display: inline;
}
.save_user_list, .join_user_list {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.archive_user {
display: inline-block;
width: 100px;
margin: 10px;
}
.archive_user img {
border-radius: 50%;
width: 100px;
height: 100px;
object-fit: cover;
}
.archive_user p {
text-align: center;
overflow: hidden;
}
public/index.html
......@@ -246,6 +246,26 @@
</div>
</div>
<div class="tab-pane fade" id="pills-archive" role="tabpanel" aria-labelledby="pills-archive-tab">
<div class="inbox_archive">
<div class="heading_srch">
<div class="srch_bar">
<div class="stylish-input-group">
<input id="contactListKeyword" type="text" class="search-bar" placeholder="Search">
<span class="input-group-addon">
<button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button>
</span>
</div>
</div>
</div>
<div id="archive_list" class="inbox_archive row">
</div>
</div>
</div>
<div id="archive_detail" class="archive_detail" >
</div>
<div class="tab-pane fade" id="pills-group" role="tabpanel" aria-labelledby="pills-group-tab">
<div class="inbox_people">
<div class="heading_srch">
......@@ -322,6 +342,12 @@
<i class="fa fa-comments fa-6" aria-hidden="true"></i>
</a>
</li>
<!-- Display None (d-none) archive -->
<li class="nav-item d-none justify-content-center">
<a class="nav-link" id="pills-archive-tab" data-toggle="pill" href="#pills-archive" role="tab" aria-controls="pills-archive" aria-selected="false">
<i class="fa fa-comments fa-6" aria-hidden="true"></i>
</a>
</li>
<!-- Display None (d-none) chatList -->
<li class="nav-item d-none justify-content-center">
<a class="nav-link" id="pills-group-tab" data-toggle="pill" href="#pills-group" role="tab" aria-controls="pills-group" aria-selected="false">
......@@ -508,6 +534,62 @@
</div>
</div>
</script>
<script id="archive-template" type="text/template">
<div class="archive_list col-12">
<div class="archive_data">
<div class="archive_img">
<img src={{thumbnailImage}} alt="">
</div>
<div class="archive_ib">
<div class="row">
<div class="archive_date_font col-10">
<span class="archive_date">{{insertDate}}</span>
</div>
<div class="archive_type">
<span class="text-truncate col-2 {{type}}">{{archiveType}}</span>
</div>
</div>
<p class="archive_file_name text-truncate">{{fileName}}</p>
</div>
</div>
</div>
</script>
<script id="archive-detail-template" type="text/template">
<div id="archive_player" class="player">
</div>
<ul class="archive_info">
<li class="fileName">
<h5>{{fileNameTitle}}</h5>
<p class="text-truncate">{{fileName}}</p>
</li>
<li class="insertDate">
<h5>{{saveDateTitle}}</h5>
<p class="text-truncate">{{insertDate}}</p>
</li>
<li class="chatRoomName">
<h5>{{roomNameTitle}}</h5>
<p class="text-truncate">{{chatRoomName}}
<input type="button" value="＞" id="joinChatRoom">
</p>
</li>
<li class="saveUser">
<h5>{{saveUserTitle}}</h5>
<ul class="save_user_list" id="save_user">
</ul>
</li>
<li class="joinUser">
<h5>{{attendUserTitle}}</h5>
<ul class="join_user_list" id="join_user">
</ul>
</li>
</ul>
</script>
<script id="archive-user-template" type="text/template">
<li class="archive_user">
<img src="{{profileImage}}" alt="">
<p>{{userName}}</p>
</li>
</script>
<script src="./socket.io/dist/socket.io.js"></script>
<script src="./js/libs/socket.io.js"></script>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
......
public/js/chat-db.js
......@@ -56,4 +56,71 @@ CHAT_DB.getMyGroupUsers = function() {
//String形式をJsonに変更してReturn
return JSON.parse(android.getMyGroupUsers());
}
};
\ No newline at end of file
};
CHAT_DB.getArchiveList = function() {
if (CHAT_UTIL.isIOS()) {
// String形式をJsonに変更してReturn
webkit.messageHandlers.getArchiveList.postMessage();
return JSON.parse(iosArchiveList);
} else if (CHAT_UTIL.isAndroid()) {
//TODO Android処理追加必要
}
};
var iosArchiveList;
CHAT_DB.getIosArchiveList = function(archiveList) {
iosArchiveList = archiveList;
};
CHAT_DB.updateArchiveList = function() {
if (CHAT_UTIL.isIOS()) {
webkit.messageHandlers.updateArchiveList.postMessage();
} else if (CHAT_UTIL.isAndroid()) {
//TODO Android処理追加必要
}
};
CHAT_DB.getArchiveDetail = function(archiveId) {
if (CHAT_UTIL.isIOS()) {
// String形式をJsonに変更してReturn
webkit.messageHandlers.getArchiveList.postMessage({archiveId});
return JSON.parse(iosArchiveDetail);
} else if (CHAT_UTIL.isAndroid()) {
//TODO Android処理追加必要
}
};
var iosArchiveDetail;
CHAT_DB.getIosArchiveDetail = function(archive) {
iosArchiveDetail = archive;
};
CHAT_DB.updateArchiveDetail = function(archiveId) {
if (CHAT_UTIL.isIOS()) {
webkit.messageHandlers.updateArchiveDetail.postMessage({archiveId});
} else if (CHAT_UTIL.isAndroid()) {
//TODO Android処理追加必要
}
};
CHAT_DB.getChatRoomInfo = function(roomId) {
if (CHAT_UTIL.isIOS()) {
// String形式をJsonに変更してReturn
webkit.messageHandlers.getChatRoomInfo.postMessage({roomId});
return JSON.parse(iosRoomInfo);
} else if (CHAT_UTIL.isAndroid()) {
//TODO Android処理追加必要
}
}
var iosRoomInfo;
CHAT_DB.getIosRoomInfo = function(roomInfo) {
iosRoomInfo = roomInfo;
};
CHAT_DB.updateChatRoomInfo = function(roomId) {
if (CHAT_UTIL.isIOS()) {
webkit.messageHandlers.updateChatRoomInfo.postMessage({roomId});
} else if (CHAT_UTIL.isAndroid()) {
//TODO Android処理追加必要
}
};
public/js/chat-ui.js
......@@ -473,7 +473,7 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
CHAT.globalSelectedUserList = [];
break;
case '#pills-contact':
$('#namecard').html('');
$('#homeButton').show();
......@@ -483,6 +483,14 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
$('#bottomNav').show();
break;
case '#pills-archive':
$('#homeButton').show();
$("#backButton").hide();
$('.titleRoomName').show();
$('#archive_list').show();
$('#bottomNav').show();
break;
case '#pills-user':
$("#backButton").show();
$("#userSelectionDeleteBtn").hide();
......@@ -539,6 +547,8 @@ $('a[data-toggle="pill"]').on('hide.bs.tab', function(e) {
break;
case '#pills-contact':
break;
case '#pills-archive':
break;
case '#pills-user':
$('#userListKeyword').val('');
break;
......@@ -903,6 +913,10 @@ $('#chatButton').on('click', function(event){
CHAT_UI.refreshRoomList(chatRoomType.DM);
});
$('#archiveButton').on('click', function(event){
CHAT_UI.refreshArchiveScreen();
});
CHAT_UI.refreshContactScreen = function() {
//loadingIndicatorを表示
$('#my_info').html('');
......@@ -1209,3 +1223,198 @@ CHAT_UI.showUserNamecard = function(shopMemberId) {
// keyboard: false
// })
}
CHAT_UI.refreshArchiveScreen = function() {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
//画面タイトル設定
let archiveListTitle = getLocalizedString("archiveListTitle");
$('.titleRoomName').text(archiveListTitle);
// 初期化
$('#archive_list').html('');
$('#pills-archive-tab').tab('show');
// アーカイブの様式を読み込む
const archiveTemplate = $('#archive-template').html();
if (IS_ONLINE == 'true') {
CHAT_DB.updateArchiveList();
}
// アーカイブ一覧取得＆表示
var archiveList = CHAT_DB.getArchiveList();
archiveList.forEach(function(archive) {
var archiveType = '';
var css = '';
switch(archive.archiveType) {
case 0:
archiveType = getLocalizedString("archiveTypeImage");
css = 'type_image';
break;
case 1:
archiveType = getLocalizedString("archiveTypeMovie");
css = 'type_movie';
break;
case 2:
archiveType = getLocalizedString("archiveTypeSound");
css = 'type_sound';
break;
case 3:
// 今回のリリースに文書とその他は含めないため非表示
archiveType = getLocalizedString("archiveTypeDocument");
css = 'type_document';
break;
default:
// 今回のリリースに文書とその他は含めないため非表示
archiveType = getLocalizedString("archiveTypeOther");
css = 'type_other';
}
let html = Mustache.render(archiveTemplate, {
id: archive.archiveId,
fileName: archive.archiveName,
thumbnailImage: archive.archiveUrl,
insertDate: archive.archiveDate,
archiveType: archiveType,
archiveTypeCSS: css
});
let obj = $(jQuery.parseHTML(html)).on('click', function() {
// アーカイブ詳細画面へ遷移
$('#homeButton').hide();
$('.titleRoomName').show();
$('#archive_list').hide();
$('#archive_detail').show();
$('#bottomNav').hide();
$("#backButton").show();
$('#backButton').off().on('click', function() {
// アーカイブ一覧に戻る
$('#homeButton').show();
$("#backButton").hide();
$('.titleRoomName').show();
$('#archive_detail').hide();
$('#archive_list').show();
$('#bottomNav').show();
});
// データの受け渡し
CHAT_UI.refreshArchiveDetailScreen(archive.archiveId);
});
$('#archive_list').append(obj);
$('.archive_list').css('border-bottom', '1px solid #c4c4c4');
})
// loadingIndicatorを非表示
CHAT_UI.dismissLoadingIndicator();
}
// アーカイブ詳細画面の設定
CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
//画面タイトル設定
let archiveDetailTitle = getLocalizedString("archiveDetailTitle");
$('.titleRoomName').text(archiveDetailTitle);
// 初期化
$('#archive_detail').html('');
// アーカイブ詳細の様式を読み込む
const archiveDetailTemplate = $('#archive-detail-template').html();
if (IS_ONLINE == 'true') {
CHAT_DB.updateArchiveDetail(archiveId);
}
// アーカイブ詳細取得
var archive = CHAT_DB.getArchiveDetail(archiveId);
// チャットルーム情報を取得
var roomId = archive.roomId;
var roomInfo = CHAT_DB.getChatRoomInfo(roomId);
// アーカイブ情報を表示
let html = Mustache.render(archiveDetailTemplate, {
fileNameTitle: getLocalizedString("fileNameTitle"),
fileName: archive.archiveName,
saveDateTitle: getLocalizedString("saveDateTitle"),
insertDate: archive.archiveDate,
roomNameTitle: getLocalizedString("roomNameTitle"),
chatRoomName: roomInfo.chatRoomName,
saveUserTitle: getLocalizedString("saveUserTitle"),
attendUserTitle: getLocalizedString("attendUserTitle")
});
let obj = $(jQuery.parseHTML(html));
$('#archive_detail').append(obj);
// プレイヤーの切り替え
switch(archive.archiveType) {
case 0: // 画像
$('#archive_player').prepend('<img class="archive_player" src=' + archive.archiveUrl + '" </img>');
break;
case 1: // 動画
$('#archive_player').prepend('<video class="archive_player" src=' + archive.archiveUrl + ' controls autoplay muted playsinline></video>');
break;
case 2: // 音声
$('#archive_player').prepend('<audio class="archive_audio_player" src=' + archive.archiveUrl + ' controls></audio>');
$('#archive_player').prepend('<img class="archive_player" src=' + "https://via.placeholder.com/1280x720" + ' </img>');
break;
case 3: // 文書
// リリースに文書とその他は含めないため今回は非表示
break;
default:
// リリースに文書とその他は含めないため今回は非表示
}
// チャットルームへのリンク付け
document.getElementById('joinChatRoom').onclick = function() {
socket.emit('joinRoom', roomId, roomInfo.chatRoomName, function () {
$('#archive_detail').html('');
$('#messages').html('');
$('.titleRoomName').text(roomInfo.chatRoomName).data('roomName', roomInfo.chatRoomName);
$('#pills-chat-tab').tab('show');
});
}
// ユーザの様式を読み込む
const archiveUserTemplate = $('#archive-user-template').html();
// 保存ユーザ情報を表示
let saveUserList = archive.saveUserId;
saveUserList.forEach(function(user) {
// TODO ユーザIDからユーザ情報を取得
let html = Mustache.render(archiveUserTemplate, {
profileImage: "プロフィール画像",
userName: "ユーザ名"
});
let obj = $(jQuery.parseHTML(html)).on('click', function() {
//TODO ネームカードのポップアップを出す処理
});
$('#save_user').append(obj);
})
// 参加ユーザ情報を表示
let attendUserList = archive.attendUserId;
attendUserList.forEach(function(user) {
// TODO ユーザIDからユーザ情報を取得
let html = Mustache.render(archiveUserTemplate, {
profileImage: "プロフィール画像",
userName: "ユーザ名"
});
let obj = $(jQuery.parseHTML(html)).on('click', function() {
//TODO ポップアップを出す処理
});
$('#save_user').append(obj);
})
// loadingIndicatorを非表示
CHAT_UI.dismissLoadingIndicator();
}
public/js/language_en.js
......@@ -58,5 +58,17 @@ $.lang.en = {
"directMessageChatRoom":"DM",
"favorite":"Favorite List",
"mygroup":"My Group",
"groupChatRoom":"Group"
"groupChatRoom":"Group",
"archiveListTitle":"Archive",
"archiveTypeImage":"Image",
"archiveTypeMovie":"Movie",
"archiveTypeSound":"Sound",
"archiveTypeDocument":"Document",
"archiveTypeOther":"Other",
"archiveDetailTitle":"Detail",
"fileNameTitle":"File Name",
"saveDateTitle":"Save Date",
"roomNameTitle":"ChatRoom Name",
"saveUserTitle":"Save User",
"attendUserTitle":"Attend User"
}
public/js/language_ja.js
......@@ -58,5 +58,17 @@ $.lang.ja = {
"directMessageChatRoom":"DM",
"favorite":"お気に入りリスト",
"mygroup":"マイグループ",
"groupChatRoom":"グループ"
"groupChatRoom":"グループ",
"archiveListTitle":"アーカイブ",
"archiveTypeImage":"画像",
"archiveTypeMovie":"動画",
"archiveTypeSound":"音声",
"archiveTypeDocument":"文書",
"archiveTypeOther":"その他",
"archiveDetailTitle":"詳細",
"fileNameTitle":"ファイル名",
"saveDateTitle":"保存日",
"roomNameTitle":"チャットルーム名",
"saveUserTitle":"保存ユーザー",
"attendUserTitle":"参加ユーザー"
}
public/js/language_ko.js
......@@ -58,5 +58,17 @@ $.lang.ko = {
"directMessageChatRoom":"DM",
"favorite":"즐겨찾기리스트",
"mygroup":"마이그룹",
"groupChatRoom":"그룹"
"groupChatRoom":"그룹",
"archiveListTitle":"아카이브",
"archiveTypeImage":"이미지",
"archiveTypeMovie":"동영상",
"archiveTypeSound":"음성",
"archiveTypeDocument":"문서",
"archiveTypeOther":"기타",
"archiveDetailTitle":"세부 묘사",
"fileNameTitle":"파일 이름",
"saveDateTitle":"저장 일",
"roomNameTitle":"대화방 이름",
"saveUserTitle":"저장 사용자",
"attendUserTitle":"참여 사용자"
}
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