github-forks
/
hotkeys
mirror of https://github.com/jaywcjlove/hotkeys.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore: Optimize the document website code.

Browse Source
pull/186/head
jaywcjlove 5 years ago
parent d49bbf3735
commit 7927dba3a0
6 changed files with 13 additions and 360 deletions
Show Stats Download Patch File Download Diff File

2
README.md
Unescape Escape View File

@ -90,7 +90,7 @@ The following special keys can be used for shortcuts: backspace, tab, clear, ent
One global method is exposed, key which defines shortcuts when called directly. One global method is exposed, key which defines shortcuts when called directly.
``` ```js
hotkeys([keys:<String>], [option:[string|object|function]], [callback:<function>]) hotkeys([keys:<String>], [option:[string|object|function]], [callback:<function>])
``` ```

9
package-lock.json generated
Unescape Escape View File

@ -4297,6 +4297,15 @@
"integrity": "sha512-bVID5RwZcUuplnhfKrDV5u9Em9w1PVBY75E8ibP1Ze4CP5kQ64IQc4vv41MchZqDJuCmpoafNBjiB9xrJXF4mw==", "integrity": "sha512-bVID5RwZcUuplnhfKrDV5u9Em9w1PVBY75E8ibP1Ze4CP5kQ64IQc4vv41MchZqDJuCmpoafNBjiB9xrJXF4mw==",
"dev": true "dev": true
}, },
"@uiw/react-mac-keyboard": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/@uiw/react-mac-keyboard/-/react-mac-keyboard-1.0.4.tgz",
"integrity": "sha512-rIzij92eRb446i+iVfXWNno65fQZJw9g3T7yEkzI5asQlVqSNIbnZXNyMU2PfYvYBubJbAWFbIa6w1jZqKl9Eg==",
"dev": true,
"requires": {
"prop-types": "15.7.2"
}
},
"@uiw/react-markdown-preview": { "@uiw/react-markdown-preview": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/@uiw/react-markdown-preview/-/react-markdown-preview-1.0.3.tgz", "resolved": "https://registry.npmjs.org/@uiw/react-markdown-preview/-/react-markdown-preview-1.0.3.tgz",

1
package.json
Unescape Escape View File

@ -52,6 +52,7 @@
"@kkt/loader-less": "5.8.0", "@kkt/loader-less": "5.8.0",
"@kkt/loader-raw": "5.8.0", "@kkt/loader-raw": "5.8.0",
"@uiw/react-github-corners": "1.1.3", "@uiw/react-github-corners": "1.1.3",
"@uiw/react-mac-keyboard": "^1.0.4",
"@uiw/react-markdown-preview": "1.0.3", "@uiw/react-markdown-preview": "1.0.3",
"@uiw/react-shields": "1.1.0", "@uiw/react-shields": "1.1.0",
"@uiw/reset.css": "1.0.3", "@uiw/reset.css": "1.0.3",

3
website/App.js
Unescape Escape View File

@ -2,7 +2,7 @@ import React, { Component } from 'react';
import GithubCorner from '@uiw/react-github-corners'; import GithubCorner from '@uiw/react-github-corners';
import { Github } from '@uiw/react-shields'; import { Github } from '@uiw/react-shields';
import MarkdownPreview from '@uiw/react-markdown-preview'; import MarkdownPreview from '@uiw/react-markdown-preview';
import KeyBoard from './components/KeyBoard'; import KeyBoard from '@uiw/react-mac-keyboard';
import Footer from './components/Footer'; import Footer from './components/Footer';
import styles from './styles/index.module.less'; import styles from './styles/index.module.less';
import DocumentStr from '../README.md'; import DocumentStr from '../README.md';
@ -124,6 +124,7 @@ export default class App extends Component {
<div className={styles.info}>A robust Javascript library for capturing keyboard input and key combinations entered. It has no dependencies. Try to press your keyboard, The following button will highlight.</div> <div className={styles.info}>A robust Javascript library for capturing keyboard input and key combinations entered. It has no dependencies. Try to press your keyboard, The following button will highlight.</div>
</div> </div>
<KeyBoard <KeyBoard
style={{ top: -40 }}
onMouseDown={this.onKeyBoardMouseDown.bind(this)} onMouseDown={this.onKeyBoardMouseDown.bind(this)}
onMouseUp={this.onKeyBoardMouseUp.bind(this)} onMouseUp={this.onKeyBoardMouseUp.bind(this)}
keyCode={keyCode} keyCode={keyCode}

108
website/components/KeyBoard.js
Unescape Escape View File

@ -1,108 +0,0 @@
import React from 'react';
import classNames from 'classnames';
import styles from './KeyBoard.module.less';
const keyCode = [
{ keycode: 27, name: ['esc'] },
{ keycode: 112, name: ['F1'] },
{ keycode: 113, name: ['F2'] },
{ keycode: 114, name: ['F3'] },
{ keycode: 115, name: ['F4'] },
{ keycode: 116, name: ['F5'] },
{ keycode: 117, name: ['F6'] },
{ keycode: 118, name: ['F7'] },
{ keycode: 119, name: ['F8'] },
{ keycode: 120, name: ['F9'] },
{ keycode: 121, name: ['F10'] },
{ keycode: 122, name: ['F11'] },
{ keycode: 123, name: ['F12'] },
{ keycode: -1, name: ['〇'] },
{ keycode: 192, name: ['~', '`'] },
{ keycode: 49, name: ['!', '1'] },
{ keycode: 50, name: ['@', '2'] },
{ keycode: 51, name: ['#', '3'] },
{ keycode: 52, name: ['$', '4'] },
{ keycode: 53, name: ['%', '5'] },
{ keycode: 54, name: ['^', '6'] },
{ keycode: 55, name: ['&', '7'] },
{ keycode: 56, name: ['*', '8'] },
{ keycode: 57, name: ['(', '9'] },
{ keycode: 48, name: [')', '0'] },
{ keycode: 189, name: ['＿', '-'] },
{ keycode: 187, name: ['＋', ': '] },
{ keycode: 8, name: ['delete'] },
{ keycode: 9, name: ['tab'] },
{ keycode: 81, name: ['Q'] },
{ keycode: 87, name: ['W'] },
{ keycode: 69, name: ['E'] },
{ keycode: 82, name: ['R'] },
{ keycode: 84, name: ['T'] },
{ keycode: 89, name: ['Y'] },
{ keycode: 85, name: ['U'] },
{ keycode: 73, name: ['I'] },
{ keycode: 79, name: ['O'] },
{ keycode: 80, name: ['P'] },
{ keycode: 219, name: ['{', '['] },
{ keycode: 221, name: ['}', ']'] },
{ keycode: 220, name: ['|', '\\'] },
{ keycode: 20, name: ['', 'CapsLock'] },
{ keycode: 65, name: ['A'] },
{ keycode: 83, name: ['S'] },
{ keycode: 68, name: ['D'] },
{ keycode: 70, name: ['F'] },
{ keycode: 71, name: ['G'] },
{ keycode: 72, name: ['H'] },
{ keycode: 74, name: ['J'] },
{ keycode: 75, name: ['K'] },
{ keycode: 76, name: ['L'] },
{ keycode: 186, name: [':', ';'] },
{ keycode: 222, name: ['"', '\''] },
{ keycode: 13, name: ['enter', 'return'] },
{ keycode: 16, name: ['⇧'] },
{ keycode: 90, name: ['Z'] },
{ keycode: 88, name: ['X'] },
{ keycode: 67, name: ['C'] },
{ keycode: 86, name: ['V'] },
{ keycode: 66, name: ['B'] },
{ keycode: 78, name: ['N'] },
{ keycode: 77, name: ['M'] },
{ keycode: 188, name: ['<', ','] },
{ keycode: 190, name: ['>', '.'] },
{ keycode: 191, name: ['?', '/'] },
{ keycode: 16, name: ['⇧'] },
{ keycode: -1, name: ['fn'] },
{ keycode: 17, name: ['control'] },
{ keycode: 18, name: ['alt', 'option'] },
{ keycode: 91, name: ['command'] },
{ keycode: 32, name: [''] },
{ keycode: 91, name: ['command'] },
{ keycode: 18, name: ['alt', 'option'] },
{ keycode: 37, name: ['◀'] },
{ keycode: 38, name: ['▲'] },
{ keycode: 39, name: ['▶'] },
{ keycode: 40, name: ['▼'] },
];
export default function KeyBoard({ keyCode: keyCodeNum, onMouseDown, onMouseUp }) {
return (
<div className={styles.keyboard}>
<ul>
{keyCode.map((item, idx) => {
const name = item.name.map((_item, _idx) => <span key={`${_idx}`}>{_item}</span>);
return (
<li
key={idx}
onMouseDown={() => onMouseDown(item)}
onMouseUp={() => onMouseUp(item)}
className={classNames({ pressed: keyCodeNum.indexOf(item.keycode) > -1 })}
data-key={item.keycode}
>
{name}
</li>
);
})}
</ul>
</div>
);
}

250
website/components/KeyBoard.module.less
Unescape Escape View File

@ -1,250 +0,0 @@
.keyboard {
height: 394px;
border-radius: 10px;
border: 1px solid #C9C9C9;
background: #F2F2F2;
box-shadow: 2px 0px 2px #E2E2E2 inset,-2px 2px 3px #E2E2E2 inset,1px -0px 0px #C1C1C1 inset,0px -2px 3px #C1C1C1 inset;
user-select: none;
position: relative;
top: -40px;
width: 995px;
margin: 0 auto;
ul {
width: 992px;
margin-top: 9px;
padding-left: 11px;
position: relative;
float: left;
}
li {
width: 62px;
height: 62px;
float: left;
margin-right: 5px;
margin-bottom: 5px;
background: #151515;
color: rgb(200,200,200);
text-align: center;
line-height: 62px;
font-size: 12px;
border-radius: 8px;
border: 1px solid #3A3A3A;
box-shadow: 1px 0px 0px rgb(0,0,0),0px 1px 0px rgb(0,0,0),-1px 0px 0px rgb(0,0,0),0px -1px 0px rgb(0,0,0);
transition: all .4s ease-in;
user-select: none;
cursor: pointer;
position: relative;
&:active, &:global(.pressed) {
color:#52F800;
background-color: #100068;
border: 1px solid #332376;
transition: 1ms linear;
}
&:nth-child(1) {
width: 99px;
height: 28px;
line-height: 28px;
text-indent: 1em;
text-align: left;
}
&:nth-child(2),
&:nth-child(3),
&:nth-child(4),
&:nth-child(5),
&:nth-child(6),
&:nth-child(7),
&:nth-child(8),
&:nth-child(9),
&:nth-child(10),
&:nth-child(11),
&:nth-child(12),
&:nth-child(13),
&:nth-child(14) {
width: 60px;
height: 28px;
line-height: 28px;
}
&:nth-child(15),
&:nth-child(16),
&:nth-child(17),
&:nth-child(18),
&:nth-child(19),
&:nth-child(20),
&:nth-child(21),
&:nth-child(22),
&:nth-child(23),
&:nth-child(24),
&:nth-child(25),
&:nth-child(26),
&:nth-child(27),
&:nth-child(40),
&:nth-child(41),
&:nth-child(42),
&:nth-child(53),
&:nth-child(54),
&:nth-child(64),
&:nth-child(65),
&:nth-child(66) {
padding: 7px 0;
height: 48px;
}
}
}
.keyboard li:nth-child(15) span,
.keyboard li:nth-child(16) span,
.keyboard li:nth-child(17) span,
.keyboard li:nth-child(18) span,
.keyboard li:nth-child(19) span,
.keyboard li:nth-child(20) span,
.keyboard li:nth-child(21) span,
.keyboard li:nth-child(22) span,
.keyboard li:nth-child(23) span,
.keyboard li:nth-child(24) span,
.keyboard li:nth-child(25) span,
.keyboard li:nth-child(26) span,
.keyboard li:nth-child(27) span,
.keyboard li:nth-child(40) span,
.keyboard li:nth-child(41) span,
.keyboard li:nth-child(42) span,
.keyboard li:nth-child(53) span,
.keyboard li:nth-child(54) span,
.keyboard li:nth-child(64) span,
.keyboard li:nth-child(65) span,
.keyboard li:nth-child(66) span {
line-height: 23px;
height: 23px;
width: 100%;
float: left;
font-size:14px;
}
.keyboard li:nth-child(28) span,
.keyboard li:nth-child(55) span,
.keyboard li:nth-child(67) span {
line-height: 14px;
margin-top: 43px;
float: right;
margin-right: 8px;
}
//字母键
.keyboard li:nth-child(30),
.keyboard li:nth-child(31),
.keyboard li:nth-child(32),
.keyboard li:nth-child(33),
.keyboard li:nth-child(34),
.keyboard li:nth-child(35),
.keyboard li:nth-child(36),
.keyboard li:nth-child(37),
.keyboard li:nth-child(38),
.keyboard li:nth-child(39),
.keyboard li:nth-child(44),
.keyboard li:nth-child(45),
.keyboard li:nth-child(46),
.keyboard li:nth-child(47),
.keyboard li:nth-child(48),
.keyboard li:nth-child(49),
.keyboard li:nth-child(50),
.keyboard li:nth-child(51),
.keyboard li:nth-child(52),
.keyboard li:nth-child(57),
.keyboard li:nth-child(58),
.keyboard li:nth-child(59),
.keyboard li:nth-child(60),
.keyboard li:nth-child(61),
.keyboard li:nth-child(62),
.keyboard li:nth-child(63) {
font-size: 18px;
line-height: 64px;
}
.keyboard li:nth-child(29) span,
.keyboard li:nth-child(43) span,
.keyboard li:nth-child(56) span,
.keyboard li:nth-child(68) span,
.keyboard li:nth-child(69) span,
.keyboard li:nth-child(70) span,
.keyboard li:nth-child(71) span,
.keyboard li:nth-child(73) span,
.keyboard li:nth-child(74) span {
line-height: 14px;
margin-top: 43px;
text-indent: 5px;
float: left;
}
.keyboard li:nth-child(28),
.keyboard li:nth-child(29) {
width: 73px;
}
.keyboard li:nth-child(43),
.keyboard li:nth-child(55) {
width: 102px;
}
.keyboard {
li:nth-child(43) {
&:active {
span:first-child {
background:#52f800;
}
}
span:first-child {
position: absolute;
top: -36px;
left: 5px;
width: 6px;
height: 6px;
background: #fff;
border-radius: 3px;
}
}
}
.keyboard li:nth-child(55) span:first-child,
.keyboard li:nth-child(70) span:first-child {
position: absolute;
right: 0px;
top: -37px;
font-size: 12px;
line-height: 12px;
}
.keyboard li:nth-child(70) span:first-child {
left: 0px;
text-align: left;
}
.keyboard li:nth-child(74) span:first-child {
position: absolute;
left: 0;
top: -37px;
font-size: 12px;
line-height: 12px;
}
.keyboard li:nth-child(56) {
width: 136px;
}
.keyboard li:nth-child(67) {
width: 137px;
}
.keyboard li:nth-child(71),
.keyboard li:nth-child(73) {
width: 70px;
}
.keyboard li:nth-child(72) {
width: 333px;
}
.keyboard li:nth-child(76),
.keyboard li:nth-child(78) {
height: 29px;
line-height: 29px;
}
.keyboard li:nth-child(76) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.keyboard li:nth-child(78) {
border-top-left-radius: 0;
border-top-right-radius: 0;
position: absolute;
bottom: 0;
right: 84px;
}
Write Preview
Loading…
Cancel
Save