Skip to content

C
chat_webview
Commit b32f3df0 by Lee Munkyeong
Options

アーカイブ一覧、詳細実装

parent c3f6ebf7
Showing with 99 additions and 60 deletions
public_new/archive.html
......@@ -50,11 +50,9 @@
<main id="archive">
<!-- 検索 -->
<div class="search_form">
<form>
<input type="search" name="search" placeholder="検索">
<span class="src_icon"></span>
<a href="#" class="cancel none">キャンセル</a>
</form>
</div>
<!-- アーカイブリスト -->
<div class="archive_list content">
......
public_new/archive_detail.html
......@@ -16,16 +16,21 @@
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
<script>
</head>
<script>
var archiveId;
window.addEventListener('DOMContentLoaded', function(){
var urlPrm = new Object;
var urlSearch = location.search.substring(1).split('&');
var kv = urlSearch[0].split('=');
urlPrm[kv[0]]=kv[1];
archiveId = urlPrm.archiveId
if (typeof(android) != "undefined") {
} else {
CHAT_DB.getArchiveDetail(urlPrm.archiveId);
}
});
</script>
</head>
<body>
<!-- ナビメニュー -->
......@@ -92,7 +97,7 @@
</div>
<div class="archive_detail_room_nm item">
<h2 class="ttl" id="archiveRoomName">ChatRoomName</h2>
<span>{{chatRoomName}}</span>
<span class="archive_chat_room">{{chatRoomName}}</span>
<button id="joinChatRoom">
<img src="icon/icon_join_room.png" alt="">
</button>
......@@ -101,7 +106,7 @@
<h2 class="ttl" id="archiveSaveUser">SaveUser</h2>
<div class="d-flex flex-row">
<div class="d-flex flex-column">
<img src="{{profileImage}}" alt="プロフィール画像">
<img src="{{profileImage}}" alt="プロフィール画像" onclick="CHAT_UI.makeNameCard({{userId}})" >
<span>{{userName}}</span>
</div>
</div>
......@@ -188,6 +193,21 @@
let PLATFORM = '';
let IS_MOBILE = true;
let IS_ONLINE = false;
if (typeof(android) != "undefined") {
android.getLoginParameter();
android.getGlobalParameter();
} else {
}
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.refreshArchiveDetailScreen(archiveId);
};
</script>
</body>
......
public_new/css/archive.css
......@@ -121,6 +121,16 @@
width: 24px;
height: 24px;
}
.archive_chat_room {
display: inline-block;
vertical-align: middle;
max-width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media screen and (max-width: 768px){
.archive_name{
font-size: 14px;
......
public_new/js/archive.js
......@@ -3,16 +3,31 @@ var ARCHIVE_UI = {};
$(function() {
// アーカイブ検索
$('#archive .search_form input[type="search"]').keyup(function(){
$('.overlay_src_msg').empty();
$('#archive .search_form input[type="search"]').keyup(function(e) {
var keyword = $('#archive .search_form input[type="search"]').val();
if (keyword == '') {
if (e.KeyCode == 13 || e.key == "Enter") {
if (keyword.length != 0 && keyword != '') {
$('#archive .search_form input[type="search"]').blur();
return;
}
} else if (keyword == '' || keyword.length < 2) {
$('.overlay_src_msg').empty();
return;
}
$('.overlay_src_msg').empty();
if (CHAT_UTIL.isIOS()) {
CHAT_DB.callGetArchiveByName(keyword);
} else if (CHAT_UTIL.isAndroid()) {
ARCHIVE_UI.refreshSearchScreen(keyword);
}
if (e.KeyCode == 13 || e.key == "Enter") {
$('#archive .search_form input[type="search"]').blur();
return;
}
// 検索結果を表示
CHAT_DB.callGetArchiveByName(keyword);
});
});
......
public_new/js/chat-db.js
......@@ -195,7 +195,7 @@ CHAT_DB.getArchiveByName = function(archiveName) {
if (CHAT_UTIL.isIOS()) {
return JSON.parse(callNativeApp("getArchiveByName", {"archiveName": archiveName}));
} else if (CHAT_UTIL.isAndroid()) {
// TODO
return JSON.parse(android.getArchiveListByName(archiveName));
}
};
......@@ -204,7 +204,7 @@ CHAT_DB.getArchiveDetail = function(archiveId) {
if (CHAT_UTIL.isIOS()) {
return JSON.parse(callNativeApp("getArchiveDetail", {"archiveId": archiveId}));
} else if (CHAT_UTIL.isAndroid()) {
// TODO
return JSON.parse(android.getArchiveDetail(archiveId));
}
};
......@@ -212,7 +212,7 @@ CHAT_DB.updateArchiveDetail = function(archiveId) {
if (CHAT_UTIL.isIOS()) {
webkit.messageHandlers.updateArchiveDetail.postMessage({archiveId});
} else if (CHAT_UTIL.isAndroid()) {
// TODO
android.updateArchiveDetail(archiveId);
}
};
......@@ -232,3 +232,12 @@ CHAT_DB.getMyGroupUsersNotInRoom = function() {
return JSON.parse(android.getMyGroupUsersNotInRoom());
}
};
CHAT_DB.getUserInfo = function(shopMemberId) {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getUserInfo(shopMemberId));
}
}
\ No newline at end of file
public_new/js/chat-ui.js
......@@ -1588,10 +1588,8 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
// 初期化
$('#archiveDetail').html('');
// アーカイブ詳細の様式を読み込む
const archiveDetailTemplate = $('#archive-detail-template').html();
if (IS_ONLINE == 'true') {
CHAT_DB.updateArchiveDetail(archiveId);
}
......@@ -1601,24 +1599,20 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
// チャットルーム情報を取得
var roomId = archive.roomId;
var roomInfo = CHAT_DB.getChatRoomInfo(roomId);
// アーカイブ情報を表示
// let html = Mustache.render(archiveDetailTemplate, {
// fileName: archive.archiveName,
// insertDate: archive.archiveDate,
// chatRoomName: roomInfo.chatRoomName,
// profileImage: "",
// userName: userName
// });
//保存ユーザ情報を取得
var userInfo = CHAT_DB.getUserInfo(archive.saveUserId);
userInfo.profileUrl = CHAT.getProfileImgUrl(userInfo.profileUrl);
// アーカイブ情報を表示
var html = Mustache.render(archiveDetailTemplate, {
fileName: "ファイル名",
insertDate: "2021/04/01 18:00",
chatRoomName: "チャットルーム名",
profileImage: "https://img01.suumo.com/front/gazo/chumon/220/67/main/10646700010021p01.jpg",
userName: "ユーザ名"
fileName: archive.archiveName,
insertDate: archive.archiveDate,
chatRoomName: archive.roomName,
chatRoomId: archive.roomId,
profileImage: userInfo.profileUrl,
userName: userInfo.shopMembername,
userId: userInfo.shopMemberId
});
var obj = $(jQuery.parseHTML(html)).on('click', function() {
......@@ -1626,18 +1620,23 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
$('#archiveDetail').append(obj);
// プレイヤーの切り替え
var archiveFilePath = CHAT.createGetDataUrl(archive.filePath, archive.roomId);
switch(archive.archiveType) {
case "0": // 画像
$('#archive_player').prepend('<img class="archive_player" src="https://img01.suumo.com/front/gazo/chumon/220/67/main/10646700010021p01.jpg" />');
case 0:
$('#archive_player').prepend('<img class="archive_player" src="'+archiveFilePath+'" />');
break;
case "1": // 動画
$('#archive_player').prepend('<video class="archive_player" src=' + "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" + ' controls autoplay muted playsinline></video>');
case 1:
$('#archive_player').prepend('<video class="archive_player" src=' + archiveFilePath + ' controls autoplay muted playsinline></video>');
break;
case "2": // 音声
$('#archive_player').prepend('<audio class="archive_audio_player" src=' + archive.archiveUrl + ' controls></audio>');
case 2:
$('#archive_player').prepend('<audio class="archive_audio_player" src=' + archiveFilePath + ' controls></audio>');
$('#archive_player').prepend('<img class="archive_player" src=' + "https://via.placeholder.com/1280x720" + ' />');
break;
case "3": // 文書
case 3:
// リリースに文書とその他は含めないため今回は非表示
break;
default:
......@@ -1649,33 +1648,22 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
// 参加ユーザ情報を表示
let attendUserList = archive.attendUserIds;
if (CHAT_UTIL.isAndroid()) {
attendUserList = JSON.parse(archive.attendUserIds);
}
attendUserList.forEach(function(user) {
// TODO ユーザIDからユーザ情報を取得
var userInfo = CHAT_DB.getUserInfo(user);
userInfo.profileUrl = CHAT.getProfileImgUrl(userInfo.profileUrl);
var html = Mustache.render(archiveUserTemplate, {
profileImage: "https://img01.suumo.com/front/gazo/chumon/220/67/main/10646700010021p01.jpg",
userName: "ユーザ名"
profileImage: userInfo.profileUrl,
userName: userInfo.shopMemberName
});
var obj = $(jQuery.parseHTML(html)).on('click', function() {
// ネームカード表示
const namecardTemplate = $('#archive-namecard-template').html();
let namecardHtml = Mustache.render(namecardTemplate, {
shopMemberId: 1,
profileImage: "https://img01.suumo.com/front/gazo/chumon/220/67/main/10646700010021p01.jpg",
name: "ユーザ名",
groupPathList: "",
chat: getLocalizedString("chat"),
voice: getLocalizedString("voice"),
favorite: getLocalizedString("addFavorite"),
isFavorite: ""
});
let namecardObj = $(jQuery.parseHTML(namecardHtml)).on('click', function() {
});
$('#userProfileModal').html(namecardObj);
$('#userNameCard').modal('show');
CHAT_UI.makeNameCard(user);
});
$('#attendUser').append(obj);
......@@ -1685,13 +1673,7 @@ CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
// チャットルームへのリンク付け
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');
// });
console.log("遷移");
CHAT_UI.joinRoom(archive.roomId, archive.roomName);
}
// loadingIndicatorを非表示
......
public_new/js/chat.js
......@@ -165,6 +165,10 @@ CHAT.uploadImage = function(formData) {
})
}
CHAT.createGetDataUrl = function(fileName, roomId) {
var filePath = CMS_SERVER_URL + '/chatapi/file/getImage?sid=' + CHAT.globalLoginParameter.sid+'&fileName=' + fileName + '&roomId=' + roomId;
return filePath;
}
// Thumbnailのファイルを生成する。
CHAT.createThumbnailAndUpload = function(sourceImage, callback) {
const fileReader = new FileReader();
......
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