====== DIV 채팅뷰 가이드 ====== 이 화면은 DIV 컴포넌트를 리스트뷰에 설정하여 사용하는 예시 화면이다. ===== 예시 ===== 템플릿 위치: /HTML5/COMPONENT/DIV/div_chatview 템플릿 파일 * [[xf5projecthome>template/screen/HTML5/COMPONENT/DIV/div_chatview.xml|div_chatview.xml]] * [[xf5projecthome>template/screen/HTML5/COMPONENT/DIV/div_chatview.js|div_chatview.js]] * [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/DIV/div_chatview|새창으로 실행]] echo ''; echo ''; echo ''; ==== 화면 스크립트 ==== 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('
'); 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('
'); 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('
'); html_arr.push('
'); 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('
'); 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('
'); html_arr.push('
'); html_arr.push('
'); html_arr.push(talk_content); html_arr.push('
'); html_arr.push('
'); html_arr.push('
'); html_arr.push('
'); html_arr.push('
'); 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); }