显示emoji，支持gif

2 years ago · 25895da9bd
--- a/static/index.html
+++ b/static/index.html
@ -149,6 +149,10 @@
      margin: 10px auto;
    }

    .emoji {
      width: 48px;
      vertical-align: bottom;
    }
    #statuses-list .invisible {
      font-size: 0;
      line-height: 0;
@ -161,7 +165,6 @@
    #statuses-list .ellipsis::after {
      content: "...";
    }

  </style>
 </head>

@ -242,6 +245,17 @@
    });
  }


  function render_content(text, is_mask_bot, emojis) {
    if (is_mask_bot) {
      text = text.replace(/^<p>\[([^\]]*)\]:<br \/>/, '<p>').replace(/匿了<\/p><\/div>$/, '</p></div>');
    }
    emojis.forEach((emoji) => {
      text = text.replaceAll(`:${emoji.shortcode}:`, `<img class="emoji" src="${emoji.url}">`);
    });
    return text;
  }

  function make_status_box_html(status) {
    return (`
      <div class="qbox" id="status-${status.id.toString()}">
@ -254,8 +268,7 @@
        ${status.reblog && (status = status.reblog) && 
          `<small> 转发 @${status.account.acct}</small>` || ''}
        <div class="content">
          ${status.account.acct === "mask_bot" ?
            status.content.replace(/^<p>\[([^\]]*)\]:<br \/>/, '<p>') : status.content}
          ${render_content(status.content, status.account.acct === "mask_bot", status.emojis)}
        </div>
        ${status.media_attachments.map((media) => {
          switch (media.type) {
@ -263,6 +276,8 @@
              return `<image class="status-media" src=${media.url}>`;
            case 'video':
              return `<video class="status-media" src=${media.url} controls></video>`;
            case 'gifv':
              return `<video class="status-media" src=${media.url} autoplay loop></video>`;
            default:
              return '';
          }
@ -422,7 +437,6 @@
    $('.grey_theme').click((e) => {
      $('body').toggleClass("grey");
    });

 });
 </script>

--- a/templates/list.html
+++ b/templates/list.html
@ -1,493 +0,0 @@
 <!DOCTYPE html>
 <html lang="zh-CN">

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="icon" type="image/png" href="/img/ord/icon-128.png" />
  <link href="https://fonts.yecdn.com/css2?family=Noto+Serif+SC:wght@300;700&display=swap" rel="stylesheet">
  <link href="https://fonts.yecdn.com/css2?family=Noto+Sans+SC&display=swap" rel="stylesheet">
  <meta property="og:title" content="华清大学特普通奖学金 报名页面" />
  <meta property="og:description" content="华清大学特普通奖学金" />
  <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  <title>华清大学特普通奖 报名页面</title>
    <script>
      if(navigator.userAgent.search('MicroMessenger') !== -1)
 	      location.href = `https://closed.social/tools/safe_jump/?go=${encodeURIComponent(location.href)}&t=${encodeURIComponent('华清大学特普通奖学金')}`;
    </script>
  <style>
    body {
      background: linear-gradient(-45deg, #fff calc(50% - 1px), #eee calc(50%), #fff calc(50% + 1px) );
      background-size: 6px 5px;
      font-family: 'Noto Sans SC', sans-serif;
    }

    body,
    pre {
      font-family: 'Noto Sans SC', sans-serif;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .sort-by{
      font-family: 'Noto Serif SC', serif;
      font-weight: 300;
    }

    .sort-by b {
      font-weight: 700;
    }

    a,
    a:hover,
    .btn-link,
    .btn-link:hover {
      color: inherit;
      text-decoration: underline;
    }

    nav .page-link {
      color: #000;
    }

    nav .page-item.active .page-link {
      background-color: #000;
      border-color: #000;
    }

    .btn-lg {
      font-size: 2em;
      font-family: 'Noto Serif SC', serif;
    }

    .verify-box {
      padding: 20px;
      background-color: #8884;
      margin: 20px;
    }

    .step2-info{
      background-color: #eee9;
      padding: 10px;
      overflow: hidden;
    }

    {% if step2 %}
    @media screen and (max-width: 600px) {
      .part1 {
        display: none;
      }
    }
    {% endif %}

    .part1 {
      max-width: 500px;
      float: left;
      padding-right: 10px;
      position: relative;
    }

    .part2 {
      min-width: 200px;
      overflow: hidden;
      padding-left: 25px;
    }

    .qbox {
      border: 2px black solid;
      background: white;
      padding: 5px;
      color: black;
      margin: 5px 5px 40px;
    }

    .qbox.qbox-grey {
      background: #eee;
    }

    .new .qbox {
      background: black;
      color: white;
    }

    .judge .qbox {
      background: white;
      color: black;
      padding: 5px 15px;
    }

    .twin.new .qbox input,
    .twin.new .qbox textarea {
      border-bottom: 2px solid;
      background: black;
      color: white;
    }

    .verify-box input {
      background: #0000;
      padding: 0;
    }

    .verify-box input,
    .twin .qbox input,
    .twin .qbox textarea {
      border: none;
      border-bottom: 1px solid;
      border-radius: 0;
    }

    .qbox .inner {
      margin: 15px 0 20px 15px;
      white-space: pre-wrap;
    }

    .like {
      fill: #fff;
    }

    .liked {
      fill: #000;
    }

    .timeago {
      font-size: 0.5em;
      margin-right: 10px;
    }

    .display_name {
      margin: 0;
    }

    .card-body {
      padding: 0.75em;
    }

    .behind {
      z-index: 98;
      cursor: pointer;
      transform: translateY(5px) scale(0.98);
      transform-origin: top;
      transition-property: transform;
      transition-duration: 0.5s;
    }

    .front {
      z-index: 99;
      transition-property: transform;
      transition-duration: 0.5s;
    }

    .judge {
      position: absolute;
      top: 0;
      right: 0;
      margin: 0 0 30px 20px;
      width: 90%;
    }
    .twin {
      overflow: hidden;
    }

    .new {
      position: relative;
      margin: 30px 20px 30px 0;
    }

    .twin-collapse {
      max-height: 360px;
    }

    .show-mask {
      display: block;
      position: absolute;
      top: 20px;
      right: 35px;
      text-align: center;
      padding-top: 330px;
      width: 100%;
      z-index: 999;
    }

    .footer {
      background: black;
      color: white;
      text-align: center;
      font-size: 80%;
      border-top: solid 1px white;
    }

    .footer p {
      margin: 10px 0 0;
      float: bottom;
    }

    @keyframes loop {
      0% {
        transform: translateX(100%);
      }
      100% {
        transform: translateX(-50%);
      }
    }
  </style>
 </head>

 <body>
  <div class="container" style="overflow: hidden;min-height: 100vh">
    <div style='padding:15px'>
      <img src="/img/ord/logo.png" width="200px" />
    </div>


    <div class="part1">
    {% if not verified %}
    <form action="verify" method="post" class="verify-box">
      <p>提名阶段已经结束，不过完成简易验证后，你依然可以于此畅所欲言或加入评委群。</p>
      <hr>
      {% for v in vs %}
      <div class="form-group row">
        <label for="{{v.name}}" class="col-sm-8 col-form-label">{{v.ques}}</label>
        <div class="col-sm-4">
          <input type="text" class="form-control" name="{{v.name}}" placeholder="{{v.hint}}" required="required">
        </div>
      </div>
      {% endfor %}
      <button type="submit" class="btn btn-link btn-lg">提交</button>
    </form>
    {% else %}

      <div id="new" class="new twin front">
        <form action="new" method="post">
          <div class="form-group qbox">
            <h1 style="margin: -14px -13px 20px">自荐提名</h1>
            <textarea class="form-control" name="text" rows="5" maxlength="4000" placeholder="{{text1}}" required="required"></textarea>
            <hr />
            <textarea class="form-control" name="privateText" rows="4" maxlength="1000" placeholder="{{text2}}"></textarea>
            <hr />
            <div class="form-group row">
              <label for="url" class="col-sm-3 col-form-label">补充材料</label>
              <div class="col-sm-9">
                <input type="url" class="form-control" id="url" name="url" placeholder="清华云盘或safeShare链接，https://开头" pattern="https://(cloud\.tsinghua\.edu\.cn/f/[0-9a-z]+/(\?dl=1)?|closed\.social/safeShare/\d([a-zA-Z]+)?)">
              </div>
            </div>
            <button type="submit" class="btn btn-link btn-lg">报名</button>
          </div>
        </form>

        <div style="font-size:80%;">
          <ul>
            <li>如需附上补充材料，请使用清华云盘。为了避免泄露姓名推荐使用<a href="/safeShare" target="_blank">safeShare</a>。其他云盘是不被接受的。</li>
            <li>需要回答几个简单的问题以初步验证学生身份，入围后的线上答辩环节将于<a href="https://thu.closed.social/">闭社</a>平台进行（需清华邮箱注册）以正式验证身份。</li>
            <li>获得五个赞并留下联系方式（如微信号、手机号或邮箱）者被视为正式提名，会有工作人员与之联系并发放奖品。</li>
            <li>点击倒三角按钮展开评论，发布评论请前往<a href="https://thu.closed.social/">闭社</a>。</li>
            <li>如需删除报名，请联系工作人员（微信:ordinary_thuer）。</li>
          </ul>
        </div>

      </div>

      <div class="judge twin behind">
        <form action="judge" method="post">
          <div class="form-group qbox">
            <h1 style="text-align:right;margin:-12px -20px 16px">成为评委</h1>
            <div style="font-size:80%">
              <p>为了更好地选出十位普通人的代表，为了更好地展现大众的声音，我们希望招募更多的评委。</p>
              <p>成为评委的条件：</p>
              <ul>
                <li>是华清大学在读学生</li>
                <li>没有报名参选</li>
                <li>愿意对报名者进行评分</li>
              </ul>
              <p>我们原则上不拒绝任何的评委报名。</p>
              <p>目前在三个平台上建了三个评委群，分别是闭聊(Matrix)，Telegram，微信。前两个消息自动同步，加入哪个都是等价的，微信群与另外两个群不连通。(注意Telegram墙内不可直接访问。闭聊由闭社提供，使用闭社帐号登陆，如使用其他服务器上的Matrix帐号加群需要验证华清身份。)</p>
              <p>选择想加入的群，完成验证，进入评委群。如果不愿意加群，也可以私信主办方保持沟通和上传打分结果。</p>
            </div>

            <div style="text-align:center">
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="groupType" value="mx" required>
                <label class="form-check-label" for="mx">闭聊</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="groupType" value="tg" required>
                <label class="form-check-label" for="tg">Telegram</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="groupType" value="wx" required>
                <label class="form-check-label" for="wx">微信</label>
              </div>
            </div>
            <button type="submit" class="btn btn-link btn-lg">进群</button>
          </div>
        </form>
      </div>
    {% endif %}
    </div>

    <div class="part2" id="part2">
      <div style="display:flex;justify-content:space-between;align-items: flex-end">
      <h1>已有报名</h1>
      <span style="margin:8px" class="sort-by">
        {% if final_list %}
        <a href="?sort_by={{sort_by}}&final_list=#part2">全部</a> | <b>仅入围</b>
        {% else %}
        <b>全部</b> | <a href="?sort_by={{sort_by}}&final_list=1#part2">仅入围</a>
        {% endif %}
        <br>
        {% if sort_by == 'likeNum' %}
        <a href="?sort_by=time&final_list={{final_list}}#part2">按时间</a> | <b>按赞数</b>
        {% else %}
        <b>按时间</b> | <a href="?sort_by=likeNum&final_list={{final_list}}#part2">按赞数</a>
        {% endif %}
      </span>
      </div>
      {% for c in pagination.items %}
      <div class="qbox {{'qbox-grey' if step2.get('end') and c.id > step2['end'] else ''}}">
        <small>No. {{c.id}}</small>
        <pre class="inner">{{c.content}}</pre>
        {% if showPrivate %}
        <hr />
        <pre class="inner">{{c.private}}</pre>
        <hr />
        {% endif %}
        {% if c.url %}
        <p class="inner"><a href="{{c.url}}" target="_black">补充材料</a></p>
        {% endif %}
        <div style="text-align:right;margin: 27px 0 -5px">
          <time class="timeago" datetime="{{c.time}}"></time>
          <a href="##" class="btn btn-link" id="like-{{c.toot}}" onClick="like('{{c.toot}}')" style="text-decoration: none;">
            <svg viewBox="-20 0 552 512" height="16" class="{{c.liked}}">
              <path stroke="#000" stroke-width="30" d="M474.644,74.27C449.391,45.616,414.358,29.836,376,29.836c-53.948,0-88.103,32.22-107.255,59.25
                            c-4.969,7.014-9.196,14.047-12.745,20.665c-3.549-6.618-7.775-13.651-12.745-20.665c-19.152-27.03-53.307-59.25-107.255-59.25
                            c-38.358,0-73.391,15.781-98.645,44.435C13.267,101.605,0,138.213,0,177.351c0,42.603,16.633,82.228,52.345,124.7
                            c31.917,37.96,77.834,77.088,131.005,122.397c19.813,16.884,40.302,34.344,62.115,53.429l0.655,0.574
                            c2.828,2.476,6.354,3.713,9.88,3.713s7.052-1.238,9.88-3.713l0.655-0.574c21.813-19.085,42.302-36.544,62.118-53.431
                            c53.168-45.306,99.085-84.434,131.002-122.395C495.367,259.578,512,219.954,512,177.351
                            C512,138.213,498.733,101.605,474.644,74.27z" />
            </svg>
            <span>
              {{c.likeNum}}
            </span>
          </a>
          <a class="btn btn-link request-answer" data-toggle="collapse" href="#collapse-{{c.toot}}" role="button" aria-expanded="false" aria-controls="collapse-{{c.toot}}">
            <svg fill="#000" viewBox="0 24 24 20" height="16">
              <path d="m0 24 l12 18 l12 -18 z"></path>
            </svg>
          </a>
        </div>
        <div class="collapse" id="collapse-{{c.toot}}">
          <div class="card card-body">
            加载中...
          </div>
        </div>
      </div>
      {% endfor %}

      <nav>
        <ul class="pagination">
          {%- for page in pagination.iter_pages(left_edge=2, left_current=1, right_current=3, right_edge=2) %}
          {% if page %}
          {% if page != pagination.page %}
          <li class="page-item"><a class="page-link" href="{{ url_for('can_list', page=page, per_page=pagination.per_page, key=key, sort_by=sort_by) }}">{{ page }}</a></li>
          {% else %}
          <li class="page-item active">
            <a class="page-link" href="#">{{ page }}<span class="sr-only">(current)</span></a>
          </li>
          {% endif %}
          {% else %}
          <li class="page-item"><span class=ellipsis>...</span></li>
          {% endif %}
          {%- endfor %}
        </ul>
      </nav>

    </div>

  </div>
  <div class="footer">
    <p>
    由<a href="//closed.social" target="_blank">闭社</a>提供技术支持,本报名系统开源于<a href="//git.closed.social/closed-social/ordinary">碧茶</a>。
    </p>
    <p> 🄯 2020 Copyleft: closed.social</p>
  </div>
 </body>

 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
 <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery-timeago/1.6.7/jquery.timeago.min.js"></script>
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery-timeago/1.6.7/locales/jquery.timeago.zh-CN.js"></script>

 <script>
  function like(toot) {
    if ($(`#like-${toot} svg`).hasClass("liked")) {
      alert('赞都赞了，别撤回嘛');
      return;
    }
    $.ajax({
      type: 'POST',
      url: toot + '/like',
      success: (result, status, xhr) => {
        console.log(result + ' : ' + status);
        $(`#like-${toot} span`).text(result);
        $(`#like-${toot} svg`).toggleClass("like liked");
      },
      error: (xhr, status, error) => {
        alert(error + ': ' + xhr.responseText);
      }
    });
  }

 $(document).ready(function(){
  $('.timeago').timeago();

  $('.close').click((e) => {
    $(e.currentTarget).parent().remove();
    $('.part1').show();
  });

  $('.twin').click((e) => {
    if($(e.currentTarget).hasClass('front'))
      return;
    let behind_box = $('.behind');
    let front_box = $('.front');
    behind_box.toggleClass('behind front');
    front_box.toggleClass('front behind');
  });

  $('.collapse').on('show.bs.collapse', (e) => {
    let self = e.target;
    let toot = self.id.split('-')[1];
    $.ajax({
      type: 'GET',
      url: toot + '/comments',
      success: (result, status, xhr) => {
        if (result.replies.length) {
          $(self).empty();
          result.replies.forEach((rp) => {
            $(self).append(`<div class="card card-body"><p class="display_name"><a href="${rp.url}">${rp.disp}</a>:</p><pre class="inner">${rp.content}</pre><time class="timeago" datetime="${rp.time}"></time></div>`)
          });
          $(self).find('.timeago').timeago();
        } else {
          $(self).empty();
          $(self).append(`<div class="card card-body"><p>(暂无评论) <sub><a target="_blank" href="{{base_toot_url}}${toot}">发表第一条评论</sub></p></div>`)
        }
      },
      error: (xhr, status, error) => {
        console.log(error, status, xhr.status, xhr.responseText);
        $(self).empty();
        $(self).append(`<div class="card card-body"><p style="color:red">${xhr.status} ${xhr.responseText}</p></div>`);
        if (xhr.status == 404)
          setTimeout(() => {
            $(self).parent().remove()
          }, 3000);
      }
    });
  });
 });
 </script>

 </html>