web-social-share
Version:
A Web Component to share urls and text on social networks
2 lines • 12 kB
JavaScript
import{r as e,c as i,h as a,g as t}from"./p-0b91ba61.js";const o=async e=>{var i;try{await navigator.clipboard.writeText((i=e.socialShareUrl)!==null&&i!==void 0?i:window.location.href)}catch(e){console.error("Well it seems that copy is not supported by this browser")}};const s=()=>{const e=window.matchMedia("(any-pointer:coarse)").matches;const i=window.matchMedia("(any-pointer:fine)").matches;return e&&!i};const r=({urlString:e,target:i="_blank"})=>window.open(e,i);const n=e=>encodeURIComponent(e!==null&&e!==void 0?e:window.location.href);const c=async({socialShareUrl:e,socialShareText:i,socialShareTitle:a,socialSharePortal:t,openWindowTarget:o})=>{let s=`https://dscvr.one/?url=${n(e)}`;if(i){s+=`&text=${encodeURIComponent(i)}`}if(a){s+="&title="+encodeURIComponent(a)}if(t){s+="&portal="+encodeURIComponent(t)}r({urlString:s,target:o})};const l=async({socialShareTo:e,socialShareBody:i,socialShareSubject:a,socialShareCc:t,socialShareBcc:o})=>{let s="mailto:";if(e){s+=encodeURIComponent(e)}s+="?";if(i){s+="body="+encodeURIComponent(i)}if(a){s+="&subject="+encodeURIComponent(a)}if(t){s+="&cc="+encodeURIComponent(t)}if(o){s+="&bcc="+encodeURIComponent(o)}if(window.self!==window.top){window.open(s,"_blank")}else{window.open(s,"_self")}};const h=async({socialShareType:e,socialShareVia:i,socialShareRedirectUri:a,socialShareUrl:t,socialShareTo:o,socialShareDisplay:s,socialShareRef:c,socialShareFrom:l,socialShareSource:h,socialShareQuote:d,socialShareMobileiframe:b,socialShareHashtags:w,openWindowTarget:p})=>{let u;if(e==="feed"){u="https://www.facebook.com/dialog/feed?";if(i){u+="&app_id="+encodeURIComponent(i)}if(a){u+="&redirect_uri="+encodeURIComponent(a)}if(t){u+="&link="+n(t)}if(o){u+="&to="+encodeURIComponent(o)}if(s){u+="&display="+encodeURIComponent(s)}if(c){u+="&ref="+encodeURIComponent(c)}if(l){u+="&from="+encodeURIComponent(l)}if(h){u+="&source="+encodeURIComponent(h)}r({urlString:u,target:p});return}if(e==="share"){u="https://www.facebook.com/dialog/share?";if(i){u+="&app_id="+encodeURIComponent(i)}if(a){u+="&redirect_uri="+encodeURIComponent(a)}if(t){u+="&href="+n(t)}if(d){u+=""e="+encodeURIComponent(d)}if(s){u+="&display="+encodeURIComponent(s)}if(b){u+="&mobile_iframe="+encodeURIComponent(b)}if(w){u+="&hashtag="+encodeURIComponent(w)}r({urlString:u,target:p});return}if(e==="send"){u="https://www.facebook.com/dialog/send?";if(i){u+="&app_id="+encodeURIComponent(i)}if(a){u+="&redirect_uri="+encodeURIComponent(a)}if(t){u+="&link="+n(t)}if(o){u+="&to="+encodeURIComponent(o)}if(s){u+="&display="+encodeURIComponent(s)}r({urlString:u,target:p});return}r({urlString:`https://www.facebook.com/sharer/sharer.php?u=${n(t)}`,target:p})};const d=async({socialShareUrl:e,socialShareText:i,openWindowTarget:a})=>{let t="https://news.ycombinator.com/submitlink?u=";t+=n(e);if(i){t+="&t="+encodeURIComponent(i)}r({urlString:t,target:a})};const b=async({socialShareUrl:e,socialShareText:i,socialShareDescription:a,socialShareSource:t,openWindowTarget:o})=>{let s="https://www.linkedin.com/shareArticle?mini=true";s+="&url="+n(e);if(i){s+="&title="+encodeURIComponent(i)}if(a){s+="&summary="+encodeURIComponent(a)}if(t){s+="&source="+encodeURIComponent(t)}r({urlString:s,target:o})};const w=async({socialShareUrl:e,socialShareText:i,openWindowTarget:a})=>{let t=`https://oc.app/?url=${n(e)}`;if(i){t+=`&text=${encodeURIComponent(i)}`}t+=`#/share`;r({urlString:t,target:a})};const p=async({socialShareUrl:e,socialShareMedia:i,socialShareText:a,openWindowTarget:t})=>{let o=`https://www.pinterest.com/pin/create/button/?url=${n(e)}`;if(i){o+=`&media=${encodeURIComponent(i)}`}if(a){o+=`&description=${encodeURIComponent(a)}`}r({urlString:o,target:t})};const u=async({socialShareSubreddit:e,socialShareUrl:i,socialShareText:a,openWindowTarget:t})=>{let o="https://www.reddit.com/";if(e){o+="r/"+e+"/submit?url="}else{o+="submit?url="}o+=n(i);if(a){o+=`&title=${encodeURIComponent(a)}`}r({urlString:o,target:t})};const f=async({socialShareUrl:e,socialShareText:i,openWindowTarget:a})=>{let t=`https://t.me/share/url?url=${n(e)}`;if(i){t+=`&text=${encodeURIComponent(i)}`}r({urlString:t,target:a})};const g=async({socialShareText:e,socialShareVia:i,socialShareHashtags:a,socialShareUrl:t,openWindowTarget:o})=>{let s="https://www.twitter.com/intent/tweet?";if(e){s+="text="+encodeURIComponent(e)}if(i){s+="&via="+encodeURIComponent(i)}if(a){s+="&hashtags="+encodeURIComponent(a)}s+="&url="+n(t);r({urlString:s,target:o})};const m=async({socialShareText:e,socialShareUrl:i,openWindowTarget:a})=>{const t=s();let o=t?"https://api.whatsapp.com/send?text=":"https://web.whatsapp.com/send?text=";if(e){o+=encodeURIComponent(e)+"%0A"}o+=n(i);r({urlString:o,target:a})};const v="div.web-social-share{visibility:hidden;opacity:0;cursor:pointer;touch-action:manipulation}div.web-social-share.web-social-share-open{visibility:visible;opacity:1}div.web-social-share.web-social-share-open div.web-social-share-backdrop{opacity:var(--web-social-share-backdrop-opacity, 0.25)}div.web-social-share.web-social-share-open div.web-social-share-action-sheet{opacity:1}div.web-social-share.web-social-share-open div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{height:var(--web-social-share-height, 80px)}@media (max-width: 540px){div.web-social-share.web-social-share-open div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{height:var(--web-social-share-height-small-device, 140px)}}div.web-social-share.web-social-share-open.web-social-share-transition-close div.web-social-share-backdrop{opacity:0}div.web-social-share.web-social-share-open.web-social-share-transition-close div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{height:0}div.web-social-share div.web-social-share-backdrop{opacity:0;transition:opacity 0.1s linear;background-color:var(--web-social-share-backdrop-background, black);z-index:var(--web-social-share-zindex, 1000);transform:translate3d(0, 0, 2px);left:0;top:0;position:fixed;height:100%;width:100%}div.web-social-share div.web-social-share-action-sheet{left:0;right:0;top:0;bottom:0;margin:auto;position:fixed;z-index:calc(var(--web-social-share-zindex, 1000) + 1);transform:translate3d(0, 0, 3px);width:100%;max-width:540px}@media (min-width: 540px){div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{border-radius:var(--web-social-share-action-sheet-group-border-radius, 8px 8px 0 0)}}div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container{display:flex;flex-flow:column;justify-content:flex-end;height:100%;max-height:100%}div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{box-shadow:var(--web-social-share-action-sheet-group-box-shadow, 0 0 8px 4px rgba(0, 0, 0, 0.1));z-index:calc(var(--web-social-share-zindex, 1000) + 10);transform:translate3d(0, 0, 10px);--background:var(--web-social-share-action-sheet-group-background, #fafafa);background:var(--background);display:flex;justify-content:center;flex-wrap:wrap;height:0;transition-timing-function:cubic-bezier(0.36, 0.66, 0.04, 1);transition:height 0.2s ease-in}@media (max-width: 540px){div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{justify-content:flex-start}}div.web-social-share div.web-social-share-target{margin:auto;width:var(--web-social-share-target-width, 4rem);height:var(--web-social-share-target-height, 3rem);display:flex;flex-direction:column;align-items:center;justify-content:center}div.web-social-share div.web-social-share-target button{position:relative;overflow:hidden;background-position:center;background-color:var(--background);transition:background 0.8s;border-radius:var(--web-social-share-button-border-radius, 8px);cursor:pointer;border:0;width:var(--web-social-share-button-width, 100%);height:var(--web-social-share-button-height, 100%);font-size:var(--web-social-share-button-font-size)}div.web-social-share div.web-social-share-target button:hover{background:var(--background) radial-gradient(circle, transparent 1%, var(--background) 1%) center/15000%}div.web-social-share div.web-social-share-target button:active{background-color:var(--web-social-share-button-ripple-effect-color, #cecece);background-size:100%;transition:background 0s}div.web-social-share div.web-social-share-target p{margin:var(--web-social-share-brand-margin, 2px 0);color:var(--web-social-share-brand-color, inherit);font-size:var(--web-social-share-brand-font-size, 0.6rem)}div.web-social-share div.web-social-share-target div.web-social-share-button-icon{margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center}::slotted([slot=facebook]),::slotted([slot=twitter]),::slotted([slot=email]),::slotted([slot=linkedin]),::slotted([slot=pinterest]),::slotted([slot=reddit]),::slotted([slot=whatsapp]),::slotted([slot=copy]),::slotted([slot=hackernews]){display:none}";const S=v;const x=class{constructor(a){e(this,a);this.closed=i(this,"closed",7);this.show=undefined;this.share=undefined}hide(){if(this.refContainer){this.refContainer.classList.add("web-social-share-transition-close");setTimeout((()=>{this.show=false;this.refContainer.classList.remove("web-social-share-transition-close");this.closed.emit()}),200)}else{this.show=false;this.closed.emit()}}async handleShare(e,i,a){e.stopPropagation();await a(i);setTimeout((()=>this.hide()),250)}render(){return a("div",{key:"e9a73b24a00be9a737e89a6874a0969d65034f99",class:this.show?"web-social-share web-social-share-open":"web-social-share web-social-share-close",ref:e=>this.refContainer=e},a("div",{key:"e169f529801d223a0d7fef09f51f43678dba86c3",class:"web-social-share-backdrop",onClick:()=>this.hide()}),a("div",{key:"691276123336062246b1709e03665e90c5abb14b",class:"web-social-share-action-sheet",onClick:()=>this.hide()},a("div",{key:"a6456c31b8f53f080be4c8e565c503f57e49a10c",class:"web-social-share-action-sheet-container"},a("div",{key:"a9809197e5edd7a5479f43eb928cd9a786a13d38",class:"web-social-share-action-sheet-group"},this.renderTargets()))))}renderTargets(){var e;if(!((e=this.share)===null||e===void 0?void 0:e.config)){return undefined}return this.share.config.map((e=>a("div",{class:"web-social-share-target"},this.renderButtons(e))))}renderButtons(e){if(e.facebook){return this.renderButton(e.facebook,"facebook",h,"Facebook")}else if(e.twitter){return this.renderButton(e.twitter,"twitter",g,"Twitter")}else if(e.email){return this.renderButton(e.email,"email",l,"Email")}else if(e.linkedin){return this.renderButton(e.linkedin,"linkedin",b,"Linkedin")}else if(e.pinterest){return this.renderButton(e.pinterest,"pinterest",p,"Pinterest")}else if(e.reddit){return this.renderButton(e.reddit,"reddit",u,"Reddit")}else if(e.whatsapp){return this.renderButton(e.whatsapp,"whatsapp",m,"WhatsApp")}else if(e.copy){return this.renderButton(e.copy,"copy",o,"Copy")}else if(e.hackernews){return this.renderButton(e.hackernews,"hackernews",d,"Hacker News")}else if(e.telegram){return this.renderButton(e.telegram,"telegram",f,"Telegram")}else if(e.openchat){return this.renderButton(e.openchat,"openchat",w,"OpenChat")}else if(e.dscvr){return this.renderButton(e.dscvr,"dscvr",c,"DSCVR")}return undefined}renderButton(e,i,t,o){return a("button",{onClick:i=>this.handleShare(i,e,t),class:"web-social-share-button"},a("div",{class:"web-social-share-button-icon"},a("slot",{name:i})),this.renderName(e,o))}renderName(e,i){if(this.share.displayNames){return a("p",null,e&&e.brandName&&e.brandName!==""?e.brandName:i)}return undefined}get el(){return t(this)}};x.style=S;export{x as web_social_share};
//# sourceMappingURL=p-1c530ead.entry.js.map