From 36b6e6b27209f762e366301b1280dfc9d49698be Mon Sep 17 00:00:00 2001 From: 728 Date: Fri, 10 Feb 2023 17:43:14 +0800 Subject: [PATCH] template #34 --- ismism.ts/ui/bind/bind.ts | 455 ++++++++++++------------------- ismism.ts/ui/bind/template.ts | 71 +++++ ismism.ts/ui/index/template.html | 2 +- 3 files changed, 249 insertions(+), 279 deletions(-) diff --git a/ismism.ts/ui/bind/bind.ts b/ismism.ts/ui/bind/bind.ts index 50b64e1..02d0694 100644 --- a/ismism.ts/ui/bind/bind.ts +++ b/ismism.ts/ui/bind/bind.ts @@ -6,6 +6,7 @@ import { utc_medium } from "../../src/ont/utc.ts" import type { Pas } from "../../src/pra/pas.ts" import type { PasCode, UsrAct } from "../../src/pra/pos.ts" import type { Soc, Usr } from "../../src/pra/que.ts" +import { bind } from "./template.ts" let hash = "" let pas: Pas | null = null @@ -55,16 +56,6 @@ function not_pro( return !is_pro(pas) } - -function bind( - tid: string, - ecl: string[], -): [DocumentFragment, HTMLElement[]] { - const temp = document.getElementById(tid) as HTMLTemplateElement - const t = temp.content.cloneNode(true) as DocumentFragment - return [t, ecl.map(c => t.querySelector(`.${c}`)!)] -} - function selopt( sel: HTMLSelectElement, ts: Iterable, @@ -94,10 +85,11 @@ function idanchor( function idmeta( id: NonNullable, idnam: Map, - el: { - id_e: HTMLElement, - adm_e: HTMLElement, utc_e: HTMLElement, - rej_e: HTMLElement, ref_e: HTMLElement, rejc_e: HTMLElement, refc_e: HTMLElement, proc_e: HTMLElement, + t: { + id: HTMLElement, + adm: HTMLElement, utc: HTMLElement, + rej: HTMLElement, ref: HTMLElement, + rejc: HTMLElement, refc: HTMLElement, proc: HTMLElement, }, ): boolean { let pro: null | "rej" | "ref" = null @@ -106,93 +98,74 @@ function idmeta( const pub: boolean = pro === null || (pas !== null && is_aut(pas, "pro_usr")) if (pro === "rej") { - el.id_e.classList.add("red") - el.proc_e.classList.add("red") + t.id.classList.add("red") + t.proc.classList.add("red") } else if (pro === "ref") { - el.id_e.classList.add("green") - el.proc_e.classList.add("green") - } else el.proc_e.classList.add("gray") + t.id.classList.add("green") + t.proc.classList.add("green") + } else t.proc.classList.add("gray") - el.adm_e.innerText = `${id.adm1} ${id.adm2}` - el.utc_e.innerText = `${utc_medium(id.utc)}` - idanchor(id.rej, idnam, el.rej_e, "") - idanchor(id.ref, idnam, el.ref_e, "") + t.adm.innerText = `${id.adm1} ${id.adm2}` + t.utc.innerText = `${utc_medium(id.utc)}` + idanchor(id.rej, idnam, t.rej, "") + idanchor(id.ref, idnam, t.ref, "") if (id.rej.length >= 2) { - el.rej_e.classList.add("red") - el.rejc_e.classList.add("red") - } else el.rejc_e.classList.add("gray") + t.rej.classList.add("red") + t.rejc.classList.add("red") + } else t.rejc.classList.add("gray") if (id.ref.length < 2) { - el.ref_e.classList.add("green") - el.refc_e.classList.add("green") - } else el.refc_e.classList.add("gray") + t.ref.classList.add("green") + t.refc.classList.add("green") + } else t.refc.classList.add("gray") return pub } function pasact( ) { - const [pasact_t, [ - nbr_e, send_e, - adm_e, adm1_e, adm2_e, - pre_e, actid_e, act_e, - pas_e, code_e, issue_e, - hint_e, - ]] = bind("pasact", [ - "nbr", "send", - "adm", "adm1", "adm2", - "pre", "actid", "act", - "pas", "code", "issue", - "hint", - ]) as [DocumentFragment, [ - HTMLInputElement, HTMLButtonElement, - HTMLElement, HTMLSelectElement, HTMLSelectElement, - HTMLElement, HTMLInputElement, HTMLButtonElement, - HTMLElement, HTMLInputElement, HTMLButtonElement, - HTMLElement, - ]] - + const t = bind("pasact") const send = async () => { - if (!/^1\d{10}$/.test(nbr_e.value)) { alert("无效手机号"); return } - nbr_e.readOnly = send_e.disabled = true - const sent = await pos("pas", { nbr: nbr_e.value, sms: location.hostname === "ismist.cn" }) + if (!/^1\d{10}$/.test(t.nbr.value)) { alert("无效手机号"); return } + t.nbr.readOnly = t.send.disabled = true + const sent = await pos("pas", { nbr: t.nbr.value, sms: location.hostname === "ismist.cn" }) if (sent) { const utc = sent.utc ? `\n上次发送：${utc_medium(sent.utc)}` : "" - hint_e.innerText = `验证码已发送，可多次使用\n一小时内不再重复发送${utc}` - pas_e.classList.remove("none") + t.hint.innerText = `验证码已发送，可多次使用\n一小时内不再重复发送${utc}` + t.pas.classList.remove("none") } else { - hint_e.innerText = `手机号未注册\n输入居住地与注册激活码\n激活码只能使用一次，确认手机号无误` - selopt(adm1_e, adm.keys()) - adm1_e.value = adm1_def - selopt(adm2_e, adm.get(adm1_def)!) - adm2_e.value = adm2_def - adm1_e.addEventListener("change", () => selopt(adm2_e, adm.get(adm1_e.value)!)) - adm_e.classList.remove("none") - pre_e.classList.remove("none") + t.hint.innerText = `手机号未注册\n输入居住地与注册激活码\n激活码只能使用一次，确认手机号无误` + selopt(t.adm1, adm.keys()) + t.adm1.value = adm1_def + selopt(t.adm2, adm.get(adm1_def)!) + t.adm2.value = adm2_def + t.adm1.addEventListener("change", () => selopt(t.adm2, adm.get(t.adm1.value)!)) + t.adm.classList.remove("none") + t.pre.classList.remove("none") } } - send_e.addEventListener("click", send) + t.send.addEventListener("click", send) - act_e.addEventListener("click", async () => { - if (!actid_e.checkValidity()) { alert("无效激活码"); return } - actid_e.readOnly = act_e.disabled = adm1_e.disabled = adm2_e.disabled = true + t.act.addEventListener("click", async () => { + if (!t.actid.checkValidity()) { alert("无效激活码"); return } + t.actid.readOnly = t.act.disabled = t.adm1.disabled = t.adm2.disabled = true - const uid = await pos("pre", { actid: actid_e.value, nbr: nbr_e.value, adm1: adm1_e.value, adm2: adm2_e.value }) + const uid = await pos("pre", { actid: t.actid.value, nbr: t.nbr.value, adm1: t.adm1.value, adm2: t.adm2.value }) if (uid) { await send() - pas_e.classList.remove("none") + t.pas.classList.remove("none") } else { - actid_e.readOnly = act_e.disabled = adm1_e.disabled = adm2_e.disabled = false + t.actid.readOnly = t.act.disabled = t.adm1.disabled = t.adm2.disabled = false alert("无效激活码") } }) - issue_e.addEventListener("click", () => { - if (!code_e.checkValidity()) { alert("无效验证码"); return } - code_e.readOnly = issue_e.disabled = true - pos("pas", { nbr: nbr_e.value, code: parseInt(code_e.value) }).then(p => { + t.issue.addEventListener("click", () => { + if (!t.code.checkValidity()) { alert("无效验证码"); return } + t.code.readOnly = t.issue.disabled = true + pos("pas", { nbr: t.nbr.value, code: parseInt(t.code.value) }).then(p => { if (!p) { - code_e.readOnly = issue_e.disabled = false + t.code.readOnly = t.issue.disabled = false alert("无效验证码") return } @@ -203,7 +176,7 @@ function pasact( }) }) - main.append(pasact_t) + main.append(t.bind) } async function usr( @@ -218,100 +191,73 @@ async function usr( main.innerHTML = "" - const [usr_t, [ - idnam_e, id_e, nam_e, - adm_e, utc_e, rej_e, ref_e, rejc_e, refc_e, proc_e, - intro_e, - soc_e, - rec_e, - pos_e, put_e, pas_e, - pre_e, preusr_e, presoc_e, preagd_e, - pro_e, prorej_e, proref_e, - ]] = bind("usr", [ - "idnam", "id", "nam", - "adm", "utc", "rej", "ref", "rejc", "refc", "proc", - "intro", - "soc", - "rec", - "pos", "put", "pas", - "pre", "preusr", "presoc", "preagd", - "pro", "prorej", "proref", - ]) as [DocumentFragment, [ - HTMLAnchorElement, HTMLElement, HTMLElement, - HTMLElement, HTMLElement, HTMLElement, HTMLElement, HTMLElement, HTMLElement, HTMLElement, - HTMLParagraphElement, - HTMLParagraphElement, - HTMLElement, - HTMLElement, HTMLButtonElement, HTMLButtonElement, - HTMLElement, HTMLButtonElement, HTMLButtonElement, HTMLButtonElement, - HTMLElement, HTMLButtonElement, HTMLButtonElement, - ]] + const t = bind("usr") - idnam_e.href = `#${uid}` - id_e.innerText = `${uid}` - nam_e.innerText = u.nam + t.idnam.href = `#${uid}` + t.id.innerText = `${uid}` + t.nam.innerText = u.nam const unam = new Map(u.unam) - let pub = idmeta(u, unam, { id_e, adm_e, utc_e, rej_e, ref_e, rejc_e, refc_e, proc_e }) + let pub = idmeta(u, unam, t) if (pas && pas.id.uid === uid) pub = true if (pub) { - intro_e.innerText = u.intro.length > 0 ? u.intro : "无" + t.intro.innerText = u.intro.length > 0 ? u.intro : "无" const snam = new Map(u.snam) - soc_e.innerText = `${u.snam.length > 0 ? "" : "无"}` - idanchor([...u.snam.keys()], snam, soc_e, "s") - rec_e.innerText = JSON.stringify(u.nrec) + t.soc.innerText = `${u.snam.length > 0 ? "" : "无"}` + idanchor([...u.snam.keys()], snam, t.soc, "s") + t.rec.innerText = JSON.stringify(u.nrec) } else { - nam_e.innerText = intro_e.innerText = soc_e.innerText = rec_e.innerText = "【冻结中】" + t.nam.innerText = t.intro.innerText = t.soc.innerText = t.rec.innerText = "【冻结中】" } if (pas) { if (pas.id.uid === uid) { - pro_e.remove() - put_e.addEventListener("click", () => putusr(u)) - pas_e.addEventListener("click", async () => { + t.pro.remove() + t.put.addEventListener("click", () => putusr(u)) + t.pas.addEventListener("click", async () => { await pos("pas", { uid }) pas = null pas_a.innerText = "用户登录" pas_a.href = "#pas" location.href = `#pas` }) - if (not_aut(pas, "pre_usr")) preusr_e.remove() - else preusr_e.addEventListener("click", () => pre("创建用户")) - if (not_aut(pas, "pre_soc")) presoc_e.remove() - else presoc_e.addEventListener("click", () => pre("创建社团")) - if (not_aut(pas, "pre_agd")) preagd_e.remove() - else preagd_e.addEventListener("click", () => pre("创建活动")) + if (not_aut(pas, "pre_usr")) t.preusr.remove() + else t.preusr.addEventListener("click", () => pre("创建用户")) + if (not_aut(pas, "pre_soc")) t.presoc.remove() + else t.presoc.addEventListener("click", () => pre("创建社团")) + if (not_aut(pas, "pre_agd")) t.preagd.remove() + else t.preagd.addEventListener("click", () => pre("创建活动")) } else { - pos_e.remove() - pre_e.remove() + t.pos.remove() + t.pre.remove() const prorej = !u.rej.includes(pas.id.uid) const proref = !u.ref.includes(pas.id.uid) - prorej_e.innerText = prorej ? "反对" : "取消反对" - proref_e.innerText = proref ? "推荐" : "取消推荐" + t.prorej.innerText = prorej ? "反对" : "取消反对" + t.proref.innerText = proref ? "推荐" : "取消推荐" if (not_aut(pas, "pro_usr") || not_pro(pas) || pas.ref.includes(uid)) { - prorej_e.disabled = true - proref_e.disabled = true + t.prorej.disabled = true + t.proref.disabled = true } else { - prorej_e.addEventListener("click", async () => { - prorej_e.disabled = true + t.prorej.addEventListener("click", async () => { + t.prorej.disabled = true const c = await pos("pro", { re: "rej", uid, pro: prorej }) if (c && c > 0) setTimeout(() => usr(uid), 500) - else prorej_e.disabled = false + else t.prorej.disabled = false }) - proref_e.addEventListener("click", async () => { - proref_e.disabled = true + t.proref.addEventListener("click", async () => { + t.proref.disabled = true const c = await pos("pro", { re: "ref", uid, pro: proref }) if (c && c > 0) setTimeout(() => usr(uid), 500) - else proref_e.disabled = false + else t.proref.disabled = false }) } } } else { - pos_e.remove() - pre_e.remove() - pro_e.remove() + t.pos.remove() + t.pre.remove() + t.pro.remove() } - main.append(usr_t) + main.append(t.bind) } async function soc( @@ -329,107 +275,89 @@ async function soc( for (const s of ss) { if (!s) continue - const [soc_t, [ - idnam_e, id_e, nam_e, - adm_e, utc_e, rej_e, ref_e, rejc_e, refc_e, proc_e, - sec_e, uid_e, res_e, intro_e, rec_e, - put_e, putpre_e, putsec_e, putuid_e, putres_e, - pro_e, prorej_e, proref_e, - ]] = bind("soc", [ - "idnam", "id", "nam", - "adm", "utc", "rej", "ref", "rejc", "refc", "proc", - "sec", "uid", "res", "intro", "rec", - "put", "putpre", "putsec", "putuid", "putres", - "pro", "prorej", "proref", - ]) as [DocumentFragment, [ - HTMLAnchorElement, HTMLElement, HTMLElement, - HTMLElement, HTMLElement, HTMLElement, HTMLElement, HTMLElement, HTMLElement, HTMLElement, - HTMLElement, HTMLElement, HTMLElement, HTMLElement, HTMLElement, - HTMLElement, HTMLButtonElement, HTMLButtonElement, HTMLButtonElement, HTMLButtonElement, - HTMLElement, HTMLButtonElement, HTMLButtonElement, - ]] + const t = bind("soc") - idnam_e.href = `#s${s._id}` - id_e.innerText = `s${s._id}` - if (hash === id_e.innerText) id_e.classList.add("active") - nam_e.innerText = s.nam + t.idnam.href = `#s${s._id}` + t.id.innerText = `s${s._id}` + if (hash === t.id.innerText) t.id.classList.add("active") + t.nam.innerText = s.nam const unam = new Map(s.unam) - const pub = idmeta(s, unam, { id_e, adm_e, utc_e, rej_e, ref_e, rejc_e, refc_e, proc_e }) + const pub = idmeta(s, unam, t) if (pub) { - idanchor(s.sec, unam, sec_e, "") - idanchor(s.uid, unam, uid_e, "") - idanchor(s.res, unam, res_e, "") - intro_e.innerText = s.intro - rec_e.innerText = JSON.stringify(s.nrec) + idanchor(s.sec, unam, t.sec, "") + idanchor(s.uid, unam, t.uid, "") + idanchor(s.res, unam, t.res, "") + t.intro.innerText = s.intro + t.rec.innerText = JSON.stringify(s.nrec) } else { - sec_e.innerText = uid_e.innerText = res_e.innerText = intro_e.innerText = rec_e.innerText = "【冻结中】" + t.sec.innerText = t.uid.innerText = t.res.innerText = t.intro.innerText = t.rec.innerText = "【冻结中】" } if (pas) { - if (not_aut(pas, "pre_soc")) putpre_e.remove() - else putpre_e.disabled = true - if (!s.sec.includes(pas.id.uid)) putsec_e.remove() - else putsec_e.disabled = true - if (!s.uid.includes(pas.id.uid)) putuid_e.remove() - else putuid_e.addEventListener("click", async () => { + if (not_aut(pas, "pre_soc")) t.putpre.remove() + else t.putpre.disabled = true + if (!s.sec.includes(pas.id.uid)) t.putsec.remove() + else t.putsec.disabled = true + if (!s.uid.includes(pas.id.uid)) t.putuid.remove() + else t.putuid.addEventListener("click", async () => { if (confirm("退出社团？")) { - putuid_e.disabled = true + t.putuid.disabled = true const r = await pos("put", { sid: s._id, uid: pas!.id.uid, pro: false }) if (r && r > 0) { const h = `s${s._id}` if (hash === h) soc(s._id) else location.href = `#${h}` - } else putuid_e.disabled = false + } else t.putuid.disabled = false } }) - if (s.uid.includes(pas.id.uid)) putres_e.remove() + if (s.uid.includes(pas.id.uid)) t.putres.remove() else { const res = !s.res.includes(pas.id.uid) - putres_e.innerText = res ? "申请加入" : "取消申请" - if (!res || pub && s.res.length < s.res_max) putres_e.addEventListener("click", async () => { - putres_e.disabled = true + t.putres.innerText = res ? "申请加入" : "取消申请" + if (!res || pub && s.res.length < s.res_max) t.putres.addEventListener("click", async () => { + t.putres.disabled = true const r = await pos("put", { sid: s._id, res }) if (r && r > 0) { const h = `s${s._id}` if (hash === h) soc(s._id) else location.href = `#${h}` - } else putuid_e.disabled = false - }); else putres_e.disabled = true + } else t.putuid.disabled = false + }); else t.putres.disabled = true } - if (not_aut(pas, "pro_soc")) pro_e.remove() + if (not_aut(pas, "pro_soc")) t.pro.remove() else { const prorej = !s.rej.includes(pas.id.uid) const proref = !s.ref.includes(pas.id.uid) - prorej_e.innerText = prorej ? "反对" : "取消反对" - proref_e.innerText = proref ? "推荐" : "取消推荐" - if (not_pro(pas)) prorej_e.disabled = proref_e.disabled = true + t.prorej.innerText = prorej ? "反对" : "取消反对" + t.proref.innerText = proref ? "推荐" : "取消推荐" + if (not_pro(pas)) t.prorej.disabled = t.proref.disabled = true else { - prorej_e.addEventListener("click", async () => { - prorej_e.disabled = true + t.prorej.addEventListener("click", async () => { + t.prorej.disabled = true const r = await pos("pro", { re: "rej", sid: s._id, pro: prorej }) if (r && r > 0) { const h = `s${s._id}` if (hash === h) soc(s._id) else location.href = `#${h}` - } else prorej_e.disabled = false + } else t.prorej.disabled = false }) - proref_e.addEventListener("click", async () => { - proref_e.disabled = true + t.proref.addEventListener("click", async () => { + t.proref.disabled = true const r = await pos("pro", { re: "ref", sid: s._id, pro: proref }) if (r && r > 0) { const h = `s${s._id}` if (hash === h) soc(s._id) else location.href = `#${h}` - } else proref_e.disabled = false + } else t.proref.disabled = false }) } } } else { - put_e.remove() - pro_e.remove() + t.put.remove() + t.pro.remove() } - main.append(soc_t) + main.append(t.bind) } } @@ -440,67 +368,52 @@ function pre( main.innerHTML = "" - const [pre_t, [ - idnam_e, id_e, nam_e, - meta_e, pnam_e, nbr_e, - adm1_e, adm2_e, intro_e, - pre_e, cancel_e, - ]] = bind("pre", [ - "idnam", "id", "nam", - "meta", "pnam", "nbr", - "adm1", "adm2", "intro", - "pre", "cancel", - ]) as [DocumentFragment, [ - HTMLAnchorElement, HTMLElement, HTMLElement, - HTMLElement, HTMLInputElement, HTMLInputElement, - HTMLSelectElement, HTMLSelectElement, HTMLTextAreaElement, - HTMLButtonElement, HTMLButtonElement, - ]] + const t = bind("pre") - idnam_e.href = `#${pas.id.uid}` - id_e.innerText = `${pas.id.uid}` - nam_e.innerText = nam - meta_e.innerText = `将作为推荐人${nam}` + t.idnam.href = `#${pas.id.uid}` + t.id.innerText = `${pas.id.uid}` + t.nam.innerText = nam + t.meta.innerText = `将作为推荐人${nam}` - selopt(adm1_e, adm.keys()) - adm1_e.value = adm1_def - selopt(adm2_e, adm.get(adm1_def)!) - adm2_e.value = adm2_def - adm1_e.addEventListener("change", () => selopt(adm2_e, adm.get(adm1_e.value)!)) + selopt(t.adm1, adm.keys()) + t.adm1.value = adm1_def + selopt(t.adm2, adm.get(adm1_def)!) + t.adm2.value = adm2_def + t.adm1.addEventListener("change", () => selopt(t.adm2, adm.get(t.adm1.value)!)) let param: () => Record let pf = "" switch (nam) { case "创建用户": { - meta_e.innerText += `\n新用户可通过手机号登录、编辑用户信息` - pnam_e.parentElement?.remove() - intro_e.parentElement?.remove() - param = () => ({ nbr: nbr_e.value, adm1: adm1_e.value, adm2: adm2_e.value }) + t.meta.innerText += `\n新用户可通过手机号登录、编辑用户信息` + t.pnam.parentElement?.remove() + t.intro.parentElement?.remove() + param = () => ({ nbr: t.nbr.value, adm1: t.adm1.value, adm2: t.adm2.value }) break } case "创建社团": case "创建活动": { - nbr_e.parentElement?.remove() - intro_e.addEventListener("input", () => { - intro_e.style.height = "auto" - intro_e.style.height = `${intro_e.scrollHeight}px`; - (intro_e.previousElementSibling as HTMLElement).innerText = `简介：（${intro_e.value.length} / 2048 个字符）` + t.nbr.parentElement?.remove() + t.intro.addEventListener("input", () => { + t.intro.style.height = "auto" + t.intro.style.height = `${t.intro.scrollHeight}px`; + (t.intro.previousElementSibling as HTMLElement).innerText = `简介：（${t.intro.value.length} / 2048 个字符）` }) param = () => ({ - ...nam === "创建社团" ? { snam: pnam_e.value } : { anam: pnam_e.value }, - adm1: adm1_e.value, adm2: adm2_e.value, intro: intro_e.value + ...nam === "创建社团" ? { snam: t.pnam.value } : { anam: t.pnam.value }, + adm1: t.adm1.value, adm2: t.adm2.value, intro: t.intro.value }) pf = nam === "创建社团" ? "s" : "a" break } default: { usr(pas.id.uid); return } } - pre_e.addEventListener("click", async () => { + t.pre.addEventListener("click", async () => { const id = await pos>("pre", param()) if (id) setTimeout(() => location.hash = `#${pf}${id}`, 500) else alert(`${nam}失败`) }) - cancel_e.addEventListener("click", () => usr(pas!.id.uid)) + t.cancel.addEventListener("click", () => usr(pas!.id.uid)) - main.append(pre_t) + main.append(t.bind) } function putusr( @@ -508,57 +421,45 @@ function putusr( ) { main.innerHTML = "" - const [putusr_t, [ - idnam_e, id_e, - nam_e, adm1_e, adm2_e, intro_e, - put_e, cancel_e, - ]] = bind("putusr", [ - "idnam", "id", - "nam", "adm1", "adm2", "intro", - "put", "cancel", - ]) as [DocumentFragment, [ - HTMLAnchorElement, HTMLElement, - HTMLInputElement, HTMLSelectElement, HTMLSelectElement, HTMLTextAreaElement, - HTMLButtonElement, HTMLButtonElement, - ]] + const t = bind("putusr") - idnam_e.href = `#${u._id}` - id_e.innerText = `${u._id}` + t.idnam.href = `#${u._id}` + t.id.innerText = `${u._id}` - nam_e.value = u.nam - selopt(adm1_e, adm.keys()) - adm1_e.value = u.adm1 - selopt(adm2_e, adm.get(u.adm1)!) - adm2_e.value = u.adm2 - adm1_e.addEventListener("change", () => selopt(adm2_e, adm.get(adm1_e.value)!)) - intro_e.value = u.intro - intro_e.addEventListener("input", () => { - intro_e.style.height = "auto" - intro_e.style.height = `${intro_e.scrollHeight}px`; - (intro_e.previousElementSibling as HTMLElement).innerText = `简介：（${intro_e.value.length} / 2048 个字符）` + t.nam.value = u.nam + selopt(t.adm1, adm.keys()) + t.adm1.value = u.adm1 + selopt(t.adm2, adm.get(u.adm1)!) + t.adm2.value = u.adm2 + t.adm1.addEventListener("change", () => selopt(t.adm2, adm.get(t.adm1.value)!)) + t.intro.value = u.intro + t.intro.addEventListener("input", () => { + t.intro.style.height = "auto" + t.intro.style.height = `${t.intro.scrollHeight}px`; + (t.intro.previousElementSibling as HTMLElement).innerText = `简介：（${t.intro.value.length} / 2048 个字符）` }) - setTimeout(() => intro_e.dispatchEvent(new Event("input")), 50) + setTimeout(() => t.intro.dispatchEvent(new Event("input")), 50) - put_e.addEventListener("click", async () => { - put_e.disabled = true + t.put.addEventListener("click", async () => { + t.put.disabled = true const c = await pos("put", { uid: u._id, - nam: nam_e.value, - adm1: adm1_e.value, - adm2: adm2_e.value, - intro: intro_e.value.trim(), + nam: t.nam.value, + adm1: t.adm1.value, + adm2: t.adm2.value, + intro: t.intro.value.trim(), }) if (c === null || c === 0) { alert(`无效输入\n或用户名已被占用`) - put_e.disabled = false + t.put.disabled = false } else { - pas_a.innerText = nam_e.value + pas_a.innerText = t.nam.value setTimeout(() => usr(u._id), 500) } }) - cancel_e.addEventListener("click", () => usr(u._id)) + t.cancel.addEventListener("click", () => usr(u._id)) - main.append(putusr_t) + main.append(t.bind) } function idnull( @@ -567,14 +468,12 @@ function idnull( ) { main.innerHTML = "" - const [idnull_t, [ - id_e, meta_e - ]] = bind("idnull", [ - "id", "meta" - ]) - id_e.innerText = id - meta_e.innerText = meta; - main.append(idnull_t) + const t = bind("idnull") + + t.id.innerText = id + t.meta.innerText = meta; + + main.append(t.bind) } window.addEventListener("hashchange", () => { diff --git a/ismism.ts/ui/bind/template.ts b/ismism.ts/ui/bind/template.ts index e69de29..3228556 100644 --- a/ismism.ts/ui/bind/template.ts +++ b/ismism.ts/ui/bind/template.ts @@ -0,0 +1,71 @@ +const t: typeof document.createElement = (s: string) => document.createElement(s) + +const template = { + pasact: { + nbr: t("input"), send: t("button"), + adm: t("section"), adm1: t("select"), adm2: t("select"), + pre: t("section"), actid: t("input"), act: t("button"), + pas: t("section"), code: t("input"), issue: t("button"), + hint: t("section"), + }, + + usr: { + idnam: t("a"), id: t("code"), nam: t("span"), + adm: t("span"), utc: t("span"), + rej: t("span"), ref: t("span"), + rejc: t("span"), refc: t("span"), proc: t("span"), + intro: t("p"), + soc: t("p"), + rec: t("section"), + pos: t("section"), put: t("button"), pas: t("button"), + pre: t("section"), preusr: t("button"), presoc: t("button"), preagd: t("button"), + pro: t("section"), prorej: t("button"), proref: t("button"), + }, + + soc: { + idnam: t("a"), id: t("code"), nam: t("span"), + adm: t("span"), utc: t("span"), + rej: t("span"), ref: t("span"), + rejc: t("span"), refc: t("span"), proc: t("span"), + sec: t("section"), uid: t("p"), res: t("p"), intro: t("p"), rec: t("p"), + put: t("section"), putpre: t("button"), putsec: t("button"), putuid: t("button"), putres: t("button"), + pro: t("section"), prorej: t("button"), proref: t("button"), + }, + + pre: { + idnam: t("a"), id: t("code"), nam: t("span"), + meta: t("section"), pnam: t("input"), nbr: t("input"), + adm: t("section"), adm1: t("select"), adm2: t("select"), + intro: t("textarea"), + pre: t("button"), cancel: t("button"), + }, + + putusr: { + idnam: t("a"), id: t("code"), + nam: t("input"), + adm1: t("select"), adm2: t("select"), + intro: t("textarea"), + put: t("button"), cancel: t("button"), + }, + + idnull: { + id: t("cod"), + meta: t("section") + } +} +type Template = typeof template + +export function bind< + T extends keyof Template +>( + tid: T +): Template[T] & { bind: DocumentFragment } { + const temp = document.getElementById(tid) as HTMLTemplateElement + const t = temp.content.cloneNode(true) as DocumentFragment + const b = Object.fromEntries([ + ["bind", t], ...Object.keys(template[tid]).map(c => [ + c, t.querySelector(`.${c}`) as HTMLElement + ]) + ]) as Template[T] & { bind: DocumentFragment } + return b +} diff --git a/ismism.ts/ui/index/template.html b/ismism.ts/ui/index/template.html index 5c79c53..a60542d 100644 --- a/ismism.ts/ui/index/template.html +++ b/ismism.ts/ui/index/template.html @@ -33,7 +33,7 @@