@gravatar-com/hovercards
Version:
Add profile hovercards to Gravatar images.
2 lines • 13.2 kB
JavaScript
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("React")):"function"==typeof define&&define.amd?define("Gravatar",["React"],e):"object"==typeof exports?exports.Gravatar=e(require("React")):t.Gravatar=e(t.React)}(self,(t=>(()=>{"use strict";var e={43:(t,e,r)=>{var a=r(24),o=Symbol.for("react.element"),n=Symbol.for("react.fragment"),i=Object.prototype.hasOwnProperty,c=a.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,s={key:!0,ref:!0,__self:!0,__source:!0};function d(t,e,r){var a,n={},d=null,l=null;for(a in void 0!==r&&(d=""+r),void 0!==e.key&&(d=""+e.key),void 0!==e.ref&&(l=e.ref),e)i.call(e,a)&&!s.hasOwnProperty(a)&&(n[a]=e[a]);if(t&&t.defaultProps)for(a in e=t.defaultProps)void 0===n[a]&&(n[a]=e[a]);return{$$typeof:o,type:t,key:d,ref:l,props:n,_owner:c.current}}e.jsx=d},823:(t,e,r)=>{t.exports=r(43)},24:e=>{e.exports=t}},r={};function a(t){var o=r[t];if(void 0!==o)return o.exports;var n=r[t]={exports:{}};return e[t](n,n.exports,a),n.exports}a.d=(t,e)=>{for(var r in e)a.o(e,r)&&!a.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},a.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),a.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var o={};return(()=>{a.r(o),a.d(o,{Hovercards:()=>_,useHovercards:()=>h});var t=a(24);const e=function(e){var r=(0,t.useRef)(e);return r.current=e,r};var r={top:"paddingBottom",bottom:"paddingTop",left:"paddingRight",right:"paddingLeft"};function n(t){var e={"&":"&","<":"<",">":">",'"':""","'":"'","`":"`"};return t.replace(/&(amp|lt|gt|quot|#39|x60);|[\&<>"'`]/g,(function(t){return"&"===t[0]?t:e[t]}))}function i(t){return encodeURI(t)}function c(t,e){return t[e]||e}function s(){return s=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},s.apply(this,arguments)}var d=["wordpress","mastodon","tumblr","github","twitter"],l=document,v=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,c=r.offset,s=void 0===c?10:c,d=r.delayToShow,l=void 0===d?500:d,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,H=void 0===y?function(){}:y,b=r.onFetchProfileSuccess,w=void 0===b?function(){}:b,S=r.onFetchProfileFailure,P=void 0===S?function(){}:S,R=r.onHovercardShown,k=void 0===R?function(){}:R,E=r.onHovercardHidden,F=void 0===E?function(){}:E,T=r.i18n,x=void 0===T?{}:T;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=s,this._delayToShow=l,this._delayToHide=h,this._additionalClass=f,this._myHash=g,this._onQueryHovercardRef=p,this._onFetchProfileStart=H,this._onFetchProfileSuccess=w,this._onFetchProfileFailure=P,this._onHovercardShown=k,this._onHovercardHidden=F,this._i18n=x}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(l.querySelectorAll(r)):[],c="gravatar.com/avatar/";return t.dataset[n]||"IMG"===t.tagName&&t.src.includes(c)?o=[t]:(o=Array.from(t.querySelectorAll('img[src*="'+c+'"]')),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,c=t.dataset[n];if(c?(r=c.split("?")[0],o=c):"IMG"===t.tagName&&(r=t.src.split("/").pop().split("?")[0],o=t.src),!r)return null;var s=new URLSearchParams(o),d=s.get("d")||s.get("default"),l=s.get("f")||s.get("forcedefault"),v=s.get("r")||s.get("rating");return{id:"gravatar-hovercard-"+r+"-"+e,hash:r,params:(o=[d&&"d="+d,l&&"f="+l,v&&"r="+v].filter(Boolean).join("&"))?"?"+o:"",ref:a._onQueryHovercardRef(t)||t}})).filter(Boolean),this._hovercardRefs},e._createHovercardSkeleton=function(){var t=l.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,n=e.hash,i=e.params,d=e.ref,v=setTimeout((function(){if(!l.getElementById(o)){var e;if(a._cachedProfiles.has(n)){var v=a._cachedProfiles.get(n);e=t.createHovercard(s({},v,{thumbnailUrl:v.thumbnailUrl+i}),{additionalClass:a._additionalClass,myHash:a._myHash,i18n:a._i18n})}else e=a._createHovercardSkeleton(),a._onFetchProfileStart(n),fetch("https://secure.gravatar.com/"+n+".json").then((function(t){return t.json()})).then((function(r){if(null==r||!r.entry)throw new Error(r);var o=r.entry[0],c=o.hash,d=o.thumbnailUrl,l=o.preferredUsername,v=o.displayName,h=o.currentLocation,u=o.aboutMe,f=o.accounts;a._cachedProfiles.set(n,{hash:c,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(n),g=t.createHovercard(s({},_,{thumbnailUrl:_.thumbnailUrl+i}),{additionalClass:a._additionalClass,myHash:a._myHash,i18n:a._i18n}).firstElementChild;e.classList.remove("gravatar-hovercard--skeleton"),e.replaceChildren(g),a._onFetchProfileSuccess(n,a._cachedProfiles.get(n))})).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/'+n+i+'" 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?c(a._i18n,"Sorry, we are unable to load this Gravatar profile."):c(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(n,t)}));e.id=o,e.addEventListener("mouseenter",(function(){return clearInterval(a._hideHovercardTimeoutIds.get(o))})),e.addEventListener("mouseleave",(function(){return a._hideHovercard(o)})),l.body.appendChild(e);var h=function(t,e,a){var o=void 0===a?{}:a,n=o.placement,i=void 0===n?"right":n,c=o.offset,s=void 0===c?0:c,d=o.autoFlip,l=void 0===d||d,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("-"),H=y[0],b=y[1];if(s=Math.max(0,s),l){var w=v.top,S=innerHeight-v.bottom,P=v.left,R=innerWidth-v.right,k=h.height+s,E=h.width+s;"top"===H&&w<k&&S>w&&(H="bottom"),"bottom"===H&&S<k&&w>S&&(H="top"),"left"===H&&P<E&&R>P&&(H="right"),"right"===H&&R<E&&P>R&&(H="left")}return"top"===H||"bottom"===H?(m=g+v.width/2-h.width/2,p="top"===H?u-h.height-s:f,"start"===b&&(m=g),"end"===b&&(m=_-h.width)):(m="right"===H?_:g-h.width-s,p=u+v.height/2-h.height/2,"start"===b&&(p=u),"end"===b&&(p=f-h.height)),{x:m,y:p,padding:r[H],paddingValue:s}}(d,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(n,e)}}),this._delayToShow);this._showHovercardTimeoutIds.set(o,v)},e._hideHovercard=function(t){var e=this,r=setTimeout((function(){var r=l.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}();function h(r){var a=void 0===r?{}:r,o=a.placement,n=a.offset,i=a.autoFlip,c=a.delayToShow,s=a.delayToHide,d=a.additionalClass,l=a.myHash,h=a.i18n,u=a.onQueryHovercardRef,f=a.onFetchProfileStart,_=a.onFetchProfileSuccess,g=a.onFetchProfileFailure,m=a.onHovercardShown,p=a.onHovercardHidden,y=e(u),H=e(f),b=e(_),w=e(g),S=e(m),P=e(p),R=e(h),k=(0,t.useMemo)((function(){return new v({placement:o,offset:n,autoFlip:i,delayToShow:c,delayToHide:s,additionalClass:d,myHash:l,i18n:R.current,onQueryHovercardRef:y.current,onFetchProfileStart:H.current,onFetchProfileSuccess:b.current,onFetchProfileFailure:w.current,onHovercardShown:S.current,onHovercardHidden:P.current})}),[o,n,i,c,s,d,l,R,y,H,b,w,S,P]),E=k.attach,F=k.detach;return(0,t.useEffect)((function(){return F}),[F]),{attach:E,detach:F,createHovercard:v.createHovercard}}v.createHovercard=function(t,e){var r=void 0===e?{}:e,a=r.additionalClass,o=r.myHash,s=r.i18n,v=void 0===s?{}:s,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,H=l.createElement("div");H.className="gravatar-hovercard"+(a?" "+a:"");var b=i("https://gravatar.com/"+f+"?utm_source=hovercard"),w=n(_),S=!m&&o===h,P=y.reduce((function(t,e){var r=e.url,a=e.shortname,o=e.iconUrl,c=e.name,s=d.indexOf(a);return-1!==s&&(t[s]='\n\t\t\t\t\t\t<a class="gravatar-hovercard__social-link" href="'+i(r)+'" target="_blank" data-service-name="'+a+'">\n\t\t\t\t\t\t\t<img class="gravatar-hovercard__social-icon" src="'+i(o)+'" width="32" height="32" alt="'+n(c)+'" />\n\t\t\t\t\t\t</a>\n\t\t\t\t\t'),t}),[]).join("");return H.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="'+b+'" target="_blank">\n\t\t\t\t\t\t<img class="gravatar-hovercard__avatar" src="'+i(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="'+b+'" 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">'+n(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">'+n(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="'+b+'" 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":b)+'"\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'+c(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 ',H};var u=a(823),f=["children","attach","dataAttributeName","ignoreSelector","className","style"];function _(r){var a=void 0===r?{}:r,o=a.children,n=a.attach,i=a.dataAttributeName,c=a.ignoreSelector,s=a.className,d=a.style,l=h(function(t,e){if(null==t)return{};var r,a,o={},n=Object.keys(t);for(a=0;a<n.length;a++)r=n[a],e.indexOf(r)>=0||(o[r]=t[r]);return o}(a,f)).attach,v=(0,t.useRef)(null),_=e(n);return(0,t.useEffect)((function(){var t=_.current||v.current;t&&l(t,{dataAttributeName:i,ignoreSelector:c})}),[l,_,i,c]),n||!o?null:(0,u.jsx)("div",{ref:v,className:s,style:d,children:o})}})(),o})()));
//# sourceMappingURL=index.react.umd.js.map