Merge branch 'bugFix/#436_message_picture_modal' into 'origin/develop_apply_design'

Bug fix/#436 message picture modal

See merge request !20

public_new/chat_room.html

@@ -134,10 +134,13 @@
   <div id="loadingArea"></div>
   <div id="userProfileModal"></div>
   <div id="chatMenuModal"></div>
+  <div id="pictureModal"></div>
   <!-- メニューモーダル -->
   <!--#include virtual="modal_chat_menu.html" -->
   <!-- プロフィールモーダル -->
   <!--#include virtual="modal_chat_profile.html" -->
+  <!-- 写真メッセージーモーダル -->
+  <!--#include virtual="modal_chat_picture.html" -->
 
   <script src="./js/libs/jquery-3.3.1.min.js"></script>
   <script src="./js/libs/socket.io.js"></script>
@@ -160,6 +163,11 @@
   <script src="./js/chat-websocket.js"></script>
   <script src="./js/chat-room.js"></script>
   <script>
+    function test(image) {
+      $('#modal_image').attr('src',image.src);
+      $('#pictureModalCenter').modal('show');
+    }
+
     String.prototype.replaceAll = function(org, dest) {
       return this.split(org).join(dest);
     }
@@ -170,6 +178,7 @@
     let PLATFORM = '';
     let IS_MOBILE = true;
     let IS_ONLINE = false;
+    $("#pictureModal").load("./modal_chat_picture.html");
     $("#chatMenuModal").load("./modal_chat_menu.html");
     $("#loadingArea").load("./loading.html");
     android.getLoginParameter();

public_new/css/chat.css

@@ -692,6 +692,14 @@ input[name="tab_item"] {
 
 /**************************** modal *************************/
 /* メニューモーダル */
+.modal-body {
+    padding-left: 0.6rem;
+}
+.modal-body #modal_image {
+    width: 100%;
+    height: 100%;
+}
+
 .menu_modal .modal-body ul {
   list-style: none;
   padding-left: 0;

public_new/js/chat.js

@@ -111,9 +111,9 @@ CHAT.uploadImage = function(formData) {
             }
             let downloadPath = CMS_SERVER_URL + '/chatapi/file/download?fileName=' + imageName + '&roomId=' + CHAT.globalLoginParameter.roomId;
             // アップロードが終了した後ローディング画面から離れてメッセージをメッセージを転送する
-            const lightbox = $('<a/>',{href:imgPath, 'data-lightbox':'attachedImages','data-title':imageName});
-            const image = $('<img/>',{src:imgPath, width:'auto',style:'max-width:100%'});
-            const downloadIcon = $('<a/>',{href:downloadPath, class:'fa fa-download', download:res.fileName});
+            const lightbox = $('<a/>', {'data-lightbox':'attachedImages', 'data-title':imageName});
+            const image = $('<img/>', {src:imgPath, width:'auto', style:'max-width:100%', 'data-toggle':'modal', onclick:'test(this);'});
+            const downloadIcon = $('<a/>', {href:downloadPath, class:'fa fa-download', download:res.fileName});
 
             lightbox.append(image);
             lightbox.append(downloadIcon);

public_new/modal_chat_picture.html

+<div class="modal fade menu_modal" id="pictureModalCenter" tabindex="-1" role="dialog" aria-labelledby="pictureModalTitle" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered" role="document">
+    <div class="modal-content">
+      <div class="modal-header border-0">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div class="picture-modal">
+          <img src="{{imgPath}}" id="modal_image">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>