Skip to content

C
chat_webview
Commit e45ebc85 by Lee Munkyeong
Options

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

Origin/develop apply design chat

See merge request !9
parents 3eb9d95e ba10fd30
Showing with 677 additions and 903 deletions
public_new/archive.html
...@@ -79,7 +79,6 @@ ...@@ -79,7 +79,6 @@
<a href="chat.html"> <a href="chat.html">
<img src="icon/icon_chat_gray.png" alt="チャット"> <img src="icon/icon_chat_gray.png" alt="チャット">
<p>チャット</p> <p>チャット</p>
<span class="unread_num">999+</span>
</a> </a>
</div> </div>
<div class="footer_item"> <div class="footer_item">
......
public_new/chat.html
...@@ -21,13 +21,13 @@ ...@@ -21,13 +21,13 @@
<div class="col-4 pr-0"> <div class="col-4 pr-0">
<div class="nav-item"> <div class="nav-item">
<div class="nav_prev"> <div class="nav_prev">
<a href="#"><span>ホーム</span></a> <a href="#" class="home_btn"><span>ホーム</span></a>
</div> </div>
</div> </div>
</div> </div>
<div class="col-4 p-0"> <div class="col-4 p-0">
<div class="nav-item p-0"> <div class="nav-item p-0">
<h1 class="nav-ttl">チャット</h1> <h1 class="nav-ttl" id="chatTitle">チャット</h1>
</div> </div>
</div> </div>
<div class="col-4 pl-0"> <div class="col-4 pl-0">
...@@ -45,399 +45,31 @@ ...@@ -45,399 +45,31 @@
<!-- ユーザー検索 --> <!-- ユーザー検索 -->
<div class="search_form"> <div class="search_form">
<form> <form>
<input type="search" name="search" placeholder="ユーザー検索"> <input type="search" name="search" placeholder="ルーム検索">
<span class="src_icon"></span> <span class="src_icon"></span>
<a href="#" class="cancel none">キャンセル</a> <a href="#" class="cancel none">キャンセル</a>
</form> </form>
</div> </div>
<!-- タブ --> <!-- タブ -->
<div class="content tabs"> <div class="content tabs">
<input id="tab1" type="radio" name="tab_item" checked> <input id="tabGroup" type="radio" name="tab_item" checked>
<label class="tab_item" for="tab1">グループ</label> <label class="tab_item" for="tabGroup">グループ</label>
<input id="tab2" type="radio" name="tab_item"> <input id="tabDM" type="radio" name="tab_item">
<label class="tab_item" for="tab2">DM</label> <label class="tab_item" for="tabDM">DM</label>
<div class="tab_content" id="tab1_content"> <div class="tab_content" id="tab1_content">
<div class="chat_list"> <div class="chat_list" id="groupChatList">
<ul>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail4 thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="d-flex flex-row">
<div class="chat_item_t ">
<span class="chat_item_ttl">グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名</span>
</div>
<span class="chat_item_num">(10)</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">3:25AM</span>
<span class="chat_item_unread">25</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail3 thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="d-flex flex-row">
<div class="chat_item_t ">
<span class="chat_item_ttl">グループ名グループ名</span>
</div>
<span class="chat_item_num">(10)</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">3:25AM</span>
<span class="chat_item_unread">25</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail2 thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="d-flex flex-row">
<div class="chat_item_t ">
<span class="chat_item_ttl">グループ名グループ名</span>
</div>
<span class="chat_item_num">(10)</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">3:25AM</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="d-flex flex-row">
<div class="chat_item_t ">
<span class="chat_item_ttl">グループ名グループ名</span>
</div>
<span class="chat_item_num">(10)</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">3:25AM</span>
<span class="chat_item_unread">999+</span>
</div>
</div>
</div>
</a>
</li>
</ul>
</div> </div>
</div> </div>
<div class="tab_content" id="tab2_content"> <div class="tab_content" id="tab2_content">
<div class="chat_list"> <div class="chat_list" id="dmChatList">
<ul>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">3:25AM</span>
<span class="chat_item_unread">25</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">4/15</span>
<span class="chat_item_unread">25</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">4/15</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">4/15</span>
<span class="chat_item_unread">999+</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">4/15</span>
<span class="chat_item_unread">999+</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">4/15</span>
<span class="chat_item_unread">999+</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">4/15</span>
<span class="chat_item_unread">999+</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">4/15</span>
<span class="chat_item_unread">999+</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">4/15</span>
<span class="chat_item_unread">999+</span>
</div>
</div>
</div>
</a>
</li>
</ul>
</div> </div>
</div>
</div> </div>
<!-- オーバーレイ --> <!-- オーバーレイ -->
<div class="chat_list"> <div class="chat_list">
<ul class="overlay_src_msg"> <ul class="overlay_src_msg">
</ul> </ul>
</div> </div>
</main> </main>
...@@ -455,7 +87,6 @@ ...@@ -455,7 +87,6 @@
<a href="chat.html"> <a href="chat.html">
<img src="icon/icon_chat.png" alt="チャット"> <img src="icon/icon_chat.png" alt="チャット">
<p class="active">チャット</p> <p class="active">チャット</p>
<span class="unread_num">999+</span>
</a> </a>
</div> </div>
<div class="footer_item"> <div class="footer_item">
...@@ -470,12 +101,48 @@ ...@@ -470,12 +101,48 @@
<!-- ローディング --> <!-- ローディング -->
<!--#include virtual="loading.html" --> <!--#include virtual="loading.html" -->
<div id="loadingArea"></div>
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/locale/ko.js" charset="UTF-8"></script>
<script src="./js/libs/locale/ja.js" charset="UTF-8"></script>
<script src="./js/libs/mustache.min.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
<script src="./js/language.js"></script>
<script src="./js/language_ko.js" charset="UTF-8"></script>
<script src="./js/language_ja.js" charset="UTF-8"></script>
<script src="./js/language_en.js" charset="UTF-8"></script>
<script src="./js/constant.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/chat-ui.js"></script>
<script src="./js/chat-util.js"></script>
<script src="./js/chat-db.js"></script>
<script>
String.prototype.replaceAll = function(org, dest) {
return this.split(org).join(dest);
}
let CHAT_SERVER_URL = '';
let CMS_SERVER_URL = '';
let ASSET_PATH = './';
let PLATFORM = '';
let IS_MOBILE = true;
let IS_ONLINE = false;
$("#loadingArea").load("./loading.html");
android.getLoginParameter();
android.getGlobalParameter();
function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
CHAT_SERVER_URL = chatServerUrl;
CMS_SERVER_URL = cmsServerUrl;
PLATFORM = platform;
IS_MOBILE = isMobile;
IS_ONLINE = isOnline;
console.log("onChat");
CHAT_UI.refreshRoomList(chatRoomType.GROUP);
};
</script>
</body> </body>
</html> </html>
public_new/chat_room.html
...@@ -10,10 +10,11 @@ ...@@ -10,10 +10,11 @@
<link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/common.css"> <link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/chat.css"> <link rel="stylesheet" href="./css/chat.css">
<link rel="stylesheet" href="./css/loading.css">
<link rel="stylesheet" href="./css/chat_room_footer.css"> <link rel="stylesheet" href="./css/chat_room_footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body style="background: #F3F3F3;">
<!-- ナビメニュー --> <!-- ナビメニュー -->
<nav> <nav>
<div class="chat_room_src_form none"> <div class="chat_room_src_form none">
...@@ -33,13 +34,13 @@ ...@@ -33,13 +34,13 @@
</div> </div>
<div class="col-4 p-0"> <div class="col-4 p-0">
<div class="nav-item p-0"> <div class="nav-item p-0">
<h1 class="nav-ttl">ルーム名ルーム名ルーム名ルーム名</h1> <h1 class="nav-ttl" id="roomTitle"></h1>
</div> </div>
</div> </div>
<div class="col-4 pl-0"> <div class="col-4 pl-0">
<div class="nav-item text-right"> <div class="nav-item text-right">
<a href="#" class="search_menu"><img src="icon/icon_search.png" alt="検索"></a> <a href="#" class="search_menu"><img src="icon/icon_search.png" alt="検索"></a>
<a href="#" data-toggle="modal" data-target="#menuModalCenter"><img src="icon/icon_room_menu.png" alt="メニュー"></a> <a href="#" data-toggle="modal" data-target="#menuModalCenter" id="roomMenu" class="none"><img src="icon/icon_room_menu.png" alt="メニュー"></a>
</div> </div>
</div><!-- .col --> </div><!-- .col -->
</div><!-- .row --> </div><!-- .row -->
...@@ -48,76 +49,7 @@ ...@@ -48,76 +49,7 @@
<!-- コンテンツ --> <!-- コンテンツ -->
<main id="chat_room"> <main id="chat_room">
<div id="user_list" class="user_list d-flex flex-row"> <div id="user_list" class="user_list d-flex flex-row">
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal1">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="img/noImage.png" alt="プロフィール画像">
</div>
<span>名前名前名前名前名前名前名前名前</span>
</div>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal1">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="img/noImage.png" alt="プロフィール画像">
</div>
<span>名前名前名前名前名前名前名前名前</span>
</div>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal1">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="img/noImage.png" alt="プロフィール画像">
</div>
<span>名前名前名前名前名前名前名前名前</span>
</div>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal1">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="img/noImage.png" alt="プロフィール画像">
</div>
<span>名前名前名前名前名前名前名前名前</span>
</div>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal1">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="img/noImage.png" alt="プロフィール画像">
</div>
<span>名前名前名前名前名前名前名前名前</span>
</div>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal1">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="img/noImage.png" alt="プロフィール画像">
</div>
<span>名前名前名前名前名前名前名前名前</span>
</div>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal1">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="img/noImage.png" alt="プロフィール画像">
</div>
<span>名前名前名前名前名前名前名前名前</span>
</div>
</a>
</div>
</div> </div>
<!-- フィルター --> <!-- フィルター -->
...@@ -164,189 +96,7 @@ ...@@ -164,189 +96,7 @@
<!-- チャット内容 --> <!-- チャット内容 -->
<div class="room_container"> <div class="room_container">
<div class="room_contents scroll"> <div class="room_contents scroll">
<div id="messages"></div>
<div class="sys_msg text-center">
チャット開始<br>
参加ユーザ<br>
OOさん<br>
OOさん<br>
OOさん
</div>
<!-- 相手の吹き出し -->
<div class="room_left">
<figure>
<a href="#" data-toggle="modal" data-target="#profileModal1"><img src="img/noImage.png" alt="プロフィール画像"></a>
</figure>
<div class="room_left-text">
<div class="name">名前名前名前名前</div>
<div class="text">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</div>
</div>
<div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div>
<div class="read d-flex align-items-end"><span>既読</span></div>
</div>
<div class="sys_msg text-center">2021/03/04</div>
<!-- 自分の吹き出し -->
<div class="room_right">
<div class="text">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</div>
<div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div>
<div class="read d-flex align-items-end"><span>既読</span></div>
</div>
<div class="sys_msg text-center">OOさんが参加しました</div>
<div class="sys_msg text-center">OOさんがルームを非表示にしました</div>
<!-- 相手の吹き出し -->
<div class="room_left">
<figure>
<img src="img/noImage.png" alt="プロフィール画像">
</figure>
<div class="room_left-text">
<div class="name">名前名前名前名前</div>
<div class="text">ここにテキストが入ります。</div>
</div>
<div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div>
<div class="unread d-flex align-items-end"><span>10</span></div>
</div>
<!-- 相手の吹き出し -->
<div class="room_left">
<figure>
<img src="img/noImage.png" alt="プロフィール画像">
</figure>
<div class="room_left-text">
<div class="name">名前名前名前名前</div>
<div class="text">ここにテキストが入ります。</div>
</div>
<div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div>
<div class="read d-flex align-items-end"><span>既読</span></div>
</div>
<!-- 相手の吹き出し -->
<div class="room_left">
<figure>
<img src="img/noImage.png" alt="プロフィール画像">
</figure>
<div class="room_left-text">
<div class="name">名前名前名前名前</div>
<div class="img_wrap">
<img src="img/sample.jpg" alt="画像">
</div>
</div>
<div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div>
<div class="read d-flex align-items-end"><span>既読</span></div>
</div>
<!-- 自分の吹き出し -->
<div class="room_right">
<div class="text">ここにテキストが入ります。</div>
<div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div>
<div class="unread d-flex align-items-end"><span>999+</span></div>
</div>
<!-- 自分の吹き出し -->
<div class="room_right">
<div class="img_wrap">
<img src="img/sample.jpg" alt="画像">
</div>
<div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div>
<div class="read d-flex align-items-end"><span>既読</span></div>
</div>
<!-- 相手の吹き出し -->
<div class="room_left">
<figure>
<img src="img/noImage.png" alt="プロフィール画像">
</figure>
<div class="room_left-text">
<div class="name">名前名前名前名前</div>
<div class="text">ここにテキストが入ります。</div>
</div>
<div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div>
<div class="read d-flex align-items-end"><span>既読</span></div>
</div>
<!-- 相手の吹き出し -->
<div class="room_left">
<figure>
<img src="img/noImage.png" alt="プロフィール画像">
</figure>
<div class="room_left-text latest">
<div class="name">名前名前名前名前</div>
<div class="text">ここにテキストが入ります。</div>
</div>
<div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div>
<div class="read d-flex align-items-end"><span>既読</span></div>
</div>
<!-- 通話 -->
<div class="collabo_area_container">
<!-- 時刻 -->
<div class="collabo_date text-right">
<span>12:23 PM</span>
</div>
<div class="collabo_area">
<div class="collabo_desc">
<div class="collabo_room_name d-flex flex-row">
<span>ルーム名ルーム名ルーム名ルーム名</span>
<span>の通話</span>
</div>
<div class="d-flex flex-row justify-content-between">
<div class="collabo_user_list d-flex flex-row">
<div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
<div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
<div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
<div class="num"><span>10</span></div>
</div>
<div class="collabo_time">
<span>1:10:20</span>
</div>
</div>
<div class="collabo_btn">
<button type="button" name="button">
<img src="icon/icon_profile_phone.png" alt="通話">
<span>参加する</span>
</button>
</div>
</div>
</div>
</div>
<!-- 通話 -->
<div class="collabo_area_container">
<!-- 時刻 -->
<div class="collabo_date text-right">
<span>12:23 PM</span>
</div>
<div class="collabo_area disable">
<div class="collabo_desc">
<div class="collabo_room_name d-flex flex-row">
<span>ルーム名ルーム名</span>
<span>の通話</span>
</div>
<div class="d-flex flex-row justify-content-between">
<div class="collabo_user_list d-flex flex-row">
<div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
<div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
<div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
<div class="num"><span>10</span></div>
</div>
<div class="collabo_time">
<span>1:10:20</span>
</div>
</div>
<div class="collabo_btn">
<button type="button" name="button">
<img src="icon/icon_profile_phone.png" alt="通話">
<span>終了しました</span>
</button>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</main> </main>
...@@ -355,19 +105,26 @@ ...@@ -355,19 +105,26 @@
<footer class="chat_room_footer"> <footer class="chat_room_footer">
<!-- フッター上 --> <!-- フッター上 -->
<div class="footer-wrap d-flex flex-column"> <div class="footer-wrap d-flex flex-column">
<div>
<div class="msg_notification" id="messageNotification" style="text-align:center;display: none;">
</div>
</div>
<div class="footer_content_t"> <div class="footer_content_t">
<div class="d-flex flex-row h-100"> <div class="d-flex flex-row h-100">
<div class="footer_item"> <div class="footer_item attach_file">
<a href="#"> <img src="icon/icon_camera.png" alt="写真アイコン" id="imageInputButton">
<img src="icon/icon_camera.png" alt="写真アイコン"> <form id="image-form">
</a> <input class="d-none" type="file" name="image" id="imageInputTag" accept="image/x-png,image/jpeg">
</form>
</div> </div>
<div class="footer_item"> <div class="footer_item attach_file">
<a href="#"> <img src="icon/icon_videocam.png" alt="動画アイコン" id="videoUploadButton">
<img src="icon/icon_videocam.png" alt="動画アイコン"> <form id="video-form">
</a> <input class="d-none" type="file" name="image" id="videoInputTag" accept="video/mp4">
</form>
</div> </div>
<input type="text" name="message" placeholder="メッセージを入力してください"> <input type="text" name="message" class="message_input_form" id="messageInput" placeholder="メッセージを入力してください">
<button type="button" name="button" class="message_input_send none" id="messageSend" onclick="CHAT_UI.sendMessage(this);">送信</button>
</div> </div>
</div> </div>
<!-- フッター下 --> <!-- フッター下 -->
...@@ -407,15 +164,60 @@ ...@@ -407,15 +164,60 @@
</div> </div>
</div> </div>
</footer> </footer>
<div id="loadingArea"></div>
<div id="userProfileModal"></div>
<div id="chatMenuModal"></div>
<!-- メニューモーダル --> <!-- メニューモーダル -->
<!--#include virtual="modal_chat_menu.html" --> <!--#include virtual="modal_chat_menu.html" -->
<!-- プロフィールモーダル --> <!-- プロフィールモーダル -->
<!--#include virtual="modal_chat_profile.html" --> <!--#include virtual="modal_chat_profile.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/socket.io.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/chat.js"></script> <script src="./js/libs/locale/ko.js" charset="UTF-8"></script>
<script src="./js/common.js"></script> <script src="./js/libs/locale/ja.js" charset="UTF-8"></script>
<script src="./js/libs/mustache.min.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/common.js"></script>
<script src="./js/language.js"></script>
<script src="./js/language_ko.js" charset="UTF-8"></script>
<script src="./js/language_ja.js" charset="UTF-8"></script>
<script src="./js/language_en.js" charset="UTF-8"></script>
<script src="./js/constant.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/chat-ui.js"></script>
<script src="./js/chat-util.js"></script>
<script src="./js/chat-db.js"></script>
<script src="./js/chat-websocket.js"></script>
<script src="./js/chat-room.js"></script>
<script>
String.prototype.replaceAll = function(org, dest) {
return this.split(org).join(dest);
}
let CHAT_SERVER_URL = '';
let CMS_SERVER_URL = '';
let ASSET_PATH = './';
let PLATFORM = '';
let IS_MOBILE = true;
let IS_ONLINE = false;
$("#chatMenuModal").load("./modal_chat_menu.html");
$("#loadingArea").load("./loading.html");
android.getLoginParameter();
android.getGlobalParameter();
function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
CHAT_SERVER_URL = chatServerUrl;
CMS_SERVER_URL = cmsServerUrl;
PLATFORM = platform;
IS_MOBILE = isMobile;
IS_ONLINE = isOnline;
CHAT_UI.loadMessages(CHAT.globalLoginParameter.roomId, CHAT.globalLoginParameter.roomName);
};
</script>
</body> </body>
</html> </html>
public_new/contact.html
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<div class="col-4 pr-0"> <div class="col-4 pr-0">
<div class="nav-item"> <div class="nav-item">
<div class="nav_prev"> <div class="nav_prev">
<a href="#"><span>ホーム</span></a> <a href="#" class="home_btn"><span>ホーム</span></a>
</div> </div>
</div> </div>
</div> </div>
...@@ -51,11 +51,11 @@ ...@@ -51,11 +51,11 @@
<div class="content chat_list"> <div class="content chat_list">
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<a href="#" data-toggle="modal" data-target="#myNameCard" style="width: 100%;"> <a href="#" style="width: 100%;">
<div class="chat_item d-flex flex-row align-items-center"> <div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l"> <div class="chat_item_l">
<div class="thumbnail"> <div class="thumbnail">
<div class="img_wrap"><img id="myImg" src="img/noImage.png" alt="サムネイル画像" /></div> <div class="img_wrap"><img id="myImg" src="img/noImage.png" onError="this.src='./img/noImage.png'" /></div>
</div> </div>
</div> </div>
<div class="chat_item_m px-0"> <div class="chat_item_m px-0">
...@@ -179,7 +179,6 @@ ...@@ -179,7 +179,6 @@
<a href="chat.html"> <a href="chat.html">
<img src="icon/icon_chat_gray.png" alt="チャット"> <img src="icon/icon_chat_gray.png" alt="チャット">
<p>チャット</p> <p>チャット</p>
<span class="unread_num">999+</span>
</a> </a>
</div> </div>
<div class="footer_item"> <div class="footer_item">
...@@ -196,7 +195,6 @@ ...@@ -196,7 +195,6 @@
<div id="loadingArea"></div> <div id="loadingArea"></div>
<div id="myProfileModal"></div> <div id="myProfileModal"></div>
<div id="userProfileModal"></div> <div id="userProfileModal"></div>
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/locale/ko.js" charset="UTF-8"></script> <script src="./js/libs/locale/ko.js" charset="UTF-8"></script>
...@@ -206,6 +204,7 @@ ...@@ -206,6 +204,7 @@
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/contact.js"></script> <script src="./js/contact.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
<script src="./js/loading.js"></script>
<script src="./js/language.js"></script> <script src="./js/language.js"></script>
<script src="./js/language_ko.js" charset="UTF-8"></script> <script src="./js/language_ko.js" charset="UTF-8"></script>
<script src="./js/language_ja.js" charset="UTF-8"></script> <script src="./js/language_ja.js" charset="UTF-8"></script>
......
public_new/css/chat.css
...@@ -19,6 +19,9 @@ ...@@ -19,6 +19,9 @@
font-weight: bold; font-weight: bold;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.msg_notification {
display: none;
}
.tab_item:hover { .tab_item:hover {
opacity: 0.75; opacity: 0.75;
} }
...@@ -42,6 +45,11 @@ input[name="tab_item"] { ...@@ -42,6 +45,11 @@ input[name="tab_item"] {
display: block; display: block;
} }
#tabGroup:checked ~ #tab1_content,
#tabDM:checked ~ #tab2_content{
display: block;
}
.tabs input:checked + .tab_item { .tabs input:checked + .tab_item {
background-color: #0070CA; background-color: #0070CA;
color: #fff; color: #fff;
...@@ -127,7 +135,7 @@ input[name="tab_item"] { ...@@ -127,7 +135,7 @@ input[name="tab_item"] {
} }
.chat_item_l .thumbnail3 .img_wrap:nth-child(2) img, .chat_item_l .thumbnail3 .img_wrap:nth-child(3) img { .chat_item_l .thumbnail3 .img_wrap:nth-child(2) img, .chat_item_l .thumbnail3 .img_wrap:nth-child(3) img {
width: 25px; width: 25px;
height: 25px; height: 30px;
} }
.chat_item_l .thumbnail3 .img_wrap:nth-child(3) { .chat_item_l .thumbnail3 .img_wrap:nth-child(3) {
width: 25px; width: 25px;
...@@ -670,6 +678,18 @@ input[name="tab_item"] { ...@@ -670,6 +678,18 @@ input[name="tab_item"] {
background: #5B666F; background: #5B666F;
} }
.message_input_send {
border-radius: 8px;
margin: auto 10px;
text-align: center;
height: 45px;
width: 90px;
background: #0070CA;
color: #fff;
border: none;
font-size: 18px;
}
/**************************** modal *************************/ /**************************** modal *************************/
/* メニューモーダル */ /* メニューモーダル */
.menu_modal .modal-body ul { .menu_modal .modal-body ul {
......
public_new/js/chat-db.js
...@@ -3,12 +3,11 @@ var CHAT_DB = {}; ...@@ -3,12 +3,11 @@ var CHAT_DB = {};
//ロカールDBからルーム一覧情報を取得 //ロカールDBからルーム一覧情報を取得
CHAT_DB.getRoomList = function(roomType) { CHAT_DB.getRoomList = function(roomType, keyWord) {
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
return JSON.parse(iosRoomList); return JSON.parse(iosRoomList);
} else if (CHAT_UTIL.isAndroid()) { } else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn return JSON.parse(android.getRoomList(roomType, keyWord));
return JSON.parse(android.getRoomList(roomType));
} }
}; };
...@@ -29,14 +28,12 @@ CHAT_DB.callGetRoomList = function(roomType) { ...@@ -29,14 +28,12 @@ CHAT_DB.callGetRoomList = function(roomType) {
//ロカールDBからログインしたユーザのデータを取得する。 //ロカールDBからログインしたユーザのデータを取得する。
CHAT_DB.getMyInfo = function(input) { CHAT_DB.getMyInfo = function(input) {
var result = JSON.parse(android.getMyInfo());
CHAT.globalLoginParameter.shopMemberId = result.shopMemberId;
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要 //TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) { } else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn //String形式をJsonに変更してReturn
return result; return JSON.parse(android.getMyInfo());
} }
}; };
...@@ -89,7 +86,6 @@ CHAT_DB.getNameCardData = function(shopMemberId) { ...@@ -89,7 +86,6 @@ CHAT_DB.getNameCardData = function(shopMemberId) {
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要 //TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) { } else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getNameCardData(shopMemberId)); return JSON.parse(android.getNameCardData(shopMemberId));
} }
}; };
...@@ -121,6 +117,15 @@ CHAT_DB.getGroupByName = function(groupName) { ...@@ -121,6 +117,15 @@ CHAT_DB.getGroupByName = function(groupName) {
} }
}; };
CHAT_DB.getUsersInRoom = function(roomId) {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getUsersInRoom(roomId));
}
}
// アーカイブ一覧 // アーカイブ一覧
var iosArchiveList; var iosArchiveList;
......
public_new/js/chat-room.js 0 → 100644
var lastscrollvalue;
window.onscroll = function() {
var scrollPosition = window.scrollY || document.documentElement.scrollTop;
if (scrollPosition == 0) {
console.log('Scroll on TOP!!');
//TODO add getMessages(newLine);
if (CHAT_UTIL.isIOS()) {
} else if (CHAT_UTIL.isAndroid()) {
//android.getMessages()
}
}
}
/*
$('#messages').scroll(function() {
console.log('messagescroll');
if ($(this).scrollTop() === 0) {
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)
loader.remove();
// socket.emit('getMessages', $(this).children().length, function() {
// // ローディングアイコンを削除する
// loader.remove();
// });
}
}
});*/
public_new/js/chat-ui.js
...@@ -10,7 +10,7 @@ $(window).on('resize', function() { ...@@ -10,7 +10,7 @@ $(window).on('resize', function() {
console.log(`width : ${$(this).width()}`); console.log(`width : ${$(this).width()}`);
console.log(`height : ${$(this).height()}`); console.log(`height : ${$(this).height()}`);
if(CHAT_UI.isLandscapeMode()) { /*if(CHAT_UI.isLandscapeMode()) {
$(".group_list").addClass("col-6").removeClass("col-12"); $(".group_list").addClass("col-6").removeClass("col-12");
$(".user_list").addClass("col-6").removeClass("col-12"); $(".user_list").addClass("col-6").removeClass("col-12");
$(".chat_list").addClass("col-6").removeClass("col-12"); $(".chat_list").addClass("col-6").removeClass("col-12");
...@@ -24,16 +24,16 @@ $(window).on('resize', function() { ...@@ -24,16 +24,16 @@ $(window).on('resize', function() {
$(".chat_list").removeClass("col-6").addClass("col-12"); $(".chat_list").removeClass("col-6").addClass("col-12");
$(".squareBoxContent span").removeClass("landscape_span"); $(".squareBoxContent span").removeClass("landscape_span");
$(".mesgs").removeClass("landscape_mesgs"); $(".mesgs").removeClass("landscape_mesgs");
} }*/
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
if (isLandscape == true) { if (isLandscape == true) {
$(".mesgs").addClass("landscape_mesgs"); $(".mesgs").addClass("landscape_mesgs");
} else if (isLandscape == false) { } else if (isLandscape == false) {
$(".mesgs").removeClass("landscape_mesgs"); $(".mesgs").removeClass("landscape_mesgs");
} }
} }
}) })
// New Room // New Room
...@@ -191,46 +191,44 @@ CHAT_UI.setOrientation = function(isLandscapeMode) { ...@@ -191,46 +191,44 @@ CHAT_UI.setOrientation = function(isLandscapeMode) {
} }
} }
//メッセージ送信 CHAT_UI.sendMessage = function(e) {
$('#message-form').on('keypress', function(event) { const messageTextBox = $('#messageInput');
if (event.which == 13) {
// Enterキーの処理
$('#message-send-btn').click();
}
});
// 送信ボタンの処理
$('#message-send-btn').on('click', function(e) {
e.preventDefault();
const messageTextBox = $('#message-form');
const message = messageTextBox.val().length > 0 ? encodeURIComponent(messageTextBox.val() + " ") : ""; const message = messageTextBox.val().length > 0 ? encodeURIComponent(messageTextBox.val() + " ") : "";
messageTextBox.val(''); messageTextBox.val('');
if (message.length > 0) { if (message.length > 0) {
socket.emit( socket.emit(
//'createMessage', { text: '['+encodedText+'<&split>'+messageType.TEXT+']'; }
'createMessage', { text: message } 'createMessage', { text: message }
, 0 , 0
); );
} }
$('#message-form').focus(); $('.message_input_group').focus();
}
//メッセージ送信
$('#messageInput').on('keypress', function(event) {
if (event.which == 13) {
// Enterキーの処理
$('#messageSend').click();
}
}); });
// 写真アップロード // 写真アップロード
$('#fileUploadButton').on('click', function() { $('#imageInputButton').on('click', function() {
$('#imageInputTag').click(); $('#imageInputTag').click();
}); });
// 動画アップロード // 動画アップロード
$('#fileUploadButton2').on('click', function() { $('#videoUploadButton').on('click', function() {
$('#imageInputTag2').click(); $('#videoInputTag').click();
}); });
$('#imageInputTag').on('change', function() { $('#imageInputTag').on('change', function() {
$('#image-form').submit(); $('#image-form').submit();
}); });
$('#imageInputTag2').on('change', function() { $('#videoInputTag').on('change', function() {
$('#image-form2').submit(); $('#video-form').submit();
}); });
$('#image-form').on('submit', function(e) { $('#image-form').on('submit', function(e) {
...@@ -257,10 +255,10 @@ $('#image-form').on('submit', function(e) { ...@@ -257,10 +255,10 @@ $('#image-form').on('submit', function(e) {
} }
}); });
$('#image-form2').on('submit', function(e) { $('#video-form').on('submit', function(e) {
e.preventDefault(); e.preventDefault();
const imageInputTag2 = $('#imageInputTag2'); const videoInputTag = $('#videoInputTag');
const file = imageInputTag2.prop('files')[0]; const file = videoInputTag.prop('files')[0];
if (file) { if (file) {
$('.overlay').addClass('active undismissable'); $('.overlay').addClass('active undismissable');
$('.loader').addClass('active'); $('.loader').addClass('active');
...@@ -545,9 +543,12 @@ $('#pills-confirm-tab').on('shown.bs.tab', function(e) { ...@@ -545,9 +543,12 @@ $('#pills-confirm-tab').on('shown.bs.tab', function(e) {
}); });
CHAT_UI.scrollToBottom = function() { CHAT_UI.scrollToBottom = function() {
const messages = $('#messages'); const messages = $('.room_contents');
const scrollHeight = messages.prop('scrollHeight'); const scrollHeight = messages.prop('scrollHeight');
messages.scrollTop(scrollHeight); //messages.scrollTop(scrollHeight);
$('html, body').animate({
scrollTop: scrollHeight
}, 500);
}; };
CHAT_UI.scrollToLastMarkedUnseen = function(value) { CHAT_UI.scrollToLastMarkedUnseen = function(value) {
...@@ -565,12 +566,12 @@ CHAT_UI.scrollToLastMarkedUnseen = function(value) { ...@@ -565,12 +566,12 @@ CHAT_UI.scrollToLastMarkedUnseen = function(value) {
//loadingIndicatorを表示 //loadingIndicatorを表示
CHAT_UI.showLoadingIndicator = function() { CHAT_UI.showLoadingIndicator = function() {
$("#loadingIndicator").addClass('active undismissable'); $('.loading-indicator').css('display', 'block');
} }
//loadingIndicatorを表示しない //loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator = function() { CHAT_UI.dismissLoadingIndicator = function() {
$("#loadingIndicator").removeClass('active undismissable'); $('.loading-indicator').css('display', 'none');
} }
//画面の方向をcheck //画面の方向をcheck
...@@ -817,8 +818,8 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) { ...@@ -817,8 +818,8 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) {
$("#exitRoom").text(getLocalizedString("exitRoom")).append("<i class='fas fa-door-open'></i>") $("#exitRoom").text(getLocalizedString("exitRoom")).append("<i class='fas fa-door-open'></i>")
$("#participants").text(getLocalizedString("participants")) $("#participants").text(getLocalizedString("participants"))
$("#fileUploadButton").text(getLocalizedString("photo")) //$("#fileUploadButton").text(getLocalizedString("photo"))
$("#fileUploadButton2").text(getLocalizedString("video")) //$("#fileUploadButton2").text(getLocalizedString("video"))
$("#okayLabel").text(getLocalizedString("okayLabel")) $("#okayLabel").text(getLocalizedString("okayLabel"))
$("#completeLabel").text(getLocalizedString("completeLabel")) $("#completeLabel").text(getLocalizedString("completeLabel"))
...@@ -891,6 +892,7 @@ $('#chatButton').on('click', function(event) { ...@@ -891,6 +892,7 @@ $('#chatButton').on('click', function(event) {
}); });
CHAT_UI.refreshContactScreen = function() { CHAT_UI.refreshContactScreen = function() {
CHAT_UI.showLoadingIndicator();
$(".modal-backdrop").remove(); $(".modal-backdrop").remove();
$('#myProfileModal').html(''); $('#myProfileModal').html('');
$('#userProfileModal').html(''); $('#userProfileModal').html('');
...@@ -977,22 +979,6 @@ CHAT_UI.refreshContactScreen = function() { ...@@ -977,22 +979,6 @@ CHAT_UI.refreshContactScreen = function() {
let obj = jQuery.parseHTML(html); let obj = jQuery.parseHTML(html);
$('#favoriteList').append(obj); $('#favoriteList').append(obj);
/*favoriteUserList.forEach(function(favoriteUser) {
favoriteUser.profileImagePath = CHAT.getProfileImgUrl(favoriteUser.profileUrl)
let html = Mustache.render(userTemplate, {
shopMemberId: favoriteUser.shopMemberId,
profileImage: favoriteUser.profileImagePath,
name: favoriteUser.shopMemberName,
isFavorite: true
});
let obj = $(jQuery.parseHTML(html)).on('click', function() {
});
$('#favoriteList').append(obj);
})*/
var myGroupList = CHAT_DB.getMyGroupUsers(); var myGroupList = CHAT_DB.getMyGroupUsers();
myGroupList.forEach(function(myGroup) { myGroupList.forEach(function(myGroup) {
...@@ -1008,32 +994,46 @@ CHAT_UI.refreshContactScreen = function() { ...@@ -1008,32 +994,46 @@ CHAT_UI.refreshContactScreen = function() {
$('#myGroupList').append(obj); $('#myGroupList').append(obj);
}) })
CHAT_UI.dismissLoadingIndicator();
} }
CHAT_UI.refreshRoomList = function(roomType) { CHAT_UI.refreshRoomList = function(roomType) {
var rooms = CHAT_DB.getRoomList(roomType); if (roomType == chatRoomType.DM) {
$('#tabDM').prop('checked', true);
} else {
$('#tabGroup').prop('checked', true);
}
if (IS_ONLINE == 'true') {
android.updateRoomList();
}
var rooms = CHAT_DB.getRoomList(roomType, null);
CHAT.globalIsInvite = false; CHAT.globalIsInvite = false;
activeRoomId = null; activeRoomId = null;
// #36146に対応 // #36146に対応
let keywordSearchMode = false; $('#groupChatList').empty();
if ($('#room-search').val().length > 0) { $('#dmChatList').empty();
keywordSearchMode = true;
}
$('#room_list').html('');
let roomListTitle = getLocalizedString("roomListTitle"); let roomListTitle = getLocalizedString("roomListTitle");
$('.titleRoomName').text(roomListTitle); $('#chatTitle').text(roomListTitle);
if (rooms.length === 0) { if (rooms.length === 0) {
// 検索結果がない場合のメッセージを追加 // 検索結果がない場合のメッセージを追加
if (!keywordSearchMode) { let emptyListString = getLocalizedString("roomListEmptyString")
let emptyListString = getLocalizedString("roomListEmptyString") switch(roomType) {
$('#room_list').append(`<center class="text-secondary">${emptyListString}</center>`); case chatRoomType.GROUP:
} else { $('#groupChatList').append(`<center class="text-secondary">${emptyListString}</center>`);
let emptyListString = getLocalizedString("searchRoomListEmptyString") break;
$('#room_list').append(`<center class="text-secondary">${emptyListString}</center>`); case chatRoomType.DM:
} $('#dmChatList').append(`<center class="text-secondary">${emptyListString}</center>`);
break;
default:
}
} }
// チャットルームの様式を読み込む
const template = $('#room-template').html(); var template;
$.get({ url: "./template/template_room_list.html", async: false }
, function(text) {
template = text;
});
rooms.forEach(function(room) { rooms.forEach(function(room) {
room.profileImagePath = ASSET_PATH + 'images/user-profile.png' room.profileImagePath = ASSET_PATH + 'images/user-profile.png'
if (room.message) { if (room.message) {
...@@ -1045,148 +1045,183 @@ CHAT_UI.refreshRoomList = function(roomType) { ...@@ -1045,148 +1045,183 @@ CHAT_UI.refreshRoomList = function(roomType) {
//TODO 協業の場合処理追加必要 //TODO 協業の場合処理追加必要
if (room.messageType == messageType.TEXT || room.messageType == messageType.TEXT) displayMsg = room.message; if (room.messageType == messageType.TEXT || room.messageType == messageType.TEXT) displayMsg = room.message;
if (room.messageType == messageType.IMAGE || room.messageType == messageType.SYSTEM) displayMsg = getLocalizedString("image"); if (room.messageType == messageType.IMAGE || room.messageType == messageType.SYSTEM) displayMsg = getLocalizedString("image");
var attendUserName = [];
room.attendUsers.forEach(function(user) {
user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
attendUserName.push(user.shopMemberName);
});
var thumbnailCount = room.attendUsers.length > 4 ? 4 : room.attendUsers.length;
if (room.chatRoomName == "") {
room.chatRoomName = attendUserName.join(', ');
}
let html = Mustache.render(template, { let html = Mustache.render(template, {
thumbnailCount: thumbnailCount,
roomName: room.chatRoomName, roomName: room.chatRoomName,
roomId: room.chatRoomId, roomId: room.chatRoomId,
profileImage: room.profileImagePath, profileImage: room.profileImagePath,
active: activeRoomId === room.chatRoomId ? 'active_chat' : null, // 現在、入っているルームだとhilight表示
lastMessage: displayMsg , lastMessage: displayMsg ,
time: room.insertDate ? CHAT_UTIL.formatDate(room.insertDate).createdAt : '', time: room.insertDate ? CHAT_UTIL.formatDate(room.insertDate).createdAt : '',
unreadMsgCnt: room.unreadCount == 0 ? '' : room.unreadCount, unreadMsgCnt: room.unreadCount == 0 ? '' : room.unreadCount,
userCnt: room.userCount userCnt: room.attendUsers.length + 1,
attendUsers: room.attendUsers
}); });
// Click event // Click event
let obj = $(jQuery.parseHTML(html)).on('click', function() { let obj = $(jQuery.parseHTML(html)).on('click', function() {
let roomId = $(this).data('roomId'); /* let roomId = $(this).data('roomId');
let roomName = $(this).data('roomname'); let roomName = $(this).data('roomname');
CHAT_UI.joinRoom(roomId,roomName); CHAT_UI.joinRoom(roomId,roomName);*/
//TODO ルームに入る処理追加必要 //TODO ルームに入る処理追加必要
}); });
// チャットルームリストに追加する // ルームグループごとに追加。
$('#room_list').append(obj); switch(roomType) {
case chatRoomType.GROUP:
$('#groupChatList').append(obj);
break;
case chatRoomType.DM:
$('#dmChatList').append(obj);
break;
default:
}
}); });
if (rooms.length > 0) {
if (!keywordSearchMode) {
$(".roomListIcon").show()
$('#roomDeleteButton, #arrangeRooms').show()
} else {
$(".roomListIcon").show()
$('#roomDeleteButton, #arrangeRooms').hide()
}
} else {
if (!keywordSearchMode) {
$(".roomListIcon").hide()
} else {
$(".roomListIcon").show()
$('#roomDeleteButton, #arrangeRooms').hide()
}
}
$('#createChatRoom').show();
if (CHAT_UI.isLandscapeMode()) { if (CHAT_UI.isLandscapeMode()) {
$(".chat_list").removeClass("col-12").addClass("col-6"); $(".chat_list").removeClass("col-12").addClass("col-6");
} }
$("#userSelectionDeleteBtn").hide();
// チャットルームリスト画面に遷移
$('#pills-chatlist-tab').tab('show');
// loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator();
}; };
CHAT_UI.joinRoom = function(roomId,roomName) { CHAT_UI.joinRoom = function(roomId,roomName) {
//native側に入場対象のroomId,roomNameを保存。(ルーム詳細画面初期化の時に使用。)
android.joinRoom(roomId,roomName);
};
CHAT_UI.loadMessages = function(roomId, roomName) {
if (IS_ONLINE == 'true') { if (IS_ONLINE == 'true') {
CHAT_SOCKET.connectSocket();
android.updateMessages(roomId); android.updateMessages(roomId);
socket.emit('exitRoom',roomId);
socket.emit('joinRoom', roomId, roomName, function() { socket.emit('joinRoom', roomId, roomName, function() {
}); });
} }
var roomType = android.getRoomType();
if (roomType == chatRoomType.DM) {
$('#roomMenu').removeClass('none');
}
var messages = CHAT_DB.getMessages(roomId); var messages = CHAT_DB.getMessages(roomId);
CHAT_UI.loadMessages(messages, roomId, roomName) var usersInRoom = CHAT_DB.getUsersInRoom(roomId);
};
CHAT_UI.loadMessages = function(messages, roomId, roomName) { $('#roomTitle').text(roomName).data('roomName', roomName);
$('#messages').html('');
$('.titleRoomName').text(roomName).data('roomName', roomName);
$('#pills-chat-tab').tab('show');
$("#message-search").attr("placeholder", getLocalizedString("chat_search_placeholder"));
let jQueryMessages = $('#messages'); let jQueryMessages = $('#messages');
// スクロールの変化を防ぐため以前画面の高さを保存する // スクロールの変化を防ぐため以前画面の高さを保存する
let beforeHeight = jQueryMessages.prop('scrollHeight'); let beforeHeight = jQueryMessages.prop('scrollHeight');
// メッセージ文字列の生成 // メッセージ文字列の生成
let workVal = ""; let workVal = "";
messages.forEach(function(message) { var userTemplate;
let template = $('#message-template').html(); $.get({ url: "./template/template_user_list.html", async: false }
if (message.selfFlg == 1) { , function(text) {
template = $('#message-template-me').html(); userTemplate = text;
} });
let messageTime = CHAT_UTIL.formatDate(message.insertDate); var userMessageTemplate;
$.get({ url: "./template/template_user_message.html", async: false }
if (message.profileUrl) { , function(text) {
message.profileImagePath = CHAT.getProfileImgUrl(message.profileUrl) userMessageTemplate = text;
} else { });
message.profileImagePath = CHAT.getProfileImgUrl("") var myMessageTemplate;
} $.get({ url: "./template/template_my_message.html", async: false }
, function(text) {
myMessageTemplate = text;
});
var systemMessageTemplate;
$.get({ url: "./template/template_system_message.html", async: false }
, function(text) {
systemMessageTemplate = text;
});
var topUserListTemplate;
$.get({ url: "./template/template_chatroom_user_list.html", async: false }
, function(text) {
topUserListTemplate = text;
});
// #36147 usersInRoom.forEach(function(user) {
message.message = message.message.toString(); user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
var replacePath = message.message; });
replacePath = replacePath.replaceAll('/acms',CHAT_SERVER_URL+'/acms'); let html = Mustache.render(topUserListTemplate, {
message.message = replacePath; userList: usersInRoom
let html = Mustache.render(template, { });
text: message.message, let obj = jQuery.parseHTML(html);
from: message.loginId, $('#user_list').append(obj);
shopMemberId: message.shopMemberId, messages.forEach(function(message) {
profileImage: message.profileImagePath, let template = userMessageTemplate;
createdAtDay: messageTime.createdAtDay, if (message.shopMemberId == CHAT.globalLoginParameter.shopMemberId) {
createdAtTime: messageTime.createdAtTime template = myMessageTemplate;
}); }
html = message.message.includes('attachedImages') || message.message.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html; if (message.messageType == messageType.SYSTEM) {
workVal = html + workVal; template = systemMessageTemplate;
}) }
let messageTime = CHAT_UTIL.formatDate(message.insertDate);
// ユーザの様式を読み込む
// メッセージの画面描画 if (message.profileUrl) {
jQueryMessages.prepend(workVal); message.profileUrl = CHAT.getProfileImgUrl(message.profileUrl)
if (beforeHeight !== 0) {
// 追加のメッセージ読み込み時は読み込み前のスクロール位置を維持
setTimeout(function() {
jQueryMessages.scrollTop(jQueryMessages.prop('scrollHeight') - beforeHeight);
}, 400);
} else { } else {
// 新規に入室の場合は最下部へスクロール message.profileUrl = CHAT.getProfileImgUrl("")
CHAT_UI.waitForLoadingImage(jQueryMessages, CHAT_UI.scrollToBottom);
// タブレット等、画面サイズが大きい場合、スクロール出来なくならないよう追加で10件メッセージを取得
if ($(window).height() > jQueryMessages.height()) {
$('#messages').scroll();
}
} }
// ユーザ削除ボタン表示しない // #36147
$("#userSelectionDeleteBtn").hide(); message.message = message.message.toString();
var replacePath = message.message;
CHAT_UI.dismissLoadingIndicator();// add some... replacePath = replacePath.replaceAll('?fileName=', '?sid=' + CHAT.globalLoginParameter.sid + '&fileName=');
message.message = replacePath;
/* if (message.message contain) {
}*/
let html = Mustache.render(template, {
text: message.message,
from: message.loginId,
shopMemberId: message.shopMemberId,
profileImage: message.profileUrl,
createdAtDay: messageTime.createdAtDay,
createdAtTime: messageTime.createdAtTime
});
html = message.message.includes('attachedImages') || message.message.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
workVal = html + workVal;
})
// チャットに遷移する // メッセージの画面描画
$('#pills-chat-tab').tab('show'); jQueryMessages.prepend(workVal);
if (beforeHeight !== 0) {
// 追加のメッセージ読み込み時は読み込み前のスクロール位置を維持
setTimeout(function() {
jQueryMessages.scrollTop(jQueryMessages.prop('scrollHeight') - beforeHeight);
}, 400);
} else {
// 新規に入室の場合は最下部へスクロール
CHAT_UI.waitForLoadingImage(jQueryMessages, CHAT_UI.scrollToBottom);
// タブレット等、画面サイズが大きい場合、スクロール出来なくならないよう追加で10件メッセージを取得
if ($(window).height() > jQueryMessages.height()) {
$('#messages').scroll();
}
}
CHAT_UI.waitForLoadingImage(jQueryMessages, CHAT_UI.scrollToBottom);
// ユーザ削除ボタン表示しない
$("#userSelectionDeleteBtn").hide();
CHAT_UI.scrollToBottom();
}; };
$('#dmBtn').on('click', function(e) { $('#tabDM').on('click', function(e) {
CHAT_UI.refreshRoomList(chatRoomType.DM); CHAT_UI.refreshRoomList(chatRoomType.DM);
}); });
$('#groupBtn').on('click', function(e) { $('#tabGroup').on('click', function(e) {
CHAT_UI.refreshRoomList(chatRoomType.GROUP); CHAT_UI.refreshRoomList(chatRoomType.GROUP);
}); });
$('#myGroupBtn').on('click', function(e) { $('#tabAllGroup').on('click', function(e) {
$('#myGroupArea').show(); CHAT_UI.refreshAllGroupSearch('0');
$('#allGroupArea').hide();
}); });
$('#tabAllGroup').on('click', function(e) { $('#tabMyGroup').on('click', function(e) {
CHAT_UI.refreshAllGroupSearch('0') CHAT_UI.refreshContactScreen();
}); });
CHAT_UI.favoriteUserChange = function(shopMemberId, star) { CHAT_UI.favoriteUserChange = function(shopMemberId, star) {
...@@ -1206,36 +1241,45 @@ CHAT_UI.favoriteGroupChange = function(groupId, star) { ...@@ -1206,36 +1241,45 @@ CHAT_UI.favoriteGroupChange = function(groupId, star) {
} }
CHAT_UI.removeFavoriteUser = function(shopMemberId) { CHAT_UI.removeFavoriteUser = function(shopMemberId) {
CHAT_UI.showLoadingIndicator();
$('#userNameCard').modal('hide'); $('#userNameCard').modal('hide');
$('#myNameCard').modal('hide'); $('#myNameCard').modal('hide');
android.removeFavoriteUser(shopMemberId); android.removeFavoriteUser(shopMemberId);
$('.shopmember_'+shopMemberId).removeClass('active'); $('.shopmember_'+shopMemberId).removeClass('active');
$('.shopmember_'+shopMemberId).addClass('disable'); $('.shopmember_'+shopMemberId).addClass('disable');
CHAT_UI.dismissLoadingIndicator();
}; };
CHAT_UI.insertFavoriteUser = function(shopMemberId) { CHAT_UI.insertFavoriteUser = function(shopMemberId) {
CHAT_UI.showLoadingIndicator();
$('#userNameCard').modal('hide'); $('#userNameCard').modal('hide');
$('#myNameCard').modal('hide'); $('#myNameCard').modal('hide');
android.addFavoriteUser(shopMemberId); android.addFavoriteUser(shopMemberId);
$('.shopmember_'+shopMemberId).removeClass('disable'); $('.shopmember_'+shopMemberId).removeClass('disable');
$('.shopmember_'+shopMemberId).addClass('active'); $('.shopmember_'+shopMemberId).addClass('active');
CHAT_UI.dismissLoadingIndicator();
}; };
CHAT_UI.removeFavoriteGroup = function(groupId) { CHAT_UI.removeFavoriteGroup = function(groupId) {
CHAT_UI.showLoadingIndicator();
android.removeFavoriteGroup(groupId); android.removeFavoriteGroup(groupId);
$('.group_'+groupId).removeClass('active'); $('.group_'+groupId).removeClass('active');
$('.group_'+groupId).addClass('disable'); $('.group_'+groupId).addClass('disable');
CHAT_UI.dismissLoadingIndicator();
}; };
CHAT_UI.insertFavoriteGroup = function(groupId) { CHAT_UI.insertFavoriteGroup = function(groupId) {
CHAT_UI.showLoadingIndicator();
android.addFavoriteGroup(groupId); android.addFavoriteGroup(groupId);
$('.group_'+groupId).removeClass('disable'); $('.group_'+groupId).removeClass('disable');
$('.group_'+groupId).addClass('active'); $('.group_'+groupId).addClass('active');
CHAT_UI.dismissLoadingIndicator();
}; };
//全グループ検索画面表示。 //全グループ検索画面表示。
CHAT_UI.refreshAllGroupSearch = function(groupId) { CHAT_UI.refreshAllGroupSearch = function(groupId) {
CHAT_UI.showLoadingIndicator();
$('#userNameCard').modal('hide');
$('.cancel').addClass('none'); $('.cancel').addClass('none');
$('.search_form input').removeClass('focus'); $('.search_form input').removeClass('focus');
$('.search_form input').val(''); $('.search_form input').val('');
...@@ -1301,7 +1345,8 @@ CHAT_UI.refreshAllGroupSearch = function(groupId) { ...@@ -1301,7 +1345,8 @@ CHAT_UI.refreshAllGroupSearch = function(groupId) {
result.childGroupList.forEach(function(childGroup) { result.childGroupList.forEach(function(childGroup) {
let html = Mustache.render(groupTemplate, { let html = Mustache.render(groupTemplate, {
name: childGroup.groupName, name: childGroup.groupName,
id: childGroup.groupId id: childGroup.groupId,
isFavorite: childGroup.isFavorite
}); });
let obj = $(jQuery.parseHTML(html)).on('click', function() { let obj = $(jQuery.parseHTML(html)).on('click', function() {
...@@ -1324,6 +1369,7 @@ CHAT_UI.refreshAllGroupSearch = function(groupId) { ...@@ -1324,6 +1369,7 @@ CHAT_UI.refreshAllGroupSearch = function(groupId) {
}); });
let obj = jQuery.parseHTML(html); let obj = jQuery.parseHTML(html);
$('#userInGroupList').append(obj); $('#userInGroupList').append(obj);
CHAT_UI.dismissLoadingIndicator();
} }
...@@ -1340,23 +1386,21 @@ CHAT_UI.startChat = function(userShopMemberId,userName) { ...@@ -1340,23 +1386,21 @@ CHAT_UI.startChat = function(userShopMemberId,userName) {
}; };
CHAT_UI.startVoice = function() { CHAT_UI.startVoice = function() {
console.log("VoiceClick");
}; };
CHAT_UI.makeNameCard = function(shopMemberId) { CHAT_UI.makeNameCard = function(shopMemberId) {
var nameCardInfo = CHAT_DB.getNameCardData(shopMemberId); var nameCardInfo = CHAT_DB.getNameCardData(shopMemberId);
var namecardTemplate; var namecardTemplate;
$.get({ url: "./template/template_user_name_card.html", async: false } $.get({ url: "./template/template_user_name_card.html", async: false }
, function(text) { , function(text) {
namecardTemplate = text; namecardTemplate = text;
}); });
nameCardInfo.profileUrl = CHAT.getProfileImgUrl(nameCardInfo.profileUrl);
let namecardHtml = Mustache.render(namecardTemplate, { let namecardHtml = Mustache.render(namecardTemplate, {
shopMemberId: nameCardInfo.shopMemberId, shopMemberId: nameCardInfo.shopMemberId,
profileImage: nameCardInfo.profileImagePath, profileUrl: nameCardInfo.profileUrl,
name: nameCardInfo.shopMemberName, name: nameCardInfo.shopMemberName,
groupPathList: nameCardInfo.groupPathList, groupPathList: nameCardInfo.groupPathList,
chat: getLocalizedString("chat"), chat: getLocalizedString("chat"),
......
public_new/js/chat-websocket.js
...@@ -4,25 +4,16 @@ var socket; ...@@ -4,25 +4,16 @@ var socket;
var CHAT_SOCKET = {}; var CHAT_SOCKET = {};
CHAT_SOCKET.connectSocket = function () { CHAT_SOCKET.connectSocket = function () {
CHAT_UI.dismissLoadingIndicator();
if (IS_ONLINE == 'true') { if (IS_ONLINE == 'true') {
socket = io(CHAT_SERVER_URL); socket = io(CHAT_SERVER_URL);
console.log(socket);
setSocketAction(); setSocketAction();
android.updateRoomList();
CHAT_UI.refreshRoomList(chatRoomType.DM);
CHAT_UI.dismissLoadingIndicator();
$('#createChatRoom').show();
} else { } else {
//オフラインの場合、DBからルーム一覧を表示。 //オフラインの場合、DBからルーム一覧を表示。
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
//TODO IOSの場合 //TODO IOSの場合
} else if (CHAT_UTIL.isAndroid()) { } else if (CHAT_UTIL.isAndroid()) {
//$('.overlay').removeClass('active undismissable');
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
CHAT_UI.refreshRoomList(chatRoomType.DM);
CHAT_UI.dismissLoadingIndicator();
$('#createChatRoom').show();
} }
} }
}; };
...@@ -172,12 +163,28 @@ function setSocketAction () { ...@@ -172,12 +163,28 @@ function setSocketAction () {
// New Message // New Message
// #36170 // #36170
socket.on('newMessage', function(message, roomId, roomName) { socket.on('newMessage', function(message, roomId, roomName) {
let template = $('#message-template').html(); let messageTime = CHAT_UTIL.formatDate(message.createdAt);
var userMessageTemplate;
$.get({ url: "./template/template_user_message.html", async: false }
, function(text) {
userMessageTemplate = text;
});
var myMessageTemplate;
$.get({ url: "./template/template_my_message.html", async: false }
, function(text) {
myMessageTemplate = text;
});
var systemMessageTemplate;
$.get({ url: "./template/template_system_message.html", async: false }
, function(text) {
systemMessageTemplate = text;
});
let template = userMessageTemplate;
if (message.id === socket.id) { if (message.id === socket.id) {
// ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する // ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する
template = $('#message-template-me').html(); template = myMessageTemplate;
} }
let messageTime = CHAT_UTIL.formatDate(message.createdAt);
message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath) message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath)
try { try {
...@@ -185,7 +192,9 @@ function setSocketAction () { ...@@ -185,7 +192,9 @@ function setSocketAction () {
} catch(e) { } catch(e) {
message.text = message.text message.text = message.text
} }
var replacePath = message.text;
replacePath = replacePath.replaceAll('?fileName=', '?sid=' + CHAT.globalLoginParameter.sid + '&fileName=');
message.text = replacePath;
let html = Mustache.render(template, { let html = Mustache.render(template, {
text: message.text, text: message.text,
from: message.from, from: message.from,
...@@ -200,7 +209,7 @@ function setSocketAction () { ...@@ -200,7 +209,7 @@ function setSocketAction () {
// 画像、動画の描画を待ってからスクロール // 画像、動画の描画を待ってからスクロール
setTimeout(function () { setTimeout(function () {
CHAT_UI.scrollToBottom(); CHAT_UI.scrollToBottom();
}, 1500); }, 300);
}); });
// Notification // Notification
...@@ -280,7 +289,10 @@ function setSocketAction () { ...@@ -280,7 +289,10 @@ function setSocketAction () {
// Update User List In Room // Update User List In Room
// サイドバーのユーザーリストアップデート。 // サイドバーのユーザーリストアップデート。
socket.on('updateUserList', function(users, onlineUsers) { /* socket.on('updateUserList', function(users, onlineUsers) {
console.log(users);
console.log(onlineUsers);
if (users.length > 0) { if (users.length > 0) {
$('#users').removeData(); $('#users').removeData();
$('#users').data(users); $('#users').data(users);
...@@ -318,7 +330,7 @@ function setSocketAction () { ...@@ -318,7 +330,7 @@ function setSocketAction () {
ul.append(li); ul.append(li);
}); });
$('#users').html(ul); $('#users').html(ul);
}); });*/
// Update Group List(Invite) // Update Group List(Invite)
socket.on('refreshGroupList', function(groups, isInvite) { socket.on('refreshGroupList', function(groups, isInvite) {
......
public_new/js/chat.js
...@@ -88,16 +88,16 @@ CHAT.createVideoThumbnailAndUpload = function(sourceImage, callback) { ...@@ -88,16 +88,16 @@ CHAT.createVideoThumbnailAndUpload = function(sourceImage, callback) {
// Ajaxでイメージをアップロードする // Ajaxでイメージをアップロードする
CHAT.uploadImage = function(formData) { CHAT.uploadImage = function(formData) {
formData.append('roomId', CHAT.globalLoginParameter.roomId); formData.append('roomId', CHAT.globalLoginParameter.roomId);
formData.append('sid', CHAT.globalLoginParameter.sid);
jQuery.ajax({ jQuery.ajax({
async: true, async: true,
url: CMS_SERVER_URL+"/file/upload", url: CMS_SERVER_URL+"/chatapi/file/upload",
type: "post", type: "post",
data: formData, data: formData,
contentType: false, contentType: false,
processData: false processData: false
}).done(function(res) { }).done(function(res) {
// 8 var imgPath = CMS_SERVER_URL + '/chatapi/file/getImage?fileName=' + res.fileName + '&roomId=' + CHAT.globalLoginParameter.roomId;
var imgPath = CMS_SERVER_URL + '/file/getImage?fileName=' + res.fileName + '&roomId=' + CHAT.globalLoginParameter.roomId;
var imageName = res.fileName var imageName = res.fileName
// uploadFileの判断 // uploadFileの判断
...@@ -106,11 +106,10 @@ CHAT.uploadImage = function(formData) { ...@@ -106,11 +106,10 @@ CHAT.uploadImage = function(formData) {
// 画像の処理 // 画像の処理
if (res.fileType == "jpeg" || res.fileType == "jpg" || res.fileType == "png") { if (res.fileType == "jpeg" || res.fileType == "jpg" || res.fileType == "png") {
if (res.thumbnailPath && res.thumbnailPath.length > 0) { if (res.thumbnailPath && res.thumbnailPath.length > 0) {
imgPath = CMS_SERVER_URL + '/file/getImage?fileName=' + res.thumbImageFileName + '&roomId=' + CHAT.globalLoginParameter.roomId; imgPath = CMS_SERVER_URL + '/chatapi/file/getImage?fileName=' + res.thumbImageFileName + '&roomId=' + CHAT.globalLoginParameter.roomId;
imageName = res.thumbImageFileName; imageName = res.thumbImageFileName;
} }
let downloadPath = CMS_SERVER_URL + '/chatapi/file/download?fileName=' + imageName + '&roomId=' + CHAT.globalLoginParameter.roomId;
let downloadPath = CMS_SERVER_URL + '/file/download?fileName=' + imageName + '&roomId=' + CHAT.globalLoginParameter.roomId;
// アップロードが終了した後ローディング画面から離れてメッセージをメッセージを転送する // アップロードが終了した後ローディング画面から離れてメッセージをメッセージを転送する
const lightbox = $('<a/>',{href:imgPath, 'data-lightbox':'attachedImages','data-title':imageName}); const lightbox = $('<a/>',{href:imgPath, 'data-lightbox':'attachedImages','data-title':imageName});
const image = $('<img/>',{src:imgPath, width:'auto',style:'max-width:100%'}); const image = $('<img/>',{src:imgPath, width:'auto',style:'max-width:100%'});
...@@ -127,15 +126,16 @@ CHAT.uploadImage = function(formData) { ...@@ -127,15 +126,16 @@ CHAT.uploadImage = function(formData) {
} }
socket.emit('createMessage', { socket.emit('createMessage', {
//text: '['+encodedText+'<&split>'+messageType.IMAGE+']'
text: encodedText text: encodedText
}, 1); }, 1);
} else { // 動画の処理 } else { // 動画の処理
if (res.thumbnailPath && res.thumbnailPath.length > 0) { if (res.thumbnailPath && res.thumbnailPath.length > 0) {
imgPath = CMS_SERVER_URL + '/file/getImage?fileName=' + res.thumbImageFileName + '&roomId=' + CHAT.globalLoginParameter.roomId; imgPath = CMS_SERVER_URL + '/chatapi/file/getImage?fileName=' + res.thumbImageFileName + '&roomId=' + CHAT.globalLoginParameter.roomId;
} }
let downloadPath = CMS_SERVER_URL + '/file/download?fileName=' + imageName + '&roomId=' + CHAT.globalLoginParameter.roomId; let downloadPath = CMS_SERVER_URL + '/chatapi/file/download?fileName=' + imageName + '&roomId=' + CHAT.globalLoginParameter.roomId;
const aTag = $('<a/>', {id:"attachedImages"}) const aTag = $('<a/>', {id:"attachedImages"})
const image = $('<img/>',{src:imgPath, width:'auto',style:'max-width:100%'}); const image = $('<img/>',{src:imgPath, width:'auto',style:'max-width:100%'});
const downloadIcon = $('<a/>',{href:downloadPath, class:'fa fa-download', download:res.fileName}); const downloadIcon = $('<a/>',{href:downloadPath, class:'fa fa-download', download:res.fileName});
...@@ -152,6 +152,7 @@ CHAT.uploadImage = function(formData) { ...@@ -152,6 +152,7 @@ CHAT.uploadImage = function(formData) {
} }
socket.emit('createMessage', { socket.emit('createMessage', {
//text: '['+encodedText+'<&split>'+messageType.VIDEO+']'
text: encodedText text: encodedText
}, 1); }, 1);
} }
...@@ -215,13 +216,14 @@ CHAT.createThumbnailAndUpload = function(sourceImage, callback) { ...@@ -215,13 +216,14 @@ CHAT.createThumbnailAndUpload = function(sourceImage, callback) {
} }
// 該当チャットルームに参加するためログイン情報をサーバに渡す // 該当チャットルームに参加するためログイン情報をサーバに渡す
getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomName = undefined, languageCode) { getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomName = undefined, languageCode, shopMemberId) {
var loginParam = new Object() var loginParam = new Object()
loginParam.sid = sid; loginParam.sid = sid;
loginParam.loginId = loginId; loginParam.loginId = loginId;
loginParam.shopName = shopName; loginParam.shopName = shopName;
loginParam.roomId = roomId; loginParam.roomId = roomId;
loginParam.roomName = roomName; loginParam.roomName = roomName;
loginParam.shopMemberId = shopMemberId;
CHAT.globalLoginParameter = loginParam; CHAT.globalLoginParameter = loginParam;
...@@ -269,19 +271,6 @@ CHAT.leaveRoom = function() { ...@@ -269,19 +271,6 @@ CHAT.leaveRoom = function() {
}); });
} }
CHAT.requestMyinfo = function() {
jQuery.ajax({
async: true,
url: CMS_SERVER_URL + "/chatapi/user?sid=" + CHAT.globalLoginParameter.sid + "&cmd=" + userAPICmd.MYINFO,
type: "get",
processData: false,
contentType: false
}).done(function(res) {
console.log(res);
return res;
})
}
$(function() { $(function() {
// ルーム開設メンバー数カウント // ルーム開設メンバー数カウント
$('input:checkbox').change(function() { $('input:checkbox').change(function() {
...@@ -346,15 +335,70 @@ $(function() { ...@@ -346,15 +335,70 @@ $(function() {
$(this).toggleClass("filter"); $(this).toggleClass("filter");
}); });
$('#chat .search_form input[type="search"]').click(function(){
let roomListTitle = getLocalizedString("room_search_placeholder");
$('#chatTitle').text(roomListTitle);
});
$('#chat .search_form .cancel').click(function(){
let roomListTitle = getLocalizedString("roomListTitle");
$('#chatTitle').text(roomListTitle);
});
// チャットメンバー検索 // チャットメンバー検索
$('#chat .search_form input[type="search"]').keyup(function(){ $('#chat .search_form input[type="search"]').keyup(function(){
$.ajax({ $('.overlay_src_msg').empty();
url: 'search_message_user_list.html', var keyword = $('#chat .search_form input[type="search"]').val();
type: 'POST', if (keyword == '' || keyword.length < 2) {
datatype: 'html' return;
}).done(function (data) { }
$('.overlay_src_msg').html(data); var rooms = CHAT_DB.getRoomList(chatRoomType.ALL, keyword);
}) let roomListTitle = getLocalizedString("room_search_placeholder");
$('#chatTitle').text(roomListTitle);
var template;
$.get({ url: "./template/template_room_list.html", async: false }
, function(text) {
template = text;
});
rooms.forEach(function(room) {
room.profileImagePath = ASSET_PATH + 'images/user-profile.png'
if (room.message) {
room.message = room.message.toString()
} else {
room.message = getLocalizedString("noMessages")
}
var displayMsg;
if (room.messageType == messageType.TEXT || room.messageType == messageType.TEXT) displayMsg = room.message;
if (room.messageType == messageType.IMAGE || room.messageType == messageType.SYSTEM) displayMsg = getLocalizedString("image");
var attendUserName = [];
room.attendUsers.forEach(function(user) {
user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
attendUserName.push(user.shopMemberName);
});
var thumbnailCount = room.attendUsers.length > 4 ? 4 : room.attendUsers.length;
if (room.chatRoomName == "") {
room.chatRoomName = attendUserName.join(', ');
}
let html = Mustache.render(template, {
thumbnailCount: thumbnailCount,
roomName: room.chatRoomName,
roomId: room.chatRoomId,
profileImage: room.profileImagePath,
lastMessage: displayMsg ,
time: room.insertDate ? CHAT_UTIL.formatDate(room.insertDate).createdAt : '',
unreadMsgCnt: room.unreadCount == 0 ? '' : room.unreadCount,
userCnt: room.attendUsers.length + 1,
attendUsers: room.attendUsers
});
// Click event
let obj = $(jQuery.parseHTML(html)).on('click', function() {
});
$('.overlay_src_msg').append(obj);
});
if (CHAT_UI.isLandscapeMode()) {
$(".chat_list").removeClass("col-12").addClass("col-6");
}
}); });
// ルームメンバー検索 // ルームメンバー検索
$('#chat_room .search_form input[type="search"]').keyup(function(){ $('#chat_room .search_form input[type="search"]').keyup(function(){
......
public_new/js/common.js
// アコーディオン // アコーディオン
$('.category').on('click',function () { $('.category').on('click', function() {
$(this).toggleClass("open"); $(this).toggleClass("open");
$(this).next().slideToggle(); $(this).next().slideToggle();
}); });
$('.home_btn').on('click', function() {
android.goHome();
});
$(function() { $(function() {
var h = $(window).height(); //画面の高さを取得 var h = $(window).height(); //画面の高さを取得
...@@ -47,4 +50,17 @@ $(function() { ...@@ -47,4 +50,17 @@ $(function() {
$('.overlay_src_msg').empty(); $('.overlay_src_msg').empty();
}); });
$('.message_input_form').click(function(){
$('.message_input_send').removeClass('none');
$('.attach_file').addClass('none');
});
$('.message_input_form').on('focusout',function(e){
if($(e.relatedTarget).hasClass('message_input_send')){
CHAT_UI.sendMessage();
}
$('.message_input_send').addClass('none');
$('.attach_file').removeClass('none');
});
}); });
public_new/js/constant.js
...@@ -23,7 +23,8 @@ const userAPICmd = { ...@@ -23,7 +23,8 @@ const userAPICmd = {
const chatRoomType = { const chatRoomType = {
DM : "1", DM : "1",
GROUP : "0" GROUP : "0",
ALL : "2"
} }
const nameCardAreaId = { const nameCardAreaId = {
......
public_new/js/contact.js
$(function() { $(function() {
// メンバー検索 // メンバー検索
$('#contact .search_form input[type="search"]').keyup(function(){ $('#contact .search_form input[type="search"]').keyup(function(e){
var isAllGroup = $('#tabAllGroup').is(':checked'); var isAllGroup = $('#tabAllGroup').is(':checked');
$('.overlay_src_msg').empty(); $('.overlay_src_msg').empty();
var keyword = $('#contact .search_form input[type="search"]').val();
if (keyword == '' || keyword.length < 2) {
return;
}
//全グループ検索画面 //全グループ検索画面
if (isAllGroup) { if (isAllGroup) {
var keyword = $('#contact .search_form input[type="search"]').val();
if (keyword == '') {
return;
}
//グループデータ検索 //グループデータ検索
var groupList = CHAT_DB.getGroupByName(keyword); var groupList = CHAT_DB.getGroupByName(keyword);
var groupTemplate; var groupTemplate;
......
public_new/js/language_ja.js
...@@ -4,7 +4,7 @@ $.lang.ja = { ...@@ -4,7 +4,7 @@ $.lang.ja = {
"room_search_placeholder":" ルーム検索", "room_search_placeholder":" ルーム検索",
"participants":"メンバーリスト", "participants":"メンバーリスト",
"exitRoom":"退出 ", "exitRoom":"退出 ",
"roomListTitle":"ルーム一覧", "roomListTitle":"チャット",
"deleteRoomTitle":"ルーム削除", "deleteRoomTitle":"ルーム削除",
"inviteUsersButton":"招待", "inviteUsersButton":"招待",
"inviteUsersTitle":"メンバー追加", "inviteUsersTitle":"メンバー追加",
......
public_new/loading.html
<div id="loader-bg"> <div id="loader-bg" class="loading-indicator">
<div id="loader"> <div id="loader" class="loading-indicator">
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i> <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
</div> </div>
</div> </div>
public_new/template/template_chatroom_user_list.html 0 → 100644
{{#userList}}
<div class="user_item">
<a href="javascript:return false;" onclick="CHAT_UI.makeNameCard({{shopMemberId}})">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="{{profileUrl}}" onError="this.src='./img/noImage.png'">
</div>
<span>{{shopMemberName}}</span>
</div>
</a>
</div>
{{/userList}}
\ No newline at end of file
public_new/template/template_close_collaboration_message.html 0 → 100644
<!-- 通話 -->
<div class="collabo_area_container">
<!-- 時刻 -->
<div class="collabo_date text-right">
<span>12:23 PM</span>
</div>
<div class="collabo_area disable">
<div class="collabo_desc">
<div class="collabo_room_name d-flex flex-row">
<span>ルーム名ルーム名</span>
<span>の通話</span>
</div>
<div class="d-flex flex-row justify-content-between">
<div class="collabo_user_list d-flex flex-row">
<div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
<div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
<div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
<div class="num"><span>10</span></div>
</div>
<div class="collabo_time">
<span>1:10:20</span>
</div>
</div>
<div class="collabo_btn">
<button type="button" name="button">
<img src="icon/icon_profile_phone.png" alt="通話">
<span>終了しました</span>
</button>
</div>
</div>
</div>
</div>
\ No newline at end of file
public_new/template/template_my_message.html 0 → 100644
<div class="room_right">
<div class="text">{{text}}</div>
<div class="date d-flex flex-column"><span>{{createdAtDay}}</span><span>{{createdAtTime}}</span></div>
<div class="read d-flex align-items-end"><span></span></div>
</div>
\ No newline at end of file
public_new/template/template_open_collaboration_message.html 0 → 100644
<!-- 通話 -->
<div class="collabo_area_container">
<!-- 時刻 -->
<div class="collabo_date text-right">
<span>12:23 PM</span>
</div>
<div class="collabo_area">
<div class="collabo_desc">
<div class="collabo_room_name d-flex flex-row">
<span>ルーム名ルーム名ルーム名ルーム名</span>
<span>の通話</span>
</div>
<div class="d-flex flex-row justify-content-between">
<div class="collabo_user_list d-flex flex-row">
<div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
<div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
<div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
<div class="num"><span>10</span></div>
</div>
<div class="collabo_time">
<span>1:10:20</span>
</div>
</div>
<div class="collabo_btn">
<button type="button" name="button">
<img src="icon/icon_profile_phone.png" alt="通話">
<span>参加する</span>
</button>
</div>
</div>
</div>
</div>
\ No newline at end of file
public_new/template/template_room_list.html 0 → 100644
<li class="d-flex align-items-center">
<a href="#" class="w-100" onclick="CHAT_UI.joinRoom({{roomId}},'{{roomName}}');">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail{{thumbnailCount}} thumbnail">
{{#attendUsers}}
<div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/></div>
{{/attendUsers}}
{{^attendUsers}}
<div class="img_wrap"><img src='./img/noImage.png'/></div>
{{/attendUsers}}
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="d-flex flex-row">
<div class="chat_item_t ">
<span class="chat_item_ttl">{{roomName}}</span>
</div>
<span class="chat_item_num">({{userCnt}})</span>
</div>
<div class="chat_item_desc">
{{lastMessage}}
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">{{time}}</span>
{{#unreadMsgCnt}}
<span class="chat_item_unread">{{unreadMsgCnt}}</span>
{{/unreadMsgCnt}}
</div>
</div>
</div>
</a>
</li>
\ No newline at end of file
public_new/template/template_system_message.html 0 → 100644
<div class="sys_msg text-center">2021/03/04</div>
\ No newline at end of file
public_new/template/template_user_message.html 0 → 100644
<div class="room_left">
<figure>
<a href="#" data-toggle="modal" data-target="#profileModal1"><img src="{{profileImage}}" onError="this.src='./img/noImage.png'"></a>
</figure>
<div class="room_left-text">
<div class="name">{{from}}</div>
<div class="text">{{text}}</div>
</div>
<div class="date d-flex flex-column"><span>{{createdAtDay}}</span><span>{{createdAtTime}}</span></div>
<div class="read d-flex align-items-end"><span></span></div>
</div>
\ No newline at end of file
public_new/template/template_user_name_card.html
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
<div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header border-0"> <div class="modal-header border-0">
<div class="profile_desc d-flex flex-row"> <div class="prifile_desc d-flex flex-row">
<img src="{{profileImage}}" onError="this.src='./img/noImage.png'"/> <img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/>
<div class="profile_name"><span>{{name}}</span></div> <div class="prifile_name"><span>{{name}}</span></div>
</div> </div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
{{#groupPathList}} {{#groupPathList}}
<li style="display: block;">・{{.}}</li> <li onclick="CHAT_UI.refreshAllGroupSearch({{groupId}});"><b>{{groupPath}}</b></li>
{{/groupPathList}} {{/groupPathList}}
</div> </div>
<div class="modal-footer border-0 justify-content-center"> <div class="modal-footer border-0 justify-content-center">
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
<span>通話</span> <span>通話</span>
</div> </div>
</button> </button>
<button type="button" class="border-0 bg_blue"> <button type="button" class="border-0 bg_blue" onclick="CHAT_UI.startChat('{{shopMemberId}}','{{name}}');">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_profile_chat.png" alt="チャット"> <img src="icon/icon_profile_chat.png" alt="チャット">
......
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