Web Share

GitHub Source Link @nycopportunity/standard/src/components/web-share

Demonstration
Code

The Web Share is a small button that invokes the Web Share API a browser utility that allows users to copy the URL to their clipboard or share on the social network platform of their choice. For browsers that do not support the Web Share API (refer to the Browser compatibility table), a fallback element is displayed to allow users to copy the link, share on Facebook, or share on Twitter.

Because some desktop browsers do not support copying to the clipboard in the Web Share dialog, the copy-to-clipboard button is shown next to the share button in desktop viewports.

Web Share Fallback Anchor Link Web Share Fallback

GitHub Source Link @nycopportunity/standard/src/components/web-share

Demonstration
Code

The web share fallback is a dialog that displays the URL to be shared with the copy-to-clipboard button and button links to share on Facebook or Twitter. It will only be visible to users using a browser that does not support the Web Share API. The example below uses the static class to show the fallback. To hide the fallback, use the hidden class in the code example above.

The fallback uses the Patterns Scripts Toggle Utility to show and hide the dialog. Potentially focusable elements must have their tabindex set to -1 to hide them from screen readers before the dialog opens.

The fallback is positioned absolutely by default without an initial z-index. It may need its z-index set using a CSS utility to ensure it displays over other elements. For example, z-30.

Usage Anchor Link Usage

GitHub Source Link @nycopportunity/standard/src/components/web-share

Global Script

The Web Share requires JavaScript for calling the navigator.share() API in supported browsers and showing/hiding the fallback for unsupported browsers. It also uses the Patterns Scripts Copy Utility for the copy-to-clipboard button and the Toggle Utility to show and hide the fallback component. To use the Web Share through the global script use the following code: 

<script src="@nycopportunity/standard/dist/js/default.js"></script>

<script>
  var Standard = new Default();

  Standard.webShare();
  Standard.copy();
</script>

This will instantiate the Web Share and fallback element.

Module Import

The Web Share source exists in the Patterns Scripts utility library, which is a dependency of this library. This method allows the specification of a callback method for a successful share and the fallback method. The Toggle and Copy modules are optional but required for the fallback in the demo.

import WebShare from '@nycopportunity/pttrn-scripts/src/web-share/web-share';
import Toggle from '@nycopportunity/pttrn-scripts/src/utilities/toggle/toggle';
import Copy from '@nycopportunity/pttrn-scripts/src/utilities/copy/copy';

new WebShare({
  callback: () => {
    // Designate an optional callback function for a successful share here
  },
  fallback: () => {
    new Toggle({
      selector: WebShare.selector
    });
  }
});

new Copy();
Configuration

The WebShare() accepts an object with the following attributes:

Attribute Description
selector An alternate selector to the default [data-js*="web-share"]
callback A callback function executed on a successful share.
fallback A fallback function executed when the browser does not support navigator.share().