Screenshot

A popover presenting social media share links for Facebook, X, LinkedIn, Email und Embed - in that order. It extends ewc-popover.

API

Properties

• callback - is invoked when a menu item is selected.
  • signature: callback(menuItem), where menuItem is one of: facebook,x,linkedin,email,embed

Note: can be modified at runtime.

Attributes (additionally to Popover)

• visibleItems - A comma separated, case insensitive CSV string, containing ids of visible menu items.
  • Example for all visible: "facebook,x,linkedin,email,embed"
  • doesn't affect order.
  • can not be modified at runtime.

opener.js

This implements creating URLs and opening websites, email client or invoking an ewc-dialog (for embed). It's usage is optional.

vanillaJS Usage

example index.html

<script src="./ewc-popover-sharing/src/main.js" type="module"></script>

<ewc-popover-sharing positioningHint="bottom">
  <button>Sharing!</button>
</ewc-popover-sharing>

<script>
  window.addEventListener('DOMContentLoaded',function () {
    document.getElementsByTagName("ewc-popover-sharing")[0].callback = (menuItem) => {
      console.log("from sharing1: "+menuItem)
      alert("from sharing1: "+menuItem)
    }
</script>

using opener.js (optional)

<script type="module">
  import * as OPENER from  "./ewc-popover-sharing/src/opener.js"
  OPENER.setup({
    text: "This is a demonstration",
    hashTags: "#ewc-lib #ewc-popover-sharing",
    mailSubject: "This is an email subject",
    mailBody: "This is the email body",
    // note: assume existing ewc-dialog element
    ewcDialog: document.getElementsByTagName("ewc-dialog")[0]
  })
  document.getElementsByTagName("ewc-popover-sharing")[0].callback = OPENER.execute
</script>

Usage with WebPack

package.json

"dependencies": {
  "@ewc-lib/ewc-popover-sharing": "^0.1.0-alpha"
}

example index.html

TODO

using opener.js

Either import with the node module path

import * as OPENER from "@ewc-lib/ewc-popover-sharing/src/opener.js"

or copy the opener.js in your project if you want to customize it

import * as OPENER from '../scripts/opener.js'

Example of use

/* CHANGE YOU VAR */
const chapter = indicators[0].code.replace(/\./g, '_');
const twitterTags  = (_(`indicator${chapter}.sharing.hashtags`));
const sharingText = _(`indicator${chapter}.sharing.text`);
var mailSubject = (_(`indicator${chapter}.sharing.mail.subject`));
var mailText = (_(`indicator${chapter}.sharing.mail.text`) + window.location.href);

OPENER.setup({
    text: sharingText,
    hashTags: twitterTags,
    mailSubject: mailSubject,
    mailBody: mailText,
    // note: assume existing ewc-dialog element
    ewcDialog: document.getElementsByTagName("ewc-dialog-clipboard")[0]
    })
    document.getElementsByTagName("ewc-popover-sharing")[0].callback = OPENER.execute

index.js

import "@ewc-lib/ewc-popover-sharing"