मी ७० ओळींच्या JavaScript मध्ये Notion चे Slash Menu पुन्हा तयार केले
Notion एखाद्या जादूसारखे वाटते. तुम्ही एक स्लॅश टाईप करता आणि एक मेनू समोर येतो. तुम्ही एक पर्याय निवडता आणि तुमचा मजकूर बदलतो.
मी ७० ओळींच्या vanilla JavaScript वापरून हे फीचर पुन्हा तयार केले आहे. ही जादू साध्या लॉजिकवर आधारित आहे.
माझ्या DesignFromZero मालिकेचा ९ वा दिवस प्रसिद्ध UI वर केंद्रित आहे. हे टूल्स समजून घेण्यासाठी मी ते शून्यापासून पुन्हा तयार करतो.
हे लॉजिक तीन भागांवर अवलंबून आहे:
- Data models: एक डॉक्युमेंट म्हणजे ब्लॉक्सची एक यादी असते. प्रत्येक ब्लॉकमध्ये डेटाचा एक भाग असतो. हा त्याचा प्रकार (type) असतो.
- The trigger: तुम्ही प्रत्येक वेळी टाईप करता तेव्हा, कोड मजकूर तपासतो. जर मजकूर स्लॅशने सुरू होत असेल, तर मेनू उघडतो.
- The filter: कमांड्स शोधण्यासाठी मेनू कीवर्ड्सचा वापर करतो. 'Heading 1' सारख्या कमांडसाठी 'h1' किंवा 'title' सारखे कीवर्ड्स असू शकतात. यामुळे शोध प्रक्रिया स्मार्ट वाटते.
नेव्हिगेशनसाठी कोडमध्ये एक सोपी युक्ती वापरली आहे. modulo operator वापरल्यामुळे तुम्ही arrow keys वापरून यादीमध्ये फिरू शकता. हे निवडीला खालून पुन्हा वरच्या बाजूला नेते.
जेव्हा तुम्ही Enter दाबता, तेव्हा कोड दोन कामे करतो:
- तो डेटा मधील ब्लॉकचा प्रकार अपडेट करतो. त्यानंतर CSS दृश्य बदल (visual change) हाताळते.
- तो स्लॅश आणि कमांडचा मजकूर काढून टाकतो.
गुंतागुंतीची फीचर्स अनेकदा साध्या पायावर आधारित असतात. स्लॅश मेनू म्हणजे केवळ डेटा, एक प्रीफिक्स चेक आणि प्रकार बदलणे (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