npm package: @n3/react-vision-panel
Description: Vision panel for react applications
Author: Vadim Taits
Latest version: 0.2.0

# @n3/react-vision-panel

Панель для переключения настроек версии для слабовидящих

## Установка

```
yarn add react react-dom @n3/react-vision-panel
```

Также требуется подключить стили

```
import '@n3/react-vision-panel/dist/vision-panel.css';
```

## Использование

### Стандартный вариант

Если используется вне react-приложения:

```javascript
import { openSettingsModal } from '@n3/react-vision-panel';

...

button.onclick = () => {
  openSettingsModal();
};
```

Если используется в react-приложнии (аналогично `Modal` из `react-bootstrap`):

```javascript
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]);
  });
```

### Кастомизация

#### Кастомные групп опций

Группы опций представ

```javascript
openSettingsModal({
  groups,
});
```

или

```javascript
<SettingsModal
  show={show}
  onHide={onHide}
  groups={groups}
/>
```

`groups` представляется массивом объектов вида

```
{
  label: string;
  property: string;
  initial: string;

  options: {
    label: string;
    value: string;
  }[];

  renderButton?: Function;
}
```

Пример добавления кастомного свойства с использованием существующих свойств:

```javascript
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-компонент.

#### Изменение названий куков

```javascript
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 вместо куков

```javascript
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,
});
```

#### Изменение текстов кнопок

```javascript
import {
  openSettingsModal,
} from '@n3/react-vision-panel';

openSettingsModal({
  restoreButtonText: 'Обычная версия',
  closeButtonText: 'Закрыть',
});
```

#### Присвоение классов html-элементу вместо body

```javascript
import {
  openSettingsModal,
  defaultSetHTMLClass,
  defaultSetCookie,
} from '@n3/react-vision-panel';

const applySetting = (property, value) => {
  defaultSetHTMLClass(property, value);
  defaultSetCookie(property, value);
};

openSettingsModal({
  applySetting,
});
```