@wokki20/jspt 2.0.3

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.
Files changed (12) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +586 -0
  3. package/dist/jspt.css +264 -0
  4. package/dist/jspt.d.ts +49 -0
  5. package/dist/jspt.js +626 -0
  6. package/dist/jspt.min.js +1 -0
  7. package/dist/jspt.module.js +611 -0
  8. package/package.json +38 -0
  9. package/src/jspt.css +264 -0
  10. package/src/jspt.d.ts +49 -0
  11. package/src/jspt.js +626 -0
  12. package/src/jspt.module.js +611 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 wokki20
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,586 @@
1
+ # JSPT - JavaScript Popup & Toast Library
2
+
3
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
4
+ [![GitHub issues](https://img.shields.io/github/issues/levkris/jspt.svg)](https://github.com/levkris/jspt/issues)
5
+ [![GitHub stars](https://img.shields.io/github/stars/levkris/jspt.svg)](https://github.com/levkris/jspt/stargazers)
6
+
7
+ A modern, lightweight JavaScript library for creating beautiful toast notifications and popups with comprehensive error handling and VS Code intellisense support.
8
+
9
+ ## 🚀 Quick Start
10
+
11
+ Get started in seconds with our CDN:
12
+
13
+ ```html
14
+ <!DOCTYPE html>
15
+ <html>
16
+ <head>
17
+ <!-- JSPT CSS -->
18
+ <link rel="stylesheet" href="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.css">
19
+ <!-- JSPT JavaScript -->
20
+ <script src="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.min.js"></script>
21
+ </head>
22
+ <body>
23
+ <script>
24
+ // Show a toast notification
25
+ jspt.makeToast({
26
+ message: "Hello World!",
27
+ duration: 3000
28
+ });
29
+
30
+ // Show a popup
31
+ jspt.makePopup({
32
+ content_type: "text",
33
+ header: "Welcome",
34
+ message: "JSPT is ready to use!"
35
+ });
36
+ </script>
37
+ </body>
38
+ </html>
39
+ ```
40
+
41
+ That's it! No installation, no build tools, just add two lines and start coding. ✨
42
+
43
+ ## 📁 Project Structure
44
+
45
+ ```
46
+ jspt/
47
+ ├── src/ # Source files (for development)
48
+ ├── dist/ # Distribution files (ready to use)
49
+ ├── examples/ # Usage examples
50
+ ├── .github/ # GitHub templates and workflows
51
+ ├── README.md # This file
52
+ ├── LICENSE # MIT License
53
+ ├── CHANGELOG.md # Version history
54
+ ├── CONTRIBUTING.md # Contribution guide
55
+ └── package.json # NPM configuration
56
+ ```
57
+
58
+ See [FOLDER_STRUCTURE.md](FOLDER_STRUCTURE.md) for detailed information.
59
+
60
+ ## Features
61
+
62
+ - 🎨 Beautiful toast notifications and popups
63
+ - 🔧 Full TypeScript/JSDoc support for VS Code intellisense
64
+ - 📦 Multiple import options (script tag, ES module, minified)
65
+ - 🎯 Smart error handling with code highlighting
66
+ - ⚡ Zero dependencies (except highlight.js for error displays)
67
+ - 🎭 Customizable icons and styles
68
+ - 📱 Responsive and mobile-friendly
69
+
70
+ ## Installation
71
+
72
+ ### Option 1: CDN (Recommended for Quick Start)
73
+
74
+ #### Production (Pinned Version - Stable)
75
+ ```html
76
+ <!-- CSS -->
77
+ <link rel="stylesheet" href="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.css">
78
+
79
+ <!-- JavaScript (minified) -->
80
+ <script src="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.min.js"></script>
81
+
82
+ <!-- Usage -->
83
+ <script>
84
+ jspt.makeToast({
85
+ message: "Hello from CDN!"
86
+ });
87
+ </script>
88
+ ```
89
+
90
+ #### Development (Always Latest)
91
+ ```html
92
+ <!-- Auto-updates to latest version -->
93
+ <link rel="stylesheet" href="https://cdn.wokki20.nl/dynamic/jspt/jspt.css">
94
+ <script src="https://cdn.wokki20.nl/dynamic/jspt/jspt.js"></script>
95
+ ```
96
+
97
+ #### ES Module from CDN
98
+ ```html
99
+ <link rel="stylesheet" href="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.css">
100
+
101
+ <script type="module">
102
+ import { makeToast, makePopup } from 'https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.module.js';
103
+
104
+ makeToast({ message: "ES Module from CDN!" });
105
+ </script>
106
+ ```
107
+
108
+ ### Option 2: Download and Self-Host
109
+
110
+ #### Script Tag (Traditional)
111
+ ```html
112
+ <link rel="stylesheet" href="dist/jspt.css">
113
+ <script src="dist/jspt.js"></script>
114
+
115
+ <script>
116
+ jspt.makeToast({
117
+ message: "Hello World!"
118
+ });
119
+ </script>
120
+ ```
121
+
122
+ #### Minified Version (Production)
123
+ ```html
124
+ <link rel="stylesheet" href="dist/jspt.css">
125
+ <script src="dist/jspt.min.js"></script>
126
+ ```
127
+
128
+ #### ES Module Import
129
+ ```javascript
130
+ import { makeToast, makePopup } from './dist/jspt.module.js';
131
+
132
+ makeToast({
133
+ message: "Hello from ES modules!"
134
+ });
135
+ ```
136
+
137
+ ## CDN Usage
138
+
139
+ JSPT is hosted on `https://cdn.wokki20.nl` with two delivery methods:
140
+
141
+ ### Versioned URLs (Recommended for Production)
142
+
143
+ Use specific versions for stability and caching:
144
+
145
+ ```html
146
+ <!-- v2.0.3 - Minified (10KB) -->
147
+ <script src="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.min.js"></script>
148
+
149
+ <!-- v2.0.3 - Full with JSDoc (24KB) -->
150
+ <script src="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.js"></script>
151
+
152
+ <!-- v2.0.3 - ES Module (21KB) -->
153
+ <script type="module" src="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.module.js"></script>
154
+
155
+ <!-- CSS -->
156
+ <link rel="stylesheet" href="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.css">
157
+
158
+ <!-- TypeScript Definitions -->
159
+ /// <reference path="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.d.ts" />
160
+ ```
161
+
162
+ ✅ **Benefits:**
163
+ - Cached for 30 days (fast loading)
164
+ - Version-locked (no breaking changes)
165
+ - Best for production websites
166
+
167
+ ### Dynamic URLs (Latest Version)
168
+
169
+ Always get the newest version automatically:
170
+
171
+ ```html
172
+ <!-- Default -->
173
+ <script src="https://cdn.wokki20.nl/dynamic/jspt/jspt.js"></script>
174
+
175
+ <!-- Minified -->
176
+ <script src="https://cdn.wokki20.nl/dynamic/jspt/jspt.js?type=min"></script>
177
+
178
+ <!-- ES Module -->
179
+ <script type="module" src="https://cdn.wokki20.nl/dynamic/jspt/jspt.js?type=module"></script>
180
+
181
+ <!-- CSS -->
182
+ <link rel="stylesheet" href="https://cdn.wokki20.nl/dynamic/jspt/jspt.css">
183
+
184
+ <!-- TypeScript Definitions -->
185
+ /// <reference path="https://cdn.wokki20.nl/dynamic/jspt/jspt.d.ts" />
186
+ ```
187
+
188
+ ✅ **Benefits:**
189
+ - Always up-to-date
190
+ - Great for development/testing
191
+ - Auto-updates when new versions release
192
+
193
+ ⚠️ **Note:** Not cached, may receive breaking changes
194
+
195
+ ### Which Should I Use?
196
+
197
+ | Use Case | Recommended URL |
198
+ |----------|----------------|
199
+ | Production website | `content/jspt-v2.0.3/jspt.min.js` (versioned) |
200
+ | Testing/Development | `dynamic/jspt/jspt.js` (dynamic) |
201
+ | Maximum performance | `content/jspt-v2.0.3/jspt.min.js` (minified + cached) |
202
+ | ES6 Projects | `content/jspt-v2.0.3/jspt.module.js` (versioned module) |
203
+ | TypeScript Projects | `content/jspt-v2.0.3/jspt.d.ts` (type definitions) |
204
+
205
+ ## Usage
206
+
207
+ ### Toast Notifications
208
+
209
+ #### Basic Toast
210
+
211
+ ```javascript
212
+ jspt.makeToast({
213
+ message: "This is a basic toast!"
214
+ });
215
+ ```
216
+
217
+ #### Toast with Icon
218
+
219
+ ```javascript
220
+ jspt.makeToast({
221
+ message: "Success!",
222
+ style: "default",
223
+ icon_left: "check_circle",
224
+ icon_left_type: "google_material_rounded",
225
+ duration: 3000
226
+ });
227
+ ```
228
+
229
+ #### Toast with Action
230
+
231
+ ```javascript
232
+ jspt.makeToast({
233
+ message: "Click to view details",
234
+ icon_right: "info",
235
+ icon_right_type: "google_material_rounded",
236
+ icon_right_action: () => {
237
+ console.log("Info clicked!");
238
+ },
239
+ duration: 5000
240
+ });
241
+ ```
242
+
243
+ #### Error Toast
244
+
245
+ ```javascript
246
+ jspt.makeToast({
247
+ style: "default-error",
248
+ message: "An error occurred!",
249
+ icon_left: "error",
250
+ duration: -1,
251
+ close_on_click: true
252
+ });
253
+ ```
254
+
255
+ ### Popups
256
+
257
+ #### Text Popup
258
+
259
+ ```javascript
260
+ jspt.makePopup({
261
+ content_type: "text",
262
+ header: "Welcome",
263
+ title: "Hello User",
264
+ message: "This is a simple text popup.",
265
+ close_on_blur: true
266
+ });
267
+ ```
268
+
269
+ #### HTML Popup
270
+
271
+ ```javascript
272
+ jspt.makePopup({
273
+ content_type: "html",
274
+ header: "Custom Content",
275
+ content: "<h2>Custom HTML</h2><p>You can put any HTML here!</p>",
276
+ close_on_blur: true
277
+ });
278
+ ```
279
+
280
+ ## API Reference
281
+
282
+ ### `jspt.makeToast(options)`
283
+
284
+ Creates a toast notification.
285
+
286
+ **Options:**
287
+
288
+ | Property | Type | Default | Description |
289
+ |----------|------|---------|-------------|
290
+ | `message` | string | *required* | The message to display |
291
+ | `style` | string | `'default'` | Toast style (`'default'`, `'default-error'`) |
292
+ | `custom_id` | string | `undefined` | Custom ID for the toast (replaces existing toast with same ID) |
293
+ | `icon_left` | string | `undefined` | Left icon content |
294
+ | `icon_left_type` | string | `'google_material_rounded'` | Type of left icon |
295
+ | `icon_left_action` | function | `undefined` | Callback when left icon is clicked |
296
+ | `icon_right` | string | `undefined` | Right icon content |
297
+ | `icon_right_type` | string | `'google_material_rounded'` | Type of right icon |
298
+ | `icon_right_action` | function | `undefined` | Callback when right icon is clicked |
299
+ | `duration` | number | `5000` | Duration in ms (-1 for persistent) |
300
+ | `close_on_click` | boolean | `false` | Close toast when clicked |
301
+ | `onclick` | function | `undefined` | Callback when toast is clicked |
302
+
303
+ **Icon Types:**
304
+ - `'google_material_rounded'` - Google Material Symbols (Rounded)
305
+ - `'google_material_outlined'` - Google Material Symbols (Outlined)
306
+ - `'svg'` - Raw SVG markup
307
+ - `'image'` - Image URL
308
+ - `'text'` - Plain text
309
+ - `'emoji'` - Emoji characters
310
+
311
+ ### `jspt.makePopup(options)`
312
+
313
+ Creates a popup modal.
314
+
315
+ **Options:**
316
+
317
+ | Property | Type | Default | Description |
318
+ |----------|------|---------|-------------|
319
+ | `content_type` | string | `'text'` | Content type (`'text'` or `'html'`) |
320
+ | `style` | string | `'default'` | Popup style |
321
+ | `header` | string | `undefined` | Popup header text |
322
+ | `title` | string | `undefined` | Popup title (text mode only) |
323
+ | `message` | string | `undefined` | Popup message (text mode only) |
324
+ | `content` | string | `undefined` | HTML content (html mode only) |
325
+ | `close_on_blur` | boolean | `true` | Close when clicking outside |
326
+ | `custom_id` | string | `random string` | Custom ID for the popup |
327
+
328
+ ### `jspt.closePopup(options)`
329
+
330
+ Closes a popup modal.
331
+
332
+ **Options:**
333
+
334
+ | Property | Type | Default | Description |
335
+ |----------|------|---------|-------------|
336
+ | `custom_id` | string | `undefined` | Custom ID of the popup to close |
337
+
338
+ ## VS Code Intellisense
339
+
340
+ This library includes comprehensive JSDoc comments and TypeScript definitions for full intellisense support in VS Code.
341
+
342
+ ### For Script Tag Usage:
343
+
344
+ Add this to your `jsconfig.json` or `tsconfig.json`:
345
+
346
+ ```json
347
+ {
348
+ "compilerOptions": {
349
+ "checkJs": true,
350
+ "lib": ["ES2020", "DOM"]
351
+ },
352
+ "include": ["**/*.js"]
353
+ }
354
+ ```
355
+
356
+ ### For ES Module Usage:
357
+
358
+ The TypeScript definitions are automatically picked up when you import the module.
359
+
360
+ ## Examples
361
+
362
+ ### Complete Example (CDN)
363
+
364
+ ```html
365
+ <!DOCTYPE html>
366
+ <html>
367
+ <head>
368
+ <meta charset="UTF-8">
369
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
370
+ <title>JSPT CDN Example</title>
371
+
372
+ <!-- Optional: Material Icons for icon support -->
373
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded">
374
+
375
+ <!-- JSPT from CDN -->
376
+ <link rel="stylesheet" href="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.css">
377
+ <script src="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.min.js"></script>
378
+ </head>
379
+ <body>
380
+ <h1>JSPT Example</h1>
381
+ <button onclick="showToast()">Show Toast</button>
382
+ <button onclick="showPopup()">Show Popup</button>
383
+
384
+ <script>
385
+ function showToast() {
386
+ jspt.makeToast({
387
+ message: "Hello from CDN!",
388
+ icon_left: "check_circle",
389
+ icon_left_type: "google_material_rounded",
390
+ duration: 3000
391
+ });
392
+ }
393
+
394
+ function showPopup() {
395
+ jspt.makePopup({
396
+ content_type: "text",
397
+ header: "Information",
398
+ title: "Welcome!",
399
+ message: "This popup is loaded from cdn.wokki20.nl",
400
+ close_on_blur: true
401
+ });
402
+ }
403
+ </script>
404
+ </body>
405
+ </html>
406
+ ```
407
+
408
+ ### Complete Example (Self-Hosted)
409
+
410
+ See `examples/example-script.html` for a full working example.
411
+
412
+ ```html
413
+ <!DOCTYPE html>
414
+ <html>
415
+ <head>
416
+ <link rel="stylesheet" href="dist/jspt.css">
417
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded">
418
+ </head>
419
+ <body>
420
+ <button onclick="showToast()">Show Toast</button>
421
+ <button onclick="showPopup()">Show Popup</button>
422
+
423
+ <script src="dist/jspt.js"></script>
424
+ <script>
425
+ function showToast() {
426
+ jspt.makeToast({
427
+ message: "Hello World!",
428
+ icon_left: "notifications",
429
+ icon_left_type: "google_material_rounded",
430
+ duration: 3000
431
+ });
432
+ }
433
+
434
+ function showPopup() {
435
+ jspt.makePopup({
436
+ content_type: "text",
437
+ header: "Information",
438
+ title: "Welcome!",
439
+ message: "This is a popup example.",
440
+ close_on_blur: true
441
+ });
442
+ }
443
+ </script>
444
+ </body>
445
+ </html>
446
+ ```
447
+
448
+ ### ES Module Example
449
+
450
+ #### From CDN
451
+ ```html
452
+ <!DOCTYPE html>
453
+ <html>
454
+ <head>
455
+ <link rel="stylesheet" href="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.css">
456
+ </head>
457
+ <body>
458
+ <button id="myButton">Show Toast</button>
459
+ <button id="errorButton">Show Error</button>
460
+
461
+ <script type="module">
462
+ import { makeToast } from 'https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.module.js';
463
+
464
+ document.getElementById('myButton').addEventListener('click', () => {
465
+ makeToast({
466
+ message: "Button clicked!",
467
+ icon_left: "check",
468
+ duration: 2000
469
+ });
470
+ });
471
+
472
+ document.getElementById('errorButton').addEventListener('click', () => {
473
+ makeToast({
474
+ style: "default-error",
475
+ message: "Something went wrong",
476
+ icon_left: "error",
477
+ duration: -1,
478
+ close_on_click: true
479
+ });
480
+ });
481
+ </script>
482
+ </body>
483
+ </html>
484
+ ```
485
+
486
+ #### Self-Hosted
487
+
488
+ See `examples/example-module.html` for a full working example.
489
+
490
+ ```javascript
491
+ import { makeToast, makePopup } from './dist/jspt.module.js';
492
+
493
+ document.getElementById('myButton').addEventListener('click', () => {
494
+ makeToast({
495
+ message: "Button clicked!",
496
+ icon_left: "check",
497
+ duration: 2000
498
+ });
499
+ });
500
+
501
+ document.getElementById('errorButton').addEventListener('click', () => {
502
+ makeToast({
503
+ style: "default-error",
504
+ message: "Something went wrong",
505
+ icon_left: "error",
506
+ duration: -1,
507
+ close_on_click: true
508
+ });
509
+ });
510
+ ```
511
+
512
+ ## Styling
513
+
514
+ The library uses CSS custom properties for easy customization. You can override these in your own CSS:
515
+
516
+ ```css
517
+ .toast-container .toast {
518
+ --translate: 0px;
519
+ --scale: 1;
520
+ --cursor: default;
521
+ }
522
+ ```
523
+
524
+ ## Performance Tips
525
+
526
+ ### Using CDN
527
+ - ✅ **Use versioned URLs in production** - Cached for 30 days
528
+ - ✅ **Use minified version** - 58% smaller (10KB vs 24KB)
529
+ - ✅ **Pin to specific version** - Avoid unexpected breaking changes
530
+ - ✅ **Preload for faster loading:**
531
+ ```html
532
+ <link rel="preload" href="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.min.js" as="script">
533
+ <link rel="preload" href="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.css" as="style">
534
+ ```
535
+
536
+ ### File Sizes
537
+ | File | Size | Use Case |
538
+ |------|------|----------|
539
+ | jspt.min.js | 10KB | Production (recommended) |
540
+ | jspt.js | 24KB | Development with comments |
541
+ | jspt.module.js | 21KB | ES6 projects |
542
+ | jspt.css | 5.5KB | Required styles |
543
+
544
+ ## Browser Support
545
+
546
+ - Chrome/Edge (latest)
547
+ - Firefox (latest)
548
+ - Safari (latest)
549
+ - Opera (latest)
550
+
551
+ ## Dependencies
552
+
553
+ - [Highlight.js](https://highlightjs.org/) - Used for syntax highlighting in error popups (loaded automatically)
554
+
555
+ ## Contributing
556
+
557
+ Contributions are welcome! Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests.
558
+
559
+ ## Changelog
560
+
561
+ See [CHANGELOG.md](CHANGELOG.md) for a detailed version history.
562
+
563
+ ## License
564
+
565
+ MIT - See [LICENSE](LICENSE) file for details.
566
+
567
+ ## Acknowledgments
568
+
569
+ - Thanks to all contributors
570
+ - Inspired by modern toast notification libraries
571
+ - Built with ❤️ for the JavaScript community
572
+
573
+ ## Support
574
+
575
+ - 🌐 **CDN:** https://cdn.wokki20.nl
576
+ - 📫 **Issues:** [github.com/levkris/jspt/issues](https://github.com/levkris/jspt/issues)
577
+ - ⭐ **Star this repo** if you find it useful!
578
+ - 🔗 **Share it** with others
579
+
580
+ ### Quick Links
581
+ - [Installation Guide](#installation)
582
+ - [CDN Usage](#cdn-usage)
583
+ - [API Reference](#api-reference)
584
+ - [Examples](#examples)
585
+ - [Contributing Guide](CONTRIBUTING.md)
586
+ - [Changelog](CHANGELOG.md)