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.

Details

The ewc-popover-sharing derives from ewc-popover. ewc-popover expects 2 children

• the element toggling the popover (on click/keypress)
• and the content

ewc-popover-sharing configures the first child to contain the list of sharing options. As a result, the user only has to specify the element for toggling.

Note that the content of the ewc-popover-sharing is in the shadow DOM. For ewc-popover it's in light DOM. The element for toggling is in light DOM in both components.

Usage example

Working examples about how to use the component can be found in the directory usage-example/

Aria recommendations

• For the html element which opens the popover, the following aria attributes should be used:
• aria-controls="mySharingId"
• aria-haspopup="true"

Example:

<ewc-popover-sharing id="mySharingId">
  <button slot="toggle" aria-controls="mySharingId" aria-haspopup="true">
...

Change log

• 1.1.3-beta

  • a11y: correction of aria-labelledby

• 1.1.2-beta

  • fix: issue in opener.js for X "lang=unknown"

• 1.1.1-beta

  • promote to beta
  • fix: issue in opener.js "lang=unknown"

• 1.1.0-alpha

  • html structure: change button to link,
  • use aria-labelledby
  • document recommended usage of "aria-controls" attribute

• 1.0.4-alpha

  • a11y: add role="dialog"
  • aria label and focus outline

• 1.0.3-alpha

  • fix broken webpack usage-example

• 1.0.2-alpha

  • add "Change log" to readme.md

• 1.0.1-alpha

  • (addendum to prev. vers.) update documentation
  • use HTML "button" instead of "a" for list elements (a11y)
  • thin version of embed icon
  • add usage example for "opener"-functionality

• 1.0.0-alpha

  • replace dependency to ewc.css w/ dependency to ewc-common
  • put HTML into shadow DOM
  • add usage examples (working sourcecode)