Web Share

The Web Share Component invokes the native sharing mechanism of a device (if supported), allowing users to share on the platform of their choice. For browsers that do not support the Web Share API a custom fallback is displayed to allow users to copy the link, share on Facebook or Twitter.

<nav class="c-web-share">
  <button aria-controls="web-share-fallback" aria-expanded="false" class="btn btn-small btn-primary" data-js="web-share" data-web-share="{&quot;title&quot;:&quot;ACCESS NYC&quot;,&quot;text&quot;:&quot;Find help with food, money, housing, and more on ACCESS NYC&quot;,&quot;url&quot;:&quot;https://access.nyc.gov&quot;}">
    <svg class="c-web-share__icon icon-ui">
      <use xlink:href="#icon-ui-share-2"></use>
    </svg>Share
  </button>
  <div aria-hidden="true" class="c-web-share__fallback color-info-status hidden:fadeInUp animated hidden" id="web-share-fallback" role="region">
    <div class="c-web-share__fallback-body">
      <label class="c-web-share__label" for="web-share-url" tabindex="-1">Share this URL</label>
      <input class="c-web-share__input" data-copy-target="web-share-url" id="web-share-url" name="web-share-url" tabindex="-1" type="text" value="https://access.nyc.gov" />
      <button aria-pressed="false" class="c-web-share__item c-web-share__copy btn btn-small btn-primary" data-copy="web-share-url" data-js="copy" tabindex="-1">
        <svg class="c-web-share__icon icon icon-ui" tabindex="-1">
          <use xlink:href="#icon-ui-copy"></use>
        </svg>
        <svg class="c-web-share__icon icon-pressed icon-ui me-1" tabindex="-1">
          <use xlink:href="#icon-ui-check"></use>
        </svg>Copy URL
      </button>
      <a class="c-web-share__item btn btn-small btn-primary" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Faccess.nyc.gov" tabindex="-1" target="_blank">
        <svg class="c-web-share__icon icon-ui">
          <use xlink:href="#icon-ui-facebook"></use>
        </svg>Facebook
      </a>
      <a class="c-web-share__item btn btn-small btn-primary" href="https://twitter.com/intent/tweet?text=Find%20help%20with%20food%2C%20money%2C%20housing%2C%20and%20more%20on%20ACCESS%20NYC%20https%3A%2F%2Faccess.nyc.gov" tabindex="-1" target="_blank">
        <svg class="c-web-share__icon icon-ui">
          <use xlink:href="#icon-ui-twitter"></use>
        </svg>Twitter
      </a>
    </div>
  </div>
</nav>

Web Share Usage

Global Script

The Web Share Component requires JavaScript for calling the navigator.share() api in supported browsers and showing/hiding the fallback for unsupported browsers. It also uses a Copy-to-clipboard Utility in the sharing fallback dialogue. To use the Web Share Component through the global ACCESS NYC Patterns script use the following code:

<!-- Global Script -->
<script src="dist/scripts/AccessNyc.js"></script>

<script>
  var access = new AccessNyc();

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

This will instantiate the Web Share Component and Copy-to-clipboard Utility.

Module Import

The Web Share source exisits in the NYCO Patterns Framework. Install the @nycopportunity/patterns-framework module to import the module. 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/patterns-framework/src/web-share/web-share';
import Toggle from '@nycopportunity/patterns-framework/src/utilities/toggle/toggle';
import Copy from '@nycopportunity/patterns-framework/src/utilities/copy/copy';

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

new Copy();