70 வரிகளில் JavaScript மூலம் Notion-ன் Slash Menu-வை நான் மீண்டும் உருவாக்கினேன்
Notion ஒரு மாயாஜாலம் போலத் தோன்றுகிறது. நீங்கள் ஒரு slash-ஐத் தட்டச்சு செய்தவுடன் ஒரு மெனு தோன்றும். நீங்கள் ஒரு விருப்பத்தைத் தேர்ந்தெடுத்தால், உங்கள் உரை மாறுகிறது.
இந்த அம்சத்தை வெறும் 70 வரிகள் vanilla JavaScript கொண்டு நான் மீண்டும் உருவாக்கினேன். இந்த மாயாஜாலத்திற்குப் பின்னால் இருப்பது எளிமையான தர்க்கம் (logic) மட்டுமே.
எனது DesignFromZero தொடரின் 9-வது நாள், பிரபலமான UI-களைப் பற்றியது. அவற்றைப் புரிந்து கொள்ளும் பொருட்டு, இந்தத் கருவிகளை நான் ஆரம்பத்திலிருந்து மீண்டும் உருவாக்குகிறேன்.
இதன் தர்க்கம் மூன்று பகுதிகளைச் சார்ந்துள்ளது:
- Data models: ஒரு ஆவணம் (document) என்பது பிளாக்குகளின் (blocks) பட்டியல் ஆகும். ஒவ்வொரு பிளாக்கும் ஒரு தரவை (data) கொண்டிருக்கும். இதுவே அதன் வகை (type).
- The trigger: நீங்கள் தட்டச்சு செய்யும் ஒவ்வொரு முறையும், குறியீடு (code) உரையைச் சரிபார்க்கிறது. உரை ஒரு slash-இல் தொடங்கினால், மெனு திறக்கும்.
- The filter: கட்டளைகளைக் (commands) கண்டறிய மெனு முக்கியச் சொற்களைப் (keywords) பயன்படுத்துகிறது. Heading 1 போன்ற ஒரு கட்டளைக்கு h1 அல்லது title போன்ற முக்கியச் சொற்கள் இருக்கலாம். இது தேடலைத் புத்திசாலித்தனமாக உணரச் செய்கிறது.
வழிசெலுத்தலுக்கு (navigation) குறியீடு ஒரு எளிய தந்திரத்தைப் பயன்படுத்துகிறது. modulo operator-ஐப் பயன்படுத்துவதன் மூலம், அம்பு விசைகளைப் (arrow keys) பயன்படுத்திப் பட்டியலினுள் நகர முடியும். இது பட்டியலின் கீழிருந்து மீண்டும் மேலெழும்பும் வகையில் தேர்வைச் சுழற்சி முறையில் மாற்றுகிறது.
நீங்கள் Enter அழுத்தும்போது, குறியீடு இரண்டு பணிகளைச் செய்கிறது:
- இது தரவில் உள்ள பிளாக் வகையை (block type) புதுப்பிக்கிறது. பின்னர் CSS அதன் காட்சி மாற்றத்தைக் கையாளுகிறது.
- இது slash மற்றும் கட்டளை உரையை நீக்குகிறது.
சிக்கலான அம்சங்கள் பெரும்பாலும் எளிமையான அடித்தளத்தைக் கொண்டவை. ஒரு slash menu என்பது தரவு, ஒரு 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