Jony/assets/js/joe.short.min.js
2021-04-22 22:49:08 +08:00

1 line
12 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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();class t 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`}}window.customElements.define("joe-mtitle",t);class e 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}]})}}window.customElements.define("joe-mp3",e);class s 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=song&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})})}}window.customElements.define("joe-music",s);class n 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})})}}window.customElements.define("joe-mlist",n);class i 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 `}}window.customElements.define("joe-abtn",i);class o 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<a class="joe_anote ${this.options.type}" href="${this.options.href}" target="_blank" rel="noopener noreferrer nofollow">\n\t\t\t\t\t<span class="joe_anote__icon">\n <i class="fa ${this.options.icon}"></i>\n </span>\n <span class="joe_anote__content">\n ${this.options.content}\n </span>\n\t\t\t\t</a>\n\t\t\t`}}window.customElements.define("joe-anote",o);class r extends HTMLElement{constructor(){super(),this.startColor=this.getAttribute("startColor")||"#ff6c6c",this.endColor=this.getAttribute("endColor")||"#1989fa",this.innerHTML=`\n\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`}}window.customElements.define("joe-dotted",r);class l 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"})})}}window.customElements.define("joe-hide",l);class c 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)}}}window.customElements.define("joe-card-default",c);class a 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<span class="joe_message ${this.options.type}">\n\t\t\t\t\t<span class="joe_message__icon"></span>\n\t\t\t\t\t<span class="joe_message__content">${this.options.content}</span>\n\t\t\t\t</span>\n\t\t\t`}}window.customElements.define("joe-message",a);class d 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`}}window.customElements.define("joe-progress",d);class h 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<div class="joe_callout" style="border-left-color: ${this.options.color};">\n\t\t\t\t\t${this.options.content}\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)}}}window.customElements.define("joe-callout",h);class p 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)}}}window.customElements.define("joe-card-list",p);class u 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})}}window.customElements.define("joe-timeline",u);class m 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="播放地址未填写!"}}window.customElements.define("joe-dplayer",m);class _ extends HTMLElement{constructor(){super(),this.bvid=this.getAttribute("bvid"),this.render()}render(){this.bvid?this.innerHTML=`<iframe allowfullscreen="true" class="joe_vplayer" src="//player.bilibili.com/player.html?bvid=${this.bvid}"></iframe>`:this.innerHTML="Bvid未填写"}}window.customElements.define("joe-bilibili",_);class b 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()})}}window.customElements.define("joe-tabs",b),$(".joe_detail__article p:empty").remove();class g extends HTMLElement{constructor(){super(),this.options={text:this.getAttribulte("text")||"默认文本",content:this.innerHTML.trim().replace(/^(<br>)|(<br>)$/g,"")||"点击复制"},this.render()}get template(){return`<span class="joe_detail__article-copy">${this.options.content}</span>`}render(){this.innerHTML=this.template,this.event()}event(){this.$copy=this.querySelector(".joe_detail__article-copy"),new ClipboardJS(this.$copy,{text:()=>this.options.text}).on("success",()=>Qmsg.success("复制成功!"))}}window.customElements.define("joe-copy",g)});