Кеңештер сизде боло турган эң кичинекей UI көйгөйү сыяктуу сезилет. Алар кичинекей жана адатта жашырылган. Кимдир бирөө аны кантип курууну сураганда, салттуу жооп дээрлик дайыма JavaScript китепканасын колдонуп келет. Жана узак убакыт бою бул акылга сыярлык кеңеш болду. Мен да анын артынан бардым. Сыртынан караганда, кеңеш жөнөкөй. Чычканды алып келиңиз же элементке көңүл буруңуз, кандайдыр бир текст камтылган кичинекей кутучаны көрсөтүп, андан кийин колдонуучу алыстаганда аны жашырыңыз. Бирок сиз аны чыныгы колдонуучуларга жөнөткөндөн кийин, четтери көрүнүп баштайт. Баскычтоп колдонуучулары триггерге өтүшөт, бирок курал үчүн кеңешти эч качан көрбөйсүз. Экрандагы окурмандар аны эки жолу жарыялашат же такыр билдирбейт. Чычканды өтө тез кыймылдатканыңызда инструменттин учтары жылтылдайт. Ал кичинекей экрандарда мазмунду кайталайт. Esc басуу аны жаппайт. Фокус жоголот. Убакыттын өтүшү менен менин куралдын коду мен чындап ээлик кылгым келбеген нерсеге айланды. Окуянын угармандары чогулду. Hover жана фокус өзүнчө каралышы керек болчу. Сырткы чыкылдатуулар өзгөчө учурларды талап кылат. ARIA атрибуттарын кол менен синхрондоштуруу керек болчу. Ар бир кичинекей оңдоо логиканын дагы бир катмарын кошту. Китепканалар жардам берди, бирок алар көшөгө артында эмне болуп жатканын толук түшүнүүнүн ордуна мен иштеп жүргөн кара кутуларга окшош эле. Бул мени жаңы Popover APIди кароого түрттү. Мен китепкананын жардамысыз браузердин түпнуска моделин колдонуп, бир инструментти кайра курсам эмне болорун көргүм келди. Биз баштаганда, белгилей кетүү керек, ар кандай жаңы функциялар сыяктуу эле, аны менен дагы деле чечилип жаткан кээ бир нерселер бар. Айтор, учурда ал браузердин мыкты колдоосуна ээ, бирок жалпы APIде бир нече бөлүкчөлөр бар. Бул ортодо Caniuse көз салып турууга арзырлык. "Эски" курал Popover API'ге чейин куралдардын китепканасын колдонуу жарлык эмес болчу. Бул демейки болчу. Браузерлерде чычкан, клавиатура жана жардамчы технологиялар боюнча иштеген инструменттин түп нускасы болгон эмес. Эгер сиз тууралыкты ойлосоңуз, сиздин жалгыз вариантыңыз китепкананы колдонуу болчу, мен дал ушундай кылдым. Жогорку деңгээлде үлгү ар дайым бирдей болгон: триггер элементи, жашыруун инструменттин элементи жана экөөнү координациялоо үчүн JavaScript.
Китепкана элементти сыдырганда же фокуста көрсөтүүгө, бүдөмүк же чычкан калтырганда жашырууга жана жылдырууда ордун өзгөртүүгө/өлчөмүн өзгөртүүгө мүмкүндүк берген зымдарды иштеткен.
Убакыттын өтүшү менен куралдын учтары морт болуп калышы мүмкүн. Кичинекей өзгөрүүлөр тобокелдикке алып келди. Майда оңдоолор регрессияга алып келди. Андан да жаманы, жаңы кеңештерди кошуу да ошол эле татаалдыкты мурастап калган. Иштер техникалык жактан иштеди, бирок эч качан чечилген же толук сезилген эмес. Браузердин түпнуска Popover API'син колдонуп, куралдардын кеңешин кайра курууну чечкенде ушундай абал болду. Мен Popover API аракет кылган учурум Мен Popover API колдонууга өткөн жокмун, анткени мен жаңы нерсени эксперимент кылгым келди. Мен которуштум, анткени мен инструменттердин жүрүм-турумун сактоодон чарчагандыктан, браузер буга чейин эле түшүнөт деп ойлодум. Мен башында ишенбедим. Көпчүлүк жаңы веб API'лер жөнөкөйлүктү убада кылат, бирок дагы эле сиз качууга аракет кылган татаалдыкты акырындык менен кайра жаратуучу клейди, чет-жакаларды иштетүүнү же кошумча логиканы талап кылат. Ошентип, мен Popover API'ни мүмкүн болгон эң кичинекей жол менен сынап көрдүм. Бул кандай көрүндү:
менен байланышты түзөт
катары башкарат
1. Баскычтоп "Жөн эле иштейт" Баскычтоптун колдоосу бир нече катмардын туура тизилишине жараша болгон: фокус куралдын кеңешин иштетиши керек, бүдөмүктүктү жашырышы керек, Esc кол менен зымдуу туташтырылышы керек жана убакыт маанилүү. Эгер сиз бир чети капталын өткөрүп жиберсеңиз, кеңеш көпкө чейин ачык бойдон калат же окулгуча жок болуп калат. Popover атрибуту автоматтык түрдө же кол менен орнотулганда, браузер негизги нерселерди кабыл алат: Tab жана Shift+Tab кадимкидей иштешет, Esc ар бир жолу инструментти жабат жана кошумча угуучулар талап кылынбайт.
Менин коддук базамдан глобалдык баскычтарды иштетүүчүлөр, Esc үчүн атайын тазалоо логикасы жана клавиатурада навигация учурунда абалды текшерүүлөр жок болду. Баскычтоп тажрыйбасы мен сактай турган нерсе болбой калды жана ал браузердин кепилдиги болуп калды. 2. Экранды окуунун алдын ала айтуу мүмкүнчүлүгү Бул болгонэң чоң жакшыртуу. ARIA кылдат иштесе дагы, мен жогоруда айткандай, жүрүм-туруму ар түрдүү болгон. Ар бир кичинекей өзгөртүү коркунучтуу сезилди. Тийиштүү ролу менен поповерди колдонуу, эмне болоорун бир топ туруктуу жана алдын ала айтууга болот:
Бул жерде дагы бир жеңиш: которуштуруудан кийин, Маяк өз ара аракеттенүү үчүн туура эмес ARIA абалын эскертүүнү токтотту, анткени мен кокусунан жаңылып калышым үчүн ARIA ыңгайлаштырылган штаттары жок.
3. Фокусту башкаруу Фокус мурда морт болчу. Буга чейин менде төмөнкүдөй эрежелер бар болчу: фокус триггер инструменттин кеңешин көрсөтсүн, фокусту инструменттин кеңешине жылдырыңыз жана жаппаңыз, өтө жакын болгондо триггерди бүдөмүктөңүз жана куралдын кеңешин жаап, фокусту кол менен калыбына келтириңиз. Бул иштебей калганга чейин иштеди. Popover API менен, серепчи жөнөкөй моделди ишке ашырат, мында фокус табигый түрдө поповерге жыла алат. Поповерди жабуу фокусту триггерге кайтарат жана көзгө көрүнбөгөн фокус тузактары же жоголгон фокус учурлары болбойт. Жана мен фокус калыбына келтирүү кодун кошкон жокмун; Мен аны алып салдым.
Корутунду Popover API инструментарий кеңештери мындан ары сиз окшоштурган нерсе эмес экенин билдирет. Алар браузер түшүнгөн нерсе. Ачуу, жабуу, баскычтоптун жүрүм-туруму, Escape менен иштөө жана жеткиликтүүлүктүн чоң бөлүгү эми атайын JavaScriptтен эмес, платформанын өзүнөн келип чыгат. Бул куралдардын китепканалары эскирген дегенди билдирбейт, анткени алар дагы эле татаал дизайн системалары, оор ыңгайлаштыруу же эски чектөөлөр үчүн мааниси бар, бирок демейки өзгөрдү. Биринчи жолу эң жөнөкөй курал кеңеши эң туурасы болушу мүмкүн. Эгер сизди кызыктырсаңыз, бул экспериментти байкап көрүңүз: Продуктуңуздагы бир эле кеңешти Popover API менен алмаштырыңыз, баарын кайра жазбаңыз, бүтүндөй системаны көчүрбөңүз жана жөн гана бирөөсүн тандап, кодуңуздан эмне жоголуп жатканын көрүңүз. Платформа сизге жакшыраак примитивди бергенде, утуш JavaScript'тин азыраак саптары эмес, бирок сиз тынчсыздана турган нерселер азыраак болот. Менин GitHub реподагы толук баштапкы кодду текшериңиз. Андан ары окуу Поповерлерге жана ага байланыштуу API'лерге тереңирээк сүңгүү үчүн:
"Поппин' In", Джефф Грэм "Поповерлер менен диалогдордун ортосундагы мамилени тактоо", Зелл Лиев "Popover = ишарат деген эмне?", Уна Кравец "Инвокер буйруктары", Даниел Шварц "HTML Popover менен Автоматтык жабуу эскертмесин түзүү", Preethi UI Popover API түшүндүрмөсүн ачыңыз Джон Риа, "Аба шарлары" "CSS Anchor Positioning", Хуан Диего Родригес
MDN ошондой эле Popover API үчүн комплекстүү техникалык документтерди сунуштайт.
