Skip to content

C
chat_webview
Commit 0b9baea9 by Lee Munkyeong
Options

コードレビュー対応

parent 67e11f79
Showing with 788 additions and 723 deletions
public/css/chat.css
...@@ -705,4 +705,24 @@ a.article:hover { ...@@ -705,4 +705,24 @@ a.article:hover {
.chat-list-type-btn { .chat-list-type-btn {
width: 30%; width: 30%;
} }
\ No newline at end of file #my_info > div > div {
padding-left: 5%;
}
#favorite_list > div > div {
padding-left: 5%;
}
#my_group_list > div > div {
padding-left: 5%;
}
.contact-seperator {
width: 100%;
background-color: #095395!important;
color: white;
margin-bottom: 0px;
}
public/index.html
...@@ -234,15 +234,15 @@ ...@@ -234,15 +234,15 @@
</div> </div>
<div id="my_info" class="inbox_user row"> <div id="my_info" class="inbox_user row">
</div> </div>
<div class="collapsible-content">
<div id="favorite_list" class="inbox_user row"> <label class="contact-seperator" id="favorite-seperator">Favorite</label>
</div> <div id="favorite_list" class="inbox_user row">
</div> </div>
<div class="collapsible-content"> <label class="contact-seperator" id="mygroup-seperator">MY GROUP</label>
<div id="my_group_list" class="inbox_user row"> <div id="my_group_list" class="inbox_user row">
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -458,6 +458,28 @@ ...@@ -458,6 +458,28 @@
</div> </div>
</div> </div>
</script> </script>
<script id="favorite-user-template" type="text/template">
<div class="user_list col-12" data-name="{{name}}">
<div class="user_people">
<div class="user_img">
<img src="{{profileImage}}" alt="">
</div>
<div class="user_ib">
<h5>{{name}}</h5>
<p>{{info}}</p>
</div>
<div class="squareBox userCheckBox" data-name="{{name}}" data-id="{{id}}">
<div class="squareBoxContent">
<div>
<span>
<i class="fas fa-check"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</script>
<script src="./socket.io/dist/socket.io.js"></script> <script src="./socket.io/dist/socket.io.js"></script>
<script src="./js/libs/socket.io.js"></script> <script src="./js/libs/socket.io.js"></script>
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
......
public/js/chat-ui.js
...@@ -2,681 +2,681 @@ ...@@ -2,681 +2,681 @@
var CHAT_UI = {}; var CHAT_UI = {};
$(function() { $(function() {
let navbarHeight = document.getElementsByClassName("navbar")[0].offsetHeight let navbarHeight = document.getElementsByClassName("navbar")[0].offsetHeight
let searchBarHeight = document.getElementsByClassName("search-bar-fixed")[0].offsetHeight let searchBarHeight = document.getElementsByClassName("search-bar-fixed")[0].offsetHeight
let footerHeight = document.getElementsByClassName("footer-nav")[0].offsetHeight let footerHeight = document.getElementsByClassName("footer-nav")[0].offsetHeight
$(".tab-pane").css('padding', `${navbarHeight + 'px'} 0px 0px`) $(".tab-pane").css('padding', `${navbarHeight + 'px'} 0px 0px`)
/* チャットルーム一覧画面スクロール範囲 /* チャットルーム一覧画面スクロール範囲
* 画面の高さ - (画面上部タイトルの高さ + ルーム名検索欄の高さ) */ * 画面の高さ - (画面上部タイトルの高さ + ルーム名検索欄の高さ) */
$(".inbox_chat").css('max-height', `calc(100vh - ${(navbarHeight + searchBarHeight + footerHeight) + 'px'})`) $(".inbox_chat").css('max-height', `calc(100vh - ${(navbarHeight + searchBarHeight + footerHeight) + 'px'})`)
$('.roomListIcon').hide(); $('.roomListIcon').hide();
$('#userSelectionDeleteBtn').hide(); $('#userSelectionDeleteBtn').hide();
//$('#createChatRoom').hide(); //$('#createChatRoom').hide();
}); });
// Rotate // Rotate
$(window).on('resize', function() { $(window).on('resize', function() {
if (CHAT_UTIL.isMobile()) { if (CHAT_UTIL.isMobile()) {
return; return;
} }
console.log(`width : ${$(this).width()}`); console.log(`width : ${$(this).width()}`);
console.log(`height : ${$(this).height()}`); console.log(`height : ${$(this).height()}`);
if(CHAT_UI.isLandscapeMode()) { if(CHAT_UI.isLandscapeMode()) {
$(".group_list").addClass("col-6").removeClass("col-12"); $(".group_list").addClass("col-6").removeClass("col-12");
$(".user_list").addClass("col-6").removeClass("col-12"); $(".user_list").addClass("col-6").removeClass("col-12");
$(".chat_list").addClass("col-6").removeClass("col-12"); $(".chat_list").addClass("col-6").removeClass("col-12");
$(".squareBoxContent span").addClass("landscape_span"); $(".squareBoxContent span").addClass("landscape_span");
$(".mesgs").addClass("landscape_mesgs"); $(".mesgs").addClass("landscape_mesgs");
} else { } else {
$(".group_list").removeClass("col-6").addClass("col-12"); $(".group_list").removeClass("col-6").addClass("col-12");
$(".user_list").removeClass("col-6").addClass("col-12"); $(".user_list").removeClass("col-6").addClass("col-12");
$(".chat_list").removeClass("col-6").addClass("col-12"); $(".chat_list").removeClass("col-6").addClass("col-12");
$(".squareBoxContent span").removeClass("landscape_span"); $(".squareBoxContent span").removeClass("landscape_span");
$(".mesgs").removeClass("landscape_mesgs"); $(".mesgs").removeClass("landscape_mesgs");
} }
}) })
// New Room // New Room
// チャットルーム生成ボタン処理 // チャットルーム生成ボタン処理
$('#createChatRoom').on('click', function() { $('#createChatRoom').on('click', function() {
//loadingIndicatorを表示 //loadingIndicatorを表示
CHAT_UI.showLoadingIndicator(); CHAT_UI.showLoadingIndicator();
let isInvite = false; let isInvite = false;
CHAT.globalIsInvite = isInvite; CHAT.globalIsInvite = isInvite;
socket.emit('getGroupList', isInvite); socket.emit('getGroupList', isInvite);
}); });
// Room Delete // Room Delete
// チャットルーム削除ボタン処理 // チャットルーム削除ボタン処理
$('#roomDeleteButton').on('click', function(e) { $('#roomDeleteButton').on('click', function(e) {
if ($('.deleteBox').is(':visible')) { if ($('.deleteBox').is(':visible')) {
// チャットルーム削除アイコンが表示されている時、ブラインド処理を行う // チャットルーム削除アイコンが表示されている時、ブラインド処理を行う
$('.deleteBox').finish().show().fadeTo('slow', 0, function() { $('.deleteBox').finish().show().fadeTo('slow', 0, function() {
$(this).hide(); $(this).hide();
}); });
// チャットリストについてクリックイベントを与える // チャットリストについてクリックイベントを与える
$('.chat_list').off('click'); $('.chat_list').off('click');
$('.chat_list:not(.active_chat)').on('click', function(e) { $('.chat_list:not(.active_chat)').on('click', function(e) {
//loadingIndicatorを表示 //loadingIndicatorを表示
CHAT_UI.showLoadingIndicator(); CHAT_UI.showLoadingIndicator();
let roomId = $(this).data('roomId'); let roomId = $(this).data('roomId');
let roomName = $(this).data('roomname'); let roomName = $(this).data('roomname');
socket.emit('joinRoom', roomId, roomName, function() { socket.emit('joinRoom', roomId, roomName, function() {
$('#messages').html(''); $('#messages').html('');
$('.titleRoomName').text(roomName).data('roomName', roomName); $('.titleRoomName').text(roomName).data('roomName', roomName);
$('#pills-chat-tab').tab('show'); $('#pills-chat-tab').tab('show');
$("#message-search").attr("placeholder", getLocalizedString("chat_search_placeholder")); $("#message-search").attr("placeholder", getLocalizedString("chat_search_placeholder"));
}); });
}); });
let roomListTitle = getLocalizedString("roomListTitle") let roomListTitle = getLocalizedString("roomListTitle")
$('.titleRoomName').text(roomListTitle) $('.titleRoomName').text(roomListTitle)
$('.chat_list.active_chat').on('click', function(e){ $('.chat_list.active_chat').on('click', function(e){
$('#pills-chat-tab').tab('show'); $('#pills-chat-tab').tab('show');
}); });
} else { } else {
// チャットルーム削除アイコンが表示されていない場合、表示する // チャットルーム削除アイコンが表示されていない場合、表示する
$('.deleteBox').finish().hide().fadeTo('slow',1).show(); $('.deleteBox').finish().hide().fadeTo('slow',1).show();
// #36129に対応 // #36129に対応
let deleteRoomTitle = getLocalizedString("deleteRoomTitle") let deleteRoomTitle = getLocalizedString("deleteRoomTitle")
$('.titleRoomName').text(deleteRoomTitle) $('.titleRoomName').text(deleteRoomTitle)
// 重複処理を防ぐためにチャットリストのクリックイベントを消す // 重複処理を防ぐためにチャットリストのクリックイベントを消す
$('.chat_list').off('click'); $('.chat_list').off('click');
// チャットルームの削除アイコンにクリックイベントを与える // チャットルームの削除アイコンにクリックイベントを与える
$('.deleteBox').off('click'); $('.deleteBox').off('click');
$('.deleteBox').on('click', function(e){ $('.deleteBox').on('click', function(e){
// #36174 // #36174
let roomId = $(this).data('roomId'); let roomId = $(this).data('roomId');
let activeRoom = $(this).data('activeRoom'); let activeRoom = $(this).data('activeRoom');
$("#roomDeleteTitle").text(getLocalizedString("roomDeleteTitle")); $("#roomDeleteTitle").text(getLocalizedString("roomDeleteTitle"));
$("#roomDelete").text(getLocalizedString("roomDelete")); $("#roomDelete").text(getLocalizedString("roomDelete"));
$("#cancelTitle").text(getLocalizedString("cancelTitle")); $("#cancelTitle").text(getLocalizedString("cancelTitle"));
// #36128 // #36128
$('#roomDeleteConfirm').appendTo("body").modal({ $('#roomDeleteConfirm').appendTo("body").modal({
backdrop: 'static', backdrop: 'static',
keyboard: false keyboard: false
}) })
.on('click', '#roomDelete', function(e) { .on('click', '#roomDelete', function(e) {
//loadingIndicatorを表示 //loadingIndicatorを表示
CHAT_UI.showLoadingIndicator(); CHAT_UI.showLoadingIndicator();
// 現在接続されているチャットルームを離れるとメッセージテップを初期化する // 現在接続されているチャットルームを離れるとメッセージテップを初期化する
if (activeRoom) { if (activeRoom) {
$('#messages').html(''); $('#messages').html('');
CHAT.saveRoomInfo('', ''); CHAT.saveRoomInfo('', '');
} }
// チャットルームから退場する // チャットルームから退場する
socket.emit('exitRoom', roomId); socket.emit('exitRoom', roomId);
// #36129に対応 // #36129に対応
let roomListTitle = getLocalizedString("roomListTitle") let roomListTitle = getLocalizedString("roomListTitle")
$('.titleRoomName').text(roomListTitle) $('.titleRoomName').text(roomListTitle)
}); });
}); });
} }
}); });
$('#room-search').on('input', function(event) { $('#room-search').on('input', function(event) {
if ($('#room-search').val().length > 0) { if ($('#room-search').val().length > 0) {
// 検索結果が有る場合、結果を表示する // 検索結果が有る場合、結果を表示する
socket.emit('roomSearch', encodeURIComponent($('#room-search').val())); socket.emit('roomSearch', encodeURIComponent($('#room-search').val()));
} else { } else {
if (IS_ONLINE == 'true') { if (IS_ONLINE == 'true') {
android.updateRoomList(); android.updateRoomList();
CHAT_UI.refreshRoomList("1"); CHAT_UI.refreshRoomList(chatRoomType.DM);
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
} }
} }
}); });
//上にスクロールすると新しいメッセージを呼ぶ処理。 //上にスクロールすると新しいメッセージを呼ぶ処理。
$('#messages').scroll(function(){ $('#messages').scroll(function(){
if ($(this).scrollTop() === 0) { if ($(this).scrollTop() === 0) {
if (!$('#chatLoader').is(':visible')) { if (!$('#chatLoader').is(':visible')) {
// 現在、メッセージの個数以前をメッセージを読み込む // 現在、メッセージの個数以前をメッセージを読み込む
// ローディングアイコンを追加する // ローディングアイコンを追加する
let loader = $('<div id="chatLoader" class="text-center"><div class="spinner-grow spinner-grow-sm" role="status" /></div>') let loader = $('<div id="chatLoader" class="text-center"><div class="spinner-grow spinner-grow-sm" role="status" /></div>')
$('#messages').prepend(loader) $('#messages').prepend(loader)
loader.remove(); loader.remove();
// socket.emit('getMessages', $(this).children().length, function() { // socket.emit('getMessages', $(this).children().length, function() {
// // ローディングアイコンを削除する // // ローディングアイコンを削除する
// loader.remove(); // loader.remove();
// }); // });
} }
} }
}); });
//メッセージ送信 //メッセージ送信
$('#message-form').on('keypress', function(event){ $('#message-form').on('keypress', function(event){
if (event.which == 13) { if (event.which == 13) {
// Enterキーの処理 // Enterキーの処理
$('#message-send-btn').click(); $('#message-send-btn').click();
} }
}); });
// 送信ボタンの処理 // 送信ボタンの処理
$('#message-send-btn').on('click', function (e){ $('#message-send-btn').on('click', function (e){
e.preventDefault(); e.preventDefault();
const messageTextBox = $('#message-form'); const messageTextBox = $('#message-form');
const message = messageTextBox.val().length > 0 ? encodeURIComponent(messageTextBox.val() + " ") : ""; const message = messageTextBox.val().length > 0 ? encodeURIComponent(messageTextBox.val() + " ") : "";
messageTextBox.val(''); messageTextBox.val('');
if (message.length > 0) { if (message.length > 0) {
socket.emit( socket.emit(
'createMessage', { text: message } 'createMessage', { text: message }
, 0 , 0
); );
} }
$('#message-form').focus(); $('#message-form').focus();
}); });
// 写真アップロード // 写真アップロード
$('#fileUploadButton').on('click', function(){ $('#fileUploadButton').on('click', function(){
$('#imageInputTag').click(); $('#imageInputTag').click();
}); });
// 動画アップロード // 動画アップロード
$('#fileUploadButton2').on('click', function(){ $('#fileUploadButton2').on('click', function(){
$('#imageInputTag2').click(); $('#imageInputTag2').click();
}); });
$('#imageInputTag').on('change', function(){ $('#imageInputTag').on('change', function(){
$('#image-form').submit(); $('#image-form').submit();
}); });
$('#imageInputTag2').on('change', function(){ $('#imageInputTag2').on('change', function(){
$('#image-form2').submit(); $('#image-form2').submit();
}); });
$('#image-form').on('submit', function(e){ $('#image-form').on('submit', function(e){
e.preventDefault(); e.preventDefault();
const imageInputTag = $('#imageInputTag'); const imageInputTag = $('#imageInputTag');
const file = imageInputTag.prop('files')[0]; const file = imageInputTag.prop('files')[0];
if (file) { if (file) {
$('.overlay').addClass('active undismissable'); $('.overlay').addClass('active undismissable');
$('.loader').addClass('active'); $('.loader').addClass('active');
CHAT_UI.showLoadingIndicator(); CHAT_UI.showLoadingIndicator();
var fd = new FormData($(this)[0]); var fd = new FormData($(this)[0]);
//画像の大きさが500pixelより大きかったら、thumbnailを生成 //画像の大きさが500pixelより大きかったら、thumbnailを生成
CHAT.createThumbnailAndUpload(file, function(resizeFile, thumbnailCreated){ CHAT.createThumbnailAndUpload(file, function(resizeFile, thumbnailCreated){
if (resizeFile && thumbnailCreated) { if (resizeFile && thumbnailCreated) {
//ただ、画像の大きさが500pixel以下の場合はthumbnailは生成されない //ただ、画像の大きさが500pixel以下の場合はthumbnailは生成されない
fd.append('thumb', resizeFile) fd.append('thumb', resizeFile)
} }
// イメージをアップロード // イメージをアップロード
CHAT.uploadImage(fd) CHAT.uploadImage(fd)
}) })
} }
}); });
$('#image-form2').on('submit', function(e){ $('#image-form2').on('submit', function(e){
e.preventDefault(); e.preventDefault();
const imageInputTag2 = $('#imageInputTag2'); const imageInputTag2 = $('#imageInputTag2');
const file = imageInputTag2.prop('files')[0]; const file = imageInputTag2.prop('files')[0];
if (file) { if (file) {
$('.overlay').addClass('active undismissable'); $('.overlay').addClass('active undismissable');
$('.loader').addClass('active'); $('.loader').addClass('active');
CHAT_UI.showLoadingIndicator(); CHAT_UI.showLoadingIndicator();
var fd = new FormData($(this)[0]); var fd = new FormData($(this)[0]);
if(!file.type.includes("image")) { // video 保存 if(!file.type.includes("image")) { // video 保存
CHAT.createVideoThumbnailAndUpload(file, function(resizeFile, thumbnailCreated){ CHAT.createVideoThumbnailAndUpload(file, function(resizeFile, thumbnailCreated){
if(resizeFile && thumbnailCreated) { if(resizeFile && thumbnailCreated) {
//ただ、画像の大きさが500pixel以下の場合はthumbnailは生成されない //ただ、画像の大きさが500pixel以下の場合はthumbnailは生成されない
fd.append('thumb', resizeFile) fd.append('thumb', resizeFile)
} }
CHAT.uploadImage(fd); CHAT.uploadImage(fd);
}) })
return; return;
} }
} }
}); });
/* --------------------------------------------------- */ /* --------------------------------------------------- */
/* Nav Bar Functions */ /* Nav Bar Functions */
/* --------------------------------------------------- */ /* --------------------------------------------------- */
// Gallery Button // Gallery Button
// ギャラリーボタンを押すと最後の写真をクリックさせる。 (ボタン非活性化中) // ギャラリーボタンを押すと最後の写真をクリックさせる。 (ボタン非活性化中)
$('#imageGalleryButton').on('click', function(){ $('#imageGalleryButton').on('click', function(){
$('[data-lightbox=attachedImages]:last').click(); $('[data-lightbox=attachedImages]:last').click();
}); });
//lightbox Configuration //lightbox Configuration
lightbox.option({ lightbox.option({
'resizeDuration': 0, 'resizeDuration': 0,
'imageFadeDuration': 0, 'imageFadeDuration': 0,
'fadeDuration': 300, 'fadeDuration': 300,
'alwaysShowNavOnTouchDevices': true 'alwaysShowNavOnTouchDevices': true
}); });
$('#message-search').on('input', function(event) { $('#message-search').on('input', function(event) {
// チャットキーワードを入力するとページ内にある単語をハイライトする。(mark.js 使用) // チャットキーワードを入力するとページ内にある単語をハイライトする。(mark.js 使用)
if ($(this).val()) { if ($(this).val()) {
$('.message_content').unmark(); $('.message_content').unmark();
$('.message_content').mark($(this).val()); $('.message_content').mark($(this).val());
if ($('[data-markjs=true]').length > 0) { if ($('[data-markjs=true]').length > 0) {
// マーキングされている単語があった場合、最後の単語にスクロールを移動する。 // マーキングされている単語があった場合、最後の単語にスクロールを移動する。
CHAT_UI.scrollToLastMarkedUnseen($(this).val()); CHAT_UI.scrollToLastMarkedUnseen($(this).val());
} else { } else {
// マーキングされている単語がない場合、下段にスクロールする。 // マーキングされている単語がない場合、下段にスクロールする。
CHAT_UI.scrollToBottom(); CHAT_UI.scrollToBottom();
} }
} else { } else {
// チャットキーワードが空欄になるとマーキングを解除し、下段にスクロールする。 // チャットキーワードが空欄になるとマーキングを解除し、下段にスクロールする。
$('.message_content').unmark(); $('.message_content').unmark();
CHAT_UI.scrollToBottom(); CHAT_UI.scrollToBottom();
} }
}); });
//次のマーキングされた単語にスクロールを移動する。 //次のマーキングされた単語にスクロールを移動する。
$('#pre-search').on('click', function(event) { $('#pre-search').on('click', function(event) {
CHAT_UI.scrollToLastMarkedUnseen(jQuery('#message-search').val()); CHAT_UI.scrollToLastMarkedUnseen(jQuery('#message-search').val());
}); });
// Exit Room // Exit Room
$('#exitRoom').on('click', function(event){ $('#exitRoom').on('click', function(event){
// 36174 // 36174
$("#exitRoomTitle").text(getLocalizedString("exitRoomTitle")); $("#exitRoomTitle").text(getLocalizedString("exitRoomTitle"));
$("#exitRoomOk").text(getLocalizedString("yesTitle")); $("#exitRoomOk").text(getLocalizedString("yesTitle"));
$("#noExit").text(getLocalizedString("cancelTitle")); $("#noExit").text(getLocalizedString("cancelTitle"));
$('#exitRoomConfirm').appendTo("body").modal({ $('#exitRoomConfirm').appendTo("body").modal({
backdrop: 'static', backdrop: 'static',
keyboard: false keyboard: false
}) })
.on('click', '#exitRoomOk', function(e) { .on('click', '#exitRoomOk', function(e) {
//loadingIndicatorを表示 //loadingIndicatorを表示
CHAT_UI.showLoadingIndicator(); CHAT_UI.showLoadingIndicator();
// チャットルームから退場する // チャットルームから退場する
socket.emit('exitRoom'); socket.emit('exitRoom');
$('#dismiss').click(); $('#dismiss').click();
CHAT.saveRoomInfo('', ''); CHAT.saveRoomInfo('', '');
}); });
}); });
// Side Bar // Side Bar
$('#sidebarCollapse').on('click', function (){ $('#sidebarCollapse').on('click', function (){
// open sidebar // open sidebar
$('#sidebar').addClass('active'); $('#sidebar').addClass('active');
// fade in the overlay // fade in the overlay
$('.overlay').addClass('active'); $('.overlay').addClass('active');
$('.collapse.in').toggleClass('in'); $('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false'); $('a[aria-expanded=true]').attr('aria-expanded', 'false');
}); });
$('#dismiss, .overlay').on('click', function (){ $('#dismiss, .overlay').on('click', function (){
// hide sidebar // hide sidebar
$('#sidebar').removeClass('active'); $('#sidebar').removeClass('active');
// hide overlay if dismissable // hide overlay if dismissable
$('.overlay:not(.undismissable)').removeClass('active'); $('.overlay:not(.undismissable)').removeClass('active');
}); });
//Invite User //Invite User
//招待ボタンを押すとグループリストを持ってくる。(ボタンを動的に追加して微動作中) //招待ボタンを押すとグループリストを持ってくる。(ボタンを動的に追加して微動作中)
$('#addUser').on('click', function(event){ $('#addUser').on('click', function(event){
//loadingIndicatorを表示 //loadingIndicatorを表示
CHAT_UI.showLoadingIndicator(); CHAT_UI.showLoadingIndicator();
let isInvite = true; let isInvite = true;
CHAT.globalIsInvite = isInvite; CHAT.globalIsInvite = isInvite;
socket.emit('getGroupList', isInvite); socket.emit('getGroupList', isInvite);
}); });
//グループ画面での検索 //グループ画面での検索
$('#groupListKeyword').on('input', function(event) { $('#groupListKeyword').on('input', function(event) {
// data-name値で当該キーワードが入っているグループのみを表示する。 // data-name値で当該キーワードが入っているグループのみを表示する。
if ($(this).val()) { if ($(this).val()) {
$('.group_list:not([data-name*="'+$(this).val()+'" i])').hide(); $('.group_list:not([data-name*="'+$(this).val()+'" i])').hide();
$('.group_list[data-name*="'+$(this).val()+'" i]').show(); $('.group_list[data-name*="'+$(this).val()+'" i]').show();
} else { } else {
$('.group_list').show(); $('.group_list').show();
} }
}); });
$('#userListKeyword').on('input', function(event) { $('#userListKeyword').on('input', function(event) {
// data-name値で当該キーワードが入っているユーザーのみを表示する。 // data-name値で当該キーワードが入っているユーザーのみを表示する。
if ($(this).val()) { if ($(this).val()) {
$('.user_list:not([data-name*="'+$(this).val()+'" i])').hide(); $('.user_list:not([data-name*="'+$(this).val()+'" i])').hide();
$('.user_list[data-name*="'+$(this).val()+'" i]').show(); $('.user_list[data-name*="'+$(this).val()+'" i]').show();
} else { } else {
$('.user_list').show(); $('.user_list').show();
} }
}); });
$('#selectListKeyword').on('input', function(event) { $('#selectListKeyword').on('input', function(event) {
if ($(this).val()) { if ($(this).val()) {
$('.select_user_list:not([data-name*="'+$(this).val()+'" i])').hide(); $('.select_user_list:not([data-name*="'+$(this).val()+'" i])').hide();
$('.select_user_list[data-name*="'+$(this).val()+'" i]').show(); $('.select_user_list[data-name*="'+$(this).val()+'" i]').show();
} else { } else {
$('.select_user_list').show(); $('.select_user_list').show();
} }
}); });
/* ---------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- */
/* */ /* */
/* Etc */ /* Etc */
/* */ /* */
/* ---------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- */
// Tab Open/Shown Event // Tab Open/Shown Event
$('a[data-toggle="pill"]').on('show.bs.tab', function (e) { $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
var target = $(e.target).attr("href"); // e.target : activated tab var target = $(e.target).attr("href"); // e.target : activated tab
switch(target) { switch(target) {
case '#pills-chat': case '#pills-chat':
if (CHAT_UI.isLandscapeMode()) { if (CHAT_UI.isLandscapeMode()) {
$(".mesgs").addClass("landscape_mesgs"); $(".mesgs").addClass("landscape_mesgs");
} else { } else {
$(".mesgs").removeClass("landscape_mesgs"); $(".mesgs").removeClass("landscape_mesgs");
} }
CHAT.globalIsInvite = true; CHAT.globalIsInvite = true;
$('.chatRoomIcon, .titleRoomName, #backButton').show(); $('.chatRoomIcon, .titleRoomName, #backButton').show();
$('.roomListIcon, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn').hide(); $('.roomListIcon, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn').hide();
$('#homeButton').hide(); $('#homeButton').hide();
$('.titleRoomName').text($('.titleRoomName').data('roomName')); $('.titleRoomName').text($('.titleRoomName').data('roomName'));
$('#newRoomName').val(''); $('#newRoomName').val('');
$('#userSelectionLength').text(''); $('#userSelectionLength').text('');
CHAT.globalSelectedUserList = []; CHAT.globalSelectedUserList = [];
$('#bottomNav').hide(); $('#bottomNav').hide();
$('#backButton').off().on('click', function() { $('#backButton').off().on('click', function() {
//loadingIndicatorを表示 //loadingIndicatorを表示
CHAT_UI.showLoadingIndicator(); CHAT_UI.showLoadingIndicator();
CHAT.saveRoomInfo(); CHAT.saveRoomInfo();
if (IS_ONLINE == 'true') { if (IS_ONLINE == 'true') {
socket.emit('leaveRoom', function() { socket.emit('leaveRoom', function() {
android.updateRoomList(); android.updateRoomList();
}); });
} }
CHAT_UI.refreshRoomList("1"); CHAT_UI.refreshRoomList(chatRoomType.DM);
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
}); });
console.log("show #pills-chat") console.log("show #pills-chat")
//loadingIndicatorを表示しない //loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
break; break;
case '#pills-chatlist': case '#pills-chatlist':
$('.titleRoomName, #backButton').show(); $('.titleRoomName, #backButton').show();
$('.chatRoomIcon, #backButton, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn').hide(); $('.chatRoomIcon, #backButton, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn').hide();
$('#homeButton').show(); $('#homeButton').show();
$('#room-search').val(''); $('#room-search').val('');
// set Title // set Title
let roomListTitle = getLocalizedString("roomListTitle") let roomListTitle = getLocalizedString("roomListTitle")
$('#bottomNav').show(); $('#bottomNav').show();
$('.titleRoomName').text(roomListTitle); $('.titleRoomName').text(roomListTitle);
$('#newRoomName').val(''); $('#newRoomName').val('');
$('#userSelectionLength').text(''); $('#userSelectionLength').text('');
CHAT.globalSelectedUserList = []; CHAT.globalSelectedUserList = [];
break; break;
case '#pills-contact': case '#pills-contact':
console.log('#pills-contact'); console.log('#pills-contact');
$('#homeButton').show(); $('#homeButton').show();
$("#backButton").hide(); $("#backButton").hide();
$('.titleRoomName').show(); $('.titleRoomName').show();
$('#my_info').show(); $('#my_info').show();
$('#room_list').hide(); $('#room_list').hide();
$('#room-search').hide(); $('#room-search').hide();
$('#bottomNav').show(); $('#bottomNav').show();
break; break;
case '#pills-user': case '#pills-user':
$("#backButton").show(); $("#backButton").show();
$("#userSelectionDeleteBtn").hide(); $("#userSelectionDeleteBtn").hide();
$('#homeButton').hide(); $('#homeButton').hide();
$('#bottomNav').hide(); $('#bottomNav').hide();
//loadingIndicatorを表示しない //loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
break; break;
case '#pills-group': case '#pills-group':
$("#backButton").show(); $("#backButton").show();
$("#userSelectionDeleteBtn").hide(); $("#userSelectionDeleteBtn").hide();
$('#homeButton').hide(); $('#homeButton').hide();
$('#bottomNav').hide(); $('#bottomNav').hide();
//loadingIndicatorを表示しない //loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
break; break;
case '#pills-confirm': case '#pills-confirm':
$("#backButton").show(); $("#backButton").show();
//loadingIndicatorを表示しない //loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
$('#homeButton').hide(); $('#homeButton').hide();
$('#bottomNav').hide(); $('#bottomNav').hide();
$('.user_people').css("paddingLeft", "0px"); $('.user_people').css("paddingLeft", "0px");
break; break;
case '#pills-communication': // コミュニケーションのタブ case '#pills-communication': // コミュニケーションのタブ
case '#pills-setting': // 設定のタブ case '#pills-setting': // 設定のタブ
case '#pills-profile': // ユーザプロファイルのタブ case '#pills-profile': // ユーザプロファイルのタブ
$('#bottomNav').hide(); $('#bottomNav').hide();
$('.titleRoomName').show(); $('.titleRoomName').show();
$('.roomListIcon, .chatRoomIcon, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn').hide(); $('.roomListIcon, .chatRoomIcon, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn').hide();
$('#backButton').hide(); $('#backButton').hide();
break; break;
default: default:
$('.titleRoomName').show(); $('.titleRoomName').show();
$('.roomListIcon, .chatRoomIcon, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn').hide(); $('.roomListIcon, .chatRoomIcon, #userSelectionConfirmBtn, #newRoomName, #userSelectionDeleteBtn').hide();
$('#backButton').hide(); $('#backButton').hide();
break; break;
} }
}); });
// Tab Close/Hidden Event // Tab Close/Hidden Event
$('a[data-toggle="pill"]').on('hide.bs.tab', function(e) { $('a[data-toggle="pill"]').on('hide.bs.tab', function(e) {
var target = $(e.target).attr("href"); // e.target : activated tab var target = $(e.target).attr("href"); // e.target : activated tab
switch(target) { switch(target) {
case '#pills-chat': case '#pills-chat':
$('#message-search').val(''); $('#message-search').val('');
break; break;
case '#pills-chatlist': case '#pills-chatlist':
$('#room-search').val(''); $('#room-search').val('');
$('#room-search').show(); $('#room-search').show();
break; break;
case '#pills-group': case '#pills-group':
$('#groupListKeyword').val(''); $('#groupListKeyword').val('');
break; break;
case '#pills-contact': case '#pills-contact':
$('#select_user_list').html(''); $('#select_user_list').html('');
$('#selectUserListKeyword').val(''); $('#selectUserListKeyword').val('');
$('.titleRoomName').show(); $('.titleRoomName').show();
$('.user_people').css("paddingLeft", "12%"); $('.user_people').css("paddingLeft", "12%");
$('#my_info').show(); $('#my_info').show();
$('#room_list').hide(); $('#room_list').hide();
$('#room-search').hide(); $('#room-search').hide();
break; break;
case '#pills-user': case '#pills-user':
$('#userListKeyword').val(''); $('#userListKeyword').val('');
break; break;
case '#pills-confirm': case '#pills-confirm':
$('#select_user_list').html(''); $('#select_user_list').html('');
$('#selectUserListKeyword').val(''); $('#selectUserListKeyword').val('');
$('.titleRoomName').show(); $('.titleRoomName').show();
$('.user_people').css("paddingLeft", "12%"); $('.user_people').css("paddingLeft", "12%");
break; break;
case '#pills-communication': case '#pills-communication':
case '#pills-setting': case '#pills-setting':
case '#pills-profile': case '#pills-profile':
break; break;
default: default:
break; break;
} }
}); });
$('#pills-chat-tab').on('shown.bs.tab', function (e){ $('#pills-chat-tab').on('shown.bs.tab', function (e){
CHAT_UI.scrollToBottom(); CHAT_UI.scrollToBottom();
}); });
$('#pills-user-tab').on('shown.bs.tab', function (e){ $('#pills-user-tab').on('shown.bs.tab', function (e){
$('#userSelectionConfirmBtn').show(); $('#userSelectionConfirmBtn').show();
}); });
$('#pills-confirm-tab').on('shown.bs.tab', function (e){ $('#pills-confirm-tab').on('shown.bs.tab', function (e){
$('#userSelectionConfirmBtn').show(); $('#userSelectionConfirmBtn').show();
$('#userSelectionLength').text(''); $('#userSelectionLength').text('');
$('#userSelectionDeleteBtn').hide(); $('#userSelectionDeleteBtn').hide();
}); });
CHAT_UI.scrollToBottom = function() { CHAT_UI.scrollToBottom = function() {
const messages = $('#messages'); const messages = $('#messages');
const scrollHeight = messages.prop('scrollHeight'); const scrollHeight = messages.prop('scrollHeight');
messages.scrollTop(scrollHeight); messages.scrollTop(scrollHeight);
}; };
CHAT_UI.scrollToLastMarkedUnseen = function(value) { CHAT_UI.scrollToLastMarkedUnseen = function(value) {
let target = $('[data-markjs=true]:not([data-seen=true])').last(); let target = $('[data-markjs=true]:not([data-seen=true])').last();
let messages = $('#messages'); let messages = $('#messages');
if (target.length > 0) { if (target.length > 0) {
messages.scrollTop(target.prop('offsetTop') - target.prop('offsetHeight') - messages.prop('offsetHeight') + target.parent().parent().height()); messages.scrollTop(target.prop('offsetTop') - target.prop('offsetHeight') - messages.prop('offsetHeight') + target.parent().parent().height());
target.attr('data-seen', true); target.attr('data-seen', true);
} else { } else {
messages.scrollTop(0); messages.scrollTop(0);
$('.message_content').unmark(); $('.message_content').unmark();
$('.message_content').mark(value); $('.message_content').mark(value);
} }
}; };
//loadingIndicatorを表示 //loadingIndicatorを表示
CHAT_UI.showLoadingIndicator = function() { CHAT_UI.showLoadingIndicator = function() {
$("#loadingIndicator").addClass('active undismissable'); $("#loadingIndicator").addClass('active undismissable');
} }
//loadingIndicatorを表示しない //loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator = function() { CHAT_UI.dismissLoadingIndicator = function() {
$("#loadingIndicator").removeClass('active undismissable'); $("#loadingIndicator").removeClass('active undismissable');
} }
//画面の方向をcheck //画面の方向をcheck
CHAT_UI.isLandscapeMode = function() { CHAT_UI.isLandscapeMode = function() {
if (CHAT_UTIL.isMobile()) { if (CHAT_UTIL.isMobile()) {
return false; return false;
} }
return $(window).width() > $(window).height() return $(window).width() > $(window).height()
} }
CHAT_UI.setConfirmButtonEvent = function(isInvite) { CHAT_UI.setConfirmButtonEvent = function(isInvite) {
let titleText = isInvite ? getLocalizedString("inviteUsersSubtitle") : getLocalizedString("createRoomSubtitle") let titleText = isInvite ? getLocalizedString("inviteUsersSubtitle") : getLocalizedString("createRoomSubtitle")
let invitedUserText = getLocalizedString("invitedUser") let invitedUserText = getLocalizedString("invitedUser")
if (!isInvite) { if (!isInvite) {
$('#newRoomName').show(); $('#newRoomName').show();
} }
$('#userSelectionConfirmBtn').off().on('click', function(event) { $('#userSelectionConfirmBtn').off().on('click', function(event) {
//loadingIndicatorを表示 //loadingIndicatorを表示
CHAT_UI.showLoadingIndicator(); CHAT_UI.showLoadingIndicator();
CHAT_UI.showConfirmView(isInvite); CHAT_UI.showConfirmView(isInvite);
}); });
CHAT_UI.showConfirmView(isInvite); CHAT_UI.showConfirmView(isInvite);
$('#inviteStatus').text(titleText); $('#inviteStatus').text(titleText);
$('#invitedUsers').text(invitedUserText); $('#invitedUsers').text(invitedUserText);
$('#pills-confirm-tab').tab('show'); $('#pills-confirm-tab').tab('show');
} }
//ConfirmView initialize //ConfirmView initialize
CHAT_UI.showConfirmView = function(isInvite) { CHAT_UI.showConfirmView = function(isInvite) {
const template = $('#user-template').html(); const template = $('#user-template').html();
$('#select_user_list').html(''); $('#select_user_list').html('');
CHAT.globalSelectedUserList.forEach(function(user){ CHAT.globalSelectedUserList.forEach(function(user){
let html = Mustache.render(template, { let html = Mustache.render(template, {
id: user.shopMemberId, id: user.shopMemberId,
profileImage: user.profileImagePath, profileImage: user.profileImagePath,
name: user.loginId name: user.loginId
}); });
// TODO 次のコミットに参考事項 // TODO 次のコミットに参考事項
// チャットルーム開設画面で参加ユーザー削除用チェックロジックが残っているので // チャットルーム開設画面で参加ユーザー削除用チェックロジックが残っているので
// 影響テスト後、削除予定。 kang-dh // 影響テスト後、削除予定。 kang-dh
let obj = $(jQuery.parseHTML(html)).on('click',function(){ let obj = $(jQuery.parseHTML(html)).on('click',function(){
$(this).find('.userCheckBox').toggleClass('active'); $(this).find('.userCheckBox').toggleClass('active');
}); });
$('#select_user_list').append(obj); $('#select_user_list').append(obj);
}); });
let roomListTitle = getLocalizedString("createRoomTitle") let roomListTitle = getLocalizedString("createRoomTitle")
$('.titleRoomName').text(roomListTitle) $('.titleRoomName').text(roomListTitle)
// Rotate // Rotate
if(CHAT_UI.isLandscapeMode()){ if(CHAT_UI.isLandscapeMode()){
$(".user_list").addClass("col-6").removeClass("col-12"); $(".user_list").addClass("col-6").removeClass("col-12");
$(".squareBoxContent span").addClass("landscape_span"); $(".squareBoxContent span").addClass("landscape_span");
} }
$('#backButton').off().on('click', function() { $('#backButton').off().on('click', function() {
//loadingIndicatorを表示 //loadingIndicatorを表示
CHAT_UI.showLoadingIndicator(); CHAT_UI.showLoadingIndicator();
socket.emit('getGroupList', isInvite) socket.emit('getGroupList', isInvite)
}); });
$("#userSelectionConfirmBtn").off().on('click', function(){ $("#userSelectionConfirmBtn").off().on('click', function(){
if (isInvite) { if (isInvite) {
let userIdList = jQuery.makeArray($('#select_user_list .user_list').find('.userCheckBox')).map(function (e) { let userIdList = jQuery.makeArray($('#select_user_list .user_list').find('.userCheckBox')).map(function (e) {
return e.dataset.id; return e.dataset.id;
}); });
// ユーザーの名前(login id)リスト。 // ユーザーの名前(login id)リスト。
let loginIdList = jQuery.makeArray($('#select_user_list .user_list').find('.userCheckBox')).map(function (e) { let loginIdList = jQuery.makeArray($('#select_user_list .user_list').find('.userCheckBox')).map(function (e) {
return e.dataset.name; return e.dataset.name;
}); });
if(userIdList.length > 0 && loginIdList.length > 0) { if(userIdList.length > 0 && loginIdList.length > 0) {
//loadingIndicatorを表示 //loadingIndicatorを表示
CHAT_UI.showLoadingIndicator(); CHAT_UI.showLoadingIndicator();
socket.emit('inviteUsers', userIdList, loginIdList, function() { socket.emit('inviteUsers', userIdList, loginIdList, function() {
$("#userSelectionDeleteBtn").hide(); $("#userSelectionDeleteBtn").hide();
$('#pills-chat-tab').tab('show'); $('#pills-chat-tab').tab('show');
}); });
} }
} else { } else {
if ($('#select_user_list .user_list').find('.userCheckBox').length > 0) { if ($('#select_user_list .user_list').find('.userCheckBox').length > 0) {
// #36130に対応 // #36130に対応
const trimmedRoomName = $('#newRoomName').val().trim() const trimmedRoomName = $('#newRoomName').val().trim()
if (trimmedRoomName.length == 0) { if (trimmedRoomName.length == 0) {
// loadingIndicatorを表示 // loadingIndicatorを表示
CHAT_UI.showLoadingIndicator(); CHAT_UI.showLoadingIndicator();
let userIdList = jQuery.makeArray($('#select_user_list .user_list').find('.userCheckBox')).map(function (e) { let userIdList = jQuery.makeArray($('#select_user_list .user_list').find('.userCheckBox')).map(function (e) {
return e.dataset.id; return e.dataset.id;
}); });
let userNameList = jQuery.makeArray($('#select_user_list .user_list').find('.userCheckBox')).map(function (e) { let userNameList = jQuery.makeArray($('#select_user_list .user_list').find('.userCheckBox')).map(function (e) {
return e.dataset.name; return e.dataset.name;
}); });
//TODO DB作業が終わったら自分のユーザ名を表示するかを判断し、修正予定。 //TODO DB作業が終わったら自分のユーザ名を表示するかを判断し、修正予定。
// 参加ユーザ名でルーム名を生成 // 参加ユーザ名でルーム名を生成
let newRoomName = CHAT.globalLoginParameter.loginId + ',' + userNameList.join(','); let newRoomName = CHAT.globalLoginParameter.loginId + ',' + userNameList.join(',');
// ルーム名のURIencodingを行う // ルーム名のURIencodingを行う
//const encodedRoomName = encodeURIComponent(newRoomName); //const encodedRoomName = encodeURIComponent(newRoomName);
//todo android create room api //todo android create room api
android.createChatRoom("1",userIdList.join(','),newRoomName); android.createChatRoom("1",userIdList.join(','),newRoomName);
/*socket.emit('createNewRoom', userIdList, encodedRoomName, function(newRoomId) { /*socket.emit('createNewRoom', userIdList, encodedRoomName, function(newRoomId) {
socket.emit('joinRoom', newRoomId, newRoomName, function () { socket.emit('joinRoom', newRoomId, newRoomName, function () {
CHAT.saveRoomInfo(newRoomId, newRoomName); CHAT.saveRoomInfo(newRoomId, newRoomName);
$('#messages').html(''); $('#messages').html('');
$('.titleRoomName').text(newRoomName).data('roomName', newRoomName); $('.titleRoomName').text(newRoomName).data('roomName', newRoomName);
$("#userSelectionDeleteBtn").hide(); $("#userSelectionDeleteBtn").hide();
$('#pills-chat-tab').tab('show'); $('#pills-chat-tab').tab('show');
}); });
});*/ });*/
/*socket.on('createNewRoom', (shopMemberIdList, newRoomName, callback) => { /*socket.on('createNewRoom', (shopMemberIdList, newRoomName, callback) => {
const user = onlineUsers.getUser(socket.id) const user = onlineUsers.getUser(socket.id)
...@@ -715,143 +715,150 @@ CHAT_UI.showConfirmView = function(isInvite) { ...@@ -715,143 +715,150 @@ CHAT_UI.showConfirmView = function(isInvite) {
} else if(trimmedRoomName.includes(';') || trimmedRoomName.includes('/') || trimmedRoomName.includes('?') || trimmedRoomName.includes(':') || trimmedRoomName.includes("@") } 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("\'") || 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 // #36147
// #36174 // #36174
$("#customAlertTitle").text(getLocalizedString("invalidCharacter")); $("#customAlertTitle").text(getLocalizedString("invalidCharacter"));
$("#customAlertOk").text(getLocalizedString("yesTitle")); $("#customAlertOk").text(getLocalizedString("yesTitle"));
$('#customAlert').appendTo("body").modal({ $('#customAlert').appendTo("body").modal({
backdrop: 'static', backdrop: 'static',
keyboard: false keyboard: false
}) })
.on('click', '#customAlertOk', function(e) { .on('click', '#customAlertOk', function(e) {
}); });
} else if (trimmedRoomName.length > 20) { } else if (trimmedRoomName.length > 20) {
// #36142 // #36142
var inputText = $('#newRoomName').val().trim(); // #36142 文字列の前又は後の空白文字列を削除 var inputText = $('#newRoomName').val().trim(); // #36142 文字列の前又は後の空白文字列を削除
// #36174 // #36174
$("#customAlertTitle").text(getLocalizedString("nameTooLong")); $("#customAlertTitle").text(getLocalizedString("nameTooLong"));
$("#customAlertOk").text(getLocalizedString("yesTitle")); $("#customAlertOk").text(getLocalizedString("yesTitle"));
$('#customAlert').appendTo("body").modal({ $('#customAlert').appendTo("body").modal({
backdrop: 'static', backdrop: 'static',
keyboard: false keyboard: false
}) })
.on('click', '#customAlertOk', function(e) { .on('click', '#customAlertOk', function(e) {
$('#newRoomName').val(inputText.substr(0, $('#newRoomName').prop("maxlength"))); $('#newRoomName').val(inputText.substr(0, $('#newRoomName').prop("maxlength")));
}); });
} else { } else {
//loadingIndicatorを表示 //loadingIndicatorを表示
CHAT_UI.showLoadingIndicator(); CHAT_UI.showLoadingIndicator();
let userIdList = jQuery.makeArray($('#select_user_list .user_list').find('.userCheckBox')).map(function (e) { let userIdList = jQuery.makeArray($('#select_user_list .user_list').find('.userCheckBox')).map(function (e) {
return e.dataset.id; return e.dataset.id;
}); });
// ルーム名のtrimmingした後、URIencodingを行う // ルーム名のtrimmingした後、URIencodingを行う
const encodedRoomName = encodeURIComponent(trimmedRoomName); const encodedRoomName = encodeURIComponent(trimmedRoomName);
socket.emit('createNewRoom', userIdList, encodedRoomName, function(newRoomId) { socket.emit('createNewRoom', userIdList, encodedRoomName, function(newRoomId) {
socket.emit('joinRoom', newRoomId, trimmedRoomName, function () { socket.emit('joinRoom', newRoomId, trimmedRoomName, function () {
CHAT.saveRoomInfo(newRoomId, trimmedRoomName); CHAT.saveRoomInfo(newRoomId, trimmedRoomName);
$('#messages').html(''); $('#messages').html('');
$('.titleRoomName').text(trimmedRoomName).data('roomName', trimmedRoomName); $('.titleRoomName').text(trimmedRoomName).data('roomName', trimmedRoomName);
$("#userSelectionDeleteBtn").hide(); $("#userSelectionDeleteBtn").hide();
$('#pills-chat-tab').tab('show'); $('#pills-chat-tab').tab('show');
}); });
}); });
} }
} }
} }
}); });
$("#userSelectionDeleteBtn").hide(); $("#userSelectionDeleteBtn").hide();
$("#userSelectionDeleteBtn").off().on('click', function() { $("#userSelectionDeleteBtn").off().on('click', function() {
// #36174 // #36174
$("#customConfirmTitle").text(getLocalizedString("memberDeleteTitle")); $("#customConfirmTitle").text(getLocalizedString("memberDeleteTitle"));
$("#customConfirmOk").text(getLocalizedString("roomDelete")); $("#customConfirmOk").text(getLocalizedString("roomDelete"));
$("#customAlertCancel").text(getLocalizedString("cancelTitle")); $("#customAlertCancel").text(getLocalizedString("cancelTitle"));
$('#customConfirm').appendTo("body").modal({ $('#customConfirm').appendTo("body").modal({
backdrop: 'static', backdrop: 'static',
keyboard: false keyboard: false
}) })
.on('click', '#customConfirmOk', function(e) { .on('click', '#customConfirmOk', function(e) {
CHAT_UI.deleteButtonAction(isInvite); CHAT_UI.deleteButtonAction(isInvite);
}); });
}); });
} }
CHAT_UI.deleteButtonAction = function(isInvite) { CHAT_UI.deleteButtonAction = function(isInvite) {
//配列の整理 //配列の整理
jQuery.makeArray($('#select_user_list .user_list').find(".userCheckBox.active")).map(function (e) { jQuery.makeArray($('#select_user_list .user_list').find(".userCheckBox.active")).map(function (e) {
CHAT.globalSelectedUserList = CHAT.globalSelectedUserList.filter(function(element) { CHAT.globalSelectedUserList = CHAT.globalSelectedUserList.filter(function(element) {
return e.dataset.name != element.loginId; return e.dataset.name != element.loginId;
}); });
}); });
CHAT_UI.showConfirmView(isInvite) CHAT_UI.showConfirmView(isInvite)
$('#select_user_list .user_list').find('.userCheckBox').show(); $('#select_user_list .user_list').find('.userCheckBox').show();
} }
CHAT_UI.htmlElementTextInitialize = function(languageCode) { CHAT_UI.htmlElementTextInitialize = function(languageCode) {
moment.locale(languageCode); moment.locale(languageCode);
setLanguage(languageCode); setLanguage(languageCode);
$(".titleRoomName").text(getLocalizedString("roomListTitle")); $(".titleRoomName").text(getLocalizedString("roomListTitle"));
$("#message-form").attr("placeholder", getLocalizedString("chat_placeholder")); $("#message-form").attr("placeholder", getLocalizedString("chat_placeholder"));
$("#message-search").attr("placeholder",getLocalizedString("chat_search_placeholder")); $("#message-search").attr("placeholder",getLocalizedString("chat_search_placeholder"));
$("#exitRoom").text(getLocalizedString("exitRoom")).append("<i class='fas fa-door-open'></i>") $("#exitRoom").text(getLocalizedString("exitRoom")).append("<i class='fas fa-door-open'></i>")
$("#participants").text(getLocalizedString("participants")) $("#participants").text(getLocalizedString("participants"))
$("#fileUploadButton").text(getLocalizedString("photo")) $("#fileUploadButton").text(getLocalizedString("photo"))
$("#fileUploadButton2").text(getLocalizedString("video")) $("#fileUploadButton2").text(getLocalizedString("video"))
$("#okayLabel").text(getLocalizedString("okayLabel")) $("#okayLabel").text(getLocalizedString("okayLabel"))
$("#completeLabel").text(getLocalizedString("completeLabel")) $("#completeLabel").text(getLocalizedString("completeLabel"))
$("#thankLabel").text(getLocalizedString("thankLabel")) $("#thankLabel").text(getLocalizedString("thankLabel"))
$("#startToWorkLabel").text(getLocalizedString("startToWorkLabel")) $("#startToWorkLabel").text(getLocalizedString("startToWorkLabel"))
$("#groupListKeyword").attr("placeholder", getLocalizedString("groupSearch")) $("#groupListKeyword").attr("placeholder", getLocalizedString("groupSearch"))
$("#contactListKeyword").attr("placeholder", getLocalizedString("contactSearch")) $("#contactListKeyword").attr("placeholder", getLocalizedString("contactSearch"))
$("#room-search").attr("placeholder",$("#room-search").attr("placeholder")+getLocalizedString("room_search_placeholder")); $("#room-search").attr("placeholder",$("#room-search").attr("placeholder")+getLocalizedString("room_search_placeholder"));
$("#userListKeyword").attr("placeholder", getLocalizedString("userSearch")) $("#userListKeyword").attr("placeholder", getLocalizedString("userSearch"))
$("#newRoomName").attr("placeholder", getLocalizedString("newRoomName")) $("#newRoomName").attr("placeholder", getLocalizedString("newRoomName"))
$("#dmBtn").text(getLocalizedString("directMessageChatRoom")) $("#dmBtn").text(getLocalizedString("directMessageChatRoom"))
$("#groupBtn").text(getLocalizedString("groupChatRoom")) $("#groupBtn").text(getLocalizedString("groupChatRoom"))
$("#favorite-seperator").text(getLocalizedString("favorite"))
$("#mygroup-seperator").text(getLocalizedString("mygroup"))
} }
// 画像の読み込みが全て終わったタイミングでコールバック実行 // 画像の読み込みが全て終わったタイミングでコールバック実行
// FIXME 追加読み込みの場合は差分の画像のみ監視すべきだが、現状新規入室時にしか対応出来ていない。 // FIXME 追加読み込みの場合は差分の画像のみ監視すべきだが、現状新規入室時にしか対応出来ていない。
CHAT_UI.waitForLoadingImage = function(div, callback) { CHAT_UI.waitForLoadingImage = function(div, callback) {
var imgs = div.find("img"); var imgs = div.find("img");
var count = imgs.length; var count = imgs.length;
if (count==0) if (count==0)
callback(); callback();
var loaded = 0; var loaded = 0;
imgs.one( "load" , function ( e ) { imgs.one( "load" , function ( e ) {
// イメージが読み込まれた // イメージが読み込まれた
loaded++; loaded++;
if ( loaded === count ) { if ( loaded === count ) {
callback(); callback();
} }
}).each( function () { }).each( function () {
if ( this.complete || this.readyState === readyState.COMPLETED ) { if ( this.complete || this.readyState === readyState.COMPLETED ) {
$(this).trigger("load"); $(this).trigger("load");
} }
}); });
} }
$('#contactButton').on('click', function(event){ $('#contactButton').on('click', function(event){
CHAT_UI.refreshContactScreen(); CHAT_UI.refreshContactScreen();
});
$('#chatButton').on('click', function(event){
CHAT_UI.refreshRoomList(chatRoomType.DM);
}); });
CHAT_UI.refreshContactScreen = function() { CHAT_UI.refreshContactScreen = function() {
...@@ -866,11 +873,11 @@ CHAT_UI.refreshContactScreen = function() { ...@@ -866,11 +873,11 @@ CHAT_UI.refreshContactScreen = function() {
let contactListTitle = getLocalizedString("contactListTitle"); let contactListTitle = getLocalizedString("contactListTitle");
$('.titleRoomName').text(contactListTitle); $('.titleRoomName').text(contactListTitle);
// グループの様式を読み込む // グループの様式を読み込む
const groupTemplate = $('#group-template').html(); const groupTemplate = $('#group-template').html();
// ユーザの様式を読み込む // ユーザの様式を読み込む
const userTemplate = $('#user-template').html(); const userTemplate = $('#user-template').html();
if (IS_ONLINE == 'true') { if (IS_ONLINE == 'true') {
android.updateGroupInfo(); android.updateGroupInfo();
...@@ -883,64 +890,71 @@ CHAT_UI.refreshContactScreen = function() { ...@@ -883,64 +890,71 @@ CHAT_UI.refreshContactScreen = function() {
myInfo.profileImagePath = CHAT.getProfileImgUrl(myInfo.profileUrl) myInfo.profileImagePath = CHAT.getProfileImgUrl(myInfo.profileUrl)
let html = Mustache.render(userTemplate, { let html = Mustache.render(userTemplate, {
id: myInfo.shopMemberId, id: myInfo.shopMemberId,
profileImage: myInfo.profileImagePath, profileImage: myInfo.profileImagePath,
name: myInfo.shopMemberName name: myInfo.shopMemberName
}); });
let obj = $(jQuery.parseHTML(html)).on('click',function(){ let obj = $(jQuery.parseHTML(html)).on('click',function(){
//TODO need onClick Action //TODO need onClick Action
console.log('myInfoClick'); console.log('myInfoClick');
}); });
$('#my_info').append(obj); $('#my_info').append(obj);
var groupUserList = CHAT_DB.getMyGroupUsers(); var groupUserList = CHAT_DB.getMyGroupUsers();
groupUserList.forEach(function(groupUser) { console.log(groupUserList);
groupUserList.forEach(function(groupUser) {
groupUser.profileImagePath = CHAT.getProfileImgUrl(groupUser.profileUrl)
let html = Mustache.render(userTemplate, { let html = Mustache.render(userTemplate, {
id: groupUser.shopMemberId, id: groupUser.shopMemberId,
profileImage: groupUser.profileImagePath, profileImage: groupUser.profileImagePath,
name: groupUser.shopMemberName name: groupUser.shopMemberName
}); });
let obj = $(jQuery.parseHTML(html)).on('click',function(){
//TODO need onClick Action
console.log('groupUserClick');
});
$('#my_group_list').append(obj); let obj = $(jQuery.parseHTML(html)).on('click',function(){
}) //TODO need onClick Action
});
var favoriteGroupList = CHAT_DB.getFavoriteGroups(); $('#my_group_list').append(obj);
favoriteGroupList.forEach(function(favoriteGroup) { })
var favoriteCount = 0;
var favoriteGroupList = CHAT_DB.getFavoriteGroups();
favoriteGroupList.forEach(function(favoriteGroup) {
let html = Mustache.render(groupTemplate, { let html = Mustache.render(groupTemplate, {
name: favoriteGroup.groupName name: favoriteGroup.groupName
}); });
let obj = $(jQuery.parseHTML(html)).on('click',function(){
//TODO need onClick Action
console.log('groupClick');
});
$('#favorite_list').append(obj); let obj = $(jQuery.parseHTML(html)).on('click',function(){
}) //TODO need onClick Action
});
favoriteCount++
$('#favorite_list').append(obj);
})
var favoriteUserList = CHAT_DB.getFavoriteUsers(); var favoriteUserList = CHAT_DB.getFavoriteUsers();
favoriteUserList.forEach(function(favoriteUser) { favoriteUserList.forEach(function(favoriteUser) {
favoriteUser.profileImagePath = CHAT.getProfileImgUrl(favoriteUser.profileUrl)
let html = Mustache.render(groupTemplate, { let html = Mustache.render(groupTemplate, {
id: favoriteUser.shopMemberId, id: favoriteUser.shopMemberId,
profileImage: favoriteUser.profileImagePath, profileImage: favoriteUser.profileImagePath,
name: favoriteUser.shopMemberName name: favoriteUser.shopMemberName
}); });
let obj = $(jQuery.parseHTML(html)).on('click',function(){
//TODO need onClick Action
console.log('userClick');
});
$('#favorite_list').append(obj); 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();
}
console.log('LOAD DONE CONTACT SCREEN'); console.log('LOAD DONE CONTACT SCREEN');
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
} }
...@@ -1035,7 +1049,6 @@ CHAT_UI.joinRoom = function(roomId,roomName) { ...@@ -1035,7 +1049,6 @@ CHAT_UI.joinRoom = function(roomId,roomName) {
android.updateMessages(roomId); android.updateMessages(roomId);
socket.emit('joinRoom', roomId, roomName, function() { socket.emit('joinRoom', roomId, roomName, function() {
}); });
} else {
} }
var messages = CHAT_DB.getMessages(roomId); var messages = CHAT_DB.getMessages(roomId);
console.log(messages); console.log(messages);
...@@ -1110,9 +1123,9 @@ CHAT_UI.loadMessages = function(messages, roomId, roomName) { ...@@ -1110,9 +1123,9 @@ CHAT_UI.loadMessages = function(messages, roomId, roomName) {
$('#dmBtn').on('click', function (e){ $('#dmBtn').on('click', function (e){
CHAT_UI.refreshRoomList("1"); CHAT_UI.refreshRoomList(chatRoomType.DM);
}); });
$('#groupBtn').on('click', function (e){ $('#groupBtn').on('click', function (e){
CHAT_UI.refreshRoomList("0"); CHAT_UI.refreshRoomList(chatRoomType.GROUP);
}); });
\ No newline at end of file
public/js/chat-websocket.js
var socket; var socket;
function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) { function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
CHAT_SERVER_URL = chatServerUrl; CHAT_SERVER_URL = chatServerUrl;
CMS_SERVER_URL = cmsServerUrl; CMS_SERVER_URL = cmsServerUrl;
PLATFORM = platform; PLATFORM = platform;
IS_MOBILE = isMobile; IS_MOBILE = isMobile;
IS_ONLINE = isOnline; IS_ONLINE = isOnline;
connectSocket(); connectSocket();
}; };
android.getGlobalParameter(); android.getGlobalParameter();
function connectSocket() { function connectSocket() {
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
if (IS_ONLINE == 'true') { if (IS_ONLINE == 'true') {
console.log('isOnline');
socket = io(CHAT_SERVER_URL); socket = io(CHAT_SERVER_URL);
console.log('insOnline');
setSocketAction(); setSocketAction();
android.updateRoomList(); android.updateRoomList();
CHAT_UI.refreshRoomList("1"); CHAT_UI.refreshRoomList(chatRoomType.DM);
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
$('#createChatRoom').show(); $('#createChatRoom').show();
} else { } else {
console.log('insOffline'); console.log('isOffline');
//オフラインの場合、DBからルーム一覧を表示。 //オフラインの場合、DBからルーム一覧を表示。
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
//TODO IOSの場合 //TODO IOSの場合
} else if (CHAT_UTIL.isAndroid()) { } else if (CHAT_UTIL.isAndroid()) {
console.log('insAnd');
//$('.overlay').removeClass('active undismissable'); //$('.overlay').removeClass('active undismissable');
// loadingIndicatorを表示 // loadingIndicatorを表示
CHAT_UI.showLoadingIndicator(); CHAT_UI.showLoadingIndicator();
android.getLoginParameter(); android.getLoginParameter();
console.log('init') CHAT_UI.refreshRoomList(chatRoomType.DM);
CHAT_UI.refreshRoomList("1");
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
$('#createChatRoom').show(); $('#createChatRoom').show();
} }
...@@ -400,7 +398,7 @@ function setSocketAction () { ...@@ -400,7 +398,7 @@ function setSocketAction () {
} else { } else {
if (IS_ONLINE == 'true') { if (IS_ONLINE == 'true') {
android.updateRoomList(); android.updateRoomList();
CHAT_UI.refreshRoomList("1"); CHAT_UI.refreshRoomList(chatRoomType.DM);
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
} }
} }
......
public/js/chat.js
...@@ -272,7 +272,7 @@ CHAT.leaveRoom = function() { ...@@ -272,7 +272,7 @@ CHAT.leaveRoom = function() {
CHAT.requestMyinfo = function() { CHAT.requestMyinfo = function() {
jQuery.ajax({ jQuery.ajax({
async: true, async: true,
url: CMS_SERVER_URL+"/chatapi/user?sid="+CHAT.globalLoginParameter.sid+"&cmd="+userAPICmd.MYINFO, url: CMS_SERVER_URL+"/chatapi/user?sid="+CHAT.globalLoginParameter.sid+"&cmd="+userAPICmd.MYINFO,
type: "get", type: "get",
processData: false, processData: false,
contentType: false contentType: false
......
public/js/constant.js
...@@ -20,3 +20,8 @@ const messageType = { ...@@ -20,3 +20,8 @@ const messageType = {
const userAPICmd = { const userAPICmd = {
MYINFO : 9 MYINFO : 9
} }
const chatRoomType = {
DM : "1",
GROUP : "0"
}
public/js/language_en.js
...@@ -56,5 +56,7 @@ $.lang.en = { ...@@ -56,5 +56,7 @@ $.lang.en = {
"contactListTitle":"Contact", "contactListTitle":"Contact",
"contactSearch":"Contact search", "contactSearch":"Contact search",
"directMessageChatRoom":"DM", "directMessageChatRoom":"DM",
"favorite":"Favorite List",
"mygroup":"My Group",
"groupChatRoom":"Group" "groupChatRoom":"Group"
} }
public/js/language_ja.js
...@@ -56,5 +56,7 @@ $.lang.ja = { ...@@ -56,5 +56,7 @@ $.lang.ja = {
"contactListTitle":"コンタクト", "contactListTitle":"コンタクト",
"contactSearch":"コンタクト検索", "contactSearch":"コンタクト検索",
"directMessageChatRoom":"DM", "directMessageChatRoom":"DM",
"favorite":"お気に入りリスト",
"mygroup":"マイグループ",
"groupChatRoom":"グループ" "groupChatRoom":"グループ"
} }
public/js/language_ko.js
...@@ -56,5 +56,7 @@ $.lang.ko = { ...@@ -56,5 +56,7 @@ $.lang.ko = {
"contactListTitle":"연락처", "contactListTitle":"연락처",
"contactSearch":"연락처 검색", "contactSearch":"연락처 검색",
"directMessageChatRoom":"DM", "directMessageChatRoom":"DM",
"favorite":"즐겨찾기리스트",
"mygroup":"마이그룹",
"groupChatRoom":"그룹" "groupChatRoom":"그룹"
} }
public/js/libs/collapsible.js
...@@ -2,13 +2,13 @@ var coll = document.getElementsByClassName("collapsible"); ...@@ -2,13 +2,13 @@ var coll = document.getElementsByClassName("collapsible");
var i; var i;
for (i = 0; i < coll.length; i++) { for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() { coll[i].addEventListener("click", function() {
this.classList.toggle("collapsible-active"); this.classList.toggle("collapsible-active");
var content = this.nextElementSibling; var content = this.nextElementSibling;
if (content.style.display === "block") { if (content.style.display === "block") {
content.style.display = "none"; content.style.display = "none";
} else { } else {
content.style.display = "block"; content.style.display = "block";
} }
}); });
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment