@n3/react-vision-panel
v0.2.0
Published
Vision panel for react applications
Downloads
45
Keywords
Readme
@n3/react-vision-panel
Панель для переключения настроек версии для слабовидящих
Установка
yarn add react react-dom @n3/react-vision-panel
Также требуется подключить стили
import '@n3/react-vision-panel/dist/vision-panel.css';
Использование
Стандартный вариант
Если используется вне react-приложения:
import { openSettingsModal } from '@n3/react-vision-panel';
...
button.onclick = () => {
openSettingsModal();
};
Если используется в react-приложнии (аналогично Modal
из react-bootstrap
):
import { SettingsModal } from '@n3/react-vision-panel';
...
<SettingsModal
show={show}
onHide={onHide}
/>
В результате отображается модальное окно настроек. При изменении какого-то значения элементу <body>
добавляется класс вида n3__wcag__<property>_<value>
, например, n3__wcag__fontsize_large
, а также в куки добавляется n3__wcag__<property>=<value>
.
Варианты css-классов body
:
n3__wcag__color_black
n3__wcag__color_white
n3__wcag__color_blue
n3__wcag__kerning_small
n3__wcag__kerning_average
n3__wcag__kerning_large
n3__wcag__fontsize_small
n3__wcag__fontsize_average
n3__wcag__fontsize_large
n3__wcag__images_on
n3__wcag__images_off
Варианты куков:
n3__wcag__color = black | white | blue
n3__wcag__kerning = small | average | large
n3__wcag__fontsize = small | average | large
n3__wcag__images = on | off
Важно!
При инициализации css-классы не добавляются к body
автоматически. Для добавления с помощью javascript
можно использовать следующий код:
import {
defaultSetBodyClass,
defaultGetSettings,
} from '@n3/react-vision-panel';
const settings = defaultGetSettings();
Object.keys(settings)
.forEach((property) => {
defaultSetBodyClass(property, settings[property]);
});
Кастомизация
Кастомные групп опций
Группы опций представ
openSettingsModal({
groups,
});
или
<SettingsModal
show={show}
onHide={onHide}
groups={groups}
/>
groups
представляется массивом объектов вида
{
label: string;
property: string;
initial: string;
options: {
label: string;
value: string;
}[];
renderButton?: Function;
}
Пример добавления кастомного свойства с использованием существующих свойств:
import {
openSettingsModal,
kerning,
fontSize,
images,
color,
} from '@n3/react-vision-panel';
openSettingsModal({
groups: [
kerning,
fontSize,
images,
color,
{
label: 'Кастомное свойство',
property: 'custom',
initial: 'value1',
options: [
{
label: '1',
value: 'value1',
},
{
label: '2',
value: 'value2',
},
{
label: '3',
value: 'value3',
},
],
},
],
})
Кастомные кнопки опций
При стандартном использовании можно увидеть, что кнопки переключения цвета отличаются от остальных кнопок. Это можно реализовать с помощью свойства renderButton
у группы опций. На входе оно принимает объект вида:
{
onClick: Function;
isSelected: boolean;
label: string;
value: string;
className: string;
}
На выходе должно вернуть react-компонент.
Изменение названий куков
import {
defaultGroups,
defaultSetBodyClass,
baseSetCookie,
baseGetSettings,
openSettingsModal,
} from '@n3/react-vision-panel';
const cookiePrefix = 'MyCustomCookie';
const makePropertyPrefix = (prefix, property) => `${prefix}_:)_${property}`;
const setCookie = (property, value) => {
baseSetCookie(cookiePrefix, makePropertyPrefix, property, value);
};
const getSettings = () => baseGetSettings(cookiePrefix, makePropertyPrefix, defaultGroups);
const applySetting = (property, value) => {
defaultSetBodyClass(property, value);
setCookie(property, value);
};
openSettingsModal({
getSettings,
applySetting,
});
Использование localStorage вместо куков
import {
defaultGroups,
defaultSetBodyClass,
openSettingsModal,
} from '@n3/react-vision-panel';
const getSettings = () => defaultGroups.reduce((res, { property, initial }) => {
const value = localStorage[`PROPERTY_${property}`];
res[property] = value || initial;
return res;
}, {});
const applySetting = (property, value) => {
defaultSetBodyClass(property, value);
localStorage[`PROPERTY_${property}`] = value;
};
openSettingsModal({
getSettings,
applySetting,
});
Изменение текстов кнопок
import {
openSettingsModal,
} from '@n3/react-vision-panel';
openSettingsModal({
restoreButtonText: 'Обычная версия',
closeButtonText: 'Закрыть',
});
Присвоение классов html-элементу вместо body
import {
openSettingsModal,
defaultSetHTMLClass,
defaultSetCookie,
} from '@n3/react-vision-panel';
const applySetting = (property, value) => {
defaultSetHTMLClass(property, value);
defaultSetCookie(property, value);
};
openSettingsModal({
applySetting,
});