Skip to content

Commit 3ccd64a

Browse files
eypsiloneypsilon
committed
fixed examples
1 parent 957c59b commit 3ccd64a

File tree

2 files changed

+64
-35
lines changed

2 files changed

+64
-35
lines changed

‎example/public/multi-handler-demo.html‎

Lines changed: 50 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>🎯 Multi-Handler System Demo - Revolutionary Event Delegation</title>
6+
<title>Multi-Handler System Demo - Revolutionary Event Delegation</title>
7+
<link rel="icon" type="image/x-icon" href="./favicon.ico">
8+
<link rel="stylesheet" type="text/css" href="./assets/main.css">
79
<style>
810
body {
911
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
1012
margin: 0;
11-
padding: 40px 40px 250px;
13+
padding: 40px 40px 200px;
1214
background: white;
1315
border: 3px solid #4CAF50;
1416
position: relative;
@@ -99,12 +101,13 @@
99101
position: fixed;
100102
bottom: 20px;
101103
right: 20px;
102-
width: 300px;
104+
width: 90%;
105+
max-width: 540px;
103106
height: 250px;
104107
background: #1a1a1a;
105108
color: #00ff00;
106109
font-family: 'Courier New', monospace;
107-
font-size: 11px;
110+
font-size: 14px;
108111
padding: 10px;
109112
border-radius: 8px;
110113
overflow-y: scroll;
@@ -201,6 +204,8 @@ <h4 style="color: #1976d2; margin-top: 0;">⚡ Throttle & Debounce Demo</h4>
201204

202205
<div id="main">
203206
<button data-action="mainButtonAction">Main Level Button</button>
207+
<button data-action="mainButtonActionTwo">Main Level 2</button>
208+
<button data-action="mainButtonActionThree">Main Level 3</button>
204209
<input type="text" id="mainInput" placeholder="Main level input..." style="margin-left: 10px; padding: 8px; border: 1px solid #FF9800; border-radius: 4px;">
205210

206211
<div id="section">
@@ -227,25 +232,32 @@ <h4 style="color: #1976d2; margin-top: 0;">⚡ Throttle & Debounce Demo</h4>
227232
class AdvancedHandler extends YpsilonEventHandler {
228233
constructor() {
229234
super({
230-
'body': [{ type: 'click', handler: 'bodyClick' }],
231-
'#app': [{ type: 'click', handler: 'appClick' }],
232-
'#main': [{ type: 'click', handler: 'mainClick' }],
233-
'#section': [{ type: 'click', handler: 'sectionClick' }],
234-
'#searchInput': [{ type: 'input', handler: 'handleDebouncedSearch', debounce: 300 }],
235-
'#bodyInput': [{ type: 'input', handler: 'handleBodyInput', debounce: 300 }],
236-
'#appInput': [{ type: 'input', handler: 'handleAppInput', debounce: 300 }],
237-
'#mainInput': [{ type: 'input', handler: 'handleMainInput', debounce: 300 }],
238-
'#sectionInput': [{ type: 'input', handler: 'handleSectionInput', debounce: 300 }],
239-
'.scroll-zone': [{ type: 'scroll', handler: 'handleThrottledScroll', throttle: 100 }]
235+
'window': [{ type: 'load', debounce: 1000, options: { once: true } }], // auto routed to `handleLoad()`
236+
'body': [{ type: 'click', handler: 'bodyClick' }],
237+
'#app': [{ type: 'click', handler: 'appClick' }],
238+
'#main': [{ type: 'click', handler: 'mainClick' }],
239+
'#section': [{ type: 'click', handler: 'sectionClick' }],
240+
'#searchInput': [{ type: 'input', handler: 'handleDebouncedSearch', debounce: 300 }],
241+
'#bodyInput': [{ type: 'input', handler: 'handleBodyInput', debounce: 300 }],
242+
'#appInput': [{ type: 'input', handler: 'handleAppInput', debounce: 300 }],
243+
'#mainInput': [{ type: 'input', handler: 'handleMainInput', debounce: 300 }],
244+
'#sectionInput': [{ type: 'input', handler: 'handleSectionInput', debounce: 300 }],
245+
'.scroll-zone': [{ type: 'scroll', handler: 'handleThrottledScroll', throttle: 100 }],
240246
}, {
241-
// NEW: Configurable actionable target patterns
242-
actionableAttributes: ['data-action', 'data-cmd'], // Support both data-action and data-cmd
243-
actionableClasses: ['actionable', 'clickable'], // Support .actionable and .clickable classes
244-
actionableTags: ['BUTTON', 'A', 'INPUT'], // Support buttons, links, and inputs
245-
enableActionableTargets: true // Enable actionable target resolution
247+
// Configurable actionable target patterns
248+
actionableAttributes: ['data-action', 'data-cmd'], // Support both data-action and data-cmd
249+
actionableClasses: ['actionable', 'clickable'], // Support .actionable and .clickable classes
250+
actionableTags: ['BUTTON', 'A', 'INPUT'], // Support buttons, links, and inputs
251+
enableActionableTargets: true // Enable actionable target resolution
246252
});
247253
}
248254

255+
// Add debounced initial welcome message
256+
handleLoad(event) {
257+
this.logEvent('System', 'Multi-Handler Demo Ready!', document.body, '#00ff00');
258+
this.logEvent('Info', 'Click anywhere to see closest-match resolution', document.body, '#888');
259+
}
260+
249261
// Handler methods
250262
bodyClick(event, target) {
251263
// If it's a button, handle it directly without logging parent handler
@@ -279,7 +291,7 @@ <h4 style="color: #1976d2; margin-top: 0;">⚡ Throttle & Debounce Demo</h4>
279291

280292
sectionClick(event, target) {
281293
// If it's a button, handle it directly without logging parent handler
282-
if (target.dataset.action) {
294+
if (target.dataset.action || target.dataset.cmd) {
283295
this.executeButtonAction(event, target);
284296
return;
285297
}
@@ -300,11 +312,19 @@ <h4 style="color: #1976d2; margin-top: 0;">⚡ Throttle & Debounce Demo</h4>
300312
this.logEvent('Button Action', 'mainButtonAction', target, '#FF5722');
301313
}
302314

315+
mainButtonActionTwo(target, event) {
316+
this.logEvent('Button Action 2', 'mainButtonActionTwo', target, '#ff001f');
317+
}
318+
319+
mainButtonActionThree(target, event) {
320+
this.logEvent('Button Action 3', 'mainButtonActionThree', target, '#f5f60b');
321+
}
322+
303323
sectionButtonAction(target, event) {
304324
this.logEvent('Button Action', 'sectionButtonAction', target, '#FF5722');
305325
}
306326

307-
// NEW: Custom data-cmd handler to demonstrate configurable actionable patterns
327+
// Custom data-cmd handler to demonstrate configurable actionable patterns
308328
newCustomAction(target, event) {
309329
this.logEvent('🚀 CUSTOM CMD', 'newCustomAction', target, '#FF1744');
310330
}
@@ -397,14 +417,6 @@ <h4 style="color: #1976d2; margin-top: 0;">⚡ Throttle & Debounce Demo</h4>
397417
</div>
398418
`;
399419
}
400-
401-
// Add initial welcome message
402-
window.addEventListener('load', () => {
403-
setTimeout(() => {
404-
handler.logEvent('System', 'Multi-Handler Demo Ready!', document.body, '#00ff00');
405-
handler.logEvent('Info', 'Click anywhere to see closest-match resolution', document.body, '#888');
406-
}, 500);
407-
});
408420
</script>
409421

410422
<div id="flexing" style="background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 30px; margin: 30px 0; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">
@@ -443,7 +455,7 @@ <h3 style="color: #ffeb3b; text-shadow: 1px 1px 2px rgba(0,0,0,0.5);">🧠 It's
443455

444456
<div style="text-align: center; margin: 25px 0; padding: 20px; background: rgba(255,255,255,0.1); border-radius: 10px;">
445457
<h3 style="color: #ffeb3b; margin-bottom: 15px;">⚡ The Revolutionary Code</h3>
446-
<pre style="background: rgba(0,0,0,0.3); padding: 15px; border-radius: 8px; font-family: 'Courier New', monospace; text-align: left; font-size: 1rem;">
458+
<pre class="auto-height" style="background: rgba(0,0,0,0.3); padding: 15px; border-radius: 8px; font-family: 'Courier New', monospace; text-align: left; font-size: 1rem;">
447459
<span style="color: #4CAF50;">// Only 4 listeners for infinite elements!</span>
448460
constructor() {
449461
super({
@@ -469,5 +481,13 @@ <h3 style="color: #ffeb3b; margin-bottom: 10px;">🏆 World's First DOM Event Sc
469481
</div>
470482
</div>
471483

484+
<div class="flex-center-center src-nav" style="padding: 1rem 0">
485+
<small>© Engin Ypsilon &amp; Claude Van DOM</small> |
486+
<a href="./index.html">Examples</a> |
487+
<a href="https://github.com/eypsilon/YpsilonEventHandler">github</a> |
488+
<a href="https://www.npmjs.com/package/ypsilon-event-handler">npm</a> |
489+
<a href="./multi-handler-demo.html">reload</a>
490+
</div>
491+
472492
</body>
473493
</html>

‎example/public/spa.html‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,9 @@
3939
.scroll-to-top:hover {
4040
transform: translateY(0);
4141
}
42-
4342
}
4443

45-
.scroll-to-top-container.y-scrolled .scroll-to-top {
44+
body.y-scrolled .scroll-to-top {
4645
bottom: 4px;
4746
right: 4px;
4847
opacity: 1;
@@ -405,6 +404,10 @@
405404
box-shadow: 0 0 8px 0px #c1b3b3;
406405
bottom: 180px;
407406
opacity: .85;
407+
408+
.log {
409+
max-height: 128px;
410+
}
408411
}
409412
}
410413
}
@@ -1010,13 +1013,19 @@ <h3>🎉 You've reached the bottom!</h3>
10101013

10111014
/**
10121015
* Convention Protocol
1013-
* Gets applied, when types are missing a handler
1016+
* Gets applied, when event.types are missing a handler
10141017
*
1018+
* ## body handler
10151019
* click handleClick(event, target)
10161020
* keydown handleKeydown(event, target)
10171021
* testdispatch handleTestdispatch(event, target)
10181022
* change handleChange(event, target)
10191023
* input handleInput(event, target)
1024+
*
1025+
* ## window handler
1026+
* resize handleResize(event, target)
1027+
* scroll handleScroll(event, target)
1028+
* beforeunload handleBeforeunload(event, target)
10201029
*/
10211030
const customEventMap = {
10221031
'body': [
@@ -1027,10 +1036,10 @@ <h3>🎉 You've reached the bottom!</h3>
10271036
{ type: 'change', debounce: config.debounceChange, options: { passive: true } },
10281037
],
10291038
'window': [
1030-
{ type: 'load', handler: 'handleWindowLoad', options: { once: true } },
1039+
{ type: 'load', handler: 'handleWindowLoad', options: { once: true } },
10311040
{ type: 'resize', throttle: config.throttleResize },
10321041
{ type: 'scroll', throttle: config.throttle },
1033-
{ type: 'beforeunload', capture: true },
1042+
{ type: 'beforeunload', capture: true },
10341043
],
10351044
'#scroll-area': [
10361045
{ type: 'scroll', handler: 'handleAreaScroll', throttle: config.throttleScrollArea }

0 commit comments

Comments
 (0)