ਗਹਿਰਾਈ ਵਿੱਚ: Drag, Touch, ਅਤੇ CSS Cascade

ਇੱਕ resizable UI ਪੈਨਲ ਬਣਾਉਣਾ ਦੇਖਣ ਵਿੱਚ ਜਿੰਨਾ ਸੌਖਾ ਲੱਗਦਾ ਹੈ, ਉਸ ਤੋਂ ਕਿਤੇ ਜ਼ਿਆਦਾ ਔਖਾ ਹੈ। ਤੁਹਾਨੂੰ ਇੱਕੋ ਸਮੇਂ layouts, touch events, ਅਤੇ CSS ਨਿਯਮਾਂ ਨੂੰ ਸੰਭਾਲਣਾ ਪੈਂਦਾ ਹੈ।

ਮੇਰੇ ਇੱਕ visual-diff UI ਦੇ ਹਾਲੀਆ ਰੀਡਿਜ਼ਾਈਨ (redesign) ਤੋਂ ਤਿੰਨ ਤਕਨੀਕੀ ਸਬਕ ਇੱਥੇ ਦਿੱਤੇ ਗਏ ਹਨ।

  1. Layouts ਲਈ window width ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਬੰਦ ਕਰੋ

ਇਹ ਫੈਸਲਾ ਕਰਨ ਲਈ ਕਿ ਤੁਹਾਡਾ layout vertical ਹੈ ਜਾਂ horizontal, window.innerWidth ਦੀ ਵਰਤੋਂ ਨਾ ਕਰੋ। ਜੇਕਰ ਕੋਈ ਯੂਜ਼ਰ ਵਿੰਡੋ ਨੂੰ resize ਕਰਦਾ ਹੈ, ਤਾਂ ਤੁਹਾਡਾ logic ਟੁੱਟ ਸਕਦਾ ਹੈ।

ਇਸ ਦੀ ਬਜਾਏ, ਅਸਲ CSS state ਦੀ ਵਰਤੋਂ ਕਰੋ। flex-direction ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ getComputedStyle ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਸਾਰੇ media queries ਲਾਗੂ ਹੋਣ ਤੋਂ ਬਾਅਦ ਅਸਲ ਮੁੱਲ (value) ਨੂੰ ਪੜ੍ਹਦਾ ਹੈ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ drag logic ਉਸੇ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ ਜੋ ਯੂਜ਼ਰ ਅਸਲ ਵਿੱਚ ਦੇਖ ਰਿਹਾ ਹੈ।

  1. Touch ਅਤੇ mouse events ਨੂੰ ਇਕੱਠੇ ਸੰਭਾਲੋ

Desktop ਅਤੇ mobile ਦੋਵਾਂ 'ਤੇ dragging ਨੂੰ ਕੰਮ ਕਰਵਾਉਣ ਲਈ, ਤੁਹਾਨੂੰ ਇੱਕ ਇਕਸਾਰ (unified) ਪਹੁੰਚ ਦੀ ਲੋੜ ਹੈ।

  • ਕੋਆਰਡੀਨੇਟਸ (coordinates) ਕੱਢਣ ਲਈ optional chaining ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਇੱਕ ਹੀ function ਨੂੰ mouse ਅਤੇ touch events ਦੋਵਾਂ ਨੂੰ ਸੰਭਾਲਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।
  • touchmove ਲਈ { passive: false } ਦੀ ਵਰਤੋਂ ਕਰੋ। ਬ੍ਰਾਊਜ਼ਰ ਸਕ੍ਰੋਲਿੰਗ ਵਿੱਚ ਮਦਦ ਕਰਨ ਲਈ touch events ਨੂੰ ਡਿਫੌਲਟ ਰੂਪ ਵਿੱਚ passive ਰੱਖਦੇ ਹਨ। ਜੇਕਰ ਤੁਸੀਂ ਇਸਨੂੰ false 'ਤੇ ਸੈੱਟ ਨਹੀਂ ਕਰਦੇ, ਤਾਂ ਤੁਸੀਂ e.preventDefault() ਨੂੰ ਕਾਲ ਨਹੀਂ ਕਰ ਸਕਦੇ। ਉਸ ਕਾਲ ਤੋਂ ਬਿਨਾਂ, ਜਦੋਂ ਤੁਸੀਂ drag ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹੋ, ਤਾਂ ਪੇਜ ਸਕ੍ਰੋਲ ਹੋ ਜਾਂਦਾ ਹੈ।
  • move ਅਤੇ end listeners ਨੂੰ document ਨਾਲ ਜੋੜੋ। ਜੇਕਰ ਕੋਈ ਯੂਜ਼ਰ ਆਪਣੀ ਉਂਗਲ ਬਹੁਤ ਤੇਜ਼ੀ ਨਾਲ ਹਿਲਾਉਂਦਾ ਹੈ, ਤਾਂ ਉਹ divider ਤੋਂ ਬਾਹਰ ਜਾ ਸਕਦਾ ਹੈ। document ਨਾਲ ਜੋੜਨ ਨਾਲ ਇਹ ਯਕੀਨੀ ਬਣਦਾ ਹੈ ਕਿ ਜੇਕਰ pointer ਆਪਣੀ ਜਗ੍ਹਾ ਤੋਂ ਹਿੱਲ ਵੀ ਜਾਵੇ, ਤਾਂ ਵੀ drag ਜਾਰੀ ਰਹੇ।
  1. ਆਪਣੇ visibility system ਨਾਲ ਟਕਰਾਉਣ ਤੋਂ ਬਚੋ

ਮੈਨੂੰ ਇੱਕ CSS specificity bug ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪਿਆ। ਮੇਰੇ ਕੋਲ ਪੈਨਲਾਂ ਨੂੰ ਲੁਕਾਉਣ ਲਈ ਇੱਕ class ਸੀ ਅਤੇ layout direction ਸੈੱਟ ਕਰਨ ਲਈ ਇੱਕ ਹੋਰ।

ਸਮੱਸਿਆ:

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

ਕਿਉਂਕਿ ਇਹਨਾਂ ਦੀ specificity ਬਰਾਬਰ ਸੀ, ਇਸ ਲਈ ਫਾਈਲ ਵਿੱਚ ਆਖਰੀ ਵਾਲੀ ਜਿੱਤ ਗਈ। ਇਸਦਾ ਮਤਲਬ ਸੀ ਕਿ ਮੇਰੇ ਪੈਨਲ ਉਦੋਂ ਵੀ ਦਿਖਾਈ ਦੇ ਰਹੇ ਸਨ ਜਦੋਂ ਉਹਨਾਂ ਨੂੰ ਲੁਕਿਆ ਹੋਣਾ ਚਾਹੀਦਾ ਸੀ।

ਹੱਲ: ਕਦੇ ਵੀ ਕਿਸੇ layout helper class ਨੂੰ display property ਸੈੱਟ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਨਾ ਦਿਓ। ਉਸ ਨੂੰ visibility class ਦੇ ਅਧਿਕਾਰ ਵਿੱਚ ਰਹਿਣ ਦਿਓ।

ਇਸ ਦੀ ਬਜਾਏ: .diff-layout { display: flex; flex-direction: column; }

ਇਸ ਦੀ ਵਰਤੋਂ ਕਰੋ: .view-panel.diff-layout { flex-direction: column; }

ਇਹ specificity ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ ਅਤੇ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ layout class ਸਿਰਫ਼ direction ਬਦਲਦੀ ਹੈ, visibility ਨਹੀਂ।

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