web-social-share
Version:
A Web Component to share urls and text on social networks
190 lines (189 loc) • 8.09 kB
JavaScript
import { h } from "@stencil/core";
import { copy } from "../../providers/copy";
import { dscvr } from "../../providers/dscvr";
import { email } from "../../providers/email";
import { shareFacebook } from "../../providers/facebook";
import { hackernews } from "../../providers/hackernews";
import { linkedin } from "../../providers/linkedin";
import { openchat } from "../../providers/openchat";
import { pinterest } from "../../providers/pinterest";
import { reddit } from "../../providers/reddit";
import { telegram } from "../../providers/telegram";
import { shareTwitter } from "../../providers/twitter";
import { whatsapp } from "../../providers/whatsapp";
/**
* @slot facebook - A slot to display an icon or text for Facebook
* @slot twitter - A slot to display an icon or text for Twitter
* @slot email - A slot to display an icon or text for a shate to an email
* @slot linkedin - A slot to display an icon or text for LinkedIn
* @slot pinterest - A slot to display an icon or text for Pinterest
* @slot whatsapp - A slot to display an icon or text for Whatsapp
* @slot copy - A slot to display an icon or text to copy to clipboard
* @slot hackernews - A slot to display an icon or text for Hackernews
* @slot telegram - A slot to display an icon or text for Telegram
* @slot openchat - A slot to display an icon or text for Openchat
* @slot dscvr - A slot to display an icon or text for Dscvr
*/
export class WebSocialShare {
constructor() {
this.show = undefined;
this.share = undefined;
}
hide() {
if (this.refContainer) {
this.refContainer.classList.add('web-social-share-transition-close');
setTimeout(() => {
// Reflect css animation speed 400ms, see css
this.show = false;
this.refContainer.classList.remove('web-social-share-transition-close');
this.closed.emit();
}, 200);
}
else {
// Well we don't find the action sheet, we could mark it as not displayed
this.show = false;
this.closed.emit();
}
}
async handleShare($event, attributes, action) {
$event.stopPropagation();
await action(attributes);
setTimeout(() => this.hide(), 250);
}
render() {
return (h("div", { key: 'e9a73b24a00be9a737e89a6874a0969d65034f99', class: this.show
? 'web-social-share web-social-share-open'
: 'web-social-share web-social-share-close', ref: (el) => (this.refContainer = el) }, h("div", { key: 'e169f529801d223a0d7fef09f51f43678dba86c3', class: "web-social-share-backdrop", onClick: () => this.hide() }), h("div", { key: '691276123336062246b1709e03665e90c5abb14b', class: "web-social-share-action-sheet", onClick: () => this.hide() }, h("div", { key: 'a6456c31b8f53f080be4c8e565c503f57e49a10c', class: "web-social-share-action-sheet-container" }, h("div", { key: 'a9809197e5edd7a5479f43eb928cd9a786a13d38', class: "web-social-share-action-sheet-group" }, this.renderTargets())))));
}
renderTargets() {
var _a;
if (!((_a = this.share) === null || _a === void 0 ? void 0 : _a.config)) {
return undefined;
}
return this.share.config.map((config) => (h("div", { class: "web-social-share-target" }, this.renderButtons(config))));
}
renderButtons(share) {
if (share.facebook) {
return this.renderButton(share.facebook, 'facebook', shareFacebook, 'Facebook');
}
else if (share.twitter) {
return this.renderButton(share.twitter, 'twitter', shareTwitter, 'Twitter');
}
else if (share.email) {
return this.renderButton(share.email, 'email', email, 'Email');
}
else if (share.linkedin) {
return this.renderButton(share.linkedin, 'linkedin', linkedin, 'Linkedin');
}
else if (share.pinterest) {
return this.renderButton(share.pinterest, 'pinterest', pinterest, 'Pinterest');
}
else if (share.reddit) {
return this.renderButton(share.reddit, 'reddit', reddit, 'Reddit');
}
else if (share.whatsapp) {
return this.renderButton(share.whatsapp, 'whatsapp', whatsapp, 'WhatsApp');
}
else if (share.copy) {
return this.renderButton(share.copy, 'copy', copy, 'Copy');
}
else if (share.hackernews) {
return this.renderButton(share.hackernews, 'hackernews', hackernews, 'Hacker News');
}
else if (share.telegram) {
return this.renderButton(share.telegram, 'telegram', telegram, 'Telegram');
}
else if (share.openchat) {
return this.renderButton(share.openchat, 'openchat', openchat, 'OpenChat');
}
else if (share.dscvr) {
return this.renderButton(share.dscvr, 'dscvr', dscvr, 'DSCVR');
}
return undefined;
}
renderButton(attributes, slotName, action, defaultBrandName) {
return (h("button", { onClick: ($event) => this.handleShare($event, attributes, action), class: "web-social-share-button" }, h("div", { class: "web-social-share-button-icon" }, h("slot", { name: slotName })), this.renderName(attributes, defaultBrandName)));
}
renderName(displayAttributes, defaultBrandName) {
if (this.share.displayNames) {
return (h("p", null, displayAttributes && displayAttributes.brandName && displayAttributes.brandName !== ''
? displayAttributes.brandName
: defaultBrandName));
}
return undefined;
}
static get is() { return "web-social-share"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["web-social-share.scss"]
};
}
static get styleUrls() {
return {
"$": ["web-social-share.css"]
};
}
static get properties() {
return {
"show": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Trigger the display, or close, of the action sheet which contains the social-share options"
},
"attribute": "show",
"reflect": false
},
"share": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "WebSocialShareInput",
"resolved": "WebSocialShareInput",
"references": {
"WebSocialShareInput": {
"location": "import",
"path": "../../types/input",
"id": "src/types/input.ts::WebSocialShareInput"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The share options"
}
}
};
}
static get events() {
return [{
"method": "closed",
"name": "closed",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "An event triggered when the modal is `closed`"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
}
//# sourceMappingURL=web-social-share.js.map