import m from 'http://talk.kospo.co.kr:3000/static/bundle/mithril-2.2.2/mithril.js';
import {global} from 'http://talk.kospo.co.kr:3000/static/js/module/variable.js';
import SocketQueue from 'http://talk.kospo.co.kr:3000/static/js/module/queue.js';
import {talkEvent} from 'http://talk.kospo.co.kr:3000/static/js/module/talkEvent.js';
import {
talkInit,
getUser,
getTalkList,
getMoreMessageLine,
getMessageSearch,
getAllContentSearch,
getManual,
getVideoManual,
setTalkMark,
setChatRead,
setITSMSatis,
setSCMSatis,
deleteTalk, getMessageAll,
} from 'http://talk.kospo.co.kr:3000/static/js/module/apis.js';
import {attachUpload} from 'http://talk.kospo.co.kr:3000/static/js/module/attach.js'
import {messageMapping, talkMapping} from "http://talk.kospo.co.kr:3000/static/js/module/render.js";
import {
Carousel,
Dropdown,
Modal,
Tab
} from "http://talk.kospo.co.kr:3000/static/bundle/bootstrap-5.1.3/js/bootstrap.esm.js";
import AWN from "http://talk.kospo.co.kr:3000/static/bundle/awesome-notifications-3.1.1/index.js";
import "http://talk.kospo.co.kr:3000/static/bundle/stompjs-esm/stomp.js";
import SimpleBar from "http://talk.kospo.co.kr:3000/static/bundle/simplebar-6.2.7/simplebar.js";
import Common from "http://talk.kospo.co.kr:3000/static/js/utils.js";
import Hub from "http://talk.kospo.co.kr:3000/static/js/module/hub.js";
import {HubEvent} from "http://talk.kospo.co.kr:3000/static/js/module/hubEvent.js";
import {requestNotificationPermission} from "http://talk.kospo.co.kr:3000/static/js/notification.js";
const default_options = {
url: '',
button: {},
container: {},
serviceWorkerLocation: '',
}
class Talk {
constructor(options) {
global.option = Common.mergeObject(options, default_options)
/*서비스워커 윈도우 클라이언트 특정 하기 위한 url 맵핑*/
if(options.url !== '' && options.url !== undefined) {
global.currentUrl = options.url;
} else {
global.currentUrl = window.location.href;
}
if (global.option.workId) global.currentWorkId = global.option.workId;
global.apiUrl = "http://talk.kospo.co.kr:3000";
// global.apiUrl = "http://kisp.kospo.co.kr:8010";
// 현재탭의 고유 아이디 생성
global.tabId = talkEvent.generateTabUUID()
// 헬프톡 브라우저 위치 설정
if (global.option.position === 'br') {
global.option.vertical = 'bottom';
global.option.horizontal = 'right'
} else if (global.option.position === 'bl') {
global.option.vertical = 'bottom';
global.option.horizontal = 'left'
} else if (global.option.position === 'tr') {
global.option.vertical = 'top';
global.option.horizontal = 'right'
}
if (global.option.position === 'tl') {
global.option.vertical = 'top';
global.option.horizontal = 'left'
}
// api 호출 공통 로직 재정의
global.request = (options) => {
options.url = `${global.apiUrl}${options.url}`
if (global.option.encSabun) {
options.headers = {
"Authentication": global.option.encSabun
};
}
return m.request(options)
}
global.queue = new SocketQueue()
}
/*잠금화면으로 이동안하도록 조치*/
async requestWakeLock() {
try {
if ('wakeLock' in navigator) {
const wakeLock = await navigator.wakeLock.request('screen')
console.log('wake lock is active', wakeLock)
}
} catch(e) {
console.log(e)
}
}
/*메시지 전송후 소켓 통신이 없을시 재접속 로직*/
checker() {
if(global.checker.flag) {
const currentTalkId = localStorage.getItem(global.tabId);
console.log(new Date() - global.checker.inDate)
if(new Date() - global.checker.inDate > 3000) {
HubEvent.kill(global.talkParams({
type: 'KILL',
channelSabun: global.user.sabun
}))
talkEvent.allUnsubscribe();
global.registration.unregister();
global.checker.flag = false;
global.checker.inDate = '';
global.currentServer = '';
global.talkData = [];
Common.sleep(200).then(() => {
global.hub = new Hub()
/*서비스워커 설치*/
global.hub.install().then(() => {
/* 서비스워커 서버로 연결 */
global.hub.start();
/* 마스터는 소켓 접속 및 톡방 리스트 호출 */
talkEvent.connect().then(() => {
// 참여중인 톡방 호출 및 구독
try {
getTalkList(true).then(async (isEmpty) => {
if (!isEmpty) {
getMessageAll(true).then(() => {
const cacheTalk = global.talkData.filter((talk) => talk.talkId === currentTalkId)[0];
messageMapping(currentTalkId, cacheTalk.talkMessages, 'before', true)
})
}
});
} catch (e) {
window.location.reload()
}
// 서버측에 HUB 정보 저장
HubEvent.start(global.talkParams({
type: 'START',
tabId: global.tabId
}))
// 다른탭에 연결 된 소켓이 있다면 종료 명령
HubEvent.send(global.talkParams({
type: 'UNSUBSCRIBE',
tabId: global.tabId
}))
/// 개인 사번 소켓 연결
try {
global.subscribeList[global.user.sabun] = talkEvent.userSubscribe();
} catch (e) {
}
// 업무별 소켓 연결
try {
global.subscribeList[global.work.workId] = talkEvent.workSubscribe();
} catch (e) {
}
})
}).catch(() => {
});
})
}
}
}
// 헬프톡 실행
run() {
return new Promise(async (resolve, reject) => {
if ('serviceWorker' in navigator) {
//사용자 정보 조회
await getUser()
if (global.user !== null) {
// const getUrl = new URL(window.location.href);
// global.requestParams = getUrl.searchParams\
const $root = document.createElement('div')
$root.style.display = 'none';
$root.classList.add('chat-root')
$root.setAttribute('id', 'chat-area')
document.body.append($root)
/*html 주입*/
this.#htmlInjection();
/*현재 접속 업무 정보 조회*/
talkInit();
global.hub = new Hub()
/*서비스워커 설치*/
global.hub.install().then(() => {
/* 서비스워커 서버로 연결 */
global.hub.start();
/* 마스터는 소켓 접속 및 톡방 리스트 호출 */
talkEvent.connect().then(() => {
// 참여중인 톡방 호출 및 구독
try {
getTalkList(true).then(async (isEmpty) => {
if (!isEmpty) {
getMessageAll(true)
}
});
} catch (e) {
window.location.reload()
}
// 서버측에 HUB 정보 저장
HubEvent.start(global.talkParams({
type: 'START',
tabId: global.tabId
}))
// 다른탭에 연결 된 소켓이 있다면 종료 명령
HubEvent.send(global.talkParams({
type: 'UNSUBSCRIBE',
tabId: global.tabId
}))
/// 개인 사번 소켓 연결
try {
global.subscribeList[global.user.sabun] = talkEvent.userSubscribe();
} catch (e) {
}
// 업무별 소켓 연결
try {
global.subscribeList[global.work.workId] = talkEvent.workSubscribe();
} catch (e) {
}
resolve();
/* 전체 로딩 완료시 상태 변경(
다른탭에서 구독 해제 메시지 방지용
위 설정 빠르게 처리 될때 대비 2초 뒤에 상태 변경
) */
setTimeout(() => {
global.init = true;
}, 1500)
})
const open = () => {
$root.style.display = 'block';
}
// 모든 설정 정의 된후 버튼 활성화
setTimeout(open, 1000)
// 웹페이지 notication 설정
const globalOptions = {
position: 'top-right',
labels: {
alert: ''
}
}
global.notifier = new AWN(globalOptions);
}).catch(() => {
});
} else {
console.log('유지보수자 접근 불가')
reject();
}
}
setInterval(this.checker, 1000)
})
}
// 운영 배포시 삭제
getGlobal() {
return global;
}
async #htmlInjection() {
const docReady = (fn) => {
// see if DOM is already available
if (global.shadowRoot.readyState === 'loading') {
global.shadowRoot.addEventListener('DOMContentLoaded', fn);
} else {
setTimeout(fn, 1);
}
};
const errorPage = m('div', {
class: 'server-error cus-hide'
}, [
m('div', {class: 'server-error-wrapper'}, [
m('div', {class: 'server-error-body'}, [
m('p', '서버 오류로 인하여 중단 되었어요.'),
m('p', '유지보수 담당자에게 연락주세요.')
])
])
]);
const socketErrorPage = m('div', {
class: 'socket-error cus-hide'
}, [
m('div', {class: 'server-error-wrapper'}, [
m('div', {class: 'server-error-body'}, [
m('p', '이런, 오류가 발생했어요.'),
m('p', '아래 재시작버튼을 눌러 다시 시작해주세요.'),
m('button', {class: 'btn btn-primary', id: 'socket-reset-btn'}, '재시작')
])
])
]);
const notificationPermission = m('div', {
id: 'noti-permission-card',
class: 'card mt-1',
style: 'background-color:var(--falcon-low-purple-hover) !important; color:white;'
}, [
m('div', {class: 'card-body'}, [
m('div', {id: 'intro-title'}, [
m('i', {
class: "bi bi-bell-fill",
style: "font-size:1.1em;padding-right:10px;"
}),
m('span', {class: 'fw-bold'}, '브라우저 알림을 받아보세요!'),
m('button', {class: 'btn btn-sm btn-primary', id: 'noti-permission-btn'}, '사용하기')
])
])
])
const main = m('div', {
class: 'tab-pane fade cus-show active',
id: 'intro',
role: "tabpanel",
style: 'padding: 10px 13px 10px 13px!important;',
'aria-labelledby': "intro-tab"
}, [
Notification.permission === 'default' ? notificationPermission : '',
m('div', {class: 'card mt-1'}, [
m('div', {class: 'card-body'}, [
m('div', {id: 'intro-title'}, [
m('span', {id: 'intro-user'}),
m('span', '님'),
m('br'),
m('span', '궁금한 점을 질문해주세요.'),
m('br'),
m('span', {id: 'intro-work'}),
m('span', ' 관련 모든 문의를 지원합니다.'),
m('br'),
m('span', '질문, 요청사항 아래 문의하기를 눌러주세요.')
]),
m('div', {class: "pt-3 pb-1", style: "display:flex; margin:0px auto; justify-content: center"}, [
m('button', {
type: "button",
id: "chat-inquiry",
class: "btn form-control",
}, [
m('i', {
class: "bi bi-send-fill",
style: "font-size:1.1em; padding-right:5px;border-radius:20px;"
}),
m('span', '문의하기')
]),
]),
m('div', {id: 'intro-online'}, '')
])
]),
m('div', {class: 'card mt-4'}, [
m('div', {class: 'card-header pb-0'}, [
m('h5-6', {class: 'fw-bold'}, '자주 찾는 질문')
]),
m('div', {class: "card-body", id: "question"})
]),
m('div', {class: 'card mt-4'}, [
m('div', {class: "card-body"}, [
m('div', {
id: "manual-play",
class: "carousel slide carousel-fade",
'data-bs-ride': "carousel",
style: 'min-height:100px;'
}, [
m('div', {class: 'carousel-inner'}, [])
])
])
])
])
const chat = m('div', {
class: "tab-pane fade",
id: "chat",
style: 'padding: 0px !important; ',
role: "tabpanel",
'aria-labelledby': "chat-tab"
}, [
m('div', {class: "card card-chat overflow-hidden", style: "height: 580px;"}, [
m('div', {class: "card-body d-flex p-0 h-100"}, [
m('div', {class: "chat-sidebar", style: "left: 0px;"}, [
m('div', {class: "contacts-list scrollbar-overlay"}, [
m('div', {
id: "chat-list",
class: "nav nav-tabs border-0 flex-column",
role: "tablist",
'aria-orientation': "vertical"
})
])
]),
m('div', {class: 'tab-content card-chat-content'}, [
m('div', {
class: "tab-pane card-chat-pane",
id: "chat-0",
role: "tabpanel",
'aria-labelledby': "chat-link-0",
style: 'display:block;'
}, [
m('div', {class: "chat-content-header"}, [
m('div', {id: "chat-content-header-main", class: "row flex-between-center"}, [
m('div', {class: 'col-8 col-sm-8 d-flex align-items-center'}, [
m('button', {class: "pe-3 text-700 contacts-list-show bg-transparent", type: "button"}, [
m('i', {class: "bi bi-chevron-left bi-color-grey"})
]),
m('div', {class: "min-w-0"}, [
m('h5', {class: 'mb-0 text-truncate fs-9', id: 'work-nm'}),
m('div', {class: "fs-10 text-400 status-online", id: "work-sm-nm"})
])
]),
m('div', {class: "col-4 col-sm-4 d-flex justify-content-end"}, [
m('i', {
id: "chat-option",
class: "bi bi-three-dots-vertical bi-color-grey dropdown-toggle",
style: "font-size:1.6em",
'data-toggle': 'dropdown',
'aria-haspopup': 'true',
'aria-expanded': 'false'
}),
m('div', {
class: 'dropdown-menu chat-option-menu',
'aria-labelledby': '#chat-option'
}, [
m('div', {id: 'chat-content-search', class: 'dropdown-item'}, '검색'),
m('div', {id: 'chat-content-font', class: 'dropdown-item'}, '설정'),
])
]),
// m('div', {class: "col-4 col-sm-4 d-flex justify-content-end"}, [
// m('i', {
// id: "chat-content-search",
// class: "bi bi-search bi-color-grey",
// style: "font-size:1.6em"
// })
// ])
]),
m('div', {id: "chat-content-header-sub", class: "row flex-between-center cus-hide"}, [
m('div', {class: 'input-group'}, [
m('div', {id: 'chat-search-tot', "data-tot": "0/0"}),
m('input', {
type: "text",
id: "chat-search-text",
placeholder: '채팅 검색',
'aria-label': "search content",
}),
m('div', {
class: 'input-group-divider left'
}),
m('button', {
class: "btn btn-sm chat-file-upload shadow-none",
type: "button"
}, [
m('i', {
id: 'chat-search-prev',
class: 'bi bi-chevron-up bi-color-grey'
}),
]),
m('button', {
class: "btn btn-sm chat-file-upload shadow-none",
type: "button",
}, [
m('i', {
id: 'chat-search-next',
class: 'bi bi-chevron-down bi-color-grey'
}),
]),
])
])
]),
m('div', {class: 'chat-content-body'}, [
m('div', {id: "chat-content", class: "chat-content-scroll-area scrollbar-overlay"})
])
]),
m('div', {class: 'message-preview cus-hide'}, [
m('div', {class: 'preview-wrap d-flex justify-content-between'}, [
m('div', {class: 'msg'}, ''),
m('i', {class: 'bottom-scroll-icon bi bi-arrow-down-circle-fill bi-color-white'})
]),
]),
m('form', {class: 'chat-editor-area'}, [
m('div', {class: 'input-group'}, [
m('button', {
class: "btn btn-sm chat-file-upload shadow-none",
id: "chat-upload-btn",
type: "button",
style: "padding-left:10px;padding-right:0px;"
}, [
m('i', {class: "bi bi-paperclip bi-color-grey"})
]),
m('div', {
class: 'input-group-divider right'
}),
m('div', {
class: "chat-editor outline-none",
contenteditable: "true",
placeholder: "메시지 작성 (ctrl+엔터 줄바꿈)"
}),
m('div', {
class: 'input-group-divider left'
}),
m('button', {
class: "btn btn-sm btn-send shadow-none",
type: "button",
style: "padding-left:0px;padding-right:0px;"
}, [
m('i', {class: 'bi bi-send bi-color-grey'})
]),
]),
// m('button', {
// class: "btn btn-sm chat-file-upload shadow-none",
// id: "chat-upload-btn",
// type: "button",
// style: "padding-right:10px;"
// }, [
// m('i', {class: "bi bi-paperclip bi-color-grey"})
// ]),
// m('div', {
// class: "chat-editor outline-none",
// contenteditable: "true",
// placeholder: "메시지 작성 (ctrl+엔터 줄바꿈)"
// }),
// m('button', {
// class: "btn btn-sm btn-send shadow-none",
// type: "button",
// style: "padding-left:10px;"
// }, [
// m('i', {class: 'bi bi-send bi-color-grey'})
// ]),
m('input', {
class: "d-none",
type: "file",
id: "chat-file-upload",
multiple: "multiple",
accept: 'image/*, .xls, .xlsx, .doc, .docx, .hwp, .pdf, .txt, .pdf, .ppt, .zip, .egg'
}),
])
]),
])
])
])
const allSearchEmpty = m('div', {style: 'font-size:var(--chat-content-font-size); text-align:center;'}, '조회된 내용이 없어요');
const search = m('div', {
class: "tab-pane fade ",
id: "search",
role: "tabpanel",
style: 'padding: 10px 13px 10px 13px !important;',
'aria-labelledby': "search-tab"
}, [
m('div', {class: 'card mt-1'}, [
m('div', {class: 'card-body'}, [
m('div', {class: 'row justify-content-between'}, [
m('h5-6', {
class: 'form-label h6 col-5 search-label fw-bold',
for: 'chat-all-search-text'
}, '통합검색'),
m('div', {class: 'col-7 search'}, [
m('input', {
id: 'chat-all-search-text',
type: "text",
class: "form-control bg-white search-control",
placeholder: "전체 채팅 검색"
}),
])
]),
m('div', {
class: 'scrollbar-overlay mt-3',
id: 'chat-all-search-list',
style: 'min-height:30px; max-height: 150px;'
}, [
allSearchEmpty
])
])
]),
m('div', {class: 'card mt-4'}, [
m('div', {class: 'card-body'}, [
m('div', {class: 'row justify-content-between', style: 'margin-bottom:10px;'}, [
m('h5-6', {class: 'form-label h6 col-5 search-label fw-bold', for: 'manual-doc-text'}, '매뉴얼'),
m('div', {class: 'col-7 search'}, [
m('input', {
id: 'manual-doc-text',
type: "text",
class: "form-control bg-white search-control",
placeholder: "매뉴얼 검색"
}),
])
]),
m('div', {class: 'row justify-content-start manual-header'}, [
m('div', {class: 'col-7 p-0'}, '파일명'),
m('div', {class: 'col-2 p-0 text-sm-end'}, '버전'),
m('div', {class: 'col-3 p-0 text-sm-end'}, '다운로드')
]),
m('div', {
class: 'scrollbar-overlay mt-2',
id: 'manual-doc-body',
style: 'min-height:100px; max-height: 170px;'
})
])
]),
m('div', {class: 'card mt-4'}, [
m('div', {class: 'card-header pb-0'}, [
m('div', {class: 'row justify-content-between'}, [
m('h5-6', {
class: 'form-label h6 col-5 search-label fw-bold',
for: 'manual-video-text'
}, '동영상 매뉴얼'),
m('div', {class: 'col-7 search'}, [
m('input', {
id: 'manual-video-text',
type: "text",
class: "form-control bg-white search-control",
placeholder: "동영상 검색"
}),
])
]),
]),
m('div', {class: 'card-body'}, [
m('div', {
class: 'scrollbar-overlay cus-show',
id: 'manual-video-body',
style: 'min-height:170px; max-height: 210px;'
}),
m('div', {
id: 'manual-video-play',
class: 'cus-hide',
style: 'min-height:130px; position:absolute; left:0px; top:50px;'
}, [
m('video', {id: 'manual-video', controls: true, autoplay: true}, [
/* url 재정의 필요 */
m('source', {'src': ``})
]),
m('div', {id: 'manual-video-back'}, [
m('i', {class: 'bi bi-arrow-left-short cursor-pointer'})
])
])
])
]),
])
const nav = m('nav', {
class: "navbar chat-navbar navbar-light navbar-expand fixed-bottom shadow",
style: "background-color:var(--falcon-low-purple); border-top-right-radius: 0px; border-top-left-radius: 0px;"
}, [
m('ul', {class: "nav nav-justified w-100", id: "myTab", role: "tablist"}, [
m('li', {class: "nav-item active", role: "presentation"}, [
m('button', {
class: "nav-link active",
id: "intro-tab",
'data-bs-toggle': "tab",
'data-bs-target': "#intro",
type: "button",
role: "tab",
'aria-controls': "intro",
'aria-selected': "true",
style: 'position:relative; padding-top:0;'
}, [
m('i', {class: 'bi bi-house-door bi-md'}),
m('label', {class: 'nav-item-label'}, '홈')
])
]),
m('li', {class: "nav-item", role: "presentation"}, [
m('button', {
class: "nav-link",
id: "chat-tab",
'data-bs-toggle': "tab",
'data-bs-target': "#chat",
type: "button",
role: "tab",
'aria-controls': "chat",
'aria-selected': "false",
style: 'position:relative; padding-top:0;'
}, [
m('i', {class: 'bi bi-chat-dots bi-md'}),
m('label', {class: 'nav-item-label'}, '채팅')
])
]),
m('li', {class: "nav-item", role: "presentation"}, [
m('button', {
class: "nav-link",
id: "search-tab",
'data-bs-toggle': "tab",
'data-bs-target': "#search",
type: "button",
role: "tab",
'aria-controls': "chat",
'aria-selected': "false",
style: 'position:relative; padding-top:0;'
}, [
m('i', {class: 'bi bi-book bi-md'}),
m('label', {class: 'nav-item-label'}, '메뉴얼')
])
]),
])
])
const modal = m('div', {
class: "modal fade",
id: "imageModal",
'data-bs-keyboard': "false",
tabindex: "-1",
"aria-labelledby": "staticBackdropLabel",
"aria-hidden": "false"
}, [
m('div', {
class: "modal-dialog modal-dialog-centered modal-xxl",
style: 'margin:0px auto;justify-content:center;'
}, [
m('div', {class: "modal-content", style: 'border:0px; width:auto; margin-left:5%; margin-right:5%;'}, [
m('div', {class: "modal-body"}, [])
])
]),
])
const info = m('div', {class: 'chat-confirm-wrapper chat-delete-confirm-wrapper cus-hide'}, [
m('div', {class: 'chat-confirm-fixed'}, [
m('div', {class: 'card'}, [
m('div', {class: 'card-body', style: 'text-align:center;'}, [
m('p', {class: 'chat-confirm-title'}, '대화를 삭제하시면 더이상 내용(진행상태) 확인을 할 수 없어요.\n 그래도 삭제 할까요?'),
m('button', {class: 'btn btn-sm chat-confirm-btn chat-delete-btn'}, '대화 삭제하기')
])
]),
m('div', {class: 'chat-confirm-cancel cursor-pointer'}, 'x')
])
])
const upload = m('div', {class: 'chat-confirm-wrapper chat-upload-confirm-wrapper cus-hide'}, [
m('div', {class: 'chat-confirm-fixed'}, [
m('div', {class: 'card'}, [
m('div', {class: 'card-body', style: 'text-align:center;'}, [
m('p', {class: 'chat-confirm-title'}, '이미지 또는 파일을 첨부해 주세요.'),
m('div', {class: 'p-1'}, [
m('button', {class: 'btn btn-sm chat-confirm-btn chat-file-upload-btn'}, '파일 첨부하기'),
]),
])
]),
m('div', {class: 'chat-confirm-cancel cursor-pointer'}, 'x')
])
])
const paste = m('div', {class: 'chat-confirm-wrapper chat-clipboard-confirm-wrapper cus-hide'}, [
m('div', {class: 'chat-confirm-fixed'}, [
m('div', {class: 'card'}, [
m('div', {class: 'card-body', style: 'text-align:center;'}, [
m('div', {class: ''}, [
m('img', {src: '', class: 'chat-clipboard-img'})
]),
m('p', {class: 'chat-confirm-title pt-2'}, '클립보드 이미지를 업로드 할까요?'),
m('div', {class: 'p-1'}, [
m('button', {class: 'btn btn-sm chat-confirm-btn chat-clipboard-btn'}, '업로드'),
]),
])
]),
m('div', {class: 'chat-confirm-cancel cursor-pointer'}, 'x')
])
])
const fontResize = m('div', {class: 'chat-confirm-wrapper chat-font-confirm-wrapper cus-hide'}, [
m('div', {class: 'chat-confirm-fixed', style: 'bottom: 330px !important;'}, [
m('div', {class: 'card'}, [
m('div', {class: 'card-body', style: 'text-align:center;'}, [
m('div', {class: 'resize-body'}, [
m('div', '대화방의 글자 크기가 아래와 같이 변경되요.'),
m('div', {class: 'pb-3'}, '슬라이드를 움직여 크기를 조절해보세요.'),
m('div', {
class: 'pb-3 sample-text chat-content-custom-font-size',
'style': `font-size: ${Common.getCookie('fontSize')}px;`
}, '안녕하세요.'),
m('input', {
type: 'range',
class: 'form-range',
min: '14',
max: '26',
step: '1',
value: `${Common.getCookie('fontSize') ?? 14}`,
id: 'resize-font'
})
]),
m('div', {class: 'p-1'}, [
m('button', {class: 'btn btn-sm chat-confirm-btn chat-font-btn'}, '저장'),
]),
])
]),
m('div', {class: 'chat-confirm-cancel cursor-pointer'}, 'x')
])
])
const rating = m('div', {class: 'chat-confirm-wrapper chat-rating-confirm-wrapper cus-hide'}, [
m('div', {class: 'chat-confirm-fixed'}, [
m('div', {class: 'card'}, [
m('div', {class: 'card-body', style: 'text-align:center;'}, [
m('p', {class: 'text-pre-wrap'}, '상담이 종료되었어요.\n' +
'만약 요청주신 작업이 있으시다면\n' +
'작업처리 후 알려드릴 예정이에요.\n' +
'이번 상담이 만족스러우셨나요?\n' +
'(최소 10점, 최대 100점까지 클릭)'),
m('div', {class: "star-rate", "data-val": "5", 'data-max': '5'}, [
m('span', {'class': 'cont m-1l'}, [
m('span', {'class': 'ctrl'}),
m('i', {'class': 'bi bi-star-fill'}),
m('i', {'class': 'bi bi-star-fill'}),
m('i', {'class': 'bi bi-star-fill'}),
m('i', {'class': 'bi bi-star-fill'}),
m('i', {'class': 'bi bi-star-fill'})
]),
]),
m('p', {class: 'text-pre-wrap'}, '개선점이나 칭찬할 부분이 있으신가요?\n' +
'아래에 내용을 작성해주세요.'),
m('div', [
m('textarea', {class: 'form-control', id: 'review'})
]),
m('div', {class: 'pt-3'}, [
m('button', {class: 'btn btn-sm chat-confirm-btn chat-rating-btn'}, '저장'),
]),
])
]),
m('div', {class: 'chat-confirm-cancel cursor-pointer'}, 'x')
])
])
const fullscreen = m('div', {id: 'fullscreen-container', class: 'cus-hide'});
const detail = m('div', {id: 'detail-container', class: 'cus-hide'}, [
m('iframe', {frameborder:0, align:'center', src:''}),
m('div', {id:'detail-close'}, [
m('i', {class: "bi bi-x-lg bi-color-grey",}),
])
]);
const loading = m('div', {class: 'loading-wrap cus-hide'}, [
m('div', {
class: 'fade',
style: 'width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-color: black;z-index: 1111111;opacity: 0.4;'
}),
m('div', {
class: 'loading-indicator',
style: 'position: absolute; width: 100%;height: 100%;z-index: 10;top: 45%;left: 45%;'
}, [
m('span', {
class: "spinner-border",
role: "status",
'aria-hidden': "true",
style: "width: 3rem; height: 3rem;"
}),
])
])
const floatingBtnStyle = `cursor:grab;${global.option.vertical === 'bottom' ? 'bottom:' + global.option.button.offsetY + 'px;' : 'top:' + global.option.button.offsetY + 'px;'} ${global.option.horizontal === 'right' ? 'right:' + global.option.button.offsetX + 'px;' : 'left:' + global.option.button.offsetX + 'px;'}`
const floatingBtn = m('div', {class: 'chat-floating-btn', style: floatingBtnStyle}, [
m('i', {class: 'bi-msg-icon bi-color-low-purple'}, [
m('span', {
class: 'position-absolute top-8-px start-100 translate-middle badge unread rounded-pill bg-danger cus-hide',
style: '--falcon-badge-font-size: 0.57em;'
}, [
m.trust(),
m('span', {class: 'visually-hidden'}, '미확인 메시지')
])
])
])
const css = [
m('link', {
rel: 'stylesheet',
href: 'http://talk.kospo.co.kr:3000/static/bundle/bootstrap-5.1.3/css/bootstrap.min.css'
}),
m('link', {
rel: 'stylesheet',
href: 'http://talk.kospo.co.kr:3000/static/bundle/bootstrap-icon-1.11.3/bootstrap-icons.css'
}),
m('link', {
rel: 'stylesheet',
href: 'http://talk.kospo.co.kr:3000/static/bundle/simplebar-6.2.7/simplebar.min.css'
}),
m('link', {
rel: 'stylesheet',
href: 'http://talk.kospo.co.kr:3000/static/bundle/awesome-notifications-3.1.1/style.css'
}),
m('link', {rel: 'stylesheet', href: 'http://talk.kospo.co.kr:3000/static/css/theme.css'}),
m('link', {rel: 'stylesheet', href: 'http://talk.kospo.co.kr:3000/static/css/imp.css'}),
]
let floatingBodyStyle = `${global.option.vertical === 'bottom' ? 'bottom:' + global.option.container.offsetY + 'px;' : 'top:' + global.option.container.offsetY + 'px;'} right:${global.option.container.offsetX}px`
if (global.option.horizontal === 'left') {
floatingBodyStyle = `bottom:${global.option.container.offsetY}px; left:${global.option.container.offsetX}px`
}
const floatingBody = m('div', {class: 'chat-floating cus-hide', style: floatingBodyStyle}, [
m('div', {class: 'tab-content chat-content', id: 'chat-tab-content'}, [
main,
chat,
search,
info,
upload,
paste,
fontResize,
rating,
m('iframe', {name: '_download_', style: 'display:none; visibility:hidden;'})
]),
nav,
loading,
errorPage,
socketErrorPage
])
const chatArea = document.querySelector('#chat-area');
global.shadowRoot = chatArea.attachShadow({mode: 'closed'});
const allHtml = m('body', [m('head', css), floatingBtn, floatingBody, modal, fullscreen, detail]);
m.render(global.shadowRoot, allHtml)
/*아이콘 이미지 색상 변경*/
if (global.option.button.color !== null) document.documentElement.style.setProperty('--chat-main-icon', global.option.button.color)
if (global.option.button.hoverColor !== null) document.documentElement.style.setProperty('--chat-main-icon-hover', global.option.button.hoverColor)
if (global.option.container.offsetY !== null) document.documentElement.style.setProperty('--chat-confirm-fixed-height', `${global.option.container.offsetY + 70}px`)
/*전체 색상 변경*/
if (global.option.container.color !== null) document.documentElement.style.setProperty('--falcon-low-purple', global.option.container.color)
if (global.option.container.hoverColor !== null) document.documentElement.style.setProperty('--falcon-low-purple-hover', global.option.container.hoverColor)
if (global.option.container.activeColor !== null) document.documentElement.style.setProperty('--falcon-purple', global.option.container.activeColor)
/*쿠키에 설정된 채팅방 폰트 사이즈 변경*/
const getContentFontSize = Common.getCookie('fontSize') ?? 14;
document.documentElement.style.setProperty('--chat-content-custom-font-size', `${getContentFontSize}px`)
/*톡방 메시지 엘리먼트 변수*/
global.element.chatSidebar = global.shadowRoot.querySelector('.chat-sidebar');
global.element.chatEditor = global.shadowRoot.querySelector('.chat-editor');
global.element.chatEditorArea = global.shadowRoot.querySelector('.chat-editor-area')
global.element.btnSend = global.shadowRoot.querySelector('.btn-send');
global.element.currentChatArea = global.shadowRoot.querySelector('.chat-content-scroll-area');
/*대화방 내용 검색 기능 엘리먼트 변수*/
const $contentSearch = global.shadowRoot.querySelector('#chat-content-search');
const $contentSearchText = global.shadowRoot.querySelector('#chat-search-text');
const $contentSearchPrev = global.shadowRoot.querySelector('#chat-search-prev');
const $contentSearchNext = global.shadowRoot.querySelector('#chat-search-next');
const $contentSearchSub = global.shadowRoot.querySelector('#chat-content-header-sub');
const $contentSearchTot = global.shadowRoot.querySelector('#chat-search-tot')
/*메뉴 탭*/
const $myTab = global.shadowRoot.querySelector('#myTab');
/*알림 권한 버튼*/
const $notiPermission = global.shadowRoot.querySelector('#noti-permission-btn')
/*채팅 활성화 버튼*/
const $chatFloatingBtn = global.shadowRoot.querySelector('.chat-floating-btn')
const $chatScrollDownBtn = global.shadowRoot.querySelector('.bottom-scroll-icon');
/* 문의 하기 버튼 */
const $chatInquiry = global.shadowRoot.querySelector('#chat-inquiry')
const $manualPlaying = global.shadowRoot.querySelector('#manual-play');
let $carousel = null;
/* 파일 관련 엘리먼트 */
const $chatUploadBtn = global.shadowRoot.querySelector('#chat-upload-btn');
const $chatFileUploadBtn = global.shadowRoot.querySelector('.chat-file-upload-btn')
const $chatFileUpload = global.shadowRoot.querySelector('#chat-file-upload')
/* 클립보드 관련 엘리먼트 */
const $chatClipboardBtn = global.shadowRoot.querySelector('.chat-clipboard-btn');
/* 폰트 사이즈 수정 엘리먼트 */
const $chatContentFont = global.shadowRoot.querySelector('#chat-content-font');
const $resizeFont = global.shadowRoot.querySelector('#resize-font');
const $resizeSample = global.shadowRoot.querySelector('.sample-text');
const $chatFontBtn = global.shadowRoot.querySelector('.chat-font-btn');
/*평가*/
const $chatRating = global.shadowRoot.querySelector('.star-rate');
const $chatRatingCtrl = $chatRating.querySelector('.star-rate span.ctrl');
const $chatRatingBtn = global.shadowRoot.querySelector('.chat-rating-btn');
const $chatRatingReview = global.shadowRoot.querySelector('#review');
/*세번째 탭 전체 검색 엘리먼트*/
const $chatAllSearchText = global.shadowRoot.querySelector('#chat-all-search-text');
const $chatAllSearchList = global.shadowRoot.querySelector('#chat-all-search-list');
/*세번째 탭 매뉴얼 검색*/
const $manualDocText = global.shadowRoot.querySelector('#manual-doc-text');
const $manualDocBody = global.shadowRoot.querySelector('#manual-doc-body');
/*세번째 탭 동영상 매뉴얼 검색*/
const $manualVideoText = global.shadowRoot.querySelector('#manual-video-text');
const $manualVideoBody = global.shadowRoot.querySelector('#manual-video-body');
/*채팅방내 엘리먼트*/
// 설정 드랍다운
let $contentDropdownOption;
const $contentOption = global.shadowRoot.querySelector('#chat-option');
const $contentOptionShow = global.shadowRoot.querySelector('.bi-three-dots-vertical');
/* 자세히 보기 설정 */
const $detailClose = global.shadowRoot.querySelector('#detail-close');
/*첨부파일 변수 정의*/
let $files = [];
/*타이핑 여부*/
let $typedFlag = false;
/*내용 검색 관련 변수*/
let lines = [];
let lines_idx = 0
if ($notiPermission) {
$notiPermission.addEventListener('click', async function () {
const permission = await requestNotificationPermission();
if (permission === 'granted') {
const notiCard = global.shadowRoot.querySelector('#noti-permission-card')
notiCard.remove();
allHtml.children[2].children[0].children[0].children.splice(0, 1)
}
})
}
/*bootstrap 수동 이벤트 설정*/
/*메뉴 탭 선택시 색상*/
$myTab.querySelectorAll('button[data-bs-toggle="tab"]').forEach(function (el) {
el.addEventListener('click', function (e) {
const tabTrigger = new Tab(e.currentTarget);
e.preventDefault();
if (!e.currentTarget.classList.contains('active')) {
tabTrigger.show();
$myTab.querySelectorAll('button[data-bs-toggle="tab"]').forEach(function (li) {
li.classList.remove('active');
li.parentNode.classList.remove('active');
})
e.currentTarget.classList.add('active');
e.currentTarget.parentNode.classList.add('active')
/*현재 톡방 진입되어 있을시 뒤로가기 처리*/
if (e.currentTarget.getAttribute("id") !== 'chat-tab') {
const chatBack = global.shadowRoot.querySelector('.contacts-list-show');
chatBack.click();
/*검색 닫기*/
global.searchClose();
}
/*홈 화면 매뉴얼 동영상 제어 */
const activePlay = $manualPlaying.querySelector('.active');
if (activePlay) {
const play = activePlay.querySelector("video")
if (e.currentTarget.dataset.bsTarget === '#intro') {
if (play) play.play()
$carousel.cycle();
} else {
if (play) play.pause()
$carousel.pause();
}
}
}
})
})
// 새로고침 이벤트 (untyped 메시지 전송, 로컬스토리지 제거, 쿠키 정보 삭제)
window.addEventListener('beforeunload', function (e) {
unload()
});
function unload() {
console.log('beforeunload')
/*현재 탭이 소켓 연결 되어 있으면 다른탭으로 소켓 전달*/
if (Common.isMaster()) {
HubEvent.sendSetMaster(global.talkParams({
type: 'SEND_SET_MASTER'
}))
}
/* 서버 서비스워커 연결 해제*/
HubEvent.close({
type: 'TAB_CLOSE',
tabId: global.tabId,
url: global.apiUrl,
sabun: global.user.sabun,
channelSabun: global.user.sabun,
site: global.currentUrl
});
/* 로컬 스토리지에 저장 되어 있는 탭정보 제거 */
const talkId = localStorage.getItem(global.tabId);
const workId = localStorage.getItem('workId');
localStorage.removeItem(global.tabId)
localStorage.removeItem('workId')
try {
/* 메시지 작성 내용이 없을시 해당 톡방 제거 */
const currentTalk = global.talkData.filter((talk) => talk.talkId === talkId)[0];
if (currentTalk.lastMessage === null || currentTalk.lastMessage === '') {
talkEvent.leave(global.talkParams({
type: "LEAVE",
talkId: talkId,
workId: global.work.workId,
}))
}
if(talkId !== null || talkId !== '') {
/* 작성중인 메시지가 있을시 타이핑 메시지 해제 */
talkEvent.send(global.talkParams({
type: "UNTYPED",
talkId: talkId,
workId: workId
}))
}
} catch (e) {
}
talkEvent.allUnsubscribe()
global.hub.stop();
}
// 톡방 뒤로가기 클릭시 이벤트
const chatBack = global.shadowRoot.querySelector('.contacts-list-show');
chatBack.addEventListener('click', function () {
const talkId = localStorage.getItem(global.tabId);
// const workId = localStorage.getItem('workId');
// talkEvent.send(global.talkParams({
// type: "UNTYPED",
// talkId: talkId,
// workId: workId
// }))
// 톡방 옵션 자동 닫기
if ($contentDropdownOption) $contentDropdownOption.hide();
// 채팅목록 하이라이트 자동 제거
/*
*메시지 작성 내용이 없을시 해당 톡방 제거
*이미 삭제된 톡방 예외 처리
*/
const currentTalk = global.talkData.filter((talk) => talk.talkId === talkId)[0];
if(currentTalk) {
try {
if (currentTalk.lastMessage === null || currentTalk.lastMessage === '') {
talkEvent.leave(global.talkParams({
type: "LEAVE",
talkId: talkId,
}))
} else {
currentTalk.talkMessages.talks = currentTalk.talkMessages.talks.splice(currentTalk.talkMessages.talks.length - 30, currentTalk.talkMessages.talks.length)
talkEvent.talkHeaderChange('', '')
global.reset();
}
} catch (e) {
currentTalk.talkMessages.talks = currentTalk.talkMessages.talks.splice(currentTalk.talkMessages.talks.length - 30, currentTalk.talkMessages.talks.length)
talkEvent.talkHeaderChange('', '')
global.reset();
}
}
/* 접속한 톡방 색상 표시 */
try {
const prevRoom = global.shadowRoot.querySelector(`div[data-talk-id="${talkId}"]`)
prevRoom.classList.add('bg-purple');
setTimeout(() => {
prevRoom.classList.remove('bg-purple');
}, 800)
} catch (e) {
}
global.scrollMoreFlag = true;
global.scrollObserveFlag = true;
});
// 오토 하이드 스크롤 정의
const scrollbarSetting = () => {
Array.prototype.forEach.call(global.shadowRoot.querySelectorAll('.scrollbar-overlay'), function (el) {
return new SimpleBar(el, {
autoHide: true,
forceVisible: true
});
});
new SimpleBar(global.shadowRoot.querySelector('.chat-floating'), {
autoHide: true
});
};
// 이미지 동영상 슬라이드 설정
const carouselSetting = () => {
$carousel = new Carousel($manualPlaying, {
interval: 10000,
wrap: true,
});
$manualPlaying.addEventListener('slide.bs.carousel', (e) => {
const prevVideo = $manualPlaying.querySelectorAll('video')[e.from];
if (prevVideo) {
prevVideo.pause();
prevVideo.currentTime = 0;
}
try {
const video = e.relatedTarget.querySelector('video')
video.play()
} catch (e) {
}
})
};
// 채팅 내용 입력시 자동 하단 스크롤
const contentResizeObserver = () => {
const contentBody = global.shadowRoot.querySelector('.chat-content-body');
const scrollbarVertical = contentBody.querySelector('.simplebar-vertical')
// const scrollbar = scrollbarVertical.querySelector('.simplebar-scrollbar')
const scrollBody = contentBody.querySelector('.simplebar-content')
const resizeObserver = new ResizeObserver((entries) => {
for (let entry of entries) {
if (entry.target.classList.contains('simplebar-content')) {
const contentSc = contentBody.querySelector('.simplebar-content-wrapper')
if (global.scrollObserveFlag) {
contentSc.scrollTop = scrollBody.clientHeight - contentSc.offsetHeight + 10000;
}
}
}
});
resizeObserver.observe(scrollBody);
// 채팅 내용 스크롤 (채팅 내용 호출)
contentBody.querySelector('.simplebar-content-wrapper').addEventListener('scroll', contentScrollEvent)
async function contentScrollEvent(e) {
const _contentScroll = e.currentTarget;
const scrollBody = contentBody.querySelector('.simplebar-content')
// 최종 스크롤 위치 저장
global.oldScrollPosition = (_contentScroll.scrollHeight - _contentScroll.scrollTop)
// 스크롤 활성화 되어 있는 상태에서 하단 높이가 100PX 보다 크면 옵저버 비황성화
if ((scrollBody.clientHeight - _contentScroll.offsetHeight) - _contentScroll.scrollTop >= 400) {
global.scrollObserveFlag = false;
}
if (_contentScroll.scrollTop < 400 && global.scrollMoreFlag) {
// 다중 호출 방지용
global.scrollMoreFlag = false;
const talkId = localStorage.getItem(global.tabId);
if (talkId) {
const cacheTalk = global.talkData.filter((talk) => talk.talkId === talkId)[0];
// 메인탭 일시 메시지 호출
// 메인탭이 아닐시 메인탭으로 데이터 호출 하도록 통신
if (cacheTalk.talkMessages) {
if (cacheTalk.talkMessages.talks.length !== cacheTalk.talkMessages.total) {
cacheTalk.messageParams.start = cacheTalk.messageParams.start + cacheTalk.messageParams.row;
getMoreMessageLine(talkId).then((result) => {
if (result === 'success') {
global.scrollMoreFlag = true;
} else if (result === 'last') {
global.scrollMoreFlag = false;
}
}).catch((e) => {
global.scrollMoreFlag = false;
cacheTalk.messageParams.start = cacheTalk.messageParams.start - cacheTalk.messageParams.row;
})
}
}
}
}
// 스크롤 비활성화 되어 있는 상태에서 하단 높이가 200PX 미만 이면 옵저버 활성화
if (!global.scrollObserveFlag) {
if ((scrollBody.clientHeight - _contentScroll.offsetHeight) - _contentScroll.scrollTop < 400) {
console.log('스크롤 옵저버 활성화')
global.scrollObserveFlag = true;
global.shadowRoot.querySelector('.message-preview').classList.add('cus-hide');
}
}
}
}
// 채팅 버튼 클릭시
$chatFloatingBtn.addEventListener('click', () => {
const chatFloating = global.shadowRoot.querySelector('.chat-floating')
const chatBadge = global.shadowRoot.querySelector('.unread.badge');
const currentCarousel = global.shadowRoot.querySelector('.carousel-item.active');
if (currentCarousel !== '' && currentCarousel !== null) {
const currentVideo = currentCarousel.querySelector('video');
if (chatFloating.classList.contains('cus-hide')) {
if (currentVideo) currentVideo.play();
} else {
if (currentVideo) currentVideo.pause();
}
}
if (chatFloating.classList.contains('cus-hide')) {
chatFloating.classList.remove('cus-hide')
chatFloating.classList.add('cus-show')
$chatFloatingBtn.classList.add('active')
$carousel.cycle()
} else {
$chatFloatingBtn.classList.remove('active')
chatFloating.classList.remove('cus-show')
chatFloating.classList.add('cus-hide')
$carousel.pause();
}
if (chatBadge.innerText !== '0') chatBadge.classList.remove('cus-hide')
})
// 메시지 팝업창 스크롤 다운 버튼 클릭시 위치 조정
$chatScrollDownBtn.addEventListener('click', function () {
const contentBody = global.shadowRoot.querySelector('.chat-content-body');
const contentSc = contentBody.querySelector('.simplebar-content-wrapper')
const scrollBody = contentBody.querySelector('.simplebar-content')
contentSc.scrollTop = scrollBody.clientHeight - contentSc.offsetHeight
global.shadowRoot.querySelector('.message-preview').classList.add('cus-hide');
global.scrollObserveFlag = true;
})
/*문의 하기 이벤트 */
$chatInquiry.addEventListener('click', function () {
const talkId = talkEvent.generateUUID();
// 키보드 숨김 해제
global.element.chatEditorArea.classList.remove('cus-hide');
global.element.chatEditor.focus()
// 채팅 구독 메시지 보내기
localStorage.setItem(global.tabId, talkId)
localStorage.setItem('workId', global.work.workId)
talkEvent.join(global.talkParams({
type: 'JOIN',
talkId: talkId,
workId: global.work.workId,
introOwner: 'your'
}));
talkEvent.messageShow()
})
// 메시지 전송 이벤트
global.element.btnSend.addEventListener('click', function () {
const talkId = localStorage.getItem(global.tabId);
const workId = localStorage.getItem('workId');
const workNm = localStorage.getItem('workNm');
console.log(talkId, workId, workNm)
if(talkId === null || workId === null) {
global.notifier.alert('통신 오류가 발생 했어요.
새로고침 해주세요.')
return;
}
// talkEvent.send(global.talkParams({
// type: "UNTYPED",
// talkId: talkId,
// workId: workId,
// workNm: workNm
// }))
const msg = global.element.chatEditor.innerText.trim();
if (msg) {
talkEvent.send(global.talkParams({
type: 'MESSAGE',
message: msg,
talkId: talkId,
workId: workId,
workNm: workNm
}))
global.checker.flag = true;
global.checker.inDate = new Date();
}
// 채팅 input 초기화
global.element.chatEditor.innerHTML = '';
// 첨부파일 초기화
$files = [];
$typedFlag = false;
})
// 채팅 에디트 붙여넣기 이벤트
global.element.chatEditor.addEventListener('paste', async function (e) {
e.preventDefault();
let isText = false;
for (const item of Array.from(e.clipboardData.items)) {
if (!item.type.includes('text')) {
global.clipboardData = item.getAsFile()
global.clipboardObjectUrl = URL.createObjectURL(global.clipboardData);
const clipboardConfirmWrap = global.shadowRoot.querySelector('.chat-clipboard-confirm-wrapper');
const clipboardImg = clipboardConfirmWrap.querySelector('img')
clipboardImg.setAttribute('src', global.clipboardObjectUrl);
clipboardConfirmWrap.classList.remove('cus-hide')
} else {
isText = true;
}
}
if (isText) {
// 클립보드에서 텍스트 가져오기
const clipboard = e.clipboardData || window.clipboardData;
document.execCommand('insertText', false, clipboard.getData("Text").trim());
// const textType = e.clipboardData.items[e.clipboardData.items.length - 1].type
// if(textType === 'text/rtf') {
// const clipboard = e.clipboardData || window.clipboardData;
//
// console.log(clipboard.getData("Text"))
// } else {
// e.clipboardData.items[e.clipboardData.items.length - 1].getAsString(data => {
// // HTML 태그 제거
// const cleanText = data.replace(/<[^>]*>/g, '');
// document.execCommand('insertText', false, cleanText.trim());
// });
// }
}
})
// 채팅 에디트 컨트롤 + ENTER 이벤트
let prevMessage = "";
global.element.chatEditor.addEventListener('keyup', function (e) {
if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
e.preventDefault()
insertNewlineAtCursor();
}
function insertNewlineAtCursor() {
document.execCommand('insertText', false, '\n');
// 변경 이벤트 발생
const event = new InputEvent('input', {
bubbles: true,
cancelable: true,
});
global.element.chatEditor.dispatchEvent(event);
// 스크롤 조정
global.element.chatEditor.scrollTop = global.element.chatEditor.scrollHeight;
}
const message = global.element.chatEditor.innerText
if (message.trim() === '' && prevMessage !== message) {
$typedFlag = false;
const workId = localStorage.getItem('workId');
const workNm = localStorage.getItem('workNm');
const talkId = localStorage.getItem(global.tabId);
global.queue.enqueue({
type: 'UNTYPED',
talkId: talkId,
workId: workId,
workNm: workNm
})
// talkEvent.send(global.talkParams({
// type: 'UNTYPED',
// talkId: talkId,
// workId: workId,
// workNm: workNm
// }))
/*contentededitable 빈값 일시 br 태그 제거*/
global.element.chatEditor.innerHTML = global.element.chatEditor.innerHTML.replace('
', '');
} else if (message.trim() !== '') {
if (!$typedFlag) {
$typedFlag = true;
const workId = localStorage.getItem('workId');
const workNm = localStorage.getItem('workNm');
const talkId = localStorage.getItem(global.tabId);
global.queue.enqueue({
type: 'TYPED',
talkId: talkId,
workId: workId,
workNm: workNm
})
// talkEvent.send(global.talkParams({
// type: 'TYPED',
// talkId: talkId,
// workId: workId,
// workNm: workNm
// }))
}
}
prevMessage = message
})
//채팅 에디트 ENTER 이벤트
global.element.chatEditor.addEventListener('keydown', function (e) {
if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
e.preventDefault()
} else if (e.key === 'Enter') {
e.preventDefault();
global.element.btnSend.click()
}
})
/* 클립보드 이미지 업로드 이벤트 */
$chatClipboardBtn.addEventListener('click', function (e) {
const dataTransfer = new DataTransfer();
dataTransfer.items.add(global.clipboardData);
const files = dataTransfer.files;
attachUpload(files).then(() => {
global.clipboardData = null;
URL.revokeObjectURL(global.clipboardObjectUrl)
global.clipboardObjectUrl = null;
})
const clipboardConfirmWrap = global.shadowRoot.querySelector('.chat-clipboard-confirm-wrapper');
clipboardConfirmWrap.classList.add('cus-hide')
})
// 채팅방 파일첨부 버튼 이벤트
$chatUploadBtn.addEventListener('click', function (e) {
const chatUploadConfirmWrapper = global.shadowRoot.querySelector('.chat-upload-confirm-wrapper')
chatUploadConfirmWrapper.classList.remove('cus-hide');
})
// 채팅방 파일첨부 확인 이벤트
$chatFileUploadBtn.addEventListener('click', function () {
$chatFileUpload.click();
const chatUploadConfirmWrapper = global.shadowRoot.querySelector('.chat-upload-confirm-wrapper')
chatUploadConfirmWrapper.classList.add('cus-hide');
})
// 첨부파일 업로드 이벤트
$chatFileUpload.addEventListener('change', async function (e) {
const fileInput = e.currentTarget;
let totSize = 0;
let next = true;
if (fileInput.files.length > 0) {
Array.from(fileInput.files).forEach((f) => {
const currentSize = Math.floor(f.size / (1024*1024));
if(Math.ceil(currentSize / (1024*1024)) > 10) {
next = false;
}
totSize += currentSize;
})
if(totSize > 30) {
global.notifier.alert('첨부파일 사이즈는 전체 30MB를 초과 할수 없어요.')
return false;
}
if(next) {
attachUpload(fileInput.files)
} else {
global.notifier.alert('파일 하나당 10MB를 초과 할수 없어요.')
return false;
}
}
})
// 톡방 설정 선택시 폰트 사이즈 변경 모달 활성화
$chatContentFont.addEventListener('click', (e) => {
$contentDropdownOption.hide();
const chatFontConfirmWrapper = global.shadowRoot.querySelector('.chat-font-confirm-wrapper')
chatFontConfirmWrapper.classList.remove('cus-hide');
})
// 폰트 사이즈 변경 마우스 이벤트
$resizeFont.addEventListener('mousemove', (e) => {
$resizeSample.style.fontSize = e.target.value + 'px';
})
// 폰트 사이즈 변경 저장시 캐시에 데이터 저장 모든 업무 공유용
$chatFontBtn.addEventListener('click', () => {
Common.setCookie("fontSize", $resizeFont.value);
const chatFontConfirmWrapper = global.shadowRoot.querySelector('.chat-font-confirm-wrapper')
chatFontConfirmWrapper.classList.add('cus-hide');
// document.documentElement.style.setProperty('--chat-content-custom-font-size', `${$resizeFont.value}px`)
global.registration.active.postMessage({type: 'FONT_CHANGE', size: $resizeFont.value})
})
// 채팅방 검색 버튼 이벤트
$contentSearch.addEventListener('click', () => {
if ($contentDropdownOption) $contentDropdownOption.hide();
global.scrollMoreFlag = false;
global.scrollObserveFlag = false;
$contentSearchSub.classList.remove('cus-hide')
$contentSearchSub.classList.add('cus-show')
$contentOption.classList.remove('bi-three-dots-vertical')
$contentOption.classList.add('bi-x-lg')
$contentSearchText.focus()
})
// 검색된 문자열 이동 이벤트
$contentSearchPrev.addEventListener('click', () => {
if (lines.length > 0 && lines_idx > 0) {
lines_idx = lines_idx - 1;
searchMove($contentSearchText.value);
}
})
// 검색된 문자열 이동 이벤트
$contentSearchNext.addEventListener('click', () => {
if (lines.length > 0 && lines.length > lines_idx + 1) {
lines_idx = lines_idx + 1;
searchMove($contentSearchText.value);
}
})
// 채팅방 검색 이벤트
$contentSearchText.addEventListener('keyup', (e) => {
const talkId = localStorage.getItem(global.tabId)
const _this = e.currentTarget;
if (e.key === 'Enter') {
searchHighLightReset()
if (_this.value.length < 2) {
global.notifier.alert('최소 2글자 이상 작성 해주세요')
return;
}
global.talkClean()
lines = [];
getMessageSearch({
talkId: talkId,
search: _this.value,
callback: function (lists) {
const cacheTalk = global.talkData.filter((talk) => talk.talkId === talkId)[0];
if (lists.talks.length === 0) {
global.notifier.alert('조회된 대화 내용이 없어요')
} else {
cacheTalk.messageParams.start = lists.talks.length;
const chatContent = global.shadowRoot.querySelector('#chat-content');
const content = chatContent.querySelector('.simplebar-content');
content.style.marginTop = '50px'
messageMapping(talkId, lists, 'before', true);
const contentBody = global.shadowRoot.querySelector('.chat-content-body');
const wrappers = contentBody.querySelectorAll('.chat-text-wrapper');
wrappers.forEach((wp) => {
const value = wp.querySelector('.chat-message').innerText
const searchYn = wp.querySelector('.chat-message').getAttribute('search-yn');
if (value.includes(_this.value) && JSON.parse(searchYn)) {
lines.push(wp)
}
})
if (lines.length !== 0) {
lines_idx = lines.length - 1;
searchMove(_this.value);
}
}
}
})
}
})
// 위치 이동 기능
const searchMove = (search) => {
$contentSearchTot.setAttribute('data-tot', `${lines_idx + 1}/${lines.length}`)
const elementPosition = lines[lines_idx].offsetTop;
const contentBody = global.shadowRoot.querySelector('.chat-content-body')
const contentSc = contentBody.querySelector('.simplebar-content-wrapper')
searchHighLightReset();
const chatMassage = lines[lines_idx].querySelector('.chat-message');
chatMassage.innerHTML = chatMassage.textContent.replace(search, `${search}`)
contentSc.scrollTo(0, elementPosition - 50)
try {
const checker = setInterval(() => {
console.log(contentSc.scrollTop, elementPosition)
if(contentSc.scrollTop === elementPosition - 50) {
const indicate = global.shadowRoot.querySelector('.loading-wrap')
indicate.classList.remove('cus-loading-show')
indicate.classList.add('cus-hide')
console.log('move ok')
clearInterval(checker)
}
}, 100)
} catch(e) {}
}
// 검색 문자열 하이라이트 기능
const searchHighLightReset = () => {
lines.forEach((li) => {
try {
const chatM = li.querySelector('.chat-message')
chatM.innerHTML = chatM.textContent;
} catch (e) {
}
})
}
// 톡방 전체 검색 ENTER 이벤트
$chatAllSearchText.addEventListener('keyup', function (e) {
if (e.key === 'Enter') {
searchHighLightReset()
const vNode = [];
const search = e.currentTarget.value;
const sc = $chatAllSearchList.querySelector('.simplebar-content');
if (search.length < 2 && search.length !== 0) {
global.notifier.alert('최소 2글자 이상 작성 해주세요')
return;
}
if (search.length === 0) {
vNode.push(allSearchEmpty)
m.render(sc, vNode);
return;
}
getAllContentSearch({
search: search,
callback: function (lists) {
if (lists.length > 0) {
lists.forEach((se) => {
const room = global.shadowRoot.querySelector(`div[data-talk-id="${se.talkId}"]`)
const workNm = room.dataset.workNm
vNode.push([
m('div', {
class: 'd-flex p-1 chat-text-wrapper chat-all-search cursor-pointer',
"data-all-line": `${se.line}`,
'data-all-chat-id': `${se.talkId}`,
}, [
m('div', {class: 'avatar avatar-l me-2', style: 'flex-basis:5%;'}, [
m('div', {
class: "rounded-circle",
style: "width:30px;height:30px;border-radius:10px;background-color:#A9E4FF;text-align:center; line-height:32px;"
}, workNm.substring(0, 1))
]),
m('div', {class: 'w-xxl-85', style: 'flex-basis:63%;'}, [
m('div', {
class: `chat-message bg-200 p-2 rounded-2 ml-10 your`,
style: 'max-width: 100% !important;font-size:0.83333em;'
}, se.message),
m('div', {
class: `ml-10`,
style: 'font-size:12px'
}, `${workNm} (${se.insName})`)
]),
m('div', {class: 'text-400 fs-11 chat-date ml-10'}, se.insDate.substring(0, 10))
])
]);
});
m.render(sc, vNode);
} else {
vNode.push(allSearchEmpty)
m.render(sc, vNode);
}
}
})
}
})
/*매뉴얼 검색 이벤트*/
$manualDocText.addEventListener('keyup', function (e) {
if (e.key === 'Enter') {
getManual({
search: e.currentTarget.value,
workId: e.currentTarget.value === '' ? global.work.workId : '',
type: '0000',
callback: function (lists) {
const manualVNode = [];
const content = $manualDocBody.querySelector('.simplebar-content');
if (lists.length !== 0) {
lists.map((ma) => {
manualVNode.push(
m('div', {class: "d-flex justify-content-evenly manual-content"}, [
m('div', {
class: "p-2 text-ellipsis",
style: "font-size:13px; width:70%;"
}, `${ma.onm}`),
m('div', {class: "p-2", style: "font-size:13px; width:20%;"}, `${ma.version}`),
m('a', {
href: `${global.apiUrl}/api/manual/download/doc?workId=${ma.workId}&vnm=${ma.vnm}`,
style: 'padding-top:3px;'
}, [
m('i', {
class: "bi bi-download text-black",
style: "padding-right:10px; font-size:1.0rem; cursor:pointer;"
})
])
])
)
})
m.render(content, manualVNode)
} else {
manualVNode.push(allSearchEmpty)
m.render(content, manualVNode)
}
}
})
}
})
/*동영상 매뉴얼 검색 이벤트*/
$manualVideoText.addEventListener('keyup', function (e) {
if (e.key === 'Enter') {
getVideoManual({
search: e.currentTarget.value,
workId: e.currentTarget.value === '' ? global.work.workId : '',
callback: function (lists) {
const manualVNode = [];
const content = $manualVideoBody.querySelector('.simplebar-content');
if (lists.length !== 0) {
lists.map((ma) => {
manualVNode.push(
m('div', {class: "d-flex justify-content-evenly manual-content"}, [
m('div', {
class: "p-2 text-ellipsis",
style: "font-size:13px; width:70%;"
}, `${ma.onm}`),
m('button', {
class: 'btn btn-sm btn-play manual-play-btn p-0',
'data-id': ma.id,
}, '재생')
])
)
})
m.render(content, manualVNode)
} else {
manualVNode.push(allSearchEmpty)
m.render(content, manualVNode);
}
// videoManualPlayEvent();
}
})
}
})
// 사이드바 위치 검색 기능
const calcSliderPos = (e, maxV) => {
return (e.offsetX / e.target.clientWidth) * parseInt(maxV, 10);
}
// 만족도 조사 별점 스타일 변경 이벤트
const upStar = (val) => {
val = parseFloat(val);
$chatRating.dataset.val = val;
const full = Number.isInteger(val);
val = parseInt(val);
const stars = $chatRating.querySelectorAll('i')
Array.from(stars).slice(0, val).forEach((star) => star.setAttribute('class', 'bi bi-star-fill'));
Array.from(stars).slice(val, 5).forEach((star) => star.setAttribute('class', 'bi bi-star'));
}
let hoverValue = 0
$chatRating.addEventListener('click', function (e) {
e.target.dataset.val = hoverValue;
})
// 만족도 조사 별점 선택 이벤트
$chatRatingCtrl.addEventListener('click', function (e) {
const maxV = parseInt($chatRating.dataset.max)
hoverValue = Math.ceil(calcSliderPos(e, maxV) * 2) / 2;
if (hoverValue < 1) hoverValue = 1
upStar(hoverValue)
})
// 만족도 조자 저장 이벤트
$chatRatingBtn.addEventListener('click', function (e) {
const chatRatingConfirmWrapper = global.shadowRoot.querySelector('.chat-rating-confirm-wrapper')
/* ratingYn = true 변경 */
const talk = global.talkData.filter((talk) => talk.talkId === localStorage.getItem(global.tabId));
talk[0].ratingYn = true;
talkMapping(global.talkData)
const reqId = talk[0].reqId;
const star = $chatRating.dataset.val
const content = $chatRatingReview.value
if (star < 5 && (content === null || content === '')) {
global.notifier.alert('만족도 조사 내용을 작성해 주세요.')
return false;
}
chatRatingConfirmWrapper.classList.add('cus-hide')
/* api전송 로직 추가*/
if(reqId.includes('REQ')) {
setSCMSatis(talk[0].talkId, reqId, star, content)
} else {
setITSMSatis(talk[0].talkId, reqId, star, content)
}
/*파라미터 초기화*/
$chatRating.dataset.val = 5;
$chatRatingCtrl.dataset.val = 5;
$chatRating.querySelectorAll('i').forEach((i) => {
i.classList.remove('bi-star-half');
i.classList.remove('bi-star');
i.classList.add('bi-star-fill')
})
$chatRatingReview.value = "";
})
/*자세히보기 닫기 이벤트*/
$detailClose.addEventListener('click', () => {
const detailContainer = global.shadowRoot.querySelector('#detail-container');
detailContainer.classList.remove('cus-show')
detailContainer.classList.add('cus-hide')
detailContainer.setAttribute('src', '')
})
/*----------- 동적 생성 엘리먼트 이벤트 정의 시작 ---------------*/
// 톡방 검색 닫기 버튼 클릭시 이벤트
Common.addDelegatedEventListener(global.shadowRoot, 'click', '#chat-option.bi-x-lg', function (e) {
e.preventDefault();
e.stopPropagation();
const chatContent = global.shadowRoot.querySelector('#chat-content');
const content = chatContent.querySelector('.simplebar-content');
content.style.marginTop = '0px'
global.scrollMoreFlag = false
global.scrollObserveFlag = false;
$contentSearchText.value = ""
$contentSearchTot.setAttribute('data-tot', `0/0`)
$contentSearchSub.classList.remove('cus-show');
$contentSearchSub.classList.add('cus-hide');
$contentOption.classList.add('bi-three-dots-vertical')
$contentOption.classList.remove('bi-x-lg')
searchHighLightReset();
// 자동 증가 되는 로우 수 만큼 뺌(스크롤시 자동증가 되는거 만큼 빼줌)
// global.messageParams.start = global.messageData.length - global.messageParams.row;
// global.scrollMoreFlag = false;
// global.scrollObserveFlag = false;
function scrollEnable() {
global.scrollMoreFlag = true;
global.scrollObserveFlag = true;
}
setTimeout(scrollEnable, 1000)
if ($contentDropdownOption) $contentDropdownOption.hide();
})
// 채팅방 검색 및 폰트 설정 드랍다운 설정
Common.addDelegatedEventListener(global.shadowRoot, 'click', '.bi-three-dots-vertical', function (e) {
e.preventDefault();
e.stopPropagation();
const el = e.currentTarget;
/* 드랍다운 오류(z-index 강제 변경 로직 추가)*/
$contentDropdownOption = new Dropdown(el, {
autoClose: "true",
});
$contentDropdownOption.toggle();
})
// 컨펌 취소 이벤트
Common.addDelegatedEventListener(global.shadowRoot, 'click', '.chat-confirm-cancel', function (e) {
const chatConfirmWrapper = Common.findParentElement(e.target, 'chat-confirm-wrapper');
chatConfirmWrapper.classList.add('cus-hide');
chatConfirmWrapper.classList.remove('cus-show');
})
/*톡목록 옵션 선택 이벤트*/
Common.addDelegatedEventListener(global.shadowRoot, 'click', '.chat-options', function (e) {
e.preventDefault();
e.stopPropagation();
const el = e.currentTarget;
/* 드랍다운 오류(z-index 강제 변경 로직 추가)*/
const drop = new Dropdown(el, {
autoClose: "true"
});
global.shadowRoot.querySelectorAll('.chat-options').forEach(function (el1) {
if (el !== el1) {
const otherDrop = new Dropdown(el1, {
autoClose: "true"
});
otherDrop.hide();
el1.parentElement.parentElement.parentElement.style.zIndex = 0;
} else {
if ((global.element.chatSidebar.getBoundingClientRect().bottom - el.getBoundingClientRect().bottom) < 100) {
el.parentElement.classList.add('dropup')
} else {
el.parentElement.classList.remove('dropup')
}
}
});
const ul = el.nextElementSibling;
if (ul.classList.contains('cus-show')) {
el.parentElement.parentElement.parentElement.style.zIndex = 0;
drop.hide()
} else {
drop.show();
el.parentElement.parentElement.parentElement.style.zIndex = Number(el.parentElement.parentElement.parentElement.style.zIndex) + 10;
}
return false;
})
/* 톡방 보관 이벤트*/
Common.addDelegatedEventListener(global.shadowRoot, 'click', '.chat-mark', function (e) {
e.preventDefault();
e.stopPropagation();
const dropdownWrap = Common.findParentElement(e.target, 'dropdown');
const drop = new Dropdown(dropdownWrap.querySelector('.chat-options'));
drop.hide()
const chatWrap = Common.findParentElement(e.target, 'chat-wrap')
const talkId = chatWrap.dataset.talkId;
setTalkMark({
talkId: talkId,
callback: (data) => {
HubEvent.send(global.talkParams({
type: 'MARK',
talkId: talkId
}))
}
})
})
//톡방 삭제버튼 클릭 컨펌창 활성화
Common.addDelegatedEventListener(global.shadowRoot, 'click', '.chat-delete', function (e) {
const chatDeleteConfirmWrapper = global.shadowRoot.querySelector('.chat-confirm-wrapper')
chatDeleteConfirmWrapper.classList.remove('cus-hide');
e.stopPropagation();
e.preventDefault();
const dropdownWrap = Common.findParentElement(e.target, 'dropdown');
const drop = new Dropdown(dropdownWrap.querySelector('.chat-options'));
drop.hide()
const chatWrap = Common.findParentElement(e.target, 'chat-wrap')
chatDeleteConfirmWrapper.dataset.talkId = chatWrap.dataset.talkId;
chatDeleteConfirmWrapper.dataset.closeYn = chatWrap.dataset.closeYn;
chatDeleteConfirmWrapper.dataset.compYn = chatWrap.dataset.compYn;
})
// 톡방 삭제 이벤트
Common.addDelegatedEventListener(global.shadowRoot, 'click', '.chat-delete-btn', function (e) {
const chatDeleteConfirmWrapper = global.shadowRoot.querySelector('.chat-confirm-wrapper')
chatDeleteConfirmWrapper.classList.add('cus-hide');
const talkId = chatDeleteConfirmWrapper.dataset.talkId;
const closeYn = chatDeleteConfirmWrapper.dataset.closeYn;
const compYn = chatDeleteConfirmWrapper.dataset.compYn;
if (closeYn === 'false') {
global.notifier.alert("상담 종료후 삭제 가능해요.")
return;
}
deleteTalk({
talkId: talkId,
callback: (data) => {
if (data) {
if (localStorage.getItem('talkId') === talkId) {
const chatBack = global.shadowRoot.querySelector('.contacts-list-show');
chatBack.click();
}
// talkEvent.talkRemove(talkId)
HubEvent.send(global.talkParams({
type: 'DELETE',
talkId: talkId
}))
} else {
global.notifier.alert("상담 종료후 삭제 가능해요.")
}
}
})
})
// 톡방 입장 이벤트
Common.addDelegatedEventListener(global.shadowRoot, 'click', '.chat-wrap', function (e) {
global.scrollMoreFlag = true;
global.scrollObserveFlag = true;
const _this = e.currentTarget;
const unreadFlag = _this.classList.contains('unread-message');
_this.classList.add('active');
!e.target.classList.contains('hover-actions') && (global.element.chatSidebar.style.left = '-100%');
// _this.classList.contains('unread-message') && _this.classList.remove('unread-message');
/*룸 클릭시 채팅 내용 호출 */
const talkId = _this.dataset.talkId;
const workId = _this.dataset.workId;
const workNm = _this.dataset.workNm;
const workSmNm = _this.dataset.workSmNm;
const closeYn = _this.dataset.closeYn;
const ratingYn = _this.dataset.ratingYn;
console.log(talkId);
// 방 접속시 기본 데이터 저장
localStorage.setItem(global.tabId, talkId);
localStorage.setItem('workId', workId);
localStorage.setItem('workNm', workNm);
global.element.chatEditor.focus()
/*톡방 만족도 조사 실행 로직*/
if (JSON.parse(closeYn)) {
global.element.chatEditorArea.classList.add('cus-hide');
} else {
global.element.chatEditorArea.classList.remove('cus-hide');
}
if (JSON.parse(closeYn) && !JSON.parse(ratingYn)) {
const chatRatingConfirmWrapper = global.shadowRoot.querySelector('.chat-rating-confirm-wrapper')
function ratingShow() {
chatRatingConfirmWrapper.classList.remove('cus-hide')
chatRatingConfirmWrapper.classList.add('cus-show')
}
setTimeout(ratingShow, 800)
}
talkEvent.talkHeaderChange(workNm, workSmNm)
const cacheTalk = global.talkData.filter((talk) => talk.talkId === talkId)[0];
messageMapping(talkId, cacheTalk.talkMessages, 'before', true)
// 안읽은 메시지 있을시 진행
if (unreadFlag) {
// 구독된 톡방 읽음처리
if (Object.keys(global.subscribeList).includes(talkId)) {
// 소켓 연결이 존재 할시 읽음처리 브로드캐스트로 메시지 읽음 전송
talkEvent.send(global.talkParams({
type: 'READ',
talkId: talkId,
workId: workId
}))
} else {
setChatRead(talkId).then((result) => {
// talkEvent.readMessage(talkId)
// talkMapping(global.talkData)
})
}
// 구독이 안된 톡방 읽음처리 브로드캐스트로 메시지 읽음 전송
HubEvent.send(global.talkParams({
type: "READ",
talkId: talkId,
insSabun: global.user.sabun
}))
}
// const chatContent = global.shadowRoot.querySelector('#chat-0');
// chatContent.querySelector('.simplebar-offset').style.bottom = '0px';
})
// 톡방 이미지 모달 수동 제어 이벤트
Common.addDelegatedEventListener(global.shadowRoot, 'click', 'div[data-bs-toggle="modal"]', function (e) {
const imageModal = global.shadowRoot.querySelector(e.target.getAttribute('data-bs-target'));
const modal = new Modal(imageModal, {
backdrop: true,
keyboard: true,
})
modal.show()
})
// 동영상 메뉴얼 재생 이벤트
Common.addDelegatedEventListener(global.shadowRoot, 'click', '.manual-play-btn', function (e) {
const id = e.currentTarget.dataset.id;
const videoPlayArea = global.shadowRoot.querySelector('#manual-video-play');
const videoPlay = videoPlayArea.querySelector('video');
const videoPlaySource = videoPlay.querySelector('source');
const videoList = global.shadowRoot.querySelector('#manual-video-body');
videoPlayArea.classList.remove('cus-hide')
videoPlayArea.classList.add('cus-show')
// videoList.classList.remove('cus-show')
// videoList.classList.add('hide-08s')
videoPlaySource.setAttribute('src', `${global.apiUrl}/api/manual/view/video?id=${id}&type=O`)
videoPlay.load();
videoPlay.play();
// m.render(videoPlay, video)
global.shadowRoot.querySelector('#manual-video-back').addEventListener('click', function () {
videoPlayArea.classList.remove('cus-show')
videoPlayArea.classList.add('cus-hide')
// videoList.classList.remove('hide-08s')
// videoList.classList.add('cus-show')
videoPlay.pause();
videoPlaySource.setAttribute('src', '')
})
})
// 톡방 전체 검색 이벤트
Common.addDelegatedEventListener(global.shadowRoot, 'click', '.chat-all-search', function (e) {
const indicate = global.shadowRoot.querySelector('.loading-wrap')
indicate.classList.remove('cus-hide')
indicate.classList.add('cus-loading-show')
lines = [];
const line = e.currentTarget.getAttribute("data-all-line")
const talkId = e.currentTarget.getAttribute("data-all-chat-id")
const room = global.shadowRoot.querySelector(`div[data-talk-id="${talkId}"]`)
const workNm = room.dataset.workNm
const workSmNm = room.dataset.workSmNm
talkEvent.talkHeaderChange(workNm, workSmNm)
localStorage.setItem(global.tabId, talkId);
global.messageParams.talkId = talkId;
const findText = $chatAllSearchText.value;
getMessageSearch({
talkId: talkId,
search: findText,
callback: function (lists) {
talkEvent.messageShow()
$contentSearch.click();
$contentSearchText.value = findText;
messageMapping(talkId, lists, 'before', true);
const contentBody = global.shadowRoot.querySelector('.chat-content-body');
const wrappers = contentBody.querySelectorAll('.chat-text-wrapper');
for(let idx =0; idx< wrappers.length; idx++) {
const wp = wrappers[idx];
const msg = wp.querySelector('.chat-message')
const value = msg.innerText
const searchYn = msg.getAttribute('search-yn');
if (value.includes(findText) && JSON.parse(searchYn)) {
lines.push(wp)
const getLine = msg.getAttribute('data-line');
if (line === getLine) {
lines_idx = lines.length - 1;
}
}
}
setTimeout(searchMove, 200, findText)
}
});
})
// 톡방 전체 검색 이벤트
Common.addDelegatedEventListener(global.shadowRoot, 'click', '#socket-reset-btn', function (e) {
talkEvent.repair()
})
/*----------- 동적 생성 엘리먼트 이벤트 정의 종료 ---------------*/
// HTML 로드 완료후 스크롤, 비디오, 스크롤 옵저버 호출
docReady(scrollbarSetting)
docReady(carouselSetting)
docReady(contentResizeObserver)
// 홈탭 동영상 풀스크린 실행시 숏동영상 정지 처리
document.addEventListener('fullscreenchange', function () {
const activePlay = $manualPlaying.querySelector('.active');
if (activePlay) {
const isFullScreen = document.fullScrenn || document.mozFullScreen || document.webkitIsFullScreen;
if (isFullScreen) {
$carousel.pause();
} else {
$carousel.cycle();
}
}
})
// 홈탭 동영상 풀스크린 실행시 숏동영상 정지 처리
document.addEventListener('webkitfullscreenchange', function (e) {
const activePlay = $manualPlaying.querySelector('.active');
if (activePlay) {
const isFullScreen = document.fullScrenn || document.mozFullScreen || document.webkitIsFullScreen;
if (isFullScreen) {
$carousel.pause();
} else {
$carousel.cycle();
}
}
})
// 홈탭 동영상 풀스크린 실행시 숏동영상 정지 처리
document.addEventListener('mozfullscreenchange', function () {
const activePlay = $manualPlaying.querySelector('.active');
if (activePlay) {
const isFullScreen = document.fullScrenn || document.mozFullScreen || document.webkitIsFullScreen;
if (isFullScreen) {
$carousel.pause();
} else {
$carousel.cycle();
}
}
})
// 헬프톡 제외한 다른 탭 선택시 헬프톡 비활성화 이벤트
document.addEventListener('click', function (e) {
if (e.target.getAttribute('id') !== 'chat-area') {
const chatFloating = global.shadowRoot.querySelector('.chat-floating')
if (!chatFloating.classList.contains('cus-hide')) {
$chatFloatingBtn.click();
const chatBack = global.shadowRoot.querySelector('.contacts-list-show');
chatBack.click();
}
}
})
// 화면 꺼짐 방지용
document.addEventListener('click', () => {
this.requestWakeLock()
}, {once: true})
// 중복 이벤트 방지
let isHandlingEvent = false;
// 브라우저 탭 활성화 시 서비스워커 꺠우기 및 소켓 재연결 처리
document.addEventListener('visibilitychange', function () {
if(document.hidden) {
const chatBack = global.shadowRoot.querySelector('.contacts-list-show');
chatBack.click();
} else {
tabChangeEvent();
}
global.registration.active.postMessage({"type":"WAKEUP"})
});
// 톡방 itsm, scm 자세히 보기 클릭시 이벤트 해당 요청 및 작성지시 팝업
global.shadowRoot.addEventListener('click', (e) => {
if(e.target.classList.contains('detail-btn')) {
const detailContainer = global.shadowRoot.querySelector('#detail-container');
detailContainer.querySelector('iframe').setAttribute('src', e.target.dataset.href)
detailContainer.classList.remove('cus-hide')
detailContainer.classList.add('cus-show')
}
})
global.shadowRoot.addEventListener('keydown', (e) => {
e.stopPropagation();
})
document.addEventListener('mouseenter', function() {
tabChangeEvent();
})
const tabChangeEvent = (e) => {
if(!Common.isMaster() && global.init) {
console.log('탭이동 및 마우스 엔터 재연결 시도 성공')
} else if(Common.isMaster) {
console.log('활성화된 탭')
} else if(!global.init) {
console.log('재접속 하기 위한 초기화가 되지 않음')
}
if (!Common.isMaster()) {
if(!global.init) return;
// 허브 이벤트 제거
global.hub.stop();
try {
if (global.sockJS.readyState !== 1 && !global.forceKill) {
// 초기화 완료 상태값 변경
global.init = false;
talkEvent.reConnect()
}
} catch (e) {
global.init = false;
talkEvent.reConnect();
}
}
}
}
}
export {Talk}