בניתי מחדש את תפריט ה-Slash של Notion ב-70 שורות של JavaScript
Notion מרגיש כמו קסם. מקלידים לוכסן (slash) ותפריט מופיע. בוחרים באפשרות אחת והטקסט משתנה.
בניתי מחדש את הפיצ'ר הזה באמצעות 70 שורות של vanilla JavaScript. הקסם הוא לוגיקה פשוטה.
היום התשיעי בסדרת DesignFromZero שלי מתמקד בממשקי משתמש (UI) מפורסמים. אני בונה מחדש את הכלים האלו מאפס כדי להבין אותם.
הלוגיקה נשענת על שלושה חלקים:
- מודלים של נתונים (Data models): מסמך הוא רשימה של בלוקים. כל בלוק מחזיק פיסת מידע אחת. זהו הסוג (type) שלו.
- הטריגר (The trigger): בכל פעם שמקלידים, הקוד בודק את הטקסט. אם הטקסט מתחיל בלוכסן, התפריט נפתח.
- המסנן (The filter): התפריט משתמש במילות מפתח כדי למצוא פקודות. לפקודה כמו Heading 1 יכולים להיות מילות מפתח כמו h1 או title. זה מה שגורם לחיפוש להרגיש חכם.
הקוד משתמש בטריק פשוט לניווט. שימוש באופרטור modulo מאפשר להשתמש במקשי החיצים כדי לנוע ברשימה. זה גורם לבחירה "להתגלגל" מתחתית הרשימה חזרה לראשיתה.
כשלוחצים על Enter, הקוד מבצע שתי משימות:
- הוא מעדכן את סוג הבלוק בנתונים. לאחר מכן, CSS מטפל בשינוי הוויזואלי.
- הוא מנקה את הלוכסן ואת טקסט הפקודה.
פיצ'רים מורכבים מבוססים לעיתים קרובות על יסודות פשוטים. תפריט slash הוא בסך הכל נתונים בתוספת בדיקת קידומת (prefix) והחלפת סוג (type swap).
נסו את הדמו החי כאן: https://dev48v.infy.uk/design/day9-notion-slash.html
קראו את הניתוח המלא כאן: https://dev.to/dev48v/i-rebuilt-notions-slash-menu-in-70-lines-of-javascript-2n9i