1 line
16 KiB
JavaScript
1 line
16 KiB
JavaScript
function getChildren(t,e){for(let s of t.children)if(s.className===e)return s;return null}document.addEventListener("DOMContentLoaded",()=>{$(".joe_detail__article p:empty").remove(),customElements.define("joe-mtitle",class extends HTMLElement{constructor(){super(),this.innerHTML=`\n\t\t\t\t<span class="joe_mtitle">\n\t\t\t\t\t<span class="joe_mtitle__text">\n\t\t\t\t\t\t${this.getAttribute("title")||"默认标题"}\n\t\t\t\t\t</span>\n\t\t\t\t</span>\n\t\t\t`}}),customElements.define("joe-mp3",class extends HTMLElement{constructor(){super(),this.options={name:this.getAttribute("name"),url:this.getAttribute("url"),theme:this.getAttribute("theme")||"#1989fa",cover:this.getAttribute("cover"),autoplay:!!this.getAttribute("autoplay")},this.render()}render(){if(!this.options.url)return this.innerHTML="音频地址未填写！";this.innerHTML='<span style="display: block" class="_content"></span>',new APlayer({container:getChildren(this,"_content"),theme:this.options.theme,autoplay:this.options.autoplay,audio:[{url:this.options.url,name:this.options.name,cover:this.options.cover}]})}}),customElements.define("joe-music",class extends HTMLElement{constructor(){super(),this.options={id:this.getAttribute("id"),color:this.getAttribute("color")||"#1989fa",autoplay:!!this.getAttribute("autoplay")},this.render()}render(){if(!this.options.id)return this.innerHTML="网易云歌曲ID未填写！";this.innerHTML='<span style="display: block" class="_content"></span>',fetch("https://www.vvhan.com/usr/themes/Joe/NeteaseCloudMusicApi.php?id="+this.options.id).then(async t=>{const e=await t.json();new APlayer({container:getChildren(this,"_content"),lrcType:1,theme:this.options.color,autoplay:this.options.autoplay,audio:e})})}}),customElements.define("joe-mlist",class extends HTMLElement{constructor(){super(),this.options={id:this.getAttribute("id"),color:this.getAttribute("color")||"#1989fa",autoplay:!!this.getAttribute("autoplay")},this.render()}render(){if(!this.options.id)return this.innerHTML="网易云歌单ID未填写！";this.innerHTML='<span style="display: block" class="_content"></span>',fetch("https://api.i-meto.com/meting/api?server=netease&type=playlist&id="+this.options.id).then(async t=>{const e=await t.json();new APlayer({container:getChildren(this,"_content"),lrcType:3,theme:this.options.color,autoplay:this.options.autoplay,audio:e})})}}),customElements.define("joe-abtn",class extends HTMLElement{constructor(){super(),this.options={icon:this.getAttribute("icon")||"",color:this.getAttribute("color")||"#ff6800",href:this.getAttribute("href")||"#",radius:this.getAttribute("radius")||"17.5px",content:this.getAttribute("content")||"多彩按钮"},this.innerHTML=`\n <a class="joe_abtn" style="background: ${this.options.color}; border-radius: ${this.options.radius}" href="${this.options.href}" target="_blank" rel="noopener noreferrer nofollow">\n <span class="joe_abtn__icon">\n <i class="${this.options.icon} fa"></i>\n </span>\n <span class="joe_abtn__content">\n ${this.options.content}\n </span>\n </a>\n `}}),customElements.define("joe-anote",class extends HTMLElement{constructor(){super(),this.options={icon:this.getAttribute("icon")||"fa-download",href:this.getAttribute("href")||"#",type:/^secondary$|^success$|^warning$|^error$|^info$/.test(this.getAttribute("type"))?this.getAttribute("type"):"secondary",content:this.getAttribute("content")||"标签按钮"},this.innerHTML=`\n\t\t\t\t\t<a class="joe_anote ${this.options.type}" href="${this.options.href}" target="_blank" rel="noopener noreferrer nofollow">\n\t\t\t\t\t\t<span class="joe_anote__icon">\n\t\t\t\t\t\t\t<i class="fa ${this.options.icon}"></i>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span class="joe_anote__content">\n\t\t\t\t\t\t\t${this.options.content}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</a>\n\t\t\t\t`}}),customElements.define("joe-dotted",class extends HTMLElement{constructor(){super(),this.startColor=this.getAttribute("startColor")||"#ff6c6c",this.endColor=this.getAttribute("endColor")||"#1989fa",this.innerHTML=`\n\t\t\t\t\t<span class="joe_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>\n\t\t\t\t`}}),customElements.define("joe-cloud",class extends HTMLElement{constructor(){super(),this.options={type:this.getAttribute("type")||"default",title:this.getAttribute("title")||"默认标题",url:this.getAttribute("url"),password:this.getAttribute("password")};const t={default:"默认网盘",360:"360网盘",bd:"百度网盘",ty:"天翼网盘",ct:"城通网盘",wy:"微云网盘",github:"Github仓库",lz:"蓝奏云网盘"};this.innerHTML=`\n\t\t\t\t\t<span class="joe_cloud">\n\t\t\t\t\t\t<div class="joe_cloud__logo _${this.options.type}"></div>\n\t\t\t\t\t\t<div class="joe_cloud__describe">\n\t\t\t\t\t\t\t<div class="joe_cloud__describe-title">${this.options.title}</div>\n\t\t\t\t\t\t\t<div class="joe_cloud__describe-type">来源：${t[this.options.type]||"默认网盘"}${this.options.password?" | 提取码："+this.options.password:""}</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<a class="joe_cloud__btn" href="${this.options.url}" target="_blank" rel="noopener noreferrer nofollow">\n\t\t\t\t\t\t\t<i class="fa fa-download"></i>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</span>\n\t\t\t\t`}}),customElements.define("joe-hide",class extends HTMLElement{constructor(){super(),this.render()}render(){this.innerHTML='<span class="joe_hide">此处内容作者设置了 <i class="joe_hide__button">回复</i> 可见</span>',this.$button=this.querySelector(".joe_hide__button");const t=document.querySelector(".joe_comment"),e=document.querySelector(".joe_header");t&&e&&this.$button.addEventListener("click",()=>{const s=t.offsetTop-e.offsetHeight-15;window.scrollTo({top:s,behavior:"smooth"})})}}),customElements.define("joe-card-default",class extends HTMLElement{constructor(){super();const t=getChildren(this,"_temp");this.options={width:this.getAttribute("width")||"100%",label:this.getAttribute("label")||"卡片标题",content:t.innerHTML.trim().replace(/^(<br>)|(<br>)$/g,"")||"卡片内容"};const e=`\n\t\t\t\t<div class="joe_card__default" style="width: ${this.options.width}">\n\t\t\t\t\t<div class="joe_card__default-title">${this.options.label}</div>\n\t\t\t\t\t<div class="joe_card__default-content">${this.options.content}</div>\n\t\t\t\t</div>\n\t\t\t`;if(getChildren(this,"_content"))getChildren(this,"_content").innerHTML=e;else{const t=document.createElement("span");t.style.display="block",t.className="_content",t.innerHTML=e,this.appendChild(t)}}}),customElements.define("joe-message",class extends HTMLElement{constructor(){super(),this.options={type:/^success$|^info$|^warning$|^error$/.test(this.getAttribute("type"))?this.getAttribute("type"):"info",content:this.getAttribute("content")||"消息内容"},this.innerHTML=`\n\t\t\t\t\t<span class="joe_message ${this.options.type}">\n\t\t\t\t\t\t<span class="joe_message__icon"></span>\n\t\t\t\t\t\t<span class="joe_message__content">${this.options.content}</span>\n\t\t\t\t\t</span>\n\t\t\t\t`}}),customElements.define("joe-progress",class extends HTMLElement{constructor(){super(),this.options={percentage:/^\d{1,3}%$/.test(this.getAttribute("percentage"))?this.getAttribute("percentage"):"50%",color:this.getAttribute("color")||"#ff6c6c"},this.innerHTML=`\n\t\t\t\t<span class="joe_progress">\n\t\t\t\t\t<div class="joe_progress__strip">\n\t\t\t\t\t\t<div class="joe_progress__strip-percent" style="width: ${this.options.percentage}; background: ${this.options.color};"></div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class="joe_progress__percentage">${this.options.percentage}</div>\n\t\t\t\t</span>\n\t\t\t`}}),customElements.define("joe-callout",class extends HTMLElement{constructor(){super();const t=getChildren(this,"_temp");this.options={color:this.getAttribute("color")||"#f0ad4e",content:t.innerHTML.trim().replace(/^(<br>)|(<br>)$/g,"")||"标注内容"};const e=`\n\t\t\t\t\t<div class="joe_callout" style="border-left-color: ${this.options.color};">\n\t\t\t\t\t\t${this.options.content}\n\t\t\t\t\t</div>\n\t\t\t\t`;if(getChildren(this,"_content"))getChildren(this,"_content").innerHTML=e;else{const t=document.createElement("span");t.style.display="block",t.className="_content",t.innerHTML=e,this.appendChild(t)}}}),customElements.define("joe-card-describe",class extends HTMLElement{constructor(){super();const t=getChildren(this,"_temp");this.options={title:this.getAttribute("title")||"卡片描述",content:t.innerHTML.trim().replace(/^(<br>)|(<br>)$/g,"")||"卡片内容"};const e=`\n\t\t\t\t\t<div class="joe_card__describe">\n\t\t\t\t\t\t<div class="joe_card__describe-title">${this.options.title}</div>\n\t\t\t\t\t\t<div class="joe_card__describe-content">${this.options.content}</div>\n\t\t\t\t\t</div>\n\t\t\t\t`;if(getChildren(this,"_content"))getChildren(this,"_content").innerHTML=e;else{const t=document.createElement("span");t.style.display="block",t.className="_content",t.innerHTML=e,this.appendChild(t)}}}),customElements.define("joe-card-list",class extends HTMLElement{constructor(){super();const t=getChildren(this,"_temp");let e=t.innerHTML.trim().replace(/^(<br>)|(<br>)$/g,""),s="";e.replace(/{card-list-item}([\s\S]*?){\/card-list-item}/g,function(t,e){s+=`<div class="joe_card__list-item">${e.trim().replace(/^(<br>)|(<br>)$/g,"")}</div>`});let n=`<div class="joe_card__list">${s}</div>`;if(getChildren(this,"_content"))getChildren(this,"_content").innerHTML=n;else{const t=document.createElement("span");t.className="_content",t.style.display="block",t.innerHTML=n,this.appendChild(t)}}}),customElements.define("joe-alert",class extends HTMLElement{constructor(){super();const t=getChildren(this,"_temp");this.options={type:/^success$|^info$|^warning$|^error$/.test(this.getAttribute("type"))?this.getAttribute("type"):"info",content:t.innerHTML.trim().replace(/^(<br>)|(<br>)$/g,"")||"警告提示"};const e=`\n\t\t\t\t\t<div class="joe_alert ${this.options.type}">\n\t\t\t\t\t\t${this.options.content}\n\t\t\t\t\t</div>\n\t\t\t\t`;if(getChildren(this,"_content"))getChildren(this,"_content").innerHTML=e;else{const t=document.createElement("span");t.style.display="block",t.className="_content",t.innerHTML=e,this.appendChild(t)}}}),customElements.define("joe-timeline",class extends HTMLElement{constructor(){super();const t=getChildren(this,"_temp");let e=t.innerHTML.trim().replace(/^(<br>)|(<br>)$/g,""),s="";e.replace(/{timeline-item([^}]*)}([\s\S]*?){\/timeline-item}/g,function(t,e,n){s+=`\n\t\t\t\t\t<div class="joe_timeline__item">\n\t\t\t\t\t\t<div class="joe_timeline__item-tail"></div>\n\t\t\t\t\t\t<div class="joe_timeline__item-circle" ${e}></div>\n\t\t\t\t\t\t<div class="joe_timeline__item-content">${n.trim().replace(/^(<br>)|(<br>)$/g,"")}</div>\n\t\t\t\t\t</div>\n\t\t\t\t`});let n=`<div class="joe_timeline">${s}</div>`;if(getChildren(this,"_content"))getChildren(this,"_content").innerHTML=n;else{const t=document.createElement("span");t.className="_content",t.style.display="block",t.innerHTML=n,this.appendChild(t)}this.querySelectorAll(".joe_timeline__item-circle").forEach((t,e)=>{const s=t.getAttribute("color")||"#19be6b";t.style.borderColor=s})}}),customElements.define("joe-collapse",class extends HTMLElement{constructor(){super();const t=getChildren(this,"_temp");let e=t.innerHTML.trim().replace(/^(<br>)|(<br>)$/g,""),s="";e.replace(/{collapse-item([^}]*)}([\s\S]*?){\/collapse-item}/g,function(t,e,n){s+=`\n\t\t\t\t\t<div class="joe_collapse__item" ${e}>\n\t\t\t\t\t\t<div class="joe_collapse__item-head">\n\t\t\t\t\t\t\t<div class="joe_collapse__item-head--label"></div>\n\t\t\t\t\t\t\t<svg class="joe_collapse__item-head--icon" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path d="M7.406 7.828L12 12.422l4.594-4.594L18 9.234l-6 6-6-6z"/></svg>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class="joe_collapse__item-wrapper">\n\t\t\t\t\t\t\t<div class="joe_collapse__item-wrapper--content">${n.trim().replace(/^(<br>)|(<br>)$/g,"")}</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t`});let n=`<div class="joe_collapse">${s}</div>`;if(getChildren(this,"_content"))getChildren(this,"_content").innerHTML=n;else{const t=document.createElement("span");t.className="_content",t.style.display="block",t.innerHTML=n,this.appendChild(t)}this.querySelectorAll(".joe_collapse__item").forEach(t=>{const e=t.getAttribute("label")||"折叠标题",s=getChildren(t,"joe_collapse__item-head"),n=getChildren(s,"joe_collapse__item-head--label");n.innerHTML=e;const i=getChildren(t,"joe_collapse__item-wrapper"),o=getChildren(i,"joe_collapse__item-wrapper--content"),r=t.getAttribute("open");null!==r&&(t.classList.add("active"),i.style.maxHeight="none"),s.addEventListener("click",()=>{i.style.maxHeight=o.offsetHeight+"px";let e=setTimeout(()=>{t.classList.contains("active")?(t.classList.remove("active"),i.style.maxHeight=0):(t.classList.add("active"),i.style.maxHeight=o.offsetHeight+"px"),clearTimeout(e)},30)})})}}),customElements.define("joe-dplayer",class extends HTMLElement{constructor(){super(),this.options={src:this.getAttribute("src"),player:this.getAttribute("player")},this.render()}render(){this.options.src?this.innerHTML=`<iframe allowfullscreen="true" class="joe_vplayer" src="${this.options.player+this.options.src}"></iframe>`:this.innerHTML="播放地址未填写！"}}),customElements.define("joe-bilibili",class extends HTMLElement{constructor(){super(),this.bvid=this.getAttribute("bvid"),this.page=Object.is(Number(this.getAttribute("page")),NaN)?1:this.getAttribute("page"),this.render()}render(){this.bvid?this.innerHTML=`<iframe allowfullscreen="true" class="joe_vplayer" src="//player.bilibili.com/player.html?bvid=${this.bvid}&page=${this.page}"></iframe>`:this.innerHTML="Bvid未填写！"}}),customElements.define("joe-tabs",class extends HTMLElement{constructor(){super();const t=getChildren(this,"_temp");let e=t.innerHTML.trim().replace(/^(<br>)|(<br>)$/g,""),s="",n="";e.replace(/{tabs-pane([^}]*)}([\s\S]*?){\/tabs-pane}/g,function(t,e,i){s+=`<div class="joe_tabs__head-item" ${e}></div>`,n+=`<div style="display: none" class="joe_tabs__body-item" ${e}>${i.trim().replace(/^(<br>)|(<br>)$/g,"")}</div>`});let i=`\n <div class="joe_tabs">\n <div class="joe_tabs__head">${s}</div>\n <div class="joe_tabs__body">${n}</div>\n </div>\n `;if(getChildren(this,"_content"))getChildren(this,"_content").innerHTML=i;else{const t=document.createElement("span");t.className="_content",t.style.display="block",t.innerHTML=i,this.appendChild(t)}this.querySelectorAll(".joe_tabs__head-item").forEach((t,e)=>{const s=t.getAttribute("label");t.innerHTML=s,t.addEventListener("click",()=>{this.querySelectorAll(".joe_tabs__head-item").forEach(t=>t.classList.remove("active")),this.querySelectorAll(".joe_tabs__body-item").forEach(t=>t.style.display="none"),this.querySelector(`.joe_tabs__body-item[label="${s}"]`)&&(this.querySelector(`.joe_tabs__body-item[label="${s}"]`).style.display="block"),t.classList.add("active")}),0===e&&t.click()})}}),customElements.define("joe-gird",class extends HTMLElement{constructor(){super(),this.options={column:isNaN(this.getAttribute("column"))||!this.getAttribute("column")?3:this.getAttribute("column"),gap:isNaN(this.getAttribute("gap"))||!this.getAttribute("gap")?15:this.getAttribute("gap")};const t=getChildren(this,"_temp");let e=t.innerHTML.trim().replace(/^(<br>)|(<br>)$/g,""),s="";e.replace(/{gird-item}([\s\S]*?){\/gird-item}/g,function(t,e){s+=`<div class="joe_gird__item">${e.trim().replace(/^(<br>)|(<br>)$/g,"")}</div>`});let n=`<div class="joe_gird" style="gap: ${this.options.gap}px; grid-template-columns: repeat(${this.options.column}, 1fr);">${s}</div>`;if(getChildren(this,"_content"))getChildren(this,"_content").innerHTML=n;else{const t=document.createElement("span");t.className="_content",t.style.display="block",t.innerHTML=n,this.appendChild(t)}}}),customElements.define("joe-copy",class extends HTMLElement{constructor(){super(),this.options={showText:this.getAttribute("showText")||"点击复制",copyText:this.getAttribute("copyText")||"默认文本"},this.innerHTML=`<span class="joe_copy" style="cursor: pointer; user-select: none;">${this.options.showText}</span>`;const t=getChildren(this,"joe_copy");"undefined"!=typeof ClipboardJS&&"undefined"!=typeof Qmsg?new ClipboardJS(t,{text:()=>this.options.copyText}).on("success",()=>Qmsg.success("复制成功！")):t.addEventListener("click",()=>alert("该功能请前往前台查看！"))}}),$(".joe_detail__article p:empty").remove()}); |