100 lines
2.9 KiB
TypeScript
100 lines
2.9 KiB
TypeScript
|
import { html } from '@design.estate/dees-element';
|
||
|
|
|
||
|
|
export const demo = () => html`
|
||
|
|
<style>
|
||
|
|
.demo-container {
|
||
|
|
padding: 24px;
|
||
|
|
background: hsl(240 10% 4%);
|
||
|
|
min-height: 400px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 16px;
|
||
|
|
}
|
||
|
|
.output-area {
|
||
|
|
background: hsl(240 5% 12%);
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 16px;
|
||
|
|
min-height: 100px;
|
||
|
|
color: hsl(0 0% 95%);
|
||
|
|
font-family: monospace;
|
||
|
|
font-size: 16px;
|
||
|
|
white-space: pre-wrap;
|
||
|
|
word-break: break-all;
|
||
|
|
}
|
||
|
|
.output-label {
|
||
|
|
color: hsl(0 0% 60%);
|
||
|
|
font-size: 12px;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
}
|
||
|
|
.keyboard-wrapper {
|
||
|
|
height: 260px;
|
||
|
|
}
|
||
|
|
.event-log {
|
||
|
|
background: hsl(240 5% 8%);
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 12px;
|
||
|
|
color: hsl(0 0% 70%);
|
||
|
|
font-family: monospace;
|
||
|
|
font-size: 12px;
|
||
|
|
max-height: 100px;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div class="demo-container">
|
||
|
|
<div>
|
||
|
|
<div class="output-label">Typed text:</div>
|
||
|
|
<div class="output-area" id="typed-output">|</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="output-label">Event log:</div>
|
||
|
|
<div class="event-log" id="event-log"></div>
|
||
|
|
</div>
|
||
|
|
<div class="keyboard-wrapper">
|
||
|
|
<eco-applauncher-keyboard
|
||
|
|
visible
|
||
|
|
@key-press=${(e: CustomEvent) => {
|
||
|
|
const output = document.getElementById('typed-output');
|
||
|
|
const log = document.getElementById('event-log');
|
||
|
|
if (output && log) {
|
||
|
|
const currentText = output.textContent?.replace('|', '') || '';
|
||
|
|
if (e.detail.type === 'special') {
|
||
|
|
if (e.detail.key === 'Backspace') {
|
||
|
|
output.textContent = currentText.slice(0, -1) + '|';
|
||
|
|
} else if (e.detail.key === 'Enter') {
|
||
|
|
output.textContent = currentText + '\n|';
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
output.textContent = currentText + e.detail.key + '|';
|
||
|
|
}
|
||
|
|
log.textContent = `key-press: ${JSON.stringify(e.detail)}\n` + log.textContent;
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
@backspace=${() => {
|
||
|
|
const log = document.getElementById('event-log');
|
||
|
|
if (log) {
|
||
|
|
log.textContent = `backspace\n` + log.textContent;
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
@enter=${() => {
|
||
|
|
const log = document.getElementById('event-log');
|
||
|
|
if (log) {
|
||
|
|
log.textContent = `enter\n` + log.textContent;
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
@space=${() => {
|
||
|
|
const log = document.getElementById('event-log');
|
||
|
|
if (log) {
|
||
|
|
log.textContent = `space\n` + log.textContent;
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
@arrow=${(e: CustomEvent) => {
|
||
|
|
const log = document.getElementById('event-log');
|
||
|
|
if (log) {
|
||
|
|
log.textContent = `arrow: ${e.detail.direction}\n` + log.textContent;
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
></eco-applauncher-keyboard>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|