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 () {
archiveList.forEach(function (archive) {
var typeImage = "";
switch (archive.archiveType) {
case 0: // 画像
typeImage = "icon/icon_collabo_picture.png";
case ARCHIVE_TYPE.PICTURE: // 画像
typeImage = "icon/icon_collabo_picture.svg";
break;
case 1: // 動画
typeImage = "icon/icon_collabo_videocam.png";
case ARCHIVE_TYPE.VIDEO: // 動画
typeImage = "icon/icon_collabo_videocam.svg";
break;
case 2: // 音声
typeImage = "icon/icon_collabo_headset.png";
case ARCHIVE_TYPE.VOICE: // 音声
typeImage = "icon/icon_collabo_headset.svg";
break;
case 3: // 文書
typeImage = "icon/icon_collabo_document.png";
case ARCHIVE_TYPE.DOCUMENT: // 文書
typeImage = "icon/icon_collabo_document.svg";
break;
default:
// その他
typeImage = "";
break;
}
const html = Mustache.render(archiveTemplate, {
archiveId: archive.archiveId,
......
public_new/js/views/chats/chat-room-message.js
......@@ -150,8 +150,8 @@ ChatRoom.prependMessage = function (messages) {
// メッセージ文字列の生成
let workVal = "";
var checkBeforeDate = "";
var beforeDate = "";
let checkBeforeDate = "";
let beforeDate = "";
messages.forEach(function (message) {
// プロフィールURL設定
message.profileUrl = ChatRoom.parseUserProfileURL(message.profileUrl);
......@@ -171,10 +171,7 @@ ChatRoom.prependMessage = function (messages) {
// 日付ラーベル表示
if (messageCreatedTime != checkBeforeDate && checkBeforeDate != "") {
const html = ChatRoom.renderDateLabelMessage(
systemMessageTemplate,
beforeDate
);
const html = ChatRoom.renderDateLabelMessage(beforeDate);
workVal = html + workVal;
}
......@@ -187,15 +184,33 @@ ChatRoom.prependMessage = function (messages) {
// メッセージの画面描画
$("#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);
return Mustache.render(template, {
return Mustache.render(systemMessageTemplate, {
year: messageDay.year + getLocalizedString("year"),
month: messageDay.month + getLocalizedString("month"),
day: messageDay.day + getLocalizedString("day"),
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>
\ No newline at end of file
{{#isInitalDateMessage}}
<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