Mambo ya Ndani: Drag, Touch, na CSS Cascade

Kutengeneza paneli ya UI inayoweza kubadilishwa ukubwa ni vigumu kuliko inavyoonekana. Lazima usimamie mpangilio (layouts), matukio ya kugusa (touch events), na kanuni za CSS kwa wakati mmoja.

Hapa kuna masomo matatu ya kiufundi kutoka kwenye mchakato wangu wa hivi karibuni wa kurekebisha muundo (redesign) wa visual-diff UI.

  1. Acha kutumia upana wa dirisha (window width) kwa ajili ya mpangilio

Usitumie window.innerWidth kuamua ikiwa mpangilio wako ni wa wima (vertical) au wa mlalo (horizontal). Ikiwa mtumiaji atabadilisha ukubwa wa dirisha, mantiki yako itaharibika.

Badala yake, tumia hali halisi ya CSS. Tumia getComputedStyle kukagua flex-direction. Hii inasoma thamani halisi baada ya media queries zote kutekelezwa. Inahakikisha kuwa mantiki yako ya drag inaendana na kile ambacho mtumiaji anatazama hasa.

  1. Shughulikia matukio ya kugusa (touch) na panya (mouse) kwa pamoja

Ili kufanya dragging ifanye kazi kwenye kompyuta (desktop) na simu (mobile), unahitaji mbinu iliyounganishwa.

  • Tumia optional chaining kutoa uratibu (coordinates). Hii inaruhusu kazi (function) moja kushughulikia matukio ya panya na kugusa kwa pamoja.
  • Tumia { passive: false } kwa touchmove. Vivinjari (browsers) hufanya matukio ya kugusa kuwa passive ili kusaidia kusogeza ukurasa (scrolling). Ikiwa hutaiweka hii kuwa false, huwezi kuita e.preventDefault(). Bila mwito huo, ukurasa utajisogeza wakati unajaribu kufanya drag.
  • Unganisha move na end listeners kwenye document. Ikiwa mtumiaji atasogeza kidole chake kwa haraka sana, anaweza kuacha kigawo (divider). Kuunganisha kwenye document kunahakikisha kuwa drag inaendelea hata kama kielekezi (pointer) kinatoka nje.
  1. Epuka kupambana na mfumo wako wa kuonekana (visibility system)

Nilikutana na hitilafu ya CSS specificity. Nilikuwa na class moja ya kuficha paneli na nyingine ya kuweka mwelekeo wa mpangilio.

Tatizo:

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

Kwa sababu hizi zilikuwa na specificity sawa, ile ya mwisho kwenye faili ilishinda. Hii ilimaanisha paneli zangu zilikuwa zinaonekana hata wakati zilipaswa kuwa zimefichwa.

Suluhisho: Usiruhusu class ya msaidizi wa mpangilio (layout helper class) iweke sifa ya display. Acha class ya kuonekana (visibility class) iimiliki hiyo.

Badala ya: .diff-layout { display: flex; flex-direction: column; }

Tumia: .view-panel.diff-layout { flex-direction: column; }

Hii inaongeza specificity na kuhakikisha kuwa class ya mpangilio inabadilisha mwelekeo pekee, si uonekano.

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