ypsilon-event-handler
Version:
A production-ready event handling system for web applications with memory leak prevention, and method chaining support
159 lines (144 loc) • 6.83 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Method Aliases Test - YpsilonEventHandler</title>
<link rel="icon" type="image/x-icon" href="./../favicon.ico">
<style>
body { font-family: Arial, sans-serif; margin: 2rem auto; max-width: 800px; }
.test-button {
padding: 10px 20px;
margin: 5px;
background: #3b82f6;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.test-button:hover { background: #2563eb; }
.test-input {
padding: 8px;
margin: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
.output {
background: #f8f9fa;
border: 1px solid #ddd;
padding: 15px;
margin: 20px 0;
border-radius: 5px;
min-height: 50px;
}
.section { margin: 30px 0; padding: 20px; background: #fff; border: 1px solid #eee; }
h2 { color: #333; border-bottom: 2px solid #3b82f6; padding-bottom: 5px; }
.code { background: #f5f5f5; padding: 10px; border-radius: 3px; font-family: monospace; }
</style>
</head>
<body>
<h1><a href="./index.html" title="Back to index" style="text-decoration: none;">«</a> Method Aliases Test</h1>
<p>Testing method aliases feature: <code>onClick → handleClick</code>, <code>save → handleFormSave</code></p>
<div class="section">
<h2>🔄 Alias Examples</h2>
<pre class="code">
<strong>Event-type scoped aliases:</strong>
<hr style="margin: .3remn;" />click: {
onClick: 'handleClick',
save: 'handleFormSave',
legacyMethod: 'handleModernClick'
}
input: {
earch: 'handleSearchInput'
}</pre>
<h3>Click Events (onClick alias → handleClick)</h3>
<button class="test-button" id="btn1">Button with handleClick</button>
<button class="test-button" id="btn2">Button with onClick alias</button>
<div class="output" id="click-output">Click buttons above...</div>
<h3>Form Actions (save alias → handleFormSave)</h3>
<input type="text" name="y-demo-1" class="test-input" placeholder="Type something..." />
<button class="test-button" id="save-btn">Save (uses alias)</button>
<div class="output" id="form-output">Type and save...</div>
<h3>Search (search alias → handleSearchInput)</h3>
<input type="text" name="y-demo-2" class="test-input" id="search-input" placeholder="Search..." />
<div class="output" id="search-output">Search results...</div>
<h3>Legacy Support (legacyMethod alias → handleModernClick)</h3>
<button class="test-button" id="legacy-btn">Legacy Button</button>
<div class="output" id="legacy-output">Legacy button result...</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/ypsilon-event-handler@1.5.0/ypsilon-event-handler.min.js"></script>
<script>
class AliasTest extends YpsilonEventHandler {
constructor() {
// Configure event mapping with explicit handlers (some using aliases)
super({
'#btn1': [{ type: 'click', handler: 'handleClick' }],
'#btn2': [{ type: 'click', handler: 'onClick' }], // Uses alias
'#save-btn': [{ type: 'click', handler: 'save' }], // Uses alias
'#search-input': [{ type: 'input', handler: 'search', debounce: 300 }], // Uses alias
'#legacy-btn': [{ type: 'click', handler: 'legacyMethod' }], // Uses alias
'.test-input': [{ type: 'input', handler: 'handleInput' }]
}, {
// Event-type scoped aliases
click: {
onClick: 'handleClick', // React-style naming
save: 'handleFormSave', // Short action name
legacyMethod: 'handleModernClick' // Migration helper
},
input: {
search: 'handleSearchInput' // Custom routing for input events
}
});
}
// Original method
handleClick(event, target) {
document.getElementById('click-output').innerHTML = `
<strong>handleClick() called</strong><br>
Button: ${target.textContent}<br>
Handler: ${target.id === 'btn1' ? 'Direct call' : 'Via onClick alias'}<br>
<small>Time: ${new Date().toLocaleTimeString()}</small>
`;
}
// Aliased method (save → handleFormSave)
handleFormSave(event, target) {
const input = document.querySelector('.test-input');
document.getElementById('form-output').innerHTML = `
<strong>handleFormSave() called via 'save' alias</strong><br>
Value: "${this.escapeHtml(input.value)}"<br>
<small>Time: ${new Date().toLocaleTimeString()}</small>
`;
}
// Aliased method (search → handleSearchInput)
handleSearchInput(event, target) {
document.getElementById('search-output').innerHTML = `
<strong>handleSearchInput() called via 'search' alias</strong><br>
Search query: "${this.escapeHtml(target.value)}"<br>
<small>Time: ${new Date().toLocaleTimeString()}</small>
`;
}
// Aliased method (legacyMethod → handleModernClick)
handleModernClick(event, target) {
document.getElementById('legacy-output').innerHTML = `
<strong>handleModernClick() called via 'legacyMethod' alias</strong><br>
Legacy support works!<br>
<small>Time: ${new Date().toLocaleTimeString()}</small>
`;
}
// Regular input handler
handleInput(event, target) {
console.log('Regular input event:', target.value);
}
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
}
// Initialize test
const test = new AliasTest();
// Log alias info
console.log('Aliases configured:', test.aliases);
console.log('Test initialized with method aliases support!');
</script>
</body>
</html>