ਮੈਂ 60 ਲਾਈਨਾਂ ਵਿੱਚ Cmd-K Command Palette ਨੂੰ ਦੁਬਾਰਾ ਬਣਾਇਆ

Linear, Raycast, ਅਤੇ VS Code ਵਰਗੀਆਂ ਐਪਸ ਇੱਕ command palette ਦੀ ਵਰਤੋਂ ਕਰਦੀਆਂ ਹਨ। ਤੁਸੀਂ ⌘K ਦਬਾਉਂਦੇ ਹੋ, ਕੁਝ ਅੱਖਰ ਟਾਈਪ ਕਰਦੇ ਹੋ, ਅਤੇ Enter ਦਬਾਉਂਦੇ ਹੋ। ਇਹ ਗੁੰਝਲਦਾਰ ਲੱਗਦਾ ਹੈ। ਪਰ ਅਸਲ ਵਿੱਚ ਇਹ ਸਿਰਫ਼ 60 ਲਾਈਨਾਂ ਦਾ JavaScript ਹੈ।

ਇਸਨੂੰ ਬਣਾਉਣ ਦਾ ਤਰੀਕਾ ਇੱਥੇ ਦਿੱਤਾ ਗਿਆ ਹੈ:

  1. The Keyboard Listener ਤੁਹਾਨੂੰ ਇੱਕ global listener ਦੀ ਲੋੜ ਹੈ। ਬ੍ਰਾਊਜ਼ਰ ਸਰਚ ਲਈ 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 ਦੀ ਵਰਤੋਂ ਕਰੋ। Command ਚਲਾਉਣ ਲਈ Enter ਦੀ ਵਰਤੋਂ ਕਰੋ। ਮੀਨੂ ਨੂੰ ਬੰਦ ਕਰਨ ਲਈ Escape ਦੀ ਵਰਤੋਂ ਕਰੋ।

  2. The Instant Feel ਜਿਵੇਂ ਹੀ palette ਖੁੱਲ੍ਹਦਾ ਹੈ, ਉਸੇ ਪਲ input field ਨੂੰ focus ਕਰੋ। ਇਹ ਤੁਹਾਨੂੰ ਕਲਿੱਕ ਕੀਤੇ ਬਿਨਾਂ ਟਾਈਪ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।

ਇੱਕ command palette ਲਈ ਚਾਰ ਚੀਜ਼ਾਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ:

ਆਧੁਨਿਕ power-user tools ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ, ਇਹ ਸਮਝਣ ਲਈ ਇਸਨੂੰ ਇੱਕ ਵਾਰ ਬਣਾ ਕੇ ਦੇਖੋ।

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