github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/themes/wind/templates/connect.html (about)

     1  {% extends "base.html" %}
     2  {% block title %}
     3  <title>即时聊天 - {{SiteName}}</title>
     4  {% endblock title %}
     5  {% block js %}
     6      <script src="/js/app.js?wind"></script>
     7      <script src="/js/wind.js?wind"></script>
     8      {% if IsSigned %}<script src="/js/signed.js"></script>{% endif %}
     9      <!--[if lt IE 9]>
    10      <script src="/js/ie/html5shiv.js"></script>
    11      <script src="/js/ie/respond.min.js"></script>
    12      <script src="/js/ie/excanvas.js"></script>
    13      <![endif]-->
    14      {% if allow and receiver %}
    15      <script src="/libs/tinymce/tinymce.min.js"></script>
    16      <script src="/libs/sockjs-client-1.1.0/dist/sockjs-1.1.0.min.js"></script>
    17      <script type="text/javascript">
    18          tinymce.init({
    19              selector: ".sendbox",
    20              relative_urls:false,
    21              menubar : false,
    22              height : "48",
    23              statusbar : false,
    24              language: 'zh_CN',
    25              theme: "modern",
    26              skin : 'lightgray',
    27              extended_valid_elements: "video[*],audio[*],object[data|width|height|classid|codebase],param[name|value],embed[src|type|width|height|align|flashvars|wmode|quality|allowfullscreen|allowscriptaccess]",
    28              plugins: [
    29                      "advlist autolink lists link image charmap print preview hr anchor pagebreak",
    30                      "searchreplace visualblocks visualchars code fullscreen",
    31                      "insertdatetime media nonbreaking save table contextmenu directionality",
    32                      "emoticons paste textcolor colorpicker textpattern imagetools jbimages"
    33              ],
    34              toolbar: "undo redo | styleselect bullist numlist table outdent indent pagebreak hr | insertdatetime emoticons charmap | searchreplace visualblocks code | link image jbimages media",
    35              setup : function(editor) {
    36                  editor.on('keydown', function(e){
    37                      if ((tinymce.isMac ? e.metaKey : e.ctrlKey) && e.keyCode == 13){
    38                          $("#b").click();return false;
    39                          };
    40                      });
    41                  }
    42          });
    43      var sock;
    44      window.onload=function(){
    45  
    46          if (!window.location.origin) {
    47              window.location.origin = window.location.protocol + '//' + window.location.hostname + (window.location.port ? (':' + window.location.port) : '');
    48          }
    49  
    50          sock = new SockJS(window.location.origin+'/sock/?sender={{SignedUser.Username}}&receiver={{receiver}}&token={{token}}');
    51          sock.onopen = function() {
    52              if (!$("section").hasClass("panel-success")) {
    53                  $("section").addClass("panel-success");
    54              }
    55              $('form').submit(function(){
    56                  var content = tinymce.get('sendbox').getContent();
    57                  if (content){sock.send(content);}
    58                  return false;
    59              });
    60          };
    61  
    62          sock.onmessage = function(e){
    63              var newMessage = $('<div>').html(e.data);
    64              var m=$("#messages");
    65              m.append(newMessage);
    66              tinymce.get('sendbox').setContent('');
    67              var s=document.getElementById("messages");
    68              s.scrollTop=s.scrollHeight;
    69          };
    70  
    71          sock.onclose = function() {
    72              if ($("section").hasClass("panel-success")) {
    73                  $("section").removeClass("panel-success");
    74              }
    75              $("section").addClass("panel-danger");
    76              $("#b").addClass("disabled");
    77              tinymce.activeEditor.getBody().setAttribute('contenteditable', false);
    78              var body = $('<h4>').html("{{SiteName}}聊天服务连接中断..").addClass("alert alert-danger alert-dismissible");
    79              var m=$("#messages");
    80              m.append(body);
    81              var s=document.getElementById("messages");
    82              s.scrollTop=s.scrollHeight;
    83          };
    84  
    85          sock.onerror = function() {
    86              console.log("onerror");
    87          };
    88      }
    89      window.onbeforeunload = function(event) {
    90          sock.close();
    91      }
    92      </script>
    93      {% endif %}
    94  {% endblock js %}
    95  {% block content %}
    96      <div id="content" class="col-lg-9">
    97      {% include "msgerr.html" %}
    98      {% if allow and recipient %}
    99          <section id="mbox" class="panel{% if receiver %} panel-success{% else %} panel-default{% endif %}">
   100              <header class="panel-heading" style="padding:0;margin:0;">
   101                  <section id="nbox" class="panel{% if receiver %} panel-success{% else %} panel-default{% endif %}" style="margin:0;">
   102                      <header class="panel-heading" style="padding-bottom:0;margin-bottom:0;">
   103                          <a href="/user/{{recipient.Username}}/" class="pull-left">
   104                          <img style="width:48px;height:48px;margin-right:1em;" src="{% if recipient.AvatarMedium %}{{File(recipient.AvatarMedium)}}{% else %}/identicon/{{recipient.Username}}/48/default.png{% endif %}" alt="..."></a>
   105                          <div class="pull-left" style="line-height:28px;">
   106                              <span>{% if receiver %}与[{{receiver}}]聊天中..{% else %}即时聊天{% endif %}</span>
   107                              <p>{% if recipient.Content %}{{recipient.Content}}{%else%}有兴趣的话，不如今晚再相逢～{% endif %}</p>
   108                          </div>
   109                          <div style="clear:both;"></div>
   110                      </header>
   111                  </section>
   112              </header>
   113              <section class="panel-body messages" id="messages"></section>
   114              <footer class="panel-footer">
   115                  <form class="nomargin m-b-none" id="sendform">
   116                      <input type="hidden" id="curuser" name="curuser" value="insion"/>
   117                      <textarea class="sendbox" name="sendbox" id="sendbox"></textarea>
   118                      <div style="padding-top:.5em;">
   119                          <span class="pull-left" style="line-height:45px;">[快捷按键]：Ctrl+Enter&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发表言论请遵守当地国家法律</span>
   120                          <span class="btn-group pull-right">
   121                              <a href="/contact/" class="btn btn-s-md btn-default btn-rounded"> <i class="icon-chevron-sign-left"></i> 关闭 </a>
   122                              <button type="submit" class="btn btn-s-md btn-default btn-rounded" id="b">
   123                                  发送&nbsp;&nbsp; <i class="icon-chevron-sign-right"></i>
   124                              </button>
   125                          </span>
   126                          <div style="clear:both;"></div>
   127                      </div>
   128                  </form>
   129              </footer>
   130          </section>
   131      {% endif %}
   132      </div>
   133  {% endblock content %}
   134  
   135  {% block sidebar %}{% include "contact-sidebar.html" %}{% endblock sidebar %}