தொழில்நுட்பத் பின்னணி: Drag, Touch, மற்றும் CSS Cascade

அளவிடக்கூடிய (resizable) ஒரு UI பேனலை உருவாக்குவது பார்ப்பதற்கு எளிதாகத் தோன்றினாலும், உண்மையில் அது கடினமானது. நீங்கள் லேஅவுட்கள் (layouts), டச் நிகழ்வுகள் (touch events) மற்றும் CSS விதிகள் ஆகிய அனைத்தையும் ஒரே நேரத்தில் கையாள வேண்டும்.

எனது சமீபத்திய visual-diff UI மறுவடிவமைப்பிலிருந்து (redesign) கற்றுக்கொண்ட மூன்று தொழில்நுட்பப் பாடங்கள் இதோ.

  1. லேஅவுட்களுக்கு window width பயன்படுத்துவதை நிறுத்துங்கள்

உங்கள் லேஅவுட் செங்குத்தாக (vertical) உள்ளதா அல்லது கிடைமட்டமாக (horizontal) உள்ளதா என்பதைத் தீர்மானிக்க window.innerWidth-ஐப் பயன்படுத்தாதீர்கள். பயனர் விண்டோவை மாற்றியமைத்தால் (resize), உங்கள் லாஜிக் (logic) செயலிழந்துவிடும்.

அதற்குப் பதிலாக, உண்மையான CSS நிலையைப் (state) பயன்படுத்துங்கள். flex-direction-ஐச் சரிபார்க்க getComputedStyle-ஐப் பயன்படுத்துங்கள். இது அனைத்து media queries-களும் செயல்படுத்தப்பட்ட பிறகு உண்மையான மதிப்பை வாசிக்கும். இது உங்கள் drag லாஜிக் பயனர் பார்ப்பதோடு ஒத்துப்போவதை உறுதி செய்கிறது.

  1. touch மற்றும் mouse நிகழ்வுகளைச் சேர்த்து கையாளுங்கள்

டெஸ்க்டாப் மற்றும் மொபைல் ஆகிய இரண்டிலும் dragging சரியாகச் செயல்பட, உங்களுக்கு ஒரு ஒருங்கிணைந்த அணுகுமுறை (unified approach) தேவை.

  • ஆயத்தொலைவுகளை (coordinates) எடுக்க optional chaining-ஐப் பயன்படுத்துங்கள். இது ஒரே ஒரு function மூலம் mouse மற்றும் touch நிகழ்வுகள் இரண்டையும் கையாள அனுமதிக்கிறது.
  • touchmove-க்கு { passive: false } என்பதைப் பயன்படுத்துங்கள். ஸ்க்ரோலிங்கிற்கு (scrolling) உதவும் வகையில் பிரவுசர்கள் touch நிகழ்வுகளைத் தானாகவே passive என்று அமைத்துவிடுகின்றன. நீங்கள் இதை false என்று அமைக்கவில்லை என்றால், e.preventDefault()-ஐ அழைக்க முடியாது. அந்த அழைப்பு இல்லையென்றால், நீங்கள் drag செய்ய முயற்சிக்கும்போது பக்கம் ஸ்க்ரோல் ஆகிக்கொண்டே இருக்கும்.
  • move மற்றும் end listeners-களை document-உடன் இணைக்கவும். பயனர் தனது விரலை மிக வேகமாக நகர்த்தினால், அவர் divider-ஐ விட்டு வெளியேறக்கூடும். document-உடன் இணைப்பதன் மூலம், pointer நகர்ந்தாலும் drag தொடர்ந்து நடப்பதை உறுதி செய்யலாம்.
  1. உங்கள் visibility சிஸ்டத்துடன் போராடுவதைத் தவிர்க்கவும்

நான் ஒரு CSS specificity பிழையைச் சந்தித்தேன். பேனல்களை மறைக்க ஒரு class-உம், லேஅவுட் திசையை அமைக்க மற்றொரு class-உம் என்னிடம் இருந்தது.

பிரச்சனை:

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

இவை இரண்டிற்கும் சமமான specificity இருந்ததால், கோப்பில் கடைசியாக இருந்த class வெற்றி பெற்றது. இதன் விளைவாக, பேனல்கள் மறைந்திருக்க வேண்டிய நிலையிலும் அவை தெரிந்து கொண்டே இருந்தன.

தீர்வு: ஒரு layout helper class-ஐ display பண்பை (property) அமைக்க அனுமதிக்காதீர்கள். அதை visibility class-க்கே விட்டுவிடுங்கள்.

இதற்குப் பதிலாக: .diff-layout { display: flex; flex-direction: column; }

இதைப் பயன்படுத்துங்கள்: .view-panel.diff-layout { flex-direction: column; }

இது specificity-ஐ அதிகரிப்பதோடு, layout class திசையை மட்டுமே மாற்றுகிறதா, visibility-யை மாற்றவில்லை என்பதை உறுதி செய்கிறது.

ஆதாரம்: https://dev.to/bonzai2carn/under-the-hood-drag-touch-and-css-cascade-in-a-real-diff-ui-1b66