性能改善メッセージ関連

public_new/js/chat-db.js

@@ -49,6 +49,14 @@ CHAT_DB.getMessages = function (roomId) {
   }
 };
 
+CHAT_DB.getMessagesWithMessageId = function (messageId) {
+  if (CHAT_UTIL.isIOS()) {
+    //TODO メッセージ追加呼出。
+  } else if (CHAT_UTIL.isAndroid()) {
+    return JSON.parse(android.getMessageListFromMessageId(messageId));
+  }
+};
+
 CHAT_DB.getFavoriteUsersNotInRoom = function () {
   if (CHAT_UTIL.isIOS()) {
     return JSON.parse(

public_new/js/chat-room.js

 var lastscrollvalue;
 window.onscroll = function () {
   beforeScroll = window.scrollY;
+  var beforeHeight = $(".room_container").height();
+  messageCount = $(".chat_message").length;
+  if ($(this).scrollTop() === 0 && messageCount >= PagingSize.MESAGE) {
+    if (!$("#chatLoader").is(":visible")) {
+      let loader = $(
+        '<div id="chatLoader" class="text-center"><div class="spinner-grow spinner-grow-sm" role="status" /></div>'
+      );
+      $("#messages").prepend(loader);
+      var messageId = $($(".chat_message").get(0)).data("messageid");
+      var messages;
+      if (typeof android != "undefined") {
+        if (IS_ONLINE == "true") {
+          android.updatePreMessage(messageId);
+        }
+      } else {
+        //TODO 追加メッセージUpdate、get
+      }
+      messages = CHAT_DB.getMessagesWithMessageId(messageId);
+      CHAT_UI.prependMessage(messages);
+      loader.remove();
+      var afterHeight = $(".room_container").height();
+      window.scroll(0, afterHeight - beforeHeight);
+    }
+  }
 };
 
 $("#roomNameChangeBtn").click(function () {

public_new/js/chat-ui.js

@@ -1059,19 +1059,8 @@ CHAT_UI.loadMessages = function (roomId, roomName) {
   let jQueryMessages = $("#messages");
   // スクロールの変化を防ぐため以前画面の高さを保存する
   let beforeHeight = jQueryMessages.prop("scrollHeight");
-  // メッセージ文字列の生成
-  let workVal = "";
-  var userTemplate = getTemplate(TemplateURL.USER_LIST);
 
-  var userMessageTemplate = getTemplate(TemplateURL.USER_MESSAGE);
-
-  var myMessageTemplate = getTemplate(TemplateURL.MY_MESSAGE);
-
-  var systemMessageTemplate = getTemplate(TemplateURL.SYSTEM_MESSAGE);
-
-  var openCollaborationMessageTemplate = getTemplate(
-    TemplateURL.OPEN_COLLABORATION_MESSAGE
-  );
+  var userTemplate = getTemplate(TemplateURL.USER_LIST);
 
   var topUserListTemplate = getTemplate(TemplateURL.CHATROOM_USER_LIST);
 
@@ -1094,6 +1083,33 @@ CHAT_UI.loadMessages = function (roomId, roomName) {
   let filterObj = jQuery.parseHTML(filterHtml);
   $("#filter").append(filterObj);
 
+  CHAT_UI.prependMessage(messages);
+
+  CHAT_UI.waitForLoadingImage(jQueryMessages, CHAT_UI.scrollToBottom);
+  CHAT_UI.waitForLoadingVideo(jQueryMessages, CHAT_UI.scrollToBottom);
+  // ユーザ削除ボタン表示しない
+  $("#userSelectionDeleteBtn").hide();
+};
+
+
+CHAT_UI.prependMessage = function(messages) {
+  var now = new Date();
+  let jQueryMessages = $("#messages");
+  // スクロールの変化を防ぐため以前画面の高さを保存する
+  let beforeHeight = jQueryMessages.prop("scrollHeight");
+  // メッセージ文字列の生成
+  let workVal = "";
+  var userTemplate = getTemplate(TemplateURL.USER_LIST);
+
+  var userMessageTemplate = getTemplate(TemplateURL.USER_MESSAGE);
+
+  var myMessageTemplate = getTemplate(TemplateURL.MY_MESSAGE);
+
+  var systemMessageTemplate = getTemplate(TemplateURL.SYSTEM_MESSAGE);
+
+  var openCollaborationMessageTemplate = getTemplate(
+    TemplateURL.OPEN_COLLABORATION_MESSAGE
+  );
   var checkBeforeDate = "";
   var beforeDate = "";
   messages.forEach(function (message) {
@@ -1175,6 +1191,7 @@ CHAT_UI.loadMessages = function (roomId, roomName) {
         user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
       });
       let html = Mustache.render(template, {
+        messageId: message.messageId,
         roomName: roomName,
         userCount: userInCollaboration.length,
         userList:
@@ -1203,6 +1220,7 @@ CHAT_UI.loadMessages = function (roomId, roomName) {
       let html = Mustache.render(template, {
         text: message.message,
         from: message.loginId,
+        messageId: message.messageId,
         shopMemberId: message.shopMemberId,
         profileImage: message.profileUrl,
         createdAtDay: messageTime.createdAtDay,
@@ -1223,11 +1241,7 @@ CHAT_UI.loadMessages = function (roomId, roomName) {
   });
   // メッセージの画面描画
   jQueryMessages.prepend(workVal);
-  CHAT_UI.waitForLoadingImage(jQueryMessages, CHAT_UI.scrollToBottom);
-  CHAT_UI.waitForLoadingVideo(jQueryMessages, CHAT_UI.scrollToBottom);
-  // ユーザ削除ボタン表示しない
-  $("#userSelectionDeleteBtn").hide();
-};
+}
 
 CHAT_UI.roomDisplayOff = function () {
   if (typeof android != "undefined") {

public_new/js/chat-websocket-message.js

@@ -105,6 +105,7 @@ var renderCollaborationMessage = function (
   let messageTime = CHAT_UTIL.formatDate(createdAt);
   return Mustache.render(template, {
     roomName: roomName,
+    messageId: 0,
     userCount: 1,
     userList: userList,
     insertDate: insertDate,
@@ -146,6 +147,7 @@ var renderTextMessage = function (
   let dataInsertedTemplate = Mustache.render(template, {
     text: text,
     from: from,
+    messageId: 0,
     profileImage: profileImagePath,
     shopMemberId: userID,
     createdAtDay: messageTime.createdAtDay,

public_new/js/constant.js

@@ -54,6 +54,10 @@ const HostRequestFlag = {
   DOING: 1,
 };
 
+const PagingSize = {
+  MESAGE: 20
+};
+
 const messageSeperator = "<::split>";
 const DATA_MESSAGE_SCHEME = "::NOT_MESSAGE";
 const FINISH_ALL_COLLABORATION_SIGNAL = "::ALL_COLLABORATION_END";

public_new/template/template_close_collaboration_message.html

 <!-- 通話 -->
-<div class="collabo_area_container">
+<div class="collabo_area_container chat_message" data-messageid="{{messageId}}">
   <!-- 時刻 -->
   <div class="collabo_date text-right">
     <span>12:23 PM</span>

public_new/template/template_my_message.html

-<div class="my_messages">
+<div class="my_messages chat_message" data-messageid="{{messageId}}">
 <div class="room_right">
   <div class="text">{{text}}</div>
   {{#isToday}}

public_new/template/template_open_collaboration_message.html

 <!-- 通話 -->
-<div class="collabo_area_container">
+<div class="collabo_area_container chat_message" data-messageid="{{messageId}}">
   <!-- 時刻 -->
   <div class="collabo_date text-right">
     {{#isToday}}

public_new/template/template_user_message.html

-<div class="room_left">
+<div class="room_left chat_message" data-messageid="{{messageId}}">
   <figure>
-    <a href="#" data-toggle="modal" data-target="#profileModal1">
+    <a href="#" data-toggle="modal" data-target="#profileModal1">c
       <img src="{{profileImage}}" onError="this.src='./img/noImage.png'" onclick="CHAT_UI.makeNameCard({{shopMemberId}})">
     </a>
   </figure>