@ewc-lib/ewc-dialog-clipboard

Screenshot

This is a dialog to enable a user to copy some given text into the OS's clipboard.

Before click on button

After click on button

API

The API of ewc-dialog applies to this component as well, because it derives from ewc-dialog.

However because this is a single purpose specialisation of ewc-dialog, there should be no need to specialise it any further.

This component introduces the following properties:

• clipboardContent - the given string is displayed in the dialog and copied into the clipboard.
• messages - an object specifying the text messages of the dialog. For details, see Translation.

The properties can be modified at runtime.

Please see usage-example/ directory for examples on how to use this component.

This component is buildless and can be used with bundlers, as well as in a vanillaJS context.

Translation

The following object is defined internally to specify the default texts.

{
  title: "Embed visualisation",
  prompt: "Copy the following code or click the button to automatically copy to clipboard.",
  buttonText: "Copy to clipboard",
  outcomeSuccess: "Copied to clipboard",
  outcomeFailure: "Code could not be copied to clipboard"
}

The texts can be changed by supplying an object w/ the properties shown above to the messages setter.

Note that it is mandatory to set each property in the given object - supplying an object w/ only some of the properties results in undefined behaviour.

The examples in the usage-example/ directory also contain this use case.

Usage

Installation

npm install @ewc-lib/ewc-dialog-clipboard

Import the component in your application:

// Using ES modules
import "@ewc-lib/ewc-css-common/custom-props.css"
import "@ewc-lib/ewc-dialog-clipboard"

Note about ewc-css-common

• "ewc-css-common/custom-props.css" is necessary and downloaded along with ewc-dialog.
• It needs to be imported by the host project because it's imported neither by ewc-dialog nor ewc-dialog-clipboard.

Changelog

• 2.2.3-beta

  • improve integration support

• 2.2.2-beta

  • isolate class hierarchy to support different ewc-dialog version in host project
  • fix version info mistake

• 2.2.1-beta

  • fix: avoid double customElements.define() invocation when deriving classes

• 2.2.0-beta

  • a11y: #EWC-200, remove superfluous p-tag, add error correction suggestion, add word "again" to copy button

• 2.1.0-beta

  • bugfix: Success/Fail message from before still displayed after closing and opening the dialog again

• 2.0.4-alpha

  • improve support of narrow width and zoom
  • focus on copy button after dialog opening