Rīka padomi šķiet mazākā lietotāja saskarnes problēma. Tie ir mazi un parasti paslēpti. Kad kāds jautā, kā to izveidot, tradicionālā atbilde gandrīz vienmēr atgriežas, izmantojot kādu JavaScript bibliotēku. Un ilgu laiku tas bija saprātīgs padoms. Es arī tam sekoju. Rīka padoms ir vienkāršs. Virziet kursoru vai fokusējiet uz elementu, parādiet nelielu lodziņu ar tekstu un pēc tam paslēpiet to, kad lietotājs attālinās. Bet, tiklīdz to nosūtāt reāliem lietotājiem, sāk parādīties malas. Tastatūras lietotāji Nospiediet trigeri, bet nekad neredziet rīka padomu. Ekrāna lasītāji to paziņo divreiz vai nepaziņo vispār. Rīka padoms mirgo, kad pārvietojat peli pārāk ātri. Tas pārklājas ar saturu mazākos ekrānos. Nospiežot Esc, tas netiek aizvērts. Fokuss pazūd. Laika gaitā mans rīka padoma kods kļuva par kaut ko tādu, ko es vairs nevēlējos iegūt. Pasākumu klausītāji sakrājās. Kursora novietošana un fokuss bija jārīkojas atsevišķi. Ārējiem klikšķiem bija nepieciešami īpaši gadījumi. ARIA atribūti bija jāsinhronizē ar roku. Katrs mazais labojums pievienoja vēl vienu loģikas slāni. Bibliotēkas palīdzēja, taču tās bija arī vairāk kā melnās kastes, ar kurām es strādāju, tā vietā, lai pilnībā saprastu, kas notiek aizkulisēs. Tas mani mudināja aplūkot jaunāko Popover API. Es gribēju redzēt, kas notiktu, ja es no jauna izveidotu vienu rīka padomu, izmantojot pārlūkprogrammas sākotnējo modeli, neizmantojot bibliotēku. Uzsākot darbu, ir vērts atzīmēt, ka, tāpat kā ar jebkuru jaunu līdzekli, ir dažas lietas, kas joprojām tiek izlīdzinātas. Tomēr pašlaik tai ir lielisks pārlūkprogrammas atbalsts, lai gan ir vairākas kopējās API daļas, kas mainās. Pa to laiku ir vērts uzmanīt Caniuse. “Vecais” rīka padoms Pirms Popover API rīka padomu bibliotēkas izmantošana nebija saīsne. Tas bija pēc noklusējuma. Pārlūkprogrammām nebija sākotnējā rīkpadoma koncepcijas, kas darbotos ar peli, tastatūru un palīgtehnoloģijām. Ja jums rūp pareizība, jūsu vienīgā iespēja bija izmantot bibliotēku, un tieši to es arī darīju. Augstā līmenī modelis vienmēr bija vienāds: trigera elements, slēptais rīka padoma elements un JavaScript, lai tos saskaņotu.
Bibliotēka apstrādāja vadus, kas ļāva elementu rādīt, virzot kursoru vai fokusā, paslēpties, kad aizmiglot vai pametot peles kursoru, un mainīt novietojumu/mainot izmērus ritināšanas laikā.
Laika gaitā rīka padoms var kļūt trausls. Nelielas izmaiņas radīja risku. Nelieli labojumi izraisīja regresiju. Vēl ļaunāk, jaunu rīka padomu pievienošana mantoja tādu pašu sarežģītību. Lietas tehniski darbojās, taču nekad nejutās sakārtotas vai pabeigtas. Tāds bija situācijas stāvoklis, kad es nolēmu atjaunot rīka padomu, izmantojot pārlūkprogrammas vietējo Popover API. Brīdis, kad izmēģināju Popover API Es nepārgāju uz Popover API izmantošanu, jo vēlējos eksperimentēt ar kaut ko jaunu. Es pārgāju, jo man bija apnicis saglabāt rīku padomu darbību, kas, manuprāt, pārlūkprogrammai jau bija jāsaprot. Sākumā biju skeptisks. Lielākā daļa jauno tīmekļa API sola vienkāršību, taču joprojām ir nepieciešama līme, malu korpusa apstrāde vai rezerves loģika, kas klusi atjauno to pašu sarežģītību, no kuras jūs mēģinājāt izvairīties. Tāpēc es izmēģināju Popover API pēc iespējas mazākā veidā. Lūk, kā tas izskatījās:
1. Tastatūra “Tikai darbojas” Tastatūras atbalsts bija atkarīgs no tā, vai vairāki slāņi bija pareizi sakārtoti: fokusam bija jāaktivizē rīka padoms, izplūšanai tas bija jāpaslēpj, Esc bija jāpievieno manuāli, un laikam bija nozīme. Ja esat palaidis garām vienu malas gadījumu, rīka padoms paliks atvērts pārāk ilgi vai pazudīs, pirms to varētu nolasīt. Ja popover atribūts ir iestatīts uz automātisku vai manuālu, pārlūkprogramma pārņem pamatus: Tab un Shift+Tab darbojas kā parasti, Esc katru reizi aizver rīka padomu un nav nepieciešami papildu klausītāji.
Manā kodu bāzē pazuda globālie taustiņu apdarinātāji, Esc specifiskā tīrīšanas loģika un stāvokļa pārbaudes tastatūras navigācijas laikā. Tastatūras pieredze vairs nebija kaut kas, kas man bija jāuztur, un tas kļuva par pārlūkprogrammas garantiju. 2. Ekrāna lasītāja paredzamība Šis bijalielākais uzlabojums. Pat rūpīgi strādājot ar ARIA, uzvedība bija atšķirīga, kā es aprakstīju iepriekš. Katra mazā izmaiņa jutās riskanti. Izmantojot uznirstošo logu ar atbilstošu lomu, tas izskatās un jūtas daudz stabilāks un paredzamāks, ciktāl tas notiks:
Un šeit ir vēl viens ieguvums: pēc pārslēgšanas Lighthouse pārtrauca atzīmēt nepareizus ARIA stāvokļa brīdinājumus par mijiedarbību, galvenokārt tāpēc, ka vairs nav pielāgotu ARIA štatu, lai es varētu nejauši kļūdīties.
3. Fokusa vadība Fokuss agrāk bija trausls. Iepriekš man bija tādi noteikumi: ļaut fokusa aktivizētājam rādīt rīka padomu, pārvietot fokusu uz rīka padomu un neaizvērt, aizmiglot aktivizētāju, kad tas ir pārāk tuvu, un aizvērt rīka padomu un atjaunot fokusu manuāli. Tas darbojās, līdz tas nedarbojās. Izmantojot Popover API, pārlūkprogramma ievieš vienkāršāku modeli, kurā fokuss var dabiskāk pārvietoties uz popover. Aizverot uznirstošo logu, fokuss tiek atgriezts uz trigeri, un nav neredzamu fokusa slazdu vai zaudētu fokusa momentu. Un es nepievienoju fokusa atjaunošanas kodu; Es to noņēmu.
Secinājums Popover API nozīmē, ka rīka padomi vairs nav kaut kas tāds, ko jūs simulējat. Tie ir kaut kas tāds, ko pārlūkprogramma saprot. Atvēršana, aizvēršana, tastatūras darbība, Escape apstrāde un liela daļa pieejamības tagad nāk no pašas platformas, nevis no ad hoc JavaScript. Tas nenozīmē, ka rīkpadomu bibliotēkas ir novecojušas, jo tās joprojām ir piemērotas sarežģītām dizaina sistēmām, lielai pielāgošanai vai mantotajiem ierobežojumiem, taču noklusējuma vērtība ir mainījusies. Pirmo reizi vienkāršākais rīka padoms var būt arī vispareizākais. Ja jūs interesē, izmēģiniet šo eksperimentu: vienkārši nomainiet tikai vienu rīka padomu savā produktā ar Popover API, nepārrakstiet visu, nemigrējiet visu sistēmu un vienkārši izvēlieties vienu un skatiet, kas pazūd no jūsu koda. Kad platforma sniedz jums labāku primitīvu, ieguvums ir ne tikai mazāk JavaScript rindiņu, bet arī mazāk lietu, par kurām jums vispār jāuztraucas. Skatiet pilnu avota kodu manā GitHub repo. Tālāka lasīšana Lai iegūtu dziļāku informāciju par uznirstošajiem logiem un saistītajām API, veiciet tālāk norādītās darbības.
“Poppin’ In”, Džefs Greiems “Atkarības noskaidrošana starp popoveriem un dialogiem”, Zell Liew “Kas ir popover=hint?”, Una Kravets “Izsaucēja komandas”, Daniels Švarcs “Automātiskās aizvēršanas paziņojuma izveide, izmantojot HTML uznirstošo logu”, Preethi Atveriet UI Popover API skaidrotāju “Pop(over) the Balloons”, Džons Rea “CSS enkura pozicionēšana”, Huans Djego Rodrigess
MDN piedāvā arī visaptverošu Popover API tehnisko dokumentāciju.
