मैंने 70 लाइनों के JavaScript में Notion का Slash Menu फिर से बनाया
Notion जादू जैसा लगता है। आप एक स्लैश टाइप करते हैं और एक मेनू दिखाई देता है। आप एक विकल्प चुनते हैं और आपका टेक्स्ट बदल जाता है।
मैंने vanilla JavaScript की केवल 70 लाइनों का उपयोग करके इस फीचर को फिर से बनाया है। इसका जादू इसके सरल लॉजिक में है।
मेरी DesignFromZero सीरीज़ का नौवां दिन प्रसिद्ध UI पर केंद्रित है। मैं उन्हें समझने के लिए इन टूल्स को शुरुआत से फिर से बनाता हूँ।
इसका लॉजिक तीन हिस्सों पर आधारित है:
- Data models: एक डॉक्यूमेंट ब्लॉक्स (blocks) की एक लिस्ट होती है। प्रत्येक ब्लॉक डेटा का एक हिस्सा रखता है। यही उसका टाइप (type) है।
- The trigger: हर बार जब आप टाइप करते हैं, तो कोड टेक्स्ट की जांच करता है। यदि टेक्स्ट स्लैश से शुरू होता है, तो मेनू खुल जाता है।
- The filter: मेनू कमांड्स खोजने के लिए कीवर्ड्स (keywords) का उपयोग करता है। Heading 1 जैसे कमांड के लिए h1 या title जैसे कीवर्ड्स हो सकते हैं। इससे सर्च स्मार्ट महसूस होती है।
कोड नेविगेशन के लिए एक सरल ट्रिक का उपयोग करता है। modulo operator का उपयोग करने से आप लिस्ट में आगे-पीछे जाने के लिए एरो कीज़ (arrow keys) का उपयोग कर सकते हैं। यह सिलेक्शन को नीचे से वापस ऊपर की ओर ले जाता है।
जब आप Enter दबाते हैं, तो कोड दो काम करता है:
- यह डेटा में ब्लॉक टाइप को अपडेट करता है। इसके बाद CSS विजुअल बदलाव को संभालता है।
- यह स्लैश और कमांड टेक्स्ट को हटा देता है।
जटिल फीचर्स की नींव अक्सर सरल होती है। एक स्लैश मेनू सिर्फ डेटा, एक प्रीफ़िक्स चेक और एक टाइप स्वैप (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