// 名前空間 var CHAT_UI = {}; $(function() { let navbarHeight = document.getElementsByClassName("navbar")[0].offsetHeight let searchBarHeight = document.getElementsByClassName("search-bar-fixed")[0].offsetHeight let footerHeight = document.getElementsByClassName("footer-nav")[0].offsetHeight $(".tab-pane").css('padding', `${navbarHeight + 'px'} 0px 0px`) /* チャットルーム一覧画面スクロール範囲 * 画面の高さ - (画面上部タイトルの高さ + ルーム名検索欄の高さ) */ $(".inbox_chat").css('max-height', `calc(100vh - ${(navbarHeight + searchBarHeight + footerHeight) + 'px'})`) $('.roomListIcon').hide(); $('#userSelectionDeleteBtn').hide(); //$('#createChatRoom').hide(); }); // 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 */ /* --------------------------------------------------- */ // Gallery Button // ギャラリーボタンを押すと最後の写真をクリックさせる。 (ボタン非活性化中) $('#imageGalleryButton').on('click', function(){ $('[data-lightbox=attachedImages]:last').click(); }); //lightbox Configuration lightbox.option({ 'resizeDuration': 0, 'imageFadeDuration': 0, 'fadeDuration': 300, 'alwaysShowNavOnTouchDevices': true }); $('#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': $('#namecard').html(''); $('#homeButton').show(); $("#backButton").hide(); $('.titleRoomName').show(); $('#my_info').show(); $('#bottomNav').show(); break; case '#pills-archive': $('#homeButton').show(); $("#backButton").hide(); $('.titleRoomName').show(); $('#archive_list').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-archive': 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); socket.emit('createNewRoom', userIdList, encodedRoomName, function(newRoomId) { socket.emit('joinRoom', newRoomId, trimmedRoomName, function () { CHAT.saveRoomInfo(newRoomId, trimmedRoomName); $('#messages').html(''); $('.titleRoomName').text(trimmedRoomName).data('roomName', trimmedRoomName); $("#userSelectionDeleteBtn").hide(); $('#pills-chat-tab').tab('show'); }); }); } } } }); $("#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")) $("#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); }); $('#archiveButton').on('click', function(event){ CHAT_UI.refreshArchiveScreen(); }); CHAT_UI.refreshContactScreen = function() { //loadingIndicatorを表示 $('#my_info').html(''); $('#favorite_list').html(''); $('#my_group_list').html(''); CHAT_UI.showLoadingIndicator(); $('#pills-contact-tab').tab('show'); //画面タイトル設定 let contactListTitle = getLocalizedString("contactListTitle"); $('.titleRoomName').text(contactListTitle); // グループの様式を読み込む const groupTemplate = $('#group-template').html(); // ユーザの様式を読み込む const userTemplate = $('#user-template').html(); const myNamecardTemplate = $('#my-namecard-template').html(); if (IS_ONLINE == 'true') { android.updateGroupInfo(); android.updateMyInfo(); android.updateGroupUser(); } var myInfo = CHAT_DB.getMyInfo(); 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(){ }); $('#namecard').append(myNamecardObj); 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('namecard'); }); $('#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(){ //TODO need onClick Action if (IS_ONLINE == 'true') { android.updateUserInfo(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, 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) { $('#namecard').appendTo("body").modal({ backdrop: 'static', keyboard: false }) } CHAT_UI.hideNamecard = function(id) { $('#namecard').modal('hide'); } $(document).click(function (e) { if($(e.target).hasClass('my-name-card-close')){ CHAT_UI.hideNamecard('namecard'); } }); CHAT_UI.showUserNamecard = function(shopMemberId) { // $('#namecard').appendTo("body").modal({ // backdrop: 'static', // keyboard: false // }) } CHAT_UI.refreshArchiveScreen = function() { // loadingIndicatorを表示 CHAT_UI.showLoadingIndicator(); //画面タイトル設定 let archiveListTitle = getLocalizedString("archiveListTitle"); $('.titleRoomName').text(archiveListTitle); // 初期化 $('#archive_list').html(''); $('#pills-archive-tab').tab('show'); // アーカイブの様式を読み込む const archiveTemplate = $('#archive-template').html(); if (IS_ONLINE == 'true') { CHAT_DB.updateArchiveList(); } // アーカイブ一覧取得&表示 var archiveList = CHAT_DB.getArchiveList(); archiveList.forEach(function(archive) { var archiveType = ''; var css = ''; switch(archive.archiveType) { case 0: archiveType = getLocalizedString("archiveTypeImage"); css = 'type_image'; break; case 1: archiveType = getLocalizedString("archiveTypeMovie"); css = 'type_movie'; break; case 2: archiveType = getLocalizedString("archiveTypeSound"); css = 'type_sound'; break; case 3: // 今回のリリースに文書とその他は含めないため非表示 archiveType = getLocalizedString("archiveTypeDocument"); css = 'type_document'; break; default: // 今回のリリースに文書とその他は含めないため非表示 archiveType = getLocalizedString("archiveTypeOther"); css = 'type_other'; } let html = Mustache.render(archiveTemplate, { id: archive.archiveId, fileName: archive.archiveName, thumbnailImage: archive.archiveUrl, insertDate: archive.archiveDate, archiveType: archiveType, archiveTypeCSS: css }); let obj = $(jQuery.parseHTML(html)).on('click', function() { // アーカイブ詳細画面へ遷移 $('#homeButton').hide(); $('.titleRoomName').show(); $('#archive_list').hide(); $('#archive_detail').show(); $('#bottomNav').hide(); $("#backButton").show(); $('#backButton').off().on('click', function() { // アーカイブ一覧に戻る $('#homeButton').show(); $("#backButton").hide(); $('.titleRoomName').show(); $('#archive_detail').hide(); $('#archive_list').show(); $('#bottomNav').show(); }); // データの受け渡し CHAT_UI.refreshArchiveDetailScreen(archive.archiveId); }); $('#archive_list').append(obj); $('.archive_list').css('border-bottom', '1px solid #c4c4c4'); }) // loadingIndicatorを非表示 CHAT_UI.dismissLoadingIndicator(); } // アーカイブ詳細画面の設定 CHAT_UI.refreshArchiveDetailScreen = function(archiveId) { // loadingIndicatorを表示 CHAT_UI.showLoadingIndicator(); //画面タイトル設定 let archiveDetailTitle = getLocalizedString("archiveDetailTitle"); $('.titleRoomName').text(archiveDetailTitle); // 初期化 $('#archive_detail').html(''); // アーカイブ詳細の様式を読み込む const archiveDetailTemplate = $('#archive-detail-template').html(); if (IS_ONLINE == 'true') { CHAT_DB.updateArchiveDetail(archiveId); } // アーカイブ詳細取得 var archive = CHAT_DB.getArchiveDetail(archiveId); // チャットルーム情報を取得 var roomId = archive.roomId; var roomInfo = CHAT_DB.getChatRoomInfo(roomId); // アーカイブ情報を表示 let html = Mustache.render(archiveDetailTemplate, { fileNameTitle: getLocalizedString("fileNameTitle"), fileName: archive.archiveName, saveDateTitle: getLocalizedString("saveDateTitle"), insertDate: archive.archiveDate, roomNameTitle: getLocalizedString("roomNameTitle"), chatRoomName: roomInfo.chatRoomName, saveUserTitle: getLocalizedString("saveUserTitle"), attendUserTitle: getLocalizedString("attendUserTitle") }); let obj = $(jQuery.parseHTML(html)); $('#archive_detail').append(obj); // プレイヤーの切り替え switch(archive.archiveType) { case 0: // 画像 $('#archive_player').prepend('<img class="archive_player" src=' + archive.archiveUrl + '" </img>'); break; case 1: // 動画 $('#archive_player').prepend('<video class="archive_player" src=' + archive.archiveUrl + ' controls autoplay muted playsinline></video>'); break; case 2: // 音声 $('#archive_player').prepend('<audio class="archive_audio_player" src=' + archive.archiveUrl + ' controls></audio>'); $('#archive_player').prepend('<img class="archive_player" src=' + "https://via.placeholder.com/1280x720" + ' </img>'); break; case 3: // 文書 // リリースに文書とその他は含めないため今回は非表示 break; default: // リリースに文書とその他は含めないため今回は非表示 } // チャットルームへのリンク付け document.getElementById('joinChatRoom').onclick = function() { socket.emit('joinRoom', roomId, roomInfo.chatRoomName, function () { $('#archive_detail').html(''); $('#messages').html(''); $('.titleRoomName').text(roomInfo.chatRoomName).data('roomName', roomInfo.chatRoomName); $('#pills-chat-tab').tab('show'); }); } // ユーザの様式を読み込む const archiveUserTemplate = $('#archive-user-template').html(); // 保存ユーザ情報を表示 let saveUserList = archive.saveUserId; saveUserList.forEach(function(user) { // TODO ユーザIDからユーザ情報を取得 let html = Mustache.render(archiveUserTemplate, { profileImage: "プロフィール画像", userName: "ユーザ名" }); let obj = $(jQuery.parseHTML(html)).on('click', function() { //TODO ネームカードのポップアップを出す処理 }); $('#save_user').append(obj); }) // 参加ユーザ情報を表示 let attendUserList = archive.attendUserId; attendUserList.forEach(function(user) { // TODO ユーザIDからユーザ情報を取得 let html = Mustache.render(archiveUserTemplate, { profileImage: "プロフィール画像", userName: "ユーザ名" }); let obj = $(jQuery.parseHTML(html)).on('click', function() { //TODO ポップアップを出す処理 }); $('#save_user').append(obj); }) // loadingIndicatorを非表示 CHAT_UI.dismissLoadingIndicator(); }