@gravatar-com/hovercards
Version:
Add profile hovercards to Gravatar images.
2 lines • 10.9 kB
JavaScript
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("Gravatar",[],e):"object"==typeof exports?exports.Gravatar=e():t.Gravatar=e()}(self,(()=>(()=>{"use strict";var t={d:(e,r)=>{for(var a in r)t.o(r,a)&&!t.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:r[a]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{Hovercards:()=>c});var r={top:"paddingBottom",bottom:"paddingTop",left:"paddingRight",right:"paddingLeft"};function a(t){var e={"&":"&","<":"<",">":">",'"':""","'":"'","`":"`"};return t.replace(/&(amp|lt|gt|quot|#39|x60);|[\&<>"'`]/g,(function(t){return"&"===t[0]?t:e[t]}))}function o(t){return encodeURI(t)}function n(t,e){return t[e]||e}function i(){return i=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(t[a]=r[a])}return t},i.apply(this,arguments)}var s=["wordpress","mastodon","tumblr","github","twitter"],d=document,c=function(){function t(t){var e=this,r=void 0===t?{}:t,a=r.placement,o=void 0===a?"right":a,n=r.autoFlip,i=void 0===n||n,s=r.offset,d=void 0===s?10:s,c=r.delayToShow,l=void 0===c?500:c,v=r.delayToHide,h=void 0===v?300:v,u=r.additionalClass,f=void 0===u?"":u,_=r.myHash,g=void 0===_?"":_,m=r.onQueryHovercardRef,p=void 0===m?function(t){return t}:m,y=r.onFetchProfileStart,b=void 0===y?function(){}:y,H=r.onFetchProfileSuccess,w=void 0===H?function(){}:H,S=r.onFetchProfileFailure,P=void 0===S?function(){}:S,k=r.onHovercardShown,M=void 0===k?function(){}:k,L=r.onHovercardHidden,T=void 0===L?function(){}:L,E=r.i18n,C=void 0===E?{}:E;this._i18n={},this._hovercardRefs=[],this._showHovercardTimeoutIds=new Map,this._hideHovercardTimeoutIds=new Map,this._cachedProfiles=new Map,this.attach=function(t,r){var a=void 0===r?{}:r,o=a.dataAttributeName,n=void 0===o?"gravatar-hash":o,i=a.ignoreSelector;t&&(e.detach(),e._queryHovercardRefs(t,n,i).forEach((function(t){t.ref.addEventListener("mouseenter",(function(r){return e._handleMouseEnter(r,t)})),t.ref.addEventListener("mouseleave",(function(r){return e._handleMouseLeave(r,t)}))})))},this.detach=function(){e._hovercardRefs.length&&(e._hovercardRefs.forEach((function(t){var r=t.ref;r.removeEventListener("mouseenter",(function(){return e._handleMouseEnter})),r.removeEventListener("mouseleave",(function(){return e._handleMouseLeave}))})),e._hovercardRefs=[])},this._placement=o,this._autoFlip=i,this._offset=d,this._delayToShow=l,this._delayToHide=h,this._additionalClass=f,this._myHash=g,this._onQueryHovercardRef=p,this._onFetchProfileStart=b,this._onFetchProfileSuccess=w,this._onFetchProfileFailure=P,this._onHovercardShown=M,this._onHovercardHidden=T,this._i18n=C}var e=t.prototype;return e._queryHovercardRefs=function(t,e,r){var a=this,o=[],n=e.replace(/-([a-z])/g,(function(t){return t[1].toUpperCase()})),i=r?Array.from(d.querySelectorAll(r)):[],s="gravatar.com/avatar/";return t.dataset[n]||"IMG"===t.tagName&&t.src.includes(s)?o=[t]:(o=Array.from(t.querySelectorAll('img[src*="'+s+'"]')),e&&(o=[].concat(o.filter((function(t){return!t.hasAttribute("data-"+e)})),Array.from(t.querySelectorAll("[data-"+e+"]"))))),this._hovercardRefs=o.map((function(t,e){if(i.includes(t))return null;var r,o,s=t.dataset[n];if(s?(r=s.split("?")[0],o=s):"IMG"===t.tagName&&(r=t.src.split("/").pop().split("?")[0],o=t.src),!r)return null;var d=new URLSearchParams(o),c=d.get("d")||d.get("default"),l=d.get("f")||d.get("forcedefault"),v=d.get("r")||d.get("rating");return{id:"gravatar-hovercard-"+r+"-"+e,hash:r,params:(o=[c&&"d="+c,l&&"f="+l,v&&"r="+v].filter(Boolean).join("&"))?"?"+o:"",ref:a._onQueryHovercardRef(t)||t}})).filter(Boolean),this._hovercardRefs},e._createHovercardSkeleton=function(){var t=d.createElement("div");return t.className="gravatar-hovercard gravatar-hovercard--skeleton"+(this._additionalClass?" "+this._additionalClass:""),t.innerHTML='\n\t\t\t<div class="gravatar-hovercard__inner">\n\t\t\t\t<div class="gravatar-hovercard__header">\n\t\t\t\t\t<div class="gravatar-hovercard__avatar-link"></div>\n\t\t\t\t\t<div class="gravatar-hovercard__name-location-link"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class="gravatar-hovercard__footer">\n\t\t\t\t\t<div class="gravatar-hovercard__social-link"></div>\n\t\t\t\t\t<div class="gravatar-hovercard__profile-link""></div>\n\t\t\t\t</div>\n\t\t\t</div>\n ',t},e._showHovercard=function(e){var a=this,o=e.id,s=e.hash,c=e.params,l=e.ref,v=setTimeout((function(){if(!d.getElementById(o)){var e;if(a._cachedProfiles.has(s)){var v=a._cachedProfiles.get(s);e=t.createHovercard(i({},v,{thumbnailUrl:v.thumbnailUrl+c}),{additionalClass:a._additionalClass,myHash:a._myHash,i18n:a._i18n})}else e=a._createHovercardSkeleton(),a._onFetchProfileStart(s),fetch("https://secure.gravatar.com/"+s+".json").then((function(t){return t.json()})).then((function(r){if(null==r||!r.entry)throw new Error(r);var o=r.entry[0],n=o.hash,d=o.thumbnailUrl,l=o.preferredUsername,v=o.displayName,h=o.currentLocation,u=o.aboutMe,f=o.accounts;a._cachedProfiles.set(s,{hash:n,thumbnailUrl:d,preferredUsername:l,displayName:v,currentLocation:h,aboutMe:u,accounts:null==f?void 0:f.map((function(t){return{url:t.url,shortname:t.shortname,iconUrl:t.iconUrl,name:t.name}}))});var _=a._cachedProfiles.get(s),g=t.createHovercard(i({},_,{thumbnailUrl:_.thumbnailUrl+c}),{additionalClass:a._additionalClass,myHash:a._myHash,i18n:a._i18n}).firstElementChild;e.classList.remove("gravatar-hovercard--skeleton"),e.replaceChildren(g),a._onFetchProfileSuccess(s,a._cachedProfiles.get(s))})).catch((function(t){e.firstElementChild.classList.add("gravatar-hovercard__inner--error"),e.firstElementChild.innerHTML='\n\t\t\t\t\t\t\t<img class="gravatar-hovercard__avatar" src="https://2.gravatar.com/avatar/'+s+c+'" width="56" height="56" alt="Avatar" />\n\t\t\t\t\t\t\t<i class="gravatar-hovercard__error-message">'+("User not found"===t.message?n(a._i18n,"Sorry, we are unable to load this Gravatar profile."):n(a._i18n,"Sorry, we are unable to load this Gravatar profile. Please check your internet connection."))+"</i>\n\t\t\t\t\t\t",a._onFetchProfileFailure(s,t)}));e.id=o,e.addEventListener("mouseenter",(function(){return clearInterval(a._hideHovercardTimeoutIds.get(o))})),e.addEventListener("mouseleave",(function(){return a._hideHovercard(o)})),d.body.appendChild(e);var h=function(t,e,a){var o=void 0===a?{}:a,n=o.placement,i=void 0===n?"right":n,s=o.offset,d=void 0===s?0:s,c=o.autoFlip,l=void 0===c||c,v=t.getBoundingClientRect(),h=e.getBoundingClientRect(),u=v.top+scrollY,f=v.bottom+scrollY,_=v.right+scrollX,g=v.left+scrollX,m=0,p=0,y=i.split("-"),b=y[0],H=y[1];if(d=Math.max(0,d),l){var w=v.top,S=innerHeight-v.bottom,P=v.left,k=innerWidth-v.right,M=h.height+d,L=h.width+d;"top"===b&&w<M&&S>w&&(b="bottom"),"bottom"===b&&S<M&&w>S&&(b="top"),"left"===b&&P<L&&k>P&&(b="right"),"right"===b&&k<L&&P>k&&(b="left")}return"top"===b||"bottom"===b?(m=g+v.width/2-h.width/2,p="top"===b?u-h.height-d:f,"start"===H&&(m=g),"end"===H&&(m=_-h.width)):(m="right"===b?_:g-h.width-d,p=u+v.height/2-h.height/2,"start"===H&&(p=u),"end"===H&&(p=f-h.height)),{x:m,y:p,padding:r[b],paddingValue:d}}(l,e,{placement:a._placement,offset:a._offset,autoFlip:a._autoFlip}),u=h.x,f=h.y,_=h.padding,g=h.paddingValue;e.style.position="absolute",e.style.left=u+"px",e.style.top=f+"px",e.style[_]=g+"px",a._onHovercardShown(s,e)}}),this._delayToShow);this._showHovercardTimeoutIds.set(o,v)},e._hideHovercard=function(t){var e=this,r=setTimeout((function(){var r=d.getElementById(t);r&&(r.remove(),e._onHovercardHidden(t,r))}),this._delayToHide);this._hideHovercardTimeoutIds.set(t,r)},e._handleMouseEnter=function(t,e){t.stopImmediatePropagation(),clearInterval(this._hideHovercardTimeoutIds.get(e.id)),this._showHovercard(e)},e._handleMouseLeave=function(t,e){var r=e.id;t.stopImmediatePropagation(),clearInterval(this._showHovercardTimeoutIds.get(r)),this._hideHovercard(r)},t}();return c.createHovercard=function(t,e){var r=void 0===e?{}:e,i=r.additionalClass,c=r.myHash,l=r.i18n,v=void 0===l?{}:l,h=t.hash,u=t.thumbnailUrl,f=t.preferredUsername,_=t.displayName,g=t.currentLocation,m=t.aboutMe,p=t.accounts,y=void 0===p?[]:p,b=d.createElement("div");b.className="gravatar-hovercard"+(i?" "+i:"");var H=o("https://gravatar.com/"+f+"?utm_source=hovercard"),w=a(_),S=!m&&c===h,P=y.reduce((function(t,e){var r=e.url,n=e.shortname,i=e.iconUrl,d=e.name,c=s.indexOf(n);return-1!==c&&(t[c]='\n\t\t\t\t\t\t<a class="gravatar-hovercard__social-link" href="'+o(r)+'" target="_blank" data-service-name="'+n+'">\n\t\t\t\t\t\t\t<img class="gravatar-hovercard__social-icon" src="'+o(i)+'" width="32" height="32" alt="'+a(d)+'" />\n\t\t\t\t\t\t</a>\n\t\t\t\t\t'),t}),[]).join("");return b.innerHTML='\n\t\t\t<div class="gravatar-hovercard__inner">\n\t\t\t\t<div class="gravatar-hovercard__header">\n\t\t\t\t\t<a class="gravatar-hovercard__avatar-link" href="'+H+'" target="_blank">\n\t\t\t\t\t\t<img class="gravatar-hovercard__avatar" src="'+o(u)+'" width="56" height="56" alt="'+w+'" />\n\t\t\t\t\t</a>\n\t\t\t\t\t<a class="gravatar-hovercard__name-location-link" href="'+H+'" target="_blank">\n\t\t\t\t\t\t<h4 class="gravatar-hovercard__name">'+w+"</h4>\n\t\t\t\t\t\t"+(g?'<p class="gravatar-hovercard__location">'+a(g)+"</p>":"")+'\n\t\t\t\t\t</a>\n\t\t\t\t</div>\n\t\t\t\t<div class="gravatar-hovercard__body">\n\t\t\t\t\t'+(m?'<p class="gravatar-hovercard__about">'+a(m)+"</p>":"")+'\n\t\t\t\t</div>\n\t\t\t\t<div class="gravatar-hovercard__footer">\n\t\t\t\t\t<div class="gravatar-hovercard__social-links">\n\t\t\t\t\t\t<a class="gravatar-hovercard__social-link" href="'+H+'" target="_blank" data-service-name="gravatar">\n\t\t\t\t\t\t\t<img class="gravatar-hovercard__social-icon" src="https://secure.gravatar.com/icons/gravatar.svg" width="32" height="32" alt="Gravatar" />\n\t\t\t\t\t\t</a>\n\t\t\t\t\t\t'+P+'\n\t\t\t\t\t</div>\n\t\t\t\t\t<a\n\t\t\t\t\t\tclass="gravatar-hovercard__profile-link'+(S?" gravatar-hovercard__profile-link--edit":"")+'"\n\t\t\t\t\t\thref="'+(S?"https://gravatar.com/profiles/edit?utm_source=hovercard":H)+'"\n\t\t\t\t\t\ttarget="_blank"\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class="gravatar-hovercard__profile-link-text">\n\t\t\t\t\t\t\t'+n(v,S?"Edit your profile":"View profile")+'\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">\n\t\t\t\t\t\t\t<path d="M12.6667 8.33338L9.16666 12.1667M12.6667 8.33338L2.66666 8.33338M12.6667 8.33338L9.16666 4.83338" stroke-width="1.5"/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</a>\n\t\t\t\t</div>\n\t\t\t</div>\n ',b},e})()));
//# sourceMappingURL=index.umd.js.map