From c530e63e1dde7a5d9ad57ae9ba8b8043a2d5df72 Mon Sep 17 00:00:00 2001 From: Artem Vasylenko Date: Fri, 21 Jul 2023 10:04:55 +0300 Subject: [PATCH 01/30] Keyboard - first steps --- src/components/Keyboard/Keyboard.jsx | 4380 +++++++++++++++++++ src/components/Keyboard/Keyboard.module.css | 0 src/components/Keyboard/index.js | 1 + src/components/index.js | 2 + src/pages/index.jsx | 6 +- 5 files changed, 4387 insertions(+), 2 deletions(-) create mode 100644 src/components/Keyboard/Keyboard.jsx create mode 100644 src/components/Keyboard/Keyboard.module.css create mode 100644 src/components/Keyboard/index.js diff --git a/src/components/Keyboard/Keyboard.jsx b/src/components/Keyboard/Keyboard.jsx new file mode 100644 index 000000000..78441d663 --- /dev/null +++ b/src/components/Keyboard/Keyboard.jsx @@ -0,0 +1,4380 @@ +import React from 'react' +import styles from "./Keyboard.module.css"; + +export default function Keyboard() { + + function KeyText({ fill, symbolX, symbolY, children }) { + return ( + + + {children} + + + ) + } + + function Key ({ base, alt, shift, altShift, keyX, keyY }) { + return ( + + + {base} + {alt} + {shift} + {altShift} + + ) + } + const keys = "qwertyuiop[]"; + const alt = "qwertyuiop[]"; + const shift = "QWERTYUIOP{}"; + const altShift = "QWERTYUIOP{}"; + +return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + backspace + + + + + + + + + + tab + + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + + + caps lock + + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + enter + + + + + + + + + + shift + + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + shift + + + + + + + + + + ctrl + + + + + + + + alt + + + + + + + + + + + + alt + + + + + + + + ctrl + + + + + + + + + + + + + + + + + + + + + + + + + + caps lock + + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + enter + + + + + + + + + + + 0 + + + + + + + + + + + 1 + + + + + + + + 2 + + + + + + + + 3 + + + + + + + + 4 + + + + + + + + 5 + + + + + + + + 6 + + + + + + + + 7 + + + + + + + + 8 + + + + + + + + 9 + + + + + + + + + + + + + +) +} diff --git a/src/components/Keyboard/Keyboard.module.css b/src/components/Keyboard/Keyboard.module.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/Keyboard/index.js b/src/components/Keyboard/index.js new file mode 100644 index 000000000..c6b55c3e3 --- /dev/null +++ b/src/components/Keyboard/index.js @@ -0,0 +1 @@ +export { default as Keyboard } from './Keyboard'; diff --git a/src/components/index.js b/src/components/index.js index 9b1a55e53..fe6820908 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,6 +1,7 @@ import { Banner, Carousel, Features } from './homepage'; import { CustomAfterSection, CustomBeforeSection } from './sections'; import { IPA } from './IPA'; +import { Keyboard } from './Keyboard'; export { Banner, @@ -9,4 +10,5 @@ export { CustomBeforeSection, Features, IPA, + Keyboard, }; diff --git a/src/pages/index.jsx b/src/pages/index.jsx index f57885894..7fd41a0fa 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -2,7 +2,7 @@ import React from 'react'; import Link from '@docusaurus/Link'; import Layout from '@theme/Layout'; import {translate} from "@docusaurus/Translate"; -import {Banner, Features, Carousel} from "../components"; +import {Banner, Features, Carousel, Keyboard } from "../components"; import MovieIcon from '@site/static/img/icons/movie.svg'; import styles from './index.module.css'; @@ -72,6 +72,7 @@ export default function HomePage() { })} /> + } /> + - + ); } From 5661609d8b6381e73f56aa0f2e3279caba8cfec8 Mon Sep 17 00:00:00 2001 From: Artem Vasylenko Date: Fri, 21 Jul 2023 16:02:35 +0300 Subject: [PATCH 02/30] formula for x,y --- src/components/Keyboard/Keyboard.jsx | 87 +++++++++++++++------------- 1 file changed, 48 insertions(+), 39 deletions(-) diff --git a/src/components/Keyboard/Keyboard.jsx b/src/components/Keyboard/Keyboard.jsx index 78441d663..63f22c6d5 100644 --- a/src/components/Keyboard/Keyboard.jsx +++ b/src/components/Keyboard/Keyboard.jsx @@ -1,46 +1,52 @@ import React from 'react' import styles from "./Keyboard.module.css"; -export default function Keyboard() { - function KeyText({ fill, symbolX, symbolY, children }) { - return ( - - - {children} - - - ) - } - function Key ({ base, alt, shift, altShift, keyX, keyY }) { - return ( - - - {base} - {alt} - {shift} - {altShift} - - ) - } - const keys = "qwertyuiop[]"; +function KeyText({ color, alt, shift, children }) { + const x = alt ? 36.734 : 16.734; + const y = shift ? 43.267 : 63.267; + + return ( + + + {children} + + + ) +} + +function Key ({ base, alt, shift, altShift, keyX, keyY }) { + + return ( + + + {base} + {alt} + {shift} + {altShift} + + ) +} + +export default function Keyboard() { + + const base = "qwertyuiop"; const alt = "qwertyuiop[]"; const shift = "QWERTYUIOP{}"; const altShift = "QWERTYUIOP{}"; @@ -72,7 +78,10 @@ return ( > - + + + + From 607349bb7c78546d582ba6f48fa1a16f328e08f1 Mon Sep 17 00:00:00 2001 From: Yaroslav Serhieiev Date: Fri, 21 Jul 2023 16:28:48 +0300 Subject: [PATCH 03/30] fix: rendering --- src/components/Keyboard/Keyboard.jsx | 8531 +++++++++++++------------- 1 file changed, 4262 insertions(+), 4269 deletions(-) diff --git a/src/components/Keyboard/Keyboard.jsx b/src/components/Keyboard/Keyboard.jsx index 63f22c6d5..333bc05e7 100644 --- a/src/components/Keyboard/Keyboard.jsx +++ b/src/components/Keyboard/Keyboard.jsx @@ -1,4389 +1,4382 @@ import React from 'react' import styles from "./Keyboard.module.css"; +function KeyText({ color, x, y, alt, shift, children }) { + const tx = x + 10 + (alt ? 20 : 0); + const ty = y + 12 + (shift ? 0 : 20); - -function KeyText({ color, alt, shift, children }) { - const x = alt ? 36.734 : 16.734; - const y = shift ? 43.267 : 63.267; - - return ( - - - {children} - - - ) + return ( + + {children} + + ) } -function Key ({ base, alt, shift, altShift, keyX, keyY }) { - - return ( - - - {base} - {alt} - {shift} - {altShift} - - ) +function Key({ base, alt, shift, altShift, x, y }) { + return ( + + + {base} + {alt} + {shift} + {altShift} + + ) } export default function Keyboard() { - - const base = "qwertyuiop"; - const alt = "qwertyuiop[]"; - const shift = "QWERTYUIOP{}"; - const altShift = "QWERTYUIOP{}"; + const base = "qwertyuiop"; + const alt = "śwertyuiop[]"; + const shift = "QWERTYUIOP{}"; + const altShift = "ŚWERTYUIOP{}"; -return ( + return ( <> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - + + + + + + + + + + + + + + + + + + + + + - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + backspace + + + - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - + + + + + tab + + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - + + + + + caps lock + + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + enter + + + - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - backspace - - - - - - - - - - tab - - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - - - caps lock - - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - enter - - - - - - - - - - shift - - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - shift - - - - - - - - - - ctrl - - - - - - - - alt - - - - - - - - - - - - alt - - - - - - - - ctrl - - + + + + + shift + + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + shift + + + - - - + + + + ctrl + + + + + + + + alt + + + + + + + + + + + + alt + + + + + + + + ctrl + + + + + + + + + + - - - + + + + + + + - - - - - - - - - - - - - caps lock - - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - + + + + + caps lock + + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + ◌ + + + + + + + + enter + + + + + - - - - ◌ - - - - - ◌ - - - - - ◌ - - + - - ◌ + + 0 - - - - ◌ - - - - - ◌ - - - - - ◌ - - + + + + - - ◌ + + 1 - - - - ◌ - - - - - ◌ - - - - - ◌ - - + - - ◌ + + 2 - - - - ◌ - - - - - ◌ - - - - - ◌ - - + - - ◌ + + 3 - - - - ◌ - - - - - ◌ - - - - - ◌ - - + - - ◌ + + 4 - - - - ◌ - - - - - ◌ - - - - - ◌ - - + - - ◌ + + 5 - - - - ◌ - - - - - ◌ - - - - - ◌ - - + - - ◌ + + 6 - - - - ◌ - - - - - ◌ - - - - - ◌ - - + - - ◌ + + 7 - - - - ◌ - - - - - ◌ - - - - - ◌ - - + - - ◌ + + 8 - + - - enter + + 9 - - - - - - 0 - - - - - - - - - - - 1 - - - - - - - - 2 - - - - - - - - 3 - - - - - - - - 4 - - - - - - - - 5 - - - - - - - - 6 - - - - - - - - 7 - - - - - - - - 8 - - - - - - - - 9 - - - - - - - - - - - + + + + + + -) + ) } From 605ae33b6f5d47f76b363c0883c6ef98161b81e1 Mon Sep 17 00:00:00 2001 From: Artem Vasylenko Date: Fri, 21 Jul 2023 19:14:55 +0300 Subject: [PATCH 04/30] First row --- docs/learn/orthography.mdx | 2 +- docs/resources/index.md | 2 +- .../resources/{keyboards.md => keyboards.mdx} | 4 ++ src/components/Keyboard/Keyboard.jsx | 44 +++++++++++++++++++ src/pages/index.jsx | 3 +- 5 files changed, 51 insertions(+), 4 deletions(-) rename docs/resources/{keyboards.md => keyboards.mdx} (92%) diff --git a/docs/learn/orthography.mdx b/docs/learn/orthography.mdx index ad75e6791..87986c462 100644 --- a/docs/learn/orthography.mdx +++ b/docs/learn/orthography.mdx @@ -142,7 +142,7 @@ To summarise, there are several possibilities for writing the same word. The gen [1]: #representation-of-problematic-characters -[2]: ../resources/keyboards.md +[2]: ../resources/keyboards.mdx [3]: https://web.archive.org/web/20230201091637/http://grzegorz.jagodzinski.prv.pl/gram/en/ipa.html diff --git a/docs/resources/index.md b/docs/resources/index.md index 91979e2f4..b6836f2d1 100644 --- a/docs/resources/index.md +++ b/docs/resources/index.md @@ -154,7 +154,7 @@ Here are some websites dedicated to the Interslavic language and culture: [17]: https://www.patro.cz/interslavic-zonal-constructed-language/ -[18]: ./keyboards.md +[18]: ./keyboards.mdx [19]: https://interslavic-dictionary.com/ diff --git a/docs/resources/keyboards.md b/docs/resources/keyboards.mdx similarity index 92% rename from docs/resources/keyboards.md rename to docs/resources/keyboards.mdx index cdca9f9b0..baf477e3d 100644 --- a/docs/resources/keyboards.md +++ b/docs/resources/keyboards.mdx @@ -1,3 +1,5 @@ +import { Keyboard } from '@site/src/components'; + # Keyboards ### Windows \{#windows} @@ -32,6 +34,8 @@ For the **Interslavic Cyrillic** alphabet: - Serbian (exempted, without "Ы") + + [1]: http://tyflonet.com/siciliano/klaviatury [2]: http://usachov.eu/g diff --git a/src/components/Keyboard/Keyboard.jsx b/src/components/Keyboard/Keyboard.jsx index 333bc05e7..b518366c0 100644 --- a/src/components/Keyboard/Keyboard.jsx +++ b/src/components/Keyboard/Keyboard.jsx @@ -39,6 +39,39 @@ function Key({ base, alt, shift, altShift, x, y }) { ) } +function ServiceKeyText({ x, y, children }) { + const tx = x + 17.297; + const ty = y + 23.918; + + return ( + + {children} + + ) +} + +function ServiceKey({ base, x, y }) { + return ( + + + {base} + + ) +} + export default function Keyboard() { const base = "qwertyuiop"; const alt = "śwertyuiop[]"; @@ -76,6 +109,17 @@ export default function Keyboard() { + + + + + + + + + + + diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 7fd41a0fa..fdce6d4a3 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -2,7 +2,7 @@ import React from 'react'; import Link from '@docusaurus/Link'; import Layout from '@theme/Layout'; import {translate} from "@docusaurus/Translate"; -import {Banner, Features, Carousel, Keyboard } from "../components"; +import {Banner, Features, Carousel } from "../components"; import MovieIcon from '@site/static/img/icons/movie.svg'; import styles from './index.module.css'; @@ -86,7 +86,6 @@ export default function HomePage() { } /> - ); From 4cb4d8982afa2180cb194b1604a9625096bd9293 Mon Sep 17 00:00:00 2001 From: Artem Vasylenko Date: Mon, 24 Jul 2023 19:11:48 +0300 Subject: [PATCH 05/30] keyboard view --- src/components/Keyboard/Keyboard.jsx | 4359 +------------------------- 1 file changed, 47 insertions(+), 4312 deletions(-) diff --git a/src/components/Keyboard/Keyboard.jsx b/src/components/Keyboard/Keyboard.jsx index b518366c0..82f8851f1 100644 --- a/src/components/Keyboard/Keyboard.jsx +++ b/src/components/Keyboard/Keyboard.jsx @@ -39,9 +39,9 @@ function Key({ base, alt, shift, altShift, x, y }) { ) } -function ServiceKeyText({ x, y, children }) { - const tx = x + 17.297; - const ty = y + 23.918; +function ServiceKeyText({ x, y, children, correctionPointX = 17.297, correctionPointY = 23.918 }) { + const tx = x + correctionPointX; + const ty = y + correctionPointY; return ( - {base} + {base} ) } export default function Keyboard() { - const base = "qwertyuiop"; - const alt = "śwertyuiop[]"; - const shift = "QWERTYUIOP{}"; - const altShift = "ŚWERTYUIOP{}"; + const base = "`1234567890-=qwertyuiop[]\\asdfghjkl;'zxcvbnm,./"; + const alt = ""; + const shift = "~!@#$%^&*()_+QWERTYUIOP{}|ASDFGHJKL:\"ZXCVBNM<>?"; + const altShift = ""; + + function keyList(startX, y, startNumber, endNumber) { + let x = startX; + const keyRow = []; + + for (let i = startNumber; i <= endNumber; i++) { + keyRow.push( + + ) + x += 48; + } + return keyRow; + } + const firstRow = keyList(9.5, 28.5, 0, 12); + const secondRow = keyList(91.5, 76.5, 13, 25); + const thidRow = keyList(105.5, 126.5, 26, 36); + const fouthRow = keyList(129.5, 174.5, 37, 46); + return ( <> @@ -105,4308 +123,25 @@ export default function Keyboard() { > - - - - - - - - - - - - - + {firstRow} - - - - - - - - - - - - - - - - - - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - backspace - - - - - - - - - - tab - - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - - - caps lock - - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - enter - - - - - - - - - - shift - - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - shift - - - - - - - - - - ctrl - - - - - - - - alt - - - - - - - - - - - - alt - - - - - - - - ctrl - - - - - - - - - - - - - - - - - - - - - - - - - - caps lock - - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - ◌ - - - - - - - - enter - - - - - - - - - - - 0 - - - - - - - - - - - 1 - - - - - - - - 2 - - - - - - - - 3 - - - - - - - - 4 - - - - - - - - 5 - - - - - - - - 6 - - - - - - - - 7 - - - - - - - - 8 - - - - - - - - 9 - - + + {secondRow} + + {thidRow} + + + {fouthRow} + + + + + + + + + + From cffa98fbc0c4f79686a98aa4bba3db3d8f7516c7 Mon Sep 17 00:00:00 2001 From: Yaroslav Serhieiev Date: Tue, 25 Jul 2023 09:40:41 +0300 Subject: [PATCH 06/30] small review --- src/components/Keyboard/Keyboard.jsx | 7 ++++--- src/components/Keyboard/Keyboard.module.css | 3 +++ 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/Keyboard/Keyboard.jsx b/src/components/Keyboard/Keyboard.jsx index 82f8851f1..5317eb598 100644 --- a/src/components/Keyboard/Keyboard.jsx +++ b/src/components/Keyboard/Keyboard.jsx @@ -74,9 +74,9 @@ function ServiceKey({ base, x, y, width = 75, height = 41, correctionPointY }) { export default function Keyboard() { const base = "`1234567890-=qwertyuiop[]\\asdfghjkl;'zxcvbnm,./"; - const alt = ""; + const alt = "ü¹²³⁴‰¶↑↓←→—≠śęěŕťùųąȯòėřṙåšďđğḥůłĺľăžźčćňńżŀèı"; const shift = "~!@#$%^&*()_+QWERTYUIOP{}|ASDFGHJKL:\"ZXCVBNM<>?"; - const altShift = ""; + const altShift = ['Ü', '÷', '¹⁄₂', '¹⁄₃', '¹⁄₄', 'fi', 'ˆ', '¿', '°', '〈', '°', ...'–±ŚĘĚŔŤÙŲĄȮÒĖŘṘÅŠĎĐĞḤŮŁĹĽĂŽŹČĆŇŃŻĿÈI'.split('')]; function keyList(startX, y, startNumber, endNumber) { let x = startX; @@ -90,12 +90,12 @@ export default function Keyboard() { } return keyRow; } + const firstRow = keyList(9.5, 28.5, 0, 12); const secondRow = keyList(91.5, 76.5, 13, 25); const thidRow = keyList(105.5, 126.5, 26, 36); const fouthRow = keyList(129.5, 174.5, 37, 46); - return ( <> diff --git a/src/components/Keyboard/Keyboard.module.css b/src/components/Keyboard/Keyboard.module.css index e69de29bb..3286cfbf1 100644 --- a/src/components/Keyboard/Keyboard.module.css +++ b/src/components/Keyboard/Keyboard.module.css @@ -0,0 +1,3 @@ +.keyboard { + font-family: sans-serif; +} From fe5cc7ad3692c62ea5e7f77e852174b730eb7116 Mon Sep 17 00:00:00 2001 From: Artem Vasylenko Date: Tue, 25 Jul 2023 16:37:19 +0300 Subject: [PATCH 07/30] hovering over the keys --- src/components/Keyboard/Keyboard.jsx | 57 +++++++++++++++------ src/components/Keyboard/Keyboard.module.css | 2 +- 2 files changed, 42 insertions(+), 17 deletions(-) diff --git a/src/components/Keyboard/Keyboard.jsx b/src/components/Keyboard/Keyboard.jsx index 5317eb598..0dfa18af3 100644 --- a/src/components/Keyboard/Keyboard.jsx +++ b/src/components/Keyboard/Keyboard.jsx @@ -1,7 +1,8 @@ -import React from 'react' +import React, { useState } from 'react' import styles from "./Keyboard.module.css"; -function KeyText({ color, x, y, alt, shift, children }) { +function KeyText({ color, x, y, alt, shift, children, handleMouseOver, handleMouseOut }) { + const tx = x + 10 + (alt ? 20 : 0); const ty = y + 12 + (shift ? 0 : 20); @@ -13,13 +14,22 @@ function KeyText({ color, x, y, alt, shift, children }) { dominantBaseline="middle" textAnchor="middle" x={tx} - y={ty}> + y={ty} + onMouseOver={handleMouseOver} + onMouseOut={handleMouseOut}> {children} ) } function Key({ base, alt, shift, altShift, x, y }) { + const [isHovered, setIsHovered] = useState(false); + const handleMouseOver = () => { + setIsHovered(true); + } + const handleMouseOut = () => { + setIsHovered(false); + } return ( - {base} - {alt} - {shift} - {altShift} - + {base} + {alt} + {shift} + {altShift} + ) } -function ServiceKeyText({ x, y, children, correctionPointX = 17.297, correctionPointY = 23.918 }) { +function ServiceKeyText({ x, y, children, correctionPointX = 17.297, correctionPointY = 23.918, handleMouseOver, handleMouseOut }) { const tx = x + correctionPointX; const ty = y + correctionPointY; @@ -49,13 +62,22 @@ function ServiceKeyText({ x, y, children, correctionPointX = 17.297, correctionP fontSize={10} fontWeight={500} x={tx} - y={ty}> + y={ty} + onMouseOver={handleMouseOver} + onMouseOut={handleMouseOut}> {children} ) } function ServiceKey({ base, x, y, width = 75, height = 41, correctionPointY }) { + const [isHovered, setIsHovered] = useState(false); + const handleMouseOver = () => { + setIsHovered(true); + } + const handleMouseOut = () => { + setIsHovered(false); + } return ( - {base} + {base} ) } @@ -84,7 +109,7 @@ export default function Keyboard() { for (let i = startNumber; i <= endNumber; i++) { keyRow.push( - + ) x += 48; } diff --git a/src/components/Keyboard/Keyboard.module.css b/src/components/Keyboard/Keyboard.module.css index 3286cfbf1..ad8aac6ff 100644 --- a/src/components/Keyboard/Keyboard.module.css +++ b/src/components/Keyboard/Keyboard.module.css @@ -1,3 +1,3 @@ .keyboard { font-family: sans-serif; -} +} \ No newline at end of file From d53e47b03b2ab9088d5361227ba6fad973381469 Mon Sep 17 00:00:00 2001 From: Artem Vasylenko Date: Wed, 26 Jul 2023 18:12:20 +0300 Subject: [PATCH 08/30] light/dark keyboard in progress --- src/components/Keyboard/Keyboard.jsx | 28 +++++--- src/components/Keyboard/Keyboard.module.css | 3 - src/components/Keyboard/Keyboard.module.scss | 11 ++++ .../AlphabetOverview.module.scss | 2 +- src/css/custom.scss | 65 +++++++++++++++---- 5 files changed, 81 insertions(+), 28 deletions(-) delete mode 100644 src/components/Keyboard/Keyboard.module.css create mode 100644 src/components/Keyboard/Keyboard.module.scss diff --git a/src/components/Keyboard/Keyboard.jsx b/src/components/Keyboard/Keyboard.jsx index 0dfa18af3..41d7a0d3b 100644 --- a/src/components/Keyboard/Keyboard.jsx +++ b/src/components/Keyboard/Keyboard.jsx @@ -1,18 +1,18 @@ import React, { useState } from 'react' -import styles from "./Keyboard.module.css"; +import styles from "./Keyboard.module.scss"; -function KeyText({ color, x, y, alt, shift, children, handleMouseOver, handleMouseOut }) { +function KeyText({ color, x, y, alt, shift, children, handleMouseOver, handleMouseOut, className }) { const tx = x + 10 + (alt ? 20 : 0); const ty = y + 12 + (shift ? 0 : 20); return ( - {base} + {base} {alt} {shift} {altShift} @@ -87,7 +94,7 @@ function ServiceKey({ base, x, y, width = 75, height = 41, correctionPointY }) { y={y} fill={isHovered ? "#e7f3ff" : "#fff"} stroke={isHovered ? "#147CFA" : "#646464"} - stroke-width={isHovered ? 3 : 1} + strokeWidth={isHovered ? 3 : 1} rx={3} onMouseOver={handleMouseOver} onMouseOut={handleMouseOut} @@ -129,14 +136,15 @@ export default function Keyboard() { height="274" fill="none" viewBox="0 0 718 274" - className={styles.keyboard} + className={styles.svgKeyboard} > - + diff --git a/src/components/Keyboard/Keyboard.module.css b/src/components/Keyboard/Keyboard.module.css deleted file mode 100644 index ad8aac6ff..000000000 --- a/src/components/Keyboard/Keyboard.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.keyboard { - font-family: sans-serif; -} \ No newline at end of file diff --git a/src/components/Keyboard/Keyboard.module.scss b/src/components/Keyboard/Keyboard.module.scss new file mode 100644 index 000000000..5dee698cc --- /dev/null +++ b/src/components/Keyboard/Keyboard.module.scss @@ -0,0 +1,11 @@ +.svgKeyboard { + font-family: sans-serif; +} + +.svgBackground { + fill: var(--rect-fill-color); +} + +.textColorBase { + fill: var(--text-color-base); +} \ No newline at end of file diff --git a/src/components/alphabetOverview/AlphabetOverview.module.scss b/src/components/alphabetOverview/AlphabetOverview.module.scss index 1fa301690..d21063604 100644 --- a/src/components/alphabetOverview/AlphabetOverview.module.scss +++ b/src/components/alphabetOverview/AlphabetOverview.module.scss @@ -1,4 +1,4 @@ -@media (max-width: 480px) { +@media (max-width: 360px) { .th { overflow: hidden; max-width: 0; diff --git a/src/css/custom.scss b/src/css/custom.scss index 6a790e29e..3d7119586 100644 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -44,10 +44,13 @@ //--fun-color-primary-background-contrast: #FFF; } - --fun-safe-serif: 'Liberation Serif', serif; - --fun-safe-sans: 'Liberation Sans', sans-serif; + --fun-safe-serif: 'Liberation Serif', + serif; + --fun-safe-sans: 'Liberation Sans', + sans-serif; - --ifm-font-family-base: 'Alegreya Sans', sans-serif; + --ifm-font-family-base: 'Alegreya Sans', + sans-serif; --ifm-font-size-base: 20px; --ifm-h1-font-size: 30px; // 1.55 --ifm-h2-font-size: 26px; // 1.33 @@ -66,13 +69,13 @@ } body[data-theme='light'] { - --aa-primary-color-rgb: 76,147,198 !important; - --aa-muted-color-rgb: 76,147,198 !important; + --aa-primary-color-rgb: 76, 147, 198 !important; + --aa-muted-color-rgb: 76, 147, 198 !important; } body[data-theme='dark'] { - --aa-primary-color-rgb: 76,147,198 !important; - --aa-muted-color-rgb: 76,147,198 !important; + --aa-primary-color-rgb: 76, 147, 198 !important; + --aa-muted-color-rgb: 76, 147, 198 !important; } .navbar__logo { @@ -121,7 +124,8 @@ span[lang] { font-style: italic; } -code, .notranslate { +code, +.notranslate { //animation: blink 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; } @@ -152,7 +156,10 @@ mark { background-color: var(--ifm-color-warning-lightest); } -code, table[lang*=interslv], tbody[lang*=interslv], td[lang*=interslv] { +code, +table[lang*=interslv], +tbody[lang*=interslv], +td[lang*=interslv] { font-family: var(--fun-safe-sans); font-size: 90%; } @@ -170,7 +177,10 @@ code, table[lang*=interslv], tbody[lang*=interslv], td[lang*=interslv] { /* Dev-only CSS selector */ .docsWrapper_node_modules-\@docusaurus-theme-classic-lib-theme-DocRoot-Layout-styles-module { - code, kbd, [translate=no] { + + code, + kbd, + [translate=no] { //animation: blink 5s infinite alternate; } } @@ -179,6 +189,7 @@ code, table[lang*=interslv], tbody[lang*=interslv], td[lang*=interslv] { 0% { opacity: 1; } + 100% { opacity: 0; } @@ -201,13 +212,13 @@ code, table[lang*=interslv], tbody[lang*=interslv], td[lang*=interslv] { min-width: 28px; } - .anchor > & { + .anchor>& { margin-right: 15px; opacity: 0; text-decoration: none; } - .anchor:hover > & { + .anchor:hover>& { opacity: 0.20; &:hover { @@ -236,6 +247,7 @@ code, table[lang*=interslv], tbody[lang*=interslv], td[lang*=interslv] { text-transform: uppercase; } } + /*#endregion */ .pagination-nav { @@ -245,8 +257,7 @@ code, table[lang*=interslv], tbody[lang*=interslv], td[lang*=interslv] { border-radius: 0; } - &__label { - } + &__label {} &__label::before, &__label::after { @@ -267,3 +278,29 @@ code, table[lang*=interslv], tbody[lang*=interslv], td[lang*=interslv] { } } + +.svgKeyboard { + --text-color-base: #444; + + &[data-theme='light'] { + --text-color-base: #444; + --text-color-alt: #8E4040; + --text-color-shift: #337093; + --text-color-alt-shift: #671584; + + --rect-fill-color: #fff; + + --backgroung-fill-color: #fff; + } + + &[data-theme='dark'] { + --text-color-base: #eaebec; + --text-color-alt: #a0808c; + --text-color-shift: #83a2bb; + --text-color-alt-shift: #c3b9da; + + --rect-fill-color: #1a2933; + + --backgroung-fill-color: #1a2933; + } +} \ No newline at end of file From de210e2cfeccfecdaf57cc65facf5ad25ef474fd Mon Sep 17 00:00:00 2001 From: Artem Vasylenko Date: Thu, 27 Jul 2023 21:00:17 +0300 Subject: [PATCH 09/30] light/dark keyboard theme is ready --- src/components/Keyboard/Keyboard.jsx | 94 +++++++++++++------- src/components/Keyboard/Keyboard.module.scss | 52 ++++++++++- src/css/custom.scss | 9 +- 3 files changed, 113 insertions(+), 42 deletions(-) diff --git a/src/components/Keyboard/Keyboard.jsx b/src/components/Keyboard/Keyboard.jsx index 41d7a0d3b..c3819ea26 100644 --- a/src/components/Keyboard/Keyboard.jsx +++ b/src/components/Keyboard/Keyboard.jsx @@ -1,7 +1,7 @@ import React, { useState } from 'react' import styles from "./Keyboard.module.scss"; -function KeyText({ color, x, y, alt, shift, children, handleMouseOver, handleMouseOut, className }) { +function KeyText({ x, y, alt, shift, children, handleMouseDown, handleMouseUp, className }) { const tx = x + 10 + (alt ? 20 : 0); const ty = y + 12 + (shift ? 0 : 20); @@ -15,20 +15,20 @@ function KeyText({ color, x, y, alt, shift, children, handleMouseOver, handleMou className={className} x={tx} y={ty} - onMouseOver={handleMouseOver} - onMouseOut={handleMouseOut}> + onMouseDown={handleMouseDown} + onMouseUp={handleMouseUp}> {children} ) } function Key({ base, alt, shift, altShift, x, y }) { - const [isHovered, setIsHovered] = useState(false); - const handleMouseOver = () => { - setIsHovered(true); + const [isClicked, setisClicked] = useState(false); + const handleMouseDown = () => { + setisClicked(true); } - const handleMouseOut = () => { - setIsHovered(false); + const handleMouseUp = () => { + setisClicked(false); } return ( @@ -37,53 +37,76 @@ function Key({ base, alt, shift, altShift, x, y }) { height={41} x={x} y={y} - fill={isHovered ? "#e7f3ff" : "#fff"} - stroke={isHovered ? "#147CFA" : "#646464"} - strokeWidth={isHovered ? 3 : 1} + fill={isClicked + ? "var(--key-fill-click-color)" + : "var(--key-fill-color)" + } + stroke={isClicked ? "#147CFA" : "#646464"} + strokeWidth={isClicked ? 3 : 1} rx={3} - onMouseOver={handleMouseOver} - onMouseOut={handleMouseOut} + onMouseDown={handleMouseDown} + onMouseUp={handleMouseUp} > {base} - {alt} - {shift} - {altShift} + {alt} + {shift} + {altShift} ) } -function ServiceKeyText({ x, y, children, correctionPointX = 17.297, correctionPointY = 23.918, handleMouseOver, handleMouseOut }) { +function ServiceKeyText({ x, y, children, correctionPointX = 17.297, correctionPointY = 23.918, handleMouseDown, handleMouseUp }) { const tx = x + correctionPointX; const ty = y + correctionPointY; return ( + onMouseDown={handleMouseDown} + onMouseUp={handleMouseUp}> {children} ) } function ServiceKey({ base, x, y, width = 75, height = 41, correctionPointY }) { - const [isHovered, setIsHovered] = useState(false); - const handleMouseOver = () => { - setIsHovered(true); + const [isClicked, setisClicked] = useState(false); + const handleMouseDown = () => { + setisClicked(true); } - const handleMouseOut = () => { - setIsHovered(false); + const handleMouseUp = () => { + setisClicked(false); } return ( @@ -92,14 +115,17 @@ function ServiceKey({ base, x, y, width = 75, height = 41, correctionPointY }) { height={height} x={x} y={y} - fill={isHovered ? "#e7f3ff" : "#fff"} - stroke={isHovered ? "#147CFA" : "#646464"} - strokeWidth={isHovered ? 3 : 1} + fill={isClicked + ? "var(--key-fill-click-color)" + : "var(--key-fill-color)" + } + stroke={isClicked ? "#147CFA" : "#646464"} + strokeWidth={isClicked ? 3 : 1} rx={3} - onMouseOver={handleMouseOver} - onMouseOut={handleMouseOut} + onMouseDown={handleMouseDown} + onMouseUp={handleMouseUp} > - {base} + {base} ) } diff --git a/src/components/Keyboard/Keyboard.module.scss b/src/components/Keyboard/Keyboard.module.scss index 5dee698cc..6ff37a5e9 100644 --- a/src/components/Keyboard/Keyboard.module.scss +++ b/src/components/Keyboard/Keyboard.module.scss @@ -1,11 +1,57 @@ +[data-theme='light'] { + --text-color-base: #444; + --text-color-alt: #8E4040; + --text-color-shift: #337093; + --text-color-alt-shift: #671584; + --text-color-service: #646464; + + --svg-fill-color: #fff; + + --key-fill-color: #fff; + --key-fill-click-color: #e7f3ff; +} + +[data-theme='dark'] { + --text-color-base: #eaebec; + --text-color-alt: #a0808c; + --text-color-shift: #83a2bb; + --text-color-alt-shift: #c3b9da; + --text-color-service: #eaebec; + + --svg-fill-color: #1a2933; + + --key-fill-color: #1a2933; + --key-fill-click-color: #274255; +} + .svgKeyboard { font-family: sans-serif; } +.textColorBase { + fill: var(--text-color-base); +} + +.textColorAlt { + fill: var(--text-color-alt); +} + +.textColorShift { + fill: var(--text-color-shift); +} + +.textColorAltShift { + fill: var(--text-color-alt-shift); +} + +.textColorService { + fill: var(--text-color-service); +} + .svgBackground { - fill: var(--rect-fill-color); + fill: var(--svg-fill-color); } -.textColorBase { - fill: var(--text-color-base); +.keyColors { + fill: var(--key-fill-color); } \ No newline at end of file diff --git a/src/css/custom.scss b/src/css/custom.scss index 3d7119586..99bcdb8ed 100644 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -280,7 +280,6 @@ td[lang*=interslv] { } .svgKeyboard { - --text-color-base: #444; &[data-theme='light'] { --text-color-base: #444; @@ -288,9 +287,9 @@ td[lang*=interslv] { --text-color-shift: #337093; --text-color-alt-shift: #671584; - --rect-fill-color: #fff; + --svg-fill-color: #fff; - --backgroung-fill-color: #fff; + --key-fill-color: #fff; } &[data-theme='dark'] { @@ -299,8 +298,8 @@ td[lang*=interslv] { --text-color-shift: #83a2bb; --text-color-alt-shift: #c3b9da; - --rect-fill-color: #1a2933; + --svg-fill-color: #1a2933; - --backgroung-fill-color: #1a2933; + --key-fill-color: #1a2933; } } \ No newline at end of file From abcac0725abe6e4a83c3fda7403165d9978d2d26 Mon Sep 17 00:00:00 2001 From: Artem Vasylenko Date: Fri, 28 Jul 2023 22:45:51 +0300 Subject: [PATCH 10/30] downloads platform --- .../{keyboards.mdx => keyboards/index.mdx} | 0 docs/resources/keyboards/kbdmslat.mdx | 48 +++++++++++++++++++ src/components/Keyboard/Keyboard.jsx | 8 +++- src/components/Keyboard/Keyboard.module.scss | 8 ++-- .../PlatformDownloads/PlatformDownloads.jsx | 23 +++++++++ .../PlatformDownloads.module.scss | 24 ++++++++++ src/components/PlatformDownloads/index.js | 1 + src/components/index.js | 2 + 8 files changed, 109 insertions(+), 5 deletions(-) rename docs/resources/{keyboards.mdx => keyboards/index.mdx} (100%) create mode 100644 docs/resources/keyboards/kbdmslat.mdx create mode 100644 src/components/PlatformDownloads/PlatformDownloads.jsx create mode 100644 src/components/PlatformDownloads/PlatformDownloads.module.scss create mode 100644 src/components/PlatformDownloads/index.js diff --git a/docs/resources/keyboards.mdx b/docs/resources/keyboards/index.mdx similarity index 100% rename from docs/resources/keyboards.mdx rename to docs/resources/keyboards/index.mdx diff --git a/docs/resources/keyboards/kbdmslat.mdx b/docs/resources/keyboards/kbdmslat.mdx new file mode 100644 index 000000000..715c3eb9e --- /dev/null +++ b/docs/resources/keyboards/kbdmslat.mdx @@ -0,0 +1,48 @@ +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import { translate } from "@docusaurus/Translate"; +import { PlatformDownloads } from "@site/src/components"; + +# Interslavic Keyboard + +This is the recommended keyboard layout tailored for all Slavic languages and dialects using Latin script, recognized or obscure: from Polish and Czech to less familiar and endangered languages and dialects. + +`HERE BE THE KEYBOARD LAYOUT` + +## Key features + +- **Inclusivity**: Built upon the standard English keyboard, this layout integrates all the letters of the Latin alphabet and a variety of diacritical marks and typographical symbols, allowing seamless interaction in multiple languages. +- **Accessibility**: All special characters are readily available using combinations with the AltGr key or dead keys at the top of the keyboard. +- **Compatibility**: This keyboard layout is compatible with operating systems from Windows XP to the most recent ones. +- **Customizability**: The archive comes with a source file for the Microsoft Keyboard Layout Creator, enabling modifications to suit personal preferences. + +## Downloads + + + +## Installation + + + + +The keyboard works on Windows XP, Vista, 7, 8, and newer operating systems. After unpacking the keyboard archive, click on the KBDMSLAT.exe file with the left mouse button. At the end of the installation, a dialogue appears with the "Close" button, which closes the installation. You can switch to the keyboard by pressing Alt+Shift, or if you are using the Slovenian keyboard as the base, by pressing CTRL+Shift, because the keyboard installs under the Slovenian language (Slovenia, code SLO as the beginning of the word Slavic). To uninstall, click on the installation file and then on the "Finish" button. + + + + +In addition to the installation file, there is also a source file klc for the Microsoft Keyboard Layout Creator in the archive, with which you can modify the keyboard if you wish. diff --git a/src/components/Keyboard/Keyboard.jsx b/src/components/Keyboard/Keyboard.jsx index c3819ea26..0bd030ad2 100644 --- a/src/components/Keyboard/Keyboard.jsx +++ b/src/components/Keyboard/Keyboard.jsx @@ -125,7 +125,13 @@ function ServiceKey({ base, x, y, width = 75, height = 41, correctionPointY }) { onMouseDown={handleMouseDown} onMouseUp={handleMouseUp} > - {base} + {base} ) } diff --git a/src/components/Keyboard/Keyboard.module.scss b/src/components/Keyboard/Keyboard.module.scss index 6ff37a5e9..7efadd759 100644 --- a/src/components/Keyboard/Keyboard.module.scss +++ b/src/components/Keyboard/Keyboard.module.scss @@ -1,7 +1,7 @@ [data-theme='light'] { --text-color-base: #444; - --text-color-alt: #8E4040; - --text-color-shift: #337093; + --text-color-alt: #337093; + --text-color-shift: #8E4040; --text-color-alt-shift: #671584; --text-color-service: #646464; @@ -13,8 +13,8 @@ [data-theme='dark'] { --text-color-base: #eaebec; - --text-color-alt: #a0808c; - --text-color-shift: #83a2bb; + --text-color-alt: #83a2bb; + --text-color-shift: #a0808c; --text-color-alt-shift: #c3b9da; --text-color-service: #eaebec; diff --git a/src/components/PlatformDownloads/PlatformDownloads.jsx b/src/components/PlatformDownloads/PlatformDownloads.jsx new file mode 100644 index 000000000..fa85d1e9d --- /dev/null +++ b/src/components/PlatformDownloads/PlatformDownloads.jsx @@ -0,0 +1,23 @@ +import React from 'react' +import styles from './PlatformDownloads.module.scss'; + +export default function PlatformDownloads({ featured }) { + const handleDownload = (link) => { + window.open(link); + } + + return ( + <> + +
+
+ {featured.map((file, index) => ( +
handleDownload(file.link)}> +
{file.type}
+
+ ))} +
+
+ + ) +} \ No newline at end of file diff --git a/src/components/PlatformDownloads/PlatformDownloads.module.scss b/src/components/PlatformDownloads/PlatformDownloads.module.scss new file mode 100644 index 000000000..c4dfe2cd7 --- /dev/null +++ b/src/components/PlatformDownloads/PlatformDownloads.module.scss @@ -0,0 +1,24 @@ +.wrapper { + height: 200px; +} + +.container { + width: 100%; + height: 100%; + display: flex; + background-color: #EEF4FD; +} + +.flexItem { + width: 25%; + border: 1px solid black; + display: flex; + justify-content: center; + align-items: center; +} + +.flexItem:hover { + background-color: #DDE9FB; +} + +.title {} \ No newline at end of file diff --git a/src/components/PlatformDownloads/index.js b/src/components/PlatformDownloads/index.js new file mode 100644 index 000000000..736857ce6 --- /dev/null +++ b/src/components/PlatformDownloads/index.js @@ -0,0 +1 @@ +export { default as PlatformDownloads } from './PlatformDownloads'; diff --git a/src/components/index.js b/src/components/index.js index fe6820908..edae5c69c 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -2,6 +2,7 @@ import { Banner, Carousel, Features } from './homepage'; import { CustomAfterSection, CustomBeforeSection } from './sections'; import { IPA } from './IPA'; import { Keyboard } from './Keyboard'; +import { PlatformDownloads } from './PlatformDownloads'; export { Banner, @@ -11,4 +12,5 @@ export { Features, IPA, Keyboard, + PlatformDownloads, }; From 53204693b388eaf008e66438c5d3b41a743534ad Mon Sep 17 00:00:00 2001 From: Artem Vasylenko Date: Tue, 1 Aug 2023 12:35:10 +0300 Subject: [PATCH 11/30] downloads platform in progress --- .../PlatformDownloads/PlatformDownloads.jsx | 115 ++++++++++++++++-- .../PlatformDownloads.module.scss | 42 ++++++- static/img/icons/deb_icon.svg | 6 + static/img/icons/mac_icon.svg | 6 + static/img/icons/rpm_icon.svg | 12 ++ static/img/icons/windows_icon.svg | 8 ++ 6 files changed, 179 insertions(+), 10 deletions(-) create mode 100644 static/img/icons/deb_icon.svg create mode 100644 static/img/icons/mac_icon.svg create mode 100644 static/img/icons/rpm_icon.svg create mode 100644 static/img/icons/windows_icon.svg diff --git a/src/components/PlatformDownloads/PlatformDownloads.jsx b/src/components/PlatformDownloads/PlatformDownloads.jsx index fa85d1e9d..855e28bea 100644 --- a/src/components/PlatformDownloads/PlatformDownloads.jsx +++ b/src/components/PlatformDownloads/PlatformDownloads.jsx @@ -1,21 +1,122 @@ import React from 'react' +import clsx from 'clsx'; import styles from './PlatformDownloads.module.scss'; +import SvgWindowsIcon from '@site/static/img/icons/windows_icon.svg'; +import SvgMacIcon from '@site/static/img/icons/mac_icon.svg'; +import SvgDebIcon from '@site/static/img/icons/deb_icon.svg'; +import SvgRpmIcon from '@site/static/img/icons/rpm_icon.svg'; +import Link from "@docusaurus/Link"; +import Translate from "@docusaurus/Translate"; + export default function PlatformDownloads({ featured }) { - const handleDownload = (link) => { + + /* const handleDownload = (link) => { window.open(link); + } + onClick={() => handleDownload(link)} + */ + + function DownloadWindows({ url, name }) { + return ( +
+ + + Windows + + +
{name}
+
+ ) + } + + function DownloadMac({ url, name }) { + return ( +
+ + + MacOS + + +
{name}
+
+ ) + } + + function DownloadLinuxDeb({ url, name }) { + return ( +
+ + + Debian + + +
{name}
+
+ ) + } + + function DownloadLinuxRpm({ url, name }) { + return ( +
+ + + Fedora + + +
{name}
+
+ ) + } + + const components = { + windows: DownloadWindows, + mac: DownloadMac, + deb: DownloadLinuxDeb, + rpm: DownloadLinuxRpm, + } + + const icons = { + windows: () => (), + mac: () => (), + deb: () => (), + rpm: () => (), + }; + + const fullNames = { + win: 'Windows', + mac: 'MacOS', + deb: 'Debian', + rpm: 'Fedora', } return ( <> -
- {featured.map((file, index) => ( -
handleDownload(file.link)}> -
{file.type}
-
- ))} + {featured.map((value) => { + const { type, link, fileName } = value; + const IconComponent = icons[type]; + const DownloadComponent = components[type]; + return ( +
+ + +
+ ) + })} +
diff --git a/src/components/PlatformDownloads/PlatformDownloads.module.scss b/src/components/PlatformDownloads/PlatformDownloads.module.scss index c4dfe2cd7..76145a2cd 100644 --- a/src/components/PlatformDownloads/PlatformDownloads.module.scss +++ b/src/components/PlatformDownloads/PlatformDownloads.module.scss @@ -1,5 +1,5 @@ .wrapper { - height: 200px; + height: 150px; } .container { @@ -11,14 +11,50 @@ .flexItem { width: 25%; - border: 1px solid black; + padding: 20px; display: flex; + flex-direction: column; justify-content: center; align-items: center; } +.flexItem a { + display: flex; + justify-content: center; + text-decoration: none; + color: inherit; +} + +.flexItem svg { + min-width: 49px; + min-height: 40px; +} + +.link { + margin: 0 auto; + font-size: 0.7rem; + text-align: center; +} + .flexItem:hover { background-color: #DDE9FB; } -.title {} \ No newline at end of file +.icon_windows, +.icon_mac, +.icon_debian, +.icon_fedora {} + +@media (max-width: 480px) { + .wrapper { + height: 600px; + } + + .container { + flex-direction: column; + } + + .flexItem { + width: 100%; + } +} \ No newline at end of file diff --git a/static/img/icons/deb_icon.svg b/static/img/icons/deb_icon.svg new file mode 100644 index 000000000..d8ff4c33f --- /dev/null +++ b/static/img/icons/deb_icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/static/img/icons/mac_icon.svg b/static/img/icons/mac_icon.svg new file mode 100644 index 000000000..1b8a5aac6 --- /dev/null +++ b/static/img/icons/mac_icon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/static/img/icons/rpm_icon.svg b/static/img/icons/rpm_icon.svg new file mode 100644 index 000000000..2b07dfa40 --- /dev/null +++ b/static/img/icons/rpm_icon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/static/img/icons/windows_icon.svg b/static/img/icons/windows_icon.svg new file mode 100644 index 000000000..606224a4b --- /dev/null +++ b/static/img/icons/windows_icon.svg @@ -0,0 +1,8 @@ + + + + + + + + From b0b6efe19c9d93033a87ca547c9485335c8f4ece Mon Sep 17 00:00:00 2001 From: Artem Vasylenko Date: Tue, 1 Aug 2023 12:44:29 +0300 Subject: [PATCH 12/30] downloads platform width download --- src/components/PlatformDownloads/PlatformDownloads.jsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/PlatformDownloads/PlatformDownloads.jsx b/src/components/PlatformDownloads/PlatformDownloads.jsx index 855e28bea..989a3796c 100644 --- a/src/components/PlatformDownloads/PlatformDownloads.jsx +++ b/src/components/PlatformDownloads/PlatformDownloads.jsx @@ -11,11 +11,9 @@ import Translate from "@docusaurus/Translate"; export default function PlatformDownloads({ featured }) { - /* const handleDownload = (link) => { + const handleDownload = (link) => { window.open(link); - } - onClick={() => handleDownload(link)} - */ + } function DownloadWindows({ url, name }) { return ( @@ -110,6 +108,7 @@ export default function PlatformDownloads({ featured }) {
handleDownload(link)} > From 1fdc2ad930ca09f653e5d991fd51fc15560cae79 Mon Sep 17 00:00:00 2001 From: Artem Vasylenko Date: Tue, 1 Aug 2023 13:02:38 +0300 Subject: [PATCH 13/30] downloads platform fixes --- src/components/PlatformDownloads/PlatformDownloads.module.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/PlatformDownloads/PlatformDownloads.module.scss b/src/components/PlatformDownloads/PlatformDownloads.module.scss index 76145a2cd..14d98e1b2 100644 --- a/src/components/PlatformDownloads/PlatformDownloads.module.scss +++ b/src/components/PlatformDownloads/PlatformDownloads.module.scss @@ -48,6 +48,8 @@ @media (max-width: 480px) { .wrapper { height: 600px; + width: 200px; + margin: 0 auto; } .container { @@ -56,5 +58,6 @@ .flexItem { width: 100%; + height: 25%; } } \ No newline at end of file From f798727b8b8b0f9ad54281df62df665535cabd7a Mon Sep 17 00:00:00 2001 From: Artem Vasylenko Date: Tue, 1 Aug 2023 16:40:09 +0300 Subject: [PATCH 14/30] downloads platform fixes --- i18n/en/code.json | 16 ++++++++++++++++ .../PlatformDownloads/PlatformDownloads.jsx | 16 +++++++--------- .../PlatformDownloads.module.scss | 4 ++-- 3 files changed, 25 insertions(+), 11 deletions(-) diff --git a/i18n/en/code.json b/i18n/en/code.json index 363bfeb24..50dbfcfd3 100644 --- a/i18n/en/code.json +++ b/i18n/en/code.json @@ -384,5 +384,21 @@ }, "com.script.Standard": { "message": "St\u00ADan\u00ADdard" + }, + "com.platform.windows": { + "message": "Windows", + "description": "Windows Platform" + }, + "com.platform.mac": { + "message": "MacOS", + "description": "Mac Platform" + }, + "com.platform.deb": { + "message": "Debian", + "description": "Debian Platform" + }, + "com.platform.fedora": { + "message": "Fedora", + "description": "Fedora Platform" } } diff --git a/src/components/PlatformDownloads/PlatformDownloads.jsx b/src/components/PlatformDownloads/PlatformDownloads.jsx index 989a3796c..68f64400b 100644 --- a/src/components/PlatformDownloads/PlatformDownloads.jsx +++ b/src/components/PlatformDownloads/PlatformDownloads.jsx @@ -76,11 +76,11 @@ export default function PlatformDownloads({ featured }) { } const components = { - windows: DownloadWindows, - mac: DownloadMac, - deb: DownloadLinuxDeb, - rpm: DownloadLinuxRpm, - } + windows: () => , + mac: () => , + deb: () => , + rpm: () => , + }; const icons = { windows: () => (), @@ -102,16 +102,14 @@ export default function PlatformDownloads({ featured }) {
{featured.map((value) => { const { type, link, fileName } = value; - const IconComponent = icons[type]; - const DownloadComponent = components[type]; return (
handleDownload(link)} > - - + {icons[type]()} + {components[type]({ link, fileName })}
) })} diff --git a/src/components/PlatformDownloads/PlatformDownloads.module.scss b/src/components/PlatformDownloads/PlatformDownloads.module.scss index 14d98e1b2..be74fcfd7 100644 --- a/src/components/PlatformDownloads/PlatformDownloads.module.scss +++ b/src/components/PlatformDownloads/PlatformDownloads.module.scss @@ -45,10 +45,10 @@ .icon_debian, .icon_fedora {} -@media (max-width: 480px) { +@media (max-width: 768px) { .wrapper { height: 600px; - width: 200px; + width: 250px; margin: 0 auto; } From 8feaac787dd830ea131e3533f8ddebcac08f701b Mon Sep 17 00:00:00 2001 From: Artem Vasylenko Date: Wed, 2 Aug 2023 13:02:39 +0300 Subject: [PATCH 15/30] downloads platform optimize --- i18n/en/code.json | 2 +- .../PlatformDownloads/PlatformDownloads.jsx | 117 +++++------------- .../PlatformDownloads.module.scss | 23 ++-- 3 files changed, 44 insertions(+), 98 deletions(-) diff --git a/i18n/en/code.json b/i18n/en/code.json index 50dbfcfd3..f96a24d8a 100644 --- a/i18n/en/code.json +++ b/i18n/en/code.json @@ -397,7 +397,7 @@ "message": "Debian", "description": "Debian Platform" }, - "com.platform.fedora": { + "com.platform.rpm": { "message": "Fedora", "description": "Fedora Platform" } diff --git a/src/components/PlatformDownloads/PlatformDownloads.jsx b/src/components/PlatformDownloads/PlatformDownloads.jsx index 68f64400b..52bcd0a48 100644 --- a/src/components/PlatformDownloads/PlatformDownloads.jsx +++ b/src/components/PlatformDownloads/PlatformDownloads.jsx @@ -9,93 +9,37 @@ import Link from "@docusaurus/Link"; import Translate from "@docusaurus/Translate"; -export default function PlatformDownloads({ featured }) { - - const handleDownload = (link) => { - window.open(link); - } - function DownloadWindows({ url, name }) { - return ( -
- - - Windows - - -
{name}
-
- ) - } +const icons = { + windows: () => (), + mac: () => (), + deb: () => (), + rpm: () => (), +}; - function DownloadMac({ url, name }) { - return ( -
- - - MacOS - - -
{name}
-
- ) - } +const fullNames = { + win: 'Windows', + mac: 'MacOS', + deb: 'Debian', + rpm: 'Fedora', +}; - function DownloadLinuxDeb({ url, name }) { - return ( -
- - - Debian - - -
{name}
-
- ) - } - - function DownloadLinuxRpm({ url, name }) { - return ( -
- - - Fedora - - -
{name}
-
- ) - } - - const components = { - windows: () => , - mac: () => , - deb: () => , - rpm: () => , - }; - - const icons = { - windows: () => (), - mac: () => (), - deb: () => (), - rpm: () => (), - }; - - const fullNames = { - win: 'Windows', - mac: 'MacOS', - deb: 'Debian', - rpm: 'Fedora', - } +function DownloadPlatform({ url, name, type }) { + return ( +
+ + + {fullNames.type} + + +
{name}
+
+ ) +} +export default function PlatformDownloads({ featured }) { return ( <>
@@ -106,10 +50,13 @@ export default function PlatformDownloads({ featured }) {
handleDownload(link)} > {icons[type]()} - {components[type]({ link, fileName })} +
) })} diff --git a/src/components/PlatformDownloads/PlatformDownloads.module.scss b/src/components/PlatformDownloads/PlatformDownloads.module.scss index be74fcfd7..49f4f0629 100644 --- a/src/components/PlatformDownloads/PlatformDownloads.module.scss +++ b/src/components/PlatformDownloads/PlatformDownloads.module.scss @@ -11,34 +11,33 @@ .flexItem { width: 25%; - padding: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; } -.flexItem a { +.flexItem svg { + min-width: 49px; + min-height: 40px; +} + +.flexItem:hover { + background-color: #DDE9FB; +} + +.icon a { display: flex; justify-content: center; text-decoration: none; color: inherit; } -.flexItem svg { - min-width: 49px; - min-height: 40px; -} - -.link { - margin: 0 auto; +.linkText { font-size: 0.7rem; text-align: center; } -.flexItem:hover { - background-color: #DDE9FB; -} .icon_windows, .icon_mac, From 043d17c053c1fdf13ebf2f402e41be41b2f9d9b2 Mon Sep 17 00:00:00 2001 From: Artem Vasylenko Date: Wed, 2 Aug 2023 16:18:45 +0300 Subject: [PATCH 16/30] downloads platform optimize fix --- .../PlatformDownloads/PlatformDownloads.jsx | 25 +++++++-------- .../PlatformDownloads.module.scss | 32 +++++++++++-------- 2 files changed, 30 insertions(+), 27 deletions(-) diff --git a/src/components/PlatformDownloads/PlatformDownloads.jsx b/src/components/PlatformDownloads/PlatformDownloads.jsx index 52bcd0a48..5c8ef28c3 100644 --- a/src/components/PlatformDownloads/PlatformDownloads.jsx +++ b/src/components/PlatformDownloads/PlatformDownloads.jsx @@ -24,16 +24,14 @@ const fullNames = { rpm: 'Fedora', }; -function DownloadPlatform({ url, name, type }) { +function DownloadPlatform({ name, type }) { return (
- - - {fullNames.type} - - + + {fullNames.type} +
{name}
) @@ -47,17 +45,16 @@ export default function PlatformDownloads({ featured }) { {featured.map((value) => { const { type, link, fileName } = value; return ( -
{icons[type]()} - -
+ ) })} diff --git a/src/components/PlatformDownloads/PlatformDownloads.module.scss b/src/components/PlatformDownloads/PlatformDownloads.module.scss index 49f4f0629..223650585 100644 --- a/src/components/PlatformDownloads/PlatformDownloads.module.scss +++ b/src/components/PlatformDownloads/PlatformDownloads.module.scss @@ -7,30 +7,33 @@ height: 100%; display: flex; background-color: #EEF4FD; + + & a { + text-decoration: none; + color: inherit; + } } + .flexItem { width: 25%; display: flex; flex-direction: column; justify-content: center; align-items: center; -} -.flexItem svg { - min-width: 49px; - min-height: 40px; -} + &:hover { + background-color: #DDE9FB; + } -.flexItem:hover { - background-color: #DDE9FB; + & svg { + min-width: 49px; + min-height: 40px; + } } -.icon a { - display: flex; - justify-content: center; - text-decoration: none; - color: inherit; +.icon { + text-align: center; } .linkText { @@ -38,7 +41,6 @@ text-align: center; } - .icon_windows, .icon_mac, .icon_debian, @@ -58,5 +60,9 @@ .flexItem { width: 100%; height: 25%; + flex-direction: row; + justify-content: space-evenly; } + + } \ No newline at end of file From d7f711b2d430944c90c91c3dbf49ce29c9e00901 Mon Sep 17 00:00:00 2001 From: Artem Vasylenko Date: Thu, 3 Aug 2023 18:35:35 +0300 Subject: [PATCH 17/30] mobile keyboard, beginning --- docs/resources/keyboards/index.mdx | 6 +- .../KeyboardMobile/KeyboardMobile.jsx | 101 ++++++++++++ .../KeyboardMobile/KeyboardMobile.module.scss | 152 ++++++++++++++++++ src/components/KeyboardMobile/index.js | 1 + src/components/index.js | 12 +- 5 files changed, 265 insertions(+), 7 deletions(-) create mode 100644 src/components/KeyboardMobile/KeyboardMobile.jsx create mode 100644 src/components/KeyboardMobile/KeyboardMobile.module.scss create mode 100644 src/components/KeyboardMobile/index.js diff --git a/docs/resources/keyboards/index.mdx b/docs/resources/keyboards/index.mdx index baf477e3d..004cf33d9 100644 --- a/docs/resources/keyboards/index.mdx +++ b/docs/resources/keyboards/index.mdx @@ -1,4 +1,5 @@ -import { Keyboard } from '@site/src/components'; +import { Keyboard } from "@site/src/components"; +import { KeyboardMobile } from "@site/src/components"; # Keyboards @@ -36,6 +37,7 @@ For the **Interslavic Cyrillic** alphabet: -[1]: http://tyflonet.com/siciliano/klaviatury + +[1]: http://tyflonet.com/siciliano/klaviatury [2]: http://usachov.eu/g diff --git a/src/components/KeyboardMobile/KeyboardMobile.jsx b/src/components/KeyboardMobile/KeyboardMobile.jsx new file mode 100644 index 000000000..11ab21244 --- /dev/null +++ b/src/components/KeyboardMobile/KeyboardMobile.jsx @@ -0,0 +1,101 @@ +import React from 'react' +import clsx from 'clsx' +import styles from "./KeyboardMobile.module.scss" + +export default function KeyboardMobile() { + return ( + <> +
+
+ + + + + + + + + + + + + + +
+
+ ` + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 0 + - + = + +
+
+ + č + š + e + r + t + y + u + i + o + p + [ + ] + \ +
+
+ + a + s + d + f + g + h + j + k + l + ; + ' + +
+
+ + z + ž + c + v + b + n + m + , + . + / + +
+
+ + + + + + + + + + +
+
+ + ) +} diff --git a/src/components/KeyboardMobile/KeyboardMobile.module.scss b/src/components/KeyboardMobile/KeyboardMobile.module.scss new file mode 100644 index 000000000..594979529 --- /dev/null +++ b/src/components/KeyboardMobile/KeyboardMobile.module.scss @@ -0,0 +1,152 @@ +.keyboard { + display: inline-flex; + flex-direction: column; + + --active-key-bg-default: #DDE9FB; + --active-key-bg: var(--active-key-bg-default, transparent); + --active-key-fg-default: #506483; + --active-key-fg: var(--active-key-fg-default, #000); + --inactive-key-bg-default: #F1F3F7; + --inactive-key-bg: var(--inactive-key-bg-default, transparent); + + font: 700 13px/14px sans-serif; + + border: 1px solid var(--inactive-key-bg); + padding: 3px; +} + +.row { + display: flex; + margin-bottom: 6px; + + &:last-child { + margin-bottom: 0; + } + + >* { + margin-right: 4px; + } + + > :last-child { + margin-right: 0; + } +} + +.key { + display: flex; + width: 17px; + height: 16px; + justify-content: center; + align-items: center; + + border-radius: 3px; + text-align: center; + + background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 10%), var(--active-key-bg); + color: var(--active-key-fg); + + &.inactive { + background: #f1f3f7; + + .row:nth-child(1)>& { + height: 9px; + + &:first-child { + width: 18px; + } + + &:last-child { + width: 26px; + } + } + + .row:nth-child(2)>& { + &:last-child { + width: 26px; + } + } + + .row:nth-child(3)>& { + &:first-child { + width: 27px; + } + + &:last-child { + width: 26px; + } + } + + .row:nth-child(4)>& { + &:first-child { + width: 33px; + } + + &:last-child { + width: 32px; + } + } + + .row:nth-child(5)>& { + &:first-child { + width: 43px; + } + + &:last-child { + width: 43px; + } + } + + .row:nth-child(6)>& { + width: 27px; + + &:nth-child(4) { + width: 99px; + } + + &:nth-child(5) { + width: 21px; + } + + &:nth-child(6) { + width: 17px; + } + + &:nth-child(7) { + width: 17px; + } + + &:nth-child(8) { + width: 17px; + } + + &:nth-child(9) { + width: 17px; + } + } + } + + &.arrows { + background: none; + position: relative; + + &::before, + &::after { + position: absolute; + border-radius: inherit; + content: ''; + background: var(--inactive-key-bg); + width: 100%; + height: calc(50% - 1px); + } + + &::before { + top: 0; + border-radius: 3px 3px 0 0; + } + + &::after { + bottom: 0; + border-radius: 0 0 3px 3px; + } + } +} \ No newline at end of file diff --git a/src/components/KeyboardMobile/index.js b/src/components/KeyboardMobile/index.js new file mode 100644 index 000000000..15fd23d5d --- /dev/null +++ b/src/components/KeyboardMobile/index.js @@ -0,0 +1 @@ +export { default as KeyboardMobile } from "./KeyboardMobile"; diff --git a/src/components/index.js b/src/components/index.js index edae5c69c..c3eb569e4 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,8 +1,9 @@ -import { Banner, Carousel, Features } from './homepage'; -import { CustomAfterSection, CustomBeforeSection } from './sections'; -import { IPA } from './IPA'; -import { Keyboard } from './Keyboard'; -import { PlatformDownloads } from './PlatformDownloads'; +import { Banner, Carousel, Features } from "./homepage"; +import { CustomAfterSection, CustomBeforeSection } from "./sections"; +import { IPA } from "./IPA"; +import { Keyboard } from "./Keyboard"; +import { PlatformDownloads } from "./PlatformDownloads"; +import { KeyboardMobile } from "./KeyboardMobile"; export { Banner, @@ -13,4 +14,5 @@ export { IPA, Keyboard, PlatformDownloads, + KeyboardMobile, }; From 68ace5c0cc68919745021bd06c78ac1693e43d87 Mon Sep 17 00:00:00 2001 From: Artem Vasylenko Date: Fri, 4 Aug 2023 16:59:39 +0300 Subject: [PATCH 18/30] mobile keyboard --- docs/resources/keyboards/index.mdx | 3 +- src/components/Keyboard/Keyboard.jsx | 12 +- .../KeyboardMobile/KeyboardMobile.jsx | 125 +++++------------- .../KeyboardMobile/KeyboardMobile.module.scss | 59 +++++---- 4 files changed, 74 insertions(+), 125 deletions(-) diff --git a/docs/resources/keyboards/index.mdx b/docs/resources/keyboards/index.mdx index 004cf33d9..08630c347 100644 --- a/docs/resources/keyboards/index.mdx +++ b/docs/resources/keyboards/index.mdx @@ -37,7 +37,8 @@ For the **Interslavic Cyrillic** alphabet: - + + [1]: http://tyflonet.com/siciliano/klaviatury [2]: http://usachov.eu/g diff --git a/src/components/Keyboard/Keyboard.jsx b/src/components/Keyboard/Keyboard.jsx index 0bd030ad2..4e3b73903 100644 --- a/src/components/Keyboard/Keyboard.jsx +++ b/src/components/Keyboard/Keyboard.jsx @@ -23,12 +23,12 @@ function KeyText({ x, y, alt, shift, children, handleMouseDown, handleMouseUp, c } function Key({ base, alt, shift, altShift, x, y }) { - const [isClicked, setisClicked] = useState(false); + const [isClicked, setIsClicked] = useState(false); const handleMouseDown = () => { - setisClicked(true); + setIsClicked(true); } const handleMouseUp = () => { - setisClicked(false); + setIsClicked(false); } return ( @@ -101,12 +101,12 @@ function ServiceKeyText({ x, y, children, correctionPointX = 17.297, correctionP } function ServiceKey({ base, x, y, width = 75, height = 41, correctionPointY }) { - const [isClicked, setisClicked] = useState(false); + const [isClicked, setIsClicked] = useState(false); const handleMouseDown = () => { - setisClicked(true); + setIsClicked(true); } const handleMouseUp = () => { - setisClicked(false); + setIsClicked(false); } return ( diff --git a/src/components/KeyboardMobile/KeyboardMobile.jsx b/src/components/KeyboardMobile/KeyboardMobile.jsx index 11ab21244..b033662c8 100644 --- a/src/components/KeyboardMobile/KeyboardMobile.jsx +++ b/src/components/KeyboardMobile/KeyboardMobile.jsx @@ -2,100 +2,43 @@ import React from 'react' import clsx from 'clsx' import styles from "./KeyboardMobile.module.scss" -export default function KeyboardMobile() { +const lathinAlphabetData = [ + ['', '', '', '', '', '', '', '', '', '', '', '', '', ''], + ['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', ''], + ['', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']', '\\'], + ['', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';', '\'', ''], + ['', 'z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '/', ''], + ['', '', '', '', '', '', '', '', ''], +]; +const cyrillicAlphabetData = [ + ['', '', '', '', '', '', '', '', '', '', '', '', '', ''], + ['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', ''], + ['', 'й', 'ц', 'у', 'к', 'е', 'н', 'г', 'ш', 'щ', 'з', 'х', 'ї', 'ґ'], + ['', 'ф', 'і', 'в', 'а', 'п', 'р', 'о', 'л', 'д', 'ж', 'є', ''], + ['', 'я', 'ч', 'с', 'м', 'и', 'т', 'ь', 'б', 'ю', '.', ''], + ['', '', '', '', '', '', '', '', ''], +]; + +export default function KeyboardMobile({ alphabet, accentColor }) { + let alphabetData = cyrillicAlphabetData; + if (alphabet === 'lathin') { + alphabetData = lathinAlphabetData; + } + return ( <> -
-
- - - - - - - - - - - - - - -
-
- ` - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 0 - - - = - -
-
- - č - š - e - r - t - y - u - i - o - p - [ - ] - \ -
-
- - a - s - d - f - g - h - j - k - l - ; - ' - -
-
- - z - ž - c - v - b - n - m - , - . - / - -
-
- - - - - - - - - - -
+
+ {alphabetData.map((row, rowIndex) => ( +
+ {row.map((letter, columnIndex) => ( + + {letter} + + ))} +
+ ))}
) } + diff --git a/src/components/KeyboardMobile/KeyboardMobile.module.scss b/src/components/KeyboardMobile/KeyboardMobile.module.scss index 594979529..974a71ef1 100644 --- a/src/components/KeyboardMobile/KeyboardMobile.module.scss +++ b/src/components/KeyboardMobile/KeyboardMobile.module.scss @@ -3,9 +3,7 @@ flex-direction: column; --active-key-bg-default: #DDE9FB; - --active-key-bg: var(--active-key-bg-default, transparent); --active-key-fg-default: #506483; - --active-key-fg: var(--active-key-fg-default, #000); --inactive-key-bg-default: #F1F3F7; --inactive-key-bg: var(--inactive-key-bg-default, transparent); @@ -15,6 +13,16 @@ padding: 3px; } +.lathin { + --active-key-bg: var(--active-key-bg-default, transparent); + --active-key-fg: var(--active-key-fg-default, #000); +} + +.cyrillic { + --active-key-bg: #DED8F1; + --active-key-fg: #3F3274; +} + .row { display: flex; margin-bottom: 6px; @@ -117,6 +125,28 @@ &:nth-child(8) { width: 17px; + background: none; + position: relative; + + &::before, + &::after { + position: absolute; + border-radius: inherit; + content: ''; + background: var(--inactive-key-bg); + width: 100%; + height: calc(50% - 1px); + } + + &::before { + top: 0; + border-radius: 3px 3px 0 0; + } + + &::after { + bottom: 0; + border-radius: 0 0 3px 3px; + } } &:nth-child(9) { @@ -124,29 +154,4 @@ } } } - - &.arrows { - background: none; - position: relative; - - &::before, - &::after { - position: absolute; - border-radius: inherit; - content: ''; - background: var(--inactive-key-bg); - width: 100%; - height: calc(50% - 1px); - } - - &::before { - top: 0; - border-radius: 3px 3px 0 0; - } - - &::after { - bottom: 0; - border-radius: 0 0 3px 3px; - } - } } \ No newline at end of file From be4236419829588d02c0663efa952257f86f196e Mon Sep 17 00:00:00 2001 From: Artem Vasylenko Date: Fri, 4 Aug 2023 18:03:31 +0300 Subject: [PATCH 19/30] KeyboardPreview --- docs/resources/keyboards/index.mdx | 8 +--- src/components/Keyboard/index.js | 1 - src/components/KeyboardMobile/index.js | 1 - .../Compact.jsx} | 10 ++--- .../Compact.module.scss} | 0 .../Keyboard.jsx => KeyboardPreview/Full.jsx} | 40 +++++++++---------- .../Full.module.scss} | 0 src/components/KeyboardPreview/Wrapper.jsx | 27 +++++++++++++ .../KeyboardPreview/Wrapper.module.scss | 0 src/components/KeyboardPreview/index.js | 1 + src/components/index.js | 6 +-- 11 files changed, 57 insertions(+), 37 deletions(-) delete mode 100644 src/components/Keyboard/index.js delete mode 100644 src/components/KeyboardMobile/index.js rename src/components/{KeyboardMobile/KeyboardMobile.jsx => KeyboardPreview/Compact.jsx} (85%) rename src/components/{KeyboardMobile/KeyboardMobile.module.scss => KeyboardPreview/Compact.module.scss} (100%) rename src/components/{Keyboard/Keyboard.jsx => KeyboardPreview/Full.jsx} (84%) rename src/components/{Keyboard/Keyboard.module.scss => KeyboardPreview/Full.module.scss} (100%) create mode 100644 src/components/KeyboardPreview/Wrapper.jsx create mode 100644 src/components/KeyboardPreview/Wrapper.module.scss create mode 100644 src/components/KeyboardPreview/index.js diff --git a/docs/resources/keyboards/index.mdx b/docs/resources/keyboards/index.mdx index 08630c347..8981d267a 100644 --- a/docs/resources/keyboards/index.mdx +++ b/docs/resources/keyboards/index.mdx @@ -1,5 +1,4 @@ -import { Keyboard } from "@site/src/components"; -import { KeyboardMobile } from "@site/src/components"; +import { KeyboardPreview } from "@site/src/components"; # Keyboards @@ -35,10 +34,7 @@ For the **Interslavic Cyrillic** alphabet: - Serbian (exempted, without "Ы") - - - - + [1]: http://tyflonet.com/siciliano/klaviatury [2]: http://usachov.eu/g diff --git a/src/components/Keyboard/index.js b/src/components/Keyboard/index.js deleted file mode 100644 index c6b55c3e3..000000000 --- a/src/components/Keyboard/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as Keyboard } from './Keyboard'; diff --git a/src/components/KeyboardMobile/index.js b/src/components/KeyboardMobile/index.js deleted file mode 100644 index 15fd23d5d..000000000 --- a/src/components/KeyboardMobile/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as KeyboardMobile } from "./KeyboardMobile"; diff --git a/src/components/KeyboardMobile/KeyboardMobile.jsx b/src/components/KeyboardPreview/Compact.jsx similarity index 85% rename from src/components/KeyboardMobile/KeyboardMobile.jsx rename to src/components/KeyboardPreview/Compact.jsx index b033662c8..9dd32357b 100644 --- a/src/components/KeyboardMobile/KeyboardMobile.jsx +++ b/src/components/KeyboardPreview/Compact.jsx @@ -1,6 +1,6 @@ import React from 'react' import clsx from 'clsx' -import styles from "./KeyboardMobile.module.scss" +import styles from "./Compact.module.scss" const lathinAlphabetData = [ ['', '', '', '', '', '', '', '', '', '', '', '', '', ''], @@ -19,10 +19,10 @@ const cyrillicAlphabetData = [ ['', '', '', '', '', '', '', '', ''], ]; -export default function KeyboardMobile({ alphabet, accentColor }) { - let alphabetData = cyrillicAlphabetData; - if (alphabet === 'lathin') { - alphabetData = lathinAlphabetData; +export default function Compact({ alphabet, accentColor = 'lathin' }) { + let alphabetData = lathinAlphabetData; + if (alphabet === 'cyrillic') { + alphabetData = cyrillicAlphabetData; } return ( diff --git a/src/components/KeyboardMobile/KeyboardMobile.module.scss b/src/components/KeyboardPreview/Compact.module.scss similarity index 100% rename from src/components/KeyboardMobile/KeyboardMobile.module.scss rename to src/components/KeyboardPreview/Compact.module.scss diff --git a/src/components/Keyboard/Keyboard.jsx b/src/components/KeyboardPreview/Full.jsx similarity index 84% rename from src/components/Keyboard/Keyboard.jsx rename to src/components/KeyboardPreview/Full.jsx index 4e3b73903..a9447429e 100644 --- a/src/components/Keyboard/Keyboard.jsx +++ b/src/components/KeyboardPreview/Full.jsx @@ -1,5 +1,5 @@ import React, { useState } from 'react' -import styles from "./Keyboard.module.scss"; +import styles from "./Full.module.scss"; function KeyText({ x, y, alt, shift, children, handleMouseDown, handleMouseUp, className }) { @@ -136,30 +136,30 @@ function ServiceKey({ base, x, y, width = 75, height = 41, correctionPointY }) { ) } -export default function Keyboard() { - const base = "`1234567890-=qwertyuiop[]\\asdfghjkl;'zxcvbnm,./"; - const alt = "ü¹²³⁴‰¶↑↓←→—≠śęěŕťùųąȯòėřṙåšďđğḥůłĺľăžźčćňńżŀèı"; - const shift = "~!@#$%^&*()_+QWERTYUIOP{}|ASDFGHJKL:\"ZXCVBNM<>?"; - const altShift = ['Ü', '÷', '¹⁄₂', '¹⁄₃', '¹⁄₄', 'fi', 'ˆ', '¿', '°', '〈', '°', ...'–±ŚĘĚŔŤÙŲĄȮÒĖŘṘÅŠĎĐĞḤŮŁĹĽĂŽŹČĆŇŃŻĿÈI'.split('')]; +const base = "`1234567890-=qwertyuiop[]\\asdfghjkl;'zxcvbnm,./"; +const alt = "ü¹²³⁴‰¶↑↓←→—≠śęěŕťùųąȯòėřṙåšďđğḥůłĺľăžźčćňńżŀèı"; +const shift = "~!@#$%^&*()_+QWERTYUIOP{}|ASDFGHJKL:\"ZXCVBNM<>?"; +const altShift = ['Ü', '÷', '¹⁄₂', '¹⁄₃', '¹⁄₄', 'fi', 'ˆ', '¿', '°', '〈', '°', ...'–±ŚĘĚŔŤÙŲĄȮÒĖŘṘÅŠĎĐĞḤŮŁĹĽĂŽŹČĆŇŃŻĿÈI'.split('')]; - function keyList(startX, y, startNumber, endNumber) { - let x = startX; - const keyRow = []; +function keyList(startX, y, startNumber, endNumber) { + let x = startX; + const keyRow = []; - for (let i = startNumber; i <= endNumber; i++) { - keyRow.push( - - ) - x += 48; - } - return keyRow; + for (let i = startNumber; i <= endNumber; i++) { + keyRow.push( + + ) + x += 48; } + return keyRow; +} - const firstRow = keyList(9.5, 28.5, 0, 12); - const secondRow = keyList(91.5, 76.5, 13, 25); - const thidRow = keyList(105.5, 126.5, 26, 36); - const fouthRow = keyList(129.5, 174.5, 37, 46); +const firstRow = keyList(9.5, 28.5, 0, 12); +const secondRow = keyList(91.5, 76.5, 13, 25); +const thidRow = keyList(105.5, 126.5, 26, 36); +const fouthRow = keyList(129.5, 174.5, 37, 46); +export default function Full({ alphabet, accentColor }) { return ( <> { + const handleResize = () => { + setIsCompact(window.innerWidth < 768); + } + window.addEventListener('resize', handleResize); + + return () => { + window.removeEventListener('resize', handleResize); + }; + }, []) + + return ( + <> + {isCompact + ? + : + } + + ) +} diff --git a/src/components/KeyboardPreview/Wrapper.module.scss b/src/components/KeyboardPreview/Wrapper.module.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/KeyboardPreview/index.js b/src/components/KeyboardPreview/index.js new file mode 100644 index 000000000..3a1fd6bfa --- /dev/null +++ b/src/components/KeyboardPreview/index.js @@ -0,0 +1 @@ +export { default as KeyboardPreview } from "../KeyboardPreview/Wrapper"; diff --git a/src/components/index.js b/src/components/index.js index c3eb569e4..669a5a2dc 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,9 +1,8 @@ import { Banner, Carousel, Features } from "./homepage"; import { CustomAfterSection, CustomBeforeSection } from "./sections"; import { IPA } from "./IPA"; -import { Keyboard } from "./Keyboard"; import { PlatformDownloads } from "./PlatformDownloads"; -import { KeyboardMobile } from "./KeyboardMobile"; +import { KeyboardPreview } from "./KeyboardPreview"; export { Banner, @@ -12,7 +11,6 @@ export { CustomBeforeSection, Features, IPA, - Keyboard, PlatformDownloads, - KeyboardMobile, + KeyboardPreview, }; From edb23cea032a9569f1aea75a418408c882e01eba Mon Sep 17 00:00:00 2001 From: Artem Vasylenko Date: Wed, 9 Aug 2023 19:17:15 +0300 Subject: [PATCH 20/30] CompactJSON in progress --- src/components/KeyboardPreview/Compact.jsx | 8 +- .../KeyboardPreview/Compact.module.scss | 26 +- .../KeyboardPreview/CompactJSON.jsx | 75 +++++ .../KeyboardPreview/CompactJSON.module.scss | 167 ++++++++++ src/components/KeyboardPreview/Full.jsx | 40 +-- .../KeyboardPreview/Full.module.scss | 44 +-- src/components/KeyboardPreview/Wrapper.jsx | 28 +- .../KeyboardPreview/Wrapper.module.scss | 3 + src/components/KeyboardPreview/index.js | 2 +- src/components/KeyboardPreview/isv.json | 311 ++++++++++++++++++ src/components/KeyboardPreview/layout1.json | 117 +++++++ src/components/KeyboardPreview/layout2.json | 49 +++ src/hooks/index.js | 1 + src/hooks/useResizeObserver.js | 37 +++ 14 files changed, 817 insertions(+), 91 deletions(-) create mode 100644 src/components/KeyboardPreview/CompactJSON.jsx create mode 100644 src/components/KeyboardPreview/CompactJSON.module.scss create mode 100644 src/components/KeyboardPreview/isv.json create mode 100644 src/components/KeyboardPreview/layout1.json create mode 100644 src/components/KeyboardPreview/layout2.json create mode 100644 src/hooks/index.js create mode 100644 src/hooks/useResizeObserver.js diff --git a/src/components/KeyboardPreview/Compact.jsx b/src/components/KeyboardPreview/Compact.jsx index 9dd32357b..e57f55d06 100644 --- a/src/components/KeyboardPreview/Compact.jsx +++ b/src/components/KeyboardPreview/Compact.jsx @@ -19,7 +19,7 @@ const cyrillicAlphabetData = [ ['', '', '', '', '', '', '', '', ''], ]; -export default function Compact({ alphabet, accentColor = 'lathin' }) { +export default function Compact({ alphabet, script = 'Cyrl' }) { let alphabetData = lathinAlphabetData; if (alphabet === 'cyrillic') { alphabetData = cyrillicAlphabetData; @@ -27,17 +27,17 @@ export default function Compact({ alphabet, accentColor = 'lathin' }) { return ( <> -
+
{alphabetData.map((row, rowIndex) => (
{row.map((letter, columnIndex) => ( - + {letter} ))}
))} -
+
) } diff --git a/src/components/KeyboardPreview/Compact.module.scss b/src/components/KeyboardPreview/Compact.module.scss index 974a71ef1..e2630f909 100644 --- a/src/components/KeyboardPreview/Compact.module.scss +++ b/src/components/KeyboardPreview/Compact.module.scss @@ -2,23 +2,21 @@ display: inline-flex; flex-direction: column; - --active-key-bg-default: #DDE9FB; - --active-key-fg-default: #506483; - --inactive-key-bg-default: #F1F3F7; - --inactive-key-bg: var(--inactive-key-bg-default, transparent); + --active-key-bg: #DDE9FB; + --active-key-fg: #506483; + --inactive-key-bg: #F1F3F7; + + --inactive-key-bg-default: var(--inactive-key-bg, transparent); + --active-key-bg-default: var(--active-key-bg, transparent); + --active-key-fg-default: var(--active-key-fg, #000); font: 700 13px/14px sans-serif; - border: 1px solid var(--inactive-key-bg); + border: 1px solid var(--inactive-key-bg-default); padding: 3px; } -.lathin { - --active-key-bg: var(--active-key-bg-default, transparent); - --active-key-fg: var(--active-key-fg-default, #000); -} - -.cyrillic { +.Cyrl { --active-key-bg: #DED8F1; --active-key-fg: #3F3274; } @@ -50,8 +48,8 @@ border-radius: 3px; text-align: center; - background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 10%), var(--active-key-bg); - color: var(--active-key-fg); + background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 10%), var(--active-key-bg-default); + color: var(--active-key-fg-default); &.inactive { background: #f1f3f7; @@ -133,7 +131,7 @@ position: absolute; border-radius: inherit; content: ''; - background: var(--inactive-key-bg); + background: var(--inactive-key-bg-default); width: 100%; height: calc(50% - 1px); } diff --git a/src/components/KeyboardPreview/CompactJSON.jsx b/src/components/KeyboardPreview/CompactJSON.jsx new file mode 100644 index 000000000..f3441124f --- /dev/null +++ b/src/components/KeyboardPreview/CompactJSON.jsx @@ -0,0 +1,75 @@ +import React, { useState, useEffect } from 'react' +import clsx from 'clsx' +import styles from "./CompactJSON.module.scss" + +const SHIFT = 1; +const CTRL = 2; +const ALT = 4; + +document.addEventListener('keydown', function (e) { + console.log('Key pressed:', e.key); + console.log('Event code:', e.code); +}); + + +export default function CompactJSON({ states, script = 'Cyrl' }) { + const [currentState, setCurrentState] = useState(0); + const [pressedKeys, setPressedKeys] = useState({}); + const [isShiftPressed, setIsShiftPressed] = useState(false); + + let currentAlphabetData = states[currentState]; + + const handleKeyDown = (keyIndex, e) => { + setPressedKeys(prevState => ({ + ...prevState, + [keyIndex]: true, + })); + + if (e.code === "ShiftLeft" || e.code === "ShiftRight") { + setIsShiftPressed(true); + } + }; + + const handleKeyUp = (keyIndex, e) => { + setPressedKeys(prevState => ({ + ...prevState, + [keyIndex]: false, + })); + + if (e.code === "ShiftLeft" || e.code === "ShiftRight") { + setIsShiftPressed(false); + } + }; + + useEffect(() => { + if (isShiftPressed) { + setCurrentState(currentState | SHIFT); + } else { + setCurrentState(currentState & ~SHIFT); + } + }, [isShiftPressed, currentState]); + + return ( + <> +
+
handleKeyDown(-1, e)} + onMouseUp={(e) => handleKeyUp(-1, e)} + >shift
+
ctrl
+
alt
+ {Object.values(currentAlphabetData).map((letter, letterIndex) => ( +
handleKeyDown(letterIndex, e)} + onMouseUp={(e) => handleKeyUp(letterIndex, e)} + > + {letter} +
+ ))} +
+ + ) +} diff --git a/src/components/KeyboardPreview/CompactJSON.module.scss b/src/components/KeyboardPreview/CompactJSON.module.scss new file mode 100644 index 000000000..cfde710dd --- /dev/null +++ b/src/components/KeyboardPreview/CompactJSON.module.scss @@ -0,0 +1,167 @@ +.keyboard { + display: inline-flex; + flex-wrap: wrap; + + --active-key-bg: #DDE9FB; + --active-key-fg: #506483; + --inactive-key-bg: #F1F3F7; + + --inactive-key-bg-default: var(--inactive-key-bg, transparent); + --active-key-bg-default: var(--active-key-bg, transparent); + --active-key-fg-default: var(--active-key-fg, #000); + + font: 700 13px/14px sans-serif; + + border: 1px solid var(--inactive-key-bg-default); + padding: 3px; +} + +.Cyrl { + --active-key-bg: #DED8F1; + --active-key-fg: #3F3274; +} + +.row { + display: flex; + margin-bottom: 6px; + + &:last-child { + margin-bottom: 0; + } + + >* { + margin-right: 4px; + } + + > :last-child { + margin-right: 0; + } +} + +.key { + display: flex; + width: 17px; + height: 16px; + justify-content: center; + align-items: center; + + border-radius: 3px; + text-align: center; + + background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 10%), var(--active-key-bg-default); + color: var(--active-key-fg-default); + + + + &.inactive { + background: #f1f3f7; + + .row:nth-child(1)>& { + height: 9px; + + &:first-child { + width: 18px; + } + + &:last-child { + width: 26px; + } + } + + .row:nth-child(2)>& { + &:last-child { + width: 26px; + } + } + + .row:nth-child(3)>& { + &:first-child { + width: 27px; + } + + &:last-child { + width: 26px; + } + } + + .row:nth-child(4)>& { + &:first-child { + width: 33px; + } + + &:last-child { + width: 32px; + } + } + + .row:nth-child(5)>& { + &:first-child { + width: 43px; + } + + &:last-child { + width: 43px; + } + } + + .row:nth-child(6)>& { + width: 27px; + + &:nth-child(4) { + width: 99px; + } + + &:nth-child(5) { + width: 21px; + } + + &:nth-child(6) { + width: 17px; + } + + &:nth-child(7) { + width: 17px; + } + + &:nth-child(8) { + width: 17px; + background: none; + position: relative; + + &::before, + &::after { + position: absolute; + border-radius: inherit; + content: ''; + background: var(--inactive-key-bg-default); + width: 100%; + height: calc(50% - 1px); + } + + &::before { + top: 0; + border-radius: 3px 3px 0 0; + } + + &::after { + bottom: 0; + border-radius: 0 0 3px 3px; + } + } + + &:nth-child(9) { + width: 17px; + } + } + } +} + +.pressed { + background-color: #adcaf5; +} + +.serviceKey { + padding: 0 1rem; + border: solid 1px #000; + border-radius: 3px; +} \ No newline at end of file diff --git a/src/components/KeyboardPreview/Full.jsx b/src/components/KeyboardPreview/Full.jsx index a9447429e..bdf484494 100644 --- a/src/components/KeyboardPreview/Full.jsx +++ b/src/components/KeyboardPreview/Full.jsx @@ -31,51 +31,40 @@ function Key({ base, alt, shift, altShift, x, y }) { setIsClicked(false); } return ( - + {base} {alt} {shift} {altShift} @@ -159,7 +148,8 @@ const secondRow = keyList(91.5, 76.5, 13, 25); const thidRow = keyList(105.5, 126.5, 26, 36); const fouthRow = keyList(129.5, 174.5, 37, 46); -export default function Full({ alphabet, accentColor }) { +export default function Full({ name, lang, script, states }) { + return ( <> - - - + - - - - - ) diff --git a/src/components/KeyboardPreview/Full.module.scss b/src/components/KeyboardPreview/Full.module.scss index 7efadd759..0526052aa 100644 --- a/src/components/KeyboardPreview/Full.module.scss +++ b/src/components/KeyboardPreview/Full.module.scss @@ -1,31 +1,31 @@ -[data-theme='light'] { - --text-color-base: #444; - --text-color-alt: #337093; - --text-color-shift: #8E4040; - --text-color-alt-shift: #671584; - --text-color-service: #646464; +.svgKeyboard { + font-family: sans-serif; - --svg-fill-color: #fff; + [data-theme='light'] & { + --text-color-base: #444; + --text-color-alt: #337093; + --text-color-shift: #8E4040; + --text-color-alt-shift: #671584; + --text-color-service: #646464; - --key-fill-color: #fff; - --key-fill-click-color: #e7f3ff; -} + --svg-fill-color: #fff; -[data-theme='dark'] { - --text-color-base: #eaebec; - --text-color-alt: #83a2bb; - --text-color-shift: #a0808c; - --text-color-alt-shift: #c3b9da; - --text-color-service: #eaebec; + --key-fill-color: #fff; + --key-fill-click-color: #e7f3ff; + } - --svg-fill-color: #1a2933; + [data-theme='dark'] & { + --text-color-base: #eaebec; + --text-color-alt: #83a2bb; + --text-color-shift: #a0808c; + --text-color-alt-shift: #c3b9da; + --text-color-service: #eaebec; - --key-fill-color: #1a2933; - --key-fill-click-color: #274255; -} + --svg-fill-color: #1a2933; -.svgKeyboard { - font-family: sans-serif; + --key-fill-color: #1a2933; + --key-fill-click-color: #274255; + } } .textColorBase { diff --git a/src/components/KeyboardPreview/Wrapper.jsx b/src/components/KeyboardPreview/Wrapper.jsx index 79fb4e2c3..fceff89a7 100644 --- a/src/components/KeyboardPreview/Wrapper.jsx +++ b/src/components/KeyboardPreview/Wrapper.jsx @@ -1,27 +1,21 @@ import React, { useEffect, useState } from 'react' +import { useResizeObserver } from '@site/src/hooks' import styles from './Wrapper.module.scss' import FullKeyboardPreview from './Full' import CompactKeyboardPreview from './Compact' +import CompactJSON from './CompactJSON' +import layout from './isv.json' export default function Wrapper({ alphabet, accentColor }) { - const [isCompact, setIsCompact] = useState(window.innerWidth < 768); - useEffect(() => { - const handleResize = () => { - setIsCompact(window.innerWidth < 768); - } - window.addEventListener('resize', handleResize); - - return () => { - window.removeEventListener('resize', handleResize); - }; - }, []) + const [ref, dimensions] = useResizeObserver(); + const KeyboardPreview = dimensions.width < 715 + ? CompactKeyboardPreview + : FullKeyboardPreview; return ( - <> - {isCompact - ? - : - } - +
+ + +
) } diff --git a/src/components/KeyboardPreview/Wrapper.module.scss b/src/components/KeyboardPreview/Wrapper.module.scss index e69de29bb..beb608609 100644 --- a/src/components/KeyboardPreview/Wrapper.module.scss +++ b/src/components/KeyboardPreview/Wrapper.module.scss @@ -0,0 +1,3 @@ +.container { + width: 100%; +} \ No newline at end of file diff --git a/src/components/KeyboardPreview/index.js b/src/components/KeyboardPreview/index.js index 3a1fd6bfa..b8d602f1c 100644 --- a/src/components/KeyboardPreview/index.js +++ b/src/components/KeyboardPreview/index.js @@ -1 +1 @@ -export { default as KeyboardPreview } from "../KeyboardPreview/Wrapper"; +export { default as KeyboardPreview } from "./Wrapper"; diff --git a/src/components/KeyboardPreview/isv.json b/src/components/KeyboardPreview/isv.json new file mode 100644 index 000000000..7f176339b --- /dev/null +++ b/src/components/KeyboardPreview/isv.json @@ -0,0 +1,311 @@ +{ + "name": "Medžuslovjansky (latinica)", + "copyright": "(c) 2013 Adam Gola", + "company": "Adam Gola, Roberto Lombino jr.", + "localeName": "sl-SI", + "localeId": "00000424", + "script": "Latn", + "version": 1, + "states": { + "0": { + "Digit1": "1", + "Digit2": "2", + "Digit3": "3", + "Digit4": "4", + "Digit5": "5", + "Digit6": "6", + "Digit7": "7", + "Digit8": "8", + "Digit9": "9", + "Digit0": "0", + "Minus": "-", + "Equal": "=", + "KeyQ": "q", + "KeyW": "w", + "KeyE": "e", + "KeyR": "r", + "KeyT": "t", + "KeyY": "y", + "KeyU": "u", + "KeyI": "i", + "KeyO": "o", + "KeyP": "p", + "BracketLeft": "[", + "BracketRight": "]", + "KeyA": "a", + "KeyS": "s", + "KeyD": "d", + "KeyF": "f", + "KeyG": "g", + "KeyH": "h", + "KeyJ": "j", + "KeyK": "k", + "KeyL": "l", + "Semicolon": ";", + "Quote": "'", + "Enter": [ + "`" + ], + "Backslash": "\\", + "KeyZ": "z", + "KeyX": "x", + "KeyC": "c", + "KeyV": "v", + "KeyB": "b", + "KeyN": "n", + "KeyM": "m", + "Comma": ",", + "Period": ".", + "Slash": "/", + "Space": " ", + "Key\\": "\\", + "Decimal": "," + }, + "1": { + "Digit1": "!", + "Digit2": "@", + "Digit3": "#", + "Digit4": "$", + "Digit5": "%", + "Digit6": "^", + "Digit7": "&", + "Digit8": "*", + "Digit9": "(", + "Digit0": ")", + "Minus": "_", + "Equal": "+", + "KeyQ": "Q", + "KeyW": "W", + "KeyE": "E", + "KeyR": "R", + "KeyT": "T", + "KeyY": "Y", + "KeyU": "U", + "KeyI": "I", + "KeyO": "O", + "KeyP": "P", + "BracketLeft": "{", + "BracketRight": "}", + "KeyA": "A", + "KeyS": "S", + "KeyD": "D", + "KeyF": "F", + "KeyG": "G", + "KeyH": "H", + "KeyJ": "J", + "KeyK": "K", + "KeyL": "L", + "Semicolon": ":", + "Quote": "\"", + "Enter": [ + "~" + ], + "Backslash": "|", + "KeyZ": "Z", + "KeyX": "X", + "KeyC": "C", + "KeyV": "V", + "KeyB": "B", + "KeyN": "N", + "KeyM": "M", + "Comma": "<", + "Period": ">", + "Slash": "?", + "Space": " ", + "Key\\": "|", + "Decimal": "," + }, + "2": { + "Digit1": "!", + "Digit2": "@", + "Digit3": "#", + "Digit4": "$", + "Digit5": "%", + "Digit6": "^", + "Digit7": "&", + "Digit8": "*", + "Digit9": "(", + "Digit0": ")", + "Minus": "_", + "Equal": "+", + "KeyQ": "Q", + "KeyW": "W", + "KeyE": "E", + "KeyR": "R", + "KeyT": "T", + "KeyY": "Y", + "KeyU": "U", + "KeyI": "I", + "KeyO": "O", + "KeyP": "P", + "BracketLeft": "{", + "BracketRight": "}", + "KeyA": "A", + "KeyS": "S", + "KeyD": "D", + "KeyF": "F", + "KeyG": "G", + "KeyH": "H", + "KeyJ": "J", + "KeyK": "K", + "KeyL": "L", + "Semicolon": ":", + "Quote": "\"", + "Enter": [ + "~" + ], + "Backslash": "|", + "KeyZ": "Z", + "KeyX": "X", + "KeyC": "C", + "KeyV": "V", + "KeyB": "B", + "KeyN": "N", + "KeyM": "M", + "Comma": "<", + "Period": ">", + "Slash": "?", + "Space": " ", + "Key\\": "|", + "Decimal": "," + }, + "6": { + "Digit1": "‚", + "Digit2": "‘", + "Digit3": "’", + "Digit4": "€", + "Digit5": [ + "¨" + ], + "Digit6": [ + "ˆ" + ], + "Digit7": [ + "˝" + ], + "Digit8": [ + "˙" + ], + "Digit9": [ + "˘" + ], + "Digit0": [ + "/" + ], + "Minus": "–", + "Equal": "−", + "KeyQ": "ś", + "KeyW": "ę", + "KeyE": "ě", + "KeyR": "ŕ", + "KeyT": "%%", + "KeyY": "", + "KeyU": "ų", + "KeyI": "ė", + "KeyO": "ȯ", + "KeyP": "§", + "BracketLeft": "«", + "BracketRight": "»", + "KeyA": "å", + "KeyS": "š", + "KeyD": "%%", + "KeyF": "đ", + "KeyG": "", + "KeyH": "", + "KeyJ": "", + "KeyK": "×", + "KeyL": "ĺ", + "Semicolon": "„", + "Quote": "’", + "Enter": [ + "ˋ" + ], + "Backslash": "÷", + "KeyZ": "ž", + "KeyX": "ź", + "KeyC": "č", + "KeyV": "ć", + "KeyB": "", + "KeyN": "ń", + "KeyM": "™", + "Comma": "‰", + "Period": "…", + "Slash": "°", + "Space": "", + "Key\\": "÷", + "Decimal": "" + }, + "7": { + "Digit1": [ + "̏" + ], + "Digit2": [ + "¯" + ], + "Digit3": [ + "̑" + ], + "Digit4": [ + "¤" + ], + "Digit5": [ + "˜" + ], + "Digit6": [ + "¸" + ], + "Digit7": [ + "," + ], + "Digit8": [ + "¦" + ], + "Digit9": [ + "˛" + ], + "Digit0": [ + "·" + ], + "Minus": "—", + "Equal": "±", + "KeyQ": "Ś", + "KeyW": "Ę", + "KeyE": "Ě", + "KeyR": "Ŕ", + "KeyT": "%%", + "KeyY": "", + "KeyU": "Ų", + "KeyI": "Ė", + "KeyO": "Ȯ", + "KeyP": "¶", + "BracketLeft": "‹", + "BracketRight": "›", + "KeyA": "Å", + "KeyS": "Š", + "KeyD": "%%", + "KeyF": "Đ", + "KeyG": "", + "KeyH": "", + "KeyJ": "", + "KeyK": "©", + "KeyL": "Ĺ", + "Semicolon": "“", + "Quote": "”", + "Enter": "́", + "Backslash": "∙", + "KeyZ": "Ž", + "KeyX": "Ź", + "KeyC": "Č", + "KeyV": "Ć", + "KeyB": "", + "KeyN": "Ń", + "KeyM": "®", + "Comma": "′", + "Period": "″", + "Slash": "­", + "Space": " ", + "Key\\": "∙", + "Decimal": "" + } + } +} diff --git a/src/components/KeyboardPreview/layout1.json b/src/components/KeyboardPreview/layout1.json new file mode 100644 index 000000000..a9bfab8a1 --- /dev/null +++ b/src/components/KeyboardPreview/layout1.json @@ -0,0 +1,117 @@ +{ + "name": "Українська (розширена)", + "lang": "uk", + "script": "Cyrl", + "states": { + "0": { + "48": "0", + "49": "1", + "50": "2", + "51": "3", + "52": "4", + "53": "5", + "54": "6", + "55": "7", + "56": "8", + "57": "9", + "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", + "186": ";", + "187": "=", + "188": ",", + "189": "-", + "190": ".", + "191": "/", + "192": "`", + "219": "[", + "220": "\\", + "221": "]", + "222": "'" + }, + "1": { + "48": ")", + "49": "!", + "50": "@", + "51": "#", + "52": "$", + "53": "%", + "54": "^", + "55": "&", + "56": "*", + "57": "(", + "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", + "186": ":", + "187": "+", + "188": "<", + "189": "_", + "190": ">", + "191": "?", + "192": "~", + "219": "{", + "220": "|", + "221": "}", + "222": "\"" + }, + "2": { + "81": "й", + "87": "ц", + "69": "у" + }, + "3": { + "45": 16, + "81": "Й", + "87": "Ц", + "69": "У" + }, + "16": {} + } +} diff --git a/src/components/KeyboardPreview/layout2.json b/src/components/KeyboardPreview/layout2.json new file mode 100644 index 000000000..667d233cd --- /dev/null +++ b/src/components/KeyboardPreview/layout2.json @@ -0,0 +1,49 @@ +{ + "39": "'", + "44": ",", + "45": "-", + "46": ".", + "47": "/", + "48": "0", + "49": "1", + "50": "2", + "51": "3", + "52": "4", + "53": "5", + "54": "6", + "55": "7", + "56": "8", + "57": "9", + "59": ";", + "61": "=", + "91": "[", + "92": "\\", + "93": "]", + "96": "`", + "97": "a", + "98": "b", + "99": "c", + "100": "d", + "101": "e", + "102": "f", + "103": "g", + "104": "h", + "105": "i", + "106": "j", + "107": "k", + "108": "l", + "109": "m", + "110": "n", + "111": "o", + "112": "p", + "113": "q", + "114": "r", + "115": "s", + "116": "t", + "117": "u", + "118": "v", + "119": "w", + "120": "x", + "121": "y", + "122": "z" +} diff --git a/src/hooks/index.js b/src/hooks/index.js new file mode 100644 index 000000000..255e4d229 --- /dev/null +++ b/src/hooks/index.js @@ -0,0 +1 @@ +export * from "./useResizeObserver"; diff --git a/src/hooks/useResizeObserver.js b/src/hooks/useResizeObserver.js new file mode 100644 index 000000000..b795be2e5 --- /dev/null +++ b/src/hooks/useResizeObserver.js @@ -0,0 +1,37 @@ +import { useEffect, useRef, useState } from "react"; + +export const useResizeObserver = () => { + const ref = useRef(null); + const [dimensions, setDimensions] = useState({ + width: Number.NaN, + height: Number.NaN, + scrollWidth: Number.NaN, + scrollHeight: Number.NaN, + }); + + useEffect(() => { + if (typeof ResizeObserver === "undefined") { + return; + } + + const observer = new ResizeObserver((entries) => { + for (let entry of entries) { + const { width, height } = entry.contentRect; + const { scrollWidth, scrollHeight } = entry.target; + setDimensions({ width, height, scrollWidth, scrollHeight }); + } + }); + + if (ref.current) { + observer.observe(ref.current); + } + + return () => { + if (ref.current) { + observer.unobserve(ref.current); + } + }; + }, []); + + return [ref, dimensions]; +}; From 123a82784f947c796f60ac60c53cb6ab398f0db8 Mon Sep 17 00:00:00 2001 From: Artem Vasylenko Date: Fri, 11 Aug 2023 18:26:36 +0300 Subject: [PATCH 21/30] keyboard context in progress --- .../KeyboardPreview/CompactJSON.jsx | 93 ++++++++++--------- .../KeyboardPreview/CompactJSON.module.scss | 4 + src/components/KeyboardPreview/Wrapper.jsx | 7 +- .../KeyboardPreview/keyboard-context.js | 48 ++++++++++ 4 files changed, 104 insertions(+), 48 deletions(-) create mode 100644 src/components/KeyboardPreview/keyboard-context.js diff --git a/src/components/KeyboardPreview/CompactJSON.jsx b/src/components/KeyboardPreview/CompactJSON.jsx index f3441124f..dbf209741 100644 --- a/src/components/KeyboardPreview/CompactJSON.jsx +++ b/src/components/KeyboardPreview/CompactJSON.jsx @@ -1,75 +1,76 @@ -import React, { useState, useEffect } from 'react' -import clsx from 'clsx' -import styles from "./CompactJSON.module.scss" +import React, { useState } from 'react'; +import clsx from 'clsx'; +import styles from "./CompactJSON.module.scss"; +import { useKeyboard } from './keyboard-context'; +import layout from './isv.json'; const SHIFT = 1; const CTRL = 2; const ALT = 4; -document.addEventListener('keydown', function (e) { - console.log('Key pressed:', e.key); - console.log('Event code:', e.code); -}); - - -export default function CompactJSON({ states, script = 'Cyrl' }) { - const [currentState, setCurrentState] = useState(0); +export default function CompactJSON({ script = 'Cyrl' }) { + const { keyboardState, toggleModifier } = useKeyboard(); const [pressedKeys, setPressedKeys] = useState({}); - const [isShiftPressed, setIsShiftPressed] = useState(false); - - let currentAlphabetData = states[currentState]; - const handleKeyDown = (keyIndex, e) => { - setPressedKeys(prevState => ({ - ...prevState, - [keyIndex]: true, - })); - - if (e.code === "ShiftLeft" || e.code === "ShiftRight") { - setIsShiftPressed(true); - } - }; + let currentAlphabetData = layout.states[keyboardState.state]; - const handleKeyUp = (keyIndex, e) => { - setPressedKeys(prevState => ({ - ...prevState, - [keyIndex]: false, - })); - - if (e.code === "ShiftLeft" || e.code === "ShiftRight") { - setIsShiftPressed(false); + const handleKeyPress = (keyIndex, e) => { + if (keyIndex === SHIFT || keyIndex === CTRL || keyIndex === ALT) { + toggleModifier(keyIndex); + } else { + setPressedKeys(prevState => ({ + ...prevState, + [keyIndex]: true, + })); } }; - useEffect(() => { - if (isShiftPressed) { - setCurrentState(currentState | SHIFT); + const handleKeyRelease = (keyIndex, e) => { + if (keyIndex === SHIFT || keyIndex === CTRL || keyIndex === ALT) { + toggleModifier(keyIndex); } else { - setCurrentState(currentState & ~SHIFT); + setPressedKeys(prevState => ({ + ...prevState, + [keyIndex]: false, + })); } - }, [isShiftPressed, currentState]); + }; return ( <>
handleKeyDown(-1, e)} - onMouseUp={(e) => handleKeyUp(-1, e)} - >shift
-
ctrl
-
alt
+ className={clsx(styles.serviceKey, keyboardState.shift && styles.pressed)} + onMouseDown={(e) => handleKeyPress(SHIFT, e)} + onMouseUp={(e) => handleKeyRelease(SHIFT, e)} + > + shift +
+
handleKeyPress(CTRL, e)} + onMouseUp={(e) => handleKeyRelease(CTRL, e)} + > + ctrl +
+
handleKeyPress(ALT, e)} + onMouseUp={(e) => handleKeyRelease(ALT, e)} + > + alt +
{Object.values(currentAlphabetData).map((letter, letterIndex) => (
handleKeyDown(letterIndex, e)} - onMouseUp={(e) => handleKeyUp(letterIndex, e)} + onMouseDown={(e) => handleKeyPress(letterIndex, e)} + onMouseUp={(e) => handleKeyRelease(letterIndex, e)} > {letter}
))}
- ) + ); } diff --git a/src/components/KeyboardPreview/CompactJSON.module.scss b/src/components/KeyboardPreview/CompactJSON.module.scss index cfde710dd..b6c874cd8 100644 --- a/src/components/KeyboardPreview/CompactJSON.module.scss +++ b/src/components/KeyboardPreview/CompactJSON.module.scss @@ -164,4 +164,8 @@ padding: 0 1rem; border: solid 1px #000; border-radius: 3px; +} + +.pressed { + color: red; } \ No newline at end of file diff --git a/src/components/KeyboardPreview/Wrapper.jsx b/src/components/KeyboardPreview/Wrapper.jsx index fceff89a7..3f683904c 100644 --- a/src/components/KeyboardPreview/Wrapper.jsx +++ b/src/components/KeyboardPreview/Wrapper.jsx @@ -5,6 +5,7 @@ import FullKeyboardPreview from './Full' import CompactKeyboardPreview from './Compact' import CompactJSON from './CompactJSON' import layout from './isv.json' +import { KeyboardProvider } from './keyboard-context' export default function Wrapper({ alphabet, accentColor }) { const [ref, dimensions] = useResizeObserver(); @@ -14,8 +15,10 @@ export default function Wrapper({ alphabet, accentColor }) { return (
- - + + + +
) } diff --git a/src/components/KeyboardPreview/keyboard-context.js b/src/components/KeyboardPreview/keyboard-context.js new file mode 100644 index 000000000..270ac4f96 --- /dev/null +++ b/src/components/KeyboardPreview/keyboard-context.js @@ -0,0 +1,48 @@ +import React, { createContext, useContext, useState } from "react"; + +export const KeyboardContext = createContext(); + +export function KeyboardProvider({ children }) { + const [keyboardState, setKeyboardState] = useState({ + state: 0, + alt: false, + shift: false, + ctrl: false, + win: false, + meta: false, + capsLock: false, + }); + + const toggleModifier = (modifier) => { + setKeyboardState((prevState) => { + let newState = prevState.state ^ modifier; + console.log(newState); + console.log(keyboardState); + + if ( + (newState === 1 || + newState === 2 || + newState === 6 || + newState === 7) && + newState !== prevState.state + ) { + return { + ...prevState, + state: newState, + }; + } + + return prevState; + }); + }; + + return ( + + {children} + + ); +} + +export function useKeyboard() { + return useContext(KeyboardContext); +} From a065d62d3b716872852e5d52ca2947ffed5496f7 Mon Sep 17 00:00:00 2001 From: Artem Vasylenko Date: Fri, 11 Aug 2023 23:31:31 +0300 Subject: [PATCH 22/30] keyboard context in progress --- .../KeyboardPreview/CompactJSON.jsx | 71 +++++++++++-------- .../KeyboardPreview/keyboard-context.js | 68 ++++++++++++------ 2 files changed, 88 insertions(+), 51 deletions(-) diff --git a/src/components/KeyboardPreview/CompactJSON.jsx b/src/components/KeyboardPreview/CompactJSON.jsx index dbf209741..e683d99ad 100644 --- a/src/components/KeyboardPreview/CompactJSON.jsx +++ b/src/components/KeyboardPreview/CompactJSON.jsx @@ -1,39 +1,57 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import clsx from 'clsx'; import styles from "./CompactJSON.module.scss"; import { useKeyboard } from './keyboard-context'; import layout from './isv.json'; -const SHIFT = 1; -const CTRL = 2; -const ALT = 4; - export default function CompactJSON({ script = 'Cyrl' }) { - const { keyboardState, toggleModifier } = useKeyboard(); + const { keyboardState, handleKeyDown, handleKeyUp, toggleState } = useKeyboard(); const [pressedKeys, setPressedKeys] = useState({}); + useEffect(() => { + const handleKeyDownEvent = (e) => { + if (e.code === 'ShiftLeft' || e.code === 'ShiftRight') { + handleKeyDown('shift'); + } else if (e.code === 'ControlLeft' || e.code === 'ControlRight') { + handleKeyDown('ctrl'); + } else if (e.code === 'AltLeft' || e.code === 'AltRight') { + handleKeyDown('alt'); + } + }; + + const handleKeyUpEvent = (e) => { + if (e.code === 'ShiftLeft' || e.code === 'ShiftRight') { + handleKeyUp('shift'); + } else if (e.code === 'ControlLeft' || e.code === 'ControlRight') { + handleKeyUp('ctrl'); + } else if (e.code === 'AltLeft' || e.code === 'AltRight') { + handleKeyUp('alt'); + } + }; + + window.addEventListener('keydown', handleKeyDownEvent); + window.addEventListener('keyup', handleKeyUpEvent); + + return () => { + window.removeEventListener('keydown', handleKeyDownEvent); + window.removeEventListener('keyup', handleKeyUpEvent); + }; + }, []); + let currentAlphabetData = layout.states[keyboardState.state]; const handleKeyPress = (keyIndex, e) => { - if (keyIndex === SHIFT || keyIndex === CTRL || keyIndex === ALT) { - toggleModifier(keyIndex); - } else { - setPressedKeys(prevState => ({ - ...prevState, - [keyIndex]: true, - })); - } + setPressedKeys(prevState => ({ + ...prevState, + [keyIndex]: true, + })); }; const handleKeyRelease = (keyIndex, e) => { - if (keyIndex === SHIFT || keyIndex === CTRL || keyIndex === ALT) { - toggleModifier(keyIndex); - } else { - setPressedKeys(prevState => ({ - ...prevState, - [keyIndex]: false, - })); - } + setPressedKeys(prevState => ({ + ...prevState, + [keyIndex]: false, + })); }; return ( @@ -41,22 +59,19 @@ export default function CompactJSON({ script = 'Cyrl' }) {
handleKeyPress(SHIFT, e)} - onMouseUp={(e) => handleKeyRelease(SHIFT, e)} + onClick={() => toggleState('shift')} > shift
handleKeyPress(CTRL, e)} - onMouseUp={(e) => handleKeyRelease(CTRL, e)} + onClick={() => toggleState('ctrl')} > ctrl
handleKeyPress(ALT, e)} - onMouseUp={(e) => handleKeyRelease(ALT, e)} + onClick={() => toggleState('alt')} > alt
diff --git a/src/components/KeyboardPreview/keyboard-context.js b/src/components/KeyboardPreview/keyboard-context.js index 270ac4f96..36d4ac085 100644 --- a/src/components/KeyboardPreview/keyboard-context.js +++ b/src/components/KeyboardPreview/keyboard-context.js @@ -1,7 +1,11 @@ -import React, { createContext, useContext, useState } from "react"; +import React, { createContext, useContext, useState, useEffect } from "react"; export const KeyboardContext = createContext(); +const ALT = 4; +const CTRL = 2; +const SHIFT = 1; + export function KeyboardProvider({ children }) { const [keyboardState, setKeyboardState] = useState({ state: 0, @@ -12,32 +16,50 @@ export function KeyboardProvider({ children }) { meta: false, capsLock: false, }); + console.log(keyboardState); + + const handleKeyDown = (serviceKey) => { + setKeyboardState((prevState) => ({ + ...prevState, + [serviceKey]: true, + })); + }; - const toggleModifier = (modifier) => { - setKeyboardState((prevState) => { - let newState = prevState.state ^ modifier; - console.log(newState); - console.log(keyboardState); - - if ( - (newState === 1 || - newState === 2 || - newState === 6 || - newState === 7) && - newState !== prevState.state - ) { - return { - ...prevState, - state: newState, - }; - } - - return prevState; - }); + const handleKeyUp = (serviceKey) => { + setKeyboardState((prevState) => ({ + ...prevState, + [serviceKey]: false, + })); }; + const toggleState = (serviceKey) => { + setKeyboardState((prevState) => ({ + ...prevState, + [serviceKey]: !prevState[serviceKey], + })); + }; + + useEffect(() => { + let newState = 0; + if (keyboardState.shift) newState |= SHIFT; + if (keyboardState.ctrl) newState |= CTRL; + if (keyboardState.alt) newState |= ALT; + + if ( + [0, 1, 2, 6, 7].includes(newState) && + newState !== keyboardState.state + ) { + setKeyboardState((prevState) => ({ + ...prevState, + state: newState, + })); + } + }, [keyboardState.shift, keyboardState.ctrl, keyboardState.alt]); + return ( - + {children} ); From 46fe05e89dae7b8b11948a6d088c4ce4c21f4d62 Mon Sep 17 00:00:00 2001 From: Artem Vasylenko Date: Wed, 16 Aug 2023 20:00:01 +0300 Subject: [PATCH 23/30] full keyboard in progress --- src/components/KeyboardPreview/Compact.jsx | 72 ++-- .../KeyboardPreview/Compact.module.scss | 4 +- .../KeyboardPreview/CompactJSON.jsx | 38 +- .../KeyboardPreview/CompactJSON.module.scss | 139 +------ src/components/KeyboardPreview/Full.jsx | 138 +++++-- .../KeyboardPreview/Full.module.scss | 11 + src/components/KeyboardPreview/Wrapper.jsx | 10 +- src/components/KeyboardPreview/isv.json | 350 +++--------------- .../KeyboardPreview/keyboard-context.js | 145 +++++--- 9 files changed, 352 insertions(+), 555 deletions(-) diff --git a/src/components/KeyboardPreview/Compact.jsx b/src/components/KeyboardPreview/Compact.jsx index e57f55d06..156279cd2 100644 --- a/src/components/KeyboardPreview/Compact.jsx +++ b/src/components/KeyboardPreview/Compact.jsx @@ -1,44 +1,44 @@ -import React from 'react' +import React, { useCallback } from 'react' import clsx from 'clsx' import styles from "./Compact.module.scss" +import { useKey } from './keyboard-context.js'; -const lathinAlphabetData = [ - ['', '', '', '', '', '', '', '', '', '', '', '', '', ''], - ['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', ''], - ['', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']', '\\'], - ['', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';', '\'', ''], - ['', 'z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '/', ''], - ['', '', '', '', '', '', '', '', ''], -]; -const cyrillicAlphabetData = [ - ['', '', '', '', '', '', '', '', '', '', '', '', '', ''], - ['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', ''], - ['', 'й', 'ц', 'у', 'к', 'е', 'н', 'г', 'ш', 'щ', 'з', 'х', 'ї', 'ґ'], - ['', 'ф', 'і', 'в', 'а', 'п', 'р', 'о', 'л', 'д', 'ж', 'є', ''], - ['', 'я', 'ч', 'с', 'м', 'и', 'т', 'ь', 'б', 'ю', '.', ''], - ['', '', '', '', '', '', '', '', ''], -]; +const SERVICE_KEYS = new Set(['ControlLeft', 'AltLeft', 'Space', 'AltRight', 'ControlRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'ArrowRight', 'ShiftLeft', 'ShiftRight', 'CapsLock', 'Enter', "Escape", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12", "Delete", "Backspace", "Tab"]); -export default function Compact({ alphabet, script = 'Cyrl' }) { - let alphabetData = lathinAlphabetData; - if (alphabet === 'cyrillic') { - alphabetData = cyrillicAlphabetData; - } +const keys = [ + ["Escape", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12", "Delete"], + ["Backquote", "Digit1", "Digit2", "Digit3", "Digit4", "Digit5", "Digit6", "Digit7", "Digit8", "Digit9", "Digit0", "Minus", "Equal", "Backspace"], , + ["Tab", "KeyQ", "KeyW", "KeyE", "KeyR", "KeyT", "KeyY", "KeyU", "KeyI", "KeyO", "KeyP", "BracketLeft", "BracketRight", "Backslash"], + ["CapsLock", "KeyA", "KeyS", "KeyD", "KeyF", "KeyG", "KeyH", "KeyJ", "KeyK", "KeyL", "Semicolon", "Quote", "Enter"], + ["ShiftLeft", "KeyZ", "KeyX", "KeyC", "KeyV", "KeyB", "KeyN", "KeyM", "Comma", "Period", "Slash", "ShiftRight"], + ['ControlLeft', 'AltLeft', 'Space', 'AltRight', 'ControlRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'ArrowRight'], +]; +export default function Compact({ className, layout }) { return ( - <> -
- {alphabetData.map((row, rowIndex) => ( -
- {row.map((letter, columnIndex) => ( - - {letter} - - ))} -
- ))} -
- - ) +
+ {keys.map((row, rowIndex) => ( +
+ {row.map((code, columnIndex) => ( + + ))} +
+ ))} +
+ ); } +function CompactKey({ code, layout }) { + const context = useKey().keyboardState; + const { state, modifier, pressed, onKeyDown, onKeyUp } = context; + const content = layout.states[state][code]?.[modifier] ?? '\u00a0'; + + /* const onMouseDown = useCallback(() => onKeyDown(code), [code, onKeyDown]); + const onMouseUp = useCallback(() => onKeyUp(code), [code, onKeyUp]); */ + + return ( + + {content} + + ); +} diff --git a/src/components/KeyboardPreview/Compact.module.scss b/src/components/KeyboardPreview/Compact.module.scss index e2630f909..597fb9f78 100644 --- a/src/components/KeyboardPreview/Compact.module.scss +++ b/src/components/KeyboardPreview/Compact.module.scss @@ -17,8 +17,8 @@ } .Cyrl { - --active-key-bg: #DED8F1; - --active-key-fg: #3F3274; + --active-key-bg-default: #DED8F1; + --active-key-fg-default: #3F3274; } .row { diff --git a/src/components/KeyboardPreview/CompactJSON.jsx b/src/components/KeyboardPreview/CompactJSON.jsx index e683d99ad..ec665baf0 100644 --- a/src/components/KeyboardPreview/CompactJSON.jsx +++ b/src/components/KeyboardPreview/CompactJSON.jsx @@ -4,6 +4,10 @@ import styles from "./CompactJSON.module.scss"; import { useKeyboard } from './keyboard-context'; import layout from './isv.json'; +const inactiveKey = [ + ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '`'], +]; + export default function CompactJSON({ script = 'Cyrl' }) { const { keyboardState, handleKeyDown, handleKeyUp, toggleState } = useKeyboard(); const [pressedKeys, setPressedKeys] = useState({}); @@ -56,35 +60,41 @@ export default function CompactJSON({ script = 'Cyrl' }) { return ( <> -
+
+ {inactiveKey[0].map((key, keyIndex) => ( + + {key} + + ))} + {Object.values(currentAlphabetData).map((letter, letterIndex) => ( +
handleKeyPress(letterIndex, e)} + onMouseUp={(e) => handleKeyRelease(letterIndex, e)} + > + {letter} +
+ ))}
toggleState('shift')} > shift
toggleState('ctrl')} > ctrl
toggleState('alt')} > alt
- {Object.values(currentAlphabetData).map((letter, letterIndex) => ( -
handleKeyPress(letterIndex, e)} - onMouseUp={(e) => handleKeyRelease(letterIndex, e)} - > - {letter} -
- ))} +
); diff --git a/src/components/KeyboardPreview/CompactJSON.module.scss b/src/components/KeyboardPreview/CompactJSON.module.scss index b6c874cd8..44a6f1123 100644 --- a/src/components/KeyboardPreview/CompactJSON.module.scss +++ b/src/components/KeyboardPreview/CompactJSON.module.scss @@ -1,7 +1,7 @@ .keyboard { - display: inline-flex; + display: flex; flex-wrap: wrap; - + width: 309px; --active-key-bg: #DDE9FB; --active-key-fg: #506483; --inactive-key-bg: #F1F3F7; @@ -21,22 +21,6 @@ --active-key-fg: #3F3274; } -.row { - display: flex; - margin-bottom: 6px; - - &:last-child { - margin-bottom: 0; - } - - >* { - margin-right: 4px; - } - - > :last-child { - margin-right: 0; - } -} .key { display: flex; @@ -45,127 +29,44 @@ justify-content: center; align-items: center; + margin: 0 4px 6px 0; border-radius: 3px; text-align: center; background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 10%), var(--active-key-bg-default); color: var(--active-key-fg-default); + &.shift { + width: 43px; + } + &.ctrl, + &.alt { + width: 27px; + } &.inactive { background: #f1f3f7; + height: 9px; - .row:nth-child(1)>& { - height: 9px; - - &:first-child { - width: 18px; - } - - &:last-child { - width: 26px; - } + &:first-child { + width: 18px; } - .row:nth-child(2)>& { - &:last-child { - width: 26px; - } + &:nth-child(14) { + width: 17px; } - .row:nth-child(3)>& { - &:first-child { - width: 27px; - } - - &:last-child { - width: 26px; - } - } - - .row:nth-child(4)>& { - &:first-child { - width: 33px; - } - - &:last-child { - width: 32px; - } - } - - .row:nth-child(5)>& { - &:first-child { - width: 43px; - } - - &:last-child { - width: 43px; - } + &:nth-child(15) { + width: 17px; + height: 16px; + background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 10%), var(--active-key-bg-default); + color: var(--active-key-fg-default); } - .row:nth-child(6)>& { - width: 27px; - - &:nth-child(4) { - width: 99px; - } - - &:nth-child(5) { - width: 21px; - } - - &:nth-child(6) { - width: 17px; - } - - &:nth-child(7) { - width: 17px; - } - - &:nth-child(8) { - width: 17px; - background: none; - position: relative; - - &::before, - &::after { - position: absolute; - border-radius: inherit; - content: ''; - background: var(--inactive-key-bg-default); - width: 100%; - height: calc(50% - 1px); - } - - &::before { - top: 0; - border-radius: 3px 3px 0 0; - } - - &::after { - bottom: 0; - border-radius: 0 0 3px 3px; - } - } - - &:nth-child(9) { - width: 17px; - } - } } } .pressed { background-color: #adcaf5; -} - -.serviceKey { - padding: 0 1rem; - border: solid 1px #000; - border-radius: 3px; -} - -.pressed { - color: red; } \ No newline at end of file diff --git a/src/components/KeyboardPreview/Full.jsx b/src/components/KeyboardPreview/Full.jsx index bdf484494..782cc9987 100644 --- a/src/components/KeyboardPreview/Full.jsx +++ b/src/components/KeyboardPreview/Full.jsx @@ -1,5 +1,37 @@ import React, { useState } from 'react' +import clsx from 'clsx' import styles from "./Full.module.scss"; +import { useKey } from './keyboard-context.js'; + +const SERVICE_KEYS = new Set(['ControlLeft', 'AltLeft', 'Space', 'AltRight', 'ControlRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'ArrowRight', 'ShiftLeft', 'ShiftRight', 'CapsLock', 'Enter', "Escape", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12", "Delete", "Backspace", "Tab"]); + +const keys = [ + ["Escape", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12", "Delete"], + ["Backquote", "Digit1", "Digit2", "Digit3", "Digit4", "Digit5", "Digit6", "Digit7", "Digit8", "Digit9", "Digit0", "Minus", "Equal", "Backspace"], , + ["Tab", "KeyQ", "KeyW", "KeyE", "KeyR", "KeyT", "KeyY", "KeyU", "KeyI", "KeyO", "KeyP", "BracketLeft", "BracketRight", "Backslash"], + ["CapsLock", "KeyA", "KeyS", "KeyD", "KeyF", "KeyG", "KeyH", "KeyJ", "KeyK", "KeyL", "Semicolon", "Quote", "Enter"], + ["ShiftLeft", "KeyZ", "KeyX", "KeyC", "KeyV", "KeyB", "KeyN", "KeyM", "Comma", "Period", "Slash", "ShiftRight"], + ['ControlLeft', 'AltLeft', 'Space', 'AltRight', 'ControlRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'ArrowRight'], +]; + +function CustomText({ x, y, children, correctionPointX = 0, correctionPointY = 0, alt = false, shift = false, className, fontSize = 10, fontWeight = 500, handleMouseDown, handleMouseUp }) { + const tx = x + correctionPointX + (alt ? 20 : 0); + const ty = y + correctionPointY + (shift ? 0 : 20); + + return ( + + {children} + + ); +} + function KeyText({ x, y, alt, shift, children, handleMouseDown, handleMouseUp, className }) { @@ -31,15 +63,14 @@ function Key({ base, alt, shift, altShift, x, y }) { setIsClicked(false); } return ( - + {base} @@ -171,31 +201,77 @@ export default function Full({ name, lang, script, states }) { stroke="#777" > - - {firstRow} - - - {secondRow} - - {thidRow} - - - {fouthRow} - - - - - - - - - - - + {firstRow} + + + {secondRow} + + {thidRow} + + + {fouthRow} + + + + + + + + + + + ) } +/*==============*/ +function FullKeyboard({ className, layout }) { + return ( + + + + + +
+ {keys.map((row, rowIndex) => ( +
+ {row.map((code, columnIndex) => ( + + ))} +
+ ))} +
+ + + + + + ); +} + +function FullKey({ code, layout }) { + const context = useKey().keyboardState; + const { state, modifier, pressed } = context; + const content = layout.states[state][code]?.[modifier] ?? '\u00a0'; + + return ( + + {content} + + ); +} \ No newline at end of file diff --git a/src/components/KeyboardPreview/Full.module.scss b/src/components/KeyboardPreview/Full.module.scss index 0526052aa..555438ccd 100644 --- a/src/components/KeyboardPreview/Full.module.scss +++ b/src/components/KeyboardPreview/Full.module.scss @@ -26,6 +26,10 @@ --key-fill-color: #1a2933; --key-fill-click-color: #274255; } + + width: 718px; + height: 274px; + fill: none; } .textColorBase { @@ -54,4 +58,11 @@ .keyColors { fill: var(--key-fill-color); +} + +.rect { + width: 41px; + height: 41px; + stroke: "#147CFA"; + fill: "transparent"; } \ No newline at end of file diff --git a/src/components/KeyboardPreview/Wrapper.jsx b/src/components/KeyboardPreview/Wrapper.jsx index 3f683904c..591d4b7a3 100644 --- a/src/components/KeyboardPreview/Wrapper.jsx +++ b/src/components/KeyboardPreview/Wrapper.jsx @@ -1,23 +1,23 @@ -import React, { useEffect, useState } from 'react' +import React from 'react' import { useResizeObserver } from '@site/src/hooks' import styles from './Wrapper.module.scss' import FullKeyboardPreview from './Full' import CompactKeyboardPreview from './Compact' import CompactJSON from './CompactJSON' import layout from './isv.json' -import { KeyboardProvider } from './keyboard-context' +import { useKeyboard, KeyboardProvider } from './keyboard-context' export default function Wrapper({ alphabet, accentColor }) { const [ref, dimensions] = useResizeObserver(); + const context = useKeyboard(layout); const KeyboardPreview = dimensions.width < 715 ? CompactKeyboardPreview : FullKeyboardPreview; return (
- - - + +
) diff --git a/src/components/KeyboardPreview/isv.json b/src/components/KeyboardPreview/isv.json index 7f176339b..cd4044d2e 100644 --- a/src/components/KeyboardPreview/isv.json +++ b/src/components/KeyboardPreview/isv.json @@ -7,305 +7,57 @@ "script": "Latn", "version": 1, "states": { - "0": { - "Digit1": "1", - "Digit2": "2", - "Digit3": "3", - "Digit4": "4", - "Digit5": "5", - "Digit6": "6", - "Digit7": "7", - "Digit8": "8", - "Digit9": "9", - "Digit0": "0", - "Minus": "-", - "Equal": "=", - "KeyQ": "q", - "KeyW": "w", - "KeyE": "e", - "KeyR": "r", - "KeyT": "t", - "KeyY": "y", - "KeyU": "u", - "KeyI": "i", - "KeyO": "o", - "KeyP": "p", - "BracketLeft": "[", - "BracketRight": "]", - "KeyA": "a", - "KeyS": "s", - "KeyD": "d", - "KeyF": "f", - "KeyG": "g", - "KeyH": "h", - "KeyJ": "j", - "KeyK": "k", - "KeyL": "l", - "Semicolon": ";", - "Quote": "'", - "Enter": [ - "`" - ], - "Backslash": "\\", - "KeyZ": "z", - "KeyX": "x", - "KeyC": "c", - "KeyV": "v", - "KeyB": "b", - "KeyN": "n", - "KeyM": "m", - "Comma": ",", - "Period": ".", - "Slash": "/", - "Space": " ", - "Key\\": "\\", - "Decimal": "," - }, - "1": { - "Digit1": "!", - "Digit2": "@", - "Digit3": "#", - "Digit4": "$", - "Digit5": "%", - "Digit6": "^", - "Digit7": "&", - "Digit8": "*", - "Digit9": "(", - "Digit0": ")", - "Minus": "_", - "Equal": "+", - "KeyQ": "Q", - "KeyW": "W", - "KeyE": "E", - "KeyR": "R", - "KeyT": "T", - "KeyY": "Y", - "KeyU": "U", - "KeyI": "I", - "KeyO": "O", - "KeyP": "P", - "BracketLeft": "{", - "BracketRight": "}", - "KeyA": "A", - "KeyS": "S", - "KeyD": "D", - "KeyF": "F", - "KeyG": "G", - "KeyH": "H", - "KeyJ": "J", - "KeyK": "K", - "KeyL": "L", - "Semicolon": ":", - "Quote": "\"", - "Enter": [ - "~" - ], - "Backslash": "|", - "KeyZ": "Z", - "KeyX": "X", - "KeyC": "C", - "KeyV": "V", - "KeyB": "B", - "KeyN": "N", - "KeyM": "M", - "Comma": "<", - "Period": ">", - "Slash": "?", - "Space": " ", - "Key\\": "|", - "Decimal": "," - }, - "2": { - "Digit1": "!", - "Digit2": "@", - "Digit3": "#", - "Digit4": "$", - "Digit5": "%", - "Digit6": "^", - "Digit7": "&", - "Digit8": "*", - "Digit9": "(", - "Digit0": ")", - "Minus": "_", - "Equal": "+", - "KeyQ": "Q", - "KeyW": "W", - "KeyE": "E", - "KeyR": "R", - "KeyT": "T", - "KeyY": "Y", - "KeyU": "U", - "KeyI": "I", - "KeyO": "O", - "KeyP": "P", - "BracketLeft": "{", - "BracketRight": "}", - "KeyA": "A", - "KeyS": "S", - "KeyD": "D", - "KeyF": "F", - "KeyG": "G", - "KeyH": "H", - "KeyJ": "J", - "KeyK": "K", - "KeyL": "L", - "Semicolon": ":", - "Quote": "\"", - "Enter": [ - "~" - ], - "Backslash": "|", - "KeyZ": "Z", - "KeyX": "X", - "KeyC": "C", - "KeyV": "V", - "KeyB": "B", - "KeyN": "N", - "KeyM": "M", - "Comma": "<", - "Period": ">", - "Slash": "?", - "Space": " ", - "Key\\": "|", - "Decimal": "," - }, - "6": { - "Digit1": "‚", - "Digit2": "‘", - "Digit3": "’", - "Digit4": "€", - "Digit5": [ - "¨" - ], - "Digit6": [ - "ˆ" - ], - "Digit7": [ - "˝" - ], - "Digit8": [ - "˙" - ], - "Digit9": [ - "˘" - ], - "Digit0": [ - "/" - ], - "Minus": "–", - "Equal": "−", - "KeyQ": "ś", - "KeyW": "ę", - "KeyE": "ě", - "KeyR": "ŕ", - "KeyT": "%%", - "KeyY": "", - "KeyU": "ų", - "KeyI": "ė", - "KeyO": "ȯ", - "KeyP": "§", - "BracketLeft": "«", - "BracketRight": "»", - "KeyA": "å", - "KeyS": "š", - "KeyD": "%%", - "KeyF": "đ", - "KeyG": "", - "KeyH": "", - "KeyJ": "", - "KeyK": "×", - "KeyL": "ĺ", - "Semicolon": "„", - "Quote": "’", - "Enter": [ - "ˋ" - ], - "Backslash": "÷", - "KeyZ": "ž", - "KeyX": "ź", - "KeyC": "č", - "KeyV": "ć", - "KeyB": "", - "KeyN": "ń", - "KeyM": "™", - "Comma": "‰", - "Period": "…", - "Slash": "°", - "Space": "", - "Key\\": "÷", - "Decimal": "" - }, - "7": { - "Digit1": [ - "̏" - ], - "Digit2": [ - "¯" - ], - "Digit3": [ - "̑" - ], - "Digit4": [ - "¤" - ], - "Digit5": [ - "˜" - ], - "Digit6": [ - "¸" - ], - "Digit7": [ - "," - ], - "Digit8": [ - "¦" - ], - "Digit9": [ - "˛" - ], - "Digit0": [ - "·" - ], - "Minus": "—", - "Equal": "±", - "KeyQ": "Ś", - "KeyW": "Ę", - "KeyE": "Ě", - "KeyR": "Ŕ", - "KeyT": "%%", - "KeyY": "", - "KeyU": "Ų", - "KeyI": "Ė", - "KeyO": "Ȯ", - "KeyP": "¶", - "BracketLeft": "‹", - "BracketRight": "›", - "KeyA": "Å", - "KeyS": "Š", - "KeyD": "%%", - "KeyF": "Đ", - "KeyG": "", - "KeyH": "", - "KeyJ": "", - "KeyK": "©", - "KeyL": "Ĺ", - "Semicolon": "“", - "Quote": "”", - "Enter": "́", - "Backslash": "∙", - "KeyZ": "Ž", - "KeyX": "Ź", - "KeyC": "Č", - "KeyV": "Ć", - "KeyB": "", - "KeyN": "Ń", - "KeyM": "®", - "Comma": "′", - "Period": "″", - "Slash": "­", - "Space": " ", - "Key\\": "∙", - "Decimal": "" + "": { + "Digit1": ["1", "!", "!", null, null, null, "‚", ["̏"]], + "Digit2": ["2", "@", "@", null, null, null, "‘", ["¯"]], + "Digit3": ["3", "#", "#", null, null, null, "’", ["̑"]], + "Digit4": ["4", "$", "$", null, null, null, "€", ["¤"]], + "Digit5": ["5", "%", "%", null, null, null, ["¨"], ["˜"]], + "Digit6": ["6", "^", "^", null, null, null, ["ˆ"], ["¸"]], + "Digit7": ["7", "&", "&", null, null, null, ["˝"], [","]], + "Digit8": ["8", "*", "*", null, null, null, ["˙"], ["¦"]], + "Digit9": ["9", "(", "(", null, null, null, ["˘"], ["˛"]], + "Digit0": ["0", ")", ")", null, null, null, ["/"], ["·"]], + "Minus": ["-", "_", "_", null, null, null, "–", "—"], + "Equal": ["=", "+", "+", null, null, null, "−", "±"], + "KeyQ": ["q", "Q", "Q", null, null, null, "ś", "Ś"], + "KeyW": ["w", "W", "W", null, null, null, "ę", "Ę"], + "KeyE": ["e", "E", "E", null, null, null, "ě", "Ě"], + "KeyR": ["r", "R", "R", null, null, null, "ŕ", "Ŕ"], + "KeyT": ["t", "T", "T", null, null, null, "%", "%"], + "KeyY": ["y", "Y", "Y", null, null, null, "", ""], + "KeyU": ["u", "U", "U", null, null, null, "ų", "Ų"], + "KeyI": ["i", "I", "I", null, null, null, "ė", "Ė"], + "KeyO": ["o", "O", "O", null, null, null, "ȯ", "Ȯ"], + "KeyP": ["p", "P", "P", null, null, null, "§", "¶"], + "BracketLeft": ["[", "{", "{", null, null, null, "«", "‹"], + "BracketRight": ["]", "}", "}", null, null, null, "»", "›"], + "KeyA": ["a", "A", "A", null, null, null, "å", "Å"], + "KeyS": ["s", "S", "S", null, null, null, "š", "Š"], + "KeyD": ["d", "D", "D", null, null, null, "%", "%"], + "KeyF": ["f", "F", "F", null, null, null, "đ", "Đ"], + "KeyG": ["g", "G", "G", null, null, null, "", ""], + "KeyH": ["h", "H", "H", null, null, null, "", ""], + "KeyJ": ["j", "J", "J", null, null, null, "", ""], + "KeyK": ["k", "K", "K", null, null, null, "×", "©"], + "KeyL": ["l", "L", "L", null, null, null, "ĺ", "Ĺ"], + "Semicolon": [";", ":", ":", null, null, null, "„", "“"], + "Quote": ["'", "\"", "\"", null, null, null, "’", "”"], + "Backslash": ["\\", "|", "|", null, null, null, "÷", "∙"], + "Backquote": ["`", null, null, null, null, null, null, null], + "KeyZ": ["z", "Z", "Z", null, null, null, "ž", "Ž"], + "KeyX": ["x", "X", "X", null, null, null, "ź", "Ź"], + "KeyC": ["c", "C", "C", null, null, null, "č", "Č"], + "KeyV": ["v", "V", "V", null, null, null, "ć", "Ć"], + "KeyB": ["b", "B", "B", null, null, null, "", ""], + "KeyN": ["n", "N", "N", null, null, null, "ń", "Ń"], + "KeyM": ["m", "M", "M", null, null, null, "™", "®"], + "Comma": [",", "<", "<", null, null, null, "‰", "′"], + "Period": [".", ">", ">", null, null, null, "…", "″"], + "Slash": ["/", "?", "?", null, null, null, "°", "­"], + "Space": [" ", " ", " ", null, null, null, "", " "], + "Key\\": ["\\", "|", "|", null, null, null, "÷", "∙"], + "Decimal": [",", ",", ",", null, null, null, "", ""] } } } diff --git a/src/components/KeyboardPreview/keyboard-context.js b/src/components/KeyboardPreview/keyboard-context.js index 36d4ac085..722f199a2 100644 --- a/src/components/KeyboardPreview/keyboard-context.js +++ b/src/components/KeyboardPreview/keyboard-context.js @@ -1,4 +1,11 @@ -import React, { createContext, useContext, useState, useEffect } from "react"; +import React, { + createContext, + useCallback, + useContext, + useMemo, + useState, + useEffect, +} from "react"; export const KeyboardContext = createContext(); @@ -6,65 +13,105 @@ const ALT = 4; const CTRL = 2; const SHIFT = 1; -export function KeyboardProvider({ children }) { +export function KeyboardProvider({ value, children }) { + return ( + + {children} + + ); +} +export function useKeyboard(layout) { const [keyboardState, setKeyboardState] = useState({ - state: 0, - alt: false, - shift: false, - ctrl: false, - win: false, - meta: false, - capsLock: false, + layout, + state: "", + modifier: 0, + // alt: false, + // shift: false, + // ctrl: false, + // win: false, + // meta: false, + // capsLock: false, + pressed: new Set(), }); - console.log(keyboardState); - const handleKeyDown = (serviceKey) => { - setKeyboardState((prevState) => ({ - ...prevState, - [serviceKey]: true, - })); - }; + const handleKeyEvent = useCallback( + (e) => { + const pressed = keyboardState.pressed; + let pressedChanged = false; + if (e.type === "keydown" && !pressed.has(e.code)) { + pressed.add(e.code); + pressedChanged = true; + } + if (e.type === "keyup" && pressed.has(e.code)) { + pressed.delete(e.code); + pressedChanged = true; + } + + const alt = e.getModifierState("Alt"); + const shift = e.getModifierState("Shift"); + const ctrl = e.getModifierState("Control"); + + const modifier = + 0 | (shift ? SHIFT : 0) | (alt ? ALT | CTRL : 0) | (ctrl ? CTRL : 0); - const handleKeyUp = (serviceKey) => { - setKeyboardState((prevState) => ({ - ...prevState, - [serviceKey]: false, - })); - }; + const state = ""; - const toggleState = (serviceKey) => { - setKeyboardState((prevState) => ({ - ...prevState, - [serviceKey]: !prevState[serviceKey], - })); - }; + if ( + state !== keyboardState.state || + modifier !== keyboardState.modifier || + pressedChanged + ) { + setKeyboardState({ + state, + modifier, + pressed, + }); + } + }, + [keyboardState, setKeyboardState] + ); + + const handleBlur = useCallback( + (e) => { + setKeyboardState({ + state: "", + modifier: 0, + pressed: new Set(), + }); + }, + [setKeyboardState] + ); useEffect(() => { - let newState = 0; - if (keyboardState.shift) newState |= SHIFT; - if (keyboardState.ctrl) newState |= CTRL; - if (keyboardState.alt) newState |= ALT; + window.addEventListener("keydown", handleKeyEvent); + window.addEventListener("keyup", handleKeyEvent); + window.addEventListener("blur", handleBlur); - if ( - [0, 1, 2, 6, 7].includes(newState) && - newState !== keyboardState.state - ) { - setKeyboardState((prevState) => ({ - ...prevState, - state: newState, - })); - } - }, [keyboardState.shift, keyboardState.ctrl, keyboardState.alt]); + return () => { + window.removeEventListener("keydown", handleKeyEvent); + window.removeEventListener("keyup", handleKeyEvent); + window.removeEventListener("blur", handleBlur); + }; + }, [handleKeyEvent, handleBlur]); - return ( - - {children} - + // const toggleState = (serviceKey) => { + // setKeyboardState((prevState) => ({ + // ...prevState, + // [serviceKey]: !prevState[serviceKey], + // })); + // }; + + return useMemo( + () => ({ + keyboardState, + // handleKeyEvent, + // handleKeyUp, + // toggleState, + }), + [keyboardState] ); } -export function useKeyboard() { +export function useKey() { return useContext(KeyboardContext); } From 0296c448abfe94196c62addc634b5395d7c6b265 Mon Sep 17 00:00:00 2001 From: Artem Vasylenko Date: Fri, 18 Aug 2023 10:12:45 +0300 Subject: [PATCH 24/30] full keyboard in progress --- src/components/KeyboardPreview/Full.jsx | 98 +++++++++++++------ .../KeyboardPreview/Full.module.scss | 10 ++ 2 files changed, 78 insertions(+), 30 deletions(-) diff --git a/src/components/KeyboardPreview/Full.jsx b/src/components/KeyboardPreview/Full.jsx index 782cc9987..190cfbb5c 100644 --- a/src/components/KeyboardPreview/Full.jsx +++ b/src/components/KeyboardPreview/Full.jsx @@ -14,23 +14,7 @@ const keys = [ ['ControlLeft', 'AltLeft', 'Space', 'AltRight', 'ControlRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'ArrowRight'], ]; -function CustomText({ x, y, children, correctionPointX = 0, correctionPointY = 0, alt = false, shift = false, className, fontSize = 10, fontWeight = 500, handleMouseDown, handleMouseUp }) { - const tx = x + correctionPointX + (alt ? 20 : 0); - const ty = y + correctionPointY + (shift ? 0 : 20); - return ( - - {children} - - ); -} function KeyText({ x, y, alt, shift, children, handleMouseDown, handleMouseUp, className }) { @@ -229,7 +213,71 @@ export default function Full({ name, lang, script, states, layout }) { ) } /*==============*/ -function FullKeyboard({ className, layout }) { + +function CustomText({ x, y, children, correctionPointX = 10, correctionPointY = 12, alt = false, shift = false, className, handleMouseDown, handleMouseUp }) { + const tx = x + correctionPointX + (alt ? 20 : 0); + const ty = y + correctionPointY + (shift ? 0 : 20); + + return ( + + {children} + + ); +} + +function FullKey({ code, layout, x, y, width = 75, height = 41, correctionPointY = 0, content }) { + const [isClicked, setIsClicked] = useState(false); + + const handleMouseDown = () => { + setIsClicked(true); + }; + + const handleMouseUp = () => { + setIsClicked(false); + }; + + const keyTextProps = { + x, + y, + fontSize: 13, + fontWeight: 600, + }; + + return ( + + + + {content} + + {alt && {content}} + {shift && {content}} + {altShift && {content}} + + ); +} + +function FullKeyboard({ className, layout, code }) { + + const context = useKey().keyboardState; + const { state, modifier, pressed } = context; + const content = layout.states[state][code]?.[modifier] ?? '\u00a0'; + return ( -
+ {/*
{keys.map((row, rowIndex) => (
{row.map((code, columnIndex) => ( @@ -255,7 +303,8 @@ function FullKeyboard({ className, layout }) { ))}
))} -
+
*/} + @@ -264,14 +313,3 @@ function FullKeyboard({ className, layout }) { ); } -function FullKey({ code, layout }) { - const context = useKey().keyboardState; - const { state, modifier, pressed } = context; - const content = layout.states[state][code]?.[modifier] ?? '\u00a0'; - - return ( - - {content} - - ); -} \ No newline at end of file diff --git a/src/components/KeyboardPreview/Full.module.scss b/src/components/KeyboardPreview/Full.module.scss index 555438ccd..13e43497a 100644 --- a/src/components/KeyboardPreview/Full.module.scss +++ b/src/components/KeyboardPreview/Full.module.scss @@ -65,4 +65,14 @@ height: 41px; stroke: "#147CFA"; fill: "transparent"; +} + +.keyText { + font-size: 13; + font-weight: 600; +} + +.serviceKeyText { + font-size: 10; + font-weight: 500; } \ No newline at end of file From 97dbb220d6bfa23b61815bb086f8946e2d324434 Mon Sep 17 00:00:00 2001 From: Yaroslav Serhieiev Date: Fri, 18 Aug 2023 09:48:39 +0300 Subject: [PATCH 25/30] adapt compact keyboard --- docs/resources/keyboards/kbdmslat.mdx | 6 +- src/components/KeyboardPreview/Compact.jsx | 32 ++++- .../KeyboardPreview/Compact.module.scss | 11 +- .../KeyboardPreview/CompactJSON.jsx | 101 --------------- .../KeyboardPreview/CompactJSON.module.scss | 72 ----------- src/components/KeyboardPreview/Full.jsx | 1 - src/components/KeyboardPreview/Wrapper.jsx | 1 - src/components/KeyboardPreview/layout1.json | 117 ------------------ src/components/KeyboardPreview/layout2.json | 49 -------- 9 files changed, 41 insertions(+), 349 deletions(-) delete mode 100644 src/components/KeyboardPreview/CompactJSON.jsx delete mode 100644 src/components/KeyboardPreview/CompactJSON.module.scss delete mode 100644 src/components/KeyboardPreview/layout1.json delete mode 100644 src/components/KeyboardPreview/layout2.json diff --git a/docs/resources/keyboards/kbdmslat.mdx b/docs/resources/keyboards/kbdmslat.mdx index 715c3eb9e..9edca5e19 100644 --- a/docs/resources/keyboards/kbdmslat.mdx +++ b/docs/resources/keyboards/kbdmslat.mdx @@ -1,13 +1,13 @@ import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; import { translate } from "@docusaurus/Translate"; -import { PlatformDownloads } from "@site/src/components"; +import { KeyboardPreview, PlatformDownloads } from "@site/src/components"; # Interslavic Keyboard This is the recommended keyboard layout tailored for all Slavic languages and dialects using Latin script, recognized or obscure: from Polish and Czech to less familiar and endangered languages and dialects. -`HERE BE THE KEYBOARD LAYOUT` + ## Key features @@ -40,7 +40,7 @@ This is the recommended keyboard layout tailored for all Slavic languages and di -The keyboard works on Windows XP, Vista, 7, 8, and newer operating systems. After unpacking the keyboard archive, click on the KBDMSLAT.exe file with the left mouse button. At the end of the installation, a dialogue appears with the "Close" button, which closes the installation. You can switch to the keyboard by pressing Alt+Shift, or if you are using the Slovenian keyboard as the base, by pressing CTRL+Shift, because the keyboard installs under the Slovenian language (Slovenia, code SLO as the beginning of the word Slavic). To uninstall, click on the installation file and then on the "Finish" button. +The keyboard works on Windows XP, Vista, 7, 8, and newer operating systems. After unpacking the keyboard archive, click on the KBDMSLAT.exe file with the left mouse button. At the end of the installation, a dialogue appears with the "Close" button, which closes the installation. You can switch to the keyboard by pressing Alt+Shift, or if you are using the Slovenian keyboard as the base, by pressing Ctrl+Shift, because the keyboard installs under the Slovenian language (Slovenia, code SLO as the beginning of the word Slavic). To uninstall, click on the installation file and then on the "Finish" button. diff --git a/src/components/KeyboardPreview/Compact.jsx b/src/components/KeyboardPreview/Compact.jsx index 156279cd2..505e12f99 100644 --- a/src/components/KeyboardPreview/Compact.jsx +++ b/src/components/KeyboardPreview/Compact.jsx @@ -15,22 +15,46 @@ const keys = [ ]; export default function Compact({ className, layout }) { + return ( +
+
+
Default
+ +
+
+
Shift
+ +
+
+
Alt
+ +
+
+
Alt + Shift
+ +
+
+ ); +} + +function CompactKeyboard({ className, layout, modifier }) { return (
{keys.map((row, rowIndex) => (
{row.map((code, columnIndex) => ( - + ))}
))} -
+
); } -function CompactKey({ code, layout }) { +function CompactKey({ code, layout, modifier: modifierOverride }) { const context = useKey().keyboardState; - const { state, modifier, pressed, onKeyDown, onKeyUp } = context; + const { state, modifier: modifierDynamic, pressed, onKeyDown, onKeyUp } = context; + const modifier = modifierOverride ?? modifierDynamic; const content = layout.states[state][code]?.[modifier] ?? '\u00a0'; /* const onMouseDown = useCallback(() => onKeyDown(code), [code, onKeyDown]); diff --git a/src/components/KeyboardPreview/Compact.module.scss b/src/components/KeyboardPreview/Compact.module.scss index 597fb9f78..9fede5dcf 100644 --- a/src/components/KeyboardPreview/Compact.module.scss +++ b/src/components/KeyboardPreview/Compact.module.scss @@ -152,4 +152,13 @@ } } } -} \ No newline at end of file +} + +.figure { + margin: 0; + + > figcaption { + font-weight: bold; + margin: 0.5em 0 0; + } +} diff --git a/src/components/KeyboardPreview/CompactJSON.jsx b/src/components/KeyboardPreview/CompactJSON.jsx deleted file mode 100644 index ec665baf0..000000000 --- a/src/components/KeyboardPreview/CompactJSON.jsx +++ /dev/null @@ -1,101 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import clsx from 'clsx'; -import styles from "./CompactJSON.module.scss"; -import { useKeyboard } from './keyboard-context'; -import layout from './isv.json'; - -const inactiveKey = [ - ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '`'], -]; - -export default function CompactJSON({ script = 'Cyrl' }) { - const { keyboardState, handleKeyDown, handleKeyUp, toggleState } = useKeyboard(); - const [pressedKeys, setPressedKeys] = useState({}); - - useEffect(() => { - const handleKeyDownEvent = (e) => { - if (e.code === 'ShiftLeft' || e.code === 'ShiftRight') { - handleKeyDown('shift'); - } else if (e.code === 'ControlLeft' || e.code === 'ControlRight') { - handleKeyDown('ctrl'); - } else if (e.code === 'AltLeft' || e.code === 'AltRight') { - handleKeyDown('alt'); - } - }; - - const handleKeyUpEvent = (e) => { - if (e.code === 'ShiftLeft' || e.code === 'ShiftRight') { - handleKeyUp('shift'); - } else if (e.code === 'ControlLeft' || e.code === 'ControlRight') { - handleKeyUp('ctrl'); - } else if (e.code === 'AltLeft' || e.code === 'AltRight') { - handleKeyUp('alt'); - } - }; - - window.addEventListener('keydown', handleKeyDownEvent); - window.addEventListener('keyup', handleKeyUpEvent); - - return () => { - window.removeEventListener('keydown', handleKeyDownEvent); - window.removeEventListener('keyup', handleKeyUpEvent); - }; - }, []); - - let currentAlphabetData = layout.states[keyboardState.state]; - - const handleKeyPress = (keyIndex, e) => { - setPressedKeys(prevState => ({ - ...prevState, - [keyIndex]: true, - })); - }; - - const handleKeyRelease = (keyIndex, e) => { - setPressedKeys(prevState => ({ - ...prevState, - [keyIndex]: false, - })); - }; - - return ( - <> -
- {inactiveKey[0].map((key, keyIndex) => ( - - {key} - - ))} - {Object.values(currentAlphabetData).map((letter, letterIndex) => ( -
handleKeyPress(letterIndex, e)} - onMouseUp={(e) => handleKeyRelease(letterIndex, e)} - > - {letter} -
- ))} -
toggleState('shift')} - > - shift -
-
toggleState('ctrl')} - > - ctrl -
-
toggleState('alt')} - > - alt -
- -
- - ); -} diff --git a/src/components/KeyboardPreview/CompactJSON.module.scss b/src/components/KeyboardPreview/CompactJSON.module.scss deleted file mode 100644 index 44a6f1123..000000000 --- a/src/components/KeyboardPreview/CompactJSON.module.scss +++ /dev/null @@ -1,72 +0,0 @@ -.keyboard { - display: flex; - flex-wrap: wrap; - width: 309px; - --active-key-bg: #DDE9FB; - --active-key-fg: #506483; - --inactive-key-bg: #F1F3F7; - - --inactive-key-bg-default: var(--inactive-key-bg, transparent); - --active-key-bg-default: var(--active-key-bg, transparent); - --active-key-fg-default: var(--active-key-fg, #000); - - font: 700 13px/14px sans-serif; - - border: 1px solid var(--inactive-key-bg-default); - padding: 3px; -} - -.Cyrl { - --active-key-bg: #DED8F1; - --active-key-fg: #3F3274; -} - - -.key { - display: flex; - width: 17px; - height: 16px; - justify-content: center; - align-items: center; - - margin: 0 4px 6px 0; - border-radius: 3px; - text-align: center; - - background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 10%), var(--active-key-bg-default); - color: var(--active-key-fg-default); - - &.shift { - width: 43px; - } - - &.ctrl, - &.alt { - width: 27px; - } - - &.inactive { - background: #f1f3f7; - height: 9px; - - &:first-child { - width: 18px; - } - - &:nth-child(14) { - width: 17px; - } - - &:nth-child(15) { - width: 17px; - height: 16px; - background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 10%), var(--active-key-bg-default); - color: var(--active-key-fg-default); - } - - } -} - -.pressed { - background-color: #adcaf5; -} \ No newline at end of file diff --git a/src/components/KeyboardPreview/Full.jsx b/src/components/KeyboardPreview/Full.jsx index 190cfbb5c..ccb47b392 100644 --- a/src/components/KeyboardPreview/Full.jsx +++ b/src/components/KeyboardPreview/Full.jsx @@ -208,7 +208,6 @@ export default function Full({ name, lang, script, states, layout }) { - ) } diff --git a/src/components/KeyboardPreview/Wrapper.jsx b/src/components/KeyboardPreview/Wrapper.jsx index 591d4b7a3..683082d5a 100644 --- a/src/components/KeyboardPreview/Wrapper.jsx +++ b/src/components/KeyboardPreview/Wrapper.jsx @@ -3,7 +3,6 @@ import { useResizeObserver } from '@site/src/hooks' import styles from './Wrapper.module.scss' import FullKeyboardPreview from './Full' import CompactKeyboardPreview from './Compact' -import CompactJSON from './CompactJSON' import layout from './isv.json' import { useKeyboard, KeyboardProvider } from './keyboard-context' diff --git a/src/components/KeyboardPreview/layout1.json b/src/components/KeyboardPreview/layout1.json deleted file mode 100644 index a9bfab8a1..000000000 --- a/src/components/KeyboardPreview/layout1.json +++ /dev/null @@ -1,117 +0,0 @@ -{ - "name": "Українська (розширена)", - "lang": "uk", - "script": "Cyrl", - "states": { - "0": { - "48": "0", - "49": "1", - "50": "2", - "51": "3", - "52": "4", - "53": "5", - "54": "6", - "55": "7", - "56": "8", - "57": "9", - "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", - "186": ";", - "187": "=", - "188": ",", - "189": "-", - "190": ".", - "191": "/", - "192": "`", - "219": "[", - "220": "\\", - "221": "]", - "222": "'" - }, - "1": { - "48": ")", - "49": "!", - "50": "@", - "51": "#", - "52": "$", - "53": "%", - "54": "^", - "55": "&", - "56": "*", - "57": "(", - "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", - "186": ":", - "187": "+", - "188": "<", - "189": "_", - "190": ">", - "191": "?", - "192": "~", - "219": "{", - "220": "|", - "221": "}", - "222": "\"" - }, - "2": { - "81": "й", - "87": "ц", - "69": "у" - }, - "3": { - "45": 16, - "81": "Й", - "87": "Ц", - "69": "У" - }, - "16": {} - } -} diff --git a/src/components/KeyboardPreview/layout2.json b/src/components/KeyboardPreview/layout2.json deleted file mode 100644 index 667d233cd..000000000 --- a/src/components/KeyboardPreview/layout2.json +++ /dev/null @@ -1,49 +0,0 @@ -{ - "39": "'", - "44": ",", - "45": "-", - "46": ".", - "47": "/", - "48": "0", - "49": "1", - "50": "2", - "51": "3", - "52": "4", - "53": "5", - "54": "6", - "55": "7", - "56": "8", - "57": "9", - "59": ";", - "61": "=", - "91": "[", - "92": "\\", - "93": "]", - "96": "`", - "97": "a", - "98": "b", - "99": "c", - "100": "d", - "101": "e", - "102": "f", - "103": "g", - "104": "h", - "105": "i", - "106": "j", - "107": "k", - "108": "l", - "109": "m", - "110": "n", - "111": "o", - "112": "p", - "113": "q", - "114": "r", - "115": "s", - "116": "t", - "117": "u", - "118": "v", - "119": "w", - "120": "x", - "121": "y", - "122": "z" -} From ac372ffca9b7ddc440c1a2ff290ead5bcc14950a Mon Sep 17 00:00:00 2001 From: Artem Vasylenko Date: Fri, 18 Aug 2023 23:04:37 +0300 Subject: [PATCH 26/30] full-html keyboard in progress --- src/components/KeyboardPreview/Full.jsx | 100 +++++++---- .../KeyboardPreview/Full.module.scss | 169 +++++++++++++++++- 2 files changed, 234 insertions(+), 35 deletions(-) diff --git a/src/components/KeyboardPreview/Full.jsx b/src/components/KeyboardPreview/Full.jsx index ccb47b392..9845f50b4 100644 --- a/src/components/KeyboardPreview/Full.jsx +++ b/src/components/KeyboardPreview/Full.jsx @@ -208,18 +208,28 @@ export default function Full({ name, lang, script, states, layout }) { + + ) } /*==============*/ -function CustomText({ x, y, children, correctionPointX = 10, correctionPointY = 12, alt = false, shift = false, className, handleMouseDown, handleMouseUp }) { +function CustomText({ x, y, shift = false, alt = false, correctionPointX = 10, correctionPointY = 12, handleMouseDown, handleMouseUp, children }) { const tx = x + correctionPointX + (alt ? 20 : 0); const ty = y + correctionPointY + (shift ? 0 : 20); + const simbolStyle = alt + ? shift + ? styles.textColorAltShift + : styles.textColorAlt + : shift + ? styles.textColorShift + : styles.textColorBase; + return ( { setIsClicked(true); }; @@ -240,13 +257,6 @@ function FullKey({ code, layout, x, y, width = 75, height = 41, correctionPointY setIsClicked(false); }; - const keyTextProps = { - x, - y, - fontSize: 13, - fontWeight: 600, - }; - return ( - - {content} - - {alt && {content}} - {shift && {content}} - {altShift && {content}} + {contentBase} + {contentShif} + {contentAlt} + {contentAltShif} ); } -function FullKeyboard({ className, layout, code }) { - - const context = useKey().keyboardState; - const { state, modifier, pressed } = context; - const content = layout.states[state][code]?.[modifier] ?? '\u00a0'; +function FullKeyboard2({ className, layout }) { return ( - {/*
- {keys.map((row, rowIndex) => ( -
- {row.map((code, columnIndex) => ( - - ))} -
- ))} -
*/} - + {keys.map((row, rowIndex) => ( + + {row.map((code, columnIndex) => { + const x = 9.5 + columnIndex * 48; + const y = 28.5 + rowIndex * 48; + return + })} + + ))} @@ -312,3 +313,34 @@ function FullKeyboard({ className, layout, code }) { ); } +function keySimbol() { }; + +function FullKey({ code, layout }) { + const context = useKey().keyboardState; + const { state, modifier, pressed, onKeyDown, onKeyUp } = context; + const content = layout.states[state][code]?.[modifier] ?? '\u00a0'; + + /* const onMouseDown = useCallback(() => onKeyDown(code), [code, onKeyDown]); + const onMouseUp = useCallback(() => onKeyUp(code), [code, onKeyUp]); */ + + return ( + + {content} + + ); +} + +function FullKeyboard({ className, layout }) { + return ( +
+ {keys.map((row, rowIndex) => ( +
+ {row.map((code, columnIndex) => ( + + ))} +
+ ))} +
+ ); +} + diff --git a/src/components/KeyboardPreview/Full.module.scss b/src/components/KeyboardPreview/Full.module.scss index 13e43497a..507fe97f5 100644 --- a/src/components/KeyboardPreview/Full.module.scss +++ b/src/components/KeyboardPreview/Full.module.scss @@ -60,6 +60,12 @@ fill: var(--key-fill-color); } +.mainRect { + width: 716px; + height: 272px; + stroke: #777; +} + .rect { width: 41px; height: 41px; @@ -68,11 +74,172 @@ } .keyText { - font-size: 13; + font-size: 13px; font-weight: 600; + dominant-baseline: middle; + text-anchor: middle; } .serviceKeyText { font-size: 10; font-weight: 500; +} + +/* ============== */ + +.keyboard { + display: inline-flex; + flex-direction: column; + font-family: sans-serif; + + [data-theme='light'] & { + --text-color-base: #444; + --text-color-alt: #337093; + --text-color-shift: #8E4040; + --text-color-alt-shift: #671584; + --text-color-service: #646464; + + --svg-fill-color: #fff; + + --key-fill-color: #fff; + --key-fill-click-color: #e7f3ff; + } + + [data-theme='dark'] & { + --text-color-base: #eaebec; + --text-color-alt: #83a2bb; + --text-color-shift: #a0808c; + --text-color-alt-shift: #c3b9da; + --text-color-service: #eaebec; + + --svg-fill-color: #1a2933; + + --key-fill-color: #1a2933; + --key-fill-click-color: #274255; + } + + width: 718px; + height: 301px; + border: #777 solid 1px; + border-radius: 8px; + padding: 30px 9px 9px; +} + +.row { + display: flex; + margin-bottom: 7px; + + &:last-child { + margin-bottom: 0; + } + + >* { + margin-right: 7px; + } + + > :last-child { + margin-right: 0; + } +} + +.key { + display: flex; + width: 41px; + height: 41px; + justify-content: center; + align-items: center; + border: #646464 solid 1px; + border-radius: 3px; + + &.inactive { + background: #e5e5e5; + + .row:nth-child(1)>& { + height: 20px; + + &:last-child { + width: 75px; + } + } + + .row:nth-child(2)>& { + &:last-child { + width: 75px; + } + } + + .row:nth-child(3)>& { + &:first-child { + width: 75px; + } + + &:last-child { + width: 26px; + } + } + + .row:nth-child(4)>& { + &:first-child { + width: 89px; + } + + &:last-child { + width: 75px; + } + } + + .row:nth-child(5)>& { + &:first-child { + width: 113px; + } + + &:last-child { + width: 99px; + } + } + + .row:nth-child(6)>& { + + &:nth-child(1) { + width: 102px; + } + + &:nth-child(2) { + width: 92px; + } + + &:nth-child(3) { + width: 238px; + } + + &:nth-child(4) { + width: 44px; + } + + &:nth-child(5) { + width: 44px; + } + + &:nth-child(6) { + width: 44px; + } + + &:nth-child(7) { + width: 44px; + height: 20px; + position: relative; + } + + &:nth-child(8) { + width: 44px; + height: 20px; + position: absolute; + top: 22px; + border-color: red; + } + + &:nth-child(9) {} + } + } + } \ No newline at end of file From ae9a4e538b7f113143a1d1ffe4e3afcd9d9b8709 Mon Sep 17 00:00:00 2001 From: Artem Vasylenko Date: Mon, 21 Aug 2023 16:53:07 +0300 Subject: [PATCH 27/30] full keyboard - pre-prepared --- src/components/KeyboardPreview/Compact.jsx | 14 +- src/components/KeyboardPreview/Full.jsx | 395 ++++++------------ .../KeyboardPreview/Full.module.scss | 171 +------- .../KeyboardPreview/keyboard-context.js | 2 + 4 files changed, 150 insertions(+), 432 deletions(-) diff --git a/src/components/KeyboardPreview/Compact.jsx b/src/components/KeyboardPreview/Compact.jsx index 505e12f99..e77f36603 100644 --- a/src/components/KeyboardPreview/Compact.jsx +++ b/src/components/KeyboardPreview/Compact.jsx @@ -14,24 +14,24 @@ const keys = [ ['ControlLeft', 'AltLeft', 'Space', 'AltRight', 'ControlRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'ArrowRight'], ]; -export default function Compact({ className, layout }) { +export default function Compact({ className }) { return (
Default
- +
Shift
- +
Alt
- +
Alt + Shift
- +
); @@ -51,9 +51,9 @@ function CompactKeyboard({ className, layout, modifier }) { ); } -function CompactKey({ code, layout, modifier: modifierOverride }) { +function CompactKey({ code, modifier: modifierOverride }) { const context = useKey().keyboardState; - const { state, modifier: modifierDynamic, pressed, onKeyDown, onKeyUp } = context; + const { layout, state, modifier: modifierDynamic, pressed, onKeyDown, onKeyUp } = context; const modifier = modifierOverride ?? modifierDynamic; const content = layout.states[state][code]?.[modifier] ?? '\u00a0'; diff --git a/src/components/KeyboardPreview/Full.jsx b/src/components/KeyboardPreview/Full.jsx index 9845f50b4..1856fbb96 100644 --- a/src/components/KeyboardPreview/Full.jsx +++ b/src/components/KeyboardPreview/Full.jsx @@ -6,7 +6,6 @@ import { useKey } from './keyboard-context.js'; const SERVICE_KEYS = new Set(['ControlLeft', 'AltLeft', 'Space', 'AltRight', 'ControlRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'ArrowRight', 'ShiftLeft', 'ShiftRight', 'CapsLock', 'Enter', "Escape", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12", "Delete", "Backspace", "Tab"]); const keys = [ - ["Escape", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12", "Delete"], ["Backquote", "Digit1", "Digit2", "Digit3", "Digit4", "Digit5", "Digit6", "Digit7", "Digit8", "Digit9", "Digit0", "Minus", "Equal", "Backspace"], , ["Tab", "KeyQ", "KeyW", "KeyE", "KeyR", "KeyT", "KeyY", "KeyU", "KeyI", "KeyO", "KeyP", "BracketLeft", "BracketRight", "Backslash"], ["CapsLock", "KeyA", "KeyS", "KeyD", "KeyF", "KeyG", "KeyH", "KeyJ", "KeyK", "KeyL", "Semicolon", "Quote", "Enter"], @@ -14,158 +13,144 @@ const keys = [ ['ControlLeft', 'AltLeft', 'Space', 'AltRight', 'ControlRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'ArrowRight'], ]; +const serviceKeys = { + ControlLeft: { x: 9.5, y: 224.5, width: 102, height: 41, label: 'ctrl' }, + ControlRight: { x: 513.5, y: 224.5, width: 44, height: 41, label: 'ctrl' }, + AltLeft: { x: 118.5, y: 224.5, width: 92, height: 41, label: 'alt' }, + AltRight: { x: 462.5, y: 224.5, width: 44, height: 41, label: 'alt' }, + ShiftLeft: { x: 9.5, y: 174.5, width: 113, height: 41, label: 'shift' }, + ShiftRight: { x: 609.5, y: 174.5, width: 99, height: 41, label: 'shift' }, + Space: { x: 217.5, y: 224.5, width: 238, height: 41, label: '' }, + CapsLock: { x: 9.5, y: 126.5, width: 89, height: 41, label: 'caps lock' }, + Enter: { x: 633.5, y: 126.5, width: 75, height: 41, label: 'enter' }, + Backspace: { x: 633.5, y: 28.5, width: 75, height: 41, label: 'backspace' }, + Tab: { x: 9.5, y: 76.5, width: 75, height: 41, label: 'tab' }, + ArrowLeft: { x: 564.5, y: 245.5, width: 44, height: 21, label: '◄' }, + ArrowUp: { x: 613.5, y: 224.5, width: 44, height: 21, label: '▲' }, + ArrowDown: { x: 613.5, y: 245.5, width: 44, height: 21, label: '▼' }, + ArrowRight: { x: 662.5, y: 245.5, width: 44, height: 21, label: '►' }, + + +}; + +function KeySimbol({ x, y, modifier, shift = false, alt = false, label, correctionPointX = 10, correctionPointY = 12, children }) { + let tx = x + correctionPointX; + let ty = y + correctionPointY; + + let display; + if (modifier > 0) { + display = ((shift ? 1 : 0) | (alt ? 6 : 0)) === modifier + } else { + display = modifier === 0; + } + let simbolStyle = alt + ? shift + ? styles.textColorAltShift + : styles.textColorAlt + : shift + ? styles.textColorShift + : styles.textColorBase; - -function KeyText({ x, y, alt, shift, children, handleMouseDown, handleMouseUp, className }) { - - const tx = x + 10 + (alt ? 20 : 0); - const ty = y + 12 + (shift ? 0 : 20); + if (label) { + tx = x; + ty = y; + simbolStyle = styles.serviceKeyText; + display = true; + } return ( + > {children} - ) + ); } -function Key({ base, alt, shift, altShift, x, y }) { - const [isClicked, setIsClicked] = useState(false); - const handleMouseDown = () => { - setIsClicked(true); - } - const handleMouseUp = () => { - setIsClicked(false); +function FullKey({ code, x, y, base, shift, alt, shiftAlt, label, width = 41, height = 41 }) { + const context = useKey().keyboardState; + const { layout, state, modifier, pressed, onKeyDown, onKeyUp } = context; + const isClicked = pressed.has(code); + const content = n => { + return layout.states[state][code]?.[n] ?? '\u00a0'; + }; + + let renderedX = x; + let renderedY = y; + let renderedWidth = width; + let renderedHeight = height; + let renderedLabel = label; + + const serviceKeyData = serviceKeys[code]; + if (SERVICE_KEYS.has(code)) { + renderedX = serviceKeyData.x; + renderedY = serviceKeyData.y; + renderedWidth = serviceKeyData.width; + renderedHeight = serviceKeyData.height; + renderedLabel = serviceKeyData.label; + } else { + base = base ?? content(0); + shift = shift ?? content(1); + alt = alt ?? content(6); + shiftAlt = shiftAlt ?? content(7); } - return ( - - - {base} - {alt} - {shift} - {altShift} - - ) -} -function ServiceKeyText({ x, y, children, correctionPointX = 17.297, correctionPointY = 23.918, handleMouseDown, handleMouseUp }) { - const tx = x + correctionPointX; - const ty = y + correctionPointY; + const arrow = code.includes("Arrow"); - return ( - - {children} - - ) -} - -function ServiceKey({ base, x, y, width = 75, height = 41, correctionPointY }) { - const [isClicked, setIsClicked] = useState(false); - const handleMouseDown = () => { - setIsClicked(true); - } - const handleMouseUp = () => { - setIsClicked(false); - } return ( - {base} + width={renderedWidth} + height={renderedHeight} + x={renderedX} + y={renderedY} + className={clsx(styles.keyRect, { [styles.clicked]: isClicked })} + /> + {base && {base}} + {shift && {shift}} + {alt && {alt}} + {shiftAlt && {shiftAlt}} + {renderedLabel && {renderedLabel}} - ) + ); } -const base = "`1234567890-=qwertyuiop[]\\asdfghjkl;'zxcvbnm,./"; -const alt = "ü¹²³⁴‰¶↑↓←→—≠śęěŕťùųąȯòėřṙåšďđğḥůłĺľăžźčćňńżŀèı"; -const shift = "~!@#$%^&*()_+QWERTYUIOP{}|ASDFGHJKL:\"ZXCVBNM<>?"; -const altShift = ['Ü', '÷', '¹⁄₂', '¹⁄₃', '¹⁄₄', 'fi', 'ˆ', '¿', '°', '〈', '°', ...'–±ŚĘĚŔŤÙŲĄȮÒĖŘṘÅŠĎĐĞḤŮŁĹĽĂŽŹČĆŇŃŻĿÈI'.split('')]; - -function keyList(startX, y, startNumber, endNumber) { +function keyList(startX, y, keys) { let x = startX; const keyRow = []; - for (let i = startNumber; i <= endNumber; i++) { + for (const code of keys) { keyRow.push( - + ) - x += 48; + if (!SERVICE_KEYS.has(code)) { + x += 48; + } } return keyRow; } -const firstRow = keyList(9.5, 28.5, 0, 12); -const secondRow = keyList(91.5, 76.5, 13, 25); -const thidRow = keyList(105.5, 126.5, 26, 36); -const fouthRow = keyList(129.5, 174.5, 37, 46); +export default function Full() { + const firstRow = [ + ...keyList(9.5, 28.5, ["Backquote", "Digit1", "Digit2", "Digit3", "Digit4", "Digit5", "Digit6", "Digit7", "Digit8", "Digit9", "Digit0", "Minus", "Equal", "Backspace"]), + ]; + + const secondRow = [ + ...keyList(91.5, 76.5, ["Tab", "KeyQ", "KeyW", "KeyE", "KeyR", "KeyT", "KeyY", "KeyU", "KeyI", "KeyO", "KeyP", "BracketLeft", "BracketRight", "Backslash"]), + ]; + + const thidRow = [ + ...keyList(105.5, 126.5, ["CapsLock", "KeyA", "KeyS", "KeyD", "KeyF", "KeyG", "KeyH", "KeyJ", "KeyK", "KeyL", "Semicolon", "Quote", "Enter"]), + ]; -export default function Full({ name, lang, script, states, layout }) { + const fouthRow = [ + ...keyList(129.5, 174.5, ["ShiftLeft", "KeyZ", "KeyX", "KeyC", "KeyV", "KeyB", "KeyN", "KeyM", "Comma", "Period", "Slash", "ShiftRight"])]; + + const fifthRow = [ + ...keyList(9.5, 224.5, ['ControlLeft', 'AltLeft', 'Space', 'AltRight', 'ControlRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'ArrowRight'])]; return ( <> @@ -186,161 +171,35 @@ export default function Full({ name, lang, script, states, layout }) { > {firstRow} - - {secondRow} - {thidRow} - - {fouthRow} - - - - - - - - - - + {fifthRow} - - ) } -/*==============*/ - -function CustomText({ x, y, shift = false, alt = false, correctionPointX = 10, correctionPointY = 12, handleMouseDown, handleMouseUp, children }) { - const tx = x + correctionPointX + (alt ? 20 : 0); - const ty = y + correctionPointY + (shift ? 0 : 20); - const simbolStyle = alt - ? shift - ? styles.textColorAltShift - : styles.textColorAlt - : shift - ? styles.textColorShift - : styles.textColorBase; - return ( - - {children} - - ); -} - -function FullKey2({ code, layout, x, y, width = 41, height = 41 }) { - const [isClicked, setIsClicked] = useState(false); - - const context = useKey().keyboardState; - const { state, modifier, pressed } = context; - const contentBase = layout.states[state][code]?.[0] ?? '\u00a0'; - const contentShif = layout.states[state][code]?.[1] ?? '\u00a0'; - const contentAlt = layout.states[state][code]?.[6] ?? '\u00a0'; - const contentAltShif = layout.states[state][code]?.[7] ?? '\u00a0'; - - const handleMouseDown = () => { - setIsClicked(true); - }; - - const handleMouseUp = () => { - setIsClicked(false); - }; - - return ( - - - {contentBase} - {contentShif} - {contentAlt} - {contentAltShif} - - ); -} - -function FullKeyboard2({ className, layout }) { - - return ( - - - - - - {keys.map((row, rowIndex) => ( - - {row.map((code, columnIndex) => { - const x = 9.5 + columnIndex * 48; - const y = 28.5 + rowIndex * 48; - return - })} - - ))} - - - - - - ); -} - -function keySimbol() { }; - -function FullKey({ code, layout }) { - const context = useKey().keyboardState; - const { state, modifier, pressed, onKeyDown, onKeyUp } = context; - const content = layout.states[state][code]?.[modifier] ?? '\u00a0'; - - /* const onMouseDown = useCallback(() => onKeyDown(code), [code, onKeyDown]); - const onMouseUp = useCallback(() => onKeyUp(code), [code, onKeyUp]); */ - - return ( - - {content} - - ); -} - -function FullKeyboard({ className, layout }) { - return ( -
- {keys.map((row, rowIndex) => ( -
- {row.map((code, columnIndex) => ( - - ))} -
- ))} -
- ); -} +/* { + , + , + , + , + , + , + , + , + , + , + , + , + , + , + , + +} */ \ No newline at end of file diff --git a/src/components/KeyboardPreview/Full.module.scss b/src/components/KeyboardPreview/Full.module.scss index 507fe97f5..8f7c0a6ca 100644 --- a/src/components/KeyboardPreview/Full.module.scss +++ b/src/components/KeyboardPreview/Full.module.scss @@ -48,9 +48,7 @@ fill: var(--text-color-alt-shift); } -.textColorService { - fill: var(--text-color-service); -} +.textColorService {} .svgBackground { fill: var(--svg-fill-color); @@ -81,165 +79,24 @@ } .serviceKeyText { - font-size: 10; + fill: var(--text-color-service); + font-size: 10px; font-weight: 500; + dominant-baseline: auto; + text-anchor: start; } -/* ============== */ - -.keyboard { - display: inline-flex; - flex-direction: column; - font-family: sans-serif; - - [data-theme='light'] & { - --text-color-base: #444; - --text-color-alt: #337093; - --text-color-shift: #8E4040; - --text-color-alt-shift: #671584; - --text-color-service: #646464; - - --svg-fill-color: #fff; - - --key-fill-color: #fff; - --key-fill-click-color: #e7f3ff; - } - - [data-theme='dark'] & { - --text-color-base: #eaebec; - --text-color-alt: #83a2bb; - --text-color-shift: #a0808c; - --text-color-alt-shift: #c3b9da; - --text-color-service: #eaebec; - - --svg-fill-color: #1a2933; - - --key-fill-color: #1a2933; - --key-fill-click-color: #274255; - } - - width: 718px; - height: 301px; - border: #777 solid 1px; - border-radius: 8px; - padding: 30px 9px 9px; +.keyRect { + stroke: #646464; + stroke-width: 1px; + rx: 3px; } -.row { - display: flex; - margin-bottom: 7px; - - &:last-child { - margin-bottom: 0; - } - - >* { - margin-right: 7px; - } - - > :last-child { - margin-right: 0; - } +.clicked { + stroke: #147CFA; + stroke-width: 3px; } -.key { - display: flex; - width: 41px; - height: 41px; - justify-content: center; - align-items: center; - border: #646464 solid 1px; - border-radius: 3px; - - &.inactive { - background: #e5e5e5; - - .row:nth-child(1)>& { - height: 20px; - - &:last-child { - width: 75px; - } - } - - .row:nth-child(2)>& { - &:last-child { - width: 75px; - } - } - - .row:nth-child(3)>& { - &:first-child { - width: 75px; - } - - &:last-child { - width: 26px; - } - } - - .row:nth-child(4)>& { - &:first-child { - width: 89px; - } - - &:last-child { - width: 75px; - } - } - - .row:nth-child(5)>& { - &:first-child { - width: 113px; - } - - &:last-child { - width: 99px; - } - } - - .row:nth-child(6)>& { - - &:nth-child(1) { - width: 102px; - } - - &:nth-child(2) { - width: 92px; - } - - &:nth-child(3) { - width: 238px; - } - - &:nth-child(4) { - width: 44px; - } - - &:nth-child(5) { - width: 44px; - } - - &:nth-child(6) { - width: 44px; - } - - &:nth-child(7) { - width: 44px; - height: 20px; - position: relative; - } - - &:nth-child(8) { - width: 44px; - height: 20px; - position: absolute; - top: 22px; - border-color: red; - } - - &:nth-child(9) {} - } - } - +.muted { + opacity: 0.2; } \ No newline at end of file diff --git a/src/components/KeyboardPreview/keyboard-context.js b/src/components/KeyboardPreview/keyboard-context.js index 722f199a2..9c930c96b 100644 --- a/src/components/KeyboardPreview/keyboard-context.js +++ b/src/components/KeyboardPreview/keyboard-context.js @@ -62,6 +62,7 @@ export function useKeyboard(layout) { pressedChanged ) { setKeyboardState({ + ...keyboardState, state, modifier, pressed, @@ -74,6 +75,7 @@ export function useKeyboard(layout) { const handleBlur = useCallback( (e) => { setKeyboardState({ + ...keyboardState, state: "", modifier: 0, pressed: new Set(), From 37d9aa6522caacda1aa36a10ce4c6c2f5b8bff7b Mon Sep 17 00:00:00 2001 From: Artem Vasylenko Date: Tue, 22 Aug 2023 10:32:38 +0300 Subject: [PATCH 28/30] full keyboard - pre-prepared update --- src/components/KeyboardPreview/Full.jsx | 104 +++++++++++++++++++++++- 1 file changed, 103 insertions(+), 1 deletion(-) diff --git a/src/components/KeyboardPreview/Full.jsx b/src/components/KeyboardPreview/Full.jsx index 1856fbb96..9e79c46bb 100644 --- a/src/components/KeyboardPreview/Full.jsx +++ b/src/components/KeyboardPreview/Full.jsx @@ -28,10 +28,112 @@ const serviceKeys = { ArrowLeft: { x: 564.5, y: 245.5, width: 44, height: 21, label: '◄' }, ArrowUp: { x: 613.5, y: 224.5, width: 44, height: 21, label: '▲' }, ArrowDown: { x: 613.5, y: 245.5, width: 44, height: 21, label: '▼' }, - ArrowRight: { x: 662.5, y: 245.5, width: 44, height: 21, label: '►' }, + ArrowRight: { x: 662.5, y: 245.5, width: 44, height: 21, label: '►' } +}; + +const keyRow = (overrides, keys) => { + const defaults = { + x: 9.5, + y: 28.5, + width: 41, + height: 41, + + ...overrides, + }; + + const result = {}; + + for (const key of keys) { + const code = typeof key === 'string' ? key : key.code; + const props = typeof key === 'string' ? { ...defaults } : { ...defaults, ...key }; + result[props.code] = props; + } + + return result; +}; + +const row1 = (keys) => keyRow({ x: 9.5, y: 28.5 }, keys); +const row2 = (keys) => keyRow({ x: 91.5, y: 76.5 }, keys); +const row3 = (keys) => keyRow({ x: 105.5, y: 126.5 }, keys); +const row4 = (keys) => keyRow({ x: 129.5, y: 174.5 }, keys); +const row5 = (keys) => keyRow({ x: 9.5, y: 224.5 }, keys); +const keysData = { + ...row1([ + "Backquote", + "Digit1", + "Digit2", + "Digit3", + "Digit4", + "Digit5", + "Digit6", + "Digit7", + "Digit8", + "Digit9", + "Digit0", + "Minus", + "Equal", + { code: "Backspace", label: 'backspace', width: 75 }, + ]), + ...row2([ + { code: "Tab", label: 'tab', width: 41 }, + "KeyQ", + "KeyW", + "KeyE", + "KeyR", + "KeyT", + "KeyY", + "KeyU", + "KeyI", + "KeyO", + "KeyP", + "BracketLeft", + "BracketRight", + "Backslash" + ]), + ...row3([ + { code: "CapsLock", label: 'caps lock', width: 89 }, + "KeyA", + "KeyS", + "KeyD", + "KeyF", + "KeyG", + "KeyH", + "KeyJ", + "KeyK", + "KeyL", + "Semicolon", + "Quote", + { code: "Enter", label: 'enter', width: 75 }, + ]), + ...row4([ + { code: "ShiftLeft", label: 'shift', width: 113 }, + "KeyZ", + "KeyX", + "KeyC", + "KeyV", + "KeyB", + "KeyN", + "KeyM", + "Comma", + "Period", + "Slash", + { code: "ShiftRight", label: 'shift', width: 99 }, + ]), + ...row5([ + { code: "ControlLeft", label: 'ctrl', width: 102 }, + { code: "AltLeft", label: 'alt', width: 92 }, + { code: "Space", label: '', width: 238 }, + { code: "AltRight", label: 'alt', width: 44 }, + { code: "ControlRight", label: 'ctrl', width: 44 }, + { code: "ArrowLeft", label: '◄', width: 44, height: 21 }, + { code: "ArrowUp", label: '▲', width: 44, height: 21 }, + { code: "ArrowDown", label: '▼', width: 44, height: 21 }, + { code: "ArrowRight", label: '►', width: 44, height: 21 }, + ]) }; +console.log(keysData); function KeySimbol({ x, y, modifier, shift = false, alt = false, label, correctionPointX = 10, correctionPointY = 12, children }) { let tx = x + correctionPointX; From 36705aa42edef52eb27c94688ecaf56ada6e0ff8 Mon Sep 17 00:00:00 2001 From: Artem Vasylenko Date: Tue, 22 Aug 2023 17:58:28 +0300 Subject: [PATCH 29/30] full keyboard - pre-prepared update fix --- src/components/KeyboardPreview/Full.jsx | 159 ++++++------------------ 1 file changed, 39 insertions(+), 120 deletions(-) diff --git a/src/components/KeyboardPreview/Full.jsx b/src/components/KeyboardPreview/Full.jsx index 9e79c46bb..53403a4e3 100644 --- a/src/components/KeyboardPreview/Full.jsx +++ b/src/components/KeyboardPreview/Full.jsx @@ -3,59 +3,41 @@ import clsx from 'clsx' import styles from "./Full.module.scss"; import { useKey } from './keyboard-context.js'; -const SERVICE_KEYS = new Set(['ControlLeft', 'AltLeft', 'Space', 'AltRight', 'ControlRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'ArrowRight', 'ShiftLeft', 'ShiftRight', 'CapsLock', 'Enter', "Escape", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12", "Delete", "Backspace", "Tab"]); - -const keys = [ - ["Backquote", "Digit1", "Digit2", "Digit3", "Digit4", "Digit5", "Digit6", "Digit7", "Digit8", "Digit9", "Digit0", "Minus", "Equal", "Backspace"], , - ["Tab", "KeyQ", "KeyW", "KeyE", "KeyR", "KeyT", "KeyY", "KeyU", "KeyI", "KeyO", "KeyP", "BracketLeft", "BracketRight", "Backslash"], - ["CapsLock", "KeyA", "KeyS", "KeyD", "KeyF", "KeyG", "KeyH", "KeyJ", "KeyK", "KeyL", "Semicolon", "Quote", "Enter"], - ["ShiftLeft", "KeyZ", "KeyX", "KeyC", "KeyV", "KeyB", "KeyN", "KeyM", "Comma", "Period", "Slash", "ShiftRight"], - ['ControlLeft', 'AltLeft', 'Space', 'AltRight', 'ControlRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'ArrowRight'], -]; - -const serviceKeys = { - ControlLeft: { x: 9.5, y: 224.5, width: 102, height: 41, label: 'ctrl' }, - ControlRight: { x: 513.5, y: 224.5, width: 44, height: 41, label: 'ctrl' }, - AltLeft: { x: 118.5, y: 224.5, width: 92, height: 41, label: 'alt' }, - AltRight: { x: 462.5, y: 224.5, width: 44, height: 41, label: 'alt' }, - ShiftLeft: { x: 9.5, y: 174.5, width: 113, height: 41, label: 'shift' }, - ShiftRight: { x: 609.5, y: 174.5, width: 99, height: 41, label: 'shift' }, - Space: { x: 217.5, y: 224.5, width: 238, height: 41, label: '' }, - CapsLock: { x: 9.5, y: 126.5, width: 89, height: 41, label: 'caps lock' }, - Enter: { x: 633.5, y: 126.5, width: 75, height: 41, label: 'enter' }, - Backspace: { x: 633.5, y: 28.5, width: 75, height: 41, label: 'backspace' }, - Tab: { x: 9.5, y: 76.5, width: 75, height: 41, label: 'tab' }, - ArrowLeft: { x: 564.5, y: 245.5, width: 44, height: 21, label: '◄' }, - ArrowUp: { x: 613.5, y: 224.5, width: 44, height: 21, label: '▲' }, - ArrowDown: { x: 613.5, y: 245.5, width: 44, height: 21, label: '▼' }, - ArrowRight: { x: 662.5, y: 245.5, width: 44, height: 21, label: '►' } -}; - const keyRow = (overrides, keys) => { const defaults = { x: 9.5, y: 28.5, width: 41, height: 41, - ...overrides, }; const result = {}; + let x = defaults.x; for (const key of keys) { const code = typeof key === 'string' ? key : key.code; - const props = typeof key === 'string' ? { ...defaults } : { ...defaults, ...key }; - result[props.code] = props; + const props = typeof key === 'string' ? { ...defaults, x: x } : { ...defaults, ...key, x: x }; + if (code === "ArrowLeft") { + props.y += 21; + } + if (code === "ArrowDown" || code === "ArrowRight") { + props.y += 21; + props.x += -51; + } + result[code] = props; + x += key.width ? key.width + 7 : defaults.width + 7; + } return result; }; + const row1 = (keys) => keyRow({ x: 9.5, y: 28.5 }, keys); -const row2 = (keys) => keyRow({ x: 91.5, y: 76.5 }, keys); -const row3 = (keys) => keyRow({ x: 105.5, y: 126.5 }, keys); -const row4 = (keys) => keyRow({ x: 129.5, y: 174.5 }, keys); +const row2 = (keys) => keyRow({ x: 9.5, y: 76.5 }, keys); +const row3 = (keys) => keyRow({ x: 9.5, y: 126.5 }, keys); +const row4 = (keys) => keyRow({ x: 9.5, y: 174.5 }, keys); const row5 = (keys) => keyRow({ x: 9.5, y: 224.5 }, keys); const keysData = { @@ -77,7 +59,7 @@ const keysData = { ]), ...row2([ - { code: "Tab", label: 'tab', width: 41 }, + { code: "Tab", label: 'tab', width: 75 }, "KeyQ", "KeyW", "KeyE", @@ -133,7 +115,6 @@ const keysData = { { code: "ArrowRight", label: '►', width: 44, height: 21 }, ]) }; -console.log(keysData); function KeySimbol({ x, y, modifier, shift = false, alt = false, label, correctionPointX = 10, correctionPointY = 12, children }) { let tx = x + correctionPointX; @@ -172,7 +153,7 @@ function KeySimbol({ x, y, modifier, shift = false, alt = false, label, correcti ); } -function FullKey({ code, x, y, base, shift, alt, shiftAlt, label, width = 41, height = 41 }) { +function FullKey({ code, x, y, base, shift, alt, shiftAlt, label, width, height = 41 }) { const context = useKey().keyboardState; const { layout, state, modifier, pressed, onKeyDown, onKeyUp } = context; const isClicked = pressed.has(code); @@ -180,79 +161,42 @@ function FullKey({ code, x, y, base, shift, alt, shiftAlt, label, width = 41, he return layout.states[state][code]?.[n] ?? '\u00a0'; }; - let renderedX = x; - let renderedY = y; - let renderedWidth = width; - let renderedHeight = height; - let renderedLabel = label; + base = base ?? content(0); + shift = shift ?? content(1); + alt = alt ?? content(6); + shiftAlt = shiftAlt ?? content(7); - const serviceKeyData = serviceKeys[code]; - if (SERVICE_KEYS.has(code)) { - renderedX = serviceKeyData.x; - renderedY = serviceKeyData.y; - renderedWidth = serviceKeyData.width; - renderedHeight = serviceKeyData.height; - renderedLabel = serviceKeyData.label; - } else { - base = base ?? content(0); - shift = shift ?? content(1); - alt = alt ?? content(6); - shiftAlt = shiftAlt ?? content(7); - } const arrow = code.includes("Arrow"); return ( - {base && {base}} - {shift && {shift}} - {alt && {alt}} - {shiftAlt && {shiftAlt}} - {renderedLabel && {renderedLabel}} + {base && {base}} + {shift && {shift}} + {alt && {alt}} + {shiftAlt && {shiftAlt}} + {label && {label}} ); } -function keyList(startX, y, keys) { - let x = startX; +export default function Full() { const keyRow = []; - - for (const code of keys) { - keyRow.push( - - ) - if (!SERVICE_KEYS.has(code)) { - x += 48; + for (const key in keysData) { + if (keysData.hasOwnProperty(key)) { + const { x, y, label, width, height } = keysData[key]; + keyRow.push( + + ); } } - return keyRow; -} - -export default function Full() { - const firstRow = [ - ...keyList(9.5, 28.5, ["Backquote", "Digit1", "Digit2", "Digit3", "Digit4", "Digit5", "Digit6", "Digit7", "Digit8", "Digit9", "Digit0", "Minus", "Equal", "Backspace"]), - ]; - - const secondRow = [ - ...keyList(91.5, 76.5, ["Tab", "KeyQ", "KeyW", "KeyE", "KeyR", "KeyT", "KeyY", "KeyU", "KeyI", "KeyO", "KeyP", "BracketLeft", "BracketRight", "Backslash"]), - ]; - - const thidRow = [ - ...keyList(105.5, 126.5, ["CapsLock", "KeyA", "KeyS", "KeyD", "KeyF", "KeyG", "KeyH", "KeyJ", "KeyK", "KeyL", "Semicolon", "Quote", "Enter"]), - ]; - - const fouthRow = [ - ...keyList(129.5, 174.5, ["ShiftLeft", "KeyZ", "KeyX", "KeyC", "KeyV", "KeyB", "KeyN", "KeyM", "Comma", "Period", "Slash", "ShiftRight"])]; - - const fifthRow = [ - ...keyList(9.5, 224.5, ['ControlLeft', 'AltLeft', 'Space', 'AltRight', 'ControlRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'ArrowRight'])]; return ( <> @@ -272,11 +216,7 @@ export default function Full() { stroke="#777" > - {firstRow} - {secondRow} - {thidRow} - {fouthRow} - {fifthRow} + {keyRow} @@ -284,24 +224,3 @@ export default function Full() { ) } - - - -/* { - , - , - , - , - , - , - , - , - , - , - , - , - , - , - , - -} */ \ No newline at end of file From 1872df50a08a0bb5d75061fc01428ac3bf70e4e5 Mon Sep 17 00:00:00 2001 From: Yaroslav Serhieiev Date: Wed, 23 Aug 2023 09:42:41 +0300 Subject: [PATCH 30/30] code review --- docs/learn/orthography.md | 2 +- docs/resources/index.md | 2 +- .../keyboards/{index.mdx => index.md} | 3 +- docs/resources/keyboards/kbdmslat.mdx | 3 +- .../current/learn/orthography.md | 2 +- .../current/resources/index.md | 2 +- .../current/learn/orthography.md | 2 +- .../current/resources/index.md | 2 +- .../current/learn/orthography.md | 2 +- .../current/resources/index.md | 2 +- .../current/learn/orthography.md | 2 +- .../current/resources/index.md | 2 +- .../current/learn/orthography.md | 2 +- .../current/resources/index.md | 2 +- .../current/learn/orthography.md | 2 +- .../current/resources/index.md | 2 +- .../current/learn/orthography.md | 2 +- .../current/resources/index.md | 2 +- .../current/learn/orthography.md | 2 +- .../current/resources/index.md | 2 +- .../current/learn/orthography.md | 2 +- .../current/resources/index.md | 2 +- .../current/learn/orthography.md | 2 +- .../current/resources/index.md | 2 +- .../current/learn/orthography.md | 2 +- .../current/resources/index.md | 2 +- .../current/learn/orthography.md | 2 +- .../current/resources/index.md | 2 +- src/components/KeyboardPreview/Full.jsx | 244 ++++-------------- .../KeyboardPreview/Full.module.scss | 10 +- src/components/KeyboardPreview/Wrapper.jsx | 4 +- src/components/KeyboardPreview/fullLayout.js | 115 +++++++++ .../KeyboardPreview/keyboard-context.js | 12 +- .../keyboards/art-Latn-x-interslv.json} | 0 34 files changed, 194 insertions(+), 249 deletions(-) rename docs/resources/keyboards/{index.mdx => index.md} (88%) create mode 100644 src/components/KeyboardPreview/fullLayout.js rename src/{components/KeyboardPreview/isv.json => markdown/keyboards/art-Latn-x-interslv.json} (100%) diff --git a/docs/learn/orthography.md b/docs/learn/orthography.md index 356c13d05..450dc4860 100644 --- a/docs/learn/orthography.md +++ b/docs/learn/orthography.md @@ -142,7 +142,7 @@ To summarise, there are several possibilities for writing the same word. The gen [1]: #representation-of-problematic-characters -[2]: ../resources/keyboards.mdx +[2]: ../resources/keyboards/index.md [3]: https://web.archive.org/web/20230201091637/http://grzegorz.jagodzinski.prv.pl/gram/en/ipa.html diff --git a/docs/resources/index.md b/docs/resources/index.md index b6836f2d1..5b3989670 100644 --- a/docs/resources/index.md +++ b/docs/resources/index.md @@ -154,7 +154,7 @@ Here are some websites dedicated to the Interslavic language and culture: [17]: https://www.patro.cz/interslavic-zonal-constructed-language/ -[18]: ./keyboards.mdx +[18]: ./keyboards/index.md [19]: https://interslavic-dictionary.com/ diff --git a/docs/resources/keyboards/index.mdx b/docs/resources/keyboards/index.md similarity index 88% rename from docs/resources/keyboards/index.mdx rename to docs/resources/keyboards/index.md index 8981d267a..e41744377 100644 --- a/docs/resources/keyboards/index.mdx +++ b/docs/resources/keyboards/index.md @@ -1,4 +1,5 @@ import { KeyboardPreview } from "@site/src/components"; +import layout from "@site/src/markdown/keyboards/art-Latn-x-interslv.json"; # Keyboards @@ -34,7 +35,7 @@ For the **Interslavic Cyrillic** alphabet: - Serbian (exempted, without "Ы") - + [1]: http://tyflonet.com/siciliano/klaviatury [2]: http://usachov.eu/g diff --git a/docs/resources/keyboards/kbdmslat.mdx b/docs/resources/keyboards/kbdmslat.mdx index 9edca5e19..4c4b24abc 100644 --- a/docs/resources/keyboards/kbdmslat.mdx +++ b/docs/resources/keyboards/kbdmslat.mdx @@ -2,12 +2,13 @@ import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; import { translate } from "@docusaurus/Translate"; import { KeyboardPreview, PlatformDownloads } from "@site/src/components"; +import layout from "@site/src/markdown/keyboards/art-Latn-x-interslv.json"; # Interslavic Keyboard This is the recommended keyboard layout tailored for all Slavic languages and dialects using Latin script, recognized or obscure: from Polish and Czech to less familiar and endangered languages and dialects. - + ## Key features diff --git a/i18n/be/docusaurus-plugin-content-docs/current/learn/orthography.md b/i18n/be/docusaurus-plugin-content-docs/current/learn/orthography.md index 17e7b929d..3577b00ef 100644 --- a/i18n/be/docusaurus-plugin-content-docs/current/learn/orthography.md +++ b/i18n/be/docusaurus-plugin-content-docs/current/learn/orthography.md @@ -143,7 +143,7 @@ Interslavic выкарыстоўвае літару `ј` з сербскай і [1]: #representation-of-problematic-characters -[2]: ../resources/keyboards.md +[2]: ../resources/keyboards/index.md [3]: https://web.archive.org/web/20230201091637/http://grzegorz.jagodzinski.prv.pl/gram/en/ipa.html diff --git a/i18n/be/docusaurus-plugin-content-docs/current/resources/index.md b/i18n/be/docusaurus-plugin-content-docs/current/resources/index.md index c25870348..d1f8c3d4f 100644 --- a/i18n/be/docusaurus-plugin-content-docs/current/resources/index.md +++ b/i18n/be/docusaurus-plugin-content-docs/current/resources/index.md @@ -158,7 +158,7 @@ custom_edit_url: /501 [17]: https://www.patro.cz/interslavic-zonal-constructed-language/ -[18]: ./keyboards.md +[18]: ./keyboards/index.md [19]: https://interslavic-dictionary.com/ diff --git a/i18n/bg/docusaurus-plugin-content-docs/current/learn/orthography.md b/i18n/bg/docusaurus-plugin-content-docs/current/learn/orthography.md index 24ef995df..4a2c79aab 100644 --- a/i18n/bg/docusaurus-plugin-content-docs/current/learn/orthography.md +++ b/i18n/bg/docusaurus-plugin-content-docs/current/learn/orthography.md @@ -143,7 +143,7 @@ Interslavic използва буквата `ј` от сръбската и ма [1]: \#representation-of-problematic-characters -[2]: ../resources/keyboards.md +[2]: ../resources/keyboards/index.md [3]: https://web.archive.org/web/20230201091637/http://grzegorz.jagodzinski.prv.pl/gram/en/ipa.html diff --git a/i18n/bg/docusaurus-plugin-content-docs/current/resources/index.md b/i18n/bg/docusaurus-plugin-content-docs/current/resources/index.md index f2bd0b3f5..3935a8156 100644 --- a/i18n/bg/docusaurus-plugin-content-docs/current/resources/index.md +++ b/i18n/bg/docusaurus-plugin-content-docs/current/resources/index.md @@ -158,7 +158,7 @@ custom_edit_url: /501 [17]: https://www.patro.cz/interslavic-zonal-constructed-language/ -[18]: ./keyboards.md +[18]: ./keyboards/index.md [19]: https://interslavic-dictionary.com/ diff --git a/i18n/bs/docusaurus-plugin-content-docs/current/learn/orthography.md b/i18n/bs/docusaurus-plugin-content-docs/current/learn/orthography.md index b02492022..8dc7495c3 100644 --- a/i18n/bs/docusaurus-plugin-content-docs/current/learn/orthography.md +++ b/i18n/bs/docusaurus-plugin-content-docs/current/learn/orthography.md @@ -143,7 +143,7 @@ Ukratko, postoji nekoliko mogućnosti za pisanje iste riječi. Opšta smjernica [1]: \#representation-of-problematic-characters -[2]: ../resources/keyboards.md +[2]: ../resources/keyboards/index.md [3]: https://web.archive.org/web/20230201091637/http://grzegorz.jagodzinski.prv.pl/gram/en/ipa.html diff --git a/i18n/bs/docusaurus-plugin-content-docs/current/resources/index.md b/i18n/bs/docusaurus-plugin-content-docs/current/resources/index.md index 162e35941..b54d8574c 100644 --- a/i18n/bs/docusaurus-plugin-content-docs/current/resources/index.md +++ b/i18n/bs/docusaurus-plugin-content-docs/current/resources/index.md @@ -158,7 +158,7 @@ Evo nekoliko web stranica posvećenih međuslavenskom jeziku i kulturi: [17]: https://www.patro.cz/interslavic-zonal-constructed-language/ -[18]: ./keyboards.md +[18]: ./keyboards/index.md [19]: https://interslavic-dictionary.com/ diff --git a/i18n/cs/docusaurus-plugin-content-docs/current/learn/orthography.md b/i18n/cs/docusaurus-plugin-content-docs/current/learn/orthography.md index 2adfc888e..78df27fde 100644 --- a/i18n/cs/docusaurus-plugin-content-docs/current/learn/orthography.md +++ b/i18n/cs/docusaurus-plugin-content-docs/current/learn/orthography.md @@ -143,7 +143,7 @@ Abych to shrnul, existuje několik možností, jak napsat stejné slovo. Obecná [1]: #representation-of-problematic-characters -[2]: ../resources/keyboards.md +[2]: ../resources/keyboards/index.md [3]: https://web.archive.org/web/20230201091637/http://grzegorz.jagodzinski.prv.pl/gram/en/ipa.html diff --git a/i18n/cs/docusaurus-plugin-content-docs/current/resources/index.md b/i18n/cs/docusaurus-plugin-content-docs/current/resources/index.md index cd02158dc..3f6ac8ade 100644 --- a/i18n/cs/docusaurus-plugin-content-docs/current/resources/index.md +++ b/i18n/cs/docusaurus-plugin-content-docs/current/resources/index.md @@ -158,7 +158,7 @@ Zde jsou některé webové stránky věnované mezislovanskému jazyku a kultuř [17]: https://www.patro.cz/interslavic-zonal-constructed-language/ -[18]: ./keyboards.md +[18]: ./keyboards/index.md [19]: https://interslavic-dictionary.com/ diff --git a/i18n/hr/docusaurus-plugin-content-docs/current/learn/orthography.md b/i18n/hr/docusaurus-plugin-content-docs/current/learn/orthography.md index e1ef39172..e89aaea05 100644 --- a/i18n/hr/docusaurus-plugin-content-docs/current/learn/orthography.md +++ b/i18n/hr/docusaurus-plugin-content-docs/current/learn/orthography.md @@ -143,7 +143,7 @@ Ukratko, postoji nekoliko mogućnosti za pisanje iste riječi. Opća smjernica j [1]: #representation-of-problematic-characters -[2]: ../resources/keyboards.md +[2]: ../resources/keyboards/index.md [3]: https://web.archive.org/web/20230201091637/http://grzegorz.jagodzinski.prv.pl/gram/en/ipa.html diff --git a/i18n/hr/docusaurus-plugin-content-docs/current/resources/index.md b/i18n/hr/docusaurus-plugin-content-docs/current/resources/index.md index be6f219a9..5e77cc5b8 100644 --- a/i18n/hr/docusaurus-plugin-content-docs/current/resources/index.md +++ b/i18n/hr/docusaurus-plugin-content-docs/current/resources/index.md @@ -158,7 +158,7 @@ Evo nekoliko web stranica posvećenih međuslavenskom jeziku i kulturi: [17]: https://www.patro.cz/interslavic-zonal-constructed-language/ -[18]: ./keyboards.md +[18]: ./keyboards/index.md [19]: https://interslavic-dictionary.com/ diff --git a/i18n/mk/docusaurus-plugin-content-docs/current/learn/orthography.md b/i18n/mk/docusaurus-plugin-content-docs/current/learn/orthography.md index 1ee6ff21e..9619209c3 100644 --- a/i18n/mk/docusaurus-plugin-content-docs/current/learn/orthography.md +++ b/i18n/mk/docusaurus-plugin-content-docs/current/learn/orthography.md @@ -143,7 +143,7 @@ Interslavic ја користи буквата `ј` од српската и м [1]: \#representation-of-problematic-characters -[2]: ../resources/keyboards.md +[2]: ../resources/keyboards/index.md [3]: https://web.archive.org/web/20230201091637/http://grzegorz.jagodzinski.prv.pl/gram/en/ipa.html diff --git a/i18n/mk/docusaurus-plugin-content-docs/current/resources/index.md b/i18n/mk/docusaurus-plugin-content-docs/current/resources/index.md index 2315f8d38..9c133e0e6 100644 --- a/i18n/mk/docusaurus-plugin-content-docs/current/resources/index.md +++ b/i18n/mk/docusaurus-plugin-content-docs/current/resources/index.md @@ -158,7 +158,7 @@ custom_edit_url: /501 [17]: https://www.patro.cz/interslavic-zonal-constructed-language/ -[18]: ./keyboards.md +[18]: ./keyboards/index.md [19]: https://interslavic-dictionary.com/ diff --git a/i18n/pl/docusaurus-plugin-content-docs/current/learn/orthography.md b/i18n/pl/docusaurus-plugin-content-docs/current/learn/orthography.md index da0871a95..0c95851a1 100644 --- a/i18n/pl/docusaurus-plugin-content-docs/current/learn/orthography.md +++ b/i18n/pl/docusaurus-plugin-content-docs/current/learn/orthography.md @@ -143,7 +143,7 @@ Podsumowując, istnieje kilka możliwości napisania tego samego słowa. Ogólna [1]: #representation-of-problematic-characters -[2]: ../resources/keyboards.md +[2]: ../resources/keyboards/index.md [3]: https://web.archive.org/web/20230201091637/http://grzegorz.jagodzinski.prv.pl/gram/en/ipa.html diff --git a/i18n/pl/docusaurus-plugin-content-docs/current/resources/index.md b/i18n/pl/docusaurus-plugin-content-docs/current/resources/index.md index 1cd0c37d4..dac06707c 100644 --- a/i18n/pl/docusaurus-plugin-content-docs/current/resources/index.md +++ b/i18n/pl/docusaurus-plugin-content-docs/current/resources/index.md @@ -158,7 +158,7 @@ Poniżej jest kilka stron poświęconych językowi i kulturze międzysłowiańsk [17]: https://www.patro.cz/interslavic-zonal-constructed-language/ -[18]: ./keyboards.md +[18]: ./keyboards/index.md [19]: https://interslavic-dictionary.com/ diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/learn/orthography.md b/i18n/ru/docusaurus-plugin-content-docs/current/learn/orthography.md index 6cd6fda03..a8d74b775 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/learn/orthography.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/learn/orthography.md @@ -143,7 +143,7 @@ import DisappearedPhonemes from '@site/src/markdown/disappeared-phonemes.mdx'; [1]: #representation-of-problematic-characters -[2]: ../resources/keyboards.md +[2]: ../resources/keyboards/index.md [3]: https://web.archive.org/web/20230201091637/http://grzegorz.jagodzinski.prv.pl/gram/en/ipa.html diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/resources/index.md b/i18n/ru/docusaurus-plugin-content-docs/current/resources/index.md index c05484aee..d0a02c724 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/resources/index.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/resources/index.md @@ -158,7 +158,7 @@ custom_edit_url: /501 [17]: https://www.patro.cz/interslavic-zonal-constructed-language/ -[18]: ./keyboards.md +[18]: ./keyboards/index.md [19]: https://interslavic-dictionary.com/ diff --git a/i18n/sk/docusaurus-plugin-content-docs/current/learn/orthography.md b/i18n/sk/docusaurus-plugin-content-docs/current/learn/orthography.md index d4894f5ba..0145d0136 100644 --- a/i18n/sk/docusaurus-plugin-content-docs/current/learn/orthography.md +++ b/i18n/sk/docusaurus-plugin-content-docs/current/learn/orthography.md @@ -143,7 +143,7 @@ Aby som to zhrnul, existuje niekoľko možností na napísanie toho istého slov [1]: #representation-of-problematic-characters -[2]: ../resources/keyboards.md +[2]: ../resources/keyboards/index.md [3]: https://web.archive.org/web/20230201091637/http://grzegorz.jagodzinski.prv.pl/gram/en/ipa.html diff --git a/i18n/sk/docusaurus-plugin-content-docs/current/resources/index.md b/i18n/sk/docusaurus-plugin-content-docs/current/resources/index.md index fe333cf69..2824329c3 100644 --- a/i18n/sk/docusaurus-plugin-content-docs/current/resources/index.md +++ b/i18n/sk/docusaurus-plugin-content-docs/current/resources/index.md @@ -158,7 +158,7 @@ Tu je niekoľko webových stránok venovaných medzislovanským jazykom a kultú [17]: https://www.patro.cz/interslavic-zonal-constructed-language/ -[18]: ./keyboards.md +[18]: ./keyboards/index.md [19]: https://interslavic-dictionary.com/ diff --git a/i18n/sl/docusaurus-plugin-content-docs/current/learn/orthography.md b/i18n/sl/docusaurus-plugin-content-docs/current/learn/orthography.md index a01e4e7a5..92d9dda05 100644 --- a/i18n/sl/docusaurus-plugin-content-docs/current/learn/orthography.md +++ b/i18n/sl/docusaurus-plugin-content-docs/current/learn/orthography.md @@ -143,7 +143,7 @@ Naslednja tabela prikazuje ujemanja med zgoraj omenjenimi črkami (predlagana al [1]: \#representation-of-problematic-characters -[2]: ../resources/keyboards.md +[2]: ../resources/keyboards/index.md [3]: https://web.archive.org/web/20230201091637/http://grzegorz.jagodzinski.prv.pl/gram/en/ipa.html diff --git a/i18n/sl/docusaurus-plugin-content-docs/current/resources/index.md b/i18n/sl/docusaurus-plugin-content-docs/current/resources/index.md index 23afda5bf..41de83547 100644 --- a/i18n/sl/docusaurus-plugin-content-docs/current/resources/index.md +++ b/i18n/sl/docusaurus-plugin-content-docs/current/resources/index.md @@ -158,7 +158,7 @@ Tukaj je nekaj spletnih mest, posvečenih medslovanskemu jeziku in kulturi: [17]: https://www.patro.cz/interslavic-zonal-constructed-language/ -[18]: ./keyboards.md +[18]: ./keyboards/index.md [19]: https://interslavic-dictionary.com/ diff --git a/i18n/sr-Cyrl/docusaurus-plugin-content-docs/current/learn/orthography.md b/i18n/sr-Cyrl/docusaurus-plugin-content-docs/current/learn/orthography.md index b810dbaf8..805afff9d 100644 --- a/i18n/sr-Cyrl/docusaurus-plugin-content-docs/current/learn/orthography.md +++ b/i18n/sr-Cyrl/docusaurus-plugin-content-docs/current/learn/orthography.md @@ -143,7 +143,7 @@ import DisappearedPhonemes from '@site/src/markdown/disappeared-phonemes.mdx'; [1]: #representation-of-problematic-characters -[2]: ../resources/keyboards.md +[2]: ../resources/keyboards/index.md [3]: https://web.archive.org/web/20230201091637/http://grzegorz.jagodzinski.prv.pl/gram/en/ipa.html diff --git a/i18n/sr-Cyrl/docusaurus-plugin-content-docs/current/resources/index.md b/i18n/sr-Cyrl/docusaurus-plugin-content-docs/current/resources/index.md index 13f5e8c9e..2db966d51 100644 --- a/i18n/sr-Cyrl/docusaurus-plugin-content-docs/current/resources/index.md +++ b/i18n/sr-Cyrl/docusaurus-plugin-content-docs/current/resources/index.md @@ -158,7 +158,7 @@ custom_edit_url: /501 [17]: https://www.patro.cz/interslavic-zonal-constructed-language/ -[18]: ./keyboards.md +[18]: ./keyboards/index.md [19]: https://interslavic-dictionary.com/ diff --git a/i18n/uk/docusaurus-plugin-content-docs/current/learn/orthography.md b/i18n/uk/docusaurus-plugin-content-docs/current/learn/orthography.md index 97fc83616..e6d471ab9 100644 --- a/i18n/uk/docusaurus-plugin-content-docs/current/learn/orthography.md +++ b/i18n/uk/docusaurus-plugin-content-docs/current/learn/orthography.md @@ -144,7 +144,7 @@ Interslavic використовує літеру `ј` із сербської [1]: #representation-of-problematic-characters -[2]: ../resources/keyboards.md +[2]: ../resources/keyboards/index.md [3]: https://web.archive.org/web/20230201091637/http://grzegorz.jagodzinski.prv.pl/gram/en/ipa.html diff --git a/i18n/uk/docusaurus-plugin-content-docs/current/resources/index.md b/i18n/uk/docusaurus-plugin-content-docs/current/resources/index.md index ce062cd8f..9e557193f 100644 --- a/i18n/uk/docusaurus-plugin-content-docs/current/resources/index.md +++ b/i18n/uk/docusaurus-plugin-content-docs/current/resources/index.md @@ -158,7 +158,7 @@ custom_edit_url: /501 [17]: https://www.patro.cz/interslavic-zonal-constructed-language/ -[18]: ./keyboards.md +[18]: ./keyboards/index.md [19]: https://interslavic-dictionary.com/ diff --git a/src/components/KeyboardPreview/Full.jsx b/src/components/KeyboardPreview/Full.jsx index 53403a4e3..74d526da6 100644 --- a/src/components/KeyboardPreview/Full.jsx +++ b/src/components/KeyboardPreview/Full.jsx @@ -1,173 +1,41 @@ -import React, { useState } from 'react' +import React from 'react' import clsx from 'clsx' import styles from "./Full.module.scss"; -import { useKey } from './keyboard-context.js'; - -const keyRow = (overrides, keys) => { - const defaults = { - x: 9.5, - y: 28.5, - width: 41, - height: 41, - ...overrides, - }; - - const result = {}; - let x = defaults.x; - - for (const key of keys) { - const code = typeof key === 'string' ? key : key.code; - const props = typeof key === 'string' ? { ...defaults, x: x } : { ...defaults, ...key, x: x }; - if (code === "ArrowLeft") { - props.y += 21; - } - if (code === "ArrowDown" || code === "ArrowRight") { - props.y += 21; - props.x += -51; - } - result[code] = props; - x += key.width ? key.width + 7 : defaults.width + 7; - - } - - return result; -}; - - -const row1 = (keys) => keyRow({ x: 9.5, y: 28.5 }, keys); -const row2 = (keys) => keyRow({ x: 9.5, y: 76.5 }, keys); -const row3 = (keys) => keyRow({ x: 9.5, y: 126.5 }, keys); -const row4 = (keys) => keyRow({ x: 9.5, y: 174.5 }, keys); -const row5 = (keys) => keyRow({ x: 9.5, y: 224.5 }, keys); - -const keysData = { - ...row1([ - "Backquote", - "Digit1", - "Digit2", - "Digit3", - "Digit4", - "Digit5", - "Digit6", - "Digit7", - "Digit8", - "Digit9", - "Digit0", - "Minus", - "Equal", - { code: "Backspace", label: 'backspace', width: 75 }, - ]), - - ...row2([ - { code: "Tab", label: 'tab', width: 75 }, - "KeyQ", - "KeyW", - "KeyE", - "KeyR", - "KeyT", - "KeyY", - "KeyU", - "KeyI", - "KeyO", - "KeyP", - "BracketLeft", - "BracketRight", - "Backslash" - ]), - ...row3([ - { code: "CapsLock", label: 'caps lock', width: 89 }, - "KeyA", - "KeyS", - "KeyD", - "KeyF", - "KeyG", - "KeyH", - "KeyJ", - "KeyK", - "KeyL", - "Semicolon", - "Quote", - { code: "Enter", label: 'enter', width: 75 }, - ]), - ...row4([ - { code: "ShiftLeft", label: 'shift', width: 113 }, - "KeyZ", - "KeyX", - "KeyC", - "KeyV", - "KeyB", - "KeyN", - "KeyM", - "Comma", - "Period", - "Slash", - { code: "ShiftRight", label: 'shift', width: 99 }, - ]), - ...row5([ - { code: "ControlLeft", label: 'ctrl', width: 102 }, - { code: "AltLeft", label: 'alt', width: 92 }, - { code: "Space", label: '', width: 238 }, - { code: "AltRight", label: 'alt', width: 44 }, - { code: "ControlRight", label: 'ctrl', width: 44 }, - { code: "ArrowLeft", label: '◄', width: 44, height: 21 }, - { code: "ArrowUp", label: '▲', width: 44, height: 21 }, - { code: "ArrowDown", label: '▼', width: 44, height: 21 }, - { code: "ArrowRight", label: '►', width: 44, height: 21 }, - ]) -}; - -function KeySimbol({ x, y, modifier, shift = false, alt = false, label, correctionPointX = 10, correctionPointY = 12, children }) { - let tx = x + correctionPointX; - let ty = y + correctionPointY; - - let display; - if (modifier > 0) { - display = ((shift ? 1 : 0) | (alt ? 6 : 0)) === modifier - } else { - display = modifier === 0; - } - - let simbolStyle = alt - ? shift - ? styles.textColorAltShift - : styles.textColorAlt - : shift - ? styles.textColorShift - : styles.textColorBase; - - if (label) { - tx = x; - ty = y; - simbolStyle = styles.serviceKeyText; - display = true; - } +import {useKey} from './keyboard-context.js'; +import keysData from './fullLayout'; +export default function Full() { return ( - - {children} - + + + {Object.entries(keysData).map(([key, props]) => ( + + ))} + + ); } -function FullKey({ code, x, y, base, shift, alt, shiftAlt, label, width, height = 41 }) { +function FullKey({ code, x, y, label, width, height, glyphX = 10, glyphY = 12 }) { const context = useKey().keyboardState; - const { layout, state, modifier, pressed, onKeyDown, onKeyUp } = context; + const { layout, state, modifier, pressed} = context; const isClicked = pressed.has(code); - const content = n => { - return layout.states[state][code]?.[n] ?? '\u00a0'; - }; - - base = base ?? content(0); - shift = shift ?? content(1); - alt = alt ?? content(6); - shiftAlt = shiftAlt ?? content(7); - - - const arrow = code.includes("Arrow"); + const base = layout.states[state][code]?.[0]; + const shift = layout.states[state][code]?.[1]; + const alt = layout.states[state][code]?.[6]; + const shiftAlt = layout.states[state][code]?.[7]; + const shouldMute = (modifier, shift, alt) => modifier > 0 && (modifier !== ((shift * 1) | (alt * 6))); + const tx = x + glyphX; + const ty = y + glyphY; return ( @@ -178,49 +46,25 @@ function FullKey({ code, x, y, base, shift, alt, shiftAlt, label, width, height y={y} className={clsx(styles.keyRect, { [styles.clicked]: isClicked })} /> - {base && {base}} - {shift && {shift}} - {alt && {alt}} - {shiftAlt && {shiftAlt}} - {label && {label}} + + {base && {base}} + {shift && {shift}} + {alt && {alt}} + {shiftAlt && {shiftAlt}} + {label && {label}} + ); } -export default function Full() { - const keyRow = []; - for (const key in keysData) { - if (keysData.hasOwnProperty(key)) { - const { x, y, label, width, height } = keysData[key]; - keyRow.push( - - ); - } - } - +function KeyGlyph({ x, y, className, muted, children }) { return ( - <> - - - - - - {keyRow} - - - - - - ) + + {children} + + ); } diff --git a/src/components/KeyboardPreview/Full.module.scss b/src/components/KeyboardPreview/Full.module.scss index 8f7c0a6ca..776bc4124 100644 --- a/src/components/KeyboardPreview/Full.module.scss +++ b/src/components/KeyboardPreview/Full.module.scss @@ -61,16 +61,10 @@ .mainRect { width: 716px; height: 272px; + rx: 8px; stroke: #777; } -.rect { - width: 41px; - height: 41px; - stroke: "#147CFA"; - fill: "transparent"; -} - .keyText { font-size: 13px; font-weight: 600; @@ -99,4 +93,4 @@ .muted { opacity: 0.2; -} \ No newline at end of file +} diff --git a/src/components/KeyboardPreview/Wrapper.jsx b/src/components/KeyboardPreview/Wrapper.jsx index 683082d5a..9124526b7 100644 --- a/src/components/KeyboardPreview/Wrapper.jsx +++ b/src/components/KeyboardPreview/Wrapper.jsx @@ -3,10 +3,10 @@ import { useResizeObserver } from '@site/src/hooks' import styles from './Wrapper.module.scss' import FullKeyboardPreview from './Full' import CompactKeyboardPreview from './Compact' -import layout from './isv.json' import { useKeyboard, KeyboardProvider } from './keyboard-context' -export default function Wrapper({ alphabet, accentColor }) { +export default function KeyboardPreviewWrapper({ layout }) { + debugger; const [ref, dimensions] = useResizeObserver(); const context = useKeyboard(layout); const KeyboardPreview = dimensions.width < 715 diff --git a/src/components/KeyboardPreview/fullLayout.js b/src/components/KeyboardPreview/fullLayout.js new file mode 100644 index 000000000..f61021062 --- /dev/null +++ b/src/components/KeyboardPreview/fullLayout.js @@ -0,0 +1,115 @@ +const keyRow = (overrides, keys) => { + let defaults = { + x: 9, + y: 28, + width: 41, + height: 41, + gap: 7, + ...overrides, + }; + + const y = defaults.y + 0.5; + let x = defaults.x + 0.5; + + return keys.reduce((result, key) => { + const { code, ...props} = { + x: 0, + y: 0, + width: defaults.width, + height: defaults.height, + ...(typeof key === 'string' ? { code: key } : key), + }; + + props.x += x; + props.y += y; + x = props.x + props.width + defaults.gap; + + result[code] = props; + return result; + }, {}); +}; + +const row1 = (keys) => keyRow({ y: 28 }, keys); +const row2 = (keys) => keyRow({ y: 76 }, keys); +const row3 = (keys) => keyRow({ y: 126 }, keys); +const row4 = (keys) => keyRow({ y: 174 }, keys); +const row5 = (keys) => keyRow({ y: 224 }, keys); + +export default { + ...row1([ + "Backquote", + "Digit1", + "Digit2", + "Digit3", + "Digit4", + "Digit5", + "Digit6", + "Digit7", + "Digit8", + "Digit9", + "Digit0", + "Minus", + "Equal", + { code: "Backspace", label: 'backspace', width: 75 }, + ]), + + ...row2([ + { code: "Tab", label: 'tab', width: 75 }, + "KeyQ", + "KeyW", + "KeyE", + "KeyR", + "KeyT", + "KeyY", + "KeyU", + "KeyI", + "KeyO", + "KeyP", + "BracketLeft", + "BracketRight", + "Backslash" + ]), + + ...row3([ + { code: "CapsLock", label: 'caps lock', width: 89 }, + "KeyA", + "KeyS", + "KeyD", + "KeyF", + "KeyG", + "KeyH", + "KeyJ", + "KeyK", + "KeyL", + "Semicolon", + "Quote", + { code: "Enter", label: 'enter', width: 75 }, + ]), + + ...row4([ + { code: "ShiftLeft", label: 'shift', width: 113 }, + "KeyZ", + "KeyX", + "KeyC", + "KeyV", + "KeyB", + "KeyN", + "KeyM", + "Comma", + "Period", + "Slash", + { code: "ShiftRight", label: 'shift', width: 99 }, + ]), + + ...row5([ + { code: "ControlLeft", label: 'ctrl', width: 102 }, + { code: "AltLeft", label: 'alt', width: 92 }, + { code: "Space", label: '', width: 238 }, + { code: "AltRight", label: 'alt', width: 44 }, + { code: "ControlRight", label: 'ctrl', width: 44 }, + { code: "ArrowLeft", label: '◀', width: 44, height: 21, y: 21, glyphY: 3 }, + { code: "ArrowUp", label: '▲', width: 44, height: 21, glyphY: 2 }, + { code: "ArrowDown", label: '▼', width: 44, height: 21, x: -51, y: 21, glyphY: 4}, + { code: "ArrowRight", label: '►', width: 44, height: 21, y: 21, glyphY: 3 }, + ]) +}; diff --git a/src/components/KeyboardPreview/keyboard-context.js b/src/components/KeyboardPreview/keyboard-context.js index 9c930c96b..ed05dd289 100644 --- a/src/components/KeyboardPreview/keyboard-context.js +++ b/src/components/KeyboardPreview/keyboard-context.js @@ -76,7 +76,7 @@ export function useKeyboard(layout) { (e) => { setKeyboardState({ ...keyboardState, - state: "", + state: '', modifier: 0, pressed: new Set(), }); @@ -96,19 +96,9 @@ export function useKeyboard(layout) { }; }, [handleKeyEvent, handleBlur]); - // const toggleState = (serviceKey) => { - // setKeyboardState((prevState) => ({ - // ...prevState, - // [serviceKey]: !prevState[serviceKey], - // })); - // }; - return useMemo( () => ({ keyboardState, - // handleKeyEvent, - // handleKeyUp, - // toggleState, }), [keyboardState] ); diff --git a/src/components/KeyboardPreview/isv.json b/src/markdown/keyboards/art-Latn-x-interslv.json similarity index 100% rename from src/components/KeyboardPreview/isv.json rename to src/markdown/keyboards/art-Latn-x-interslv.json