社区文档构建进行中,欢迎编辑。社区答疑群(非官方):717421103,点点小课堂(腾讯会议):5696651544

全站通知:

Widget:评论区/js

来自WIKI实验室WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索

<script> class NewWikiComment { sortBy = { by: "time", order: -1 } nb = new NBASE() ngb = new NGBASE() page = mw.config.values.wgPageName uid = getCookie("DedeUserID") cache = { user: {} }

constructor(dom) { this.dom = $(dom) this.dom.data("NWC", this) this.updateUserInfo() this.load().then((res) => { this.show(res) }) }

load() { return this.nb.read(`评论区/${this.page}`).catch((e) => { if (e.code === 201) { this.save([]) return Promise.resolve([]) } }) }

save(body) { if (!this.uid) { return $(".bili-game-header-user-noLogin a img").click() } return this.nb.save(`评论区/${this.page}`, body) }

show(data, dom = this.dom.find(".comment")) { dom.empty() let parentIndex = dom.closest("li").data("index") || [] data.forEach((e, i, a) => { if (e.delete) { return } let index = $.extend([], parentIndex) index.push(i)

let $li = $(`

  • `) $li.data("index", index) let $body = $(`
    `) let $left = $(`
    `) let $right = $(`
    `) let $avatar = $(`
    `) let $nickname = $(`
    `)

    this.getUser(e.uid).then((res) => { $avatar.append(``) $nickname.append(`${res.nickname}`) })

    let $text = $(`
    ${e.text.replace(/</g, "<").replace(/>/g, ">")}
    `) let $foot = $(`
    `) let $info = $(`
    `) let $time = $(`
    ${this.formatTime(e.time)}
    `)

    $info.append($time)

    let $index = $(`
    ${index.map((e) => e + 1).join("-")}
    `)

    $info.append($index)

    let $funBox = $(`
    `) let $like = $(`
    ${e.like.length}
    `)

    if (e.like.includes(this.uid)) { $like.addClass("checked") } $funBox.append($like)

    let $dislike = $(`
    ${-e.dislike.length}
    `)

    if (e.dislike.includes(this.uid)) { $dislike.addClass("checked") } $funBox.append($dislike)

    $funBox.append($(`
    回复
    `))

    if (e.uid === this.uid) {

    $funBox.append($(`
    删除
    `))

    } $foot.append($info, $funBox) $left.append($avatar) $right.append($nickname, $text, $foot) $body.append($left, $right) $li.append($body)

    let $reply = $(`
      `) $li.append($reply) this.show(e.reply, $reply) dom.prepend($li) }) this.sort() this.dom.removeClass("loading") } sort() { let $comment = this.dom.find(".comment") let $li = $comment.children("li") $li.sort((a, b) => { return NewWikiComment.sortFun[this.sortBy.by](a, b) * this.sortBy.order }) $comment.append($li) let $option = this.dom.find(".option .sort") $option.find(".active").removeClass("active") $option.find(`[data-type="by"] [data-value="${this.sortBy.by}"]`).addClass("active") $option.find(`[data-type="order"] [data-value="${this.sortBy.order}"]`).addClass("active") } updateUserInfo() { this.ngb.save(`userInfo/${this.uid}`, { avatar: UserStatus.userInfo.face, nickname: UserStatus.userInfo.uname }) } getUser(uid) { if (!this.cache.user[uid]) { let sSUser = sessionStorage[`NWC_userCache_${uid}`] if (sSUser) { this.cache.user[uid] = Promise.resolve(JSON.parse(sSUser)) } else { this.cache.user[uid] = this.ngb.read(`userInfo/${uid}`).catch(() => { return new Promise((resolve, reject) => { $.getJSON(`https://api.bilibili.com/x/space/acc/info?mid=${uid}`).done((result) => { resolve({ avatar: result.data.face.replace(/^https?:/, ""), nickname: result.data.name }) }) }) }) } } this.cache.user[uid].then((res) => { sessionStorage[`NWC_userCache_${uid}`] = JSON.stringify(res) }) return this.cache.user[uid] } formatTime(time = new Date()) { let date = new Date(time) let YYYY = date.getFullYear() + "" let MM = (date.getMonth() + 1 + "").padStart(2, "0") let DD = (date.getDate() + "").padStart(2, "0") let hh = (date.getHours() + "").padStart(2, "0") let mm = (date.getMinutes() + "").padStart(2, "0") let ss = (date.getSeconds() + "").padStart(2, "0") return `${YYYY}/${MM}/${DD} ${hh}:${mm}:${ss}` } createComment(text) { return { uid: this.uid, text: text, time: new Date().toISOString(), like: [], dislike: [], reply: [] } } submit(text) { this.load().then((body) => { body.push(this.createComment(text)) this.save(body).then(() => { this.show(body) this.dom.find(".input textarea").val("") }).catch((e) => { if (e.code === 102) { this.submit(text) } }) }) } like(index) { this.load().then((body) => { let target = this.findTarget(body, index) let like = target.like let dislike = target.dislike if (like.includes(this.uid)) { like.splice(like.indexOf(this.uid), 1) } else { like.push(this.uid) if (dislike.includes(this.uid)) { dislike.splice(dislike.indexOf(this.uid), 1) } } this.save(body).then(() => { this.show(body) }).catch((e) => { if (e.code === 102) { this.like(index) } }) }) } dislike(index) { this.load().then((body) => { let target = this.findTarget(body, index) let dislike = target.dislike let like = target.like if (dislike.includes(this.uid)) { dislike.splice(dislike.indexOf(this.uid), 1) } else { dislike.push(this.uid) if (like.includes(this.uid)) { like.splice(like.indexOf(this.uid), 1) } } this.save(body).then(() => { this.show(body) }).catch((e) => { if (e.code === 102) { this.dislike(index) } }) }) } reply(text, index) { this.load().then((body) => { let target = this.findTarget(body, index) target.reply.push(this.createComment(text)) this.save(body).then(() => { this.show(body) }).catch((e) => { if (e.code === 102) { this.reply(text, index) } }) }) } delete(index) { this.load().then((body) => { let target = this.findTarget(body, index) target.delete = true this.save(body).then(() => { this.show(body) }).catch((e) => { if (e.code === 102) { this.delete(index) } }) }) } findTarget(body, index) { let target = body for (let i = 0; i < index.length - 1; i++) { target = target[index[i]].reply } return target[index[index.length - 1]] } static sortFun = { time(a, b) { return new Date($(a).find(".time").html()) - new Date($(b).find(".time").html()) }, like(a, b) { return $(a).find(`[data-action="like"]`).html() - $(b).find(`[data-action="like"]`).html() }, } } function getCookie(key) { let result = {} document.cookie.split(/ *; */).forEach((e, i, a) => { let kv = e.split("=") result[kv[0]] = kv[1] }) if (key) { result = result[key] } return result } (window.RLQ = window.RLQ || []).push(["jquery", () => { $.getScript("/data/index.php?title=MediaWiki:Api.js&action=raw").done(() => { window.NWC = new NewWikiComment("#NewWikiComment") }) $(document).on("click", "#NewWikiComment .submit", function () { let nwc = $(this).closest("#NewWikiComment").data("NWC") let text = $(this).siblings("textarea").val() if (text) { nwc.dom.addClass("loading") nwc.submit(text) } }) $(document).on("click", `#NewWikiComment .option .sort [data-type] [data-value]`, function () { let nwc = $(this).closest("#NewWikiComment").data("NWC") let type = $(this).parent().attr("data-type") nwc.sortBy[type] = $(this).attr("data-value") nwc.sort() }) $(document).on("click", `#NewWikiComment .funBox [data-action="like"]`, function () { let nwc = $(this).closest("#NewWikiComment").data("NWC") nwc.dom.addClass("loading") nwc.like($(this).closest("li").data("index")) }) $(document).on("click", `#NewWikiComment .funBox [data-action="dislike"]`, function () { let nwc = $(this).closest("#NewWikiComment").data("NWC") nwc.dom.addClass("loading") nwc.dislike($(this).closest("li").data("index")) }) $(document).on("click", `#NewWikiComment .funBox [data-action="delete"]`, function () { let nwc = $(this).closest("#NewWikiComment").data("NWC") if (confirm("真的要删除吗?")) { nwc.dom.addClass("loading") nwc.delete($(this).closest("li").data("index")) } }) $(document).on("click", `#NewWikiComment .funBox [data-action="reply"]`, function () { let nwc = $(this).closest("#NewWikiComment").data("NWC") let text = prompt(`回复:${$(this).closest(".foot").siblings(".nickname").text()}`) if (text) { nwc.dom.addClass("loading") nwc.reply(text, $(this).closest("li").data("index")) } }) }]) </script>