ನಾನು 70 ಸಾಲುಗಳ JavaScript ಬಳಸಿ Notion ನ Slash Menu ಅನ್ನು ಮರುನಿರ್ಮಿಸಿದೆ
Notion ಒಂದು ಮಾಯೆಯಂತೆ ಭಾಸವಾಗುತ್ತದೆ. ನೀವು ಒಂದು slash ಟೈಪ್ ಮಾಡಿದ ತಕ್ಷಣ ಒಂದು ಮೆನು ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ. ನೀವು ಒಂದು ಆಯ್ಕೆಯನ್ನು ಆರಿಸಿದಾಗ ನಿಮ್ಮ ಪಠ್ಯವು ಬದಲಾಗುತ್ತದೆ.
ನಾನು ಈ ಫೀಚರ್ ಅನ್ನು ಕೇವಲ 70 ಸಾಲುಗಳ vanilla JavaScript ಬಳಸಿ ಮರುನಿರ್ಮಿಸಿದ್ದೇನೆ. ಇದರ ಹಿಂದಿರುವ ಮಾಯೆಯೆಂದರೆ ಸರಳವಾದ ತರ್ಕ (logic).
ನನ್ನ DesignFromZero ಸರಣಿಯ 9ನೇ ದಿನವು ಪ್ರಸಿದ್ಧ UI ಗಳ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ. ಅವುಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ನಾನು ಈ ಪರಿಕರಗಳನ್ನು ಮೊದಲಿನಿಂದಲೇ ಮರುನಿರ್ಮಿಸುತ್ತೇನೆ.
ಇದರ ತರ್ಕವು ಮೂರು ಭಾಗಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದೆ:
- Data models: ಒಂದು ಡಾಕ್ಯುಮೆಂಟ್ ಎಂಬುದು ಬ್ಲಾಕ್ಗಳ ಪಟ್ಟಿಯಾಗಿದೆ. ಪ್ರತಿ ಬ್ಲಾಕ್ ಒಂದು ಡೇಟಾವನ್ನು ಹೊಂದಿರುತ್ತದೆ. ಇದು ಅದರ ವಿಧ (type).
- The trigger: ನೀವು ಪ್ರತಿ ಬಾರಿ ಟೈಪ್ ಮಾಡುವಾಗಲೂ, ಕೋಡ್ ಪಠ್ಯವನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ. ಪಠ್ಯವು slash ನಿಂದ ಪ್ರಾರಂಭವಾದರೆ, ಮೆನು ತೆರೆಯುತ್ತದೆ.
- The filter: ಮೆನಿಯು ಕಮಾಂಡ್ಗಳನ್ನು ಹುಡುಕಲು ಕೀವರ್ಡ್ಗಳನ್ನು ಬಳಸುತ್ತದೆ. Heading 1 ನಂತಹ ಕಮಾಂಡ್ಗೆ h1 ಅಥವಾ title ನಂತಹ ಕೀವರ್ಡ್ಗಳಿರಬಹುದು. ಇದು ಹುಡುಕಾಟವನ್ನು ಸ್ಮಾರ್ಟ್ ಆಗಿ ಮಾಡುತ್ತದೆ.
ನ್ಯಾವಿಗೇಷನ್ಗಾಗಿ ಕೋಡ್ ಒಂದು ಸರಳ ತಂತ್ರವನ್ನು ಬಳಸುತ್ತದೆ. modulo operator ಬಳಸುವುದರಿಂದ ನೀವು arrow keys ಬಳಸಿ ಪಟ್ಟಿಯಲ್ಲಿ ಚಲಿಸಬಹುದು. ಇದು ಆಯ್ಕೆಯನ್ನು ಕೆಳಗಿನಿಂದ ಮತ್ತೆ ಮೇಲಕ್ಕೆ ಕೊಂಡೊಯ್ಯುತ್ತದೆ (wraps).
ನೀವು Enter ಒತ್ತಿದಾಗ, ಕೋಡ್ ಎರಡು ಕೆಲಸಗಳನ್ನು ಮಾಡುತ್ತದೆ:
- ಇದು ಡೇಟಾದಲ್ಲಿ ಬ್ಲಾಕ್ ವಿಧವನ್ನು (type) ಅಪ್ಡೇಟ್ ಮಾಡುತ್ತದೆ. ನಂತರ CSS ದೃಶ್ಯ ಬದಲಾವಣೆಯನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ.
- ಇದು slash ಮತ್ತು ಕಮಾಂಡ್ ಪಠ್ಯವನ್ನು ಅಳಿಸಿಹಾಕುತ್ತದೆ.
ಸಂಕೀರ್ಣವಾದ ಫೀಚರ್ಗಳು ಹೆಚ್ಚಾಗಿ ಸರಳವಾದ ಅಡಿಪಾಯವನ್ನು ಹೊಂದಿರುತ್ತವೆ. ಒಂದು slash menu ಎಂಬುದು ಕೇವಲ ಡೇಟಾ ಜೊತೆಗೆ ಒಂದು prefix ಚೆಕ್ ಮತ್ತು 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