@customviews-js/customviews 1.0.0
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 +78 -0
- package/dist/custom-views.cjs.js +1564 -0
- package/dist/custom-views.cjs.js.map +1 -0
- package/dist/custom-views.esm.js +1556 -0
- package/dist/custom-views.esm.js.map +1 -0
- package/dist/custom-views.umd.js +1570 -0
- package/dist/custom-views.umd.js.map +1 -0
- package/dist/custom-views.umd.min.js +7 -0
- package/dist/custom-views.umd.min.js.map +1 -0
- package/dist/types/core/core.d.ts +52 -0
- package/dist/types/core/core.d.ts.map +1 -0
- package/dist/types/core/persistence.d.ts +22 -0
- package/dist/types/core/persistence.d.ts.map +1 -0
- package/dist/types/core/render.d.ts +3 -0
- package/dist/types/core/render.d.ts.map +1 -0
- package/dist/types/core/url-state-manager.d.ts +32 -0
- package/dist/types/core/url-state-manager.d.ts.map +1 -0
- package/dist/types/core/visibility-manager.d.ts +28 -0
- package/dist/types/core/visibility-manager.d.ts.map +1 -0
- package/dist/types/core/widget.d.ts +93 -0
- package/dist/types/core/widget.d.ts.map +1 -0
- package/dist/types/index.d.ts +20 -0
- package/dist/types/index.d.ts.map +1 -0
- package/dist/types/models/AssetsManager.d.ts +10 -0
- package/dist/types/models/AssetsManager.d.ts.map +1 -0
- package/dist/types/models/Config.d.ts +10 -0
- package/dist/types/models/Config.d.ts.map +1 -0
- package/dist/types/styles/styles.d.ts +5 -0
- package/dist/types/styles/styles.d.ts.map +1 -0
- package/dist/types/styles/widget-styles.d.ts +13 -0
- package/dist/types/styles/widget-styles.d.ts.map +1 -0
- package/dist/types/types/types.d.ts +27 -0
- package/dist/types/types/types.d.ts.map +1 -0
- package/package.json +57 -0
package/README.md
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
# Custom Views
|
|
2
|
+
|
|
3
|
+
v0.2.0
|
|
4
|
+
|
|
5
|
+
A JavaScript library for creating contextual, adaptive web content. Perfect for educational websites, documentation, and multi-audience platforms.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install customviews
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Quick Start
|
|
14
|
+
|
|
15
|
+
### HTML Setup
|
|
16
|
+
|
|
17
|
+
```html
|
|
18
|
+
<!-- Mark content with data-customviews-toggle attribute -->
|
|
19
|
+
<div data-customviews-toggle="beginner">
|
|
20
|
+
<p>Beginner content here</p>
|
|
21
|
+
</div>
|
|
22
|
+
|
|
23
|
+
<div data-customviews-toggle="advanced">
|
|
24
|
+
<p>Advanced content here</p>
|
|
25
|
+
</div>
|
|
26
|
+
|
|
27
|
+
<!-- Dynamic content with ID -->
|
|
28
|
+
<div data-customviews-toggle="beginner" data-customviews-id="intro-guide"></div>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### JavaScript Initialization
|
|
32
|
+
|
|
33
|
+
```javascript
|
|
34
|
+
// Initialize CustomViews
|
|
35
|
+
const core = await window.CustomViews.initFromJson({
|
|
36
|
+
config: {
|
|
37
|
+
allToggles: ['beginner', 'advanced'],
|
|
38
|
+
defaultState: { toggles: ['beginner'] }
|
|
39
|
+
},
|
|
40
|
+
assetsJsonPath: '/assets.json'
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
// Add widget
|
|
44
|
+
const widget = new window.CustomViewsWidget({
|
|
45
|
+
core,
|
|
46
|
+
position: 'middle-left',
|
|
47
|
+
showWelcome: true
|
|
48
|
+
});
|
|
49
|
+
widget.render();
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## Widget Features
|
|
53
|
+
|
|
54
|
+
- **Floating Widget**: Rounded rectangle design with gear icon
|
|
55
|
+
- **Six Positions**: top-left, top-right, bottom-left, bottom-right, middle-left, middle-right
|
|
56
|
+
- **Welcome Modal**: Optional first-visit modal (localStorage cached)
|
|
57
|
+
- **Theme Support**: Light and dark themes
|
|
58
|
+
- **URL Sharing**: Generate shareable URLs with custom states
|
|
59
|
+
|
|
60
|
+
## Widget Options
|
|
61
|
+
|
|
62
|
+
```typescript
|
|
63
|
+
{
|
|
64
|
+
core: CustomViewsCore; // Required: core instance
|
|
65
|
+
position?: string; // Default: 'middle-left'
|
|
66
|
+
theme?: 'light' | 'dark'; // Default: 'light'
|
|
67
|
+
showReset?: boolean; // Default: true
|
|
68
|
+
showWelcome?: boolean; // Default: false
|
|
69
|
+
welcomeTitle?: string; // Custom welcome title
|
|
70
|
+
welcomeMessage?: string; // Custom welcome message
|
|
71
|
+
title?: string; // Widget tooltip
|
|
72
|
+
description?: string; // Widget modal description
|
|
73
|
+
}
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## License
|
|
77
|
+
|
|
78
|
+
MIT
|