𝗢𝗱𝘁𝘄𝗼𝗿𝘇𝘆ł𝗲𝗺 𝗺𝗲𝗻𝘂 „/” (𝘀𝗹𝗮𝘀𝗵 𝗺𝗲𝗻𝘂) 𝗶𝗻 𝗡𝗼𝘁𝗶𝗼𝗻 𝘄 𝟳𝟬 𝗹𝗶𝗻𝗶𝗮𝗰𝗵 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁𝘂
Notion wydaje się magiczny. Wpisujesz ukośnik, a pojawia się menu. Wybierasz opcję, a Twój tekst ulega transformacji.
Odtworzyłem tę funkcję, używając 70 linii czystego JavaScriptu (vanilla JavaScript). Magia tkwi w prostej logice.
Dzień 9 mojej serii DesignFromZero skupia się na słynnych interfejsach użytkownika (UI). Odtwarzam te narzędzia od zera, aby je zrozumieć.
Logika opiera się na trzech elementach:
- Modele danych: Dokument to lista bloków. Każdy blok przechowuje jedną porcję danych. To jest jego typ.
- Wyzwalacz (trigger): Za każdym razem, gdy coś wpisujesz, kod sprawdza tekst. Jeśli tekst zaczyna się od ukośnika, menu się otwiera.
- Filtr: Menu używa słów kluczowych do znajdowania poleceń. Polecenie takie jak Heading 1 może mieć słowa kluczowe, np. h1 lub title. Dzięki temu wyszukiwanie wydaje się inteligentne.
Kod wykorzystuje prosty trik do nawigacji. Użycie operatora modulo pozwala na poruszanie się po liście za pomocą strzałek. Powoduje to „zawijanie” wyboru z dołu z powrotem na górę.
Po naciśnięciu Enter kod wykonuje dwa zadania:
- Aktualizuje typ bloku w danych. Następnie CSS zajmuje się zmianą wizualną.
- Czyści ukośnik i tekst polecenia.
Złożone funkcje często mają proste fundamenty. Menu "/" to po prostu dane plus sprawdzenie prefiksu i zamiana typu.
Wypróbuj demo na żywo tutaj: https://dev48v.infy.uk/design/day9-notion-slash.html
Przeczytaj pełną analizę tutaj: https://dev.to/dev48v/i-rebuilt-notions-slash-menu-in-70-lines-of-javascript-2n9i