DIV 가이드

이 화면은 DIV 컴포넌트를 리스트뷰에 설정하여 사용하는 예시 화면이다.
템플릿 위치: /HTML5/COMPONENT/DIV/div_chatview
템플릿 파일
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);
}
DIV 채팅뷰 가이드

예시

화면 스크립트
