ಒಳಗಿನ ಕಾರ್ಯವಿಧಾನ: ಡ್ರ್ಯಾಗ್, ಟಚ್ ಮತ್ತು CSS ಕ್ಯಾಸ್ಕೇಡ್

ರಿಸೈಜಬಲ್ (resizable) UI ಪ್ಯಾನಲ್ ಅನ್ನು ನಿರ್ಮಿಸುವುದು ನೋಡಲು ಸುಲಭವೆನಿಸಿದರೂ, ವಾಸ್ತವದಲ್ಲಿ ಅದು ಕಷ್ಟಕರವಾಗಿದೆ. ನೀವು ಲೇಔಟ್‌ಗಳು (layouts), ಟಚ್ ಇವೆಂಟ್‌ಗಳು (touch events) ಮತ್ತು CSS ನಿಯಮಗಳನ್ನು ಏಕಕಾಲದಲ್ಲಿ ನಿರ್ವಹಿಸಬೇಕಾಗುತ್ತದೆ.

ನನ್ನ ಇತ್ತೀಚಿನ ವಿಜುವಲ್-ಡಿಫ್ (visual-diff) UI ಮರುವಿನ್ಯಾಸದಿಂದ ಕಲಿತ ಮೂರು ತಾಂತ್ರಿಕ ಪಾಠಗಳು ಇಲ್ಲಿವೆ.

  1. ಲೇಔಟ್‌ಗಳಿಗಾಗಿ window width ಬಳಸುವುದು ನಿಲ್ಲಿಸಿ

ನಿಮ್ಮ ಲೇಔಟ್ ವರ್ಟಿಕಲ್ (vertical) ಅಥವಾ ಹಾರಿಜಂಟಲ್ (horizontal) ಆಗಿದೆಯೇ ಎಂದು ನಿರ್ಧರಿಸಲು window.innerWidth ಅನ್ನು ಬಳಸಬೇಡಿ. ಬಳಕೆದಾರರು ವಿಂಡೋವನ್ನು ರಿಸೈಜ್ ಮಾಡಿದರೆ, ನಿಮ್ಮ ಲಾಜಿಕ್ ತಪ್ಪಾಗಬಹುದು.

ಬದಲಾಗಿ, ನೈಜ CSS ಸ್ಥಿತಿಯನ್ನು (state) ಬಳಸಿ. flex-direction ಅನ್ನು ಪರಿಶೀಲಿಸಲು getComputedStyle ಬಳಸಿ. ಇದು ಎಲ್ಲಾ ಮೀಡಿಯಾ ಕ್ವೇರಿಗಳು (media queries) ಅನ್ವಯಗೊಂಡ ನಂತರದ ನೈಜ ಮೌಲ್ಯವನ್ನು ಓದುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಡ್ರ್ಯಾಗ್ ಲಾಜಿಕ್ ಬಳಕೆದಾರರು ವಾಸ್ತವವಾಗಿ ನೋಡುವ ದೃಶ್ಯಕ್ಕೆ ಅನುಗುಣವಾಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

  1. ಟಚ್ ಮತ್ತು ಮೌಸ್ ಇವೆಂಟ್‌ಗಳನ್ನು ಒಟ್ಟಿಗೆ ನಿರ್ವಹಿಸಿ

ಡೆಸ್ಕ್‌ಟಾಪ್ ಮತ್ತು ಮೊಬೈಲ್ ಎರಡರಲ್ಲೂ ಡ್ರ್ಯಾಗಿಂಗ್ ಕೆಲಸ ಮಾಡಲು, ನಿಮಗೆ ಏಕೀಕೃತ ವಿಧಾನದ (unified approach) ಅಗತ್ಯವಿದೆ.

  • ಕೋಆರ್ಡಿನೇಟ್‌ಗಳನ್ನು (coordinates) ಹೊರತೆಗೆಯಲು optional chaining ಬಳಸಿ. ಇದು ಒಂದು ಫಂಕ್ಷನ್ ಮೂಲಕ ಮೌಸ್ ಮತ್ತು ಟಚ್ ಇವೆಂಟ್‌ಗಳೆರಡನ್ನೂ ನಿರ್ವಹಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
  • touchmove ಗಾಗಿ { passive: false } ಬಳಸಿ. ಸ್ಕ್ರೋಲಿಂಗ್ ಸುಲಭವಾಗಿಸಲು ಬ್ರೌಸರ್‌ಗಳು ಡಿಫಾಲ್ಟ್ ಆಗಿ ಟಚ್ ಇವೆಂಟ್‌ಗಳನ್ನು passive ಎಂದು ಇರಿಸುತ್ತವೆ. ನೀವು ಇದನ್ನು false ಎಂದು ಹೊಂದಿಸದಿದ್ದರೆ, e.preventDefault() ಅನ್ನು ಕರೆಯಲು ಸಾಧ್ಯವಾಗುವುದಿಲ್ಲ. ಆ ಕರೆಯಿಲ್ಲದೆ, ನೀವು ಡ್ರ್ಯಾಗ್ ಮಾಡಲು ಪ್ರಯತ್ನಿಸುವಾಗ ಪೇಜ್ ಸ್ಕ್ರೋಲ್ ಆಗುತ್ತದೆ.
  • move ಮತ್ತು end ಲಿಸನರ್‌ಗಳನ್ನು (listeners) ಡಾಕ್ಯುಮೆಂಟ್‌ಗೆ ಅಟ್ಯಾಚ್ ಮಾಡಿ. ಬಳಕೆದಾರರು ತಮ್ಮ ಬೆರಳನ್ನು ತುಂಬಾ ವೇಗವಾಗಿ ಚಲಾಯಿಸಿದರೆ, ಅವರು ಡಿವೈಡರ್‌ನಿಂದ ಹೊರಬರಬಹುದು. ಡಾಕ್ಯುಮೆಂಟ್‌ಗೆ ಅಟ್ಯಾಚ್ ಮಾಡುವುದರಿಂದ, ಪಾಯಿಂಟರ್ ಚಲಿತವಾದರೂ ಡ್ರ್ಯಾಗ್ ಮುಂದುವರಿಯುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
  1. ನಿಮ್ಮ ವಿಸಿಬಿಲಿಟಿ (visibility) ಸಿಸ್ಟಮ್ ಜೊತೆ ಹೋರಾಡುವುದನ್ನು ತಪ್ಪಿಸಿ

ನಾನು ಒಂದು CSS specificity ಬಗ್ ಅನ್ನು ಎದುರಿಸಿದೆ. ಪ್ಯಾನಲ್‌ಗಳನ್ನು ಮರೆಮಾಡಲು (hide) ಒಂದು ಕ್ಲಾಸ್ ಮತ್ತು ಲೇಔಟ್ ದಿಕ್ಕನ್ನು (direction) ಹೊಂದಿಸಲು ಇನ್ನೊಂದು ಕ್ಲಾಸ್ ಇತ್ತು.

ಸಮಸ್ಯೆ:

  • .view-panel { display: none; }
  • .diff-layout { display: flex; }

ಇವೆರಡೂ ಸಮಾನವಾದ specificity ಹೊಂದಿದ್ದರಿಂದ, ಫೈಲ್‌ನಲ್ಲಿ ಕೊನೆಯದಾಗಿ ಬಂದ ಕ್ಲಾಸ್ ಜಯಿಸಿತು. ಇದರರ್ಥ, ಪ್ಯಾನಲ್‌ಗಳು ಮರೆಯಾಗಬೇಕಿದ್ದರೂ ಸಹ ಅವು ಕಾಣಿಸುತ್ತಲೇ ಇದ್ದವು.

ಪರಿಹಾರ: ಲೇಔಟ್ ಹೆಲ್ಪರ್ ಕ್ಲಾಸ್ (layout helper class) ಎಂದಿಗೂ display ಪ್ರಾಪರ್ಟಿಯನ್ನು ಸೆಟ್ ಮಾಡದಂತೆ ನೋಡಿಕೊಳ್ಳಿ. ಅದನ್ನು ವಿಸಿಬಿಲಿಟಿ ಕ್ಲಾಸ್ ನಿರ್ವಹಿಸಲಿ.

ಬದಲಾಗಿ: .diff-layout { display: flex; flex-direction: column; }

ಬಳಸಿ: .view-panel.diff-layout { flex-direction: column; }

ಇದು specificity ಅನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ ಮತ್ತು ಲೇಔಟ್ ಕ್ಲಾಸ್ ಕೇವಲ ದಿಕ್ಕನ್ನು ಮಾತ್ರ ಬದಲಾಯಿಸುತ್ತದೆ, ವಿಸಿಬಿಲಿಟಿಯನ್ನು ಅಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

Source: https://dev.to/bonzai2carn/under-the-hood-drag-touch-and-css-cascade-in-a-real-diff-ui-1b66