halo-theme-hao/templates/assets/js/custom.js

734 lines
27 KiB
JavaScript
Raw Permalink Normal View History

2024-04-12 06:35:37 +00:00
/* 获取直属子元素 */
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(/^(<br>)|(<br>)$/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 += `
<li class="tab ${active}"><button type="button" data-href="#${id}-${newIndex}">${$1}</button></li>
`;
contents += `
<div class="tab-item-content ${active}" id="${id}-${newIndex}">
${$2.trim().replace(/^(<br>)|(<br>)$/g, "")}
<button type="button" class="tab-to-top" aria-label="scroll to top"><i class="haofont hao-icon-arrow-up"></i></button>
</div>
`;
}
);
let htmlStr = `
<div class="tabs" id="${this.options.id}">
<ul class="nav-tabs">${navs}</ul>
<div class="tab-contents">${contents}</div>
</div>
`;
this.innerHTML = htmlStr;
}
}
);
// 彩虹虚线
customElements.define(
"hao-dotted",
class DottedDom extends HTMLElement {
constructor() {
super();
this.startColor = this.getAttribute("begin") || "#ff6c6c";
this.endColor = this.getAttribute("end") || "#1989fa";
this.innerHTML = `
<span class="tool_dotted" style="background-image: repeating-linear-gradient(-45deg, ${this.startColor} 0, ${this.startColor} 20%, transparent 0, transparent 25%, ${this.endColor} 0, ${this.endColor} 45%, transparent 0, transparent 50%)"></span>
`;
}
}
);
// 进度条
customElements.define(
"hao-progress",
class ProgressDom extends HTMLElement {
constructor() {
super();
this.options = {
percentage: /^\d{1,3}%$/.test(this.getAttribute("pct"))
? this.getAttribute("pct")
: "50%",
color: this.getAttribute("color") || "#ff6c6c",
};
this.innerHTML = `
<span class="tool_progress">
<div class="tool_progress__strip">
<div class="tool_progress__strip-percent" style="width: ${this.options.percentage}; background: ${this.options.color};"></div>
</div>
<div class="tool_progress__percentage">${this.options.percentage}</div>
</span>
`;
}
}
);
// 小标记
customElements.define(
"hao-sign",
class SignDom extends HTMLElement {
constructor() {
super();
this.options = {
type: this.getAttribute("type"), // 小标签类型
content: this.innerHTML, // 内容
};
this.render();
}
render() {
this.innerHTML = `<span class="${this.options.type}">${this.options.content}</span>`;
}
}
);
// 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 = `
<iframe class="iframe-dom" allowfullscreen="true" scrolling="no" border="0" frameborder="no" framespacing="0" class="tool_vplayer" src="//player.bilibili.com/player.html?bvid=${this.options.bvid}&page=${this.options.page}&autoplay=${this.options.autoplay}" style="width:${this.options.width}; height:${realHeight}px;"></iframe>`;
}
}
);
// 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 = `
<div class="tool_pdf">
<iframe class="iframe-dom" src="${this.options.src}" style="width:${this.options.width}; height:${realHeight}px;"></iframe>
</div>`;
}
}
);
customElements.define(
"hao-introduction-card",
class HaoIntroductionCard extends HTMLElement {
constructor() {
super();
this.options = {
link: this.getAttribute("link") || 'https://0206.ink/',
img: this.getAttribute("img"),
tip: this.getAttribute("tip") || '小标题',
cardTitle: this.getAttribute("cardTitle") || '标题',
logo: this.getAttribute("logo"),
title: this.getAttribute("title"),
subTitle: this.getAttribute("subTitle"),
};
let style1 = ''
let style2 = ''
if(this.options.logo==null && this.options.title==null && this.options.subTitle==null){
style1 = 'height:416px'
style2 = 'height:100%;border-radius:15px'
}
let innerHTMLs = `
<div class="introduction-card" style="${style1}">
<div class="introduction-card-top no-lightbox" style="${style2}">
<div class="int-card-info">
<div class="int-tip">${this.options.tip}</div>
<div class="int-cardTitle">${this.options.cardTitle}</div>
</div>
<img ${GLOBAL_CONFIG.source.img.src}="${this.options.img}" alt="introduction">
</div>
`;
if(this.options.logo!=null && this.options.title!=null && this.options.subTitle!=null){
innerHTMLs += `
<div class="introduction-card-bottom">
<div class="left no-lightbox">
<img ${GLOBAL_CONFIG.source.img.src}="${this.options.logo}" alt="introduction">
<div class="info">
<div class="title">${this.options.title}</div>
<div class="subTitle">${this.options.subTitle}</div>
</div>
</div>
<div class="right">
<a href="${this.options.link}" tableindex="-1" class="no-text-decoration"
data-pjax-state="">前往
</a>
</div>
</div>
`;
}
innerHTMLs += `
</div>
`;
this.innerHTML = innerHTMLs;
}
}
);
// 折叠框 folding
customElements.define(
"hao-folding",
class HaoFolding extends HTMLElement {
constructor() {
super();
this.options = {
title: this.getAttribute("title"),
color: this.getAttribute("color") || '',
type: this.getAttribute("type") || ''
};
const _temp = getChildren(this, "_tpl");
let contents = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, "");
let htmlStr = `
<details class="folding-tag" ${this.options.color} ${this.options.type}>
<summary>${this.options.title}</summary>
<div class="content">
${contents}
</div>
</details>
`;
this.innerHTML = htmlStr;
}
}
);
// 链接卡片 link
customElements.define(
"hao-tag-link",
class HaoTagLink extends HTMLElement {
constructor() {
super();
this.options = {
link: this.getAttribute("link"),
logo: this.getAttribute("logo") || '',
title: this.getAttribute("title") || '',
described: this.getAttribute("described") || '',
};
let tagLinkLeft = `
<div class="tag-link-left">
<i class="haofont hao-icon-link"></i>
</div>`
if(this.options.logo!=null && this.options.logo!=''){
tagLinkLeft = `
<div class="tag-link-left"
style="background-image:url(${this.options.logo})">
</div>`
}
let htmlStr = `
<div calss="hao-tag-link">
<a class="tag-Link" target="_blank"
href="${this.options.link}" rel="external nofollow noreferrer"
draggable="false">
<div class="tag-link-tips">引用站外地址</div>
<div class="tag-link-bottom">
${tagLinkLeft}
<div class="tag-link-right">
<div class="tag-link-title">${this.options.title}</div>
<div class="tag-link-sitename">${this.options.described}</div>
</div><i class="haofont hao-icon-angle-right"></i>
</div>
</a>
</div>
`;
this.innerHTML = htmlStr;
}
}
);
// Note (Bootstrap Callout)
customElements.define(
"hao-note",
class HaoNote extends HTMLElement {
constructor() {
super();
this.options = {
class: this.getAttribute("class") || '',
noIcon: this.getAttribute("noIcon") || '',
style: this.getAttribute("style") || ''
};
let htmlStr = `
<div class="note ${this.options.class} ${this.options.noIcon} ${this.options.style}">${this.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, "")}</div>
`;
this.innerHTML = htmlStr;
}
}
);
// 上标标签 tip
customElements.define(
"hao-tip",
class HaoTip extends HTMLElement {
constructor() {
super();
this.options = {
class: this.getAttribute("class") || 'info',
noIcon: this.getAttribute("noIcon") || ''
};
let htmlStr = `
<div class="tip ${this.options.class} ${this.options.noIcon}">${this.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, "")}</div>
`;
this.innerHTML = htmlStr;
}
}
);
// timeline
customElements.define(
"hao-timeline",
class HaoTimeline extends HTMLElement {
constructor() {
super();
this.options = {
title: this.getAttribute("title") || '',
color: this.getAttribute("color") || ''
};
const _temp = getChildren(this, "_tpl");
let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, "");
let content = "";
_innerHTML.replace(
/{timeline-item([^}]*)}([\s\S]*?){\/timeline-item}/g,
function ($0, $1, $2) {
content += `
<div class="timeline-item">
<div class="timeline-item-title">
<div class="item-circle">
<p>${$1}</p>
</div>
</div>
<div class="timeline-item-content">
${$2.trim().replace(/^(<br>)|(<br>)$/g, "")}
</div>
</div>
`;
}
);
let htmlStr = `
<div class="timeline ${this.options.color}">
<div class="timeline-item headline">
<div class="timeline-item-title">
<div class="item-circle">
<p>${this.options.title}</p>
</div>
</div>
</div>
${content}
</div>
`;
this.innerHTML = htmlStr;
}
}
);
// 按钮 btns
customElements.define(
"hao-btns",
class HaoBtns extends HTMLElement {
constructor() {
super();
this.options = {
class: this.getAttribute("class") || '',
style: this.getAttribute("style") || '',
grid: this.getAttribute("grid") || '',
};
const _temp = getChildren(this, "_tpl");
let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, "");
let content = "";
if(this.options.class == 'rounded'){
_innerHTML.replace(
/{([^}]*)}/g,
function ($0, $1) {
var str = $1.split(",", 5);
if(str.length==5){
content += `
<a target="_blank" rel="noopener external nofollow noreferrer"
href="${str[2]}"
class="no-text-decoration"><i class="${str[4]}"></i> <b>${str[0]}</b>
<p class="p red">${str[1]}</p><img
${GLOBAL_CONFIG.source.img.src}="${str[3]}">
</a>
`;
}else{
content += `
<a class="button no-text-decoration" href="${str[1]}" title="${str[0]}">
<i class="${str[2]}"></i> ${str[0]}
</a>
`;
}
}
);
}
if(this.options.class == 'circle'){
_innerHTML.replace(
/{([^}]*)}/g,
function ($0, $1) {
var str = $1.split(",", 5);
if(str.length==5){
content += `
<a target="_blank" rel="noopener external nofollow noreferrer"
href="${str[2]}"
class="no-text-decoration"><i class="${str[4]}"></i> <b>${str[0]}</b>
<p class="p red">${str[1]}</p><img
${GLOBAL_CONFIG.source.img.src}="${str[3]}">
</a>
`;
}else{
content += `
<a class="button no-text-decoration" target="_blank" rel="noopener external nofollow noreferrer"
href="${str[1]}" title="${str[0]}">
<img
${GLOBAL_CONFIG.source.img.src}="${str[2]}"/>${str[0]}
</a>
`;
}
}
);
}
let htmlStr = `
<div class="btns ${this.options.class} ${this.options.style} ${this.options.grid}">
${content}
</div>
`;
this.innerHTML = htmlStr;
}
}
);
// gallerygroup 相册图库
customElements.define(
"hao-gallery-group",
class HaoGalleryGroup extends HTMLElement {
constructor() {
super();
const _temp = getChildren(this, "_tpl");
let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, "");
let contents = "";
_innerHTML.replace(
/{([^}]*)}/g,
function ($0, $1) {
var str = $1.split(",",4);
contents += `
<figure class="gallery-group no-lightbox group-two"">
<img class="gallery-group-img"
${GLOBAL_CONFIG.source.img.src}="${str[3]}"
alt="Group Image Gallery" >
<figcaption>
<div class="gallery-group-name">${str[0]}</div>
<p>${str[1]}</p><a target="_blank" rel="noopener" href="${str[2]}"></a>
</figcaption>
</figure>
`;
}
);
let htmlStr = `
<div class="gallery-group-main">
${contents}
</div>
`;
this.innerHTML = htmlStr;
}
}
);
// gallery 相册
customElements.define(
"hao-gallery",
class HaoGallery extends HTMLElement {
constructor() {
super();
const _temp = getChildren(this, "_tpl");
let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, "");
let contents = "";
_innerHTML.replace(
/{([^}]*)}/g,
function ($0, $1) {
var str = $1.split(",");
str.forEach((item) => {
contents += `
<div class="fj-gallery-item">
<img src="${item}">
</div>
`;
});
}
);
let htmlStr = `
<section class="page-1 loadings">
<div class="type-gallery ">
<div class="gallery">
${contents}
</div>
</div>
</section>
`;
this.innerHTML = htmlStr;
}
}
);
// flink 友链标签
customElements.define(
"hao-flink",
class HaoFlink extends HTMLElement {
constructor() {
super();
this.options = {
name: this.getAttribute("name"),
desc: this.getAttribute("desc"),
style: this.getAttribute("style"),
};
const _temp = getChildren(this, "_tpl");
let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, "");
let style = this.options.style;
let content = "";
let contents = "";
let class_desc = "";
_innerHTML.replace(
/{([^}]*)}/g,
function ($0, $1) {
var flink = $1.split(",",5);
if(style=='beautify'){
contents +=`
<div class="site-card">
<a class="img" target="_blank" href="${flink[1]}" title="${flink[0]}">
<img class="flink-avatar entered loaded" style="pointer-events: none;" alt="${flink[0]}" ${GLOBAL_CONFIG.source.img.src}="${flink[4] || flink[2]}" >
</a>
<a class="info cf-friends-link" target="_blank" href="${flink[1]}" title="${flink[0]}">
<div class="site-card-avatar no-lightbox">
<img class="flink-avatar cf-friends-avatar" alt="${flink[0]}" ${GLOBAL_CONFIG.source.img.src}="${flink[2]}">
</div>
<div class="site-card-text">
<span class="title cf-friends-name">${flink[0]}</span>
<span class="desc" title="${flink[3]}">${flink[3]}</span>
</div>
</a>
</div>
`
}
if(style=='default'){
contents +=`
<div class="flink-list-item">
<a class="cf-friends-link" rel="external nofollow" target="_blank" href="${flink[1]}" title="${flink[0]}">
<img class="flink-avatar cf-friends-avatar" alt="${flink[0]}" ${GLOBAL_CONFIG.source.img.src}="${flink[2]}">
<div class="flink-item-info no-lightbox">
<span class="flink-item-name cf-friends-name">${flink[0]}</span>
<span class="flink-item-desc" title="${flink[3]}">${flink[3]}</span>
<img ${GLOBAL_CONFIG.source.img.src}="${flink[2]}">
</div>
</a>
</div>
`
}
}
);
if(this.options.desc!=null && this.options.desc!=''){
class_desc =`
<div class="flink-desc">${this.options.desc}</div>
`
}
if(this.options.style=='beautify'){
content =`
<div class="site-card-group">
${contents}
</div>
`
}
if(this.options.style=='default'){
content =`
<div class="flink-list">
${contents}
</div>
`
}
let htmlStr = `
<div class="flink" id="article-container">
<div class="flink-name">${this.options.name}</div>
${class_desc}
${content}
</div>
`;
this.innerHTML = htmlStr;
}
}
);
// 复选列表 checkbox
customElements.define(
"hao-checkbox",
class HaoCheckbox extends HTMLElement {
constructor() {
super();
this.options = {
class: this.getAttribute("class") || '',
colour: this.getAttribute("colour") || '',
status: this.getAttribute("status") || ''
};
let htmlStr = `
<div class="checkbox ${this.options.class} ${this.options.colour} ${this.options.status}"><input type="checkbox" ${this.options.status}><p>${this.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, "")}</p></div>
`;
this.innerHTML = htmlStr;
}
}
);
// tag-hide
customElements.define(
"hao-tag-hide",
class HaoCheckbox extends HTMLElement {
constructor() {
super();
this.options = {
display: this.getAttribute("display") || '查看',
bg: this.getAttribute("bg") || '',
color: this.getAttribute("color") || ''
};
let htmlStr = `
<span class="hide-inline">
<button type="button" class="hide-button" style="background-color:${this.options.bg};color:${this.options.color}">
${this.options.display}<br>
</button>
<span class="hide-content">${this.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, "")}</span>
</span>
`;
this.innerHTML = htmlStr;
}
}
);
customElements.define(
"hao-dplayer",
class HaoDplayer extends HTMLElement {
constructor() {
super();
this.options = {
src: this.getAttribute("src") || "",
player:
this.getAttribute("player") ||
`/themes/theme-hao/assets/libs/dplayer/dplayer.html?url=`,
width: this.getAttribute("width") || "100%",
height: this.getAttribute("height") || "500px",
};
this.render();
}
render() {
if (this.options.src)
this.innerHTML = `<iframe allowfullscreen="true" class="hao_vplayer" src="${
this.options.player + this.options.src
}" style="width:${this.options.width};height:${
this.options.height
}"></iframe>`;
else this.innerHTML = "视频地址未填写!";
}
}
);
});