Маслиҳатҳои асбобҳо мисли хурдтарин мушкилоти интерфейси интерфейси шумо эҳсос мекунанд. Онҳо хурд ҳастанд ва одатан пинҳон мешаванд. Вақте ки касе мепурсад, ки чӣ тавр сохтани он, ҷавоби анъанавӣ қариб ҳамеша бо истифода аз китобхонаи JavaScript бармегардад. Ва барои муддати тӯлонӣ, ин маслиҳати оқилона буд. Ман ҳам ба он пайравӣ кардам. Дар рӯи замин, як маслиҳат оддӣ аст. Ба элемент гузоред ё тамаркуз кунед, қуттии каме бо матнеро нишон диҳед, пас вақте ки корбар дур мешавад, онро пинҳон кунед. Аммо вақте ки шумо онро ба корбарони воқеӣ мефиристед, кунҷҳо нишон медиҳанд. Истифодабарандагони клавиатура ба триггер ворид мешаванд, аммо ҳеҷ гоҳ маслиҳати абзорро набинанд. Хонандагони экран онро ду маротиба эълон мекунанд ё тамоман не. Вақте ки шумо мушро хеле зуд ҳаракат медиҳед, лавҳаи асбобҳо мепарад. Он мундариҷаро дар экранҳои хурдтар такрор мекунад. Бо пахш кардани Esc он баста намешавад. Фокус гум мешавад. Бо гузашти вақт, рамзи асбоби ман ба чизе табдил ёфт, ки ман дигар соҳиби он шудан намехостам. Шунавандагони чорабинӣ ҷамъ шуданд. Гузариш ва фокус бояд алоҳида коркард карда шавад. Кликҳои беруна ҳолатҳои махсус лозиманд. Атрибутҳои ARIA бояд бо дастӣ ҳамоҳанг карда шаванд. Ҳар як ислоҳи хурд як қабати дигари мантиқро илова кард. Китобхонаҳо кӯмак карданд, аммо онҳо бештар ба қуттиҳои сиёҳ монанд буданд, ки ман ба ҷои он ки дар паси парда чӣ рӯй дода истодаам, пурра дарк кунам. Ин буд, ки маро водор кард, ки ба API-и навтари Popover назар кунам. Ман мехостам бубинам, ки агар ман як асбоби ягонаро бо истифода аз модели аслии браузер бе кӯмаки китобхона аз нав барқарор кунам, чӣ мешавад. Вақте ки мо оғоз мекунем, бояд қайд кард, ки мисли ҳама гуна хусусияти нав, дар он баъзе чизҳое ҳастанд, ки ҳоло ҳам дарзмол карда мешаванд. Гуфта мешавад, ки он дар айни замон аз дастгирии бузурги браузер бархурдор аст, гарчанде ки дар API-и умумӣ якчанд қисмҳо мавҷуданд, ки дар ҳоли ҳозир ҳастанд. Дар айни замон ба Каниус нигоҳ кардан лозим аст. Маслиҳати "Кӯҳна" Пеш аз API Popover, истифодаи китобхонаи асбобҳо миёнабур набуд. Ин пешфарз буд. Браузерҳо мафҳуми аслии маслиҳати абзорро надоштанд, ки дар муш, клавиатура ва технологияи ёрирасон кор мекард. Агар шумо дар бораи дурустӣ ғамхорӣ мекардед, ягона роҳи шумо истифодаи китобхона буд ва ман маҳз ҳамин тавр кардам. Дар сатҳи баланд, намуна ҳамеша якхела буд: унсури триггер, унсури маслиҳати пинҳонӣ ва JavaScript барои ҳамоҳангсозии ин ду.
Китобхона ноқилҳоро идора мекард, ки ба элемент имкон медиҳад, ки дар кунҷ ё фокус нишон дода шавад, дар норавшанӣ ё тарки муш пинҳон шавад ва дар ҳаракат тағир дода шавад.
Бо гузашти вақт, нӯги асбоб метавонад нозук гардад. Тағйироти хурд хатарро ба бор овард. Ислоҳи ночиз боиси регрессия гардид. Бадтараш, илова кардани маслиҳатҳои нав ҳамон мураккабиро мерос гирифт. Чизҳо аз ҷиҳати техникӣ кор мекарданд, аммо ҳеҷ гоҳ худро ҳалшуда ё пурра ҳис намекарданд. Вақте ки ман тасмим гирифтам, ки маслиҳати абзорро бо истифода аз API-и аслии браузер аз нав созам, ин вазъият буд. Лаҳзае, ки ман API-и Popover-ро санҷидам Ман ба истифодаи 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 ва як қисми зиёди дастрасӣ ҳоло аз худи платформа меояд, на аз JavaScript-и муваққатӣ. Ин маънои онро надорад, ки китобхонаҳои асбобҳо кӯҳна шудаанд, зеро онҳо то ҳол барои системаҳои мураккаби тарроҳӣ, мутобиқсозии вазнин ё маҳдудиятҳои меросӣ маъно доранд, аммо пешфарз иваз шудааст. Бори аввал соддатарин маслиҳати абзор низ метавонад дурусттарин бошад. Агар шумо кунҷкоб бошед, ин таҷрибаро санҷед: Танҳо як маслиҳатро дар маҳсулоти худ бо API-и Popover иваз кунед, ҳама чизро аз нав нанависед, тамоми системаро интиқол надиҳед ва танҳо якеро интихоб кунед ва бубинед, ки аз коди шумо чӣ нопадид мешавад. Вақте ки платформа ба шумо ибтидоии беҳтар медиҳад, бурд на танҳо сатрҳои камтари JavaScript аст, балки он чизест, ки шумо бояд дар бораи он хавотир шавед. Рамзи пурраи сарчашмаро дар репои GitHub-и ман санҷед. Хониши минбаъда Барои ғарқ кардани амиқтар ба popovers ва API-ҳои алоқаманд:
"Поппин дар", Ҷефф Грэм Зел Лиев, "Тавшан кардани робитаи байни поповерҳо ва диалогҳо" "Popover = ишора чист?", Уна Кравец "Фармонҳои даъваткунанда", Даниел Шварц "Сохтани огоҳии худкор бо HTML Popover", Preethi UI Popover API Explainer -ро кушоед Ҷон Риа, "Пуфакҳо поп (боло)" "Ҷойгиркунии лангари CSS", Хуан Диего Родригес
MDN инчунин ҳуҷҷатҳои техникии ҳамаҷонибаи Popover API-ро пешниҳод мекунад.
