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 338 additions and 77 deletions
public_new/archive.html
...@@ -79,7 +79,6 @@ ...@@ -79,7 +79,6 @@
<a href="chat.html"> <a href="chat.html">
<img src="icon/icon_chat_gray.png" alt="チャット"> <img src="icon/icon_chat_gray.png" alt="チャット">
<p>チャット</p> <p>チャット</p>
<span class="unread_num">999+</span>
</a> </a>
</div> </div>
<div class="footer_item"> <div class="footer_item">
......
public_new/contact.html
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<div class="col-4 pr-0"> <div class="col-4 pr-0">
<div class="nav-item"> <div class="nav-item">
<div class="nav_prev"> <div class="nav_prev">
<a href="#"><span>ホーム</span></a> <a href="#" class="home_btn"><span>ホーム</span></a>
</div> </div>
</div> </div>
</div> </div>
...@@ -51,11 +51,11 @@ ...@@ -51,11 +51,11 @@
<div class="content chat_list"> <div class="content chat_list">
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<a href="#" data-toggle="modal" data-target="#myNameCard" style="width: 100%;"> <a href="#" style="width: 100%;">
<div class="chat_item d-flex flex-row align-items-center"> <div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l"> <div class="chat_item_l">
<div class="thumbnail"> <div class="thumbnail">
<div class="img_wrap"><img id="myImg" src="img/noImage.png" alt="サムネイル画像" /></div> <div class="img_wrap"><img id="myImg" src="img/noImage.png" onError="this.src='./img/noImage.png'" /></div>
</div> </div>
</div> </div>
<div class="chat_item_m px-0"> <div class="chat_item_m px-0">
...@@ -179,7 +179,6 @@ ...@@ -179,7 +179,6 @@
<a href="chat.html"> <a href="chat.html">
<img src="icon/icon_chat_gray.png" alt="チャット"> <img src="icon/icon_chat_gray.png" alt="チャット">
<p>チャット</p> <p>チャット</p>
<span class="unread_num">999+</span>
</a> </a>
</div> </div>
<div class="footer_item"> <div class="footer_item">
...@@ -196,7 +195,6 @@ ...@@ -196,7 +195,6 @@
<div id="loadingArea"></div> <div id="loadingArea"></div>
<div id="myProfileModal"></div> <div id="myProfileModal"></div>
<div id="userProfileModal"></div> <div id="userProfileModal"></div>
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/locale/ko.js" charset="UTF-8"></script> <script src="./js/libs/locale/ko.js" charset="UTF-8"></script>
...@@ -206,6 +204,7 @@ ...@@ -206,6 +204,7 @@
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/contact.js"></script> <script src="./js/contact.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
<script src="./js/loading.js"></script>
<script src="./js/language.js"></script> <script src="./js/language.js"></script>
<script src="./js/language_ko.js" charset="UTF-8"></script> <script src="./js/language_ko.js" charset="UTF-8"></script>
<script src="./js/language_ja.js" charset="UTF-8"></script> <script src="./js/language_ja.js" charset="UTF-8"></script>
......
public_new/css/chat.css
...@@ -19,6 +19,9 @@ ...@@ -19,6 +19,9 @@
font-weight: bold; font-weight: bold;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.msg_notification {
display: none;
}
.tab_item:hover { .tab_item:hover {
opacity: 0.75; opacity: 0.75;
} }
...@@ -42,6 +45,11 @@ input[name="tab_item"] { ...@@ -42,6 +45,11 @@ input[name="tab_item"] {
display: block; display: block;
} }
#tabGroup:checked ~ #tab1_content,
#tabDM:checked ~ #tab2_content{
display: block;
}
.tabs input:checked + .tab_item { .tabs input:checked + .tab_item {
background-color: #0070CA; background-color: #0070CA;
color: #fff; color: #fff;
...@@ -127,7 +135,7 @@ input[name="tab_item"] { ...@@ -127,7 +135,7 @@ input[name="tab_item"] {
} }
.chat_item_l .thumbnail3 .img_wrap:nth-child(2) img, .chat_item_l .thumbnail3 .img_wrap:nth-child(3) img { .chat_item_l .thumbnail3 .img_wrap:nth-child(2) img, .chat_item_l .thumbnail3 .img_wrap:nth-child(3) img {
width: 25px; width: 25px;
height: 25px; height: 30px;
} }
.chat_item_l .thumbnail3 .img_wrap:nth-child(3) { .chat_item_l .thumbnail3 .img_wrap:nth-child(3) {
width: 25px; width: 25px;
...@@ -670,6 +678,18 @@ input[name="tab_item"] { ...@@ -670,6 +678,18 @@ input[name="tab_item"] {
background: #5B666F; background: #5B666F;
} }
.message_input_send {
border-radius: 8px;
margin: auto 10px;
text-align: center;
height: 45px;
width: 90px;
background: #0070CA;
color: #fff;
border: none;
font-size: 18px;
}
/**************************** modal *************************/ /**************************** modal *************************/
/* メニューモーダル */ /* メニューモーダル */
.menu_modal .modal-body ul { .menu_modal .modal-body ul {
......
public_new/js/chat-db.js
...@@ -3,12 +3,11 @@ var CHAT_DB = {}; ...@@ -3,12 +3,11 @@ var CHAT_DB = {};
//ロカールDBからルーム一覧情報を取得 //ロカールDBからルーム一覧情報を取得
CHAT_DB.getRoomList = function(roomType) { CHAT_DB.getRoomList = function(roomType, keyWord) {
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
return JSON.parse(iosRoomList); return JSON.parse(iosRoomList);
} else if (CHAT_UTIL.isAndroid()) { } else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn return JSON.parse(android.getRoomList(roomType, keyWord));
return JSON.parse(android.getRoomList(roomType));
} }
}; };
...@@ -29,14 +28,12 @@ CHAT_DB.callGetRoomList = function(roomType) { ...@@ -29,14 +28,12 @@ CHAT_DB.callGetRoomList = function(roomType) {
//ロカールDBからログインしたユーザのデータを取得する。 //ロカールDBからログインしたユーザのデータを取得する。
CHAT_DB.getMyInfo = function(input) { CHAT_DB.getMyInfo = function(input) {
var result = JSON.parse(android.getMyInfo());
CHAT.globalLoginParameter.shopMemberId = result.shopMemberId;
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要 //TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) { } else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn //String形式をJsonに変更してReturn
return result; return JSON.parse(android.getMyInfo());
} }
}; };
...@@ -89,7 +86,6 @@ CHAT_DB.getNameCardData = function(shopMemberId) { ...@@ -89,7 +86,6 @@ CHAT_DB.getNameCardData = function(shopMemberId) {
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要 //TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) { } else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getNameCardData(shopMemberId)); return JSON.parse(android.getNameCardData(shopMemberId));
} }
}; };
...@@ -121,6 +117,15 @@ CHAT_DB.getGroupByName = function(groupName) { ...@@ -121,6 +117,15 @@ CHAT_DB.getGroupByName = function(groupName) {
} }
}; };
CHAT_DB.getUsersInRoom = function(roomId) {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getUsersInRoom(roomId));
}
}
// アーカイブ一覧 // アーカイブ一覧
var iosArchiveList; var iosArchiveList;
......
public_new/js/chat-room.js 0 → 100644
var lastscrollvalue;
window.onscroll = function() {
var scrollPosition = window.scrollY || document.documentElement.scrollTop;
if (scrollPosition == 0) {
console.log('Scroll on TOP!!');
//TODO add getMessages(newLine);
if (CHAT_UTIL.isIOS()) {
} else if (CHAT_UTIL.isAndroid()) {
//android.getMessages()
}
}
}
/*
$('#messages').scroll(function() {
console.log('messagescroll');
if ($(this).scrollTop() === 0) {
if (!$('#chatLoader').is(':visible')) {
// 現在、メッセージの個数以前をメッセージを読み込む
// ローディングアイコンを追加する
let loader = $('<div id="chatLoader" class="text-center"><div class="spinner-grow spinner-grow-sm" role="status" /></div>')
$('#messages').prepend(loader)
loader.remove();
// socket.emit('getMessages', $(this).children().length, function() {
// // ローディングアイコンを削除する
// loader.remove();
// });
}
}
});*/
public_new/js/chat-websocket.js
...@@ -4,25 +4,16 @@ var socket; ...@@ -4,25 +4,16 @@ var socket;
var CHAT_SOCKET = {}; var CHAT_SOCKET = {};
CHAT_SOCKET.connectSocket = function () { CHAT_SOCKET.connectSocket = function () {
CHAT_UI.dismissLoadingIndicator();
if (IS_ONLINE == 'true') { if (IS_ONLINE == 'true') {
socket = io(CHAT_SERVER_URL); socket = io(CHAT_SERVER_URL);
console.log(socket);
setSocketAction(); setSocketAction();
android.updateRoomList();
CHAT_UI.refreshRoomList(chatRoomType.DM);
CHAT_UI.dismissLoadingIndicator();
$('#createChatRoom').show();
} else { } else {
//オフラインの場合、DBからルーム一覧を表示。 //オフラインの場合、DBからルーム一覧を表示。
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
//TODO IOSの場合 //TODO IOSの場合
} else if (CHAT_UTIL.isAndroid()) { } else if (CHAT_UTIL.isAndroid()) {
//$('.overlay').removeClass('active undismissable');
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
CHAT_UI.refreshRoomList(chatRoomType.DM);
CHAT_UI.dismissLoadingIndicator();
$('#createChatRoom').show();
} }
} }
}; };
...@@ -172,12 +163,28 @@ function setSocketAction () { ...@@ -172,12 +163,28 @@ function setSocketAction () {
// New Message // New Message
// #36170 // #36170
socket.on('newMessage', function(message, roomId, roomName) { socket.on('newMessage', function(message, roomId, roomName) {
let template = $('#message-template').html(); let messageTime = CHAT_UTIL.formatDate(message.createdAt);
var userMessageTemplate;
$.get({ url: "./template/template_user_message.html", async: false }
, function(text) {
userMessageTemplate = text;
});
var myMessageTemplate;
$.get({ url: "./template/template_my_message.html", async: false }
, function(text) {
myMessageTemplate = text;
});
var systemMessageTemplate;
$.get({ url: "./template/template_system_message.html", async: false }
, function(text) {
systemMessageTemplate = text;
});
let template = userMessageTemplate;
if (message.id === socket.id) { if (message.id === socket.id) {
// ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する // ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する
template = $('#message-template-me').html(); template = myMessageTemplate;
} }
let messageTime = CHAT_UTIL.formatDate(message.createdAt);
message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath) message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath)
try { try {
...@@ -185,7 +192,9 @@ function setSocketAction () { ...@@ -185,7 +192,9 @@ function setSocketAction () {
} catch(e) { } catch(e) {
message.text = message.text message.text = message.text
} }
var replacePath = message.text;
replacePath = replacePath.replaceAll('?fileName=', '?sid=' + CHAT.globalLoginParameter.sid + '&fileName=');
message.text = replacePath;
let html = Mustache.render(template, { let html = Mustache.render(template, {
text: message.text, text: message.text,
from: message.from, from: message.from,
...@@ -200,7 +209,7 @@ function setSocketAction () { ...@@ -200,7 +209,7 @@ function setSocketAction () {
// 画像、動画の描画を待ってからスクロール // 画像、動画の描画を待ってからスクロール
setTimeout(function () { setTimeout(function () {
CHAT_UI.scrollToBottom(); CHAT_UI.scrollToBottom();
}, 1500); }, 300);
}); });
// Notification // Notification
...@@ -280,7 +289,10 @@ function setSocketAction () { ...@@ -280,7 +289,10 @@ function setSocketAction () {
// Update User List In Room // Update User List In Room
// サイドバーのユーザーリストアップデート。 // サイドバーのユーザーリストアップデート。
socket.on('updateUserList', function(users, onlineUsers) { /* socket.on('updateUserList', function(users, onlineUsers) {
console.log(users);
console.log(onlineUsers);
if (users.length > 0) { if (users.length > 0) {
$('#users').removeData(); $('#users').removeData();
$('#users').data(users); $('#users').data(users);
...@@ -318,7 +330,7 @@ function setSocketAction () { ...@@ -318,7 +330,7 @@ function setSocketAction () {
ul.append(li); ul.append(li);
}); });
$('#users').html(ul); $('#users').html(ul);
}); });*/
// Update Group List(Invite) // Update Group List(Invite)
socket.on('refreshGroupList', function(groups, isInvite) { socket.on('refreshGroupList', function(groups, isInvite) {
......
public_new/js/chat.js
...@@ -88,16 +88,16 @@ CHAT.createVideoThumbnailAndUpload = function(sourceImage, callback) { ...@@ -88,16 +88,16 @@ CHAT.createVideoThumbnailAndUpload = function(sourceImage, callback) {
// Ajaxでイメージをアップロードする // Ajaxでイメージをアップロードする
CHAT.uploadImage = function(formData) { CHAT.uploadImage = function(formData) {
formData.append('roomId', CHAT.globalLoginParameter.roomId); formData.append('roomId', CHAT.globalLoginParameter.roomId);
formData.append('sid', CHAT.globalLoginParameter.sid);
jQuery.ajax({ jQuery.ajax({
async: true, async: true,
url: CMS_SERVER_URL+"/file/upload", url: CMS_SERVER_URL+"/chatapi/file/upload",
type: "post", type: "post",
data: formData, data: formData,
contentType: false, contentType: false,
processData: false processData: false
}).done(function(res) { }).done(function(res) {
// 8 var imgPath = CMS_SERVER_URL + '/chatapi/file/getImage?fileName=' + res.fileName + '&roomId=' + CHAT.globalLoginParameter.roomId;
var imgPath = CMS_SERVER_URL + '/file/getImage?fileName=' + res.fileName + '&roomId=' + CHAT.globalLoginParameter.roomId;
var imageName = res.fileName var imageName = res.fileName
// uploadFileの判断 // uploadFileの判断
...@@ -106,11 +106,10 @@ CHAT.uploadImage = function(formData) { ...@@ -106,11 +106,10 @@ CHAT.uploadImage = function(formData) {
// 画像の処理 // 画像の処理
if (res.fileType == "jpeg" || res.fileType == "jpg" || res.fileType == "png") { if (res.fileType == "jpeg" || res.fileType == "jpg" || res.fileType == "png") {
if (res.thumbnailPath && res.thumbnailPath.length > 0) { if (res.thumbnailPath && res.thumbnailPath.length > 0) {
imgPath = CMS_SERVER_URL + '/file/getImage?fileName=' + res.thumbImageFileName + '&roomId=' + CHAT.globalLoginParameter.roomId; imgPath = CMS_SERVER_URL + '/chatapi/file/getImage?fileName=' + res.thumbImageFileName + '&roomId=' + CHAT.globalLoginParameter.roomId;
imageName = res.thumbImageFileName; imageName = res.thumbImageFileName;
} }
let downloadPath = CMS_SERVER_URL + '/chatapi/file/download?fileName=' + imageName + '&roomId=' + CHAT.globalLoginParameter.roomId;
let downloadPath = CMS_SERVER_URL + '/file/download?fileName=' + imageName + '&roomId=' + CHAT.globalLoginParameter.roomId;
// アップロードが終了した後ローディング画面から離れてメッセージをメッセージを転送する // アップロードが終了した後ローディング画面から離れてメッセージをメッセージを転送する
const lightbox = $('<a/>',{href:imgPath, 'data-lightbox':'attachedImages','data-title':imageName}); const lightbox = $('<a/>',{href:imgPath, 'data-lightbox':'attachedImages','data-title':imageName});
const image = $('<img/>',{src:imgPath, width:'auto',style:'max-width:100%'}); const image = $('<img/>',{src:imgPath, width:'auto',style:'max-width:100%'});
...@@ -127,15 +126,16 @@ CHAT.uploadImage = function(formData) { ...@@ -127,15 +126,16 @@ CHAT.uploadImage = function(formData) {
} }
socket.emit('createMessage', { socket.emit('createMessage', {
//text: '['+encodedText+'<&split>'+messageType.IMAGE+']'
text: encodedText text: encodedText
}, 1); }, 1);
} else { // 動画の処理 } else { // 動画の処理
if (res.thumbnailPath && res.thumbnailPath.length > 0) { if (res.thumbnailPath && res.thumbnailPath.length > 0) {
imgPath = CMS_SERVER_URL + '/file/getImage?fileName=' + res.thumbImageFileName + '&roomId=' + CHAT.globalLoginParameter.roomId; imgPath = CMS_SERVER_URL + '/chatapi/file/getImage?fileName=' + res.thumbImageFileName + '&roomId=' + CHAT.globalLoginParameter.roomId;
} }
let downloadPath = CMS_SERVER_URL + '/file/download?fileName=' + imageName + '&roomId=' + CHAT.globalLoginParameter.roomId; let downloadPath = CMS_SERVER_URL + '/chatapi/file/download?fileName=' + imageName + '&roomId=' + CHAT.globalLoginParameter.roomId;
const aTag = $('<a/>', {id:"attachedImages"}) const aTag = $('<a/>', {id:"attachedImages"})
const image = $('<img/>',{src:imgPath, width:'auto',style:'max-width:100%'}); const image = $('<img/>',{src:imgPath, width:'auto',style:'max-width:100%'});
const downloadIcon = $('<a/>',{href:downloadPath, class:'fa fa-download', download:res.fileName}); const downloadIcon = $('<a/>',{href:downloadPath, class:'fa fa-download', download:res.fileName});
...@@ -152,6 +152,7 @@ CHAT.uploadImage = function(formData) { ...@@ -152,6 +152,7 @@ CHAT.uploadImage = function(formData) {
} }
socket.emit('createMessage', { socket.emit('createMessage', {
//text: '['+encodedText+'<&split>'+messageType.VIDEO+']'
text: encodedText text: encodedText
}, 1); }, 1);
} }
...@@ -215,13 +216,14 @@ CHAT.createThumbnailAndUpload = function(sourceImage, callback) { ...@@ -215,13 +216,14 @@ CHAT.createThumbnailAndUpload = function(sourceImage, callback) {
} }
// 該当チャットルームに参加するためログイン情報をサーバに渡す // 該当チャットルームに参加するためログイン情報をサーバに渡す
getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomName = undefined, languageCode) { getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomName = undefined, languageCode, shopMemberId) {
var loginParam = new Object() var loginParam = new Object()
loginParam.sid = sid; loginParam.sid = sid;
loginParam.loginId = loginId; loginParam.loginId = loginId;
loginParam.shopName = shopName; loginParam.shopName = shopName;
loginParam.roomId = roomId; loginParam.roomId = roomId;
loginParam.roomName = roomName; loginParam.roomName = roomName;
loginParam.shopMemberId = shopMemberId;
CHAT.globalLoginParameter = loginParam; CHAT.globalLoginParameter = loginParam;
...@@ -269,19 +271,6 @@ CHAT.leaveRoom = function() { ...@@ -269,19 +271,6 @@ CHAT.leaveRoom = function() {
}); });
} }
CHAT.requestMyinfo = function() {
jQuery.ajax({
async: true,
url: CMS_SERVER_URL + "/chatapi/user?sid=" + CHAT.globalLoginParameter.sid + "&cmd=" + userAPICmd.MYINFO,
type: "get",
processData: false,
contentType: false
}).done(function(res) {
console.log(res);
return res;
})
}
$(function() { $(function() {
// ルーム開設メンバー数カウント // ルーム開設メンバー数カウント
$('input:checkbox').change(function() { $('input:checkbox').change(function() {
...@@ -346,15 +335,70 @@ $(function() { ...@@ -346,15 +335,70 @@ $(function() {
$(this).toggleClass("filter"); $(this).toggleClass("filter");
}); });
$('#chat .search_form input[type="search"]').click(function(){
let roomListTitle = getLocalizedString("room_search_placeholder");
$('#chatTitle').text(roomListTitle);
});
$('#chat .search_form .cancel').click(function(){
let roomListTitle = getLocalizedString("roomListTitle");
$('#chatTitle').text(roomListTitle);
});
// チャットメンバー検索 // チャットメンバー検索
$('#chat .search_form input[type="search"]').keyup(function(){ $('#chat .search_form input[type="search"]').keyup(function(){
$.ajax({ $('.overlay_src_msg').empty();
url: 'search_message_user_list.html', var keyword = $('#chat .search_form input[type="search"]').val();
type: 'POST', if (keyword == '' || keyword.length < 2) {
datatype: 'html' return;
}).done(function (data) { }
$('.overlay_src_msg').html(data); var rooms = CHAT_DB.getRoomList(chatRoomType.ALL, keyword);
}) let roomListTitle = getLocalizedString("room_search_placeholder");
$('#chatTitle').text(roomListTitle);
var template;
$.get({ url: "./template/template_room_list.html", async: false }
, function(text) {
template = text;
});
rooms.forEach(function(room) {
room.profileImagePath = ASSET_PATH + 'images/user-profile.png'
if (room.message) {
room.message = room.message.toString()
} else {
room.message = getLocalizedString("noMessages")
}
var displayMsg;
if (room.messageType == messageType.TEXT || room.messageType == messageType.TEXT) displayMsg = room.message;
if (room.messageType == messageType.IMAGE || room.messageType == messageType.SYSTEM) displayMsg = getLocalizedString("image");
var attendUserName = [];
room.attendUsers.forEach(function(user) {
user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
attendUserName.push(user.shopMemberName);
});
var thumbnailCount = room.attendUsers.length > 4 ? 4 : room.attendUsers.length;
if (room.chatRoomName == "") {
room.chatRoomName = attendUserName.join(', ');
}
let html = Mustache.render(template, {
thumbnailCount: thumbnailCount,
roomName: room.chatRoomName,
roomId: room.chatRoomId,
profileImage: room.profileImagePath,
lastMessage: displayMsg ,
time: room.insertDate ? CHAT_UTIL.formatDate(room.insertDate).createdAt : '',
unreadMsgCnt: room.unreadCount == 0 ? '' : room.unreadCount,
userCnt: room.attendUsers.length + 1,
attendUsers: room.attendUsers
});
// Click event
let obj = $(jQuery.parseHTML(html)).on('click', function() {
});
$('.overlay_src_msg').append(obj);
});
if (CHAT_UI.isLandscapeMode()) {
$(".chat_list").removeClass("col-12").addClass("col-6");
}
}); });
// ルームメンバー検索 // ルームメンバー検索
$('#chat_room .search_form input[type="search"]').keyup(function(){ $('#chat_room .search_form input[type="search"]').keyup(function(){
......
public_new/js/common.js
// アコーディオン // アコーディオン
$('.category').on('click',function () { $('.category').on('click', function() {
$(this).toggleClass("open"); $(this).toggleClass("open");
$(this).next().slideToggle(); $(this).next().slideToggle();
}); });
$('.home_btn').on('click', function() {
android.goHome();
});
$(function() { $(function() {
var h = $(window).height(); //画面の高さを取得 var h = $(window).height(); //画面の高さを取得
...@@ -47,4 +50,17 @@ $(function() { ...@@ -47,4 +50,17 @@ $(function() {
$('.overlay_src_msg').empty(); $('.overlay_src_msg').empty();
}); });
$('.message_input_form').click(function(){
$('.message_input_send').removeClass('none');
$('.attach_file').addClass('none');
});
$('.message_input_form').on('focusout',function(e){
if($(e.relatedTarget).hasClass('message_input_send')){
CHAT_UI.sendMessage();
}
$('.message_input_send').addClass('none');
$('.attach_file').removeClass('none');
});
}); });
public_new/js/constant.js
...@@ -23,7 +23,8 @@ const userAPICmd = { ...@@ -23,7 +23,8 @@ const userAPICmd = {
const chatRoomType = { const chatRoomType = {
DM : "1", DM : "1",
GROUP : "0" GROUP : "0",
ALL : "2"
} }
const nameCardAreaId = { const nameCardAreaId = {
......
public_new/js/contact.js
$(function() { $(function() {
// メンバー検索 // メンバー検索
$('#contact .search_form input[type="search"]').keyup(function(){ $('#contact .search_form input[type="search"]').keyup(function(e){
var isAllGroup = $('#tabAllGroup').is(':checked'); var isAllGroup = $('#tabAllGroup').is(':checked');
$('.overlay_src_msg').empty(); $('.overlay_src_msg').empty();
//全グループ検索画面
if (isAllGroup) {
var keyword = $('#contact .search_form input[type="search"]').val(); var keyword = $('#contact .search_form input[type="search"]').val();
if (keyword == '') { if (keyword == '' || keyword.length < 2) {
return; return;
} }
//全グループ検索画面
if (isAllGroup) {
//グループデータ検索 //グループデータ検索
var groupList = CHAT_DB.getGroupByName(keyword); var groupList = CHAT_DB.getGroupByName(keyword);
var groupTemplate; var groupTemplate;
......
public_new/js/language_ja.js
...@@ -4,7 +4,7 @@ $.lang.ja = { ...@@ -4,7 +4,7 @@ $.lang.ja = {
"room_search_placeholder":" ルーム検索", "room_search_placeholder":" ルーム検索",
"participants":"メンバーリスト", "participants":"メンバーリスト",
"exitRoom":"退出 ", "exitRoom":"退出 ",
"roomListTitle":"ルーム一覧", "roomListTitle":"チャット",
"deleteRoomTitle":"ルーム削除", "deleteRoomTitle":"ルーム削除",
"inviteUsersButton":"招待", "inviteUsersButton":"招待",
"inviteUsersTitle":"メンバー追加", "inviteUsersTitle":"メンバー追加",
......
public_new/loading.html
<div id="loader-bg"> <div id="loader-bg" class="loading-indicator">
<div id="loader"> <div id="loader" class="loading-indicator">
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i> <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
</div> </div>
</div> </div>
public_new/template/template_chatroom_user_list.html 0 → 100644
{{#userList}}
<div class="user_item">
<a href="javascript:return false;" onclick="CHAT_UI.makeNameCard({{shopMemberId}})">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="{{profileUrl}}" onError="this.src='./img/noImage.png'">
</div>
<span>{{shopMemberName}}</span>
</div>
</a>
</div>
{{/userList}}
\ No newline at end of file
public_new/template/template_close_collaboration_message.html 0 → 100644
<!-- 通話 -->
<div class="collabo_area_container">
<!-- 時刻 -->
<div class="collabo_date text-right">
<span>12:23 PM</span>
</div>
<div class="collabo_area disable">
<div class="collabo_desc">
<div class="collabo_room_name d-flex flex-row">
<span>ルーム名ルーム名</span>
<span>の通話</span>
</div>
<div class="d-flex flex-row justify-content-between">
<div class="collabo_user_list d-flex flex-row">
<div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
<div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
<div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
<div class="num"><span>10</span></div>
</div>
<div class="collabo_time">
<span>1:10:20</span>
</div>
</div>
<div class="collabo_btn">
<button type="button" name="button">
<img src="icon/icon_profile_phone.png" alt="通話">
<span>終了しました</span>
</button>
</div>
</div>
</div>
</div>
\ No newline at end of file
public_new/template/template_my_message.html 0 → 100644
<div class="room_right">
<div class="text">{{text}}</div>
<div class="date d-flex flex-column"><span>{{createdAtDay}}</span><span>{{createdAtTime}}</span></div>
<div class="read d-flex align-items-end"><span></span></div>
</div>
\ No newline at end of file
public_new/template/template_open_collaboration_message.html 0 → 100644
<!-- 通話 -->
<div class="collabo_area_container">
<!-- 時刻 -->
<div class="collabo_date text-right">
<span>12:23 PM</span>
</div>
<div class="collabo_area">
<div class="collabo_desc">
<div class="collabo_room_name d-flex flex-row">
<span>ルーム名ルーム名ルーム名ルーム名</span>
<span>の通話</span>
</div>
<div class="d-flex flex-row justify-content-between">
<div class="collabo_user_list d-flex flex-row">
<div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
<div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
<div class="img_wrap"><img src="img/noImage.png" alt="プロフィール画像"></div>
<div class="num"><span>10</span></div>
</div>
<div class="collabo_time">
<span>1:10:20</span>
</div>
</div>
<div class="collabo_btn">
<button type="button" name="button">
<img src="icon/icon_profile_phone.png" alt="通話">
<span>参加する</span>
</button>
</div>
</div>
</div>
</div>
\ No newline at end of file
public_new/template/template_room_list.html 0 → 100644
<li class="d-flex align-items-center">
<a href="#" class="w-100" onclick="CHAT_UI.joinRoom({{roomId}},'{{roomName}}');">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thumbnail{{thumbnailCount}} thumbnail">
{{#attendUsers}}
<div class="img_wrap"><img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/></div>
{{/attendUsers}}
{{^attendUsers}}
<div class="img_wrap"><img src='./img/noImage.png'/></div>
{{/attendUsers}}
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="d-flex flex-row">
<div class="chat_item_t ">
<span class="chat_item_ttl">{{roomName}}</span>
</div>
<span class="chat_item_num">({{userCnt}})</span>
</div>
<div class="chat_item_desc">
{{lastMessage}}
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">{{time}}</span>
{{#unreadMsgCnt}}
<span class="chat_item_unread">{{unreadMsgCnt}}</span>
{{/unreadMsgCnt}}
</div>
</div>
</div>
</a>
</li>
\ No newline at end of file
public_new/template/template_system_message.html 0 → 100644
<div class="sys_msg text-center">2021/03/04</div>
\ No newline at end of file
public_new/template/template_user_message.html 0 → 100644
<div class="room_left">
<figure>
<a href="#" data-toggle="modal" data-target="#profileModal1"><img src="{{profileImage}}" onError="this.src='./img/noImage.png'"></a>
</figure>
<div class="room_left-text">
<div class="name">{{from}}</div>
<div class="text">{{text}}</div>
</div>
<div class="date d-flex flex-column"><span>{{createdAtDay}}</span><span>{{createdAtTime}}</span></div>
<div class="read d-flex align-items-end"><span></span></div>
</div>
\ No newline at end of file
public_new/template/template_user_name_card.html
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
<div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header border-0"> <div class="modal-header border-0">
<div class="profile_desc d-flex flex-row"> <div class="prifile_desc d-flex flex-row">
<img src="{{profileImage}}" onError="this.src='./img/noImage.png'"/> <img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/>
<div class="profile_name"><span>{{name}}</span></div> <div class="prifile_name"><span>{{name}}</span></div>
</div> </div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
{{#groupPathList}} {{#groupPathList}}
<li style="display: block;">・{{.}}</li> <li onclick="CHAT_UI.refreshAllGroupSearch({{groupId}});"><b>{{groupPath}}</b></li>
{{/groupPathList}} {{/groupPathList}}
</div> </div>
<div class="modal-footer border-0 justify-content-center"> <div class="modal-footer border-0 justify-content-center">
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
<span>通話</span> <span>通話</span>
</div> </div>
</button> </button>
<button type="button" class="border-0 bg_blue"> <button type="button" class="border-0 bg_blue" onclick="CHAT_UI.startChat('{{shopMemberId}}','{{name}}');">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_profile_chat.png" alt="チャット"> <img src="icon/icon_profile_chat.png" alt="チャット">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment