Skip to content

Commit a74615e

Browse files
frankpaganfrankpagan
committed
feat: enhance demo page with improved layout and Bootstrap integration
1 parent 447f6d2 commit a74615e

1 file changed

Lines changed: 228 additions & 10 deletions

File tree

‎demo/index.html‎

Lines changed: 228 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,230 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<title>plugins demo</title>
5-
<link rel="manifest" href="/manifest.webmanifest" />
6-
</head>
7-
<body>
8-
<!--<script src="../dist/CoCreate-plugins.js"></script>-->
9-
<!-- <script src="https://CoCreate.app/dist/CoCreate.js" ></script> -->
10-
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
11-
</body>
12-
</html>
3+
<head>
4+
<title>Plugins API Demo</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="manifest" href="/manifest.webmanifest" />
8+
9+
<!-- Bootstrap 5 CSS for Demo Presentation -->
10+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
11+
12+
<style>
13+
body { background-color: #f8f9fa; padding-bottom: 50px; }
14+
.demo-card { margin-bottom: 2rem; border: none; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
15+
.card-header { background-color: #fff; border-bottom: 1px solid #eee; padding: 1.5rem; }
16+
.operator-badge { font-family: monospace; background: #e9ecef; color: #d63384; padding: 2px 6px; border-radius: 4px; }
17+
</style>
18+
</head>
19+
<body>
20+
21+
<div class="container py-5">
22+
<div class="row mb-4">
23+
<div class="col-12 text-center">
24+
<h1 class="display-5 fw-bold text-primary">CoCreate Plugins API</h1>
25+
<p class="lead text-muted">A declarative, attribute-based system for initializing and configuring JavaScript libraries.</p>
26+
</div>
27+
</div>
28+
29+
<!-- SECTION 1: THE BASICS -->
30+
<div class="row">
31+
<div class="col-12">
32+
<div class="card demo-card">
33+
<div class="card-header">
34+
<h4 class="m-0">1. The Basics: Declarative Initialization</h4>
35+
</div>
36+
<div class="card-body">
37+
<p>Initialize any supported plugin using the <code>plugin="PluginName"</code> attribute. Configure it using the lowercase attribute matching the plugin name (e.g., <code>pluginname="{ options }"</code>).</p>
38+
39+
<div class="row align-items-center">
40+
<div class="col-md-6">
41+
<h6 class="text-muted text-uppercase fs-7 fw-bold mb-3">Live Demo</h6>
42+
<!-- Toastify Example -->
43+
<button
44+
type="button"
45+
class="btn btn-success"
46+
plugin="Toastify"
47+
toastify='{
48+
"text": "Hello! I am a declarative toast.",
49+
"duration": 3000,
50+
"gravity": "top",
51+
"position": "right",
52+
"style": { "background": "#198754" }
53+
}'
54+
onclick="this.Toastify.showToast()">
55+
Click me to Show Toast
56+
</button>
57+
</div>
58+
<div class="col-md-6">
59+
<h6 class="text-muted text-uppercase fs-7 fw-bold mb-3">Code</h6>
60+
<pre><code class="language-html">&lt;button
61+
plugin="Toastify"
62+
toastify='{
63+
"text": "Hello!",
64+
"duration": 3000,
65+
"style": { "background": "#198754" }
66+
}'
67+
onclick="this.Toastify.showToast()"&gt;
68+
Click Me
69+
&lt;/button&gt;</code></pre>
70+
</div>
71+
</div>
72+
</div>
73+
</div>
74+
</div>
75+
</div>
76+
77+
<!-- SECTION 2: OPERATORS & VARIABLES -->
78+
<div class="row">
79+
<div class="col-12">
80+
<div class="card demo-card">
81+
<div class="card-header">
82+
<h4 class="m-0">2. Variable Operators</h4>
83+
</div>
84+
<div class="card-body">
85+
<p>The API supports special variables to reference DOM elements and global objects dynamically within your JSON configuration.</p>
86+
87+
<div class="table-responsive mb-4">
88+
<table class="table table-bordered">
89+
<thead class="table-light">
90+
<tr>
91+
<th>Operator</th>
92+
<th>Description</th>
93+
<th>Usage Example</th>
94+
</tr>
95+
</thead>
96+
<tbody>
97+
<tr>
98+
<td><span class="operator-badge">$this</span></td>
99+
<td>References the current DOM element where the attribute is placed.</td>
100+
<td><code>"element": "$this"</code></td>
101+
</tr>
102+
<tr>
103+
<td><span class="operator-badge">$window</span></td>
104+
<td>Accesses the global <code>window</code> object (useful for callbacks).</td>
105+
<td><code>"callback": "$window.console.log"</code></td>
106+
</tr>
107+
</tbody>
108+
</table>
109+
</div>
110+
111+
<!-- RaterJs Example ($this) -->
112+
<div class="border rounded p-3 bg-light mb-3">
113+
<h5 class="mb-3">Example: Using <code>$this</code> for Element Binding</h5>
114+
<div class="row">
115+
<div class="col-md-6">
116+
<!-- RaterJs Implementation -->
117+
<div dir="ltr"
118+
plugin="raterJs"
119+
raterjs='[{
120+
"element": "$this",
121+
"starSize": 32,
122+
"rating": 3.5,
123+
"step": 0.5
124+
}]'>
125+
</div>
126+
</div>
127+
<div class="col-md-6">
128+
<pre><code class="language-html">&lt;div
129+
plugin="raterJs"
130+
raterjs='[{
131+
"element": "$this",
132+
"starSize": 32,
133+
"rating": 3.5
134+
}]'&gt;
135+
&lt;/div&gt;</code></pre>
136+
</div>
137+
</div>
138+
</div>
139+
140+
</div>
141+
</div>
142+
</div>
143+
</div>
144+
145+
<!-- SECTION 3: CONFIGURATION PATTERNS -->
146+
<div class="row">
147+
<div class="col-12">
148+
<div class="card demo-card">
149+
<div class="card-header">
150+
<h4 class="m-0">3. Configuration Patterns (Array vs. Object)</h4>
151+
</div>
152+
<div class="card-body">
153+
<p>Plugins have different constructor signatures. The API handles both by inspecting the JSON structure.</p>
154+
155+
<div class="row">
156+
<div class="col-md-6">
157+
<div class="card h-100 bg-light border-0">
158+
<div class="card-body">
159+
<h6 class="fw-bold">Pattern A: Single Config Object</h6>
160+
<p class="small text-muted">Used when the plugin accepts a single object containing all settings (e.g., <code>raterJs({ element: div })</code>).</p>
161+
<hr>
162+
<code>config='[{ "element": "$this", "opt": "val" }]'</code>
163+
<br><small class="text-danger">*Note: Enclosed in an array to represent arguments list.</small>
164+
</div>
165+
</div>
166+
</div>
167+
<div class="col-md-6">
168+
<div class="card h-100 bg-light border-0">
169+
<div class="card-body">
170+
<h6 class="fw-bold">Pattern B: Argument List</h6>
171+
<p class="small text-muted">Used when the plugin accepts multiple distinct arguments (e.g., <code>Swiper(element, options)</code>).</p>
172+
<hr>
173+
<code>config='["$this", { "opt": "val" }]'</code>
174+
</div>
175+
</div>
176+
</div>
177+
</div>
178+
</div>
179+
</div>
180+
</div>
181+
</div>
182+
183+
<!-- SECTION 4: ADVANCED (Callbacks) -->
184+
<div class="row">
185+
<div class="col-12">
186+
<div class="card demo-card">
187+
<div class="card-header">
188+
<h4 class="m-0">4. Advanced: Callbacks & Global Functions</h4>
189+
</div>
190+
<div class="card-body">
191+
<p>Use <code>$window</code> or specific global names (like <code>$Swal</code>) to pass functions into configuration attributes.</p>
192+
193+
<div class="row align-items-center">
194+
<div class="col-md-6">
195+
<!-- SweetAlert Example -->
196+
<button
197+
type="button"
198+
class="btn btn-primary"
199+
onclick="Swal.fire({
200+
title: 'Are you sure?',
201+
text: 'You can define this entire config in HTML!',
202+
icon: 'warning',
203+
showCancelButton: true,
204+
confirmButtonText: 'Yes, delete it!'
205+
})">
206+
Trigger SweetAlert
207+
</button>
208+
</div>
209+
<div class="col-md-6">
210+
<pre><code class="language-html">&lt;button
211+
onclick="Swal.fire({
212+
title: 'Ready?',
213+
preConfirm: '$window.myCustomFunction'
214+
}) &gt;
215+
Launch
216+
&lt;/button&gt;</code></pre>
217+
</div>
218+
</div>
219+
</div>
220+
</div>
221+
</div>
222+
</div>
223+
224+
</div>
225+
226+
<!-- CoCreate Engine -->
227+
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
228+
229+
</body>
230+
</html>

0 commit comments

Comments
 (0)