@tomiaa/comment
Version:
179 lines (178 loc) • 6.45 kB
JavaScript
import './style.css';
var h = Object.defineProperty;
var u = (i, e, t) => e in i ? h(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
var o = (i, e, t) => (u(i, typeof e != "symbol" ? e + "" : e, t), t);
import d from "axios";
import { createNamespacs as p } from "@tomiaa/utils";
import "./index.scss.js";
const c = p("comment"), m = d.create({
baseURL: "https://gitee.com/"
}), a = async (i) => {
const { data: e } = await m(i);
return e;
};
class $ {
constructor(e) {
// 用户信息
o(this, "userInfo", null);
// 主 dom 元素
o(this, "el", null);
// 输入框
o(this, "textarea", document.createElement("textarea"));
// 登录发布按钮
o(this, "button", document.createElement("button"));
// 评论区域
o(this, "ul", document.createElement("ul"));
// 所有评论
o(this, "list", []);
// Issue number
o(this, "number", "");
this.options = e;
}
async init() {
var s, n, r;
this.textarea = document.createElement("textarea"), this.ul = document.createElement("ul"), this.button = document.createElement("button"), this.list = [], this.number = "";
const e = (r = (n = (s = location.search.match(/code=[^&]+/)) == null ? void 0 : s[0]) == null ? void 0 : n.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, n, 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 l = await a({
method: "post",
url: `/api/v5/repos/${this.options.owner}/issues`,
data: {
access_token: (n = this.userInfo) == null ? void 0 : n.access_token,
repo: this.options.repo,
title: `${this.options.prefix}${document.title}`,
body: location.href
}
});
this.number = l.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 = (n) => String(n).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]);
}
}
export {
$ as Comment,
$ as default
};