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

website: update example.

Browse Source
pull/471/head
jaywcjlove 1 year ago
parent 5b0cd1f66d
commit 7f389cebc4
1 changed files with 90 additions and 96 deletions
Show Stats Download Patch File Download Diff File

186
website/App.js
Unescape Escape View File

@ -1,4 +1,4 @@
import React, { Component } from 'react'; import React, { useEffect, useState } 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';
@ -10,18 +10,13 @@ import DocumentStr from '../README.md';
import hotkeys from '..'; import hotkeys from '..';
import pkg from '../package.json'; import pkg from '../package.json';
export default class App extends Component { export default function AppRoot() {
constructor() { const [keyCode, setKeyCode] = useState([]);
super(); const [keyStr, setKeyStr] = useState([]);
this.state = {
keyCode: [], useEffect(() => {
keyStr: [], document.addEventListener('keyup', onKeyUpEvent);
};
this.onKeyUpEvent = this.onKeyUpEvent.bind(this);
}
componentDidMount() {
document.addEventListener('keyup', this.onKeyUpEvent);
function pkeys(keys, key) { function pkeys(keys, key) {
if (keys.indexOf(key) === -1) keys.push(key); if (keys.indexOf(key) === -1) keys.push(key);
return keys; return keys;
@ -30,118 +25,117 @@ export default class App extends Component {
if (keysStr.indexOf(key) === -1) keysStr.push(key); if (keysStr.indexOf(key) === -1) keysStr.push(key);
return keysStr; return keysStr;
} }
hotkeys('*', (evn) => { hotkeys('*', (evn) => {
evn.preventDefault(); evn.preventDefault();
const keys = []; const keys = [];
const keyStr = []; const kStr = [];
if (hotkeys.shift) { if (hotkeys.shift) {
pkeys(keys, 16); pkeys(keys, 16);
pkeysStr(keyStr, 'shift'); pkeysStr(kStr, 'shift');
} }
if (hotkeys.ctrl) { if (hotkeys.ctrl) {
pkeys(keys, 17); pkeys(keys, 17);
pkeysStr(keyStr, 'ctrl'); pkeysStr(kStr, 'ctrl');
} }
if (hotkeys.alt) { if (hotkeys.alt) {
pkeys(keys, 18); pkeys(keys, 18);
pkeysStr(keyStr, 'alt'); pkeysStr(kStr, 'alt');
} }
if (hotkeys.control) { if (hotkeys.control) {
pkeys(keys, 17); pkeys(keys, 17);
pkeysStr(keyStr, 'control'); pkeysStr(kStr, 'control');
} }
if (hotkeys.command) { if (hotkeys.command) {
pkeys(keys, 91); pkeys(keys, 91);
pkeysStr(keyStr, 'command'); pkeysStr(kStr, 'command');
} }
keyStr.push(evn.keyCode); kStr.push(evn.keyCode);
if (keys.indexOf(evn.keyCode) === -1) keys.push(evn.keyCode); if (keys.indexOf(evn.keyCode) === -1) keys.push(evn.keyCode);
this.setState({ keyCode: keys, keyStr });
});
}
componentWillUnmount() { setKeyCode(keys);
document.removeEventListener('keyup', this.onKeyUpEvent); setKeyStr(kStr);
} });
onKeyUpEvent() { return () => {
this.setState({ keyCode: [], keyStr: [] }); document.removeEventListener('keyup', onKeyUpEvent);
} };
}, []);
onKeyBoardMouseDown(item) { let DocumentStrSource = DocumentStr;
if (item.keycode > -1) { if (DocumentStrSource) DocumentStrSource = DocumentStr.replace(/([\s\S]*)<!--dividing-->/, '');
this.setState({ keyStr: [item.keycode] }); const openVersionWebsite = (e) => {
if (e.target && e.target.value) {
window.location.href = e.target.value;
} }
} };
onKeyBoardMouseUp() { const onKeyUpEvent = () => {
this.setState({ keyStr: [] }); setKeyCode([]);
} setKeyStr([]);
};
openVersionWebsite(e) { const onKeyBoardMouseDown = (item) => {
if (e.target && e.target.value) { if (item.keycode > -1) {
window.location.href = e.target.value; setKeyStr([item.keycode]);
} }
} };
const onKeyBoardMouseUp = () => setKeyStr([]);
render() { return (
const { keyStr, keyCode } = this.state; <div>
let DocumentStrSource = DocumentStr; <div className={styles.tools}>
if (DocumentStrSource) DocumentStrSource = DocumentStr.replace(/([\s\S]*)<!--dividing-->/, ''); <select className={styles.version} onChange={openVersionWebsite}>
return ( <option value="https://jaywcjlove.github.io/hotkeys-js">
<div> v
<div className={styles.tools}> {pkg.version}
<select className={styles.version} onChange={this.openVersionWebsite.bind(this)}> </option>
<option value="https://jaywcjlove.github.io/hotkeys-js"> <option value="https://unpkg.com/hotkeys-js@3.4.3/doc/index.html">v3.4.3</option>
v <option value="https://unpkg.com/hotkeys-js@3.4.2/doc/index.html">v3.4.2</option>
{pkg.version} <option value="https://unpkg.com/hotkeys-js@2.0.10/doc/index.html">v2.0.10</option>
</option> </select>
<option value="https://unpkg.com/hotkeys-js@3.4.3/doc/index.html">v3.4.3</option> <dark-mode permanent />
<option value="https://unpkg.com/hotkeys-js@3.4.2/doc/index.html">v3.4.2</option> </div>
<option value="https://unpkg.com/hotkeys-js@2.0.10/doc/index.html">v2.0.10</option> {keyStr.length > -1 && (
</select> <div className={styles.keyCodeInfo}>
<dark-mode permanent /> {keyStr.map((item) => <span key={`${item}`}>{item}</span>)}
</div> </div>
{keyStr.length > -1 && ( )}
<div className={styles.keyCodeInfo}> <GithubCorner href="https://github.com/jaywcjlove/hotkeys-js" target="__blank" />
{keyStr.map((item) => <span key={`${item}`}>{item}</span>)} <div className={styles.header}>
</div> <div className={styles.title}>HotKeys.js</div>
)} <div className={styles.github}>
<GithubCorner href="https://github.com/jaywcjlove/hotkeys-js" target="__blank" /> <a href="https://www.npmjs.com/package/hotkeys-js">
<div className={styles.header}> <button type="button">On NPM</button>
<div className={styles.title}>HotKeys.js</div> </a>
<div className={styles.github}> <a href="https://github.com/jaywcjlove/hotkeys-js/">
<a href="https://www.npmjs.com/package/hotkeys-js"> <button type="button">Fork on Github</button>
<button type="button">On NPM</button> </a>
</a> <a href="https://github.com/jaywcjlove/hotkeys-js/">
<a href="https://github.com/jaywcjlove/hotkeys-js/"> <button type="button">Doc on Github</button>
<button type="button">Fork on Github</button> </a>
</a> <a href="https://jaywcjlove.gitee.io/hotkeys/">
<a href="https://github.com/jaywcjlove/hotkeys-js/"> <button type="button">Doc on Gitee</button>
<button type="button">Doc on Github</button> </a>
</a>
<a href="https://jaywcjlove.gitee.io/hotkeys/">
<button type="button">Doc on Gitee</button>
</a>
</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 <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>
style={{ top: -40 }}
onMouseDown={this.onKeyBoardMouseDown.bind(this)}
onMouseUp={this.onKeyBoardMouseUp.bind(this)}
keyCode={keyCode}
/>
<MarkdownPreview style={{ maxWidth: 995, margin: '0 auto' }} source={DocumentStrSource} />
<Footer name="Kenny Wong" href="http://jaywcjlove.github.io" year="2015-present">
<Github user="jaywcjlove" repo="hotkeys-js">
<Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="forks" />
<Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="stars" />
<Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="watchers" />
<Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="followers" />
</Github>
</Footer>
</div> </div>
); <KeyBoard
} style={{ top: -40 }}
onMouseDown={onKeyBoardMouseDown.bind(this)}
onMouseUp={onKeyBoardMouseUp}
keyCode={keyCode}
/>
<MarkdownPreview style={{ maxWidth: 995, margin: '0 auto' }} source={DocumentStrSource} />
<Footer name="Kenny Wong" href="http://jaywcjlove.github.io" year="2015-present">
<Github user="jaywcjlove" repo="hotkeys-js">
<Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="forks" />
<Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="stars" />
<Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="watchers" />
<Github.Social href="https://github.com/jaywcjlove/hotkeys-js" type="followers" />
</Github>
</Footer>
</div>
);
} }

Write Preview
Loading…
Cancel
Save