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 and share on Facebook or Twitter.

Demonstration
Markup
<div class="c-web-share ">
  <!--{ @data-js         "web-share" initalizes the Web Share Component. Falls back to using the Toggle Utility to display the sharing menu }-->
  <!--{ @data-web-share  Data attribute for holding data sent to the navigator.share() method. Note, in the Markup quotes are escaped as "&quot;" however, they must be regular quotes; "". Inspect the source of the Demostration to see the real example }-->
  <!--{ @aria-controls   Targets the Web Share fallback }-->
  <!--{ @aria-expanded   Indicates if the Web Share fallback is open or not }-->
  <button aria-controls="aria-c-web-share-fallback-957fa77e24332" aria-expanded="false" class="btn btn-small btn-primary m-0" data-js="web-share" data-web-share="{&quot;title&quot;:&quot;The share title&quot;,&quot;text&quot;:&quot;What users should say about this.&quot;,&quot;url&quot;:&quot;https://cityofnewyork.github.io/nyco-wnyc-patterns&quot;}">
    <svg class="c-web-share__icon icon-wnyc-ui">
      <use href="#feather-share-2"></use>
    </svg>
    <span>Share</span>
  </button>
  <!--{ Web Share Fallback }-->
  <!--{ @id    Toggle target of the web share button. Must match the "aria-controls" attribute of the toggling button }-->
  <!--{ @role  Indicates an area of significance }-->
  <div aria-hidden="true" class="c-web-share__fallback hidden " id="aria-c-web-share-fallback-957fa77e24332" role="region">
    <div class="c-web-share__fallback-body">
      <div class="flex mb-2 items-center flex-row-reverse">
        <!--{ @data-js        data-js="web-share" designates this element as a toggling element for the dropdown }-->
        <!--{ @aria-controls  Targets the element that will be shown and hidden by the toggle }-->
        <!--{ @aria-expanded  Indicates if the dropdown is open or not }-->
        <!--{ @data-dialog    data-dialog="close" designates this element as the primary close toggle for the dropdown. It will be focused on when the dropdown is opened. Only one close toggle associated with this aria-controls value can exist on the page }-->
        <!--{ @tabindex       Set the tabindex to '-1' on focusable elements if this area is hidden when the page is rendered }-->
        <button aria-controls="aria-c-web-share-fallback-957fa77e24332" aria-expanded="false" class="link-icon m-0" data-js="web-share" tabindex="-1">
          <svg aria-hidden="true" class="icon-wnyc-ui" tabindex="-1">
            <use href="#feather-x"></use>
          </svg>
          <span>Close</span>
        </button>
        <label class="c-web-share__label flex-1" for="web-share-url" tabindex="-1">Share this URL</label>
      </div>
      <div class="c-web-share__input input">
        <!--{ Copy-to-clipboard Content }-->
        <!--{ @data-copy-target  Identifies the input as the target of the copy button }-->
        <input data-copy-target="web-share-url" id="web-share-url" name="web-share-url" tabindex="-1" type="text" value="https://cityofnewyork.github.io/nyco-wnyc-patterns" />
      </div>
      <div class="c-web-share__items">
        <!--{ Copy-to-clipboard Button }-->
        <!--{ @data-js       Initializes the copy-to-clipboard utility }-->
        <!--{ @data-copy     Identifies the target of the content to copy }-->
        <!--{ @aria-pressed  Will signify a pressed state to screen readers }-->
        <button aria-pressed="false" class="c-web-share__item c-web-share__copy btn btn-small btn-primary mx-0" data-copy="web-share-url" data-js="copy" tabindex="-1">
          <svg class="icon icon-wnyc-ui">
            <use href="#feather-copy"></use>
          </svg>
          <svg class="icon-pressed icon-wnyc-ui">
            <use href="#feather-check"></use>
          </svg>
          <span>Copy URL</span>
        </button>
        <!--{ Facebook Sharer }-->
        <a class="c-web-share__item btn btn-small btn-primary mx-0" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fcityofnewyork.github.io%2Fnyco-wnyc-patterns" tabindex="-1" target="_blank">
          <svg class="icon-wnyc-ui">
            <use href="#feather-facebook"></use>
          </svg>
          <span>Facebook</span>
        </a>
        <!--{ Twitter Tweet }-->
        <a class="c-web-share__item btn btn-small btn-primary mx-0" href="https://twitter.com/intent/tweet?text=What%20users%20should%20say%20about%20this.%20https%3A%2F%2Fcityofnewyork.github.io%2Fnyco-wnyc-patterns" tabindex="-1" target="_blank">
          <svg class="icon-wnyc-ui">
            <use href="#feather-twitter"></use>
          </svg>
          <span>Twitter</span>
        </a>
      </div>
    </div>
  </div>
</div>
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 Toggle and Copy-to-clipboard Utility for the fallback component. To use the Web Share Component through the global script use the following code:

<script src="/dist/scripts/main.js"></script>

<script>
  var patterns = new WorkingNyc();
  patterns.webShare();
  patterns.copy();
</script>

This will instantiate the Web Share Component and fallback component.

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();
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().