dev-widget/dist/card.component.min.mjs

Unofficial Widget of DEV

import{css}from"./card.style.mjs";const template=document.createElement("template");template.innerHTML=`\n<style>\n    ${css}\n</style>\n<div class="card">\n    <div class="header">\n        <img class="dev-logo" src="https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg" alt="DEV widget logo">\n    </div>\n    <div class="content">\n\n    </div>\n</div>\n`;export class DevCard extends HTMLElement{constructor(){super(),this._shadowRoot=this.attachShadow({mode:"open"}),this._shadowRoot.appendChild(template.content.cloneNode(!0))}static get observedAttributes(){return["data-width","data-theme"]}attributeChangedCallback(t,e,s){"data-width"==t&&e!=s&&(this[t]=s,this.setWidth()),"data-theme"==t&&e!=s&&""!=s&&(this[t]=s,this.setTheme(s))}connectedCallback(){this.render()}renderArticles(t){for(let e of t)this._shadowRoot.querySelector(".content").innerHTML+=`\n                <a href="${e.url}" target="_blank" class="article-card">\n                    <span class="title">${e.title}</span><br>\n                    <div class="article-icon">\n                        <img src="https://res.cloudinary.com/saurabhdaware/image/upload/v1571587358/saurabh2019/heart-solid.svg">\n                        <span> ${e.positive_reactions_count}</span>\n                        &nbsp;&nbsp;\n                        <img src="https://res.cloudinary.com/saurabhdaware/image/upload/v1571587349/saurabh2019/comment-solid.svg">\n                        <span> ${e.comments_count}</span>\n                    </div>\n                </a>\n            `}createCard(){const t=this._shadowRoot.querySelector(".header"),e=this._shadowRoot.querySelector(".content");this.setHeight();let s={};if(s=0==this.articles.length?{profilePic:!1,name:this.dataset.name||this.dataset.username,url:"https://dev.to/"+this.dataset.username}:{profilePic:this.articles[0].user.profile_image_90,name:this.dataset.name||this.articles[0].user.name,url:"https://dev.to/"+this.articles[0].user.username},t.innerHTML+=`\n            ${s.profilePic?`<img class="profile-pic" src="${s.profilePic}" alt="${s.name}'s DEV Profile">`:""}\n            <div class="name-container" ${s.profilePic?"":'style="margin-left:20px;"'}>\n                <span>${s.name}</span>\n                <div class="view-profile-container">\n                    <a target="_blank" class="view-profile-button" href="${s.url}">View Profile</a>\n                </div>\n            </div>\n        `,e.innerHTML="",0===this.articles.length)return e.style.maxHeight="0px",void(e.style.minHeight="0px")}setTheme(t){let e=0;this._shadowRoot.childNodes.forEach((t,s)=>{t.classList&&t.classList.contains("card")&&(e=s)});let s=this._shadowRoot.childNodes[e];s.className="",s.classList.add("card",t)}setWidth(){this.style.width=this.dataset.width||"300px"}setHeight(){this._shadowRoot.querySelector(".content").style.maxHeight=this.dataset.contentheight||"300px"}fetchArticles(t,e=30){return fetch("https://dev.to/api/articles?username="+this.dataset.username.toLowerCase()+"&page="+t).then(t=>t.json()).then(s=>{this.articles=s,this.allArticles.push(...this.articles),1===t&&this.createCard(),"reactions"===this.sortby?(this._shadowRoot.querySelector(".content").innerHTML="",this.renderArticles(this.allArticles.slice(0,this.limit).sort((t,e)=>t.positive_reactions_count>e.positive_reactions_count?-1:1))):"date"===this.sortby&&this.renderArticles(this.articles.slice(0,e)),30===this.articles.length&&t<this.pageLimit&&(t+1===this.pageLimit?this.fetchArticles(++t,this.limit%30):this.fetchArticles(++t))})}render(){this.style.display="inline-block",this.articles=[],this.allArticles=[],this.sortby=this.dataset.sortby||"date",this.limit=this.dataset.limit||30,this.pageLimit=Math.ceil(this.limit/30),this.setWidth(),this.fetchArticles(1,this.limit).catch(t=>console.error(t))}}customElements.define("dev-widget",DevCard);