Գործիքների հուշումները կարծես UI-ի ամենափոքր խնդիրն են, որ կարող եք ունենալ: Նրանք փոքր են և սովորաբար թաքնված: Երբ ինչ-որ մեկը հարցնում է, թե ինչպես ստեղծել մեկը, ավանդական պատասխանը գրեթե միշտ գալիս է JavaScript գրադարանի միջոցով: Եվ երկար ժամանակ դա խելամիտ խորհուրդն էր։ Ես նույնպես հետևեցի դրան: Մակերեւույթում գործիքի հուշումը պարզ է: Սավառնել կամ կենտրոնանալ տարրի վրա, ցույց տալ մի փոքրիկ տուփ տեքստով, ապա թաքցնել այն, երբ օգտատերը հեռանում է: Բայց երբ մեկ ուղարկեք իրական օգտատերերին, ծայրերը սկսում են երևալ: Ստեղնաշարի օգտատերերը մուտքագրեք ձգան, բայց երբեք չտեսնեք գործիքի հուշումը: Էկրանի ընթերցողները դա հայտարարում են երկու անգամ, կամ ընդհանրապես չեն հայտարարում: Գործիքների հուշումը թարթում է, երբ մկնիկը շատ արագ եք տեղափոխում: Այն համընկնում է բովանդակության ավելի փոքր էկրանների վրա: Esc սեղմելով այն չի փակվում: Կենտրոնացումը կորչում է. Ժամանակի ընթացքում իմ գործիքի հուշման կոդը վերածվեց մի բանի, որն այլևս չէի ուզում ունենալ: Միջոցառման ունկնդիրները կուտակվեցին: Սավառնելն ու ֆոկուսը պետք է առանձին վարվեին: Արտաքին սեղմումների համար անհրաժեշտ էին հատուկ պատյաններ: ARIA-ի ատրիբուտները պետք է ձեռքով համաժամանակյա պահվեին: Յուրաքանչյուր փոքր ուղղում ավելացնում էր տրամաբանության ևս մեկ շերտ: Գրադարաններն օգնեցին, բայց դրանք նաև ավելի շատ նման էին սև արկղերի, որոնց շուրջ ես աշխատում էի, փոխարենը լիովին հասկանալու, թե ինչ է կատարվում կուլիսներում: Դա այն էր, ինչ ինձ մղեց նայելու ավելի նոր Popover API-ին: Ես ուզում էի տեսնել, թե ինչ կլինի, եթե ես վերակառուցեի մեկ գործիքի հուշում՝ օգտագործելով զննարկչի բնիկ մոդելը, առանց գրադարանի օգնության: Երբ սկսում ենք, հարկ է նշել, որ, ինչպես ցանկացած նոր գործառույթի դեպքում, դրա հետ կապված կան որոշ բաներ, որոնք դեռ արդուկվում են: Ասել է թե, այն ներկայումս վայելում է բրաուզերի հիանալի աջակցություն, չնայած ընդհանուր API-ի մի քանի մասեր կան, որոնք հոսքի մեջ են: Միևնույն ժամանակ արժե ուշադրություն դարձնել Կանիուսին: «Հին» գործիքի հուշում Մինչ Popover API-ն, գործիքի հուշման գրադարան օգտագործելը դյուրանցում չէր: Դա լռելյայն էր: Զննարկիչները չունեին գործիքի հուշման բնօրինակ գաղափար, որն աշխատում էր մկնիկի, ստեղնաշարի և օժանդակ տեխնոլոգիաների վրա: Եթե դուք մտածում էիք կոռեկտության մասին, ձեր միակ տարբերակը գրադարանից օգտվելն էր, և դա հենց այն է, ինչ ես արեցի: Բարձր մակարդակում օրինաչափությունը միշտ նույնն էր՝ ձգանման տարր, թաքնված գործիքի հուշման տարր և JavaScript՝ երկուսը համակարգելու համար:
Գրադարանը մշակել է լարերը, որոնք թույլ են տվել տարրը ցուցադրել սավառնելիս կամ կենտրոնանալիս, թաքցնել մկնիկի մկնիկի հեռացման ժամանակ և փոխել դիրքը/չափափոխել ոլորման վրա:
Ժամանակի ընթացքում գործիքի ծայրը կարող է փխրուն դառնալ: Փոքր փոփոխությունները վտանգ էին ներկայացնում: Փոքր շտկումները հետընթաց են առաջացրել: Ավելի վատ, նոր գործիքների հուշումներ ավելացնելը ժառանգեց նույն բարդությունը: Գործերը տեխնիկապես աշխատել են, բայց երբեք չեն զգացել կարգավորված կամ ամբողջական: Այդպիսին էր իրերի վիճակը, երբ ես որոշեցի վերակառուցել գործիքի հուշումը, օգտագործելով բրաուզերի բնիկ Popover API-ն: The Moment I Tested The Popover API Ես չեմ անցել Popover API-ի օգտագործմանը, քանի որ ուզում էի նոր բան փորձարկել: Ես փոխեցի, քանի որ հոգնել էի պահպանել գործիքի հուշման վարքագիծը, որը կարծում էի, որ զննարկիչը պետք է արդեն հասկանար: Ես սկզբում թերահավատ էի։ Նոր վեբ API-ների մեծամասնությունը խոստանում է պարզություն, բայց դեռ պահանջում է սոսինձ, եզրագծերի մշակում կամ հետադարձ տրամաբանություն, որը հանգիստ վերստեղծում է նույն բարդությունը, որից դուք փորձում էիք խուսափել: Այսպիսով, ես փորձեցի Popover API-ն հնարավորինս փոքր ձևով: Ահա թե ինչ տեսք ուներ.
-ի հետ
1. «Ուղղակի աշխատում է» ստեղնաշարը Ստեղնաշարի աջակցությունը կախված էր մի քանի շերտերից, որոնք ճիշտ շարված էին. ֆոկուսը պետք է գործարկեր գործիքի հուշումը, մշուշումը պետք է թաքցներ այն, Esc-ը պետք է միացվեր ձեռքով, և ժամանակը կարևոր էր: Եթե բաց եք թողել մեկ եզրային պատյան, գործիքի հուշումը կա՛մ շատ երկար բաց կմնա, կա՛մ անհետանում է, նախքան այն կարդալը: Երբ popover հատկանիշը դրված է ավտոմատ կամ ձեռքով, զննարկիչը ստանձնում է հիմունքները. Tab և Shift+Tab-ն իրենց նորմալ են պահում, Esc-ն ամեն անգամ փակում է գործիքի հուշումը, և լրացուցիչ լսողներ չեն պահանջվում:
Այն, ինչ անհետացավ իմ կոդերի բազայից, ստեղնաշարի գլոբալ մշակիչներն էին, Esc-ի հատուկ մաքրման տրամաբանությունը և ստեղնաշարի նավարկության ընթացքում վիճակի ստուգումները: Ստեղնաշարի փորձը դադարեց լինել այն, ինչ ես պետք է պահպանեի, և այն դարձավ բրաուզերի երաշխիք: 2. Էկրանի ընթերցողի կանխատեսելիություն Սա էրամենամեծ բարելավումը. Նույնիսկ ARIA-ի զգույշ աշխատանքի դեպքում վարքագիծը տարբերվում էր, ինչպես ես նախանշեցի ավելի վաղ: Յուրաքանչյուր փոքր փոփոխություն ռիսկային էր: Պատշաճ դերով պոպովերի օգտագործումը շատ ավելի կայուն և կանխատեսելի է թվում, և այն, ինչ տեղի կունենա.
Եվ ահա ևս մեկ հաղթանակ. Անջատումից հետո Lighthouse-ը դադարեցրեց փոխազդեցության համար ARIA-ի վիճակի սխալ նախազգուշացումները, հիմնականում այն պատճառով, որ այլևս չկան հատուկ ARIA վիճակներ, որպեսզի ես պատահաբար սխալվեմ:
3. Ֆոկուսի կառավարում Ֆոկուսը նախկինում փխրուն էր: Նախկինում ես կանոններ ունեի, ինչպիսիք են՝ թույլ տվեք, որ ֆոկուսի գործարկիչը ցույց տա գործիքի հուշումը, ֆոկուսը տեղափոխեք գործիքի հուշում և մի փակեք, մշուշեք գործարկիչը, երբ այն շատ մոտ է, և փակեք գործիքի հուշումը և վերականգնեք ֆոկուսը ձեռքով: Սա աշխատեց այնքան ժամանակ, մինչև չգործեց: Popover API-ի միջոցով զննարկիչը կիրառում է ավելի պարզ մոդել, որտեղ կենտրոնացումը կարող է ավելի բնական կերպով տեղափոխվել popover: Փոփովերի փակումը վերադարձնում է ֆոկուսը դեպի ձգան, և չկան անտեսանելի ուշադրության թակարդներ կամ կորցրած ուշադրության պահեր: Եվ ես չեմ ավելացրել ֆոկուսի վերականգնման կոդը. Ես հանեցի այն։
Եզրակացություն Popover API-ն նշանակում է, որ գործիքների հուշումները այլևս չեն հանդիսանում այն, ինչ դուք նմանակում եք: Դրանք ինչ-որ բան է, որը բրաուզերը հասկանում է: Բացումը, փակումը, ստեղնաշարի վարքագիծը, Escape-ի կառավարումը և հասանելիության մեծ մասը այժմ գալիս են հենց հարթակից, ոչ թե ad-hoc JavaScript-ից: Դա չի նշանակում, որ գործիքի հուշումների գրադարանները հնացած են, քանի որ դրանք դեռևս իմաստ ունեն նախագծման բարդ համակարգերի, ծանր անհատականացման կամ ժառանգական սահմանափակումների համար, սակայն լռելյայն փոխվել է: Առաջին անգամ ամենապարզ գործիքի հուշումը կարող է լինել նաև ամենաճիշտը: Եթե հետաքրքրասեր եք, փորձեք այս փորձը. Պարզապես փոխեք ձեր արտադրանքի ընդամենը մեկ գործիքի հուշումը Popover API-ով, մի վերագրեք ամեն ինչ, մի տեղափոխեք մի ամբողջ համակարգ և պարզապես ընտրեք մեկը և տեսեք, թե ինչ է անհետանում ձեր կոդից: Երբ հարթակը ձեզ ավելի լավ պարզունակ է տալիս, շահույթը ոչ միայն JavaScript-ի ավելի քիչ տողեր են, այլև ավելի քիչ բաներ, որոնց մասին ընդհանրապես պետք է անհանգստանաք: Ստուգեք ամբողջական աղբյուրի կոդը իմ GitHub պահեստում: Հետագա ընթերցում Պոպովերի և հարակից API-ների ավելի խորը սուզումների համար.
«Փոփին Ին», Ջեֆ Գրեհեմ «Պոպովերի և երկխոսությունների միջև հարաբերությունների պարզաբանում», Զել Լիու «Ի՞նչ է popover=hint»-ը, Ունա Կրավեց «Invoker Commands», Դանիել Շվարց «Ավտոմատ փակման ծանուցման ստեղծում HTML Popover-ով», Preethi Բացեք UI Popover API Explainer-ը «Փուչիկները թռցրու», Ջոն Ռեա «CSS Anchor Positioning», Խուան Դիեգո Ռոդրիգես
MDN-ն առաջարկում է նաև համապարփակ տեխնիկական փաստաթղթեր Popover API-ի համար:
