Skip to content

C
chat_webview
Commit 79835e38 by Kim Peace
Options

Merge branch 'feature/#42566_initial_system_message_on_top_of_chatroom' into 'develop' 

Add top date label in chat room

See merge request !195
parents 61aedfb4 eb6c4109
Showing with 41 additions and 132 deletions
public_new/js/archive.js deleted 100644 → 0
// 名前空間
var ARCHIVE_UI = {};
document.addEventListener("DOMContentLoaded", function () {
// アーカイブ検索
bindArchiveSearch();
// iOSキーボード変換検知用
bindiOSKeyBoardEvent();
});
ARCHIVE_UI.refreshSearchScreen = function (keyword) {
const archiveList = CHAT_DB.getArchiveByName(keyword);
const typeImage = getArchiveTypeIconURL(archive.archiveType);
getArchiveTemplate().then(function (archiveTemplate) {
archiveList.forEach(function (archive) {
let html = renderArchiveTemplate(
archiveTemplate,
archive.archiveId,
archive.archiveName,
archive.archiveDate,
typeImage
);
let obj = jQuery.parseHTML(html);
$(".overlay_src_msg").append(obj);
});
});
};
//* UTILS *//
const ARCHIVE_TYPE = {
PICTURE: 0,
VIDEO: 1,
VOICE: 2,
DOCUMENT: 3,
};
var getArchiveTypeIconURL = function (type) {
switch (type) {
case ARCHIVE_TYPE.PICTURE:
return "icon/icon_collabo_picture.svg";
case ARCHIVE_TYPE.VIDEO:
return "icon/icon_collabo_videocam.svg";
case ARCHIVE_TYPE.VOICE:
return "icon/icon_collabo_headset.svg";
case ARCHIVE_TYPE.DOCUMENT:
return "icon/icon_collabo_document.svg";
default:
return "";
}
};
var getArchiveTemplate = function () {
return new Promise(function (resolve, reject) {
$.get({ url: TemplateURL.ARCHIVE_LIST, async: false }, function (text) {
resolve(text);
});
});
};
var bindArchiveSearch = function () {
const searchInput = $('#archive .search_form input[type="search"]');
searchInput.keyup(function (e) {
var keyword = searchInput.val();
const enterKeyPressed = e.KeyCode == 13 || e.key == "Enter";
const keywordEmpty = keyword == "" || keyword.length < 2;
const keywordNotEmpty = keyword.length != 0 && keyword != "";
if (enterKeyPressed) {
if (keywordNotEmpty) {
searchInput.blur();
return;
}
} else if (keywordEmpty) {
$(".overlay_src_msg").empty();
return;
}
$(".overlay_src_msg").empty();
ARCHIVE_UI.refreshSearchScreen(keyword);
if (enterKeyPressed) {
searchInput.blur();
return;
}
// 検索結果を表示
});
};
var bindiOSKeyBoardEvent = function () {
const searchInput = $('#archive .search_form input[type="search"]');
searchInput.on("compositionend", function () {
if (CHAT_UTIL.isIOS()) {
var keyword = searchInput.val();
$(".overlay_src_msg").empty();
ARCHIVE_UI.refreshSearchScreen(keyword);
}
});
};
var renderArchiveTemplate = function (
html,
archiveId,
archiveName,
archiveDate,
typeImageURL
) {
return Mustache.render(html, {
archiveId: archiveId,
fileName: archiveName,
insertDate: archiveDate,
typeImage: typeImageURL,
});
};
public_new/js/views/archive/archive.js
...@@ -316,21 +316,22 @@ ArchiveUI.refreshArchiveScreen = function () { ...@@ -316,21 +316,22 @@ ArchiveUI.refreshArchiveScreen = function () {
archiveList.forEach(function (archive) { archiveList.forEach(function (archive) {
var typeImage = ""; var typeImage = "";
switch (archive.archiveType) { switch (archive.archiveType) {
case 0: // 画像 case ARCHIVE_TYPE.PICTURE: // 画像
typeImage = "icon/icon_collabo_picture.png"; typeImage = "icon/icon_collabo_picture.svg";
break; break;
case 1: // 動画 case ARCHIVE_TYPE.VIDEO: // 動画
typeImage = "icon/icon_collabo_videocam.png"; typeImage = "icon/icon_collabo_videocam.svg";
break; break;
case 2: // 音声 case ARCHIVE_TYPE.VOICE: // 音声
typeImage = "icon/icon_collabo_headset.png"; typeImage = "icon/icon_collabo_headset.svg";
break; break;
case 3: // 文書 case ARCHIVE_TYPE.DOCUMENT: // 文書
typeImage = "icon/icon_collabo_document.png"; typeImage = "icon/icon_collabo_document.svg";
break; break;
default: default:
// その他 // その他
typeImage = ""; typeImage = "";
break;
} }
const html = Mustache.render(archiveTemplate, { const html = Mustache.render(archiveTemplate, {
archiveId: archive.archiveId, archiveId: archive.archiveId,
......
public_new/js/views/chats/chat-room-message.js
...@@ -150,8 +150,8 @@ ChatRoom.prependMessage = function (messages) { ...@@ -150,8 +150,8 @@ ChatRoom.prependMessage = function (messages) {
// メッセージ文字列の生成 // メッセージ文字列の生成
let workVal = ""; let workVal = "";
var checkBeforeDate = ""; let checkBeforeDate = "";
var beforeDate = ""; let beforeDate = "";
messages.forEach(function (message) { messages.forEach(function (message) {
// プロフィールURL設定 // プロフィールURL設定
message.profileUrl = ChatRoom.parseUserProfileURL(message.profileUrl); message.profileUrl = ChatRoom.parseUserProfileURL(message.profileUrl);
...@@ -171,10 +171,7 @@ ChatRoom.prependMessage = function (messages) { ...@@ -171,10 +171,7 @@ ChatRoom.prependMessage = function (messages) {
// 日付ラーベル表示 // 日付ラーベル表示
if (messageCreatedTime != checkBeforeDate && checkBeforeDate != "") { if (messageCreatedTime != checkBeforeDate && checkBeforeDate != "") {
const html = ChatRoom.renderDateLabelMessage( const html = ChatRoom.renderDateLabelMessage(beforeDate);
systemMessageTemplate,
beforeDate
);
workVal = html + workVal; workVal = html + workVal;
} }
...@@ -187,15 +184,33 @@ ChatRoom.prependMessage = function (messages) { ...@@ -187,15 +184,33 @@ ChatRoom.prependMessage = function (messages) {
// メッセージの画面描画 // メッセージの画面描画
$("#messages").prepend(workVal); $("#messages").prepend(workVal);
// messageが存在する場合、最上段にそのメッセージの日付を表示
ChatRoom.appendInitialDateMessage(messages);
};
ChatRoom.appendInitialDateMessage = function (messages) {
if ($(".chat_message").length != 0 && messages.length != 0) {
$("#initial-date-message").detach();
const html = ChatRoom.renderDateLabelMessage(
messages[messages.length - 1].insertDate,
true
);
$("#messages").prepend(html);
}
}; };
ChatRoom.renderDateLabelMessage = function (template, beforeDate) { ChatRoom.renderDateLabelMessage = function (
beforeDate,
isInitialDateMessage = false
) {
let messageDay = CHAT_UTIL.systemDay(beforeDate); let messageDay = CHAT_UTIL.systemDay(beforeDate);
return Mustache.render(template, { return Mustache.render(systemMessageTemplate, {
year: messageDay.year + getLocalizedString("year"), year: messageDay.year + getLocalizedString("year"),
month: messageDay.month + getLocalizedString("month"), month: messageDay.month + getLocalizedString("month"),
day: messageDay.day + getLocalizedString("day"), day: messageDay.day + getLocalizedString("day"),
dow: CHAT_UTIL.findDow(messageDay.dow), dow: CHAT_UTIL.findDow(messageDay.dow),
isInitalDateMessage: isInitialDateMessage,
}); });
}; };
......
public_new/template/template_system_message.html
<div class="sys_msg text-center">{{year}}{{month}}{{day}}<span class="dow">{{dow}}</span></div> {{#isInitalDateMessage}}
\ No newline at end of file <div class="sys_msg text-center initial-date-message">{{year}}{{month}}{{day}}<span class="dow">{{dow}}</span>
</div>
{{/isInitalDateMessage}}
{{^isInitalDateMessage}}
<div class="sys_msg text-center">{{year}}{{month}}{{day}}<span class="dow">{{dow}}</span>
</div>
{{/isInitalDateMessage}}
\ 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