𝗜 𝗥𝗲𝗯𝘂𝗶𝗹𝘁 𝘁𝗵𝗲 𝗖𝗺𝗱-𝗞 𝗖𝗼𝗺𝗺𝗮𝗻𝗱 𝗣𝗮𝗹𝗲𝘁𝘁𝗲 𝗶𝗻 𝟲𝟬 𝗟𝗶𝗻𝗲𝘀

Linear, Raycast અને VS Code જેવી એપ્સ કમાન્ડ પેલેટનો ઉપયોગ કરે છે. તમે ⌘K દબાવો છો, થોડા અક્ષરો ટાઇપ કરો છો અને Enter દબાવો છો. તે જટિલ લાગે છે. પરંતુ વાસ્તવમાં તે માત્ર 60 લાઇનની JavaScript છે.

તેને કેવી રીતે બનાવવું તે અહીં છે:

  1. કીબોર્ડ લિસનર (The Keyboard Listener) તમારે એક ગ્લોબલ લિસનરની જરૂર પડશે. બ્રાઉઝર્સ સર્ચ માટે Ctrl+K નો ઉપયોગ કરે છે. આને રોકવા માટે તમારે preventDefault નો ઉપયોગ કરવો પડશે.
document.addEventListener("keydown", e => {
  if ((e.metaKey || e.ctrlKey) && e.key === "k") {
    e.preventDefault();
    openPalette();
  }
});
  1. કમાન્ડ ડેટા (Command Data) દરેક એક્શનને એક ઓબ્જેક્ટ તરીકે સ્ટોર કરો. UI સરળ રહેશે. તે આ ઓબ્જેક્ટ્સની યાદી બતાવશે અને તમે પસંદ કરેલું ફંક્શન ચલાવશે. નવું ફીચર ઉમેરવાનો અર્થ તમારી યાદીમાં એક લાઇન ઉમેરવી એ છે.
const COMMANDS = [
  { icon: "🌙", label: "Toggle dark mode", group: "Theme", run: toggleDark },
  { icon: "📄", label: "New file",         group: "File",  run: newFile },
];
  1. ફઝી સર્ચ (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;
}

  1. કીબોર્ડ નેવિગેશન (Keyboard Navigation) મુખ્ય ધ્યેય માઉસનો ઉપયોગ કરવાનું બંધ કરવાનો છે. સિલેક્શન ઇન્ડેક્સ બદલવા માટે એરો (Arrow) કીનો ઉપયોગ કરો. કમાન્ડ ચલાવવા માટે Enter નો ઉપયોગ કરો. મેનૂ બંધ કરવા માટે Escape નો ઉપયોગ કરો.

  2. ઇન્સ્ટન્ટ ફીલ (The Instant Feel) પેલેટ ખુલતાની સાથે જ ઇનપુટ ફિલ્ડ પર ફોકસ કરો. આનાથી તમે ક્લિક કર્યા વગર ટાઇપ કરી શકશો.

કમાન્ડ પેલેટ માટે ચાર વસ્તુઓની જરૂર છે:

આધુનિક પાવર-યુઝર ટૂલ્સ કેવી રીતે કામ કરે છે તે સમજવા માટે આ એકવાર બનાવી જુઓ.

લાઈવ ટ્રાય કરો: https://dev48v.infy.uk/design/day10-command-palette.html

સ્ત્રોત: https://dev.to/dev48v/i-rebuilt-the-cmd-k-command-palette-in-60-lines-of-javascript-3a1l