60 வரிகளில் Cmd-K Command Palette-ஐ நான் மீண்டும் உருவாக்கினேன்

Linear, Raycast மற்றும் VS Code போன்ற செயலிகள் ஒரு command palette-ஐப் பயன்படுத்துகின்றன. நீங்கள் ⌘K அழுத்தி, சில எழுத்துக்களைத் தட்டச்சு செய்து, Enter அழுத்தினால் போதும். இது பார்ப்பதற்குச் சிக்கலானதாகத் தோன்றலாம். ஆனால் உண்மையில் இது வெறும் 60 வரிகள் கொண்ட JavaScript மட்டுமே.

அதை எப்படி உருவாக்குவது இதோ:

  1. விசைப்பலகை கேட்பவர் (The Keyboard Listener) உங்களுக்கு ஒரு global listener தேவை. உலாவிகள் (Browsers) தேடலுக்கு Ctrl+K-ஐப் பயன்படுத்துகின்றன. இதைத் தவிர்க்க நீங்கள் preventDefault-ஐப் பயன்படுத்த வேண்டும்.
document.addEventListener("keydown", e => {
  if ((e.metaKey || e.ctrlKey) && e.key === "k") {
    e.preventDefault();
    openPalette();
  }
});
  1. கட்டளைத் தரவு (Command Data) ஒவ்வொரு செயலையும் ஒரு object ஆகச் சேமிக்கவும். இதன் மூலம் UI எளிமையாக இருக்கும். இது இந்த objects-களைப் பட்டியலிட்டு, நீங்கள் தேர்ந்தெடுக்கும் function-ஐ இயக்கும். ஒரு புதிய வசதியைச் சேர்ப்பது என்பது உங்கள் பட்டியலில் ஒரு வரியைச் சேர்ப்பது மட்டுமே.
const COMMANDS = [
  { icon: "🌙", label: "Toggle dark mode", group: "Theme", run: toggleDark },
  { icon: "📄", label: "New file",         group: "File",  run: newFile },
];
  1. Fuzzy Search சிறந்த palettes '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;
}

  1. விசைப்பலகை வழிசெலுத்தல் (Keyboard Navigation) மவுஸைப் பயன்படுத்துவதைத் தவிர்ப்பதே இதன் நோக்கம். ஒரு selection index-ஐ மாற்ற Arrow keys-ஐப் பயன்படுத்தவும். கட்டளையை இயக்க Enter-ஐப் பயன்படுத்தவும். மெனுவை மூட Escape-ஐப் பயன்படுத்தவும்.

  2. உடனடி உணர்வு (The Instant Feel) palette திறந்தவுடன் input field-ஐ focus செய்யவும். இது நீங்கள் கிளிக் செய்யாமலேயே தட்டச்சு செய்ய அனுமதிக்கும்.

ஒரு command palette-க்கு நான்கு விஷயங்கள் தேவை:

நவீன power-user கருவிகள் எவ்வாறு செயல்படுகின்றன என்பதைப் புரிந்துகொள்ள இதை ஒருமுறை உருவாக்கிப் பாருங்கள்.

நேரலையில் முயற்சிக்க: 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