How to count number of clicks on increase fonts button in accessibility bar?

Question

I am creating an accessibility bar and in it has the options to increase and decrease the source. Follow the button code:

<button type="button" id="btnAumentar">A+</button>
<button type="button" id="btnDiminuir">A/</button>

And the jquery code.

var $btnAumentar = $("#btnAumentar");
var $btnDiminuir = $("#btnDiminuir");
var $elemento = $("body .content-center").find("*"); //encontra todos os elementos dentro do #content
var fonts = [];

function obterTamanhoFonte() {
  for (var i = 0; i < $elemento.length; i++) {
    fonts.push(parseFloat($elemento.eq(i).css('font-size')));
  }
}
obterTamanhoFonte();
$btnAumentar.on('click', function() {
  for (var i = 0; i < $elemento.length; i++) {
    ++fonts[i];
    $elemento.eq(i).css('font-size', fonts[i]);
  }
});

$btnDiminuir.on('click', function() {
  for (var i = 0; i < $elemento.length; i++) {
    --fonts[i];
    $elemento.eq(i).css('font-size', fonts[i]);
  }
});

However the user can increase as much as he wants the sources, and or decrease. I would like to limit these clicks to 3, but relative to each other, with a total of 6 font sizes, if it is at the maximum size you can press to decrease 6x for example and vice versa. Someone can help me? =)

Answer 1

In my opinion a good approach to the problem would be involving CSS, more specifically relative size units em and rem. When applied to font-size it relates to the font-size of the preceding elements.

Utilize em as a unit of size font-size of the elements that will be changed and let the font-size of body (or some parent element) regulate the size of all these elements.

You can define specific sizes with classes:

var $section = $('#content')

$('#fonte-menor').on('click', function () {
  $section.removeClass('fonte-grande').addClass('fonte-pequena');
});

$('#fonte-maior').on('click', function () {
  $section.removeClass('fonte-pequena').addClass('fonte-grande');
});

$('#fonte-normal').on('click', function () {
  $section.removeClass('fonte-grande fonte-pequena');
});

#content {
  font-size: 16px;
}

#content.fonte-pequena {
  font-size: 12px;
}

#content.fonte-grande {
  font-size: 20px;
}

#content p {
  font-size: 1em;
}

#content h1 {
  font-size: 1.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button id="fonte-menor">A-</button>
<button id="fonte-normal">A</button>
<button id="fonte-maior">A+</button>


<section id="content">
  <h1>Título</h1>
  <p>Lorem ipsum dolor sit amet, deleniti perpetua splendide vim an, cu sapientem democritum qui. Vim in nobis exerci accommodare. Ea duo minim erant mediocritatem, mea ne maiestatis interpretaris. Nec ne latine habemus scripserit.</p>
  <p>Mei no euismod fabellas theophrastus, exerci aeterno ancillae his et. Regione consulatu et est, cu pri tempor eirmod. Vide phaedrum atomorum per te. Meliore insolens scripserit quo ex, cu agam causae aliquid mei, nisl dicta nullam ei his.</p>
  <p>Et omittam splendide mea, te dico postea oporteat sea, duo nulla consul conclusionemque cu. In mel utinam ullamcorper, erant soleat usu ad, wisi semper et vim. Usu quem veritus iudicabit ex. Ne utamur aeterno accusamus eum, vis ei tantas mediocrem adipiscing. Sea possit tibique ne. Vis appetere vituperatoribus id, audire recteque vis ut.</p>
</section>

---

Or by assigning directly to the property font-size of the parent element:

function alteraTamanhoFonte(incremento) {
  var $section = $('#content');
  var max = 20;
  var min = 12;
  
  return function () {
    var tamanho_atual = parseInt($section.css('font-size'), 10);
    var novo_tamanho = tamanho_atual + incremento;
    
    if (novo_tamanho < min || novo_tamanho > max) {
        return;
    }
  
    $section.css('font-size', novo_tamanho);
  }
}

$('#aumentar-fonte').on('click', alteraTamanhoFonte(1));
$('#diminuir-fonte').on('click', alteraTamanhoFonte(-1));

#content {
  font-size: 16px;
}

#content p {
  font-size: 1em;
}

#content h1 {
  font-size: 1.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button id="diminuir-fonte">A-</button>
<button id="aumentar-fonte">A+</button>

<section id="content">
  <h1>Título</h1>
  <p>Lorem ipsum dolor sit amet, deleniti perpetua splendide vim an, cu sapientem democritum qui. Vim in nobis exerci accommodare. Ea duo minim erant mediocritatem, mea ne maiestatis interpretaris. Nec ne latine habemus scripserit.</p>

  <p>Mei no euismod fabellas theophrastus, exerci aeterno ancillae his et. Regione consulatu et est, cu pri tempor eirmod. Vide phaedrum atomorum per te. Meliore insolens scripserit quo ex, cu agam causae aliquid mei, nisl dicta nullam ei his.</p>

  <p>Et omittam splendide mea, te dico postea oporteat sea, duo nulla consul conclusionemque cu. In mel utinam ullamcorper, erant soleat usu ad, wisi semper et vim. Usu quem veritus iudicabit ex. Ne utamur aeterno accusamus eum, vis ei tantas mediocrem adipiscing. Sea possit tibique ne. Vis appetere vituperatoribus id, audire recteque vis ut.</p>
</section>

Answer 2

Create a map for sizes:

    var mapa = new Object();
    mapa[fonte1] = tamanhoX;
    mapa[fonte2] = tamanhoY;

    function obterTamanho(fonte) {
        return mapa[fonte];
    }

if(obterTamanho(fonte)==null){
//inserir tamanho original
     mapa[fonte]=1;
}else{
     var tam = obterTamanho(fonte);
     if(tam<6){
       tam++;
       mapa[fonte]=tam;

     }else{
        //tamanho maximo atingido
     }

}

Create a control using the map.

Answer 3

//Função de contar numero de clicks para desativar o botao  
var countA = 0;
$('#btnAumentar').click( function() {
    countA++;
    if(countA == 3) {
        $('#btnAumentar').prop("disabled", true);
    }
    if($('#btnDiminuir').prop( "disabled" ))  {
        $('#btnDiminuir').prop("disabled", false);
    }    
});    
$('#btnDiminuir').click( function() {
               countA--;
    if(countA == -3) {
        $('#btnDiminuir').prop("disabled", true);
    }

    if($('#btnAumentar').prop( "disabled" ))  {
        $('#btnAumentar').prop("disabled", false);
    }    
}); 

This function I used to count the clicks and deactivate the buttons, then I use another to control the font size. more thanks for the help ;)