Skip to content

C
chat_webview
Commit 5aeec968 by Lee Munkyeong
Options

連絡先画面デザイン適用中

parent 40227def
Showing with 2867 additions and 9 deletions
public_new/contact.html
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
</div> </div>
<div class="col-4 p-0"> <div class="col-4 p-0">
<div class="nav-item p-0"> <div class="nav-item p-0">
<h1 class="nav-ttl">コンタクト</h1> <h1 class="nav-ttl" id="title" >コンタクト</h1>
</div> </div>
</div> </div>
<div class="col-4 pl-0"> <div class="col-4 pl-0">
...@@ -48,7 +48,28 @@ ...@@ -48,7 +48,28 @@
<a href="#" class="cancel none">キャンセル</a> <a href="#" class="cancel none">キャンセル</a>
</form> </form>
</div> </div>
<div class="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%;">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img id="myImg" src="img/noImage.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" id="myName"></span>
</div>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<!-- タブ --> <!-- タブ -->
<div class="content tabs"> <div class="content tabs">
<input id="tab1" type="radio" name="tab_item" checked> <input id="tab1" type="radio" name="tab_item" checked>
...@@ -418,13 +439,51 @@ ...@@ -418,13 +439,51 @@
</footer> </footer>
<!-- ローディング --> <!-- ローディング -->
<!--#include virtual="loading.html" --> <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>
<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/contact.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();
<script src="./js/libs/jquery-3.3.1.min.js"></script> function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
<script src="./js/libs/moment.js"></script> CHAT_SERVER_URL = chatServerUrl;
<script src="./js/libs/bootstrap.min.js"></script> CMS_SERVER_URL = cmsServerUrl;
<script src="./js/libs/jquery.mark.min.js"></script> PLATFORM = platform;
<script src="./js/contact.js"></script> IS_MOBILE = isMobile;
<script src="./js/common.js"></script> IS_ONLINE = isOnline;
CHAT_UI.refreshContactScreen();
};
</script>
</body> </body>
</html> </html>
public_new/js/chat-db.js 0 → 100644
// 名前空間
var CHAT_DB = {};
//ロカールDBからルーム一覧情報を取得
CHAT_DB.getRoomList = function(roomType) {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getRoomList(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;
}
};
CHAT_DB.getMessages = function(roomId) {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getMessageList(roomId));
}
};
CHAT_DB.getFavoriteUsers = function() {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getFavoriteUsers());
}
};
CHAT_DB.getFavoriteGroups = function() {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getFavoriteGroups());
}
};
CHAT_DB.getMyGroupUsers = function() {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要
} else if (CHAT_UTIL.isAndroid()) {
//String形式をJsonに変更してReturn
return JSON.parse(android.getMyGroupUsers());
}
};
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));
}
};
\ No newline at end of file
public_new/js/chat-error.js 0 → 100644
jQuery('#homeButton').on('click', function() {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要。
} else if (CHAT_UTIL.isAndroid()) {
android.goHome();
}
});
jQuery('#reloadButton').on('click', function() {
if (CHAT_UTIL.isIOS()) {
//TODO IOS処理追加必要。
} else if (CHAT_UTIL.isAndroid()) {
android.reload();
}
});
\ No newline at end of file
public_new/js/chat-ui.js 0 → 100644
// 名前空間
var CHAT_UI = {};
// Rotate
$(window).on('resize', function() {
if (CHAT_UTIL.isMobile()) {
return;
}
console.log(`width : ${$(this).width()}`);
console.log(`height : ${$(this).height()}`);
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");
$(".squareBoxContent span").addClass("landscape_span");
$(".mesgs").addClass("landscape_mesgs");
} else {
$(".group_list").removeClass("col-6").addClass("col-12");
$(".user_list").removeClass("col-6").addClass("col-12");
$(".chat_list").removeClass("col-6").addClass("col-12");
$(".squareBoxContent span").removeClass("landscape_span");
$(".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
// チャットルーム生成ボタン処理
$('#createChatRoom').on('click', function() {
//loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
let isInvite = false;
CHAT.globalIsInvite = isInvite;
socket.emit('getGroupList', isInvite);
});
// Room Delete
// チャットルーム削除ボタン処理
$('#roomDeleteButton').on('click', function(e) {
if ($('.deleteBox').is(':visible')) {
// チャットルーム削除アイコンが表示されている時、ブラインド処理を行う
$('.deleteBox').finish().show().fadeTo('slow', 0, function() {
$(this).hide();
});
// チャットリストについてクリックイベントを与える
$('.chat_list').off('click');
$('.chat_list:not(.active_chat)').on('click', function(e) {
//loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
let roomId = $(this).data('roomId');
let roomName = $(this).data('roomname');
socket.emit('joinRoom', roomId, roomName, function() {
$('#messages').html('');
$('.titleRoomName').text(roomName).data('roomName', roomName);
$('#pills-chat-tab').tab('show');
$("#message-search").attr("placeholder", getLocalizedString("chat_search_placeholder"));
});
});
let roomListTitle = getLocalizedString("roomListTitle")
$('.titleRoomName').text(roomListTitle)
$('.chat_list.active_chat').on('click', function(e){
$('#pills-chat-tab').tab('show');
});
} else {
// チャットルーム削除アイコンが表示されていない場合、表示する
$('.deleteBox').finish().hide().fadeTo('slow',1).show();
// #36129に対応
let deleteRoomTitle = getLocalizedString("deleteRoomTitle")
$('.titleRoomName').text(deleteRoomTitle)
// 重複処理を防ぐためにチャットリストのクリックイベントを消す
$('.chat_list').off('click');
// チャットルームの削除アイコンにクリックイベントを与える
$('.deleteBox').off('click');
$('.deleteBox').on('click', function(e){
// #36174
let roomId = $(this).data('roomId');
let activeRoom = $(this).data('activeRoom');
$("#roomDeleteTitle").text(getLocalizedString("roomDeleteTitle"));
$("#roomDelete").text(getLocalizedString("roomDelete"));
$("#cancelTitle").text(getLocalizedString("cancelTitle"));
// #36128
$('#roomDeleteConfirm').appendTo("body").modal({
backdrop: 'static',
keyboard: false
})
.on('click', '#roomDelete', function(e) {
//loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
// 現在接続されているチャットルームを離れるとメッセージテップを初期化する
if (activeRoom) {
$('#messages').html('');
CHAT.saveRoomInfo('', '');
}
// チャットルームから退場する
socket.emit('exitRoom', roomId);
// #36129に対応
let roomListTitle = getLocalizedString("roomListTitle")
$('.titleRoomName').text(roomListTitle)
});
});
}
});
$('#room-search').on('input', function(event) {
if ($('#room-search').val().length > 0) {
// 検索結果が有る場合、結果を表示する
socket.emit('roomSearch', encodeURIComponent($('#room-search').val()));
} else {
if (IS_ONLINE == 'true') {
android.updateRoomList();
CHAT_UI.refreshRoomList(chatRoomType.DM);
CHAT_UI.dismissLoadingIndicator();
}
}
});
//上にスクロールすると新しいメッセージを呼ぶ処理。
$('#messages').scroll(function(){
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();
// });
}
}
});
// UIの位置調整(キーボード出現時)
$('#message-form').on('focus', function(){
if (CHAT_UTIL.isIOS()) {
// メッセージ入力欄の位置指定
document.querySelector('.fixed-bottom').style.bottom = 10000 + 'px';
setTimeout(function() {
document.querySelector('.fixed-bottom').style.bottom = 0 + 'px';
},200);
}
});
CHAT_UI.setNavigationPosition = function(y) {
if (document.activeElement.id == 'message-form') {
$('.navbar').css('position','absolute');
$('.navbar').css('top', (y) + 'px');
$('.tab-pane').css('margin-top', y + 'px');
var height = document.getElementById("messages").getBoundingClientRect().height;
$('.msg_history').css('height', height - y + 'px');
} else if (document.activeElement.id == 'message-search') {
$('.msg_history').css('height', '');
}
}
CHAT_UI.resetNavigationPosition = function() {
$('.navbar').css('position','');
$('.navbar').css('top', '');
$('.tab-pane').css('margin-top','');
$('.msg_history').css('height', '');
}
// 端末の向きを記録(キーボード出現時にLandscapeModeと判定する対策)
var isLandscape;
CHAT_UI.setOrientation = function(isLandscapeMode){
if (isLandscapeMode == 'false') {
$(".mesgs").removeClass("landscape_mesgs");
isLandscape = false;
} else {
$(".mesgs").addClass("landscape_mesgs");
isLandscape = true;
}
}
//メッセージ送信
$('#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');
const message = messageTextBox.val().length > 0 ? encodeURIComponent(messageTextBox.val() + " ") : "";
messageTextBox.val('');
if (message.length > 0) {
socket.emit(
'createMessage', { text: message }
, 0
);
}
$('#message-form').focus();
});
// 写真アップロード
$('#fileUploadButton').on('click', function(){
$('#imageInputTag').click();
});
// 動画アップロード
$('#fileUploadButton2').on('click', function(){
$('#imageInputTag2').click();
});
$('#imageInputTag').on('change', function(){
$('#image-form').submit();
});
$('#imageInputTag2').on('change', function(){
$('#image-form2').submit();
});
$('#image-form').on('submit', function(e){
e.preventDefault();
const imageInputTag = $('#imageInputTag');
const file = imageInputTag.prop('files')[0];
if (file) {
$('.overlay').addClass('active undismissable');
$('.loader').addClass('active');
CHAT_UI.showLoadingIndicator();
var fd = new FormData($(this)[0]);
//画像の大きさが500pixelより大きかったら、thumbnailを生成
CHAT.createThumbnailAndUpload(file, function(resizeFile, thumbnailCreated){
if (resizeFile && thumbnailCreated) {
//ただ、画像の大きさが500pixel以下の場合はthumbnailは生成されない
fd.append('thumb', resizeFile)
}
// イメージをアップロード
CHAT.uploadImage(fd)
})
}
});
$('#image-form2').on('submit', function(e){
e.preventDefault();
const imageInputTag2 = $('#imageInputTag2');
const file = imageInputTag2.prop('files')[0];
if (file) {
$('.overlay').addClass('active undismissable');
$('.loader').addClass('active');
CHAT_UI.showLoadingIndicator();
var fd = new FormData($(this)[0]);
if(!file.type.includes("image")) { // video 保存
CHAT.createVideoThumbnailAndUpload(file, function(resizeFile, thumbnailCreated){
if(resizeFile && thumbnailCreated) {
//ただ、画像の大きさが500pixel以下の場合はthumbnailは生成されない
fd.append('thumb', resizeFile)
}
CHAT.uploadImage(fd);
})
return;
}
}
});
/* --------------------------------------------------- */
/* Nav Bar Functions */
/* --------------------------------------------------- */
$('#message-search').on('input', function(event) {
// チャットキーワードを入力するとページ内にある単語をハイライトする。(mark.js 使用)
if ($(this).val()) {
$('.message_content').unmark();
$('.message_content').mark($(this).val());
if ($('[data-markjs=true]').length > 0) {
// マーキングされている単語があった場合、最後の単語にスクロールを移動する。
CHAT_UI.scrollToLastMarkedUnseen($(this).val());
} else {
// マーキングされている単語がない場合、下段にスクロールする。
CHAT_UI.scrollToBottom();
}
} else {
// チャットキーワードが空欄になるとマーキングを解除し、下段にスクロールする。
$('.message_content').unmark();
CHAT_UI.scrollToBottom();
}
});
//次のマーキングされた単語にスクロールを移動する。
$('#pre-search').on('click', function(event) {
CHAT_UI.scrollToLastMarkedUnseen(jQuery('#message-search').val());
});
// Exit Room
$('#exitRoom').on('click', function(event){
// 36174
$("#exitRoomTitle").text(getLocalizedString("exitRoomTitle"));
$("#exitRoomOk").text(getLocalizedString("yesTitle"));
$("#noExit").text(getLocalizedString("cancelTitle"));
$('#exitRoomConfirm').appendTo("body").modal({
backdrop: 'static',
keyboard: false
})
.on('click', '#exitRoomOk', function(e) {
//loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
// チャットルームから退場する
socket.emit('exitRoom');
$('#dismiss').click();
CHAT.saveRoomInfo('', '');
});
});
// Side Bar
$('#sidebarCollapse').on('click', function (){
// open sidebar
$('#sidebar').addClass('active');
// fade in the overlay
$('.overlay').addClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
$('#dismiss, .overlay').on('click', function (){
// hide sidebar
$('#sidebar').removeClass('active');
// hide overlay if dismissable
$('.overlay:not(.undismissable)').removeClass('active');
});
//Invite User
//招待ボタンを押すとグループリストを持ってくる。(ボタンを動的に追加して微動作中)
$('#addUser').on('click', function(event){
//loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
let isInvite = true;
CHAT.globalIsInvite = isInvite;
socket.emit('getGroupList', isInvite);
});
//グループ画面での検索
$('#groupListKeyword').on('input', function(event) {
// data-name値で当該キーワードが入っているグループのみを表示する。
if ($(this).val()) {
$('.group_list:not([data-name*="'+$(this).val()+'" i])').hide();
$('.group_list[data-name*="'+$(this).val()+'" i]').show();
} else {
$('.group_list').show();
}
});
$('#userListKeyword').on('input', function(event) {
// data-name値で当該キーワードが入っているユーザーのみを表示する。
if ($(this).val()) {
$('.user_list:not([data-name*="'+$(this).val()+'" i])').hide();
$('.user_list[data-name*="'+$(this).val()+'" i]').show();
} else {
$('.user_list').show();
}
});
$('#selectListKeyword').on('input', function(event) {
if ($(this).val()) {
$('.select_user_list:not([data-name*="'+$(this).val()+'" i])').hide();
$('.select_user_list[data-name*="'+$(this).val()+'" i]').show();
} else {
$('.select_user_list').show();
}
});
/* ---------------------------------------------------------------------- */
/* */
/* Etc */
/* */
/* ---------------------------------------------------------------------- */
// Tab Open/Shown Event
$('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
var target = $(e.target).attr("href"); // e.target : activated tab
switch(target) {
case '#pills-chat':
if (CHAT_UI.isLandscapeMode()) {
$(".mesgs").addClass("landscape_mesgs");
} else {
$(".mesgs").removeClass("landscape_mesgs");
}
CHAT.globalIsInvite = true;
$('.chatRoomIcon, .titleRoomName, #backButton').show();
$('.roomListIcon, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn').hide();
$('#homeButton').hide();
$('.titleRoomName').text($('.titleRoomName').data('roomName'));
$('#newRoomName').val('');
$('#userSelectionLength').text('');
CHAT.globalSelectedUserList = [];
$('#bottomNav').hide();
$('#backButton').off().on('click', function() {
//loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
CHAT.saveRoomInfo();
if (IS_ONLINE == 'true') {
socket.emit('leaveRoom', function() {
android.updateRoomList();
});
}
CHAT_UI.refreshRoomList(chatRoomType.DM);
CHAT_UI.dismissLoadingIndicator();
});
//loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator();
break;
case '#pills-chatlist':
$('.titleRoomName, #backButton').show();
$('.chatRoomIcon, #backButton, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn').hide();
$('#homeButton').show();
$('#room-search').val('');
$('#room-search').show();
$('#room_list').show();
// set Title
let roomListTitle = getLocalizedString("roomListTitle")
$('#bottomNav').show();
$('.titleRoomName').text(roomListTitle);
$('#newRoomName').val('');
$('#userSelectionLength').text('');
CHAT.globalSelectedUserList = [];
break;
case '#pills-contact':
$('#myNamecard').html('');
$('#homeButton').show();
$("#backButton").hide();
$('.titleRoomName').show();
$('#myGroupArea').show();
$('#allGroupArea').hide();
$('#my_info').show();
$('#bottomNav').show();
break;
case '#pills-user':
$("#backButton").show();
$("#userSelectionDeleteBtn").hide();
$('#homeButton').hide();
$('#bottomNav').hide();
//loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator();
break;
case '#pills-group':
$("#backButton").show();
$("#userSelectionDeleteBtn").hide();
$('#homeButton').hide();
$('#bottomNav').hide();
//loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator();
break;
case '#pills-confirm':
$("#backButton").show();
//loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator();
$('#homeButton').hide();
$('#bottomNav').hide();
$('.user_people').css("paddingLeft", "0px");
break;
case '#pills-communication': // コミュニケーションのタブ
case '#pills-setting': // 設定のタブ
case '#pills-profile': // ユーザプロファイルのタブ
$('#bottomNav').hide();
$('.titleRoomName').show();
$('.roomListIcon, .chatRoomIcon, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn').hide();
$('#backButton').hide();
break;
default:
$('.titleRoomName').show();
$('.roomListIcon, .chatRoomIcon, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn').hide();
$('#backButton').hide();
break;
}
});
// Tab Close/Hidden Event
$('a[data-toggle="pill"]').on('hide.bs.tab', function(e) {
var target = $(e.target).attr("href"); // e.target : activated tab
switch(target) {
case '#pills-chat':
$('#message-search').val('');
break;
case '#pills-chatlist':
$('#room-search').val('');
$('#room-search').show();
break;
case '#pills-group':
$('#groupListKeyword').val('');
break;
case '#pills-contact':
break;
case '#pills-user':
$('#userListKeyword').val('');
break;
case '#pills-confirm':
$('#select_user_list').html('');
$('#selectUserListKeyword').val('');
$('.titleRoomName').show();
$('.user_people').css("paddingLeft", "12%");
break;
case '#pills-communication':
case '#pills-setting':
case '#pills-profile':
break;
default:
break;
}
});
$('#pills-chat-tab').on('shown.bs.tab', function (e){
CHAT_UI.scrollToBottom();
});
$('#pills-user-tab').on('shown.bs.tab', function (e){
$('#userSelectionConfirmBtn').show();
});
$('#pills-confirm-tab').on('shown.bs.tab', function (e){
$('#userSelectionConfirmBtn').show();
$('#userSelectionLength').text('');
$('#userSelectionDeleteBtn').hide();
});
CHAT_UI.scrollToBottom = function() {
const messages = $('#messages');
const scrollHeight = messages.prop('scrollHeight');
messages.scrollTop(scrollHeight);
};
CHAT_UI.scrollToLastMarkedUnseen = function(value) {
let target = $('[data-markjs=true]:not([data-seen=true])').last();
let messages = $('#messages');
if (target.length > 0) {
messages.scrollTop(target.prop('offsetTop') - target.prop('offsetHeight') - messages.prop('offsetHeight') + target.parent().parent().height());
target.attr('data-seen', true);
} else {
messages.scrollTop(0);
$('.message_content').unmark();
$('.message_content').mark(value);
}
};
//loadingIndicatorを表示
CHAT_UI.showLoadingIndicator = function() {
$("#loadingIndicator").addClass('active undismissable');
}
//loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator = function() {
$("#loadingIndicator").removeClass('active undismissable');
}
//画面の方向をcheck
CHAT_UI.isLandscapeMode = function() {
if (CHAT_UTIL.isMobile()) {
return false;
}
return $(window).width() > $(window).height()
}
CHAT_UI.setConfirmButtonEvent = function(isInvite) {
let titleText = isInvite ? getLocalizedString("inviteUsersSubtitle") : getLocalizedString("createRoomSubtitle")
let invitedUserText = getLocalizedString("invitedUser")
if (!isInvite) {
$('#newRoomName').show();
}
$('#userSelectionConfirmBtn').off().on('click', function(event) {
//loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
CHAT_UI.showConfirmView(isInvite);
});
CHAT_UI.showConfirmView(isInvite);
$('#inviteStatus').text(titleText);
$('#invitedUsers').text(invitedUserText);
$('#pills-confirm-tab').tab('show');
}
//ConfirmView initialize
CHAT_UI.showConfirmView = function(isInvite) {
const template = $('#user-template').html();
$('#select_user_list').html('');
CHAT.globalSelectedUserList.forEach(function(user){
let html = Mustache.render(template, {
id: user.shopMemberId,
profileImage: user.profileImagePath,
name: user.loginId
});
// TODO 次のコミットに参考事項
// チャットルーム開設画面で参加ユーザー削除用チェックロジックが残っているので
// 影響テスト後、削除予定。 kang-dh
let obj = $(jQuery.parseHTML(html)).on('click',function(){
$(this).find('.userCheckBox').toggleClass('active');
});
$('#select_user_list').append(obj);
});
let roomListTitle = getLocalizedString("createRoomTitle")
$('.titleRoomName').text(roomListTitle)
// Rotate
if (CHAT_UI.isLandscapeMode()) {
$(".user_list").addClass("col-6").removeClass("col-12");
$(".squareBoxContent span").addClass("landscape_span");
}
$('#backButton').off().on('click', function() {
//loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
socket.emit('getGroupList', isInvite)
});
$("#userSelectionConfirmBtn").off().on('click', function(){
if (isInvite) {
let userIdList = jQuery.makeArray($('#select_user_list .user_list').find('.userCheckBox')).map(function (e) {
return e.dataset.id;
});
// ユーザーの名前(login id)リスト。
let loginIdList = jQuery.makeArray($('#select_user_list .user_list').find('.userCheckBox')).map(function (e) {
return e.dataset.name;
});
if(userIdList.length > 0 && loginIdList.length > 0) {
//loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
socket.emit('inviteUsers', userIdList, loginIdList, function() {
$("#userSelectionDeleteBtn").hide();
$('#pills-chat-tab').tab('show');
});
}
} else {
if ($('#select_user_list .user_list').find('.userCheckBox').length > 0) {
// #36130に対応
const trimmedRoomName = $('#newRoomName').val().trim()
if (trimmedRoomName.length == 0) {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
let userIdList = jQuery.makeArray($('#select_user_list .user_list').find('.userCheckBox')).map(function (e) {
return e.dataset.id;
});
let userNameList = jQuery.makeArray($('#select_user_list .user_list').find('.userCheckBox')).map(function (e) {
return e.dataset.name;
});
//TODO DB作業が終わったら自分のユーザ名を表示するかを判断し、修正予定。
// 参加ユーザ名でルーム名を生成
let newRoomName = CHAT.globalLoginParameter.loginId + ',' + userNameList.join(',');
// ルーム名のURIencodingを行う
//const encodedRoomName = encodeURIComponent(newRoomName);
//todo android create room api
android.createChatRoom("1",userIdList.join(','),newRoomName);
/*socket.emit('createNewRoom', userIdList, encodedRoomName, function(newRoomId) {
socket.emit('joinRoom', newRoomId, newRoomName, function () {
CHAT.saveRoomInfo(newRoomId, newRoomName);
$('#messages').html('');
$('.titleRoomName').text(newRoomName).data('roomName', newRoomName);
$("#userSelectionDeleteBtn").hide();
$('#pills-chat-tab').tab('show');
});
});*/
/*socket.on('createNewRoom', (shopMemberIdList, newRoomName, callback) => {
const user = onlineUsers.getUser(socket.id)
if(user){
var loginIdListObj = new Object();
var newRoomNameObj = new Object();
loginIdListObj.type = 'loginIdList'
loginIdListObj.value = shopMemberIdList
newRoomNameObj.type = 'newRoomName'
newRoomNameObj.value = newRoomName
var path = httpRequest.makeChatRoomManageUrlPath(user.shopName, constant.ROOM_CREATENEWROOM, user.sid, loginIdListObj, newRoomNameObj)
winston.info('path' + path)
httpRequest.readResult(path, (res) =>{
const error = serverErrorHandler(res)
if(error.errorFlag) {
winston.error("Failed to [createNewRoom] process.")
socket.emit("showServerError", error.errorMessage);
return;
}
winston.info('create new room from server '+ util.inspect(res, false, null, false))
callback(res.roomId)
// ユーザーリストをアップデートする
socket.emit(res.roomId).emit('updateUserList', res.userList, [user.shop_member_id])
})
} else {
socket.emit("retryJoinProcess")
//join process
}
})*/
} else if(trimmedRoomName.includes(';') || trimmedRoomName.includes('/') || trimmedRoomName.includes('?') || trimmedRoomName.includes(':') || trimmedRoomName.includes("@")
|| trimmedRoomName.includes('&') || trimmedRoomName.includes('=') || trimmedRoomName.includes("+") || trimmedRoomName.includes('$') || trimmedRoomName.includes(",") || trimmedRoomName.includes('-')
|| trimmedRoomName.includes('_') || trimmedRoomName.includes('.') || trimmedRoomName.includes('!') || trimmedRoomName.includes('~') || trimmedRoomName.includes('*') || trimmedRoomName.includes("\'")
|| trimmedRoomName.includes('(') || trimmedRoomName.includes(')') || trimmedRoomName.includes('#') || trimmedRoomName.includes("\\") || trimmedRoomName.includes("\"") || trimmedRoomName.includes("`")) {
// #36147
// #36174
$("#customAlertTitle").text(getLocalizedString("invalidCharacter"));
$("#customAlertOk").text(getLocalizedString("yesTitle"));
$('#customAlert').appendTo("body").modal({
backdrop: 'static',
keyboard: false
})
.on('click', '#customAlertOk', function(e) {
});
} else if (trimmedRoomName.length > 20) {
// #36142
var inputText = $('#newRoomName').val().trim(); // #36142 文字列の前又は後の空白文字列を削除
// #36174
$("#customAlertTitle").text(getLocalizedString("nameTooLong"));
$("#customAlertOk").text(getLocalizedString("yesTitle"));
$('#customAlert').appendTo("body").modal({
backdrop: 'static',
keyboard: false
})
.on('click', '#customAlertOk', function(e) {
$('#newRoomName').val(inputText.substr(0, $('#newRoomName').prop("maxlength")));
});
} else {
//loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
let userIdList = jQuery.makeArray($('#select_user_list .user_list').find('.userCheckBox')).map(function (e) {
return e.dataset.id;
});
// ルーム名のtrimmingした後、URIencodingを行う
const encodedRoomName = encodeURIComponent(trimmedRoomName);
android.createChatRoom("1",userIdList.join(','),encodedRoomName);
}
}
}
});
$("#userSelectionDeleteBtn").hide();
$("#userSelectionDeleteBtn").off().on('click', function() {
// #36174
$("#customConfirmTitle").text(getLocalizedString("memberDeleteTitle"));
$("#customConfirmOk").text(getLocalizedString("roomDelete"));
$("#customAlertCancel").text(getLocalizedString("cancelTitle"));
$('#customConfirm').appendTo("body").modal({
backdrop: 'static',
keyboard: false
})
.on('click', '#customConfirmOk', function(e) {
CHAT_UI.deleteButtonAction(isInvite);
});
});
}
CHAT_UI.deleteButtonAction = function(isInvite) {
//配列の整理
jQuery.makeArray($('#select_user_list .user_list').find(".userCheckBox.active")).map(function (e) {
CHAT.globalSelectedUserList = CHAT.globalSelectedUserList.filter(function(element) {
return e.dataset.name != element.loginId;
});
});
CHAT_UI.showConfirmView(isInvite)
$('#select_user_list .user_list').find('.userCheckBox').show();
}
CHAT_UI.htmlElementTextInitialize = function(languageCode) {
moment.locale(languageCode);
setLanguage(languageCode);
$(".titleRoomName").text(getLocalizedString("roomListTitle"));
$("#message-form").attr("placeholder", getLocalizedString("chat_placeholder"));
$("#message-search").attr("placeholder",getLocalizedString("chat_search_placeholder"));
$("#exitRoom").text(getLocalizedString("exitRoom")).append("<i class='fas fa-door-open'></i>")
$("#participants").text(getLocalizedString("participants"))
$("#fileUploadButton").text(getLocalizedString("photo"))
$("#fileUploadButton2").text(getLocalizedString("video"))
$("#okayLabel").text(getLocalizedString("okayLabel"))
$("#completeLabel").text(getLocalizedString("completeLabel"))
$("#thankLabel").text(getLocalizedString("thankLabel"))
$("#startToWorkLabel").text(getLocalizedString("startToWorkLabel"))
$("#groupListKeyword").attr("placeholder", getLocalizedString("groupSearch"))
$("#contactListKeyword").attr("placeholder", getLocalizedString("contactSearch"))
$("#room-search").attr("placeholder",$("#room-search").attr("placeholder")+getLocalizedString("room_search_placeholder"));
$("#userListKeyword").attr("placeholder", getLocalizedString("userSearch"))
$("#newRoomName").attr("placeholder", getLocalizedString("newRoomName"))
$("#dmBtn").text(getLocalizedString("directMessageChatRoom"))
$("#groupBtn").text(getLocalizedString("groupChatRoom"))
$("#myGroupBtn").text(getLocalizedString("myGroup"))
$("#allGroupBtn").text(getLocalizedString("allGroup"))
$("#groupPathSeperator").text(getLocalizedString("groupPath"))
$("#moveBtnSeperator").text(getLocalizedString("quickBtn"))
$("#rootGroupBtn").text(getLocalizedString("returnToRootGroup"))
$("#parentGroupBtn").text(getLocalizedString("returnToParentGroup"))
$("#childGroupSeperator").text(getLocalizedString("childGroup"))
$("#groupUserSeperator").text(getLocalizedString("groupUser"))
$("#favorite-seperator").text(getLocalizedString("favorite"))
$("#mygroup-seperator").text(getLocalizedString("mygroup"))
}
// 画像の読み込みが全て終わったタイミングでコールバック実行
// FIXME 追加読み込みの場合は差分の画像のみ監視すべきだが、現状新規入室時にしか対応出来ていない。
CHAT_UI.waitForLoadingImage = function(div, callback) {
var imgs = div.find("img");
var count = imgs.length;
if (count==0)
callback();
var loaded = 0;
imgs.one( "load" , function ( e ) {
// イメージが読み込まれた
loaded++;
if ( loaded === count ) {
callback();
}
}).each( function () {
if ( this.complete || this.readyState === readyState.COMPLETED ) {
$(this).trigger("load");
}
});
}
$('#contactButton').on('click', function(event){
CHAT_UI.refreshContactScreen();
});
$('#chatButton').on('click', function(event){
CHAT_UI.refreshRoomList(chatRoomType.DM);
});
CHAT_UI.refreshContactScreen = function() {
$('#myProfileModal').html('');
$('#userProfileModal').html('');
//画面タイトル設定
let contactListTitle = getLocalizedString("contactListTitle");
$('#title').text(contactListTitle);
// グループの様式を読み込む
const groupTemplate = $('#group-template').html();
// ユーザの様式を読み込む
var userTemplate;
$.get({ url: "./template/template_user_list.html", async: false }
, function(text) {
userTemplate = text;
});
var myNamecardTemplate;
$.get({ url: "./template/template_my_name_card.html", async: false }
, function(text) {
myNamecardTemplate = text;
});
//const userNamecardTemplate = $('#namecard-template').html();
if (IS_ONLINE == 'true') {
android.updateGroupInfo('0');
android.updateMyInfo();
android.updateGroupUser();
}
var myInfo = CHAT_DB.getMyInfo();
console.log(myInfo);
myInfo.profileImagePath = CHAT.getProfileImgUrl(myInfo.profileUrl)
let myNamecardHtml = Mustache.render(myNamecardTemplate, {
loginId: myInfo.shopMemberId,
profileImage: myInfo.profileImagePath,
name: myInfo.shopMemberName,
groupPathList: myInfo.groupPathList
});
let myNamecardObj = $(jQuery.parseHTML(myNamecardHtml)).on('click', function(){
});
$('#myProfileModal').append(myNamecardObj);
$('#myName').text(myInfo.shopMemberName);
$('#myImg').attr('src',myInfo.profileImagePath);
/*let html = Mustache.render(userTemplate, {
id: myInfo.shopMemberId,
profileImage: myInfo.profileImagePath,
name: myInfo.shopMemberName
});
let obj = $(jQuery.parseHTML(html)).on('click', function(){
CHAT_UI.showNamecard('myNamecard');
});
$('#my_info').append(obj);*/
var groupUserList = CHAT_DB.getMyGroupUsers();
groupUserList.forEach(function(groupUser) {
groupUser.profileImagePath = CHAT.getProfileImgUrl(groupUser.profileUrl)
let html = Mustache.render(userTemplate, {
id: groupUser.shopMemberId,
profileImage: groupUser.profileImagePath,
name: groupUser.shopMemberName
});
let obj = $(jQuery.parseHTML(html)).on('click', function(){
CHAT_UI.makeNameCard(groupUser.shopMemberId);
});
$('#my_group_list').append(obj);
})
var favoriteCount = 0;
var favoriteGroupList = CHAT_DB.getFavoriteGroups();
favoriteGroupList.forEach(function(favoriteGroup) {
let html = Mustache.render(groupTemplate, {
name: favoriteGroup.groupName
});
let obj = $(jQuery.parseHTML(html)).on('click', function(){
//TODO need onClick Action
});
favoriteCount++
$('#favorite_list').append(obj);
})
var favoriteUserList = CHAT_DB.getFavoriteUsers();
favoriteUserList.forEach(function(favoriteUser) {
favoriteUser.profileImagePath = CHAT.getProfileImgUrl(favoriteUser.profileUrl)
let html = Mustache.render(groupTemplate, {
id: favoriteUser.shopMemberId,
profileImage: favoriteUser.profileImagePath,
name: favoriteUser.shopMemberName
});
let obj = $(jQuery.parseHTML(html)).on('click', function(){
//TODO need onClick Action
});
favoriteCount++
$('#favorite_list').append(obj);
})
if (favoriteCount == 0) {
$('#favorite_list').hide();
$('#favorite-seperator').hide();
} else {
$('#favorite_list').show();
$('#favorite-seperator').show();
}
CHAT_UI.dismissLoadingIndicator();
}
CHAT_UI.refreshRoomList = function(roomType) {
var rooms = CHAT_DB.getRoomList(roomType);
CHAT.globalIsInvite = false;
activeRoomId = null;
// #36146に対応
let keywordSearchMode = false;
if ($('#room-search').val().length > 0) {
keywordSearchMode = true;
}
$('#room_list').html('');
let roomListTitle = getLocalizedString("roomListTitle");
$('.titleRoomName').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>`);
}
}
// チャットルームの様式を読み込む
const template = $('#room-template').html();
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;
//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");
let html = Mustache.render(template, {
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
});
// Click event
let obj = $(jQuery.parseHTML(html)).on('click', function() {
let roomId = $(this).data('roomId');
let roomName = $(this).data('roomname');
CHAT_UI.joinRoom(roomId,roomName);
//TODO ルームに入る処理追加必要
});
// チャットルームリストに追加する
$('#room_list').append(obj);
});
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) {
if (IS_ONLINE == 'true') {
android.updateMessages(roomId);
socket.emit('joinRoom', roomId, roomName, function() {
});
}
var messages = CHAT_DB.getMessages(roomId);
CHAT_UI.loadMessages(messages, roomId, roomName)
};
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"));
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("")
}
// #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;
})
// メッセージの画面描画
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();
}
}
// ユーザ削除ボタン表示しない
$("#userSelectionDeleteBtn").hide();
CHAT_UI.dismissLoadingIndicator();// add some...
// チャットに遷移する
$('#pills-chat-tab').tab('show');
};
$('#dmBtn').on('click', function (e){
CHAT_UI.refreshRoomList(chatRoomType.DM);
});
$('#groupBtn').on('click', function (e){
CHAT_UI.refreshRoomList(chatRoomType.GROUP);
});
CHAT_UI.showNamecard = function(id) {
$('#'+id).appendTo("body").modal({
backdrop: 'static',
keyboard: false
})
}
CHAT_UI.hideNamecard = function(id) {
$('#'+id).modal('hide');
}
CHAT_UI.showUserNamecard = function(shopMemberId) {
// $('#myNamecard').appendTo("body").modal({
// backdrop: 'static',
// keyboard: false
// })
}
$('#myGroupBtn').on('click', function (e){
$('#myGroupArea').show();
$('#allGroupArea').hide();
});
$('#allGroupBtn').on('click', function (e){
CHAT_UI.refesshAllGroupSearch('0')
});
CHAT_UI.refesshAllGroupSearch = function(groupId) {
const userNamecardTemplate = $('#namecard-template').html();
if (IS_ONLINE == 'true') {
android.updateGroupInfo(groupId);
}
$('#rootGroupBtn').off();
$('#parentGroupBtn').off();
var result = CHAT_DB.getGroupInfo(groupId);
$('#childGroupList').html('');
$('#userInGroupList').html('');
$('#groupPathArea').html('');
if (typeof result.parentGroupId !== 'undefined') {
console.log(result.parentGroupId);
$('#parentGroupBtn').on('click', function() {
CHAT_UI.refesshAllGroupSearch(result.parentGroupId);
});
}
if (typeof result.rootGroupId !== 'undefined') {
console.log(result.rootGroupId);
$('#rootGroupBtn').on('click', function() {
CHAT_UI.refesshAllGroupSearch(result.rootGroupId);
});
}
const groupNaviTemplate = $('#group-navigater-template').html();
var groupCount = 0;
result.groupPathList.forEach(function(groupPath) {
if (groupCount != 0) {
$('#groupPathArea').append("<label class='group-navigater'> > </label>");
}
let html = Mustache.render(groupNaviTemplate, {
name: groupPath.groupName,
id: groupPath.groupId
});
let obj = $(jQuery.parseHTML(html)).on('click', function(){
CHAT_UI.refesshAllGroupSearch(groupPath.groupId);
});
groupCount++;
$('#groupPathArea').append(obj);
})
const groupTemplate = $('#group-template').html();
result.childGroupList.forEach(function(childGroup) {
let html = Mustache.render(groupTemplate, {
name: childGroup.groupName,
id: childGroup.groupId
});
let obj = $(jQuery.parseHTML(html)).on('click', function(){
CHAT_UI.refesshAllGroupSearch(childGroup.groupId);
});
$('#childGroupList').append(obj);
})
const userTemplate = $('#user-template').html();
result.groupUserList.forEach(function(groupUser) {
groupUser.profileImagePath = CHAT.getProfileImgUrl(groupUser.profileUrl)
let html = Mustache.render(userTemplate, {
id: groupUser.shopMemberId,
profileImage: groupUser.profileImagePath,
name: groupUser.shopMemberName
});
let obj = $(jQuery.parseHTML(html)).on('click', function(){
CHAT_UI.makeNameCard(groupUser.shopMemberId);
});
$('#userInGroupList').append(obj);
})
$('#myGroupArea').hide();
$('#allGroupArea').show();
}
CHAT_UI.startChat = function (userShopMemberId,userName) {
CHAT_UI.showLoadingIndicator();
var userIdList = [];
userIdList.push(userShopMemberId);
// 参加ユーザ名でルーム名を生成
let newRoomName = CHAT.globalLoginParameter.loginId + ',' +userName;
android.createChatRoom(chatRoomType.DM, userIdList.join(','),newRoomName);
CHAT_UI.hideNamecard(nameCardAreaId.USER);
};
CHAT_UI.startVoice = function () {
//add Android Chat click
console.log("VoiceClick");
};
CHAT_UI.changeFavorite = function () {
//add Android Chat click
console.log("FavoriteClick");
};
CHAT_UI.removeFavoriteUser = function (shopMemberId) {
//add Android Chat click
console.log("removeFU");
};
CHAT_UI.insertFavoriteUser = function (shopMemberId) {
//add Android Chat click
console.log("insertFU");
};
CHAT_UI.changeFavorite = function () {
//add Android Chat click
console.log("FavoriteClick");
};
CHAT_UI.makeNameCard = function (shopMemberId) {
console.log('makeNameCard Click');
var nameCardInfo = CHAT_DB.getNameCardData(shopMemberId);
console.log(nameCardInfo);
const userNamecardTemplate = $('#namecard-template').html();
let namecardHtml = Mustache.render(userNamecardTemplate, {
loginId: nameCardInfo.shopMemberId,
profileImage: nameCardInfo.profileImagePath,
name: nameCardInfo.shopMemberName,
groupPathList: nameCardInfo.groupPathList,
chat: getLocalizedString("chat"),
voice: getLocalizedString("voice"),
favorite: getLocalizedString("addFavorite")
});
let namecardObj = $(jQuery.parseHTML(namecardHtml)).on('click', function(){
});
$('#userNamecard').html(namecardObj);
CHAT_UI.showNamecard('userNamecard');
};
CHAT_UI.makeNameCardInChatRoom = function (chatRoomId) {
console.log('makeNameCard Click');
var nameCardInfo = CHAT_DB.getNameCardData(chatRoomId);
console.log(nameCardInfo);
const userNamecardTemplate = $('#namecard-template').html();
let namecardHtml = Mustache.render(userNamecardTemplate, {
loginId: nameCardInfo.shopMemberId,
profileImage: nameCardInfo.profileImagePath,
name: nameCardInfo.shopMemberName,
groupPathList: nameCardInfo.groupPathList,
chat: getLocalizedString("chat"),
voice: getLocalizedString("voice"),
favorite: getLocalizedString("addFavorite")
});
let namecardObj = $(jQuery.parseHTML(namecardHtml)).on('click', function(){
});
$('#userNamecard').html(namecardObj);
CHAT_UI.showNamecard('userNamecard');
};
CHAT_UI.refesshAllGroupSearchFaborite = function(groupId) {
const userNamecardTemplate = $('#namecard-template').html();
if (IS_ONLINE == 'true') {
android.updateGroupInfo(groupId);
}
$('#rootGroupBtn').off();
$('#parentGroupBtn').off();
var result = CHAT_DB.getGroupInfo(groupId);
$('#childGroupList').html('');
$('#userInGroupList').html('');
$('#groupPathArea').html('');
if (typeof result.parentGroupId !== 'undefined') {
console.log(result.parentGroupId);
$('#parentGroupBtn').on('click', function() {
CHAT_UI.refesshAllGroupSearch(result.parentGroupId);
});
}
if (typeof result.rootGroupId !== 'undefined') {
console.log(result.rootGroupId);
$('#rootGroupBtn').on('click', function() {
CHAT_UI.refesshAllGroupSearch(result.rootGroupId);
});
}
const groupNaviTemplate = $('#group-navigater-template').html();
var groupCount = 0;
result.groupPathList.forEach(function(groupPath) {
if (groupCount != 0) {
$('#groupPathArea').append("<label class='group-navigater'> > </label>");
}
let html = Mustache.render(groupNaviTemplate, {
name: groupPath.groupName,
id: groupPath.groupId
});
let obj = $(jQuery.parseHTML(html)).on('click', function(){
CHAT_UI.refesshAllGroupSearch(groupPath.groupId);
});
groupCount++;
$('#groupPathArea').append(obj);
})
const groupTemplate = $('#group-template').html();
result.childGroupList.forEach(function(childGroup) {
let html = Mustache.render(groupTemplate, {
name: childGroup.groupName,
id: childGroup.groupId
});
let obj = $(jQuery.parseHTML(html)).on('click', function(){
CHAT_UI.refesshAllGroupSearch(childGroup.groupId);
});
$('#childGroupList').append(obj);
})
const userTemplate = $('#user-template').html();
result.groupUserList.forEach(function(groupUser) {
groupUser.profileImagePath = CHAT.getProfileImgUrl(groupUser.profileUrl)
let html = Mustache.render(userTemplate, {
id: groupUser.shopMemberId,
profileImage: groupUser.profileImagePath,
name: groupUser.shopMemberName
});
let obj = $(jQuery.parseHTML(html)).on('click', function(){
CHAT_UI.makeNameCard(groupUser.shopMemberId);
});
$('#userInGroupList').append(obj);
})
$('#myGroupArea').hide();
$('#allGroupArea').show();
}
\ No newline at end of file
public_new/js/chat-util.js 0 → 100644
// 名前空間
var CHAT_UTIL = {};
CHAT_UTIL.isAndroid = function() {
return PLATFORM == 'android';
};
CHAT_UTIL.isIOS = function() {
return PLATFORM == 'ios';
};
CHAT_UTIL.isMobile = function() {
return IS_MOBILE == 'true';
};
CHAT_UTIL.formatDate = function(date) {
const REFERENCE = moment();
const TODAY = REFERENCE.clone().startOf('day');
let createdAt = moment(date);
if (date.length == 14) {
createdAt = moment(date,'YYYYMMDDhhmmss');
} else {
createdAt = moment(date);
}
// #36171
const createdAtDay = createdAt.format('MMM Do');
const createdAtTime = createdAt.format('HH:mm');
if (createdAt.isSame(TODAY, 'd')) {
createdAt = createdAtTime;
} else {
createdAt = createdAtDay;
}
let rntDate = new Object();
rntDate.createdAtDay = createdAtDay;
rntDate.createdAtTime = createdAtTime;
rntDate.createdAt = createdAt;
return rntDate;
}
CHAT_UTIL.htmlDecode = function(input) {
var e = document.createElement('textarea');
e.innerHTML = input;
// handle case of empty input
return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}
//generates a unique id, not obligator a UUID
CHAT_UTIL.generateUUID = function() {
var d = new Date().getTime();
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = (d + Math.random()*16)%16 | 0;
d = Math.floor(d/16);
return (c=='x' ? r : (r&0x3|0x8)).toString(16);
});
return uuid;
};
public_new/js/chat-websocket.js 0 → 100644
var socket;
// 名前空間
var CHAT_SOCKET = {};
CHAT_SOCKET.connectSocket = function () {
CHAT_UI.dismissLoadingIndicator();
if (IS_ONLINE == 'true') {
socket = io(CHAT_SERVER_URL);
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();
}
}
};
/* ---------------------------------------------------
* Socket Connect/Disconnectc
* --------------------------------------------------- */
function setSocketAction () {
socket.on('connect', function() {
// socketが接続されたらチャット画面で画面を更新する
$('.overlay').removeClass('active undismissable');
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
// チャットルームに入場する際、sid, loginId, shopName, roomId, roomNameの情報を取得しNodeJsに渡す
if (CHAT_UTIL.isIOS()) {
webkit.messageHandlers.loginInfoRequestMessageHandlerId.postMessage({});
} else if (CHAT_UTIL.isAndroid()) {
android.getLoginParameter();
}
CHAT_UI.dismissLoadingIndicator();
});
socket.on('disconnect', function (){
console.log('disconnect');
//socketが切断されたら黒画面で画面を更新する
$('.overlay').addClass('active undismissable');
//alert('Disconnected from the server');
CHAT_UI.dismissLoadingIndicator();
});
socket.on('connect_error', function (){
console.log('connect_error');
CHAT_UI.dismissLoadingIndicator();
});
/* ----------------------------------------------------------------------
*
* Chat Room List Tab
*
* ---------------------------------------------------------------------- */
// Update Room List
//TODO APIの連動が終わったら削除予定
/*socket.on('refreshRoomList', function(rooms, activeRoomId = null){
CHAT.globalIsInvite = false;
// #36146に対応
let keywordSearchMode = false;
if ($('#room-search').val().length > 0) {
keywordSearchMode = true;
}
$('#room_list').html('');
let roomListTitle = getLocalizedString("roomListTitle");
$('.titleRoomName').text(roomListTitle);
if (rooms.length === 0) {
// #36146に対応
// 検索結果がない場合のメッセージを追加
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>`);
}
}
// チャットルームの様式を読み込む
const template = $('#room-template').html();
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")
}
let html = Mustache.render(template, {
roomName: room.roomName,
roomId: room.roomId,
profileImage: room.profileImagePath,
active: activeRoomId === room.roomId ? 'active_chat' : null, // 現在、入っているルームだとhilight表示
lastMessage: room.message.includes('<img') ? getLocalizedString("image") : (keywordSearchMode ? `${room.message}${getLocalizedString("searchResult")}` : room.message) ,
time: room.time ? CHAT_UTIL.formatDate(room.time.time).createdAt : '',
unreadMsgCnt: room.unreadCnt,
userCnt: room.userCnt
});
// Click event
let obj = $(jQuery.parseHTML(html)).on('click',function(){
if (activeRoomId === room.roomId) {
// 既存チャットルームをタッチする場合、チャット画面に遷移
$('#pills-chat-tab').tab('show');
} else {
// loadingIndicatorを表示しない
CHAT_UI.showLoadingIndicator();
// 新しいチャットルームをタッチする場合、チャットルームの接続処理を実行
socket.emit('joinRoom', room.roomId, room.roomName, function (){
CHAT.saveRoomInfo(room.roomId, room.roomName);
$('#messages').html('');
// チャットルーム名を変更する
$('.titleRoomName').text(room.roomName).data('roomName', room.roomName);
});
}
});
// チャットルームリストに追加する
$('#room_list').append(obj);
});
// #36146に対応
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()
// Rotate
if(CHAT_UI.isLandscapeMode()) {
$(".chat_list").removeClass("col-12").addClass("col-6");
}
$("#userSelectionDeleteBtn").hide();
// チャットルームリスト画面に遷移
$('#pills-chatlist-tab').tab('show');
// loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator();
});*/
// New Message
// #36170
socket.on('newMessage', function (message, roomId, roomName) {
let template = $('#message-template').html();
if (message.id === socket.id) {
// ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する
template = $('#message-template-me').html();
}
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
}
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 () {
CHAT_UI.scrollToBottom();
}, 1500);
});
// Notification
socket.on('newNotification', function(keyword, event){
var notificationString = getLocalizedString(event, keyword)
$('#messageNotification').finish().text(notificationString).delay(500).slideDown().delay(1500).slideUp();
});
// 新しいメッセージを受信する場合の処理
// #36170
// socket.on('loadMessages', function(messages, shopMemberId, users, roomId, roomName){
// let jQueryMessages = $('#messages');
// // スクロールの変化を防ぐため以前画面の高さを保存する
// let beforeHeight = jQueryMessages.prop('scrollHeight');
// // メッセージ文字列の生成
// let workVal = "";
// messages.forEach(function(message) {
// let template = $('#message-template').html();
// if (message.shopMemberId == shopMemberId) {
// template = $('#message-template-me').html();
// }
// let messageTime = CHAT_UTIL.formatDate(message.time.time);
//
// if (users != undefined) {
// let user = users.find((user) => user.loginId == message.loginId)
//
// // userProfilePathが使えるpathかをcheckして使えないpathの場合、default画像の経路に変更
// if (user) {
// message.profileImagePath = CHAT.getProfileImgUrl(user.profileImagePath)
// } else {
// message.profileImagePath = CHAT.getProfileImgUrl("")
// }
// } else {
// message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath)
// }
//
// // #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,
// 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;
// })
//
// // メッセージの画面描画
// 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();
// }
// }
//
// // ユーザ削除ボタン表示しない
// $("#userSelectionDeleteBtn").hide();
//
// CHAT_UI.dismissLoadingIndicator();// add some...
//
// // チャットに遷移する
// $('#pills-chat-tab').tab('show');
// });
// Update User List In Room
// サイドバーのユーザーリストアップデート。
socket.on('updateUserList', function(users, onlineUsers){
if (users.length > 0) {
$('#users').removeData();
$('#users').data(users);
} else {
const data = $('#users').data();
if (data && Object.keys(data).length > 0){
users = Object.keys(data).map(function(key) {
return data[key];
});
}
}
const ul = $('<ul/>', {class: 'list-unstyled components'});
// ユーザーリストを入れる前にユーザー招待ボタンを入れてくれる。
let inviteString = getLocalizedString("inviteUsersButton")
ul.append($('<li/>').append(`<a>${inviteString} <i class='fa fa-user-plus'><i/></a>`).on('click', function(event){
$('#dismiss').click();
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
let isInvite = true;
CHAT.globalIsInvite = isInvite;
socket.emit('getGroupList', isInvite);
}));
// ユーザーリストを入れる
users.forEach(function(user) {
let li = $('<li/>');
let a = $('<a/>').text(user);
if (onlineUsers.includes(user)) {
// 接続されているユーザにバッジを付ける。
a.append($('<span/>',{class:'badge badge-success'}).text('online'));
}
li.append(a);
ul.append(li);
});
$('#users').html(ul);
});
// Update Group List(Invite)
socket.on('refreshGroupList', function(groups, isInvite){
$('#group_list').html('');
const template = $('#group-template').html();
if (groups.length === 0) {
$('#group_list').append('<center class="text-secondary">'+ getLocalizedString(everyoneIsHere) +'</center>');
}
// グループ名と人数を表記する。
groups.forEach(function(group) {
let html = Mustache.render(template, {
name: group.groupName,
info: group.memberCnt + getLocalizedString("people")
});
// グループをクリックすると、該当グループのユーザーリストを読み込むようにイベントを与える
let obj = $(jQuery.parseHTML(html)).on('click', function() {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
socket.emit('getUserListInGroup', group.groupId, isInvite);
$('#groupName').text(group.groupName);
});
$('#group_list').append(obj);
});
// Rotate
if (CHAT_UI.isLandscapeMode()) {
$(".group_list").addClass("col-6").removeClass("col-12");
}
// Set Title
let memberSelectTitle = getLocalizedString("groupSearch")
$('#pills-group-tab').tab('show');
$('#backButton').show();
if (isInvite) {
$('.titleRoomName').text(memberSelectTitle);
$('#newRoomName, .roomListIcon, .chatRoomIcon').hide();
$('#userSelectionConfirmBtn').show();
$("#userSelectionConfirmBtn").off().on('click', function(){
CHAT_UI.setConfirmButtonEvent(isInvite);
});
} else {
$('.titleRoomName').text(memberSelectTitle);
$('.roomListIcon, .chatRoomIcon, #newRoomName').hide();
$('#userSelectionConfirmBtn').show();
$("#userSelectionConfirmBtn").off().on('click', function(){
CHAT_UI.setConfirmButtonEvent(isInvite);
});
}
if (CHAT.globalSelectedUserList.length > 0) {
$('#userSelectionLength').text(CHAT.globalSelectedUserList.length);
} else {
$('#userSelectionLength').text('');
}
$('#backButton').off().on('click', function() {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
if (isInvite) {
$('#pills-chat-tab').tab('show');
} else {
if (IS_ONLINE == 'true') {
android.updateRoomList();
CHAT_UI.refreshRoomList(chatRoomType.DM);
CHAT_UI.dismissLoadingIndicator();
}
}
});
});
// Update User List(Invite)
// #36170
socket.on('refreshUserListInGroup', function(users, groupId, isInvite){
$('#user_list').html('');
const template = $('#user-template').html();
// Set Title
let memberSelectTitle = getLocalizedString("userSearch")
$('.titleRoomName').text(memberSelectTitle);
users.forEach( function(user) {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
user.profileImagePath = CHAT.getProfileImgUrl(user.profileImagePath)
let html = Mustache.render(template, {
id: user.shopMemberId,
profileImage: user.profileImagePath,
name: user.loginId
});
// クリックするとactive クラスを与え、チェック表示を出させる。
let obj = $(jQuery.parseHTML(html)).on('click',function(){
if ($(this).find('.userCheckBox.active').length > 0) {
// remove
CHAT.globalSelectedUserList = CHAT.globalSelectedUserList.filter(function(element) {
return user.loginId != element.loginId;
});
} else {
// add
CHAT.globalSelectedUserList.push({loginId:user.loginId, shopMemberId : user.shopMemberId, profileImagePath: user.profileImagePath});
}
$(this).find('.userCheckBox').toggleClass('active');
if (CHAT.globalSelectedUserList.length > 0) {
$('#userSelectionLength').text(CHAT.globalSelectedUserList.length);
} else {
$('#userSelectionLength').text('');
}
});
let findObj = CHAT.globalSelectedUserList.find(function(selectedUser) {
return selectedUser.loginId == user.loginId;
})
if (findObj) {
$(obj).find('.userCheckBox').toggleClass('active');
}
$('#user_list').append(obj);
})
$('.userCheckBox').show();
// Rotate
if (CHAT_UI.isLandscapeMode()) {
$(".user_list").addClass("col-6").removeClass("col-12");
$(".squareBoxContent span").addClass("landscape_span");
}
$('#backButton').off().on('click', function() {
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
socket.emit('getGroupList', isInvite)
});
$("#userSelectionConfirmBtn").off().on('click', function(){
// loadingIndicatorを表示
CHAT_UI.showLoadingIndicator();
CHAT_UI.setConfirmButtonEvent(isInvite);
});
$('#backButton').show();
$('.roomListIcon, .chatRoomIcon').hide();
$('#userSelectionConfirmBtn').show();
$('.userCheckBox').show();
$('#pills-user-tab').tab('show');
});
/* ---------------------------------------------------------------------- */
/* Show Error Log */
/* ---------------------------------------------------------------------- */
socket.on('showServerError', function (message){
// #36174
// #36215
if (message.includes("SC_FORBIDDEN"))
{
alert('SC_FORBIDDEN');
return;
}
if (message == 'server error Ocurred') {
message = getLocalizedString("serverErrorOccured");
} else if (message == 'Room not found') {
message = getLocalizedString("errorRoomNotFound");
}
$("#customAlertTitle").text(message);
$("#customAlertOk").text(getLocalizedString("yesTitle"));
$('#customAlert').appendTo("body").modal({
backdrop: 'static',
keyboard: false
})
.on('click', '#customAlertOk', function(e) {
});
CHAT_UI.dismissLoadingIndicator();
if (message == "Room not found"){
CHAT.saveRoomInfo();
}
});
// server's request : user info (retry join)
socket.on("retryJoinProcess", () => {
var ua = window.navigator.userAgent.toLowerCase();
//if ((ua.indexOf('iphone') > 0 || ua.indexOf('ipad') > 0) && ua.indexOf("safari") == -1) {
if (CHAT_UTIL.isIOS()) {
// iosでの場合
webkit.messageHandlers.loginInfoRequestMessageHandlerId.postMessage({});
// } else if (ua.indexOf('android') > 0 && ua.indexOf('linux') == -1){
} else if (CHAT_UTIL.isAndroid()) {
// androidでの場合
android.getLoginParameter();
} else {
CHAT_UI.htmlElementTextInitialize("ko")
// webでのsocket connect
socket.emit('join', params, function(err) {
if (err) {
// #36174
$("#customAlertTitle").text(err);
$("#customAlertOk").text(getLocalizedString("yesTitle"));
$('#customAlert').appendTo("body").modal({
backdrop: 'static',
keyboard: false
})
.on('click', '#customAlertOk', function(e) {
});
} else {
if (params.roomName != undefined) {
$('.titleRoomName').text(params.roomName).data('roomName', params.roomName);
} else {
let roomListTitle = getLocalizedString("roomListTitle")
$('.titleRoomName').text(roomListTitle)
}
}
// loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator();
});
}
})
}
\ No newline at end of file
public_new/js/chat.js
// 名前空間
var CHAT = {};
// test comment
//招待するメンバーを保存する変数
CHAT.globalSelectedUserList = new Array();
CHAT.globalIsInvite = false;
//ログイン中の部屋情報を保存する変数
CHAT.globalLoginParameter;
CHAT.saveRoomInfo = function(roomId, roomName) {
CHAT.globalLoginParameter.roomId = roomId;
CHAT.globalLoginParameter.roomName = roomName;
if (CHAT_UTIL.isIOS()) {
webkit.messageHandlers.roomInfosaveMessageHandlerId.postMessage({"roomId":roomId, "roomName":roomName});
} else if (CHAT_UTIL.isAndroid()) {
if (roomId == undefined && roomName == undefined) {
android.saveVisitRoomInfo('', '');
} else {
android.saveVisitRoomInfo(roomId, roomName);
}
}
}
// #36170 画像パスが存在しない場合はデフォルトの画像を返す
// 存在する場合はプロフィール画像取得用APIのURLを生成して返す
CHAT.getProfileImgUrl = function(path) {
if (path == undefined || path == "") {
return ASSET_PATH + 'img/noImage.png';
} else {
var userInfo = path.split("/").reverse();
return CMS_SERVER_URL + '/file/getProfileImage?profileFileName=' + userInfo[0] + '&profileGetLoginId=' + userInfo[1];
}
}
// Video のサムネイルファイル生成する
CHAT.createVideoThumbnailAndUpload = function(sourceImage, callback) {
var fileReader = new FileReader();
fileReader.onload = function() {
var blob = new Blob([fileReader.result], {type: sourceImage.type});
var url = URL.createObjectURL(blob);
var video = document.createElement('video');
var timeupdate = function() {
if (snapImage()) {
video.removeEventListener('timeupdate', timeupdate);
video.pause();
}
};
video.addEventListener('loadeddata', function() {
if (snapImage()) {
video.removeEventListener('timeupdate', timeupdate);
}
});
var snapImage = function() {
var canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
fetch(canvas.toDataURL("image/jpeg"))
.then(function(res) {
return res.arrayBuffer();
})
.then(function(buf) {
// 回転された画像をFormDataに保存
const newFile = new File([buf], sourceImage.name, {type:"image/jpeg"});
callback(newFile, true);
// ajax End
}).catch((error) => { // fetch Error catch Block
if (error) {
console.log(error)
}
});
return true;
};
video.addEventListener('timeupdate', timeupdate);
video.preload = 'metadata';
video.src = url;
// Load video in Safari / IE11
video.muted = true;
video.playsInline = true;
video.play();
};
fileReader.readAsArrayBuffer(sourceImage);
}
// Ajaxでイメージをアップロードする
CHAT.uploadImage = function(formData) {
formData.append('roomId', CHAT.globalLoginParameter.roomId);
jQuery.ajax({
async: true,
url: CMS_SERVER_URL+"/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 imageName = res.fileName
// uploadFileの判断
var extension = imageName.substr(imageName.lastIndexOf('.') + 1).toLowerCase();
// 画像の処理
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;
imageName = res.thumbImageFileName;
}
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 image = $('<img/>',{src:imgPath, width:'auto',style:'max-width:100%'});
const downloadIcon = $('<a/>',{href:downloadPath, class:'fa fa-download', download:res.fileName});
lightbox.append(image);
lightbox.append(downloadIcon);
let text = lightbox.prop('outerHTML')
let encodedText
try {
encodedText = encodeURIComponent(text)
} catch(e) {
encodedText = text;
}
socket.emit('createMessage', {
text: encodedText
}, 1);
} else { // 動画の処理
if (res.thumbnailPath && res.thumbnailPath.length > 0) {
imgPath = CMS_SERVER_URL + '/file/getImage?fileName=' + res.thumbImageFileName + '&roomId=' + CHAT.globalLoginParameter.roomId;
}
let downloadPath = CMS_SERVER_URL + '/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});
aTag.append(image);
aTag.append(downloadIcon);
let text = aTag.prop('outerHTML');
let encodedText
try {
encodedText = encodeURIComponent(text)
} catch(e) {
encodedText = text;
}
socket.emit('createMessage', {
text: encodedText
}, 1);
}
$('.overlay').removeClass('active undismissable');
$('.loader').removeClass('active');
CHAT_UI.dismissLoadingIndicator();
})
}
// Thumbnailのファイルを生成する。
CHAT.createThumbnailAndUpload = function(sourceImage, callback) {
const fileReader = new FileReader();
const img = new Image();
fileReader.onloadend = function() {
img.src = fileReader.result
}
img.onload = function() {
const elem = document.createElement('canvas');
var rate
var width = img.width
var height = img.height
if ((img.width <= 500) && (img.height <= 500))
{
callback(undefined, false)
return
}
if (img.width > img.height)
{
rate = 500/img.width
} else {
rate = 500/img.height
}
elem.width = width * rate;
elem.height = height * rate;
const ctx = elem.getContext('2d')
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, elem.width, elem.height);
// ctx.drawImage(img, 0, 0, width, height);
fetch(elem.toDataURL("image/jpeg"))
.then(function(res) {
return res.arrayBuffer();
})
.then(function(buf) {
const newFile = new File([buf], sourceImage.name, {type:"image/jpeg"});
callback(newFile, true)
}).catch((error) => { // fetch Error catch Block
if (error) {
console.log(error)
}
});
}
fileReader.readAsDataURL(sourceImage);
}
// 該当チャットルームに参加するためログイン情報をサーバに渡す
getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomName = undefined, languageCode) {
var loginParam = new Object()
loginParam.sid = sid;
loginParam.loginId = loginId;
loginParam.shopName = shopName;
loginParam.roomId = roomId;
loginParam.roomName = roomName;
CHAT.globalLoginParameter = loginParam;
if (!languageCode) {
languageCode = "en"
}
CHAT_UI.htmlElementTextInitialize(languageCode)
if (IS_ONLINE == 'true') {
socket.emit('join', loginParam, function(err) {
if (err) {
// #36174
$("#customAlertTitle").text(err);
$("#customAlertOk").text(getLocalizedString("yesTitle"));
$('#customAlert').appendTo("body").modal({
backdrop: 'static',
keyboard: false
})
.on('click', '#customAlertOk', function(e) {
});
} else {
console.log('No error');
if (loginParam.roomName != undefined && loginParam.roomName != "null") {
$('.titleRoomName').text(loginParam.roomName).data('roomName', loginParam.roomName);
} else {
// 設定されていたroomNameがない場合
let roomListTitle = getLocalizedString("roomListTitle")
$('.titleRoomName').text(roomListTitle).data('roomName', roomListTitle);
}
}
// loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator();
});
} else {
// loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator();
}
}
CHAT.leaveRoom = function() {
socket.emit('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() {
......
public_new/js/constant.js
...@@ -16,3 +16,17 @@ const messageType = { ...@@ -16,3 +16,17 @@ const messageType = {
SYSTEM : 3 , SYSTEM : 3 ,
COMMUNICATION : 4 COMMUNICATION : 4
} }
const userAPICmd = {
MYINFO : 9
}
const chatRoomType = {
DM : "1",
GROUP : "0"
}
const nameCardAreaId = {
MY : "myNamecard",
USER : "userNamecard"
}
\ No newline at end of file
public_new/js/language.js 0 → 100644
$.lang = {};
//default set
$.lang.currentLang = "en"
function setLanguage(language) {
if(language.indexOf("ja") > -1) {
$.lang.currentLang = "ja"
} else if(language.indexOf("ko") > -1) {
$.lang.currentLang = "ko"
} else {
$.lang.currentLang = "en"
}
}
function getLocalizedString(stringKey, ...args)
{
let string = $.lang[$.lang.currentLang][stringKey];
if(args.length > 0) {
if(args.length == 1) {
string = string.replace("%@", args[0])
} else {
string = string.replace("%@", args.join($.lang[$.lang.currentLang].userListDivideString))
}
}
return string
}
public_new/js/language_en.js 0 → 100644
$.lang.en = {
"chat_placeholder":"Type message",
"chat_search_placeholder":" Search Message",
"room_search_placeholder":" Search Room",
"participants":"Member List",
"exitRoom":"Exit ",
"roomListTitle":"Room List",
"deleteRoomTitle":"Delete Room",
"inviteUsersButton":"invite",
"inviteUsersTitle":"Invite Member",
"createRoomTitle":"Create Room",
"createRoomSubtitle":"Room Name",
"inviteUsersSubtitle":"Invite User",
"roomListEmptyString":"There is no room available.",
"invitedUser":"Invited Users",
"left":"%@ has left",
"join":"%@ has joined",
"added":"%@ has been invited",
"welcome":"Welcome to %@",
"userListDivideString":", ",
"orderByTime":"OrderByTime",
"orderByUnread":"OrderByUnread",
"roomKeywordPlaceHolder":"Search",
"okayLabel":"Okay!",
"completeLabel":"Complete.",
"thankLabel":"Thank you",
"startToWorkLabel":"Start to work",
"groupListKeyword":"Search",
"userSearch":"User Search",
"groupSearch":"Group Search",
"groupPageSubtitle":"Groups",
"noMessages":"No Messages",
"image":"Image",
"chatKeyword":"Search",
"userListKeyword":"Search",
"newRoomName":"Please input Room Name",
"everyoneIsHere":"Everyone is in the chat.",
"people":"people",
"searchResult":"Results",
"searchRoomListEmptyString":"No search results.",
"inputRoomName":"Please enter a room name.",
"exitRoomTitle":"Do you want to leave this room?",
"roomDeleteTitle":"Do you want to delete this room?",
"roomDelete":"Delete",
"cancelTitle":"No",
"yesTitle":"Yes",
"invalidCharacter":"The character ;/?:@&amp;=+$,-_.!~*\'()#\\\"` cannot be included in the roomname.",
"nameTooLong":"Please enter room name less than 20 characters.",
"errorDisconnected":"Disconnected from the server.",
"errorConnect":"There was a problem with the network.\n Please check the connection status of the network.",
"errorRoomNotFound":"This chat room has already been deleted.",
"serverErrorOccured":"App will not be able to communicate with the server. \n After a few moments, please try again.",
"memberDeleteTitle":"Do you want to remove selected members from the list?",
"photo":"Photo",
"video":"Video",
"contactListTitle":"Contact",
"contactSearch":"Contact search",
"directMessageChatRoom":"DM",
"favorite":"Favorite List",
"mygroup":"My Group",
"groupChatRoom":"Group",
"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"
}
public_new/js/language_ja.js 0 → 100644
$.lang.ja = {
"chat_placeholder":"メッセージを入力",
"chat_search_placeholder":" メッセージ検索",
"room_search_placeholder":" ルーム検索",
"participants":"メンバーリスト",
"exitRoom":"退出 ",
"roomListTitle":"ルーム一覧",
"deleteRoomTitle":"ルーム削除",
"inviteUsersButton":"招待",
"inviteUsersTitle":"メンバー追加",
"createRoomTitle":"ルーム開設",
"createRoomSubtitle":"ルーム名",
"inviteUsersSubtitle":"ユーザ招待",
"roomListEmptyString":"入場できるルームがありません。",
"left":"%@ 様が退場しました。",
"join":"%@ 様が入場しました。",
"added":"%@ 様を招待しました。",
"welcome":"%@ に入場しました。",
"userListDivideString":" 様, ",
"orderByTime":"新着順",
"orderByUnread":"未読優先",
"roomKeywordPlaceHolder":"検索",
"okayLabel":"了解しました。",
"completeLabel":"完了しました。",
"thankLabel":"ありがとうございます。",
"startToWorkLabel":"作業開始します。",
"userSearch":"ユーザー検索",
"groupSearch":"グループ検索",
"groupListKeyword":"検索",
"groupPageSubtitle":"グループ",
"noMessages":"メッセージがありません。",
"image":"画像",
"chatKeyword":"検索",
"userListKeyword":"検索",
"invitedUser":"参加者",
"newRoomName":"ルーム名を入力してください",
"everyoneIsHere":"招待可能なメンバーがいません。",
"people":"人",
"searchResult":"件のトーク",
"searchRoomListEmptyString":"検索結果がありません。",
"inputRoomName":"ルーム名を入力してください。",
"exitRoomTitle":"このチャットルームを出ますか？",
"roomDeleteTitle":"このチャットルームを削除しますか？",
"roomDelete":"削除",
"cancelTitle":"いいえ",
"yesTitle":"はい",
"invalidCharacter":"特殊文字 ;/?:@&amp;=+$,-_.!~*\'()#\\\"` はルーム名に含めることができません。",
"nameTooLong":"ルーム名は文字列20字以内に入力してください。",
"errorDisconnected":"接続が切れました。",
"errorConnect":"ネットワークに問題がありました。\nネットワークの接続状態を確認してください。",
"errorRoomNotFound":"既に削除されたチャットルームです。",
"serverErrorOccured":"サーバと通信できません。\nしばらく時間をおいて再度操作してください。",
"memberDeleteTitle":"選択したメンバーをリストから削除しますか？",
"photo":"写真",
"video":"動画",
"contactListTitle":"コンタクト",
"contactSearch":"コンタクト検索",
"directMessageChatRoom":"DM",
"favorite":"お気に入りリスト",
"mygroup":"マイグループ",
"groupChatRoom":"グループ",
"myGroup":"マイグループ",
"allGroup":"全グループ",
"returnToRootGroup":"トップグループに戻る",
"returnToParentGroup":"上位グループに戻る",
"quickBtn":"クイックボタン",
"groupPath":"グループパンクズ",
"childGroup":"下位グループ",
"groupUser":"所属ユーザ",
"chat":"チャット",
"voice":"通話",
"addFavorite":"お気に入り追加"
}
public_new/js/language_ko.js 0 → 100644
$.lang.ko = {
"chat_placeholder":"메시지를 입력하세요.",
"chat_search_placeholder":" 메세지검색",
"room_search_placeholder":" 채팅방 검색",
"participants":"멤버 리스트",
"exitRoom":"나가기 ",
"roomListTitle":"채팅 리스트",
"deleteRoomTitle":"채팅방 삭제",
"inviteUsersButton":"유저 초대",
"inviteUsersTitle":"대화상대 추가",
"createRoomTitle":"방 개설",
"createRoomSubtitle":"방 이름",
"inviteUsersSubtitle":"유저 초대",
"roomListEmptyString":"입장 가능한 방이 없습니다.",
"invitedUser":"참가자",
"left":"%@ 님이 방을 떠났습니다.",
"join":"%@ 님이 참가했습니다.",
"added":"%@ 님을 초대했습니다.",
"welcome":"%@ 에 입장했습니다.",
"userListDivideString":" 님, ",
"orderByTime":"최신순",
"orderByUnread":"안 읽은 순",
"roomKeywordPlaceHolder":"검색",
"okayLabel":"알겠습니다.",
"completeLabel":"작업이 끝났습니다.",
"thankLabel":"감사합니다.",
"startToWorkLabel":"작업을 시작합니다.",
"groupListKeyword":"검색",
"userSearch":"유저 검색",
"groupSearch":"그룹 검색",
"groupPageSubtitle":"그룹",
"noMessages":"메시지가 없습니다.",
"image":"이미지",
"chatKeyword":"검색",
"userListKeyword":"검색",
"newRoomName":"방 이름을 입력해주세요.",
"everyoneIsHere":"초대가능한 유저가 없습니다.",
"people":"명",
"searchResult":"건의 결과",
"searchRoomListEmptyString":"검색 결과가 없습니다.",
"inputRoomName":"방 제목을 입력해 주십시오.",
"exitRoomTitle":"이 채팅방을 나가시겠습니까?",
"roomDeleteTitle":"이 방을 삭제 하시겠습니까?",
"roomDelete":"삭제",
"cancelTitle":"아니오",
"yesTitle":"예",
"invalidCharacter":"특수문자 ;/?:@&amp;=+$,-_.!~*\'()#\\\"` 는 방 제목에 포함될 수 없습니다.",
"nameTooLong":"방 제목은 20자 이내로 입력해 주세요.",
"errorDisconnected":"서버와 접속이 끊어졌습니다.",
"errorConnect":"네트워크에 문제가 발생했습니다.\n네트워크 연결상태를 확인하여 주십시요.",
"errorRoomNotFound":"이미 삭제된 채팅룸입니다.",
"serverErrorOccured":"서버와 통신할 수 없습니다.\n잠시 후 다시 시도해보시기 바랍니다.",
"memberDeleteTitle":"목록에서 선택된 멤버를 삭제하시겠습니까?",
"photo":"사진",
"video":"동영상",
"contactListTitle":"연락처",
"contactSearch":"연락처 검색",
"directMessageChatRoom":"DM",
"favorite":"즐겨찾기리스트",
"mygroup":"마이그룹",
"groupChatRoom":"그룹",
"myGroup":"내그룹",
"allGroup":"전그룹",
"returnToRootGroup":"최상위그룹으로 돌아가기",
"returnToParentGroup":"상위그룹으로 돌아가기",
"quickBtn":"퀵버튼",
"groupPath":"그룹 경로",
"childGroup":"하위 그룹",
"groupUser":"소속 사용자",
"chat":"채팅",
"voice":"통화",
"addFavorite":"즐겨찾기추가"
}
public_new/template/template_my_name_card.html 0 → 100644
<div class="modal fade profile_modal" id="myNameCard" tabindex="-1" role="dialog" aria-labelledby="myNameCard" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header border-0">
<div class="prifile_desc d-flex flex-row">
<img src="{{profileImage}}" alt="プロフィール画像">
<!--<div class="namedard-img-upload" >Upload</div>-->
<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>
</button>
</div>
<div class="modal-body">
{{#groupPathList}}
<li><b>{{.}}</b></li>
{{/groupPathList}}
</div>
<div class="modal-footer border-0 justify-content-center">
<button type="button" class="border-0 bg_navy" style="width: 50%">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="icon/icon_photo.png" alt="プロフィール写真更新">
</div>
<span>プロフィール写真更新</span>
</div>
</button>
</div>
</div>
</div>
</div>
public_new/template/template_user_list.html 0 → 100644
<ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center">
<a href="#" data-toggle="modal" data-target="#userNameCard" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="{{profileImage}}" 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">{{name}}</span>
</div>
</div>
</div>
</div>
</a>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="star disable"></span>
</div>
</div>
</li>
</ul>
\ No newline at end of file
public_new/template/template_user_name_card.html 0 → 100644
<div class="modal fade profile_modal" id="userNameCard" tabindex="-1" role="dialog" aria-labelledby="userNameCard" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header border-0">
<div class="prifile_desc d-flex flex-row">
<img src="{{profileImage}}" alt="プロフィール画像">
<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>
</button>
</div>
<div class="modal-body">
{{#groupPathList}}
<li><b>{{.}}</b></li>
{{/groupPathList}}
</div>
<div class="modal-footer border-0 justify-content-center">
{{#isFavorite}}
<button type="button" class="border-0 bg_navy">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="icon/icon_profile_favorite.png" alt="お気に入り">
</div>
<span>お気に入り解除</span>
</div>
</button>
{{/isFavorite}}
{{^isFavotire}}
<button type="button" class="border-0 bg_navy">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="icon/icon_profile_favorite_white.png" alt="お気に入り">
</div>
<span>お気に入り登録</span>
</div>
</button>
{{/isFavorite}}
<button type="button" class="border-0 bg_green">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="icon/icon_profile_phone.png" alt="通話">
</div>
<span>通話</span>
</div>
</button>
<button type="button" class="border-0 bg_blue">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="icon/icon_profile_chat.png" alt="チャット">
</div>
<span>チャット</span>
</div>
</button>
</div>
</div>
</div>
</div>
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