-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
149 lines (137 loc) · 8.42 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Command dialog demo</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
<script>tailwind.config = {darkMode: 'class'}</script>
<script type="module" src="src/cmd-dialog.ts"></script>
</head>
<body class="dark:text-blue-50 dark:bg-[radial-gradient(circle,rgb(15,23,42),rgb(2,6,23))]">
<main class="flex h-screen items-center justify-center">
<cmd-dialog
placeholder="Search for actions"
hotkey="$mod+k|$mod+j"
showCloseButton="true"
note="<a href=https://github.com/OzzyCzech/cmd-dialog>cmd-dialog demo</a>"
></cmd-dialog>
<article class="text-center flex flex-col gap-8">
<h1 class="text-5xl lg:text-6xl xl:text-7xl">cmd-dialog demo</h1>
<p class="text-2xl">Command dialog and keyboard shortcuts palette for web apps.</p>
<p class="text-5xl lg:text-6xl xl:text-7xl font-semibold">
Press <code>⌘+K</code> <span class="opacity-20">/</span> <code>Ctrl+K</code>
</p>
<p class="flex flex-wrap items-center justify-center gap-2 my-6">
<a href="https://www.npmjs.com/package/cmd-dialog" target="_blank"><img src="https://img.shields.io/npm/dm/cmd-dialog?style=for-the-badge" alt="Downloads"></a>
<a href="https://www.npmjs.com/package/cmd-dialog" target="_blank"><img src="https://img.shields.io/npm/v/cmd-dialog?style=for-the-badge" alt="Version"></a>
<a href="https://github.com/OzzyCzech/cmd-dialog/blob/main/LICENSE" target="_blank"><img src="https://img.shields.io/npm/l/cmd-dialog?style=for-the-badge" alt="License"></a>
<a href="https://github.com/OzzyCzech/cmd-dialog/commit/main" target="_blank"><img src="https://img.shields.io/github/last-commit/OzzyCzech/cmd-dialog?style=for-the-badge" alt="Last commit"></a>
<a href="https://github.com/OzzyCzech/cmd-dialog/actions" target="_blank"><img src="https://img.shields.io/github/actions/workflow/status/OzzyCzech/cmd-dialog/main.yml?style=for-the-badge" alt="Workflow status"></a>
</p>
<p class="flex flex-wrap items-center justify-center gap-3">
<button class="py-3 px-6 bg-gray-700 hover:bg-gray-600 rounded-full hover:text-current hover:no-underline inline-flex items-center" onclick="document.querySelector('cmd-dialog').open()">Open dialog</button>
<a href="https://github.com/OzzyCzech/cmd-dialog/tree/main/docs" target="_blank" class="py-3 px-6 bg-gray-700 hover:bg-gray-600 rounded-full hover:text-current hover:no-underline inline-flex items-center">Documentation</a>
<a href="https://github.com/OzzyCzech/cmd-dialog/" target="_blank" class="py-3 px-6 bg-gray-700 hover:bg-gray-600 rounded-full hover:text-current hover:no-underline inline-flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="w-5 h-5 mr-2" viewBox="0 0 16 16">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
</svg>
GitHub</a>
</p>
</article>
<script type="module">
const dialog = document.querySelector('cmd-dialog');
import actions from './fuse.json';
// add event listener
dialog.addEventListener('open', () => {
console.log('Dialog opened');
});
dialog.addEventListener('close', () => {
console.log('Dialog closed');
});
// listen to action events
dialog.addEventListener('action', (event) => {
if (
dialog.isOpen &&
event.detail.parentEvent instanceof KeyboardEvent &&
event.detail.parentEvent.key !== 'Enter'
) {
//event.preventDefault(); // do nothing
}
});
// add custom actions
actions.unshift(
{
title: 'Homepage',
img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>',
description: 'Go to homepage',
hotkey: '$mod+h',
onAction(event) {
window.location.href = '/';
event.preventDefault();
},
},
{
title: 'GitHub',
img: `<svg viewBox="0 0 256 249" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><g fill="currentColor"><path d="M127.505 0C57.095 0 0 57.085 0 127.505c0 56.336 36.534 104.13 87.196 120.99 6.372 1.18 8.712-2.766 8.712-6.134 0-3.04-.119-13.085-.173-23.739-35.473 7.713-42.958-15.044-42.958-15.044-5.8-14.738-14.157-18.656-14.157-18.656-11.568-7.914.872-7.752.872-7.752 12.804.9 19.546 13.14 19.546 13.14 11.372 19.493 29.828 13.857 37.104 10.6 1.144-8.242 4.449-13.866 8.095-17.05-28.32-3.225-58.092-14.158-58.092-63.014 0-13.92 4.981-25.295 13.138-34.224-1.324-3.212-5.688-16.18 1.235-33.743 0 0 10.707-3.427 35.073 13.07 10.17-2.826 21.078-4.242 31.914-4.29 10.836.048 21.752 1.464 31.942 4.29 24.337-16.497 35.029-13.07 35.029-13.07 6.94 17.563 2.574 30.531 1.25 33.743 8.175 8.929 13.122 20.303 13.122 34.224 0 48.972-29.828 59.756-58.22 62.912 4.573 3.957 8.648 11.717 8.648 23.612 0 17.06-.148 30.791-.148 34.991 0 3.393 2.295 7.369 8.759 6.117 50.634-16.879 87.122-64.656 87.122-120.973C255.009 57.085 197.922 0 127.505 0"/><path d="M47.755 181.634c-.28.633-1.278.823-2.185.389-.925-.416-1.445-1.28-1.145-1.916.275-.652 1.273-.834 2.196-.396.927.415 1.455 1.287 1.134 1.923M54.027 187.23c-.608.564-1.797.302-2.604-.589-.834-.889-.99-2.077-.373-2.65.627-.563 1.78-.3 2.616.59.834.899.996 2.08.36 2.65M58.33 194.39c-.782.543-2.06.034-2.849-1.1-.781-1.133-.781-2.493.017-3.038.792-.545 2.05-.055 2.85 1.07.78 1.153.78 2.513-.019 3.069M65.606 202.683c-.699.77-2.187.564-3.277-.488-1.114-1.028-1.425-2.487-.724-3.258.707-.772 2.204-.555 3.302.488 1.107 1.026 1.445 2.496.7 3.258M75.01 205.483c-.307.998-1.741 1.452-3.185 1.028-1.442-.437-2.386-1.607-2.095-2.616.3-1.005 1.74-1.478 3.195-1.024 1.44.435 2.386 1.596 2.086 2.612M85.714 206.67c.036 1.052-1.189 1.924-2.705 1.943-1.525.033-2.758-.818-2.774-1.852 0-1.062 1.197-1.926 2.721-1.951 1.516-.03 2.758.815 2.758 1.86M96.228 206.267c.182 1.026-.872 2.08-2.377 2.36-1.48.27-2.85-.363-3.039-1.38-.184-1.052.89-2.105 2.367-2.378 1.508-.262 2.857.355 3.049 1.398"/></g></svg>`,
hotkey: '$mod+g',
description: 'Check source code on GitHub',
onAction(event) {
window.open('https://github.com/OzzyCzech/cmd-dialog', '_blank');
event.preventDefault();
},
},
{
title: 'Email me',
hotkey: '$mod+e',
description: 'at [email protected]',
img: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>`,
tags: ['email'],
onAction(event) {
window.location.href = 'mailto:[email protected]';
event.preventDefault()
},
},
);
// action that is triggered outside the dialog
actions.push({
title: 'Outside action',
hotkey: 'x',
description: 'Do something only outside the dialog',
onAction() {
if (dialog.isOpen) {
console.log('Dialog is open: do nothing...');
} else {
alert('Dialog is closed: open it with ⌘+K');
}
},
},
{
title: 'The "A" action',
hotkey: 'a',
description: 'Do something',
onAction(event) {
if (!/TEXTAREA|INPUT|CMD-DIALOG/.test(event.target.tagName)) {
console.log('You activate the "A" action');
}
},
},
{
title: 'The "A" action',
hotkey: 'd i a l o g',
description: 'Do something',
onAction(event) {
if (!/TEXTAREA|INPUT|CMD-DIALOG/.test(event.target.tagName)) {
console.log('You activate the "A" action');
}
},
}
);
dialog.actions = actions;
//dialog.open();
</script>
</main>
</body>
</html>