मागील तांत्रिक बाजू: Drag, Touch, आणि CSS Cascade

रिसाईझ करण्यायोग्य (resizable) UI पॅनेल तयार करणे हे दिसते तितके सोपे नाही. तुम्हाला लेआउट्स, टच इव्हेंट्स आणि CSS नियम या सर्वांचे एकाच वेळी व्यवस्थापन करावे लागते.

माझ्या अलीकडील visual-diff UI च्या रिडिझाइनमधून मिळालेले तीन तांत्रिक धडे खालीलप्रमाणे आहेत.

  1. लेआउटसाठी window width वापरणे थांबवा

तुमचा लेआउट व्हर्टिकल (vertical) आहे की हॉरिझॉन्टल (horizontal) हे ठरवण्यासाठी window.innerWidth वापरू नका. जर वापरकर्त्याने विंडोचा आकार बदलला, तर तुमचे लॉजिक बिघडू शकते.

त्याऐवजी, प्रत्यक्ष CSS स्टेट वापरा. flex-direction तपासण्यासाठी getComputedStyle वापरा. हे सर्व मीडिया क्वेरीज (media queries) लागू झाल्यानंतरचे वास्तविक मूल्य वाचते. यामुळे तुमचे drag लॉजिक वापरकर्त्याला प्रत्यक्षात जे दिसते त्याशी सुसंगत राहते याची खात्री मिळते.

  1. टच आणि माऊस इव्हेंट्स एकत्रितपणे हाताळा

डेस्कटॉप आणि मोबाईल दोन्हीवर ड्रॅगिंग (dragging) व्यवस्थित चालण्यासाठी, तुम्हाला एका एकत्रित दृष्टिकोनाची (unified approach) गरज आहे.

  • कोऑर्डिनेट्स (coordinates) काढण्यासाठी optional chaining वापरा. यामुळे एकच फंक्शन माऊस आणि टच दोन्ही इव्हेंट्स हाताळू शकते.
  • touchmove साठी { passive: false } वापरा. स्क्रोलिंगमध्ये मदत करण्यासाठी ब्राउझर्स डिफॉल्टनुसार टच इव्हेंट्स 'passive' ठेवतात. जर तुम्ही हे false सेट केले नाही, तर तुम्ही e.preventDefault() कॉल करू शकणार नाही. त्या कॉलशिवाय, तुम्ही ड्रॅग करण्याचा प्रयत्न करत असतानाच पेज स्क्रोल होऊ लागते.
  • move आणि end लिसनर्स (listeners) document ला जोडा. जर वापरकर्त्याने बोट खूप वेगाने हलवले, तर ते डिव्हायडरच्या बाहेर जाऊ शकते. document ला जोडल्यामुळे पॉइंटर बाजूला सरकला तरी ड्रॅग प्रक्रिया सुरू राहण्याची खात्री मिळते.
  1. तुमच्या व्हिजिबिलिटी (visibility) सिस्टमशी संघर्ष करणे टाळा

मला एका CSS specificity बगचा सामना करावा लागला. पॅनेल्स लपवण्यासाठी माझ्याकडे एक क्लास होता आणि लेआउटची दिशा सेट करण्यासाठी दुसरा क्लास होता.

समस्या:

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

या दोघांची specificity समान असल्यामुळे, फाईलमधील शेवटचा क्लास लागू झाला. याचा अर्थ असा की, पॅनेल्स लपवले जाण्याऐवजी ते दृश्यमान (visible) राहिले.

उपाय: लेआउट हेल्पर क्लासला कधीही 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