@n3/react-vision-panel NPM

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

@babel/runtime @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome classnames prop-types react-overlays tiny-cookie

@infinitebrahmanuniverse/nolb-_n3 @everything-registry/sub-chunk-631

2 years ago

5 years ago

5 years ago

5 years ago