JS компонент создания подписи (ui.sign-up)

Продолжая рубрику "документация JS расширений Битрикс" - представляю компонент для создания подписи 🙌

Существуют три способа создания подписи:

1. Создать от имени

2. Подписать рукой

3. Загрузить фото

Подключение

\Bitrix\Main\UI\Extension::load('ui.sign-up');

Параметры

Расширение находится в пространстве имен BX.UI.SignUp и является классом, который принимает такие параметры

SignUpOptions = {
	value?: {
		src?: string,
		initials?: {
			firstName: string,
			lastName: string,
		},
	},
	defaultState?: 'initials' | 'touch' | 'image',
	mode: 'mobile' | 'desktop',
	events?: {
		onSaveClick?: (event: BaseEvent) => void,
		onSaveClickAsync?: (event: BaseEvent) => Promise,
		onCancelClick?: (event: BaseEvent) => void,
	},
	signColor?: string | null,
};

Методы

// Основные методы

// Рендер формы в HTML элемент
renderTo(target: HTMLElement);

// Тут и так понятно :)
hasValue(): boolean

// Получение подписи. Выбирает подпись из активного таба
async getValue(): Promise

// Другие методы, с которыми можно экспериментировать
// Подробнее посмотреть тут - /bitrix/js/ui/sign-up
getOptions(): SignUpOptions
getFooter(): Footer
getLayout(): HTMLDivElement
getInitialsContent(): InitialsContent
getTouchContent(): TouchContent
getPhotoContent(): PhotoContent
getTabs(): Tabs
getCanvas(): HTMLCanvasElement
onChangeDebounced()

Быстрое подключение

<div id="signup"></div>
<script>
	let signup = new BX.UI.SignUp({
		events: {
			onSaveClick: (event) => {
				//todo
			}
		}
	});
	signup.renderTo(BX('signup'));
</script>

Живой пример