𝗜 𝗥𝗲𝗯𝘂𝗶𝗹𝘁 𝗡𝗼𝘁𝗶𝗼𝗻'𝘀 𝗦𝗹𝗮𝘀𝗵 𝗠𝗲𝗻𝘂 𝗶𝗻 𝟳𝟬 𝗟𝗶𝗻𝗲𝘀 𝗼𝗳 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁
Notion جادو جیسا محسوس ہوتا ہے۔ آپ ایک سلیش (/) ٹائپ کرتے ہیں اور ایک مینو ظاہر ہو جاتا ہے۔ آپ ایک آپشن منتخب کرتے ہیں اور آپ کا ٹیکسٹ تبدیل ہو جاتا ہے۔
میں نے vanilla JavaScript کی صرف 70 لائنوں کا استعمال کرتے ہوئے اس فیچر کو دوبارہ بنایا ہے۔ یہ جادو دراصل سادہ منطق (logic) پر مبنی ہے۔
میری DesignFromZero سیریز کا نواں دن مشہور UI پر مرکوز ہے۔ میں ان ٹولز کو سمجھنے کے لیے انہیں بالکل شروع سے دوبارہ بناتا ہوں۔
اس کی منطق تین حصوں پر مشتمل ہے:
- ڈیٹا ماڈلز (Data models): ایک دستاویز بلاکس کی ایک فہرست ہوتی ہے۔ ہر بلاک ڈیٹا کا ایک حصہ رکھتا ہے۔ یہ اس کی قسم (type) ہوتی ہے۔
- ٹریگر (The trigger): جب بھی آپ ٹائپ کرتے ہیں، کوڈ ٹیکسٹ کو چیک کرتا ہے۔ اگر ٹیکسٹ سلیش سے شروع ہو، تو مینو کھل جاتا ہے۔
- فلٹر (The filter): مینو کمانڈز تلاش کرنے کے لیے کی ورڈز (keywords) کا استعمال کرتا ہے۔ Heading 1 جیسی کمانڈ کے لیے h1 یا title جیسے کی ورڈز ہو سکتے ہیں۔ یہ سرچ کو ذہین بناتا ہے۔
کوڈ نیویگیشن کے لیے ایک سادہ چال استعمال کرتا ہے۔ modulo operator کا استعمال آپ کو لسٹ میں حرکت کرنے کے لیے ایرو کیز (arrow keys) استعمال کرنے کی اجازت دیتا ہے۔ یہ سلیکشن کو نیچے سے واپس اوپر لے آتا ہے۔
جب آپ Enter دباتے ہیں، تو کوڈ دو کام انجام دیتا ہے:
- یہ ڈیٹا میں بلاک کی قسم (type) کو اپ ڈیٹ کرتا ہے۔ اس کے بعد CSS بصری تبدیلی (visual change) کو سنبھالتی ہے۔
- یہ سلیش اور کمانڈ ٹیکسٹ کو صاف کر دیتا ہے۔
پیچیدہ فیچرز کی بنیاد اکثر سادہ ہوتی ہے۔ ایک سلیش مینو محض ڈیٹا، ایک پری فکس چیک (prefix check) اور ٹائپ کی تبدیلی کا مجموعہ ہے۔
لائیو ڈیمو یہاں آزمائیں: https://dev48v.infy.uk/design/day9-notion-slash.html
مکمل تفصیل یہاں پڑھیں: https://dev.to/dev48v/i-rebuilt-notions-slash-menu-in-70-lines-of-javascript-2n9i