من منوی اسلش Notion را در ۷۰ خط جاوااسکریپت بازسازی کردم
Notion حس جادو دارد. یک اسلش تایپ میکنید و منویی ظاهر میشود. گزینهای را انتخاب میکنید و متن شما تغییر میکند.
من این قابلیت را با استفاده از ۷۰ خط vanilla JavaScript بازسازی کردم. جادو در واقع منطق سادهای است.
روز نهم از سری DesignFromZero من بر روی UIهای مشهور تمرکز دارد. من این ابزارها را از صفر بازسازی میکنم تا آنها را درک کنم.
این منطق بر سه بخش استوار است:
- مدلهای داده: یک سند، لیستی از بلوکها است. هر بلوک شامل یک قطعه داده است که همان نوع (type) آن است.
- محرک (Trigger): هر بار که تایپ میکنید، کد متن را بررسی میکند. اگر متن با یک اسلش شروع شود، منو باز میشود.
- فیلتر: منو از کلمات کلیدی برای یافتن دستورات استفاده میکند. دستوری مانند Heading 1 ممکن است کلمات کلیدی مثل h1 یا title داشته باشد. این باعث میشود جستجو هوشمند به نظر برسد.
کد برای پیمایش از یک ترفند ساده استفاده میکند. استفاده از عملگر modulo به شما اجازه میدهد با کلیدهای جهتنما در لیست حرکت کنید. این عملگر باعث میشود انتخاب از انتهای لیست دوباره به ابتدای آن برگردد.
وقتی Enter را فشار میدهید، کد دو وظیفه را انجام میدهد:
- نوع بلوک را در دادهها بهروزرسانی میکند. سپس CSS تغییرات ظاهری را مدیریت میکند.
- اسلش و متن دستور را پاک میکند.
ویژگیهای پیچیده اغلب زیربناهای سادهای دارند. یک منوی اسلش صرفاً شامل دادهها، یک بررسی پیشوند و یک تغییر نوع است.
دموی زنده را اینجا امتحان کنید: https://dev48v.infy.uk/design/day9-notion-slash.html
تحلیل کامل را اینجا بخوانید: https://dev.to/dev48v/i-rebuilt-notions-slash-menu-in-70-lines-of-javascript-2n9i