This commit is contained in:
cheney
2023-08-09 13:58:15 +08:00
parent dd6405ff4d
commit f42de135d5
2250 changed files with 0 additions and 314928 deletions
-91
View File
@@ -1,91 +0,0 @@
<!doctype html>
<html lang="en" class="light-theme">
<head>
<meta charset="UTF-8">
<title>JavaScript Event KeyCodes</title>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href='//fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="JavaScript Event KeyCodes">
<meta name="twitter:description" content="Keycode testing tool - which keys map to which keycodes?">
<meta name="twitter:creator" content="@wesbos">
<meta name="twitter:image" content="https://cdn1.imggmi.com/uploads/2019/7/12/f6b03f5628f7850649714200ab517a52-full.png">
<link rel="stylesheet" href="style.css?v=07232021">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.css" />
<link rel="icon" href="">
</head>
<body>
<script async src="//cdn.carbonads.com/carbon.js?serve=CESIK23L&placement=keycodeinfo" id="_carbonads_js"></script>
<canvas width="128" height="128" hidden></canvas>
<div class="display">
<table class="table hide">
<thead>
<tr>
<th>Key Code</th>
<th>Key</th>
</tr>
</thead>
<tbody class="table-body">
</tbody>
</table>
<div class="wrap" aria-live="polite" aria-atomic="true">
<p class="keycode-display"></p>
<p class="text-display">Press any key to get the JavaScript event keycode</p>
<div class="cards hide">
<div class="card item-key">
<div class="card-header">event.key</div>
<div class="card-main">
<div class="main-description">key</div>
</div>
</div>
<div class="card item-location">
<div class="card-header">event.location
<a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/location" target="_blank" rel="noopener"
class="more-info"></a>
</div>
<div class="card-main">
<div class="main-description">location</div>
</div>
</div>
<div class="card item-which">
<div class="card-header">
event.which
<a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent" target="_blank" rel="noopener"
class="deprecated-link">(deprecated)</a>
</div>
<div class="card-main">
<div class="main-description">which</div>
</div>
</div>
<div class="card item-code">
<div class="card-header">event.code</div>
<div class="card-main">
<div class="main-description">code</div>
</div>
</div>
</div>
<div class="mobile-input">
</div>
</div>
<div class="fixed-buttons">
<button id="table-button" onclick={toggleTable()} class="toggle-button">Table</button>
<button id="theme-button" onclick={toggleTheme()} class="toggle-button">Dark theme</button>
</div>
</div>
<script type='text/javascript'>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./service-worker.js');
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.js"></script>
<script src="scripts.js?v=07232021"></script>
<script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>
<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "b45decb6c8304abfaafe7d19167b59b5"}'></script>
</body>
</html>
-456
View File
@@ -1,456 +0,0 @@
// #region Declare Variables
const keyCodes = {
0: 'That key has no keycode',
3: 'break',
8: 'backspace / delete',
9: 'tab',
12: 'clear',
13: 'enter',
16: 'shift',
17: 'ctrl',
18: 'alt',
19: 'pause/break',
20: 'caps lock',
21: 'hangul',
25: 'hanja',
27: 'escape',
28: 'conversion',
29: 'non-conversion',
32: 'spacebar',
33: 'page up',
34: 'page down',
35: 'end',
36: 'home',
37: 'left arrow',
38: 'up arrow',
39: 'right arrow',
40: 'down arrow',
41: 'select',
42: 'print',
43: 'execute',
44: 'Print Screen',
45: 'insert',
46: 'delete',
47: 'help',
48: '0',
49: '1',
50: '2',
51: '3',
52: '4',
53: '5',
54: '6',
55: '7',
56: '8',
57: '9',
58: ':',
59: 'semicolon (firefox), equals',
60: '<',
61: 'equals (firefox)',
63: 'ß',
64: '@ (firefox)',
65: 'a',
66: 'b',
67: 'c',
68: 'd',
69: 'e',
70: 'f',
71: 'g',
72: 'h',
73: 'i',
74: 'j',
75: 'k',
76: 'l',
77: 'm',
78: 'n',
79: 'o',
80: 'p',
81: 'q',
82: 'r',
83: 's',
84: 't',
85: 'u',
86: 'v',
87: 'w',
88: 'x',
89: 'y',
90: 'z',
91: 'Windows Key / Left ⌘ / Chromebook Search key',
92: 'right window key',
93: 'Windows Menu / Right ⌘',
95: 'sleep',
96: 'numpad 0',
97: 'numpad 1',
98: 'numpad 2',
99: 'numpad 3',
100: 'numpad 4',
101: 'numpad 5',
102: 'numpad 6',
103: 'numpad 7',
104: 'numpad 8',
105: 'numpad 9',
106: 'multiply',
107: 'add',
108: 'numpad period (firefox)',
109: 'subtract',
110: 'decimal point',
111: 'divide',
112: 'f1',
113: 'f2',
114: 'f3',
115: 'f4',
116: 'f5',
117: 'f6',
118: 'f7',
119: 'f8',
120: 'f9',
121: 'f10',
122: 'f11',
123: 'f12',
124: 'f13',
125: 'f14',
126: 'f15',
127: 'f16',
128: 'f17',
129: 'f18',
130: 'f19',
131: 'f20',
132: 'f21',
133: 'f22',
134: 'f23',
135: 'f24',
136: 'f25',
137: 'f26',
138: 'f27',
139: 'f28',
140: 'f29',
141: 'f30',
142: 'f31',
143: 'f32',
144: 'num lock',
145: 'scroll lock',
151: 'airplane mode',
160: '^',
161: '!',
162: '؛ (arabic semicolon)',
163: '#',
164: '$',
165: 'ù',
166: 'page backward',
167: 'page forward',
168: 'refresh',
169: 'closing paren (AZERTY)',
170: '*',
171: '~ + * key',
172: 'home key',
173: 'minus (firefox), mute/unmute',
174: 'decrease volume level',
175: 'increase volume level',
176: 'next',
177: 'previous',
178: 'stop',
179: 'play/pause',
180: 'e-mail',
181: 'mute/unmute (firefox)',
182: 'decrease volume level (firefox)',
183: 'increase volume level (firefox)',
186: 'semi-colon / ñ',
187: 'equal sign',
188: 'comma',
189: 'dash',
190: 'period',
191: 'forward slash / ç',
192: 'grave accent / ñ / æ / ö',
193: '?, / or °',
194: 'numpad period (chrome)',
219: 'open bracket',
220: 'back slash',
221: 'close bracket / å',
222: 'single quote / ø / ä',
223: '`',
224: 'left or right ⌘ key (firefox)',
225: 'altgr',
226: '< /git >, left back slash',
230: 'GNOME Compose Key',
231: 'ç',
233: 'XF86Forward',
234: 'XF86Back',
235: 'non-conversion',
240: 'alphanumeric',
242: 'hiragana/katakana',
243: 'half-width/full-width',
244: 'kanji',
251: 'unlock trackpad (Chrome/Edge)',
255: 'toggle touchpad',
};
const keyLocations = {
0: 'General keys',
1: 'Left-side modifier keys',
2: 'Right-side modifier keys',
3: 'Numpad',
};
const spaceDescription = '(Space character)';
const body = document.querySelector('body');
const mobileInputDiv = document.querySelector('.mobile-input');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
ctx.font = '110px sans-serif';
let theme = 'dark';
// #endregion
// #region Main Methods
function createTable() {
const tableBody = document.querySelector('.table-body');
for (const key in keyCodes) {
const row = document.createElement('tr');
row.innerHTML += `<td>${key}</td>`;
row.innerHTML += `<td>${keyCodes[key]}</td>`;
tableBody.appendChild(row);
}
}
function toggleTable() {
const table = document.querySelector('.table');
// Toggle main content and table
document.querySelector('.wrap').classList.toggle('hide');
document.querySelector('.keycode-display').classList.toggle('hide');
table.classList.toggle('hide');
// If hidden, show back arrow
const hidden = table.classList.contains('hide');
document.querySelector('#table-button').textContent = hidden ? 'Table' : '⬅';
}
function drawNumberToCanvas(number) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'black';
ctx.fillText(number, canvas.width / 2, canvas.height / 2, canvas.width);
const data = canvas.toDataURL('image/png');
const link = document.querySelector("link[rel*='icon']");
link.type = 'image/x-icon';
link.href = data;
}
function createNotification(text) {
// eslint-disable-next-line no-undef
new Noty({
type: 'info',
layout: 'topLeft',
timeout: '1500',
theme: 'metroui',
progressBar: false,
text,
}).show();
}
function createTextarea(text) {
const textArea = document.createElement('textarea');
// Place in top-left corner of screen regardless of scroll position.
textArea.style.position = 'fixed';
textArea.style.top = 0;
textArea.style.left = 0;
textArea.style.width = '2em';
textArea.style.height = '2em';
textArea.style.padding = 0;
// Clean up any borders.
textArea.style.border = 'none';
textArea.style.outline = 'none';
textArea.style.boxShadow = 'none';
// Avoid flash of white box if rendered for any reason.
textArea.style.background = 'transparent';
textArea.value = text;
document.body.appendChild(textArea);
return textArea;
}
/**
* This function is used to copy a string to clipboard
* @param {string} text
*/
function copyTextToClipboard(text) {
if (window.clipboardData && window.clipboardData.setData) {
// IE specific code path to prevent textarea being shown while dialog is visible.
return window.clipboardData.setData('Text', text);
} else if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
const textArea = createTextarea(text);
textArea.focus();
textArea.select();
try {
const status = document.execCommand('copy'); // Security exception may be thrown by some browsers.
if (status) {
createNotification('Copied text to clipboard');
}
return status;
} catch (ex) {
console.warn('Copy to clipboard failed.', ex);
return false;
} finally {
document.body.removeChild(textArea);
}
}
}
// #endregion
// #region Event Listeners
document.addEventListener('touchstart', e => {
if (document.querySelector('.mobile-input input') !== null) return;
if (e.target.tagName === 'BUTTON') return;
const input = document.createElement('input');
input.setAttribute('type', 'text');
mobileInputDiv.appendChild(input);
// For some reason, the focus is immediately lost unless there is a delay on setting the focus
setTimeout(() => {
input.focus();
}, 100);
});
body.onkeydown = function(e) {
if (!e.metaKey) {
e.preventDefault();
}
drawNumberToCanvas(e.keyCode);
// Main e.keyCode display
document.querySelector('.keycode-display').innerHTML = e.keyCode;
// Show the cards with all
const cards = document.querySelector('.cards');
cards.classList.add('active');
cards.classList.remove('hide');
document.querySelector('.text-display').classList.add('hide');
// Check if Key_Values is Unidentified then redirect to docs
let newKeyText = '';
if (e.key != null && e.key === 'Unidentified') {
newKeyText = '<a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values#Special_values" target="_blank" rel="noopener">Unidentified</a>';
} else if (e.key === ' ') {
newKeyText = `<span class="text-muted">${spaceDescription}</span>`;
} else {
newKeyText = e.key || '';
}
// Check if location is Unidentified then redirect to docs
let newLocationText = '';
let newLocationFriendlyText = '';
if (e.location == null) {
newLocationFriendlyText = 'Unknown';
} else if (!(e.location in keyLocations)) {
newLocationFriendlyText = '<a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/location" target="_blank" rel="noopener">Other</a>';
} else {
newLocationFriendlyText = keyLocations[e.location];
}
if (newLocationFriendlyText !== 'Unknown') {
newLocationText = `${e.location} <span class="text-muted">(${newLocationFriendlyText})</span>`;
} else {
newLocationText = newLocationFriendlyText;
}
// Check if code is Unidentified then redirect to docs
let newCodeText = '';
if (e.code != null && e.code === 'Unidentified') {
newCodeText = '<a href="https://w3c.github.io/uievents-code/#table-key-code-special" target="_blank" rel="noopener">Unidentified</a>';
} else {
newCodeText = e.code || '';
}
// Clear input if manually entered
const mobileInput = document.querySelector('.mobile-input input');
if (mobileInput !== null) {
mobileInput.value = '';
}
document.querySelector('.item-key .main-description').innerHTML = newKeyText;
document.querySelector('.item-location .main-description').innerHTML = newLocationText;
document.querySelector('.item-which .main-description').innerHTML = e.which || '';
document.querySelector('.item-code .main-description').innerHTML = newCodeText;
};
body.onkeyup = function(e) {
if(e.keyCode == '44') {
body.onkeydown(e);
}
}
const cardDivs = document.querySelectorAll('.card');
Array.from(cardDivs).forEach(card => {
card.addEventListener('click', onCardClick);
});
function onCardClick() {
const card = this;
let description = card.querySelector('.card-main .main-description').innerHTML;
description = description.replace(/<[^>]*>?/gm, '');
if (description === spaceDescription) {
description = ' ';
}
copyTextToClipboard(description);
}
// #endregion
// #region Theme Methods
function queryMediaTheme() {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
theme = e.matches ? 'dark' : 'light';
updateTheme();
});
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
theme = 'dark';
} else {
theme = 'light';
}
}
function toggleTheme() {
theme = (theme === 'light') ? 'dark' : 'light';
updateTheme();
}
function updateTheme() {
const html = document.querySelector("html");
const button = document.querySelector("#theme-button");
if (theme === 'light') {
html.classList.add('light-theme');
html.classList.remove('dark-theme');
button.innerHTML = 'Dark theme';
} else {
html.classList.add('dark-theme');
html.classList.remove('light-theme');
button.innerHTML = 'Light theme';
}
}
// #endregion
// #region Init Methods
queryMediaTheme();
updateTheme();
createTable();
drawNumberToCanvas('⌨️');
// #endregion
-44
View File
@@ -1,44 +0,0 @@
/**
* The name of the current cache
* @type {String}
*/
const CACHE_NAME = 'v6';
/**
* Files to cache
* @type {Array}
*/
const fileCache = [
'/',
'/index.html',
'/scripts.js',
'/style.css'
];
this.oninstall = event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(fileCache))
);
};
this.onfetch = event => {
event.respondWith(
caches.match(event.request)
.then(response => {
if (response) {
return response;
}
return fetch(event.request)
.then(res => {
const r = res.clone();
caches.open(CACHE_NAME)
.then(cache => {
cache.put(event.request, r);
});
return res; // Don't wait for the request to cache
});
})
);
};
-439
View File
@@ -1,439 +0,0 @@
/* Themes */
.light-theme {
--background: #f2f4f8;
--primary: #b9e9ff;
--primary-border: #a2e2ff;
--text: #424242;
--love-text: #d12026;
--muted-text: #ccc;
--context-text: #6597b2;
--button: #0091d4;
--card-background: #fff;
--card-hover: rgba(220, 233, 255, 0.48);
--table-separator: #dee2e6;
}
.dark-theme {
--background: #424242;
--primary: #5b60ff;
--primary-border: #4347b6;
--text: #f2f4f8;
--love-text: #00e4c6;
--context-text: #8effb1;
--button: var(--primary);
--card-background: #5f5f5f;
--card-hover: rgba(47, 47, 47, 0.76);
--table-separator: #828282;
}
/* Reset */
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
margin: 0;
font-family: 'Montserrat', 'sans-serif';
color: var(--text);
overflow: hidden;
background: var(--background);
}
.display {
text-align: center;
display: table;
height: 100%;
max-width: 1280px;
width: 100%;
margin: 0 auto;
}
.wrap {
display: table-cell;
vertical-align: middle;
}
p {
font-size: 100px; /* For lamers who don't support viewport sizing */
font-size: 40vmin;
text-align: center;
margin: 0;
}
p.text-display {
display: inline-block;
color: var(--text);
font-size: 20px;
text-decoration: none;
text-align: center;
margin: 20px auto;
padding: 15px 20px;
background: var(--card-background);
border-radius: 5px;
min-width: 24px;
font-size: 26px;
box-shadow: 0 14px 26px rgba(0, 0, 0, 0.04);
}
span.love {
display: block;
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
}
span.love a {
text-decoration: none;
color: var(--love-text);
}
.twitter-follow-toggle-button {
vertical-align: text-bottom;
}
.twitter-share-toggle-button {
vertical-align: text-bottom;
}
/*
Added New Card layout Css
*/
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
margin-bottom: 20px;
}
.card {
background: var(--card-background);
border-radius: 5px;
overflow: hidden;
margin: 10px;
flex: 1;
max-width: calc(25% - 20px);
box-shadow: 0 14px 26px rgba(0, 0, 0, 0.04);
transition: all 0.3s ease-out;
text-decoration: none;
border: 1px solid rgba(0, 0, 0, 0.11);
}
.item-location .card-main {
padding: 9.5px;
}
.item-location .main-description {
font-size: 23px;
}
.item-location .main-description span {
display: block;
}
.card:hover {
cursor: pointer;
transform: translateY(-5px) scale(1.005) translateZ(0);
box-shadow: 0 24px 36px rgba(0, 0, 0, 0.11),
0 24px 46px var(--card-hover);
}
.card-header {
text-align: center;
font-size: 12px;
font-weight: 600;
border-bottom: 1px solid var(--primary-border);
background-color: var(--primary);
padding: 5px 10px;
position: relative;
}
.more-info {
height: 1.2em;
width: 1.2em;
float: right;
}
.more-info::before {
content: '(?)';
color: var(--context-text);
display: inline-block;
}
.deprecated-link {
position: absolute;
top: 6px;
right: 12px;
color: var(--context-text);
font-size: 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.main-description {
font-size: 28px;
text-align: center;
min-height: 35px;
}
.text-muted {
font-size: 0.65em;
color: var(--muted-text);
}
.table {
width: 50%;
table-layout: fixed;
margin: auto;
margin-top: 5vh;
box-shadow: 0 14px 26px rgba(0, 0, 0, 0.04);
border-radius: 5px;
border-collapse: collapse;
}
.table-body {
display: block;
width: 100%;
overflow: auto;
height: 77vh;
background: var(--card-background);
}
.table thead tr {
display: block;
border-radius: 5px;
}
.table thead {
font-size: 12px;
font-weight: 600;
border-bottom: 1px solid var(--primary-border);
background-color: var(--primary);
}
.table th,
.table td {
padding: 0.3rem 1rem;
text-align: left;
min-width: 100px;
font-size: 1.2rem;
}
.table th {
padding: 0.5rem 1rem;
}
.table td {
border-bottom: 1px solid var(--table-separator);
}
.table tbody tr:hover {
background-color: rgba(0, 0, 0, 0.075);
}
.fixed-buttons {
position: absolute;
top: 15px;
right: 15px;
}
.fixed-buttons :nth-child(1) {
margin-right: 15px;
}
.toggle-button {
font: bold 16px arial;
color: var(--button);
border: 2px solid var(--button);
background: transparent;
border-radius: 5px;
padding: 5px 10px;
transition: all 0.3s ease-out;
cursor: pointer;
}
.toggle-button:hover {
transform: translateY(-2px) scale(1.005) translateZ(0);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.11),
0 6px 9px var(--card-hover);
}
.toggle-button:active {
transform: translateY(2px) scale(0.995) translateZ(0);
box-shadow: none;
}
.mobile-input input {
width: calc(100% - 20px);
height: 4rem;
margin: 10px;
font-size: 4rem;
border: 1px solid #dadada;
border-radius: 4px;
box-shadow: 0 14px 26px rgba(0, 0, 0, 0.04);
transition: all 0.3s ease-out;
}
.mobile-input input:focus {
outline: none;
transform: translateY(-5px) scale(1.005) translateZ(0);
box-shadow: 0 24px 36px rgba(0, 0, 0, 0.11),
0 24px 46px var(--card-hover);
}
@media (min-width: 601px) and (max-width: 980px) {
body {
overflow-y: auto;
}
.card {
flex: 45%;
max-width: 45%;
}
.display {
width: 80%;
}
.main-description {
min-height: 34px;
}
}
@media (max-width: 600px) {
body {
overflow-y: auto;
}
.card {
flex: 100%;
max-width: 100%;
}
.display {
width: 90%;
}
.table {
width: 100%;
margin-top: 4rem;
}
.table-body {
height: 60vh;
}
}
.hide {
display: none !important;
}
.active {
display: flex;
}
/* Carbon Ads */
#carbonads * {
margin: initial;
padding: initial;
}
#carbonads {
display: flex;
position: fixed;
top: 1rem;
left: 1rem;
font-size: 11px;
overflow: hidden;
max-width: 130px;
border-radius: 4px;
box-shadow: 0 0 1px hsla(0, 0%, 0%, .15);
}
#carbonads a {
text-decoration: none;
color: #111;
}
#carbonads a:hover {
color: #111;
}
#carbonads .carbon-img {
display: block;
line-height: 1;
max-width: 130px;
}
#carbonads .carbon-img img {
display: block;
margin: 0 auto;
width: 130px;
height: 100px;
}
#carbonads .carbon-text {
display: block;
padding: 8px 10px;
line-height: 1.35;
text-align: left;
background-color: hsl(0, 0%, 98%);
}
#carbonads .carbon-poweredby {
display: block;
padding: 10px;
font-size: 8px;
font-weight: 600;
line-height: 0;
letter-spacing: .5px;
text-transform: uppercase;
background: repeating-linear-gradient(-45deg,
transparent,
transparent 5px,
hsla(0, 0%, 0%, .025) 5px,
hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4);
background-color: hsl(0, 0%, 98%);
}
@media only screen and (min-width: 320px) and (max-width: 759px) {
#carbonads {
float: none;
position: relative;
margin: 4rem auto 0;
max-width: 330px;
}
#carbonads .carbon-wrap {
display: flex;
flex-direction: row;
}
#carbonads .carbon-img {
margin: 0;
}
#carbonads .carbon-text {
padding: 10px 10px 0 10px;
font-size: 12px;
}
#carbonads .carbon-poweredby {
position: absolute;
right: 0;
bottom: 0;
text-align: center;
border-radius: 0;
border-top-left-radius: 3px;
}
}