diff --git a/elements/pfe-clipboard/README.md b/elements/pfe-clipboard/README.md index 8e169fc71e..82171ca954 100644 --- a/elements/pfe-clipboard/README.md +++ b/elements/pfe-clipboard/README.md @@ -37,6 +37,11 @@ A button to copy the current URL to the system clipboard. ``` +## Specify the amount of seconds the copy success text should be visible +```html + +``` + ### Accessibility `` implements many features of a standard button to provide an accessible @@ -56,6 +61,7 @@ mouse clicks as well as enter and space key presses per the recommendation of ## Attributes - `no-icon`: Optional boolean attribute that, when present, removes the icon from the template. +- `copied-duration`: Specify the amount of time in seconds the copy success text should be visible. ## Variable hooks diff --git a/elements/pfe-clipboard/demo/index.html b/elements/pfe-clipboard/demo/index.html index c7fcaa789a..a5cddd6b4a 100644 --- a/elements/pfe-clipboard/demo/index.html +++ b/elements/pfe-clipboard/demo/index.html @@ -73,6 +73,9 @@

Clipboard: w/ custom text

You can totally click to copy url Making some copies!
+ +

Clipboard: w/ custom success text duration.

+ @@ -94,6 +97,9 @@

Clipboard: w/ custom text

You can totally click to copy url Making some copies! + +

Clipboard: w/ custom success text duration.

+
diff --git a/elements/pfe-clipboard/src/pfe-clipboard.js b/elements/pfe-clipboard/src/pfe-clipboard.js index 55b04a544c..a7e79d3036 100644 --- a/elements/pfe-clipboard/src/pfe-clipboard.js +++ b/elements/pfe-clipboard/src/pfe-clipboard.js @@ -38,6 +38,11 @@ class PfeClipboard extends PFElement { type: Boolean, observer: "_noIconChanged" }, + copiedDuration: { + title: "Copied Duration", + type: Number, + default: 3 + }, role: { type: String, default: "button" @@ -168,17 +173,31 @@ class PfeClipboard extends PFElement { url } }); - // Toggle the copied state for 3 seconds + // Toggle the copied state. Use the this._formattedCopiedTimeout function + // to an appropraite setTimout length. this.setAttribute("copied", ""); setTimeout(() => { this.removeAttribute("copied"); - }, 3000); + }, this._formattedCopiedTimeout()); }) .catch(error => { this.warn(error); }); } + // Formatted copied timeout value. Use the formattedCopiedTimeout function + // to get a type safe, millisecond value of the timeout duration. + _formattedCopiedTimeout() { + const copiedDuration = Number(this.copiedDuration * 1000); + if (!Number.isInteger(copiedDuration)) { + this.warn(`copied-duration must be a valid number. Defaulting to 3 seconds.`); + // default to 3 seconds + return 3000; + } else { + return copiedDuration; + } + } + // Listen for keyboard events and map them to their // corresponding mouse events. _keydownHandler(event) { diff --git a/elements/pfe-clipboard/test/pfe-clipboard_test.html b/elements/pfe-clipboard/test/pfe-clipboard_test.html index 35199d62a3..d7f4b6e79c 100644 --- a/elements/pfe-clipboard/test/pfe-clipboard_test.html +++ b/elements/pfe-clipboard/test/pfe-clipboard_test.html @@ -24,6 +24,8 @@ + + diff --git a/elements/pfe-clipboard/test/pfe-clipboard_test.js b/elements/pfe-clipboard/test/pfe-clipboard_test.js index 3d2bddb8e1..215a9ef3e1 100644 --- a/elements/pfe-clipboard/test/pfe-clipboard_test.js +++ b/elements/pfe-clipboard/test/pfe-clipboard_test.js @@ -32,6 +32,7 @@ suite("", () => { let clipboardStylesTest; let clipboardTransposeTest; let clipboardA11yTest; + let clipboardCopiedDurationTest; suiteSetup(() => { clipboard = fixture("pfe-clipboard-fixture"); @@ -39,6 +40,7 @@ suite("", () => { clipboardStylesTest = document.querySelector("#styles-test"); clipboardTransposeTest = document.querySelector("#transpose-test"); clipboardA11yTest = document.querySelector("#a11y-test"); + clipboardCopiedDurationTest = document.querySelector("#copied-duration-test"); }); test('it should upgrade', () => { @@ -157,4 +159,17 @@ suite("", () => { }, 3001); }) }); + + test(`it should have a customizable copied state duration.`, done => { + // Set the copied state duration to 1 second + clipboardCopiedDurationTest.click(); + // Check to see if the success text + setTimeout(() => { + assert.equal(getComputedStyle(clipboardCopiedDurationTest.shadowRoot.querySelector(`.pfe-clipboard__text--success`), null)["display"], "block"); + }, 0); + setTimeout(() => { + assert.equal(getComputedStyle(clipboardCopiedDurationTest.shadowRoot.querySelector(`.pfe-clipboard__text--success`), null)["display"], "none"); + done(); + }, 2000); + }); });