widgets/luis_chat/include/template/index.tmpl.html

   1 /**
   2  * 表示データ作成用テンプレート(patTemplate)
   3  *
   4  * LICENSE: This source file is licensed under the terms of the GNU General Public License.
   5  *
   6  * @package    Magic3 Framework
   7  * @author     平田直毅(Naoki Hirata) <naoki@aplo.co.jp>
   8  * @copyright  Copyright 2006-2018 Magic3 Project.
   9  * @license    http://www.gnu.org/copyleft/gpl.html  GPL License
  10  * @version    SVN: $Id$
  11  * @link       http://www.magic3.org
  12  */
  13 <patTemplate:tmpl name="_widget">
  14 <script type="text/javascript">
  15 //<![CDATA[
  16 $(function(){
  17         // FontAwesomeのクラスが未定義の場合は動的にCSSを読み込む
  18         var faSpan = $('<span class="fa" style="display:none"></span>').appendTo('body');
  19         var fontFamily = faSpan .css('font-family');
  20         if (fontFamily.indexOf('Font Awesome') == -1){
  21                 var style = '<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">';
  22                 $('head link:last').after(style);
  23         }
  24         faSpan.remove();
  25
  26         var initCompleted = false;              // 初期化状態
  27         var html = '';
  28         html += '<div id="repl_chat">';
  29         html += '<div class="row border-chat">';
  30         html += '<div class="col-md-12 col-sm-12 col-xs-12 first-section">';
  31         html += '<div class="row">';
  32         html += '<div class="col-md-8 col-sm-6 col-xs-6 left-first-section">';
  33         html += '<p>Chat</p>';
  34         html += '</div>';
  35         html += '<div class="col-md-4 col-sm-6 col-xs-6 right-first-section">';
  36         html += '<a href="javascript:void(0);" id="chat_open_panel"><i class="fa fa-minus" aria-hidden="true"></i></a>';
  37         html += '</div>';
  38         html += '</div>';
  39         html += '</div>';
  40         html += '</div>';
  41         html += '<div class="row border-chat">';
  42         html += '<div class="col-md-12 col-sm-12 col-xs-12 second-section">';
  43         html += '<div id="chat-section" class="chat-section">';
  44         html += '<ul id="chat_body">';
  45         html += '</ul>';
  46         html += '</div>';
  47         html += '</div>';
  48         html += '</div>';
  49         html += '<div class="row border-chat">';
  50         html += '<div class="third-section text-bar">';
  51         html += '<form action="#" method="post" id="chat_form">';
  52         html += '<input type="hidden" id="chat_token" value="{TOKEN}">';
  53         html += '<input type="text" id="chat_message" placeholder="メッセージをどうぞ">';
  54         html += '</form>';
  55         html += '</div>';
  56         html += '<div class="text-right text-bar-icon"><a href="javascript:void(0);" id="chat_sendmessage"><i class="fa fa-arrow-right" aria-hidden="true"></i></a></div>';
  57         html += '</div>';
  58         html += '</div>';
  59         $("body").append(html);
  60
  61         // チャット初期処理
  62         function init()
  63         {
  64                 if (initCompleted) return;              // 初期化状態
  65
  66                 // チャット初期化
  67                 m3_ajax_request('repl_chat', 'act=chatinit&token=' + $('#chat_token').val(), function(request, retcode, jsondata){              // 正常終了
  68                         // 返答メッセージを表示
  69                         if (jsondata.message){
  70                                 if (jsondata.message != ''){
  71                                         var messageHtml = '';
  72                                         messageHtml += '<li>';
  73                                         messageHtml += '<div class="left-chat">';
  74                                         messageHtml += '<img src="{BOT_AVATAR}">';
  75                                         messageHtml += '<p>' + jsondata.message + '</p>';
  76                                         //messageHtml += '<span>2 min</span>
  77                                         messageHtml += '</div>';
  78                                         messageHtml += '</li>';
  79                                         $("#chat_body").append(messageHtml);
  80                                         $('#chat-section').animate({scrollTop: $('#chat-section')[0].scrollHeight}, 'fast');
  81                                 }
  82                         }
  83                         initCompleted = true;                   // 初期化終了
  84                 }, function(request){           // 異常終了
  85                         alert('通信に失敗しました。');
  86                 });
  87         }
  88
  89         // メッセージ送信
  90         function send()
  91         {
  92                 var message = $('#chat_message').val();
  93                 if (message == '') return;
  94
  95                 var messageHtml = '';
  96                 messageHtml += '<li>';
  97                 messageHtml += '<div class="right-chat">';
  98                 messageHtml += '<img src="{GUEST_AVATAR}">';
  99                 messageHtml += '<p>' + message + '</p>';
 100                 //messageHtml += '<span>2 min</span>';
 101                 messageHtml += '</div>';
 102                 messageHtml += '</li>';
 103                 $("#chat_body").append(messageHtml);
 104                 $('#chat-section').animate({scrollTop: $('#chat-section')[0].scrollHeight}, 'fast');
 105
 106                 m3_ajax_request('repl_chat', 'act=chatmsg&token=' + $('#chat_token').val() + '&message=' + message, function(request, retcode, jsondata){               // 正常終了
 107                         // 返答メッセージを表示
 108                         if (jsondata.message){
 109                                 if (jsondata.message != ''){
 110                                         messageHtml = '';
 111                                         messageHtml += '<li>';
 112                                         messageHtml += '<div class="left-chat">';
 113                                         messageHtml += '<img src="{BOT_AVATAR}">';
 114                                         messageHtml += '<p>' + jsondata.message + '</p>';
 115                                         //messageHtml += '<span>2 min</span>
 116                                         messageHtml += '</div>';
 117                                         messageHtml += '</li>';
 118                                         $("#chat_body").append(messageHtml);
 119                                         $('#chat-section').animate({scrollTop: $('#chat-section')[0].scrollHeight}, 'slow');
 120                                 }
 121                         }
 122                         $('#chat_message').val('');
 123                 }, function(request){           // 異常終了
 124                         alert('通信に失敗しました。');
 125                 });
 126         }
 127
 128         $(".left-first-section").click(function(){
 129                 init();
 130                 $('#repl_chat').toggleClass("open-chat");
 131         });
 132         $("#chat_open_panel").click(function(){
 133                 init();
 134                 $('#repl_chat').toggleClass("open-chat");
 135         });
 136
 137         // メッセージ送信処理
 138         $("#chat_sendmessage").click(function(){
 139                 send();
 140         });
 141         $('#chat_form').submit(function(){
 142                 send();
 143                 return false;                   // SUBMITは行わない
 144         });
 145
 146 <patTemplate:tmpl name="show_panel_open" visibility="hidden">
 147         // パネルオープンでの初期化
 148         $('#repl_chat').toggleClass("open-chat");
 149
 150         // チャット開始
 151         init();
 152 </patTemplate:tmpl>
 153 });
 154 //]]>
 155 </script>
 156 </patTemplate:tmpl>