채팅방, 채팅리스트 로딩함수
마스터욱
0
28
0
0
2018-12-22 02:43:35
간만에 올리는 리뷰입니다.
하루에 하나씩이라도 오픈하고 싶은데, 그게 쉽지가 않네요 ㅡㅜ
일은 일대로 쌓이고, 일하고나면 조금 쉬어줘야 하구 헤헤~
get_roomlist_html 함수는 채팅리스트를 불러오는 함수입니다.
get_room_html 함수는 채팅방을 불러오는 함수입니다.
그다지 특별한건 없습니다.
%로 둘러싸인 문자열들이 다수 존재하는데요,
모두 자바스크립트에서 치환되어질 동적인 string 이라고 보시면 됩니다.
디자인 프레임워크를 부트스트랩을 사용했기 때문에, 부트스트랩 클래스가 눈에 띄게 보이실 것입니다.
실제로 채팅방리스트를 오픈하고 싶으신 페이지에서
echo $core['chating']->get_room_html();
echo $core['chating']->get_roomlist_html();
이렇게 호출하면서 사용하고 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 | public function get_roomlist_html() { $html = ' <div style="position:fixed;bottom:50px;right:50px;border:1px solid #000;z-index:10000;width:400px;height:500px;overflow-y:auto;background-color:#FFF;" id="talk_list_box"> <div style="text-align:center;padding:5px;background-color:#eaeaea;cursor:move;"> <h3><i class="fa fa-list"></i> 채팅 리스트</h3> </div> <div id="talk_list"></div> <div id="talk_list_row" style="display:none;"> <div class="talk_item" id="talk_item_%방번호%" style="border-bottom:1px solid #E9E9E9;" room="%방번호%"> <div style="margin:5px;padding:5px 0px 0px 0px;"> <table width="100%"> <tr> <td width="20%"> <a href="#photo_%방번호%" xrel="modal:open" onclick="show_chating_photo(\'%사진%\');"><img src="%사진%" style="width:50px;height:50px;" id="talk_photo_%방번호%" class="w3-round-jumbo" /></a> <img src="%사진%" class="w3-circle" style="display:none;" id="photo_%방번호%" /> </td> <td width="80%"> <table width="100%"> <tr> <td align="left" style="font-weight:bold;"><i class="fa fa-user" aria-hidden="true"></i> %닉네임%</td> <td align="right" style="color:gray;"> <span style="display:inline-block;color:#FFF;background-color:#F76A51;text-align:center;width:20px;line-height:20px;font-weight:bold;" id="read_%방번호%" class="w3-round-jumbo">%안읽은카운트%</span> %마지막메세지시간% </td> </tr> <tr> <td height="10"></td> </tr> <tr> <td colspan="2" style="color:#737373;"> <div style="float:left;max-width:200px;" class="ellip">%메세지%</div> <div style="float:right;"> <div id="chat_list_company_%방번호%"><i class="fa fa-diamond" aria-hidden="true"></i> %컴파니네임%</div> </div> <div style="clear:both;"></div> </td> </tr> </table> </td> </tr> </table> </div> <!--<div id="talk_room_%방번호%"></div>--> </div> </div> </div> '; return $html; } public function get_room_html() { $style_1 = ""; $style_2 = ""; $style_3 = ""; $script_1 = ""; $tag_1 = ""; if(DEVICE == "m") { $style_1 = "width:100%;height:100%;"; $style_2 = "width:100%;height:100%;"; $style_3 = "height:100%;"; $script_1 = "onclick='window.close();'"; $tag_1 = '<a href="%상대방사진%" target="_blank"><img src="%상대방사진%" style="width:40px;height:40px;" class="w3-round-jumbo" /></a>'; } else { $style_1 = ""; $style_2 = "width:".chating::CHAT_WIDTH."px;"; $style_3 = "height:".chating::CHAT_HEIGHT."px;"; $script_1 = ""; $tag_1 = '<a href="#photo_%방번호%" xrel="modal:open" onclick="show_chating_photo(\'%상대방사진%\');"><img src="%상대방사진%" style="width:40px;height:40px;" class="w3-round-jumbo" /></a> <img src="%상대방사진%" class="w3-circle" style="display:none;" id="photo_%방번호%" />'; } $html = ' <div id="talk_box" style="position:fixed;z-index:10000000000000;"></div> <div id="talk_html_box" style="height:100%;"> <div id="talk_room_%방번호%" style="'.$style_1.'display:none;position:fixed;%포지션%;"> <div style="'.$style_2.'border:1px solid #c1c1c1;"> <div style="line-height:30px;background-color:#ABC3D9;text-align:center;cursor:move;" id="talk_room_title_%방번호%"> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td width="10%"></td> <td width="80%"> <div><b style="font-weight:bold;">%상대방닉네임%</b> 님과의 대화</div> <div style="font-weight:bold;" id="talk_company_%방번호%">%컴파니네임%</div> </td> <td width="10%" align="right" style="padding-right:10px;"> <i class="fa fa-times" aria-hidden="true" style="cursor:pointer;" id="talk_close_%방번호%" '.$script_1.'></i> </td> </tr> </table> </div> <div id="talk_contentbox_%방번호%" style="height:100%;"> <div style="background-color:#B4CDE5;'.$style_3.';overflow-y:auto;" id="talk_content_%방번호%"></div> <div> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" style="background-color:#FFF;height:70%;"> <textarea style="width:100%;height:57px;font-size:12px;color:#000;box-sizing: border-box;-webkit-box-sizing:border-box;-moz-box-sizing: border-box;padding:5px;border:0px;" id="chatbox_%방번호%"></textarea> </td> </tr> <tr> <td width="50%" valign="top"> <div style="position:relative;"> <form action="action.php?c=chating&f=proc" id="talk_form_%방번호%" method="post" enctype="multipart/form-data"> <input type="hidden" name="type" value="image_upload" /> <input type="file" name="image" id="talk_image_%방번호%" style="width:100%;height:30px;position:absolute;top:0px;left:0px;z-index:10;opacity:0;filter:alpha(opacity=0);cursor:pointer;" /> </form> <input type="button" style="position:absolute;top:0px;left:0px;width:100%;height:30px;background-color:#efefef" value="사진첨부" class="w3-btn w3-indigo" /> </div> </td> <td width="50%"> <input type="button" class="w3-btn" value="전송" style="width:100%;height:30px;" id="talk_submit_%방번호%" /> </td> </tr> </table> </div> </div> </div> </div> <div style="display:none;" id="talk_me_%방번호%"> <div style="padding:2px 10px;" class="talk_me" primary_number="%고유번호%"> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td align="right"> <span style="display:inline-block;font-size:11px;"> <span style="color:yellow;"> <span class="is_read">%읽음%</span> </span> <br> %작성시간% </span> <span style="display:inline-block;padding:10px;font-size:11px;word-break: break-all;" class="bubble_right"> %메세지% </span> </td> </tr> </table> </div> </div> <div style="display:none;" id="talk_other_%방번호%"> <div style="padding:5px 10px;"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td align="left" rowspan="2" width="40" valign="top">'.$tag_1.'</td> <td align="left" style="padding-left:10px;color:#333333;font-size:11px;">%닉네임%</td> </tr> <tr> <td align="left" style="padding-left:10px;"> <span style="padding:10px;display:inline-block;font-size:11px;word-break: break-all;" class="bubble_left">%메세지%</span> <span style="font-size:11px;">%작성시간%</span> </td> </tr> </table> </div> </div> </div> <div class="modal fade" id="model_chating_photo"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="width:30px;height:30px;"> <span aria-hidden="true" style="font-size:30px;">×</span></button> </div> <div class="modal-body text-center"> <img src="" id="chating_photo_box" /> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-raised" data-dismiss="modal"><i class="fa fa-remove"></i> 닫기</button> </div> </div> </div> </div> '; return $html; } | cs |