ContrastBar.js

/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana

This file is part of Plataforma Integrada MEC.

Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/

import React from 'react';
import './ContrastBar.css';
import ContrastImageOn from '../../img/OnContrastIcon.png';
import ContrastImageOff from '../../img/OffContrastIcon.png';
import { Store } from '../../Store';

/**
 * Bar allowing for the toggle of the high contrast mode on the page.
 */
function ContrastBar() {
  /* eslint-disable */

  // Hook to set contrast context
  const { state, dispatch } = React.useContext(Store);


  const setContrastAction = (newContrast) => {
    console.log(newContrast)
    return dispatch({
      type: 'SET_CONTRAST',
      payload: newContrast
    })
  }

  const setFontSizeAction = (newFontSize) => {
    return dispatch({
      type: 'SET_FONT_SIZE',
      payload: newFontSize
    })
  }

  React.useEffect(() => { }, [state]);

  const toggleContrast = () => {
    var status = (state.contrast === '' ? 'Contrast' : '')
    setContrastAction(status)
  }
  const incrementFontSize = () => {
    document.getElementsByTagName("body")[0].style.fontSize = (parseInt(state.fontSize, 10) + 1) + "px";
    setFontSizeAction(parseInt(state.fontSize, 10) + 1);
  }
  const decrementFontSize = () => {
    document.getElementsByTagName("body")[0].style.fontSize = (parseInt(state.fontSize, 10) - 1) + "px";
    setFontSizeAction(parseInt(state.fontSize, 10) - 1);
  }
  const defaultFontSize = () => {
    setFontSizeAction(15);
    document.getElementsByTagName("body")[0].style.fontSize = "15px";
  }

  return (
    <React.Fragment>
      <div className={`${state.contrast}bar`}>
        <div className='textLeft hide-on-small-and-down'>
          <a className={`${state.contrast}text`} accessKey="1" href="#conteudo" title="Ir para o conteúdo alt + 1">
            Conteúdo 1
          </a>
          <a className={`${state.contrast}text`} accessKey="2" href="#menu" title="Ir para o menu alt + 2">
            Menu 2
        </a>
          <a className={`${state.contrast}text`} accessKey="3" href="#rodape" title="Ir para o rodapé alt + 3">
            Rodapé 3
        </a>
        </div>
        <div className='textRight'>
          <div>
            <a className={`${state.contrast}text`} onClick={incrementFontSize} title="Aumentar tamanho da fonte">
              A+
          </a>
            <a className={`${state.contrast}text`} onClick={decrementFontSize} title="Diminuir tamanho da fonte">
              A-
          </a>
            <a className={`${state.contrast}text`} onClick={defaultFontSize} title="Restaurar tamanho da fonte">
              A
          </a>
          </div>
          <div onClick={toggleContrast}>
            <a className={`${state.contrast}text`} title="Ativar modo de alto contraste">
              <img src={state.contrast === '' ? ContrastImageOff : ContrastImageOn} style={{ marginRight: 5 }} alt="ContrastIcon" width="11" height="11" />
            Contraste
          </a>
          </div>

        </div>
      </div>
    </React.Fragment>
  );

}

export default ContrastBar;