web-social-share/dist/collection/components/web-social-share/web-social-share.js

A Web Component to share urls and text on social networks

import { Component, Element, Event, Prop, h } from '@stencil/core';
import { shareFacebook } from '../../utils/facebook';
import { shareTwitter } from '../../utils/twitter';
import { email } from '../../utils/email';
import { linkedin } from '../../utils/linkedin';
import { pinterest } from '../../utils/pinterest';
import { reddit } from '../../utils/reddit';
import { whatsapp } from '../../utils/whatsapp';
import { copy } from '../../utils/copy';
import { hackernews } from '../../utils/hackernews';
import { telegram } from '../../utils/telegram';
/**
 * @slot facebook - A slot to display an icon or text in the related social share button
 * @slot twitter - A slot to display an icon or text in the related social share button
 * @slot email - A slot to display an icon or text in the related social share button
 * @slot linkedin - A slot to display an icon or text in the related social share button
 * @slot pinterest - A slot to display an icon or text in the related social share button
 * @slot whatsapp - A slot to display an icon or text in the related social share button
 * @slot copy - A slot to display an icon or text in the related social share button
 * @slot hackernews - A slot to display an icon or text in the related social share button
 */
export class WebSocialShare {
  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);
    this.hide();
  }
  render() {
    return (h("div", { class: this.show ? 'web-social-share web-social-share-open' : 'web-social-share web-social-share-close', ref: (el) => (this.refContainer = el) },
      h("div", { class: "web-social-share-backdrop", onClick: () => this.hide() }),
      h("div", { class: "web-social-share-action-sheet", onClick: () => this.hide() },
        h("div", { class: "web-social-share-action-sheet-container" },
          h("div", { 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');
    }
    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/web-social-share-input"
          }
        }
      },
      "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"; }
}