Skip to content

C
chat_webview
Commit ba10fd30 by Lee Munkyeong
Options

Merge branch 'origin/develop_apply_design' into 'origin/develop_apply_design_chat' 

# Conflicts:
#   public_new/js/chat-db.js
parents 7cf52fed 3eb9d95e
Showing with 321 additions and 11 deletions
public_new/css/archive.css
......@@ -46,6 +46,21 @@
}
/**************************** archive detail *************************/
.player {
background-color: black;
text-align : center;
}
.archive_player {
width: auto;
max-width: 100%;
max-height: 50vh;
}
.archive_audio_player {
width: 100%;
}
.archive_detail .ttl{
font-size: 18px;
font-weight: bold;
......@@ -68,6 +83,20 @@
width: 90px;
}
#joinChatRoom {
-webkit-appearance: none;
border: none;
width: 24px;
height: auto;
padding: 0;
background: white;
}
#joinChatRoom img {
width: 24px;
height: 24px;
}
@media screen and (max-width: 768px){
.archive_name{
font-size: 14px;
......
public_new/js/archive.js
// 名前空間
var ARCHIVE_UI = {};
$(function() {
// アーカイブ検索
$('#archive .search_form input[type="search"]').keyup(function(){
$.ajax({
url: 'search_message_archive_list.html',
type: 'POST',
datatype: 'html'
}).done(function (data) {
$('.overlay_src_msg').html(data);
})
$('.overlay_src_msg').empty();
var keyword = $('#archive .search_form input[type="search"]').val();
if (keyword == '') {
return;
}
// 検索結果を表示
CHAT_DB.callGetArchiveByName(keyword);
});
});
ARCHIVE_UI.refreshSearchScreen = function(keyword) {
var archiveList = CHAT_DB.getArchiveByName(keyword);
var archiveTemplate;
$.get({ url: "./template/template_archive_list.html", async: false }
, function(text) {
archiveTemplate = text;
});
archiveList.forEach(function(archive) {
var typeImage = "";
switch(archive.archiveType) {
case 0: // 画像
typeImage = "icon/icon_collabo_picture.png";
break;
case 1: // 動画
typeImage = "icon/icon_collabo_videocam.png";
break;
case 2: // 音声
typeImage = "icon/icon_collabo_headset.png";
break;
case 3: // 文書
typeImage = "icon/icon_collabo_document.png";
break;
default: // その他
typeImage = "";
}
let html = Mustache.render(archiveTemplate, {
archiveId: archive.archiveId,
fileName: archive.archiveName,
insertDate: archive.archiveDate,
typeImage: typeImage
});
let obj = jQuery.parseHTML(html);
$('.overlay_src_msg').append(obj);
});
};
public_new/js/chat-db.js
......@@ -5,16 +5,32 @@ var CHAT_DB = {};
//ロカールDBからルーム一覧情報を取得
CHAT_DB.getRoomList = function(roomType, keyWord) {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
return JSON.parse(iosRoomList);
} else if (CHAT_UTIL.isAndroid()) {
return JSON.parse(android.getRoomList(roomType, keyWord));
}
};
var iosRoomList;
CHAT_DB.getIosRoomList = function(roomList) {
iosRoomList = roomList;
CHAT_DB.getRoomList(0);
};
CHAT_DB.callGetRoomList = function(roomType) {
if (CHAT_UTIL.isIOS()) {
webkit.messageHandlers.getRoomList.postMessage({roomType});
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getRoomList(roomType));
}
}
//ロカールDBからログインしたユーザのデータを取得する。
CHAT_DB.getMyInfo = function(input) {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getMyInfo());
......
public_new/js/chat-ui.js
......@@ -851,6 +851,14 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) {
$("#favorite-seperator").text(getLocalizedString("favorite"))
$("#mygroup-seperator").text(getLocalizedString("mygroup"))
$(".ttl_archive").text(getLocalizedString("archive"))
$(".ttl_detail").text(getLocalizedString("detail"))
$("#archiveFileName").text(getLocalizedString("archiveFileName"))
$("#archiveInsertDate").text(getLocalizedString("archiveInsertDate"))
$("#archiveRoomName").text(getLocalizedString("archiveRoomName"))
$("#archiveSaveUser").text(getLocalizedString("archiveSaveUser"))
$("#archiveAttendUser").text(getLocalizedString("archiveAttendUser"))
}
// 画像の読み込みが全て終わったタイミングでコールバック実行
......@@ -1412,3 +1420,175 @@ CHAT_UI.toggleCategory = function(category) {
$(category).toggleClass("open");
$(category).next().slideToggle();
};
// アーカイブ一覧
CHAT_UI.refreshArchiveScreen = function() {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
// 初期化
$('#archiveList').html('');
// アーカイブの様式を読み込む
const archiveTemplate = $('#archive-template').html();
// アーカイブ一覧取得
if (IS_ONLINE == 'true') {
CHAT_DB.updateArchiveList();
}
// ローカルDBのデータを表示
var archiveList = CHAT_DB.getArchiveList();
archiveList.forEach(function(archive) {
var typeImage = "";
switch(archive.archiveType) {
case 0: // 画像
typeImage = "icon/icon_collabo_picture.png";
break;
case 1: // 動画
typeImage = "icon/icon_collabo_videocam.png";
break;
case 2: // 音声
typeImage = "icon/icon_collabo_headset.png";
break;
case 3: // 文書
typeImage = "icon/icon_collabo_document.png";
break;
default: // その他
typeImage = "";
}
let html = Mustache.render(archiveTemplate, {
archiveId: archive.archiveId,
fileName: archive.archiveName,
insertDate: archive.archiveDate,
typeImage: typeImage
});
let obj = $(jQuery.parseHTML(html)).on('click', function() {
});
$('#archiveList').append(obj);
});
// loadingIndicatorを非表示
CHAT_UI.dismissLoadingIndicator();
};
// アーカイブ詳細
CHAT_UI.refreshArchiveDetailScreen = function(archiveId) {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
// 初期化
$('#archiveDetail').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, {
// fileName: archive.archiveName,
// insertDate: archive.archiveDate,
// chatRoomName: roomInfo.chatRoomName,
// profileImage: "",
// userName: userName
// });
// アーカイブ情報を表示
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: "ユーザ名"
});
var obj = $(jQuery.parseHTML(html)).on('click', function() {
});
$('#archiveDetail').append(obj);
// プレイヤーの切り替え
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" />');
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>');
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" + ' />');
break;
case "3": // 文書
// リリースに文書とその他は含めないため今回は非表示
break;
default:
// リリースに文書とその他は含めないため今回は非表示
}
// ユーザの様式を読み込む
const archiveUserTemplate = $('#archive-user-template').html();
// 参加ユーザ情報を表示
let attendUserList = archive.attendUserIds;
attendUserList.forEach(function(user) {
// TODO ユーザIDからユーザ情報を取得
var html = Mustache.render(archiveUserTemplate, {
profileImage: "https://img01.suumo.com/front/gazo/chumon/220/67/main/10646700010021p01.jpg",
userName: "ユーザ名"
});
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');
});
$('#attendUser').append(obj);
})
CHAT_UI.htmlElementTextInitialize(navigator.language);
// チャットルームへのリンク付け
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("遷移");
}
// loadingIndicatorを非表示
CHAT_UI.dismissLoadingIndicator();
};
public_new/js/language_en.js
......@@ -69,5 +69,12 @@ $.lang.en = {
"groupUser":" Member List",
"chat":"Chat",
"voice":"Call",
"addFavorite":"Add Favorite"
"addFavorite":"Add Favorite",
"archive":"Archive",
"detail":"Detail",
"archiveFileName":"File Name",
"archiveInsertDate":"Save Date",
"archiveRoomName":"ChatRoom Name",
"archiveSaveUser":"Save User",
"archiveAttendUser":"Attend User"
}
public_new/js/language_ja.js
......@@ -69,5 +69,12 @@ $.lang.ja = {
"groupUser":"所属ユーザ",
"chat":"チャット",
"voice":"通話",
"addFavorite":"お気に入り追加"
"addFavorite":"お気に入り追加",
"archive":"アーカイブ",
"detail":"詳細",
"archiveFileName":"ファイル名",
"archiveInsertDate":"保存日",
"archiveRoomName":"チャットルーム名",
"archiveSaveUser":"保存ユーザー",
"archiveAttendUser":"参加ユーザー"
}
public_new/js/language_ko.js
......@@ -69,5 +69,12 @@ $.lang.ko = {
"groupUser":"소속 사용자",
"chat":"채팅",
"voice":"통화",
"addFavorite":"즐겨찾기추가"
"addFavorite":"즐겨찾기추가",
"archive":"아카이브",
"detail":"자세한",
"archiveFileName":"파일 이름",
"archiveInsertDate":"저장 일",
"archiveRoomName":"대화방 이름",
"archiveSaveUser":"저장 사용자",
"archiveAttendUser":"참여자"
}
public_new/template/template_archive_list.html 0 → 100644
<li class="d-flex align-items-center">
<a href="archive_detail.html?archiveId={{archiveId}}" class="w-100">
<div class="archive_item d-flex flex-row align-items-center w-100">
<div class="arhive_img">
<div class="img_wrap bg_blue">
<img src="{{typeImage}}" alt="動画" />
</div>
</div>
<div class="archive_desc">
<div class="archive_name">
<span>{{fileName}}</span>
</div>
<div class="archive_date">
<span>{{insertDate}}</span>
</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