@tomiaa/comment/lib/index.js

基于 gitee Issue 评论的 JS 插件库

"use strict";var u=Object.defineProperty;var d=(i,e,t)=>e in i?u(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t;var n=(i,e,t)=>(d(i,typeof e!="symbol"?e+"":e,t),t);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("axios"),m=require("@tomiaa/utils");require("./index.scss.js");const c=m.createNamespacs("comment"),f=p.create({baseURL:"https://gitee.com/"}),a=async i=>{const{data:e}=await f(i);return e};class l{constructor(e){n(this,"userInfo",null);n(this,"el",null);n(this,"textarea",document.createElement("textarea"));n(this,"button",document.createElement("button"));n(this,"ul",document.createElement("ul"));n(this,"list",[]);n(this,"number","");this.options=e}async init(){var s,o,r;this.textarea=document.createElement("textarea"),this.ul=document.createElement("ul"),this.button=document.createElement("button"),this.list=[],this.number="";const e=(r=(o=(s=location.search.match(/code=[^&]+/))==null?void 0:s[0])==null?void 0:o.split("="))==null?void 0:r[1];e&&await this.getToken(e);const t=JSON.parse(localStorage.getItem("comment"));if(!t){!e&&await this.getList();return}+new Date(t.expires_in+t.created_at)*1e3>Date.now()?(this.userInfo=t,await this.getList()):+new Date(t.expires_in+t.created_at)*1e3+864e5>Date.now()&&await this.refreshToken()}login(){location.href=`https://gitee.com/oauth/authorize?client_id=${this.options.client_id}&redirect_uri=${location.origin}&response_type=code`}async getToken(e){const t=await a({method:"post",url:"/oauth/token",params:{grant_type:"authorization_code",code:e,client_id:this.options.client_id,redirect_uri:location.origin},data:{client_secret:this.options.client_secret}});history.pushState({},"",location.href.replace(location.search,"")),localStorage.setItem("comment",JSON.stringify(t)),this.userInfo=t,this.button.innerHTML=this.userInfo?"发表评论":"使用 Gitee 登录",this.button.disabled=!!this.userInfo,await this.getList()}async refreshToken(){var t;const e=(t=this.userInfo)==null?void 0:t.refresh_token;localStorage.removeItem("comment"),await a({url:"/oauth/token",params:{grant_type:"refresh_token",refresh_token:e}})}async mount(e){if(this.el=typeof e=="string"?document.querySelector(e):e,!this.el)return;this.init(),this.textarea.placeholder="使用 gitee 登录发布评论",this.el.classList.add(c.b()),this.el.innerHTML="",this.textarea.classList.add(c.e("textarea")),this.textarea.oninput=()=>{this.userInfo&&(this.button.disabled=!this.textarea.value)},this.el.appendChild(this.textarea);const t=document.createElement("div");t.className=c.e("login"),this.button.innerHTML=this.userInfo?"发表评论":"使用 Gitee 登录",this.button.onclick=()=>{this.userInfo?this.publish.call(this):this.login.call(this)},t.appendChild(this.button),this.el.append(t)}async getList(){var t,s,o,r;const e=await a({url:"/api/v5/search/issues",params:{access_token:(t=this.userInfo)==null?void 0:t.access_token,q:`${this.options.prefix}${document.title}`,per_page:1,repo:this.options.owner+"/"+this.options.repo}});if(((s=e[0])==null?void 0:s.title)!==`${this.options.prefix}${document.title}`){const h=await a({method:"post",url:`/api/v5/repos/${this.options.owner}/issues`,data:{access_token:(o=this.userInfo)==null?void 0:o.access_token,repo:this.options.repo,title:`${this.options.prefix}${document.title}`,body:location.href}});this.number=h.number}else this.number=e[0].number;this.list=await a({url:`/api/v5/repos/${this.options.owner}/${this.options.repo}/issues/${this.number}/comments`,params:{access_token:(r=this.userInfo)==null?void 0:r.access_token}}),this.el&&(this.ul.classList.add(c.e("ul")),this.el.appendChild(this.ul),this.ul.innerHTML="",this.renderList(this.list.splice(0,6)),document.addEventListener("scroll",this.onScroll.bind(this)))}renderList(e){let t="";e.forEach(s=>{t+=`
      <li>
        <div class="user">
          <a href="${s.user.html_url}" target="_blank">
            <img
              src="${s.user.avatar_url}"
              alt=""
            />
            <p class="name">${s.user.name}</p>
          </a>
        </div>
        <div class="body">
          <div class="info">${s.body}</div>
          <time>${this.formatTime(s.updated_at)}</time>
        </div>
      </li>
      `}),this.ul.innerHTML+=t}onScroll(){var t;const e=document.documentElement;e.scrollHeight-e.scrollTop-e.clientHeight<20&&((t=this.list)!=null&&t.length?this.renderList(this.list.splice(0,6)):document.removeEventListener("scroll",this.onScroll))}formatTime(e){const t=new Date(e),s=o=>String(o).padStart(2,"0");return`${s(t.getFullYear())}-${s(t.getMonth()+1)}-${s(t.getDate())} ${s(t.getHours())}:${s(t.getMinutes())}:${s(t.getSeconds())}`}async publish(){var t;if(!this.textarea.value)return;const e=await a({method:"post",url:`/api/v5/repos/${this.options.owner}/${this.options.repo}/issues/${this.number}/comments`,data:{access_token:(t=this.userInfo)==null?void 0:t.access_token,body:this.textarea.value}});this.textarea.value="",this.renderList([e])}}exports.Comment=l;exports.default=l;