ನಾನು 60 ಸಾಲುಗಳಲ್ಲಿ Cmd-K ಕಮಾಂಡ್ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ಮರುನಿರ್ಮಿಸಿದೆ
Linear, Raycast, ಮತ್ತು VS Code ನಂತಹ ಅಪ್ಲಿಕೇಶನ್ಗಳು ಕಮಾಂಡ್ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ಬಳಸುತ್ತವೆ. ನೀವು ⌘K ಒತ್ತಿ, ಕೆಲವು ಅಕ್ಷರಗಳನ್ನು ಟೈಪ್ ಮಾಡಿ, ಮತ್ತು Enter ಒತ್ತುತ್ತೀರಿ. ಇದು ಸಂಕೀರ್ಣವಾಗಿ ಕಾಣಿಸಬಹುದು. ಆದರೆ ವಾಸ್ತವವಾಗಿ ಇದು ಕೇವಲ 60 ಸಾಲುಗಳ JavaScript ಆಗಿದೆ.
ಅದನ್ನು ನಿರ್ಮಿಸುವುದು ಹೇಗೆ ಎಂಬುದು ಇಲ್ಲಿದೆ:
- ಕೀಬೋರ್ಡ್ ಲಿಸನರ್ (The Keyboard Listener)
ನಿಮಗೆ ಗ್ಲೋಬಲ್ ಲಿಸನರ್ ಅಗತ್ಯವಿದೆ. ಬ್ರೌಸರ್ಗಳು ಸರ್ಚ್ ಮಾಡಲು Ctrl+K ಅನ್ನು ಬಳಸುತ್ತವೆ. ಇದನ್ನು ತಡೆಯಲು ನೀವು
preventDefaultಅನ್ನು ಬಳಸಲೇಬೇಕು.
document.addEventListener("keydown", e => {
if ((e.metaKey || e.ctrlKey) && e.key === "k") {
e.preventDefault();
openPalette();
}
});
- ಕಮಾಂಡ್ ಡೇಟಾ (Command Data) ಪ್ರತಿಯೊಂದು ಕ್ರಿಯೆಯನ್ನು (action) ಒಂದು ಆಬ್ಜೆಕ್ಟ್ ಆಗಿ ಸಂಗ್ರಹಿಸಿ. ಇದರಿಂದ UI ಸರಳವಾಗಿರುತ್ತದೆ. ಇದು ಈ ಆಬ್ಜೆಕ್ಟ್ಗಳನ್ನು ಪಟ್ಟಿ ಮಾಡುತ್ತದೆ ಮತ್ತು ನೀವು ಆಯ್ಕೆ ಮಾಡಿದ ಫಂಕ್ಷನ್ ಅನ್ನು ರನ್ ಮಾಡುತ್ತದೆ. ಹೊಸ ಫೀಚರ್ ಅನ್ನು ಸೇರಿಸುವುದು ಎಂದರೆ ನಿಮ್ಮ ಪಟ್ಟಿಗೆ ಕೇವಲ ಒಂದು ಸಾಲನ್ನು ಸೇರಿಸುವುದು ಎಂದರ್ಥ.
const COMMANDS = [
{ icon: "🌙", label: "Toggle dark mode", group: "Theme", run: toggleDark },
{ icon: "📄", label: "New file", group: "File", run: newFile },
];
- ಫಸ್ಸಿ ಸರ್ಚ್ (Fuzzy Search) ಉತ್ತಮ ಪ್ಯಾಲೆಟ್ಗಳು subsequence matching ಅನ್ನು ಬಳಸುತ್ತವೆ. ಅಂದರೆ ಅಕ್ಷರಗಳು ಕ್ರಮದಲ್ಲಿರಬೇಕು, ಆದರೆ ಅವು ಒಂದಕ್ಕೊಂದು ಪಕ್ಕದಲ್ಲೇ ಇರಬೇಕೆಂದಿಲ್ಲ. "tgldk" ಎಂದು ಟೈಪ್ ಮಾಡಿದರೆ "Toggle dark mode" ಸಿಗಬೇಕು.
function fuzzy(q, text) {
let i = 0;
for (const ch of text.toLowerCase()) {
if (ch === q[i]) i++;
}
return i === q.length;
}
ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್ (Keyboard Navigation) ಮೌಸ್ ಬಳಕೆಯನ್ನು ನಿಲ್ಲಿಸುವುದು ಇದರ ಗುರಿ. ಸೆಲೆಕ್ಷನ್ ಇಂಡೆಕ್ಸ್ ಬದಲಾಯಿಸಲು Arrow ಕೀಗಳನ್ನು ಬಳಸಿ. ಕಮಾಂಡ್ ರನ್ ಮಾಡಲು Enter ಬಳಸಿ. ಮೆನುವನ್ನು ಮುಚ್ಚಲು Escape ಬಳಸಿ.
ಇನ್ಸ್ಟಂಟ್ ಫೀಲ್ (The Instant Feel) ಪ್ಯಾಲೆಟ್ ತೆರೆದ ತಕ್ಷಣ ಇನ್ಪುಟ್ ಫೀಲ್ಡ್ ಅನ್ನು ಫೋಕಸ್ ಮಾಡಿ. ಇದು ನೀವು ಕ್ಲಿಕ್ ಮಾಡದೆಯೇ ಟೈಪ್ ಮಾಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
ಒಂದು ಕಮಾಂಡ್ ಪ್ಯಾಲೆಟ್ಗೆ ನಾಲ್ಕು ವಿಷಯಗಳು ಬೇಕು:
- ಗ್ಲೋಬಲ್ ಶಾರ್ಟ್ಕಟ್ (A global shortcut)
- ಕಮಾಂಡ್ ಡೇಟಾ (Command data)
- ಫಸ್ಸಿ ಫಿಲ್ಟರ್ (A fuzzy filter)
- ಆಟೋಫೋಕಸ್ (Autofocus)
ಆಧುನಿಕ ಪವರ್-ಯುಸರ್ ಟೂಲ್ಗಳು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಇದನ್ನು ಒಮ್ಮೆ ನಿರ್ಮಿಸಿ ನೋಡಿ.
Try it live: https://dev48v.infy.uk/design/day10-command-palette.html
Source: https://dev.to/dev48v/i-rebuilt-the-cmd-k-command-palette-in-60-lines-of-javascript-3a1l