-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathexample.html
More file actions
220 lines (187 loc) · 7.56 KB
/
example.html
File metadata and controls
220 lines (187 loc) · 7.56 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE html>
<html>
<head>
<title>LightBind Framework Demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/vs2015.min.css">
<link rel="stylesheet" href="./examples/example.css">
<!-- Import LightBind as a module -->
<script type="module">
import { LightBind } from './lightbind.js';
window.lightBind = new LightBind({
debug: true,
componentsPath: '/component',
dialogsPath: '/dialog'
});
lightBind.setGlobals();
// Initialize at page load for any components already in the DOM
lightBind.start();
</script>
</head>
<body>
<h1>LightBind Framework Demo</h1>
<div id="examples-container">
<!-- Examples will be loaded here -->
</div>
<!-- Load scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>
// List of example files to load
const examples = [
'counter.html',
'conditional.html',
'list.html',
'table.html',
'drag&drop.html',
'style-binding.html',
'attr-svg.html',
'nested-components.html',
'data-table.html'
];
// Function to load an example file
async function loadExample(filename) {
try {
const response = await fetch(filename);
const content = await response.text();
return content;
} catch (error) {
console.error(`Failed to load ${filename}:`, error);
return `<p>Error loading ${filename}</p>`;
}
}
// Function to create a demo section
function createDemoSection(exampleHtml, index) {
const parser = new DOMParser();
const doc = parser.parseFromString(exampleHtml, 'text/html');
// Create container
const section = document.createElement('div');
section.className = 'demo-section';
section.id = `demo-${index}`;
// Create content container
const content = document.createElement('div');
content.className = 'section-content';
// Create demo area
const demoArea = document.createElement('div');
demoArea.className = 'section-demo';
// Extract title from example
const title = doc.querySelector('title')?.textContent || `Example ${index + 1}`;
// Add the demo content
demoArea.innerHTML = `<h2>${title}</h2>`;
// Extract scripts from the example to run them separately and properly
const scripts = [];
let modifiedHtml = exampleHtml;
// Extract component functions from scripts to register them globally
modifiedHtml = modifiedHtml.replace(/<script>([\s\S]*?)<\/script>/gi, (match, scriptContent) => {
// Save the script for later execution
scripts.push(scriptContent.trim());
return ''; // Remove script from HTML
});
// Clone the body content into the demo area
Array.from(doc.body.children).forEach(child => {
demoArea.appendChild(child.cloneNode(true));
});
// Execute the scripts after adding the HTML
scripts.forEach(scriptContent => {
try {
// Extract function definitions and register them globally
const functionMatch = scriptContent.match(/function\s+([A-Za-z0-9_]+)\s*\(/);
if (functionMatch && functionMatch[1]) {
const functionName = functionMatch[1];
// Register the function globally so LightBind can find it
eval(`window.${functionName} = ${scriptContent}`);
console.log(`Registered function: ${functionName}`);
} else {
// Just execute the script if it's not a function definition
eval(scriptContent);
}
} catch (error) {
console.error('Error executing script:', error);
}
});
// Create code area
const codeArea = document.createElement('div');
codeArea.className = 'section-code';
// Extract HTML for display (clean it up for better display)
let displayHtml = exampleHtml
.replace(/<!DOCTYPE.*?>/i, '')
.replace(/<html>|<\/html>/gi, '')
.replace(/<head>.*?<\/head>/is, '')
.replace(/<body>|<\/body>/gi, '')
.trim();
// Escape HTML for proper display
const escapedHtml = displayHtml
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
codeArea.innerHTML = `
<div class="code-container">
<div class="code-header">
<span class="code-label">${title}</span>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<pre><code class="language-html">${escapedHtml}</code></pre>
</div>
`;
// Add the demo and code areas to the section
content.appendChild(demoArea);
content.appendChild(codeArea);
section.appendChild(content);
return section;
}
// Function to copy code
function copyCode(button) {
const codeContainer = button.closest('.code-container');
const codeBlock = codeContainer.querySelector('pre code');
// Get the content and decode HTML entities back to their original form
const content = codeBlock.textContent
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, "'");
const textArea = document.createElement('textarea');
textArea.value = content;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
// Show feedback
const originalText = button.innerText;
button.innerText = 'Copied!';
button.style.backgroundColor = '#28a745';
setTimeout(() => {
button.innerText = originalText;
button.style.backgroundColor = '#007bff';
}, 1500);
}
// Load all examples and add them to the page
async function loadAllExamples() {
const container = document.getElementById('examples-container');
for (let i = 0; i < examples.length; i++) {
const exampleContent = await loadExample('./examples/' + examples[i]);
const section = createDemoSection(exampleContent, i);
container.appendChild(section);
}
// Initialize syntax highlighting
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightElement(block);
});
// Initialize LightBind on the examples container
console.log('All examples loaded, initializing LightBind components...');
setTimeout(() => {
if (window.lightBind) {
console.log('Starting LightBind on examples container');
window.lightBind.start('#examples-container');
} else {
console.error('LightBind not available');
}
}, 500);
}
// Make copy function globally available
window.copyCode = copyCode;
// Start loading examples when the page is ready
document.addEventListener('DOMContentLoaded', loadAllExamples);
</script>
</body>
</html>