clipxjs 1.1.2 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +157 -40
- package/dist/clipx.min.js +4 -3
- package/package.json +1 -1
- package/src/clipx.js +3 -3
package/README.md
CHANGED
|
@@ -3,15 +3,16 @@
|
|
|
3
3
|
|
|
4
4
|
# ClipX.js -Maximize Clipboard Power with Minimal Size
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
ClipX.js is an ultra-light JavaScript library that simplifies clipboard tasks and enriches user feedback. It offers straightforward `copy, cut, and paste` capabilities, and `built-in toast notifications` that you can easily customize, providing a quick and efficient way to handle clipboard and notification needs. ——— The Smarter Clipboard Solution.
|
|
6
|
+
ClipX.js is an ultra-light JavaScript library that simplifies clipboard tasks and enriches user feedback. It offers straightforward `copy, cut, and paste` capabilities, and `built-in toast notifications` that you can easily customize, providing a quick and efficient way to handle clipboard and notification needs. ——— The Smarter Clipboard Solution.
|
|
8
7
|
|
|
9
8
|
---
|
|
9
|
+
|
|
10
10
|
## Official Website
|
|
11
11
|
|
|
12
12
|
For more information about this project, please visit our official website: [ClipX](https://clipx.dzr.app/)
|
|
13
13
|
|
|
14
14
|
---
|
|
15
|
+
|
|
15
16
|
## Table of Contents 📑
|
|
16
17
|
|
|
17
18
|
1. [Why Choose ClipX.js?](#why-choose-clipxjs)
|
|
@@ -43,19 +44,29 @@ For more information about this project, please visit our official website: [Cli
|
|
|
43
44
|
7. [Demo](#demo--get-start-code)
|
|
44
45
|
|
|
45
46
|
---
|
|
47
|
+
|
|
46
48
|
## Why Choose ClipX.js?
|
|
47
49
|
|
|
48
50
|
### Lightweight & Fast
|
|
51
|
+
|
|
49
52
|
- At only 2KB, ClipX.js is smaller and faster than most clipboard libraries.
|
|
53
|
+
|
|
50
54
|
### Built-in Feedback
|
|
55
|
+
|
|
51
56
|
- Includes customizable toast notifications for clipboard actions—no need for additional UI libraries.
|
|
57
|
+
|
|
52
58
|
### Flexible Customization
|
|
59
|
+
|
|
53
60
|
- Easily style toasts, control message display, and integrate seamlessly with your app's design.
|
|
61
|
+
|
|
54
62
|
### Easy Integration
|
|
63
|
+
|
|
55
64
|
- Simple API with minimal setup, ensuring broad compatibility across modern and older browsers.
|
|
65
|
+
|
|
56
66
|
### Robust Error Handling
|
|
67
|
+
|
|
57
68
|
- Provides clear, customizable error feedback to enhance user experience and simplify debugging.
|
|
58
|
-
|
|
69
|
+
|
|
59
70
|
---
|
|
60
71
|
|
|
61
72
|
## Installation
|
|
@@ -65,7 +76,8 @@ For more information about this project, please visit our official website: [Cli
|
|
|
65
76
|
```bash
|
|
66
77
|
npm i clipxjs
|
|
67
78
|
```
|
|
68
|
-
|
|
79
|
+
|
|
80
|
+
### Via CDN
|
|
69
81
|
|
|
70
82
|
Use only one `CDN`
|
|
71
83
|
|
|
@@ -82,7 +94,9 @@ Use only one `CDN`
|
|
|
82
94
|
```html
|
|
83
95
|
<script src="https://unpkg.com/clipxjs/dist/clipx.min.js"></script>
|
|
84
96
|
```
|
|
97
|
+
|
|
85
98
|
---
|
|
99
|
+
|
|
86
100
|
## Initializing ClipX.js
|
|
87
101
|
|
|
88
102
|
To get started with ClipX.js, follow these steps to set up and configure the library according to your needs:
|
|
@@ -118,10 +132,21 @@ Customize the appearance of toast notifications by providing CSS styles. For exa
|
|
|
118
132
|
|
|
119
133
|
```javascript
|
|
120
134
|
clipx.setCustomStyles({
|
|
121
|
-
|
|
135
|
+
toast:
|
|
136
|
+
"background-color: #333; color: #fff; padding: 12px; border-radius: 5px;",
|
|
122
137
|
});
|
|
123
138
|
```
|
|
124
139
|
|
|
140
|
+
### 4. Hide SVG Icon
|
|
141
|
+
|
|
142
|
+
To hide Svg Icon from toast
|
|
143
|
+
|
|
144
|
+
```css
|
|
145
|
+
.clipx-js-svg-icon {
|
|
146
|
+
display: none;
|
|
147
|
+
}
|
|
148
|
+
```
|
|
149
|
+
|
|
125
150
|
## Attaching ClipX Functionality
|
|
126
151
|
|
|
127
152
|
To bind ClipX.js functionality to elements, use the `attach` method with appropriate selectors. This method will enable clipboard operations on elements with the specified attributes or classes.
|
|
@@ -131,7 +156,7 @@ To bind ClipX.js functionality to elements, use the `attach` method with appropr
|
|
|
131
156
|
Apply ClipX.js to elements with `data-clipx-text` or `data-clipx-target` attributes.
|
|
132
157
|
|
|
133
158
|
```javascript
|
|
134
|
-
clipx.attach(
|
|
159
|
+
clipx.attach("[data-clipx-text], [data-clipx-target]");
|
|
135
160
|
```
|
|
136
161
|
|
|
137
162
|
### Example: Using Class Names
|
|
@@ -139,14 +164,15 @@ clipx.attach('[data-clipx-text], [data-clipx-target]');
|
|
|
139
164
|
Alternatively, apply ClipX.js to elements with specific classes.
|
|
140
165
|
|
|
141
166
|
```javascript
|
|
142
|
-
clipx.attach(
|
|
167
|
+
clipx.attach(".clipx, .copy-btn, .your-class");
|
|
143
168
|
```
|
|
144
169
|
|
|
145
|
-
|
|
146
170
|
---
|
|
171
|
+
|
|
147
172
|
## Attributes Overview
|
|
148
173
|
|
|
149
174
|
### This All Are Attributes
|
|
175
|
+
|
|
150
176
|
- **`data-clipx-target`**: Element selector for text source.
|
|
151
177
|
- **`data-clipx-text`**: Static text to copy or cut.
|
|
152
178
|
- **`data-clipx-cut`**: Toggle cut operation.
|
|
@@ -159,14 +185,14 @@ clipx.attach('.clipx, .copy-btn, .your-class');
|
|
|
159
185
|
|
|
160
186
|
---
|
|
161
187
|
|
|
162
|
-
|
|
163
|
-
## Example
|
|
188
|
+
## Example
|
|
164
189
|
|
|
165
190
|
### `data-clipx-target`
|
|
166
191
|
|
|
167
192
|
**Description:** Specifies the target element whose text will be copied to the clipboard when the button is clicked.
|
|
168
193
|
|
|
169
194
|
**Example:**
|
|
195
|
+
|
|
170
196
|
```html
|
|
171
197
|
<button class="copy-btn" data-clipx-target="#text-to-copy">Copy Text</button>
|
|
172
198
|
<p id="text-to-copy">This is the text to be copied.</p>
|
|
@@ -177,8 +203,11 @@ clipx.attach('.clipx, .copy-btn, .your-class');
|
|
|
177
203
|
**Description:** Defines a static text string that will be copied to the clipboard when the button is clicked.
|
|
178
204
|
|
|
179
205
|
**Example:**
|
|
206
|
+
|
|
180
207
|
```html
|
|
181
|
-
<button class="copy-btn" data-clipx-text="Static text to copy">
|
|
208
|
+
<button class="copy-btn" data-clipx-text="Static text to copy">
|
|
209
|
+
Copy Static Text
|
|
210
|
+
</button>
|
|
182
211
|
```
|
|
183
212
|
|
|
184
213
|
### `data-clipx-cut`
|
|
@@ -186,9 +215,12 @@ clipx.attach('.clipx, .copy-btn, .your-class');
|
|
|
186
215
|
**Description:** Cuts the text from the specified element, copying it to the clipboard and clearing the element's content.
|
|
187
216
|
|
|
188
217
|
**Example:**
|
|
218
|
+
|
|
189
219
|
```html
|
|
190
220
|
<textarea id="text-to-cut">This text will be cut.</textarea>
|
|
191
|
-
<button class="copy-btn" data-clipx-target="#text-to-cut" data-clipx-cut>
|
|
221
|
+
<button class="copy-btn" data-clipx-target="#text-to-cut" data-clipx-cut>
|
|
222
|
+
Cut Text
|
|
223
|
+
</button>
|
|
192
224
|
```
|
|
193
225
|
|
|
194
226
|
### `data-clipx-msg`
|
|
@@ -196,8 +228,15 @@ clipx.attach('.clipx, .copy-btn, .your-class');
|
|
|
196
228
|
**Description:** Copies the specified text to the clipboard and shows a toast notification with a custom message.
|
|
197
229
|
|
|
198
230
|
**Example:**
|
|
231
|
+
|
|
199
232
|
```html
|
|
200
|
-
<button
|
|
233
|
+
<button
|
|
234
|
+
class="copy-btn"
|
|
235
|
+
data-clipx-text="Another static text"
|
|
236
|
+
data-clipx-msg="Text copied successfully!"
|
|
237
|
+
>
|
|
238
|
+
Copy with Custom Message
|
|
239
|
+
</button>
|
|
201
240
|
```
|
|
202
241
|
|
|
203
242
|
### `data-clipx-toast`
|
|
@@ -205,8 +244,11 @@ clipx.attach('.clipx, .copy-btn, .your-class');
|
|
|
205
244
|
**Description:** Displays a toast notification with the copied text. The button text remains unchanged.
|
|
206
245
|
|
|
207
246
|
**Example:**
|
|
247
|
+
|
|
208
248
|
```html
|
|
209
|
-
<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-toast>
|
|
249
|
+
<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-toast>
|
|
250
|
+
Copy with Toast Only
|
|
251
|
+
</button>
|
|
210
252
|
```
|
|
211
253
|
|
|
212
254
|
### `data-clipx-disable-msg`
|
|
@@ -214,17 +256,28 @@ clipx.attach('.clipx, .copy-btn, .your-class');
|
|
|
214
256
|
**Description:** Shows a toast notification without changing the button's text content.
|
|
215
257
|
|
|
216
258
|
**Example:**
|
|
259
|
+
|
|
217
260
|
```html
|
|
218
|
-
<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-disable-msg>
|
|
261
|
+
<button class="copy-btn" data-clipx-text="Text to copy" data-clipx-disable-msg>
|
|
262
|
+
Copy with Toast Only, No Text Change
|
|
263
|
+
</button>
|
|
219
264
|
```
|
|
220
265
|
|
|
221
|
-
###
|
|
266
|
+
### `USE data-clipx-disable-toast & data-clipx-disable-msg`
|
|
222
267
|
|
|
223
268
|
**Description:** Copies the specified text to the clipboard without showing a toast notification And Changing Text Contents.
|
|
224
269
|
|
|
225
270
|
**Example:**
|
|
271
|
+
|
|
226
272
|
```html
|
|
227
|
-
<button
|
|
273
|
+
<button
|
|
274
|
+
class="copy-btn"
|
|
275
|
+
data-clipx-text="Text to copy"
|
|
276
|
+
data-clipx-disable-toast
|
|
277
|
+
data-clipx-disable-msg
|
|
278
|
+
>
|
|
279
|
+
Copy without Toast & with Change Text
|
|
280
|
+
</button>
|
|
228
281
|
```
|
|
229
282
|
|
|
230
283
|
### `data-clipx-disable-toast`
|
|
@@ -232,8 +285,15 @@ clipx.attach('.clipx, .copy-btn, .your-class');
|
|
|
232
285
|
**Description:** Copies the specified text to the clipboard without showing a toast notification.
|
|
233
286
|
|
|
234
287
|
**Example:**
|
|
288
|
+
|
|
235
289
|
```html
|
|
236
|
-
<button
|
|
290
|
+
<button
|
|
291
|
+
class="copy-btn"
|
|
292
|
+
data-clipx-text="Text to copy"
|
|
293
|
+
data-clipx-disable-toast
|
|
294
|
+
>
|
|
295
|
+
Copy without Toast
|
|
296
|
+
</button>
|
|
237
297
|
```
|
|
238
298
|
|
|
239
299
|
### `data-clipx-toast-position`
|
|
@@ -241,9 +301,24 @@ clipx.attach('.clipx, .copy-btn, .your-class');
|
|
|
241
301
|
**Description:** Defines the position of the toast notification (top or bottom).
|
|
242
302
|
|
|
243
303
|
**Example:**
|
|
304
|
+
|
|
244
305
|
```html
|
|
245
|
-
<button
|
|
246
|
-
|
|
306
|
+
<button
|
|
307
|
+
class="copy-btn"
|
|
308
|
+
data-clipx-text="Text to copy"
|
|
309
|
+
data-clipx-toast
|
|
310
|
+
data-clipx-toast-position="top"
|
|
311
|
+
>
|
|
312
|
+
Copy with Toast on Top
|
|
313
|
+
</button>
|
|
314
|
+
<button
|
|
315
|
+
class="copy-btn"
|
|
316
|
+
data-clipx-text="Text to copy"
|
|
317
|
+
data-clipx-toast
|
|
318
|
+
data-clipx-toast-position="bottom"
|
|
319
|
+
>
|
|
320
|
+
Copy with Toast on Bottom
|
|
321
|
+
</button>
|
|
247
322
|
```
|
|
248
323
|
|
|
249
324
|
### `data-clipx-duration`
|
|
@@ -251,43 +326,85 @@ clipx.attach('.clipx, .copy-btn, .your-class');
|
|
|
251
326
|
**Description:** Sets the duration (in milliseconds) for which the toast notification is visible before it fades out.
|
|
252
327
|
|
|
253
328
|
**Example:**
|
|
329
|
+
|
|
254
330
|
```html
|
|
255
|
-
<button
|
|
256
|
-
|
|
257
|
-
|
|
331
|
+
<button
|
|
332
|
+
class="copy-btn"
|
|
333
|
+
data-clipx-text="Text to copy"
|
|
334
|
+
data-clipx-toast
|
|
335
|
+
data-clipx-duration="3000"
|
|
336
|
+
>
|
|
337
|
+
Copy with 3 Seconds Toast
|
|
338
|
+
</button>
|
|
339
|
+
<button
|
|
340
|
+
class="copy-btn"
|
|
341
|
+
data-clipx-text="Text to copy"
|
|
342
|
+
data-clipx-duration="3000"
|
|
343
|
+
>
|
|
344
|
+
Copy with 3 Seconds Toast & Content Change
|
|
345
|
+
</button>
|
|
346
|
+
<button
|
|
347
|
+
class="copy-btn"
|
|
348
|
+
data-clipx-text="Text to copy"
|
|
349
|
+
data-clipx-disable-toast
|
|
350
|
+
data-clipx-duration="3000"
|
|
351
|
+
>
|
|
352
|
+
Copy 3 sec Content Change
|
|
353
|
+
</button>
|
|
258
354
|
```
|
|
355
|
+
|
|
259
356
|
---
|
|
260
357
|
|
|
261
358
|
## Demo || Get Start Code
|
|
262
359
|
|
|
263
360
|
```html
|
|
264
|
-
|
|
265
361
|
<h1>ClipX.js Demo</h1>
|
|
266
362
|
|
|
267
|
-
<button
|
|
268
|
-
|
|
269
|
-
|
|
363
|
+
<button
|
|
364
|
+
class="copy-btn"
|
|
365
|
+
data-clipx-text="Static text to copy"
|
|
366
|
+
data-clipx-msg="Static text copied!"
|
|
367
|
+
>
|
|
368
|
+
Copy Static Text
|
|
369
|
+
</button>
|
|
370
|
+
|
|
371
|
+
<button class="copy-btn" data-clipx-target="#text-to-copy" data-clipx-cut>
|
|
372
|
+
Cut Text
|
|
373
|
+
</button>
|
|
270
374
|
<button class="copy-btn" data-clipx-target="#text-to-copy">Copy Text</button>
|
|
271
375
|
|
|
272
376
|
<p id="text-to-copy">This text will be cut and copied to the clipboard.</p>
|
|
273
377
|
|
|
274
|
-
<button
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
378
|
+
<button
|
|
379
|
+
class="copy-btn"
|
|
380
|
+
data-clipx-text="Another static text"
|
|
381
|
+
data-clipx-toast
|
|
382
|
+
data-clipx-toast-position="bottom"
|
|
383
|
+
>
|
|
384
|
+
Copy with Toast Only
|
|
385
|
+
</button>
|
|
386
|
+
|
|
387
|
+
<button
|
|
388
|
+
class="copy-btn"
|
|
389
|
+
data-clipx-text="Text with 5 seconds toast"
|
|
390
|
+
data-clipx-toast
|
|
391
|
+
data-clipx-duration="5000"
|
|
392
|
+
>
|
|
393
|
+
Copy with 5 Seconds Toast
|
|
394
|
+
</button>
|
|
278
395
|
|
|
279
396
|
<script src="https://cdn.jsdelivr.net/npm/clipxjs/dist/clipx.min.js"></script>
|
|
280
397
|
<script>
|
|
281
|
-
|
|
282
|
-
|
|
398
|
+
// Initialize ClipX.js instance
|
|
399
|
+
var clipx = new clipx();
|
|
283
400
|
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
401
|
+
// Optional: Set custom styles for toast notifications
|
|
402
|
+
clipx.setCustomStyles({
|
|
403
|
+
toast:
|
|
404
|
+
"background-color: #333; color: #fff; padding: 12px; border-radius: 5px;",
|
|
405
|
+
});
|
|
288
406
|
|
|
289
|
-
|
|
290
|
-
|
|
407
|
+
// Attach ClipX.js functionality to elements
|
|
408
|
+
clipx.attach("[data-clipx-text], [data-clipx-target]");
|
|
291
409
|
</script>
|
|
292
|
-
|
|
293
410
|
```
|
package/dist/clipx.min.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
/*
|
|
2
2
|
ClipX JS
|
|
3
3
|
https://clipx.dzr.app
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
GitHub: https://github.com/mraxays/clipxjs
|
|
5
|
+
Version: 1.2.1
|
|
6
|
+
Copyright (c) 2025 Mr Akshay Shinde
|
|
6
7
|
Licensed under the MIT license
|
|
7
8
|
*/
|
|
8
|
-
(function(t){function e(){this.attach=this.attach.bind(this),this.isProcessing=!1,this.disable={msg:!1,toast:!1},this.customStyles={}}e.prototype.copyText=function(t){if(navigator.clipboard)return navigator.clipboard.writeText(t);if(navigator.permissions)return navigator.permissions.query({name:"clipboard-write"}).then(function(e){if("granted"===e.state||"prompt"===e.state)return navigator.clipboard.writeText(t);throw new Error("Clipboard write permission denied.")});var e=document.createElement("textarea");return e.value=t,document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e),Promise.resolve()},e.prototype.cutText=function(t,e){return this.copyText(t).then(function(){e&&(e.value="",e.textContent="")})},e.prototype.copyFromElement=function(t){var e=t.value||t.textContent;return this.copyText(e)},e.prototype.cutFromElement=function(t){var e=t.value||t.textContent;return this.cutText(e,t)},e.prototype.attach=function(t){var e=document.querySelectorAll(t);e.forEach(function(t){t.addEventListener("click",function(){if(!this.isProcessing){this.isProcessing=!0;var e,n=t.getAttribute("data-clipx-target"),o=t.getAttribute("data-clipx-text"),i=t.hasAttribute("data-clipx-cut"),
|
|
9
|
+
(function(t){function e(){this.attach=this.attach.bind(this),this.isProcessing=!1,this.disable={msg:!1,toast:!1},this.customStyles={}}e.prototype.copyText=function(t){if(navigator.clipboard)return navigator.clipboard.writeText(t);if(navigator.permissions)return navigator.permissions.query({name:"clipboard-write"}).then(function(e){if("granted"===e.state||"prompt"===e.state)return navigator.clipboard.writeText(t);throw new Error("Clipboard write permission denied.")});var e=document.createElement("textarea");return e.value=t,document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e),Promise.resolve()},e.prototype.cutText=function(t,e){return this.copyText(t).then(function(){e&&(e.value="",e.textContent="")})},e.prototype.copyFromElement=function(t){var e=t.value||t.textContent;return this.copyText(e)},e.prototype.cutFromElement=function(t){var e=t.value||t.textContent;return this.cutText(e,t)},e.prototype.attach=function(t){var e=document.querySelectorAll(t);e.forEach(function(t){t.addEventListener("click",function(){if(!this.isProcessing){this.isProcessing=!0;var e,n=t.getAttribute("data-clipx-target"),o=t.getAttribute("data-clipx-text"),i=t.hasAttribute("data-clipx-cut"),s=t.getAttribute("data-clipx-msg"),a=t.hasAttribute("data-clipx-toast"),r=t.hasAttribute("data-clipx-disable-msg"),c=t.hasAttribute("data-clipx-disable-toast"),l=t.getAttribute("data-clipx-toast-position")||"bottom",p=parseInt(t.getAttribute("data-clipx-duration"),10)||1500;if(n){var d=document.querySelector(n);d&&(e=i?this.cutFromElement(d):this.copyFromElement(d))}else o&&(e=i?this.cutText(o):this.copyText(o));e&&e.then(()=>this.onSuccess(t,s,a,r,c,l,p)).catch(e=>this.onError(t,e)).finally(()=>{this.isProcessing=!1})}}.bind(this))}.bind(this))},e.prototype.onSuccess=function(t,e,n,o,i,s,a){var r=t.textContent,c=e||"Copied !",l="top"===s?"clipx-toast top":"clipx-toast bottom";if(n||o||this.disable.msg||(t.textContent=c),i||this.disable.toast)setTimeout(function(){this.disable.msg||(t.textContent=r)}.bind(this),a);else{var p=document.createElement("div");p.className=l;var d='<svg class="clipx-js-svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="rgba(0,210,65,1)" fill="currentColor"><path d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM17.4571 9.45711L16.0429 8.04289L11 13.0858L8.20711 10.2929L6.79289 11.7071L11 15.9142L17.4571 9.45711Z"></path></svg>';p.innerHTML=d+c,p.setAttribute("role","alert"),p.setAttribute("aria-live","assertive"),p.style.cssText=this.customStyles.toast||"",document.body.appendChild(p),p.style.opacity=0,setTimeout(()=>p.style.opacity=1,0),setTimeout(function(){p.style.opacity=0,setTimeout(()=>document.body.removeChild(p),500),n||o||this.disable.msg||(t.textContent=r)}.bind(this),a)}},e.prototype.onError=function(t,e){console.error("Failed to cut/copy text: ",e);var n=document.createElement("div");n.className="clipx-toast error";var o='<svg xmlns="http://www.w3.org/2000/svg" class="clipx-js-svg-icon" viewBox="0 0 24 24" width="16" height="16" fill="rgba(231,0,0,1)" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z"></path></svg>';n.innerHTML=o+"Failed to copy!",n.setAttribute("role","alert"),n.setAttribute("aria-live","assertive"),n.style.cssText=this.customStyles.toast||"",document.body.appendChild(n),setTimeout(()=>{n.style.opacity=0,setTimeout(()=>document.body.removeChild(n),500)},1500)},e.prototype.setCustomStyles=function(t){this.customStyles=t},t.clipx=e;var n=document.createElement("style");n.textContent="\n .clipx-toast {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n position: fixed;\n left: 50%;\n transform: translateX(-50%);\n background-color: #fff;\n color: #363636;\n padding: 8px 10px;\n border-radius: 8px;\n z-index: 9999;\n box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05);\n font-size: 14px;\n text-align: center;\n opacity: 0;\n animation: fadeIn 0.5s ease forwards;\n transition: opacity 0.5s ease;\n max-width: 90%; /* Ensure it fits well on smaller screens */\n width: auto; /* Ensure the width adjusts based on content */\n display: flex;\n align-items: center;\n gap: 5px;\n}\n\n.clipx-toast.top {\n top: 20px;\n bottom: auto;\n}\n\n.clipx-toast.bottom {\n bottom: 20px;\n}\n\n.clipx-toast.error {\n background-color: #f8d7da;\n color: #721c24;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px) translateX(-50%);\n }\n to {\n opacity: 1;\n transform: translateY(0) translateX(-50%);\n }\n}\n\n@keyframes fadeOut {\n from {\n opacity: 1;\n transform: translateY(0) translateX(-50%);\n }\n to {\n opacity: 0;\n transform: translateY(10px) translateX(-50%);\n }\n}",document.head.appendChild(n)})(this);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "clipxjs",
|
|
3
|
-
"version": "1.1
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"description": "ClipX.js is an ultra-light JavaScript library that simplifies clipboard tasks and enriches user feedback. It offers straightforward copy, cut, and paste capabilities, and built-in toast notifications that you can easily customize, providing a quick and efficient way to handle clipboard and notification needs. ——— The Smarter Clipboard Solution.",
|
|
5
5
|
"main": "src/clipx.js",
|
|
6
6
|
"scripts": {
|
package/src/clipx.js
CHANGED
|
@@ -148,7 +148,7 @@
|
|
|
148
148
|
var toast = document.createElement("div");
|
|
149
149
|
toast.className = toastClass;
|
|
150
150
|
// Insert the success SVG icon along with the custom message
|
|
151
|
-
var successSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="rgba(0,210,65,1)" fill="currentColor"><path d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM17.4571 9.45711L16.0429 8.04289L11 13.0858L8.20711 10.2929L6.79289 11.7071L11 15.9142L17.4571 9.45711Z"></path></svg>`;
|
|
151
|
+
var successSVG = `<svg class="clipx-js-svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="rgba(0,210,65,1)" fill="currentColor"><path d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM17.4571 9.45711L16.0429 8.04289L11 13.0858L8.20711 10.2929L6.79289 11.7071L11 15.9142L17.4571 9.45711Z"></path></svg>`;
|
|
152
152
|
toast.innerHTML = successSVG + customMessage;
|
|
153
153
|
toast.setAttribute("role", "alert");
|
|
154
154
|
toast.setAttribute("aria-live", "assertive");
|
|
@@ -189,7 +189,7 @@
|
|
|
189
189
|
var toast = document.createElement("div");
|
|
190
190
|
toast.className = "clipx-toast error";
|
|
191
191
|
// Insert the error SVG icon along with the error message
|
|
192
|
-
var errorSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="rgba(231,0,0,1)" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z"></path></svg>`;
|
|
192
|
+
var errorSVG = `<svg xmlns="http://www.w3.org/2000/svg" class="clipx-js-svg-icon" viewBox="0 0 24 24" width="16" height="16" fill="rgba(231,0,0,1)" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z"></path></svg>`;
|
|
193
193
|
toast.innerHTML = errorSVG + "Failed to copy!";
|
|
194
194
|
toast.setAttribute("role", "alert");
|
|
195
195
|
toast.setAttribute("aria-live", "assertive");
|
|
@@ -272,4 +272,4 @@
|
|
|
272
272
|
}
|
|
273
273
|
}`;
|
|
274
274
|
document.head.appendChild(style);
|
|
275
|
-
})(this);
|
|
275
|
+
})(this);
|