Lightweight JavaScript tool that lets you copy text from HTML elements with a single click.
npm install senangwebs-jotA lightweight JavaScript tool for copying text from HTML elements with a single click.
- Simple Integration: Add data attributes to your HTML, and SWJ handles the rest.
- Flexible Sources: Copy text from inputs, textareas, divs, spans, and more.
- Visual Feedback: Built-in states for "Copy", "Copied!", and "Failed!".
- Modern & Fallback: Uses the Clipboard API with a fallback to execCommand.
- Error Handling: Logs warnings for missing targets or unsupported features.
- Automatic Initialization: Runs automatically on DOMContentLoaded.
Run npm run dev to generate a demo at dist/index.html. Open this file in your browser to see the library in action.
1. Install dependencies:
``bash`
npm install
2. Build the library:
`bash`
npm run build
This generates and swj.css in the dist/ folder.
Include the files directly in your HTML:
`html`
href="https://unpkg.com/senangwebs-jot@latest/dist/swj.min.css"
/>
1. Include Files: Ensure swj.css and swj.js are loaded.
2. Add Attributes:
- data-swj-id=": The element to copy from.data-swj-value
- : Required on the source element.data-swj-copy="
- : The button that triggers the copy.
3. Example:
`html
`
Customize button content for different states (default, copied, error) using two approaches:
Use data-swj-default, data-swj-copied, and data-swj-error attributes on the button for HTML content:
`html`
data-swj-copied=" Copied!"
data-swj-error=" Error!"
>
Copy
Use data-swj-state on child elements for visibility toggling:
`html`
Child elements are automatically shown/hidden based on the button's current state.
If you add elements dynamically, call SWJ.refresh() to attach event listeners to the new buttons.
`javascript
setTimeout(() => {
// Create the content to copy
const contentToCopy = document.createElement("textarea");
contentToCopy.setAttribute("data-swj-id", "code-snippet");
contentToCopy.setAttribute("data-swj-value", "console.log('Hello World');");
contentToCopy.setAttribute("style", "display: none");
contentToCopy.innerHTML = "console.log('Hello World'); Copy dynamic content";
document.body.appendChild(contentToCopy);
// Create the button
const button = document.createElement("button");
button.setAttribute("data-swj-copy", "code-snippet");
button.textContent = "Copy Code";
document.body.appendChild(button);
// Refresh SWJ to attach event listeners to the new button
SWJ.refresh();
}, 1000);
`
The library uses the following classes for button states:
- swj-button: Base class.swj-button-default
- : Default state.swj-button-copied
- : Success state (lasts 2.5s).swj-button-error
- : Error state (lasts 2.5s).
Override these classes in your CSS to customize the appearance.
- Works on all modern browsers.
- Requires a secure context (HTTPS) for the Clipboard API.
- Falls back to execCommand` if the Clipboard API is unavailable.
MIT License