నేను 70 లైన్ల JavaScriptతో Notion యొక్క Slash Menuని మళ్ళీ నిర్మించాను
Notion ఒక మ్యాజిక్ లాగా అనిపిస్తుంది. మీరు ఒక స్లాష్ టైప్ చేయగానే ఒక మెనూ కనిపిస్తుంది. మీరు ఒక ఆప్షన్ను ఎంచుకోగానే మీ టెక్స్ట్ మారుతుంది.
నేను ఈ ఫీచర్ను 70 లైన్ల vanilla JavaScript ఉపయోగించి మళ్ళీ నిర్మించాను. ఆ మ్యాజిక్ వెనుక ఉన్నది సరళమైన లాజిక్ మాత్రమే.
నా DesignFromZero సిరీస్లోని 9వ రోజు ప్రసిద్ధ UIల గురించి వివరిస్తుంది. వాటిని అర్థం చేసుకోవడానికి నేను ఈ టూల్స్ను మొదటి నుండి మళ్ళీ నిర్మిస్తాను.
ఈ లాజిక్ మూడు భాగాలపై ఆధారపడి ఉంటుంది:
- Data models: ఒక డాక్యుమెంట్ అనేది బ్లాక్ల జాబితా. ప్రతి బ్లాక్ ఒక డేటా భాగాన్ని కలిగి ఉంటుంది. ఇదే దాని టైప్.
- The trigger: మీరు ప్రతిసారి టైప్ చేసినప్పుడు, కోడ్ ఆ టెక్స్ట్ను తనిఖీ చేస్తుంది. ఒకవేళ టెక్స్ట్ స్లాష్తో మొదలైతే, మెనూ ఓపెన్ అవుతుంది.
- The filter: కమాండ్లను కనుగొనడానికి మెనూ కీవర్డ్లను ఉపయోగిస్తుంది. Heading 1 వంటి కమాండ్కు h1 లేదా title వంటి కీవర్డ్లు ఉండవచ్చు. ఇది సెర్చ్ను స్మార్ట్గా మారుస్తుంది.
నావిగేషన్ కోసం కోడ్ ఒక చిన్న ట్రిక్ను ఉపయోగిస్తుంది. modulo operator ఉపయోగించడం వల్ల మీరు బాణం కీలను (arrow keys) ఉపయోగించి జాబితాలో కదలవచ్చు. ఇది ఎంపికను (selection) కింద నుండి మళ్ళీ పైకి తీసుకువస్తుంది.
మీరు Enter నొక్కినప్పుడు, కోడ్ రెండు పనులను చేస్తుంది:
- ఇది డేటాలోని బ్లాక్ టైప్ను అప్డేట్ చేస్తుంది. ఆ తర్వాత CSS విజువల్ మార్పును చూసుకుంటుంది.
- ఇది స్లాష్ మరియు కమాండ్ టెక్స్ట్ను క్లియర్ చేస్తుంది.
సంక్లిష్టమైన ఫీచర్లకు తరచుగా సరళమైన పునాదులు ఉంటాయి. ఒక Slash Menu అనేది కేవలం డేటా, ఒక ప్రిఫిక్స్ చెక్ (prefix check) మరియు టైప్ స్వ్యాప్ (type swap) మాత్రమే.
Try the live demo here: https://dev48v.infy.uk/design/day9-notion-slash.html
Read the full breakdown here: https://dev.to/dev48v/i-rebuilt-notions-slash-menu-in-70-lines-of-javascript-2n9i