Создавая функцию автофокуса для наших компонентов, мы смогли улучшить их API. Посмотрим, как мы этого добились с помощью модификатора {{autofocus}}.
Приглашение нового админа в аккаунт компании, создание новой карты, оформление перевода. Все эти действия являются конфиденциальными и должны быть подтверждены пользователем. Для их подтверждения требуется ввести одноразовый пароль из текстового сообщения. Как необанк, безопасность лежит в основе того, что мы делаем в Qonto, но мы не должны допустить, чтобы это ухудшало качество обслуживания. Вот почему мы хотим автофокусировать этот ввод.
Упростите действие подтверждения
Давайте автоматически сконцентрируемся на вводе одноразового пароля. Чтобы предоставить пользователю указание и отправную точку, чтобы он мог легко подтвердить свое действие.
Это не единственное использование такого поведения автофокуса. В другом одном из наших веб-приложений мы запрашиваем у пользователя адрес электронной почты, чтобы начать процесс регистрации. Электронная почта - это единственная релевантная информация на странице. В этом случае мы также хотим, чтобы ввод был сфокусирован на отображении.
Наш ввод одноразового пароля и ввод электронной почты являются двумя компонентами. Но это не совсем один и тот же компонент.
Эта функция автофокуса должна быть реализована в нескольких компонентах, распределенных между двумя приложениями. Вопрос в том, как нам делиться кодом?
Переход к лучшим API для наших компонентов
Один из вариантов - использовать миксины, но миксины больше не рекомендуются в экосистеме Ember (1). К счастью, у нас есть новая функция в Ember для совместного использования кода между компонентами, аналогичная директивам в модификаторах Vue или Angular: Ember.
С помощью модификатора мы можем применить модификацию к элементу DOM с функцией или классом. Это позволяет нам использовать такой компонент, обратите внимание на часть {{autofocus}}
:
<OTPInput
@label="Confirmation Code"
@value={{this.confirmationCode}}
{{on "update" this.updateCode}}
{{autofocus}}
/>
Модификаторы - это функция, запланированная в следующем (и первом!) Ember Edition (2). В настоящее время с этой функцией проводятся эксперименты в стороннем пакете: https://github.com/ember-modifier/ember-modifier.
Если вы хотите подробнее узнать о модификаторах, вы можете посмотреть этот связанный пост в блоге.
Итерация №1
Упрощенная версия нашего модификатора будет:
import { modifier } from 'ember-modifier';
export default modifier(function autofocus(element) { element.focus(); });
Простой.
Итерация # 2
Давайте сделаем это немного сложнее и автофокусируем первый неотключенный вход - если он существует:
import { modifier } from 'ember-modifier';
export default modifier(function autofocus(element) { let childElement = element.querySelector('input:not([disabled])');
if (childElement) { childElement.focus(); } else { element.focus(); } });
Итерация # 3
Последняя итерация, пусть наш модификатор поддерживает использование селектора в качестве параметра:
<ConfirmationModal {{autofocus "#confirm-button"}}>
Здесь мы используем позиционные параметры, которые мы можем получить в нашей функции-модификаторе в виде массива во втором параметре. Наш модификатор автофокуса становится таким:
import { modifier } from 'ember-modifier';
export default modifier(function autofocus(element, [selector = 'input:not([disabled])']) { let childElement = element.querySelector(selector);
if (childElement) { childElement.focus(); } else { element.focus(); } });
И мы можем использовать его, чтобы установить фокус на кнопку закрытия информативного модального окна.
Вывод: воспользуемся этим кодом
Код заключен в небольшой аддон: ember-autofocus-modifier. Вы можете использовать его как есть. Или вы можете скопировать код и поэкспериментировать с созданием собственного модификатора.
Благодаря этой работе мы можем делиться кодом между несколькими приложениями. Мы сохраняем согласованность некоторых реализаций при распространении.
Чтобы установить аддон, выполните команду yarn add -D ember-autofocus-modifier
(или npm install --save-dev ember-autofocus-modifier
). Тогда в ваших шаблонах доступен модификатор {{autofocus}}
.
Спасибо за прочтение!
(1) о том, почему миксины больше не рекомендуются: https://github.com/emberjs/rfcs/issues/534
(2) вы не знаете, что такое Ember Edition? Https://emberjs.com/editions/