Skip to content

Commit

Permalink
complete custom shortcuts
Browse files Browse the repository at this point in the history
  • Loading branch information
mienaiyami committed Oct 27, 2022
1 parent 4a52501 commit ce025c5
Show file tree
Hide file tree
Showing 5 changed files with 59 additions and 21 deletions.
1 change: 0 additions & 1 deletion src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -280,7 +280,6 @@ const getDataFiles = () => {
window.fs.writeFileSync(shortcutsPath, JSON.stringify(shortcutSchema));
shortcutsInit.push(...shortcutSchema);
}
console.log(shortcutsInit);
const themes = [
{
name: "theme1",
Expand Down
1 change: 0 additions & 1 deletion src/Components/Reader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,6 @@ const Reader = () => {
shortcuts.forEach((e) => {
shortcutkey[e.command] = { key1: e.key1, key2: e.key2 };
});
console.log(shortcutkey);
const registerShortcuts = (e: KeyboardEvent) => {
// /&& document.activeElement!.tagName === "BODY"
if (window.app.isReaderOpen) {
Expand Down
1 change: 0 additions & 1 deletion src/Components/ReaderSideList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,6 @@ const ReaderSideList = ({
spellCheck={false}
placeholder="Type to Search"
// tabIndex={-1}
data-tooltip="Navigate To Page"
onChange={(e) => {
const val = e.target.value;
let filter = "";
Expand Down
73 changes: 55 additions & 18 deletions src/Components/Settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,49 @@ const Settings = (): ReactElement => {
}, 300);
}
}, [isSettingOpen]);

const reservedKeys = ["h", "Control", "Tab", "Shift", "Alt", "Escape"];
const ShortcutInput = ({ which, i }: { which: "key1" | "key2"; i: number }) => (
<input
type="text"
value={shortcuts[i][which] === " " ? "Space" : shortcuts[i][which]}
onKeyDown={(e) => {
e.stopPropagation();
}}
onKeyUp={(e) => {
e.preventDefault();
e.stopPropagation();
if (reservedKeys.includes(e.key)) {
console.warn(e.key + " is reserved key.");
e.currentTarget.focus();
return;
}
settingContRef.current?.focus();
if (e.key === "Backspace") {
console.log(`Deleting shortcut ${shortcuts[i].command}.${which}`);
setShortcuts((init) => {
init[i][which] = "";
return [...init];
});
return;
}
const dupIndex = shortcuts.findIndex((elem) => elem.key1 === e.key || elem.key2 === e.key);
if (dupIndex >= 0) {
console.warn(`${e.key} key already bind to "${shortcuts[dupIndex].name}"`);
window.dialog.warn({ message: `${e.key} key already bind to "${shortcuts[dupIndex].name}".` });
return;
}
console.log(`Setting shortcut ${shortcuts[i].command}.${which} to ${e.key}`);
setShortcuts((init) => {
init[i][which] = e.key;
return [...init];
});
}}
readOnly
spellCheck={false}
/>
);

return (
<div id="settings" data-state={isSettingOpen ? "open" : "closed"}>
<div className="clickClose" onClick={() => setSettingOpen(false)}></div>
Expand Down Expand Up @@ -344,7 +387,7 @@ const Settings = (): ReactElement => {
<li>
you can make custom theme by editing themes.json. Or click ctrl+shift+i, then from the
styles panel change colors element.style, then copy inside {`{}`}, then open
themes.json, go to the end and before ] add ",{`{name:name,main:your-copied-thing}`}"
themes.json, go to the end and before ] add ",{`{name:name,main:your-copied-thing}`}".
</li>
<li>you dont need to type whole word in search(e.g. for "One piece" type "op").</li>
<li>
Expand All @@ -359,11 +402,15 @@ const Settings = (): ReactElement => {
enabling "File Explorer Option" (Note that this only opens chapter containing images
and not Manga Folder).
</li>
<li>Zen Mode: hide ui and only show images</li>
<li>Zen Mode: hide ui and only show images.</li>
</ul>
</div>
<h1>Shortcut Keys</h1>
<div className="shortcutKey">
<p>
BackSpace to remove. Reserved keys {reservedKeys.join(", ")}. Changes apply on
refresh(click home icon, h(twice) or ctrl+r).
</p>
<table>
<tbody>
<tr>
Expand All @@ -374,22 +421,8 @@ const Settings = (): ReactElement => {
<tr key={e.command}>
<td>{e.name}</td>
<td>
{/* {e.key1} , {e.key2} */}
<input
type="text"
value={e.key1 === " " ? "Space" : e.key1}
onKeyUp={(e) => {
console.log(e.key);
}}
readOnly
spellCheck={false}
/>
<input
type="text"
value={e.key2 === " " ? "Space" : e.key2}
readOnly
spellCheck={false}
/>
<ShortcutInput which="key1" i={i} />
<ShortcutInput which="key2" i={i} />
</td>
</tr>
))}
Expand Down Expand Up @@ -429,6 +462,10 @@ const Settings = (): ReactElement => {
<td>New Window</td>
<td>ctrl+n</td>
</tr>
<tr>
<td>size</td>
<td>ctrl+scroll</td>
</tr>
<tr>
<td>Home</td>
<td>h</td>
Expand Down
4 changes: 4 additions & 0 deletions src/styles/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -685,6 +685,10 @@ body {
padding: 20px;
display: grid;
place-items: center;
p {
width: 100%;
padding-bottom: 10px;
}
table {
border-spacing: 0;
width: 100%;
Expand Down

0 comments on commit ce025c5

Please sign in to comment.