Skip to content

C
chat_webview
Commit 807f9237 by Lee Munkyeong
Options

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

Origin/develop apply design chat

See merge request !13
parents 45f74721 750300a0
Showing with 713 additions and 401 deletions
public/css/chat.css
...@@ -98,6 +98,7 @@ img { ...@@ -98,6 +98,7 @@ img {
float: left; float: left;
padding: 0 0 0 15px; padding: 0 0 0 15px;
width: 85%; width: 85%;
padding-top: 6px;
} }
#room_list, #group_list, #user_list, #select_user_list { #room_list, #group_list, #user_list, #select_user_list {
...@@ -506,7 +507,7 @@ a.article:hover { ...@@ -506,7 +507,7 @@ a.article:hover {
padding-left: 12%; padding-left: 12%;
} }
.userCheckBox{ .userCheckBox{
margin-left: -12%; margin-left: 80%;
} }
.nav-item .dropdown-toggle::after{ .nav-item .dropdown-toggle::after{
...@@ -710,7 +711,7 @@ a.article:hover { ...@@ -710,7 +711,7 @@ a.article:hover {
} }
.chat-list-type-btn { .chat-list-type-btn {
width: 30%; width: 40%;
} }
#my_info > div > div { #my_info > div > div {
padding-left: 5%; padding-left: 5%;
...@@ -724,6 +725,10 @@ a.article:hover { ...@@ -724,6 +725,10 @@ a.article:hover {
padding-left: 5%; padding-left: 5%;
} }
#my_group_list > div > div {
padding-left: 5%;
}
.contact-seperator { .contact-seperator {
width: 100%; width: 100%;
background-color: #095395!important; background-color: #095395!important;
...@@ -741,9 +746,6 @@ a.article:hover { ...@@ -741,9 +746,6 @@ a.article:hover {
min-height: 250px; min-height: 250px;
top: 20%; top: 20%;
background: #F7FFF4; background: #F7FFF4;
}
#namecard {
z-index: 10051; z-index: 10051;
} }
...@@ -760,6 +762,44 @@ a.article:hover { ...@@ -760,6 +762,44 @@ a.article:hover {
text-align: center; text-align: center;
} }
<<<<<<< HEAD
=======
.border-bottom-gray {
border-bottom: 1px solid #c4c4c4;
}
#childGroupList > div > div {
padding-left: 5%;
}
#userInGroupList > div > div {
padding-left: 5%;
}
.group-navigater {
margin-right: 10px;
}
.namecard-action-area {
display: -webkit-box;
}
.namecard-action-btn {
text-align: center;
}
.name-chat {
background-color: yellow;
}
.name-voice {
background-color: green;
}
.name-favorite {
background-color: blue;
}
>>>>>>> origin/develop_createRoom_UI
.inbox_archive { .inbox_archive {
width: 100%; width: 100%;
} }
...@@ -888,3 +928,7 @@ a.article:hover { ...@@ -888,3 +928,7 @@ a.article:hover {
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
} }
<<<<<<< HEAD
=======
>>>>>>> origin/develop_apply_design_chat
>>>>>>> origin/develop_createRoom_UI
public/index.html
...@@ -221,7 +221,7 @@ ...@@ -221,7 +221,7 @@
</div> </div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<div class="inbox_people"> <div class="inbox_people" >
<div class="heading_srch"> <div class="heading_srch">
<div class="srch_bar"> <div class="srch_bar">
<div class="stylish-input-group"> <div class="stylish-input-group">
...@@ -232,14 +232,48 @@ ...@@ -232,14 +232,48 @@
</div> </div>
</div> </div>
</div> </div>
<div id="my_info" class="inbox_user row"> <div id="groupButtonArea" class="text-center border-bottom-gray">
<button type="button" class="btn btn-primary chat-list-type-btn" id="myGroupBtn"></button>
<button type="button" class="btn btn-primary chat-list-type-btn" id="allGroupBtn"></button>
</div> </div>
<div id="myGroupArea">
<label class="contact-seperator" id="favorite-seperator">Favorite</label> <div id="my_info" class="inbox_user row">
<div id="favorite_list" class="inbox_user row"> </div>
<label class="contact-seperator" id="favorite-seperator">Favorite</label>
<div id="favorite_list" class="inbox_user row">
</div>
<label class="contact-seperator" id="mygroup-seperator">MY GROUP</label>
<div id="my_group_list" class="inbox_user row">
</div>
</div> </div>
<label class="contact-seperator" id="mygroup-seperator">MY GROUP</label>
<div id="my_group_list" class="inbox_user row"> <div id="allGroupArea">
<label class="contact-seperator" id="groupPathSeperator">GROUP PATH</label>
<div id="groupPathArea" style="float:left;">
</div>
<label class="contact-seperator" id="moveBtnSeperator">MOVE BUTTON</label>
<div id="groupBtnArea">
<div class="user_list col-12" id="rootGroupBtn">
<div class="user_people">
<div class="user_ib">
<h5>MOVE TO ROOT GROUP</h5>
</div>
</div>
</div>
<div class="user_list col-12" id="parentGroupBtn">
<div class="user_people">
<div class="user_ib">
<h5>MOVE TO PARENTS GROUP</h5>
</div>
</div>
</div>
</div>
<label class="contact-seperator" id="childGroupSeperator">CHILD GROUP</label>
<div id="childGroupList" class="inbox_user row group-search-list">
</div>
<label class="contact-seperator" id="groupUserSeperator">USERS IN GROUP</label>
<div id="userInGroupList" class="inbox_user row group-search-list">
</div>
</div> </div>
...@@ -384,8 +418,9 @@ ...@@ -384,8 +418,9 @@
</ul> </ul>
</div> </div>
<div class="popup" id="myNamecard"></div>
<div class="popup" id="userNamecard"></div>
<div class="popup" id="namecard"></div>
<nav class="navbar navbar-expand navbar-dark fixed-bottom flex-md-nowrap p-2 bg-footer talign-center border footer-nav" id="bottomNav"> <nav class="navbar navbar-expand navbar-dark fixed-bottom flex-md-nowrap p-2 bg-footer talign-center border footer-nav" id="bottomNav">
<div class="col-4"> <div class="col-4">
<img src="./icon/ic_communication_meeting_gray.png" style="width: 35%;" id="contactButton"> <img src="./icon/ic_communication_meeting_gray.png" style="width: 35%;" id="contactButton">
...@@ -398,7 +433,7 @@ ...@@ -398,7 +433,7 @@
</div> </div>
</nav> </nav>
<script id="my-namecard-template" type="text/template"> <script id="my-namecard-template" type="text/template">
<div style="float: right;"><i class="fa fa-times my-name-card-close" aria-hidden="true"></i></div> <div style="float: right;"><i class="fa fa-times my-name-card-close" aria-hidden="true" onclick="CHAT_UI.hideNamecard('myNamecard');"></i></div>
<div class="namecard_img"> <div class="namecard_img">
<img src="./images/user-profile.png" alt> <img src="./images/user-profile.png" alt>
<div class="namedard-img-upload" >Upload</div> <div class="namedard-img-upload" >Upload</div>
...@@ -411,7 +446,7 @@ ...@@ -411,7 +446,7 @@
</div> </div>
</script> </script>
<script id="namecard-template" type="text/template"> <script id="namecard-template" type="text/template">
<div style="float: right;"><i class="fa fa-times my-name-card-close" aria-hidden="true"></i></div> <div style="float: right;"><i class="fa fa-times my-name-card-close" aria-hidden="true" onclick="CHAT_UI.hideNamecard('userNamecard');"></i></div>
<div class="namecard_img"> <div class="namecard_img">
<img src="./images/user-profile.png" alt> <img src="./images/user-profile.png" alt>
<div class="namecard-login-id">{{name}}</div> <div class="namecard-login-id">{{name}}</div>
...@@ -421,11 +456,22 @@ ...@@ -421,11 +456,22 @@
<li><b>{{.}}</b></li> <li><b>{{.}}</b></li>
{{/groupPathList}} {{/groupPathList}}
</div> </div>
<div class="text-center">
<button type="button" class="btn btn-primary" id="nameCardChatBtn" onclick="CHAT_UI.startChat('{{loginId}}','{{name}}');">{{chat}}</button>
<button type="button" class="btn btn-primary" id="nameCardVoiceBtn" onclick="CHAT_UI.startVoice();">{{voice}}</button>
{{#isFavorite}}
<button type="button" class="btn btn-primary" onclick="CHAT_UI.changeFavorite();">{{favorite}}</button>
{{/isFavorite}}
{{^isFavotire}}
<button type="button" class="btn btn-primary" onclick="CHAT_UI.changeFavorite();">{{favorite}}</button>
{{/isFavorite}}
</div>
</script> </script>
<script id="message-template" type="text/template"> <script id="message-template" type="text/template">
<div class="incoming_msg"> <div class="incoming_msg">
<div class="incoming_msg_img"> <div class="incoming_msg_img">
<img src={{{profileImage}}} alt=""> <img src={{{profileImage}}} alt="" onclick="CHAT_UI.makeNameCard({{shopMemberId}});" >
</div> </div>
<div class="received_msg"> <div class="received_msg">
<div class="received_withd_msg"> <div class="received_withd_msg">
...@@ -478,7 +524,7 @@ ...@@ -478,7 +524,7 @@
</div> </div>
</script> </script>
<script id="group-template" type="text/template"> <script id="group-template" type="text/template">
<div class="group_list col-12" data-name="{{name}}"> <div class="group_list col-12" data-name="{{name}}" data-id="{{id}}">
<div class="group_people"> <div class="group_people">
<div class="group_img"> <div class="group_img">
<img src="./images/group-image.png" alt=""> <img src="./images/group-image.png" alt="">
...@@ -512,6 +558,9 @@ ...@@ -512,6 +558,9 @@
</div> </div>
</div> </div>
</script> </script>
<script id="group-navigater-template" type="text/template">
<label class="group-navigater" data-name="{{name}}" data-id="{{id}}">{{name}}</label>
</script>
<script id="favorite-user-template" type="text/template"> <script id="favorite-user-template" type="text/template">
<div class="user_list col-12" data-name="{{name}}"> <div class="user_list col-12" data-name="{{name}}">
<div class="user_people"> <div class="user_people">
......
public/js/chat-db.js
...@@ -14,11 +14,13 @@ CHAT_DB.getRoomList = function(roomType) { ...@@ -14,11 +14,13 @@ CHAT_DB.getRoomList = 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 JSON.parse(android.getMyInfo()); return result;
} }
}; };
...@@ -58,6 +60,26 @@ CHAT_DB.getMyGroupUsers = function() { ...@@ -58,6 +60,26 @@ CHAT_DB.getMyGroupUsers = function() {
} }
}; };
<<<<<<< HEAD
=======
CHAT_DB.getGroupInfo = function(groupId) {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getGroupInfo(groupId));
}
};
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));
}
};
>>>>>>> origin/develop_createRoom_UI
CHAT_DB.getArchiveList = function() { CHAT_DB.getArchiveList = function() {
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
// String形式をJsonに変更してReturn // String形式をJsonに変更してReturn
...@@ -123,4 +145,7 @@ CHAT_DB.updateChatRoomInfo = function(roomId) { ...@@ -123,4 +145,7 @@ CHAT_DB.updateChatRoomInfo = function(roomId) {
//TODO Android処理追加必要 //TODO Android処理追加必要
} }
}; };
<<<<<<< HEAD
=======
>>>>>>> origin/develop_createRoom_UI
public/js/chat-websocket.js
...@@ -365,23 +365,20 @@ function setSocketAction () { ...@@ -365,23 +365,20 @@ function setSocketAction () {
$('#pills-group-tab').tab('show'); $('#pills-group-tab').tab('show');
$('#backButton').show(); $('#backButton').show();
if (isInvite) { if (isInvite) {
$('.titleRoomName').text(memberSelectTitle);
$('#newRoomName, .roomListIcon, .chatRoomIcon').hide(); $('#newRoomName, .roomListIcon, .chatRoomIcon').hide();
$('#userSelectionConfirmBtn').show(); $('#userSelectionConfirmBtn').show();
$("#userSelectionConfirmBtn").off().on('click', function(){ $("#userSelectionConfirmBtn").off().on('click', function(){
CHAT_UI.setConfirmButtonEvent(isInvite); CHAT_UI.setConfirmButtonEvent(isInvite);
}); });
} else { } else {
$('.titleRoomName').text(memberSelectTitle);
$('.roomListIcon, .chatRoomIcon, #newRoomName').hide(); $('.roomListIcon, .chatRoomIcon, #newRoomName').hide();
$('#userSelectionConfirmBtn').show(); $('#userSelectionConfirmBtn').show();
$("#userSelectionConfirmBtn").off().on('click', function(){ $("#userSelectionConfirmBtn").off().on('click', function(){
CHAT_UI.setConfirmButtonEvent(isInvite); CHAT_UI.setConfirmButtonEvent(isInvite);
}); });
} }
//
if (CHAT.globalSelectedUserList.length > 0) { if (CHAT.globalSelectedUserList.length > 0) {
$('#userSelectionLength').text(CHAT.globalSelectedUserList.length); $('#userSelectionLength').text(CHAT.globalSelectedUserList.length);
} else { } else {
......
public/js/constant.js
...@@ -25,3 +25,8 @@ const chatRoomType = { ...@@ -25,3 +25,8 @@ const chatRoomType = {
DM : "1", DM : "1",
GROUP : "0" GROUP : "0"
} }
const nameCardAreaId = {
MY : "myNamecard",
USER : "userNamecard"
}
\ No newline at end of file
public/js/language_en.js
...@@ -59,6 +59,20 @@ $.lang.en = { ...@@ -59,6 +59,20 @@ $.lang.en = {
"favorite":"Favorite List", "favorite":"Favorite List",
"mygroup":"My Group", "mygroup":"My Group",
"groupChatRoom":"Group", "groupChatRoom":"Group",
<<<<<<< HEAD
=======
"myGroup":"My Group",
"allGroup":"All Group",
"returnToRootGroup":"Return to Root Group",
"returnToParentGroup":"Return to Parent Group",
"quickBtn":"Quick Button",
"groupPath":"Group Path",
"childGroup":"Minor Group",
"groupUser":" Member List",
"chat":"Chat",
"voice":"Call",
"addFavorite":"Add Favorite"
>>>>>>> origin/develop_createRoom_UI
"archiveListTitle":"Archive", "archiveListTitle":"Archive",
"archiveTypeImage":"Image", "archiveTypeImage":"Image",
"archiveTypeMovie":"Movie", "archiveTypeMovie":"Movie",
......
public/js/language_ja.js
...@@ -59,6 +59,20 @@ $.lang.ja = { ...@@ -59,6 +59,20 @@ $.lang.ja = {
"favorite":"お気に入りリスト", "favorite":"お気に入りリスト",
"mygroup":"マイグループ", "mygroup":"マイグループ",
"groupChatRoom":"グループ", "groupChatRoom":"グループ",
<<<<<<< HEAD
=======
"myGroup":"マイグループ",
"allGroup":"全グループ",
"returnToRootGroup":"トップグループに戻る",
"returnToParentGroup":"上位グループに戻る",
"quickBtn":"クイックボタン",
"groupPath":"グループパンクズ",
"childGroup":"下位グループ",
"groupUser":"所属ユーザ",
"chat":"チャット",
"voice":"通話",
"addFavorite":"お気に入り追加"
>>>>>>> origin/develop_createRoom_UI
"archiveListTitle":"アーカイブ", "archiveListTitle":"アーカイブ",
"archiveTypeImage":"画像", "archiveTypeImage":"画像",
"archiveTypeMovie":"動画", "archiveTypeMovie":"動画",
......
public/js/language_ko.js
...@@ -59,6 +59,20 @@ $.lang.ko = { ...@@ -59,6 +59,20 @@ $.lang.ko = {
"favorite":"즐겨찾기리스트", "favorite":"즐겨찾기리스트",
"mygroup":"마이그룹", "mygroup":"마이그룹",
"groupChatRoom":"그룹", "groupChatRoom":"그룹",
<<<<<<< HEAD
=======
"myGroup":"내그룹",
"allGroup":"전그룹",
"returnToRootGroup":"최상위그룹으로 돌아가기",
"returnToParentGroup":"상위그룹으로 돌아가기",
"quickBtn":"퀵버튼",
"groupPath":"그룹 경로",
"childGroup":"하위 그룹",
"groupUser":"소속 사용자",
"chat":"채팅",
"voice":"통화",
"addFavorite":"즐겨찾기추가"
>>>>>>> origin/develop_createRoom_UI
"archiveListTitle":"아카이브", "archiveListTitle":"아카이브",
"archiveTypeImage":"이미지", "archiveTypeImage":"이미지",
"archiveTypeMovie":"동영상", "archiveTypeMovie":"동영상",
......
public_new/archive.html
...@@ -64,7 +64,6 @@ ...@@ -64,7 +64,6 @@
</ul> </ul>
</div> </div>
</main> </main>
<!-- フッター --> <!-- フッター -->
<footer> <footer>
<div class="footer-wrap"> <div class="footer-wrap">
......
public_new/chat.html
...@@ -68,8 +68,6 @@ ...@@ -68,8 +68,6 @@
<!-- オーバーレイ --> <!-- オーバーレイ -->
<div class="chat_list"> <div class="chat_list">
<ul class="overlay_src_msg"> <ul class="overlay_src_msg">
</ul> </ul>
</div> </div>
</main> </main>
...@@ -123,7 +121,6 @@ ...@@ -123,7 +121,6 @@
String.prototype.replaceAll = function(org, dest) { String.prototype.replaceAll = function(org, dest) {
return this.split(org).join(dest); return this.split(org).join(dest);
} }
let CHAT_SERVER_URL = ''; let CHAT_SERVER_URL = '';
let CMS_SERVER_URL = ''; let CMS_SERVER_URL = '';
let ASSET_PATH = './'; let ASSET_PATH = './';
...@@ -133,6 +130,7 @@ ...@@ -133,6 +130,7 @@
$("#loadingArea").load("./loading.html"); $("#loadingArea").load("./loading.html");
android.getLoginParameter(); android.getLoginParameter();
android.getGlobalParameter(); android.getGlobalParameter();
android.saveSelectedUserList("");
function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) { function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
CHAT_SERVER_URL = chatServerUrl; CHAT_SERVER_URL = chatServerUrl;
...@@ -142,6 +140,7 @@ ...@@ -142,6 +140,7 @@
IS_ONLINE = isOnline; IS_ONLINE = isOnline;
console.log("onChat"); console.log("onChat");
CHAT_UI.refreshRoomList(chatRoomType.GROUP); CHAT_UI.refreshRoomList(chatRoomType.GROUP);
CHAT_UI.dismissLoadingIndicator();
}; };
</script> </script>
</body> </body>
......
public_new/chat_add_user_confirm.html
...@@ -43,165 +43,58 @@ ...@@ -43,165 +43,58 @@
<div class="chat_list"> <div class="chat_list">
<h2>参加者</h2> <h2>参加者</h2>
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center"> <div id="selectedUserList"></div>
<div class="chat_item d-flex flex-row align-items-center w-100">
<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>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<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>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<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>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<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>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<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>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<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>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<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>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<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>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<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>
</div>
</div>
</li>
</ul> </ul>
</div> </div>
<!-- ユーザー招待ボタン --> <!-- ユーザー招待ボタン -->
<div class="add_user_btn"> <div class="add_user_btn">
<button type="button" name="button">招待</button> <button type="button" name="button" id="addUserBtn">招待</button>
</div> </div>
</form> </form>
</main> </main>
<script src="./js/libs/jquery-3.3.1.min.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/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/loading.js"></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);
}
<script src="./js/libs/jquery-3.3.1.min.js"></script> let CHAT_SERVER_URL = '';
<script src="./js/libs/moment.js"></script> let CMS_SERVER_URL = '';
<script src="./js/libs/bootstrap.min.js"></script> let ASSET_PATH = './';
<script src="./js/libs/jquery.mark.min.js"></script> let PLATFORM = '';
<script src="./js/chat.js"></script> let IS_MOBILE = true;
let IS_ONLINE = false;
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.showMakeRoomConfirmView();
CHAT_UI.showAddUserConfirmView();
};
</script>
</body> </body>
</html> </html>
public_new/chat_make_room_confirm.html
...@@ -19,8 +19,8 @@ ...@@ -19,8 +19,8 @@
<div class="row h-100 align-items-center"> <div class="row h-100 align-items-center">
<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" id="prevBtn">
<a href="chat_make_room.html"><span>ルーム開設</span></a> <a href="chat_make_room.html"><span style="font-size: 13px;">ルーム開設</span></a>
</div> </div>
</div> </div>
</div> </div>
...@@ -41,163 +41,19 @@ ...@@ -41,163 +41,19 @@
<form action="chat_room.html" method="post"> <form action="chat_room.html" method="post">
<!-- ルーム名入力 --> <!-- ルーム名入力 -->
<div class="room_name"> <div class="room_name">
<label for="room_name"><h2>ルーム名</h2></label> <label><h2>ルーム名</h2></label>
<input type="text" class="input_name_room" name="room_name" placeholder="ルーム名を入力してください"> <input type="text" class="input_name_room" name="room_name" id="newRoomName" placeholder="ルーム名を入力してください">
</div> </div>
<!-- 参加者一覧 --> <!-- 参加者一覧 -->
<div class="chat_list"> <div class="chat_list">
<h2>参加者</h2> <h2>参加者</h2>
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center"> <div id="selectedUserList"></div>
<div class="chat_item d-flex flex-row align-items-center w-100">
<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>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<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>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<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>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<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>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<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>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<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>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<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>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<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>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<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>
</div>
</div>
</li>
</ul> </ul>
</div> </div>
<!-- ルーム解説ボタン --> <!-- ルーム解説ボタン -->
<div class="make_room_btn"> <div class="make_room_btn" id="makeRoomBtn">
<button type="button" name="button"> <button type="button" name="button">
チャット開始</button> チャット開始</button>
</div> </div>
...@@ -205,10 +61,46 @@ ...@@ -205,10 +61,46 @@
</main> </main>
<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/bootstrap.min.js"></script> <script src="./js/libs/locale/ko.js" charset="UTF-8"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/locale/ja.js" charset="UTF-8"></script>
<script src="./js/chat.js"></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/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>
<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;
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.showMakeRoomConfirmView();
};
</script>
</body> </body>
</html> </html>
public_new/chat_room.html
...@@ -52,42 +52,9 @@ ...@@ -52,42 +52,9 @@
</div> </div>
<!-- フィルター -->
<div id="filter" class="user_list filter d-flex flex-row none">
<div class="user_item">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="img/noImage.png" alt="プロフィール画像">
</div>
<span>名前名前名前名前名前名前名前名前</span>
</div>
</div>
<div class="user_item">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="img/noImage.png" alt="プロフィール画像">
</div>
<span>名前名前名前名前名前名前名前名前</span>
</div>
</div>
<div class="user_item">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="img/noImage.png" alt="プロフィール画像">
</div>
<span>名前名前名前名前名前名前名前名前</span>
</div>
</div>
<div class="user_item">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="img/noImage.png" alt="プロフィール画像">
</div>
<span>名前名前名前名前名前名前名前名前</span>
</div>
</div>
</div>
<!-- フィルター -->
<div id="filter" class="user_list filter d-flex flex-row none"></div>
<div class="chat_list"> <div class="chat_list">
<ul class="overlay_src_msg"> <ul class="overlay_src_msg">
</ul> </ul>
...@@ -208,7 +175,6 @@ ...@@ -208,7 +175,6 @@
android.getLoginParameter(); android.getLoginParameter();
android.getGlobalParameter(); android.getGlobalParameter();
function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) { function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
CHAT_SERVER_URL = chatServerUrl; CHAT_SERVER_URL = chatServerUrl;
CMS_SERVER_URL = cmsServerUrl; CMS_SERVER_URL = cmsServerUrl;
...@@ -216,6 +182,7 @@ ...@@ -216,6 +182,7 @@
IS_MOBILE = isMobile; IS_MOBILE = isMobile;
IS_ONLINE = isOnline; IS_ONLINE = isOnline;
CHAT_UI.loadMessages(CHAT.globalLoginParameter.roomId, CHAT.globalLoginParameter.roomName); CHAT_UI.loadMessages(CHAT.globalLoginParameter.roomId, CHAT.globalLoginParameter.roomName);
}; };
</script> </script>
......
public_new/collaboration_overlay_add_user_list.html
...@@ -109,8 +109,8 @@ ...@@ -109,8 +109,8 @@
</div> </div>
</div> </div>
<div class="user_item_l"> <div class="user_item_l">
<div class="thumbnail"> <div class="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> </div>
<div class="user_item_m"> <div class="user_item_m">
......
public_new/css/chat.css
...@@ -35,8 +35,8 @@ input[name="tab_item"] { ...@@ -35,8 +35,8 @@ input[name="tab_item"] {
clear: both; clear: both;
overflow: hidden; overflow: hidden;
} }
#tab1:checked ~ #tab1_content, #tabMyGroupOnMakeRoom:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content{ #tabAllGroupOnMakeRoom:checked ~ #tab2_content{
display: block; display: block;
} }
......
public_new/js/chat-add-user.js 0 → 100644
$(function() {
// メンバー検索
$('#chat_add_user .search_form input[type="search"]').keyup(function(){
var isAllGroup = $('#tabAllGroupOnMakeRoom').is(':checked');
$('.overlay_src_msg').empty();
//全グループ検索画面
if (isAllGroup) {
var keyword = $('#chat_add_user .search_form input[type="search"]').val();
if (keyword == '') {
return;
}
//グループデータ検索
var groupList = CHAT_DB.getGroupByName(keyword);
var groupTemplate;
$.get({ url: "./template/template_make_room_group_list.html", async: false }
, function(text) {
groupTemplate = text;
});
groupList.forEach(function(group) {
let html = Mustache.render(groupTemplate, {
name: group.groupName,
id: group.groupId,
});
let obj = jQuery.parseHTML(html);
$('.overlay_src_msg').append(obj);
})
//ユーザデータ検索
var userList = CHAT_DB.getAllGroupShopMemberNotInRoomByName(keyword);
var userTemplate;
$.get({ url: "./template/template_make_room_user_list.html", async: false }
, function(text) {
userTemplate = text;
});
userList.forEach(function(user) {
user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
return shopMemberId == user.shopMemberId;
})
if (findObj) {
user.checked = 'checked';
}
});
let html = Mustache.render(userTemplate, {
userList: userList
});
let obj = jQuery.parseHTML(html);
$('.overlay_src_msg').append(obj);
　　//連絡先画面
} else {
var keyword = $('#chat_add_user .search_form input[type="search"]').val();
if (keyword == '') {
return;
}
var userList = CHAT_DB.getMyGroupShopMemberNotInRoomByName(keyword);
var userTemplate;
$.get({ url: "./template/template_make_room_user_list.html", async: false }
, function(text) {
userTemplate = text;
});
userList.forEach(function(user) {
user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
return shopMemberId == user.shopMemberId;
})
if (findObj) {
user.checked = 'checked';
}
});
let html = Mustache.render(userTemplate, {
userList: userList
});
let obj = jQuery.parseHTML(html);
$('.overlay_src_msg').html(obj);
}
});
});
public_new/js/chat-db.js
...@@ -46,6 +46,15 @@ CHAT_DB.getMessages = function(roomId) { ...@@ -46,6 +46,15 @@ CHAT_DB.getMessages = function(roomId) {
} }
}; };
CHAT_DB.getFavoriteUsersNotInRoom = function() {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getFavoriteUsersNotInRoom());
}
};
CHAT_DB.getFavoriteUsers = function() { CHAT_DB.getFavoriteUsers = function() {
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要 //TODO IOS処理追加必要
...@@ -82,6 +91,16 @@ CHAT_DB.getGroupInfo = function(groupId) { ...@@ -82,6 +91,16 @@ CHAT_DB.getGroupInfo = function(groupId) {
} }
}; };
CHAT_DB.loadSelectedUsers = function() {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
console.log(JSON.parse(android.getSelectedUserList()));
return JSON.parse(android.getSelectedUserList());
}
}
CHAT_DB.getNameCardData = function(shopMemberId) { CHAT_DB.getNameCardData = function(shopMemberId) {
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要 //TODO IOS処理追加必要
...@@ -99,6 +118,15 @@ CHAT_DB.getMyGroupShopMemberByName = function(shopMemberName) { ...@@ -99,6 +118,15 @@ CHAT_DB.getMyGroupShopMemberByName = function(shopMemberName) {
} }
}; };
CHAT_DB.getMyGroupShopMemberNotInRoomByName = function(shopMemberName) {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getMyGroupShopMemberNotInRoomByName(shopMemberName));
}
};
CHAT_DB.getAllGroupShopMemberByName = function(shopMemberName) { CHAT_DB.getAllGroupShopMemberByName = function(shopMemberName) {
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要 //TODO IOS処理追加必要
...@@ -108,6 +136,15 @@ CHAT_DB.getAllGroupShopMemberByName = function(shopMemberName) { ...@@ -108,6 +136,15 @@ CHAT_DB.getAllGroupShopMemberByName = function(shopMemberName) {
} }
}; };
CHAT_DB.getAllGroupShopMemberNotInRoomByName = function(shopMemberName) {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getAllGroupShopMemberNotInRoomByName(shopMemberName));
}
};
CHAT_DB.getGroupByName = function(groupName) { CHAT_DB.getGroupByName = function(groupName) {
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要 //TODO IOS処理追加必要
...@@ -217,3 +254,20 @@ CHAT_DB.updateArchiveDetail = function(archiveId) { ...@@ -217,3 +254,20 @@ CHAT_DB.updateArchiveDetail = function(archiveId) {
// TODO // TODO
} }
}; };
CHAT_DB.searchMessages = function(keyword, userList) {
if (CHAT_UTIL.isIOS()) {
// TODO
} else if (CHAT_UTIL.isAndroid()) {
return JSON.parse(android.searchMessages(keyword, userList));
}
};
CHAT_DB.getMyGroupUsersNotInRoom = function() {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getMyGroupUsersNotInRoom());
}
};
\ No newline at end of file
public_new/js/chat-websocket.js
...@@ -6,7 +6,6 @@ var CHAT_SOCKET = {}; ...@@ -6,7 +6,6 @@ var CHAT_SOCKET = {};
CHAT_SOCKET.connectSocket = function () { CHAT_SOCKET.connectSocket = function () {
if (IS_ONLINE == 'true') { if (IS_ONLINE == 'true') {
socket = io(CHAT_SERVER_URL); socket = io(CHAT_SERVER_URL);
console.log(socket);
setSocketAction(); setSocketAction();
} else { } else {
//オフラインの場合、DBからルーム一覧を表示。 //オフラインの場合、DBからルーム一覧を表示。
...@@ -37,7 +36,6 @@ function setSocketAction () { ...@@ -37,7 +36,6 @@ function setSocketAction () {
}); });
socket.on('disconnect', function() { socket.on('disconnect', function() {
console.log('disconnect');
//socketが切断されたら黒画面で画面を更新する //socketが切断されたら黒画面で画面を更新する
$('.overlay').addClass('active undismissable'); $('.overlay').addClass('active undismissable');
//alert('Disconnected from the server'); //alert('Disconnected from the server');
...@@ -45,7 +43,6 @@ function setSocketAction () { ...@@ -45,7 +43,6 @@ function setSocketAction () {
}); });
socket.on('connect_error', function() { socket.on('connect_error', function() {
console.log('connect_error');
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
}); });
...@@ -163,8 +160,6 @@ function setSocketAction () { ...@@ -163,8 +160,6 @@ function setSocketAction () {
// New Message // New Message
// #36170 // #36170
socket.on('newMessage', function(message, roomId, roomName) { socket.on('newMessage', function(message, roomId, roomName) {
console.log(message);
let messageTime = CHAT_UTIL.formatDate(message.createdAt);
var userMessageTemplate; var userMessageTemplate;
$.get({ url: "./template/template_user_message.html", async: false } $.get({ url: "./template/template_user_message.html", async: false }
, function(text) { , function(text) {
...@@ -186,28 +181,33 @@ function setSocketAction () { ...@@ -186,28 +181,33 @@ function setSocketAction () {
// ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する // ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する
template = myMessageTemplate; template = myMessageTemplate;
} }
let messageTime = CHAT_UTIL.formatDate(message.createdAt);
message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath)
try {
message.text = decodeURIComponent(message.text)
} catch(e) {
message.text = message.text
}
if ( message.text.includes(messageSeperator) ) {
message.text = message.text.split(messageSeperator)[0];
}
var replacePath = message.text;
replacePath = replacePath.replaceAll('?fileName=', '?sid=' + CHAT.globalLoginParameter.sid + '&fileName=');
message.text = replacePath;
//TODO newMessageの際にDB格納が必要。
let html = Mustache.render(template, {
text: message.text,
from: message.from,
profileImage: message.profileImagePath,
createdAtDay: messageTime.createdAtDay,
createdAtTime: messageTime.createdAtTime,
isToday: true
});
// イメージの場合、img tagを追加する
html = message.text.includes('attachedImages') || message.text.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
$('#messages').append(html);
message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath) // 画像、動画の描画を待ってからスクロール
try {
message.text = decodeURIComponent(message.text)
} 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,
profileImage: message.profileImagePath,
createdAtDay: messageTime.createdAtDay,
createdAtTime: messageTime.createdAtTime
});
// イメージの場合、img tagを追加する
html = message.text.includes('attachedImages') || message.text.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
$('#messages').append(html);
// 画像、動画の描画を待ってからスクロール
setTimeout(function () { setTimeout(function () {
CHAT_UI.scrollToBottom(); CHAT_UI.scrollToBottom();
}, 300); }, 300);
......
public_new/js/chatMakeRoom.js 0 → 100644
$(function() {
// メンバー検索
$('#chatMakeRoom .search_form input[type="search"]').keyup(function(){
var isAllGroup = $('#tabAllGroupOnMakeRoom').is(':checked');
$('.overlay_src_msg').empty();
//全グループ検索画面
if (isAllGroup) {
var keyword = $('#chatMakeRoom .search_form input[type="search"]').val();
if (keyword == '') {
return;
}
//グループデータ検索
var groupList = CHAT_DB.getGroupByName(keyword);
var groupTemplate;
$.get({ url: "./template/template_make_room_group_list.html", async: false }
, function(text) {
groupTemplate = text;
});
groupList.forEach(function(group) {
let html = Mustache.render(groupTemplate, {
name: group.groupName,
id: group.groupId,
});
let obj = jQuery.parseHTML(html);
$('.overlay_src_msg').append(obj);
})
//ユーザデータ検索
var userList = CHAT_DB.getAllGroupShopMemberByName(keyword);
var userTemplate;
$.get({ url: "./template/template_make_room_user_list.html", async: false }
, function(text) {
userTemplate = text;
});
userList.forEach(function(user) {
user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
return shopMemberId == user.shopMemberId;
})
if (findObj) {
user.checked = 'checked';
}
});
let html = Mustache.render(userTemplate, {
userList: userList
});
let obj = jQuery.parseHTML(html);
$('.overlay_src_msg').append(obj);
　　//連絡先画面
} else {
var keyword = $('#chatMakeRoom .search_form input[type="search"]').val();
if (keyword == '') {
return;
}
var userList = CHAT_DB.getMyGroupShopMemberByName(keyword);
var userTemplate;
$.get({ url: "./template/template_make_room_user_list.html", async: false }
, function(text) {
userTemplate = text;
});
userList.forEach(function(user) {
user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
let findObj = CHAT.globalSelectedUserList.find(function(shopMemberId) {
return shopMemberId == user.shopMemberId;
})
if (findObj) {
user.checked = 'checked';
}
});
let html = Mustache.render(userTemplate, {
userList: userList
});
let obj = jQuery.parseHTML(html);
$('.overlay_src_msg').html(obj);
}
});
});
public_new/js/common.js
...@@ -55,6 +55,7 @@ $(function() { ...@@ -55,6 +55,7 @@ $(function() {
$('.message_input_form').click(function(){ $('.message_input_form').click(function(){
$('.message_input_send').removeClass('none'); $('.message_input_send').removeClass('none');
$('.attach_file').addClass('none'); $('.attach_file').addClass('none');
$('.footer_content_b').addClass('none');
}); });
$('.message_input_form').on('focusout',function(e){ $('.message_input_form').on('focusout',function(e){
...@@ -63,6 +64,7 @@ $(function() { ...@@ -63,6 +64,7 @@ $(function() {
} }
$('.message_input_send').addClass('none'); $('.message_input_send').addClass('none');
$('.attach_file').removeClass('none'); $('.attach_file').removeClass('none');
$('.footer_content_b').removeClass('none');
}); });
}); });
public_new/js/constant.js
...@@ -27,7 +27,13 @@ const chatRoomType = { ...@@ -27,7 +27,13 @@ const chatRoomType = {
ALL : "2" ALL : "2"
} }
const groupSearchFlg = {
ROOT : "0"
}
const nameCardAreaId = { const nameCardAreaId = {
MY : "myNamecard", MY : "myNamecard",
USER : "userNamecard" USER : "userNamecard"
} }
\ No newline at end of file
const messageSeperator = "<::split>";
public_new/js/loading.js
$(window).load(function () { //読み込み完了したら実行する $(window).on('load',function () { //読み込み完了したら実行する
$('#loader-bg').delay(900).fadeOut(800);//ローディングを隠す $('#loader-bg').delay(900).fadeOut(800);//ローディングを隠す
$('#loader').delay(600).fadeOut(300); $('#loader').delay(600).fadeOut(300);
}); });
......
public_new/modal_chat_menu.html
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
<ul> <ul>
<li><a href="chat_change_room_name.html"><img src="icon/icon_change_room_name.png" alt="ルーム名変更">ルーム名変更</a></li> <li><a href="chat_change_room_name.html"><img src="icon/icon_change_room_name.png" alt="ルーム名変更">ルーム名変更</a></li>
<li><a href="chat_add_user.html"><img src="icon/icon_add_user.png" alt="ユーザー招待">ユーザー招待</a></li> <li><a href="chat_add_user.html"><img src="icon/icon_add_user.png" alt="ユーザー招待">ユーザー招待</a></li>
<li ><a href="javascript:return false;" onclick="CHAT_UI.roomDisplayOff();"><img src="icon/icon_chat_gray.png" alt="ユーザー招待">部屋非表示</a></li>
</ul> </ul>
</div> </div>
</div> </div>
......
public_new/template/template_add_user_confirm_user_list.html 0 → 100644
<ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="{{profileImage}}" onError="this.src='./img/noImage.png'"/></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">{{name}}</span>
</div>
</div>
</div>
</div>
</li>
</ul>
\ No newline at end of file
public_new/template/template_add_user_user_list.html 0 → 100644
<ul class="p-0 chat_make_room_list">
{{#userList}}
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" id="checkbox{{shopMemberId}}" name="checkbox[]" class="checkbox-input checkbox{{shopMemberId}}" onchange="CHAT_UI.checkForMakeChat({{shopMemberId}});" {{checked}}>
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'" /></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">{{shopMemberName}}</span>
</div>
</div>
</div>
</div>
</li>
{{/userList}}
</ul>
\ No newline at end of file
public_new/template/template_chatroom_user_filter_list.html 0 → 100644
{{#userList}}
<div class="user_item">
<div class="d-flex flex-column">
<div class="img_wrap filter_img" data-user-id="{{shopMemberId}}">
<img src="{{profileUrl}}" onError="this.src='./img/noImage.png'">
</div>
<span>{{shopMemberName}}</span>
</div>
</div>
{{/userList}}
\ No newline at end of file
public_new/template/template_make_room_confirm_user_list.html 0 → 100644
<ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="{{profileImage}}" onError="this.src='./img/noImage.png'"/></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">{{name}}</span>
</div>
</div>
</div>
</div>
</li>
</ul>
\ No newline at end of file
public_new/template/template_make_room_group_list.html 0 → 100644
<li class="d-flex align-items-center">
<a href="#" class="w-100" onclick="CHAT_UI.refreshAllGroupForMakeRoom({{id}});">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail">
<img src="icon/icon_folder.png" alt="フォルダ" />
</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">{{name}}</span>
</div>
</div>
</div>
</div>
</a>
</li>
\ No newline at end of file
public_new/template/template_make_room_group_path.html 0 → 100644
<a href="#" class="breadcrumb_item" onclick="CHAT_UI.refreshAllGroupForMakeRoom({{id}});"><span>{{name}}</span></a>
\ No newline at end of file
public_new/template/template_make_room_group_user_list.html 0 → 100644
<div class="category"><div class="category_name"><span>{{groupName}}</span></div></div>
<ul class="p-0 chat_make_room_list">
{{#groupUserList}}
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" id="checkbox{{shopMemberId}}" name="checkbox[]" class="checkbox-input checkbox{{shopMemberId}}" onchange="CHAT_UI.checkForMakeChat({{shopMemberId}});" {{checked}}>
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">{{shopMemberName}}</span>
</div>
</div>
</div>
</div>
</li>
{{/groupUserList}}
</ul>
\ No newline at end of file
public_new/template/template_make_room_user_list.html 0 → 100644
<ul class="p-0 chat_make_room_list">
{{#userList}}
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" id="checkbox{{shopMemberId}}" name="checkbox[]" class="checkbox-input checkbox{{shopMemberId}}" onchange="CHAT_UI.checkForMakeChat({{shopMemberId}});" {{checked}}>
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="chat_item_l">
<div class="thumbnail">
<div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'" /></div>
</div>
</div>
<div class="chat_item_m">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">{{shopMemberName}}</span>
</div>
</div>
</div>
</div>
</li>
{{/userList}}
</ul>
\ No newline at end of file
public_new/template/template_my_message.html
<div class="room_right"> <div class="room_right">
<div class="text">{{text}}</div> <div class="text">{{text}}</div>
{{#isToday}}
<div class="date d-flex flex-column"><span></span><span>{{createdAtTime}}</span></div>
{{/isToday}}
{{^isToday}}
<div class="date d-flex flex-column"><span>{{createdAtDay}}</span><span>{{createdAtTime}}</span></div> <div class="date d-flex flex-column"><span>{{createdAtDay}}</span><span>{{createdAtTime}}</span></div>
{{/isToday}}
<div class="read d-flex align-items-end"><span></span></div> <div class="read d-flex align-items-end"><span></span></div>
</div> </div>
\ No newline at end of file
public_new/template/template_user_message.html
<div class="room_left"> <div class="room_left">
<figure> <figure>
<a href="#" data-toggle="modal" data-target="#profileModal1"><img src="{{profileImage}}" onError="this.src='./img/noImage.png'" ></a> <a href="#" data-toggle="modal" data-target="#profileModal1"><img src="{{profileImage}}" onError="this.src='./img/noImage.png'"></a>
</figure> </figure>
<div class="room_left-text"> <div class="room_left-text">
<div class="name">{{from}}</div> <div class="name">{{from}}</div>
<div class="text">{{text}}</div> <div class="text">{{text}}</div>
</div> </div>
{{#isToday}}
<div class="date d-flex flex-column"><span></span><span>{{createdAtTime}}</span></div>
{{/isToday}}
{{^isToday}}
<div class="date d-flex flex-column"><span>{{createdAtDay}}</span><span>{{createdAtTime}}</span></div> <div class="date d-flex flex-column"><span>{{createdAtDay}}</span><span>{{createdAtTime}}</span></div>
{{/isToday}}
<div class="read d-flex align-items-end"><span></span></div> <div class="read d-flex align-items-end"><span></span></div>
</div> </div>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment