Miscellaneous

Miscellaneous features offered by Sircl to support various Web APIs.

Introduction

This section covers miscellaneous features offered by Sircl.

Clipboard

The Sircl extended library offers support for copying to clipboard by means of several attributes. They are implemented as Event-Actions of the onclick event.

Copy text

To copy fixed text, add a clickable element with the onclick-copytext attribute who's value is the text to be copied:

<button type="button" onclick-copytext="[email protected]">
  Copy the email address
</button>

Copy page content

To copy part of a page, add a clickable element with the onclick-copyinnertext attribute who's value is a (relative) CSS selector to the element to copy the innerText from:

<button type="button" onclick-copyinnertext="#user-email-span">
  Copy the email address
</button>
<span id="user-email-span">[email protected]</span>

Or if you want to copy the HTML source code, use the onclick-copyinnerhtml attribute who's value is a (relative) CSS selector to the element to copy the innerHTML from

Copy input value

Finally, to copy the value of an input field or form control, use the onclick-copyvalue attribute who's value is a (relative) CSS selector to the field or control to copy it's actual value from:

<button type="button" onclick-copyvalue="INPUT[name=Email]">
  Copy the email address
</button>
<input type="email" name="Email" value="[email protected]"/>

Feature detection

The clipboard feature may not be available on all browsers or under certain conditions. The following classes can be used to show or hide page elements depending on whether the Clipboard API is supported by the browser:

• ifcanuseclipboard-show : the element decorated with this class is only visible if Clipboard API is supported by the browser or by a polyfill.
  
  
• ifcanuseclipboard-hide : the element decorated with this class is only visible if Clipboard API is not supported by the browser or by a polyfill.

In addition, when clipboard operations are not supported by the browser, elements having any of the onclick-copy* attributes will automatically be hidden.

Note that while the clipboard feature may be available in the browser, this does not guarantee copying will actually work. Several conditions must be met for the browser's Clipboard API to allow copying to the clipboard.

Sharing

The Web Share API offers a way to share text, URL and files to an arbitrary share target to be choosen by the user.

Sircl provides an easy way to integrate this API in you websites and applications using the onclick-share attribute which is part of the Sircl extended library..

The onclick-share attribute's value is a (relative) CSS selector to an element describing what to share.

The title of the data to share is taken from, in order of availability: the value of the data-share-title attribute on the share element, the title attribute on that element, or the current documents title.

The URL to share is taken from, in order of availability: the value of the data-share-url attribute on the share element, the href attribute on that element, or the current documents URL.

The text to share is taken from, in order of availability: the value of the data-share-text attribute or the text content of the share element.

File sharing is currently not supported.

In this example, the share element is the share button itself (using the relative CSS selector ":this"). The data-share-text attribute is set to avoid the button text to be the shared text:

<button type="submit" class="btn btn-link" onclick-share=":this" data-share-text="">
  Share this page
</button>

Since no title or URL is specified, the title and URL of the current document are shared.

Feature detection

The Web Share API is not supported on all browsers. See CanIUse for details. The following classes can be used to show or hide page elements depending on whether the Web Share API is supported by the browser:

• ifcanuseshare-show : the element decorated with this class is only visible if Web Share API is supported by the browser or by a polyfill.
  
  
• ifcanuseshare-hide : the element decorated with this class is only visible if Web Share API is not supported by the browser or by a polyfill.

In addition, on browers or platforms where sharing is not supported, the element holding the onclick-share attribute (usually the share button or link) will be hidden.