From 8de18ab71ade1f9fdcf10e0267afa5b2cfe994e3 Mon Sep 17 00:00:00 2001
From: "1152958806@qq.com" <1152958806@qq.com>
Date: Mon, 30 Oct 2023 22:02:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=A0=87=E7=AD=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
templates/assets/js/custom.js | 344 +++++++++++++++++++++++++-
templates/modules/layouts/layout.html | 2 +-
2 files changed, 332 insertions(+), 14 deletions(-)
diff --git a/templates/assets/js/custom.js b/templates/assets/js/custom.js
index b25d40bb..1a33028b 100644
--- a/templates/assets/js/custom.js
+++ b/templates/assets/js/custom.js
@@ -1,13 +1,331 @@
+
+
/* 获取直属子元素 */
function getChildren(el, className) {
for (let item of el.children) if (item.className === className) return item;
return null;
}
+function parseExpression(expression, occupied) {
+ if (expression === "${full}") {
+ return occupied;
+ }
+ const match = expression.replaceAll("full", occupied).match(/^\$\{([<>=]{1,2}.+)\?(.+):(.+)}$/);
+ if (match) {
+ return eval(`occupied${match[1]} ? ${match[2]} : ${match[3]}`);
+ }
+ throw new Error(`Invalid expression "${expression}"`);
+}
+
+function extractHeight(occupied, width, height) {
+ const occupiedWidth = width.endsWith("%")
+ ? occupied * (Number(width.slice(0, -1)) / 100)
+ : Number(width);
+ height = height.replaceAll("cwidth", occupiedWidth);
+ if (height.startsWith("${") && height.endsWith("}")) {
+ return parseExpression(height, occupied);
+ } else {
+ return height;
+ }
+}
+
// 跳转链接的卡片
document.addEventListener("DOMContentLoaded", () => {
+ // 分栏 tab
+ customElements.define(
+ "hao-tabs",
+ class HaoTabs extends HTMLElement {
+ constructor() {
+ super();
+ this.options = {
+ id: this.getAttribute("id") || '',
+ index: this.getAttribute("index") || ''
+ };
+ const id = this.options.id
+ const index = this.options.index
+ const _temp = getChildren(this, "_tpl");
+ let _innerHTML = _temp.innerHTML.trim().replace(/^(
)|(
)$/g, "");
+ let navs = "";
+ let contents = "";
+ let newIndex = 0;
+
+ _innerHTML.replace(
+ /{tabs-item([^}]*)}([\s\S]*?){\/tabs-item}/g,
+ function ($0, $1, $2) {
+ newIndex +=1;
+ let active =''
+ if(index!='' && index!=null){
+ if(newIndex == index){
+ active = 'active';
+ }
+ }else{
+ if(newIndex==1){
+ active = 'active'
+ }
+ }
+ navs += `
+
+ `;
+ contents += `
+
+ ${$2.trim().replace(/^(
)|(
)$/g, "")}
+
+
+ `;
+ }
+ );
+ let htmlStr = `
+
+
+ `;
+ this.innerHTML = htmlStr;
+ }
+ }
+ );
+
+ // github仓库
+ customElements.define(
+ "hao-github",
+ class GithubDom extends HTMLElement {
+ constructor() {
+ super();
+ this.owner = this.getAttribute("owner") || "";
+ this.repo = this.getAttribute("repo") || "";
+ if (this.owner.length === 0 || this.repo.length === 0) {
+ return;
+ }
+ this.innerHTML = `
+ `
+ this.fetchDataAndRender();
+ }
+ async fetchDataAndRender() {
+ try {
+ const res = await this.fetchRepoInfo();
+ const commits = await this.fetchRepoCommits();
+ this.render(res, commits);
+ } catch (error) {
+ console.error("Error:", error);
+ }
+ }
+ async fetchRepoInfo() {
+ const response = await fetch(`/apis/api.plugin.halo.run/v1alpha1/plugins/HaoTag/github/repository?owner=${this.owner}&repo=${this.repo}`);
+ const data = await response.json();
+ return data.data.repository;
+ }
+ async fetchRepoCommits() {
+ const response = await fetch(`https://api.github.com/repos/${this.owner}/${this.repo}/stats/participation`);
+ const commits = await response.json();
+ return commits.all;
+ }
+ render(res, commits) {
+ let updatedAtDate = new Date(res.updatedAt);
+ let currentYear = new Date().getFullYear();
+ let dateFormatOptions = { month: 'long', day: 'numeric' };
+ if (updatedAtDate.getFullYear() !== currentYear) {
+ dateFormatOptions.year = 'numeric';
+ }
+ let updatedAt = updatedAtDate.toLocaleDateString("en-US", dateFormatOptions);
+ let points = commits.map((value, index) => `${index*3},${value+1}`).join(' ');
+ let polyline = this.generatePolyline(points);
+ this.innerHTML = this.generateHTMLTemplate(res, polyline, updatedAt);
+ }
+ generatePolyline(points) {
+ return ``;
+ }
+ generateHTMLTemplate(res, polyline, updatedAt) {
+ return `
+
+
+
+
+
+
+
+
+
+
${this.options.percentage}
+
+ `;
+ }
+ }
+ );
+
+ // 小标记
+ customElements.define(
+ "hao-sign",
+ class SignDom extends HTMLElement {
+ constructor() {
+ super();
+ this.options = {
+ type: this.getAttribute("type"), // 小标签类型
+ content: this.innerHTML, // 内容
+ };
+ this.render();
+ }
+ render() {
+ this.innerHTML = `${this.options.content}`;
+ }
+ }
+ );
+
+
+ // B站视频
+ customElements.define(
+ "hao-bilibili",
+ class BiliBiliDom extends HTMLElement {
+ constructor() {
+ super();
+ this.options = {
+ bvid: this.getAttribute("bvid"),
+ page: +(this.getAttribute("page") || "1"),
+ width: this.getAttribute("width") || "100%",
+ height: this.getAttribute("height") || "500",
+ autoplay: this.getAttribute("autoplay") || 0,
+ };
+ this.render();
+ }
+ render() {
+ if (!this.options.bvid) return (this.innerHTML = "请填写正确的bvid");
+ const realHeight = extractHeight(this.parentElement.offsetWidth, this.options.width, this.options.height);
+ this.setAttribute("height", realHeight);
+ this.innerHTML = `
+ `;
+ }
+ }
+ );
+
+ // pdf
+ customElements.define(
+ "hao-pdf",
+ class PDFDom extends HTMLElement {
+ constructor() {
+ super();
+ this.options = {
+ src: this.getAttribute("src") || "",
+ width: this.getAttribute("width") || "100%",
+ height: this.getAttribute("height") || "500",
+ };
+ this.render();
+ }
+ render() {
+ if (!this.options.src) return (this.innerHTML = "请填写正确的pdf链接");
+ const realHeight = extractHeight(this.parentElement.offsetWidth, this.options.width, this.options.height);
+ this.setAttribute("height", realHeight);
+ this.innerHTML = `
+
+
+
`;
+ }
+ }
+ );
+
customElements.define(
"hao-introduction-card",
class HaoIntroductionCard extends HTMLElement {
@@ -333,23 +651,23 @@ document.addEventListener("DOMContentLoaded", () => {
// }
// }
// navs += `
- //
- // `;
+ //
+ // `;
// contents += `
- //
- // ${$2.trim().replace(/^(
)|(
)$/g, "")}
- //
- //
- // `;
+ //
+ // ${$2.trim().replace(/^(
)|(
)$/g, "")}
+ //
+ //
+ // `;
// }
// );
// let htmlStr = `
- //
- //
- //
${contents}
- //
+ //
+ //
${contents}
+ //