이 화면은 DIV 컴포넌트를 리스트뷰에 설정하여 사용하는 예시 화면이다.
var LEFT_USER_NAME = "고객";
var RIGHT_USER_NAME = "상담사";
var ITEM_PADDIND_TOP = 4;
var ITEM_PADDIND_BOTTOM = 4;
var ITEM_PADDIND_LEFT = 6;
var ITEM_PADDIND_RIGHT = 6;
var USER_BOX_HEIGHT = 60;
var USER_BOX_WIDTH = 50;
var SHOW_MY_USER_BOX = true;
var SHOW_LEFTTALK_BACKCOLOR = true;
function screen_on_load()
{
if (SHOW_MY_USER_BOX) { chk_showmyuserbox.setcheck(true); }
else { chk_showmyuserbox.setcheck(false); }
if (SHOW_LEFTTALK_BACKCOLOR) { chk_showtalkbackcolor.setcheck(true); }
else { chk_showtalkbackcolor.setcheck(false); }
}
function chk_showmyuserbox_on_click(objInst)
{
SHOW_MY_USER_BOX = chk_showmyuserbox.getcheck();
}
function chk_showtalkbackcolor_on_click(objInst)
{
SHOW_TALK_BACKCOLOR = chk_showtalkbackcolor.getcheck();
}
function addtalk(ds_talk, inst_listview, talk_content, is_left_talk)
{
var row_index;
if (talk_content.length == 0) { return; }
row_index = ds_talk.addrow(true);
ds_talk.setdatabyname(row_index, "HTML_DATA", gettalkhtml(inst_listview, talk_content, is_left_talk), true);
// row_index = ds_talk.addrow(true);
// ds_talk.setdatabyname(row_index, "HTML_DATA", gettalkhtml(talk_content, false), true);
if (factory.ismobile() == false && inst_listview.getscrollbartype() == 1) {
inst_listview.refreshscroll();
}
inst_listview.scrollto(100000000);
}
function gettalkhtml(inst_listview, talk_content, is_left_talk)
{
var html_arr;
html_arr = [];
html_arr.push('<div style="width:100%;');
html_arr.push('padding-top:' + ITEM_PADDIND_TOP + 'px;');
html_arr.push('padding-bottom:' + ITEM_PADDIND_BOTTOM + 'px;');
html_arr.push('min-height:' + (USER_BOX_HEIGHT + ITEM_PADDIND_TOP + ITEM_PADDIND_BOTTOM) + 'px;');
if (is_left_talk) {
html_arr.push('padding-left:' + USER_BOX_WIDTH + 'px;');
html_arr.push('padding-right:' + USER_BOX_WIDTH + 'px;');
}
else {
html_arr.push('padding-left:' + USER_BOX_WIDTH + 'px;');
// 우측 아이콘을 숨기는 경우
html_arr.push('padding-right:');
if (SHOW_MY_USER_BOX == true) { html_arr.push(USER_BOX_WIDTH); }
else { html_arr.push(20); }
html_arr.push('px;');
}
html_arr.push('">');
if (is_left_talk == true || SHOW_MY_USER_BOX == true) {
html_arr.push(gettalkuserhtml(inst_listview, talk_content, is_left_talk));
}
html_arr.push(gettalkcontenthtml(talk_content, is_left_talk));
html_arr.push('</div>');
return html_arr.join('');
}
/**
* 사용자 표시용 HTML 리턴
* @param inst_listview 리스트뷰 인스턴스
* @param talk_content 대화 내용
* @param is_left_talk 좌측 사람 토크 여부
* @returns HTML 문자열
*/
function gettalkuserhtml(inst_listview, talk_content, is_left_talk)
{
var html_arr;
html_arr = [];
html_arr.push('<div style="');
// html_arr.push('border:1px solid red;');
html_arr.push('position:absolute;text-align:center;word-break:break-all;white-space:pre-wrap;');
html_arr.push('top:' + ITEM_PADDIND_TOP + 'px;');
html_arr.push('height:' + USER_BOX_HEIGHT + 'px;');
html_arr.push('width:' + USER_BOX_WIDTH + 'px;');
if (is_left_talk) { html_arr.push('left:0px;'); }
else { html_arr.push('right:0px;'); }
html_arr.push('">');
html_arr.push('<img src="./project/terminal/image/TEMPLATE/HTML5/COMPONENT/DIV/');
if (is_left_talk) { html_arr.push('btn_profile_user_blue.png'); }
else { html_arr.push('btn_profile_user_gray.png'); }
html_arr.push('"><br>');
if (is_left_talk) {
if (inst_listview.getname() == "listview_chat_a") { html_arr.push('고객'); }
else { html_arr.push('상담사'); }
}
else { html_arr.push('나'); }
html_arr.push('</div>');
return html_arr.join('');
}
/**
* 대화 내용 표시용 HTML 리턴
* @param talk_content 대화 내용
* @param is_left_talk 좌측 사람 토크 여부
* @returns HTML 문자열
*/
function gettalkcontenthtml(talk_content, is_left_talk)
{
var html_arr;
html_arr = [];
// 대화 내용 표시 DIV
html_arr.push('<div class="_xf_tooltip ');
if (is_left_talk) { html_arr.push('_xf_tooltip_right'); }
else { html_arr.push('_xf_tooltip_left'); }
html_arr.push('" style="position:relative;display:block;max-width:100%;');
if (is_left_talk) { html_arr.push('float:left;'); }
else { html_arr.push('float:right;'); }
html_arr.push('">');
html_arr.push('<div class="_xf_tooltip_box _xf_tooltip_colorfont"');
html_arr.push(' style="');
if (is_left_talk && SHOW_LEFTTALK_BACKCOLOR) {
html_arr.push('background-color:royalblue;;color:white;"');
}
html_arr.push('">');
html_arr.push('<div class="_xf_tooltip_content" style="user-select:text;white-space:pre-wrap;">');
html_arr.push(talk_content);
html_arr.push('</div>');
html_arr.push('</div>');
html_arr.push('<div class="_xf_tooltip_arrow _xf_tooltip_colorfont ');
if (is_left_talk) { html_arr.push('_xf_tooltip_arrow_right'); }
else { html_arr.push('_xf_tooltip_arrow_left'); }
html_arr.push('" style="top:10px;');
if (is_left_talk && SHOW_LEFTTALK_BACKCOLOR) { html_arr.push('background-color:royalblue;'); }
html_arr.push('">');
html_arr.push('</div>');
html_arr.push('</div>');
return html_arr.join('');
}
function btn_addtalk_a_on_mouseup(objInst)
{
addtalkcontent(fld_talk_a);
}
function btn_addtalk_b_on_mouseup(objInst)
{
addtalkcontent(fld_talk_b);
}
function btn_addtalk_editor_a_on_mouseup(objInst)
{
addtalkcontent(editor_talk_a);
}
function btn_addtalk_editor_b_on_mouseup(objInst)
{
addtalkcontent(editor_talk_b);
}
function addtalkcontent(instComponent) {
var str_talk = instComponent.gettext();
instComponent.settext("");
if (instComponent.getname().indexOf("_a") >= 0) {
addtalk(DS_DATA_A, listview_chat_a, str_talk, false);
addtalk(DS_DATA_B, listview_chat_b, str_talk, true);
}
else {
addtalk(DS_DATA_B, listview_chat_b, str_talk, false);
addtalk(DS_DATA_A, listview_chat_a, str_talk, true);
}
}
function fld_talk_on_prekeydown(objInst, keycode, bctrldown, bshiftdown, baltdown, bnumpadkey)
{
if (keycode == 13 && baltdown == false && bshiftdown == false) {
addtalkcontent(objInst);
return 1;
}
return 0;
}
function btn_setcursortext_on_mouseup(objInst)
{
editor_talk_a.inserthtml("NEW HTML TEXT", true);
}