Skip to content

C
chat_webview
Commit 5cb24459 by Lee Munkyeong
Options

Chat UI

parent 13a9186f
Showing with 99 additions and 56 deletions
public_new/chat_room.html
......@@ -104,26 +104,25 @@
<footer class="chat_room_footer">
<!-- フッター上 -->
<div class="footer-wrap d-flex flex-column">
<div>
<div class="msg_notification" id="messageNotification" style="text-align:center;display: none;">
</div>
</div>
<div class="footer_content_t">
<div class="d-flex flex-row h-100">
<div class="footer_item attach_file">
<a href="#">
<img src="icon/icon_camera.png" alt="写真アイコン">
</a>
<img src="icon/icon_camera.png" alt="写真アイコン" id="fileUploadButton">
<form id="image-form">
<input class="d-none" type="file" name="image" id="imageInputTag" accept="image/x-png,image/jpeg">
</form>
</div>
<div class="footer_item attach_file">
<a href="#">
<img src="icon/icon_videocam.png" alt="動画アイコン">
</a>
</div>
<input type="text" name="message" class="message_input_form" placeholder="メッセージを入力してください">
<button type="button" name="button" class="message_input_send none" style="text-align: center;
height: 45px;
width: 100px;
background: #0070CA;
color: #fff;
border: none;
font-size: 18px;">送信</button>
<input type="text" name="message" class="message_input_form" id="messageInput" placeholder="メッセージを入力してください">
<button type="button" name="button" class="message_input_send none" id="messageSend" onclick="CHAT_UI.sendMessage(this);">送信</button>
</div>
</div>
<!-- フッター下 -->
......
public_new/contact.html
......@@ -195,7 +195,11 @@
<div id="loadingArea"></div>
<div id="myProfileModal"></div>
<div id="userProfileModal"></div>
<div id="loader-bg">
<div id="loader">
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
</div>
</div>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/locale/ko.js" charset="UTF-8"></script>
......@@ -205,6 +209,7 @@
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/contact.js"></script>
<script src="./js/common.js"></script>
<script src="./js/loading.js"></script>
<script src="./js/language.js"></script>
<script src="./js/language_ko.js" charset="UTF-8"></script>
<script src="./js/language_ja.js" charset="UTF-8"></script>
......@@ -225,7 +230,6 @@
let PLATFORM = '';
let IS_MOBILE = true;
let IS_ONLINE = false;
$("#loadingArea").load("./loading.html");
android.getLoginParameter();
android.getGlobalParameter();
......
public_new/css/chat.css
......@@ -19,6 +19,9 @@
font-weight: bold;
transition: all 0.2s ease;
}
.msg_notification {
display: none;
}
.tab_item:hover {
opacity: 0.75;
}
......@@ -676,6 +679,7 @@ input[name="tab_item"] {
}
.message_input_send {
border-radius: 8px;
margin: auto 10px;
text-align: center;
height: 45px;
......
public_new/js/chat-ui.js
......@@ -191,32 +191,33 @@ CHAT_UI.setOrientation = function(isLandscapeMode) {
}
}
//メッセージ送信
$('#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');
CHAT_UI.sendMessage = function(e) {
console.log('messageSend');
const messageTextBox = $('#messageInput');
const message = messageTextBox.val().length > 0 ? encodeURIComponent(messageTextBox.val() + " ") : "";
messageTextBox.val('');
if (message.length > 0) {
console.log(message);
socket.emit(
//'createMessage', { text: '['+encodedText+'<&split>'+messageType.TEXT+']'; }
'createMessage', { text: message }
, 0
);
}
$('#message-form').focus();
$('.message_input_group').focus();
}
//メッセージ送信
$('#messageInput').on('keypress', function(event) {
if (event.which == 13) {
// Enterキーの処理
$('#messageSend').click();
}
});
// 写真アップロード
$('#fileUploadButton').on('click', function() {
console.log('onclickPhoto');
$('#imageInputTag').click();
});
......@@ -226,6 +227,7 @@ $('#fileUploadButton2').on('click', function() {
});
$('#imageInputTag').on('change', function() {
console.log('onchangePhoto');
$('#image-form').submit();
});
......@@ -234,6 +236,7 @@ $('#imageInputTag2').on('change', function() {
});
$('#image-form').on('submit', function(e) {
console.log('onSubmitPhoto');
e.preventDefault();
const imageInputTag = $('#imageInputTag');
const file = imageInputTag.prop('files')[0];
......@@ -545,9 +548,12 @@ $('#pills-confirm-tab').on('shown.bs.tab', function(e) {
});
CHAT_UI.scrollToBottom = function() {
const messages = $('#messages');
const messages = $('.room_contents');
const scrollHeight = messages.prop('scrollHeight');
messages.scrollTop(scrollHeight);
//messages.scrollTop(scrollHeight);
$('html, body').animate({
scrollTop: scrollHeight
}, 500);
};
CHAT_UI.scrollToLastMarkedUnseen = function(value) {
......@@ -817,8 +823,8 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) {
$("#exitRoom").text(getLocalizedString("exitRoom")).append("<i class='fas fa-door-open'></i>")
$("#participants").text(getLocalizedString("participants"))
$("#fileUploadButton").text(getLocalizedString("photo"))
$("#fileUploadButton2").text(getLocalizedString("video"))
//$("#fileUploadButton").text(getLocalizedString("photo"))
//$("#fileUploadButton2").text(getLocalizedString("video"))
$("#okayLabel").text(getLocalizedString("okayLabel"))
$("#completeLabel").text(getLocalizedString("completeLabel"))
......@@ -1111,6 +1117,7 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
CHAT_SOCKET.connectSocket();
console.log('loadMessages] isOnline--');
android.updateMessages(roomId);
socket.emit('exitRoom',roomId);
socket.emit('joinRoom', roomId, roomName, function() {
console.log('loadMessages] Seccess Emit Soket (joinRoom)');
});
......@@ -1159,10 +1166,7 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
});
let obj = jQuery.parseHTML(html);
$('#user_list').append(obj);
messages.forEach(function(message) {
console.log(message);
let template = userMessageTemplate;
if (message.shopMemberId == CHAT.globalLoginParameter.shopMemberId) {
template = myMessageTemplate;
......@@ -1174,21 +1178,23 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
// ユーザの様式を読み込む
if (message.profileUrl) {
message.profileImagePath = CHAT.getProfileImgUrl(message.profileUrl)
message.profileUrl = CHAT.getProfileImgUrl(message.profileUrl)
} else {
message.profileImagePath = CHAT.getProfileImgUrl("")
message.profileUrl = CHAT.getProfileImgUrl("")
}
// #36147
message.message = message.message.toString();
var replacePath = message.message;
replacePath = replacePath.replaceAll('/acms',CHAT_SERVER_URL+'/acms');
replacePath = replacePath.replaceAll('?fileName=','?sid='+CHAT.globalLoginParameter.sid+'&fileName=');
message.message = replacePath;
/* if (message.message contain) {
}*/
let html = Mustache.render(template, {
text: message.message,
from: message.loginId,
shopMemberId: message.shopMemberId,
profileImage: message.profileImagePath,
profileImage: message.profileUrl,
createdAtDay: messageTime.createdAtDay,
createdAtTime: messageTime.createdAtTime
});
......@@ -1214,9 +1220,7 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
// ユーザ削除ボタン表示しない
$("#userSelectionDeleteBtn").hide();
// チャットに遷移する
$('#pills-chat-tab').tab('show');
CHAT_UI.scrollToBottom();
};
......
public_new/js/chat-websocket.js
......@@ -163,12 +163,30 @@ function setSocketAction () {
// New Message
// #36170
socket.on('newMessage', function(message, roomId, roomName) {
let template = $('#message-template').html();
console.log('newMessage');
let messageTime = CHAT_UTIL.formatDate(message.createdAt);
var userMessageTemplate;
$.get({ url: "./template/template_user_message.html", async: false }
, function(text) {
userMessageTemplate = text;
});
var myMessageTemplate;
$.get({ url: "./template/template_my_message.html", async: false }
, function(text) {
myMessageTemplate = text;
});
var systemMessageTemplate;
$.get({ url: "./template/template_system_message.html", async: false }
, function(text) {
systemMessageTemplate = text;
});
let template = userMessageTemplate;
if (message.id === socket.id) {
// ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する
template = $('#message-template-me').html();
template = myMessageTemplate;
}
let messageTime = CHAT_UTIL.formatDate(message.createdAt);
message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath)
try {
......@@ -176,7 +194,9 @@ function setSocketAction () {
} catch(e) {
message.text = message.text
}
var replacePath = message.text;
replacePath = replacePath.replaceAll('?fileName=','?sid='+CHAT.globalLoginParameter.sid+'&fileName=');
message.text = replacePath;
let html = Mustache.render(template, {
text: message.text,
from: message.from,
......@@ -186,12 +206,13 @@ function setSocketAction () {
});
// イメージの場合、img tagを追加する
html = message.text.includes('attachedImages') || message.text.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
console.log(html);
$('#messages').append(html);
// 画像、動画の描画を待ってからスクロール
setTimeout(function () {
CHAT_UI.scrollToBottom();
}, 1500);
}, 300);
});
// Notification
......
public_new/js/chat.js
......@@ -87,17 +87,22 @@ CHAT.createVideoThumbnailAndUpload = function(sourceImage, callback) {
// Ajaxでイメージをアップロードする
CHAT.uploadImage = function(formData) {
console.log('uploadImage');
formData.append('roomId', CHAT.globalLoginParameter.roomId);
formData.append('sid', CHAT.globalLoginParameter.sid);
console.log(formData);
jQuery.ajax({
async: true,
url: CMS_SERVER_URL+"/file/upload",
url: CMS_SERVER_URL+"/chatapi/file/upload",
type: "post",
data: formData,
contentType: false,
processData: false
}).done(function(res) {
// 8
var imgPath = CMS_SERVER_URL + '/file/getImage?fileName=' + res.fileName + '&roomId=' + CHAT.globalLoginParameter.roomId;
console.log('DONE');
console.log(res);
var imgPath = CMS_SERVER_URL + '/chatapi/file/getImage?fileName=' + res.fileName + '&roomId=' + CHAT.globalLoginParameter.roomId;
var imageName = res.fileName
// uploadFileの判断
......@@ -106,11 +111,10 @@ CHAT.uploadImage = function(formData) {
// 画像の処理
if (res.fileType == "jpeg" || res.fileType == "jpg" || res.fileType == "png") {
if (res.thumbnailPath && res.thumbnailPath.length > 0) {
imgPath = CMS_SERVER_URL + '/file/getImage?fileName=' + res.thumbImageFileName + '&roomId=' + CHAT.globalLoginParameter.roomId;
imgPath = CMS_SERVER_URL + '/chatapi/file/getImage?fileName=' + res.thumbImageFileName + '&roomId=' + CHAT.globalLoginParameter.roomId;
imageName = res.thumbImageFileName;
}
let downloadPath = CMS_SERVER_URL + '/file/download?fileName=' + imageName + '&roomId=' + CHAT.globalLoginParameter.roomId;
let downloadPath = CMS_SERVER_URL + '/chatapi/file/download?fileName=' + imageName + '&roomId=' + CHAT.globalLoginParameter.roomId;
// アップロードが終了した後ローディング画面から離れてメッセージをメッセージを転送する
const lightbox = $('<a/>',{href:imgPath, 'data-lightbox':'attachedImages','data-title':imageName});
const image = $('<img/>',{src:imgPath, width:'auto',style:'max-width:100%'});
......@@ -127,6 +131,7 @@ CHAT.uploadImage = function(formData) {
}
socket.emit('createMessage', {
//text: '['+encodedText+'<&split>'+messageType.IMAGE+']'
text: encodedText
}, 1);
......@@ -152,7 +157,7 @@ CHAT.uploadImage = function(formData) {
}
socket.emit('createMessage', {
text: encodedText
text: '['+encodedText+'<&split>'+messageType.VIDEO+']'
}, 1);
}
......
public_new/js/common.js
......@@ -56,8 +56,13 @@ $(function() {
$('.attach_file').addClass('none');
});
$('.message_input_form').focusout(function(){
$('.message_input_form').on('focusout',function(e){
console.log('OUTFOCUS---');
console.log(e);
if($(e.relatedTarget).hasClass('message_input_send')){
CHAT_UI.sendMessage();
}
console.log(e.relatedTarget)
$('.message_input_send').addClass('none');
$('.attach_file').removeClass('none');
});
......
public_new/template/template_my_message.html
<div class="room_right">
<div class="text">{{from}}</div>
<div class="text">{{text}}</div>
<div class="date d-flex flex-column"><span>{{createdAtDay}}</span><span>{{createdAtTime}}</span></div>
<div class="read d-flex align-items-end"><span></span></div>
</div>
\ No newline at end of file
public_new/template/template_user_message.html
<div class="room_left">
<figure>
<a href="#" data-toggle="modal" data-target="#profileModal1"><img src="img/noImage.png" alt="プロフィール画像"></a>
<a href="#" data-toggle="modal" data-target="#profileModal1"><img src="{{profileImage}}" onError="this.src='./img/noImage.png'"></a>
</figure>
<div class="room_left-text">
<div class="name">{{from}}</div>
......
public_new/template/template_user_name_card.html
......@@ -3,7 +3,7 @@
<div class="modal-content">
<div class="modal-header border-0">
<div class="prifile_desc d-flex flex-row">
<img src="{{profileImage}}" onError="this.src='./img/noImage.png'"/>
<img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/>
<div class="prifile_name"><span>{{name}}</span></div>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
......@@ -44,7 +44,7 @@
<span>通話</span>
</div>
</button>
<button type="button" class="border-0 bg_blue">
<button type="button" class="border-0 bg_blue" onclick="CHAT_UI.startChat('{{shopMemberId}}','{{name}}');">
<div class="d-flex flex-column">
<div class="img_wrap">
<img src="icon/icon_profile_chat.png" alt="チャット">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment