અંદરની વિગતો: Drag, Touch, અને CSS Cascade

રિસાઇઝ કરી શકાય તેવું UI પેનલ બનાવવું એ દેખાય છે તેના કરતાં વધુ મુશ્કેલ છે. તમારે લેઆઉટ, ટચ ઇવેન્ટ્સ અને CSS નિયમો એકસાથે મેનેજ કરવા પડે છે.

મારા તાજેતરના visual-diff UI ના રીડિઝાઇનમાંથી અહીં ત્રણ તકનીકી પાઠ છે.

  1. લેઆઉટ માટે window width નો ઉપયોગ કરવાનું બંધ કરો

તમારું લેઆઉટ વર્ટિકલ (vertical) છે કે હોરિઝોન્ટલ (horizontal) તે નક્કી કરવા માટે window.innerWidth નો ઉપયોગ કરશો નહીં. જો વપરાશકર્તા વિન્ડોનું કદ બદલે (resize કરે), તો તમારું લોજિક તૂટી જશે.

તેના બદલે, વાસ્તવિક CSS સ્ટેટનો ઉપયોગ કરો. flex-direction તપાસવા માટે getComputedStyle નો ઉપયોગ કરો. આ બધી media queries લાગુ થયા પછી વાસ્તવિક કિંમત વાંચે છે. તે સુનિશ્ચિત કરે છે કે તમારું drag લોજિક વપરાશકર્તા ખરેખર જે જુએ છે તેની સાથે મેળ ખાય છે.

  1. Touch અને mouse ઇવેન્ટ્સને સાથે હેન્ડલ કરો

ડેસ્કટોપ અને મોબાઈલ બંને પર dragging કામ કરે તે માટે, તમારે એક સંયુક્ત અભિગમની જરૂર છે.

  • કોઓર્ડિનેટ્સ (coordinates) કાઢવા માટે optional chaining નો ઉપયોગ કરો. આ એક જ ફંક્શનને mouse અને touch બંને ઇવેન્ટ્સ હેન્ડલ કરવા દે છે.
  • touchmove માટે { passive: false } નો ઉપયોગ કરો. બ્રાઉઝર્સ સ્ક્રોલિંગમાં મદદ કરવા માટે touch ઇવેન્ટ્સને ડિફોલ્ટ રીતે passive રાખે છે. જો તમે આને false પર સેટ નહીં કરો, તો તમે e.preventDefault() કોલ કરી શકશો નહીં. તે કોલ વગર, જ્યારે તમે drag કરવાનો પ્રયાસ કરો છો ત્યારે પેજ સ્ક્રોલ થાય છે.
  • document પર move અને end લિસનર્સ (listeners) જોડો. જો વપરાશકર્તા તેમની આંગળી ખૂબ ઝડપથી ફેરવે, તો તેઓ ડિવાઈડર છોડી શકે છે. document સાથે જોડવાથી એ સુનિશ્ચિત થાય છે કે પોઇન્ટર ખસવા છતાં પણ drag ચાલુ રહે છે.
  1. તમારી વિઝિબિલિટી સિસ્ટમ સાથે લડવાનું ટાળો

મને એક 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; }

આ specificity વધારે છે અને સુનિશ્ચિત કરે છે કે લેઆઉટ ક્લાસ ફક્ત દિશા બદલે છે, વિઝિબિલિટી નહીં.

સ્ત્રોત: https://dev.to/bonzai2carn/under-the-hood-drag-touch-and-css-cascade-in-a-real-diff-ui-1b66