gatsby-plugin-colorblind-filters/gatsby-browser.js

Color blindness simulation for Gatsby sites

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

exports.__esModule = true;
exports.wrapPageElement = exports.onInitialClientRender = void 0;

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactDom = require("react-dom");

var _createColorblindFilters = _interopRequireDefault(require("./createColorblindFilters"));

var _constants = require("./constants");

const onInitialClientRender = () => {
  (0, _createColorblindFilters.default)();
};

exports.onInitialClientRender = onInitialClientRender;
const filterTypes = ['none', ..._constants.colorblindFilterTypes];

function Display({
  toggleKey,
  zIndex
}) {
  const [filter, setFilter] = (0, _react.useState)(filterTypes[0]);
  const [isActive, setIsActive] = (0, _react.useState)(false);
  const controlNode = (0, _react.useRef)();
  (0, _react.useEffect)(() => {
    controlNode.current = document.createElement('div');
    document.body.appendChild(controlNode.current);
  }, []);
  (0, _react.useEffect)(() => {
    const onKeyDown = e => {
      e.key === toggleKey && setIsActive(true);
      isActive && setFilter(filter => filterTypes[e.key] || filter);
    };

    const onKeyUp = e => {
      e.key === toggleKey && setIsActive(false);
    };

    window.addEventListener('keydown', onKeyDown);
    window.addEventListener('keyup', onKeyUp);
    return () => {
      window.removeEventListener('keydown', onKeyDown);
      window.removeEventListener('keyup', onKeyUp);
    };
  }, [isActive, toggleKey]);
  (0, _react.useEffect)(() => {
    document.documentElement.setAttribute(_constants.dataAttribute, filter);
  }, [filter]);
  return _react.default.createElement(_react.default.Fragment, null, isActive && (0, _reactDom.createPortal)(_react.default.createElement("div", {
    style: {
      backgroundColor: '#fff',
      borderRadius: 4,
      boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
      fontSize: 18,
      position: 'fixed',
      top: 8,
      right: 8,
      zIndex
    }
  }, _react.default.createElement("div", {
    style: {
      padding: '0.5rem 1rem',
      textTransform: 'capitalize'
    }
  }, filter)), controlNode.current));
}

Display.propTypes = {
  toggleKey: _propTypes.default.string.isRequired,
  zIndex: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired
};

const wrapPageElement = ({
  element
}, {
  toggleKey = 'p',
  zIndex = 999
} = {}) => _react.default.createElement(_react.default.Fragment, null, element, _react.default.createElement(Display, {
  toggleKey: toggleKey.toLowerCase(),
  zIndex: zIndex
}));

exports.wrapPageElement = wrapPageElement;