അടിത്തട്ടിൽ: ഡ്രാഗ്, ടച്ച്, കൂടാതെ CSS കാസ്കേഡ്

റീസൈസബിൾ ആയ ഒരു UI പാനൽ നിർമ്മിക്കുന്നത് കാണുന്നതിനേക്കാൾ പ്രയാസകരമാണ്. ലേഔട്ടുകൾ, ടച്ച് ഇവന്റുകൾ, CSS നിയമങ്ങൾ എന്നിവയെല്ലാം ഒരേസമയം കൈകാര്യം ചെയ്യേണ്ടതുണ്ട്.

ഒരു വിഷ്വൽ-ഡിഫ് (visual-diff) UI-യുടെ സമീപകാല റീഡിസൈനിൽ നിന്ന് ഞാൻ പഠിച്ച മൂന്ന് സാങ്കേതിക പാഠങ്ങൾ താഴെ പറയുന്നവയാണ്.

  1. ലേഔട്ടുകൾക്കായി വിൻഡോ വിഡ്ത്ത് (window width) ഉപയോഗിക്കുന്നത് നിർത്തുക

നിങ്ങളുടെ ലേഔട്ട് വെർട്ടിക്കൽ ആണോ ഹൊറിസോണ്ടൽ ആണോ എന്ന് തീരുമാനിക്കാൻ window.innerWidth ഉപയോഗിക്കരുത്. ഉപയോക്താവ് വിൻഡോയുടെ വലിപ്പം മാറ്റിയാൽ നിങ്ങളുടെ ലോജിക് തെറ്റാൻ സാധ്യതയുണ്ട്.

പകരം, യഥാർത്ഥ CSS സ്റ്റേറ്റ് ഉപയോഗിക്കുക. flex-direction പരിശോധിക്കാൻ getComputedStyle ഉപയോഗിക്കുക. എല്ലാ മീഡിയ ക്വറികളും (media queries) പ്രയോഗിച്ചതിന് ശേഷമുള്ള യഥാർത്ഥ മൂല്യം ഇത് വായിക്കുന്നു. നിങ്ങളുടെ ഡ്രാഗ് ലോജിക് ഉപയോക്താവ് കാണുന്നതിന് കൃത്യമായി യോജിക്കുന്നുണ്ടെന്ന് ഇത് ഉറപ്പാക്കുന്നു.

  1. ടച്ച്, മൗസ് ഇവന്റുകൾ ഒരുമിച്ച് കൈകാര്യം ചെയ്യുക

ഡെസ്ക്ടോപ്പിലും മൊബൈലിലും ഡ്രാഗിംഗ് കൃത്യമായി പ്രവർത്തിപ്പിക്കാൻ നിങ്ങൾക്ക് ഏകീകൃതമായ ഒരു സമീപനം ആവശ്യമാണ്.

  • കോർഡിനേറ്റുകൾ വേർതിരിച്ചെടുക്കാൻ optional chaining ഉപയോഗിക്കുക. ഇത് ഒരു ഫംഗ്ഷന് തന്നെ മൗസ്, ടച്ച് ഇവന്റുകൾ എന്നിവ കൈകാര്യം ചെയ്യാൻ അനുവദിക്കുന്നു.
  • touchmove-ന് { passive: false } ഉപയോഗിക്കുക. സ്ക്രോളിംഗ് എളുപ്പമാക്കാൻ ബ്രൗസറുകൾ ടച്ച് ഇവന്റുകളെ ഡിഫോൾട്ടായി 'passive' ആയിട്ടാണ് കണക്കാക്കുന്നത്. നിങ്ങൾ ഇത് false എന്ന് സെറ്റ് ചെയ്തില്ലെങ്കിൽ, e.preventDefault() വിളിക്കാൻ കഴിയില്ല. ആ കോൾ ഇല്ലാതെ, നിങ്ങൾ ഡ്രാഗ് ചെയ്യാൻ ശ്രമിക്കുമ്പോൾ പേജ് സ്ക്രോൾ ആയിക്കൊണ്ടിരിക്കും.
  • move, end ലിസണറുകൾ ഡോക്യുമെന്റിൽ (document) അറ്റാച്ച് ചെയ്യുക. ഉപയോക്താവ് വിരൽ വളരെ വേഗത്തിൽ ചലിപ്പിച്ചാൽ, അവർ ഡിവിഡറിൽ നിന്ന് വിരൽ മാറ്റിയേക്കാം. ഡോക്യുമെന്റിൽ അറ്റാച്ച് ചെയ്യുന്നത് വഴി, പോയിന്റർ മാറിക്കൊണ്ടിരുന്നാലും ഡ്രാഗിംഗ് തുടരുന്നുണ്ടെന്ന് ഉറപ്പാക്കാം.
  1. വിസിബിലിറ്റി സിസ്റ്റവുമായി (visibility system) പോരാട്ടം ഒഴിവാക്കുക

എനിക്ക് ഒരു CSS specificity ബഗ് നേരിട്ടിരുന്നു. പാനലുകൾ മറയ്ക്കാൻ ഒരു ക്ലാസ്സും ലേഔട്ട് ദിശ നിശ്ചയിക്കാൻ മറ്റൊരു ക്ലാസ്സും ഞാൻ ഉപയോഗിച്ചിരുന്നു.

പ്രശ്നം:

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

ഇവ രണ്ടിനും ഒരേ സ്പെസിഫിസിറ്റി (specificity) ഉള്ളതിനാൽ, ഫയലിലെ അവസാനത്തെ ക്ലാസ് വിജയിച്ചു. ഇതിനർത്ഥം പാനലുകൾ മറയ്ക്കേണ്ടി വരുമ്പോഴും അവ കാണപ്പെട്ടു എന്നാണ്.

പരിഹാരം: ഒരു ലേഔട്ട് ഹെൽപ്പർ ക്ലാസ് ഒരിക്കലും display പ്രോപ്പർട്ടി സെറ്റ് ചെയ്യാൻ അനുവദിക്കരുത്. വിസിബിലിറ്റി ക്ലാസ് അത് നിയന്ത്രിക്കട്ടെ.

ഇതിന് പകരം: .diff-layout { display: flex; flex-direction: column; }

ഇത് ഉപയോഗിക്കുക: .view-panel.diff-layout { flex-direction: column; }

ഇത് സ്പെസിഫിസിറ്റി വർദ്ധിപ്പിക്കുകയും ലേഔട്ട് ക്ലാസ് വിസിബിലിറ്റിയല്ല, മറിച്ച് ദിശ (direction) മാത്രമേ മാറ്റുന്നുള്ളൂ എന്ന് ഉറപ്പാക്കുകയും ചെയ്യുന്നു.

ഉറവിടം: https://dev.to/bonzai2carn/under-the-hood-drag-touch-and-css-cascade-in-a-real-diff-ui-1b66