મેં 70 લાઇન્સના JavaScript માં Notion નું Slash Menu ફરીથી બનાવ્યું
Notion જાદુ જેવું લાગે છે. તમે એક સ્લેશ (/) ટાઈપ કરો છો અને એક મેનૂ દેખાય છે. તમે એક વિકલ્પ પસંદ કરો છો અને તમારું લખાણ બદલાઈ જાય છે.
મેં vanilla JavaScript ની 70 લાઇન્સનો ઉપયોગ કરીને આ ફીચર ફરીથી બનાવ્યું છે. આ જાદુ પાછળનું કારણ સાદું લોજિક છે.
મારી DesignFromZero સિરીઝનો 9મો દિવસ પ્રખ્યાત UI પર કેન્દ્રિત છે. હું આ સાધનોને સમજવા માટે તેમને શૂન્યથી (from scratch) ફરીથી બનાવું છું.
આ લોજિક ત્રણ ભાગો પર આધારિત છે:
- Data models: એક ડોક્યુમેન્ટ એ બ્લોક્સની યાદી છે. દરેક બ્લોક ડેટાનો એક ભાગ ધરાવે છે. આ તેનો પ્રકાર (type) છે.
- The trigger: જ્યારે પણ તમે ટાઈપ કરો છો, ત્યારે કોડ લખાણ તપાસે છે. જો લખાણ સ્લેશ (/) થી શરૂ થતું હોય, તો મેનૂ ખુલે છે.
- The filter: મેનૂ કમાન્ડ્સ શોધવા માટે કીવર્ડ્સનો ઉપયોગ કરે છે. Heading 1 જેવા કમાન્ડમાં h1 અથવા title જેવા કીવર્ડ્સ હોઈ શકે છે. આનાથી સર્ચ સ્માર્ટ લાગે છે.
કોડ નેવિગેશન માટે એક સરળ ટ્રિકનો ઉપયોગ કરે છે. modulo operator નો ઉપયોગ કરવાથી તમે એરો કી (arrow keys) દ્વારા યાદીમાં આગળ-પાછળ જઈ શકો છો. તે પસંદગીને નીચેથી ફરીથી ઉપર લઈ જાય છે.
જ્યારે તમે Enter દબાવો છો, ત્યારે કોડ બે કાર્યો કરે છે:
- તે ડેટામાં બ્લોકનો પ્રકાર અપડેટ કરે છે. ત્યારબાદ CSS વિઝ્યુઅલ ફેરફાર સંભાળે છે.
- તે સ્લેશ અને કમાન્ડ ટેક્સ્ટને સાફ કરે છે.
જટિલ ફીચર્સના પાયા ઘણીવાર સાદા હોય છે. સ્લેશ મેનૂ એ માત્ર ડેટા પ્લસ prefix check અને 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