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