docs(geradores): altera input por textarea

marcelo-lourenco · Nov 6, 2024 · 2acd98f · 2acd98f
1 parent 75eace9
commit 2acd98f
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 50 deletions.
diff --git a/README.md b/README.md
@@ -475,10 +475,13 @@ console.log(gerar.paragrafo(3,8));
 
 Contribuições são bem-vindas! Faça um *fork* do repositório e sinta-se à vontade para enviar seus *pull requests*.
 
-## Extensão Chrome - Gerador de Dados Fictícios
+## Demo
 
-Todas essas funções foram utilizadas na [Extensão Chrome - Gerador de Dados Fictícios](https://chromewebstore.google.com/detail/ipfihnddjaepajgdamecijfdefikdgam).
-Muito útil para preencher automaticamente os campos de formulários em testes manuais.
+**Essas funções foram utilizadas nas seguintes aplicações:**
+
+[Extensão Chrome - Gerador de Dados Fictícios](https://chromewebstore.google.com/detail/ipfihnddjaepajgdamecijfdefikdgam) - Muito útil para preencher automaticamente os campos de formulários em testes manuais.
+
+[Gerador-BR](https://marcelo-lourenco.github.io/gerador-br/#/gerar/cpf) - Gerador de dados on-line.
 
 ## License
 

diff --git a/docs/_coverpage.md b/docs/_coverpage.md
@@ -6,6 +6,6 @@
 
 <!-- [NPM](https://www.npmjs.com/package/gerador-br) -->
 <!-- [GitHub](https://github.com/marcelo-lourenco/gerador-br) -->
-[Home](./?id=gerador-de-dados-fictícios-brasi)
-[Gerador](gerar/cpf)
-[Get Started](inicio.md)
+[**HOME**](./ "Gerador-BR - Home")
+[**GERADORES**](geradores.md)
+[**GET STARTED**](inicio.md)
diff --git a/docs/_css/style.css b/docs/_css/style.css
@@ -52,18 +52,6 @@ button {
   padding: 20px 0 40px 0;
 }
 
-input-gerador {
-  width: 250px;
-  padding: 12px;
-  padding-right: 30px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  font-size: 16px;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  text-align: center;
-}
-
 .copiado {
   position: absolute;
   top: -10px;
@@ -82,7 +70,6 @@ input-gerador {
 }
 
 
-
 /* --------------------- */
 .form-col {
   max-width: 350px;
@@ -107,6 +94,8 @@ input-gerador {
 }
 
 /* When the input is focused, move the placeholder */
+.floating-label-textarea:focus~.floating-label,
+.floating-label-textarea:not(:placeholder-shown)~.floating-label,
 .floating-label-input:focus~.floating-label,
 .floating-label-input:not(:placeholder-shown)~.floating-label {
   top: -10px;
@@ -118,11 +107,17 @@ input-gerador {
 }
 
 /* Ensure the input has some padding to accommodate the label */
+.floating-label-textarea,
 .floating-label-input {
   padding: 10px 30px 10px 15px;
   position: relative;
 }
 
+.floating-label-textarea{
+  resize: none; /* Impede o redimensionamento manual para que o ajuste seja automático */
+  overflow: hidden; /* Remove a barra de rolagem */
+}
+
 .form-group {
   position: relative;
   margin-bottom: 1rem;

diff --git a/docs/_js/script.js b/docs/_js/script.js
@@ -1,4 +1,4 @@
-const inputFields = document.querySelectorAll('input');
+const inputFields = document.querySelectorAll('input', 'textarea');
 inputFields.forEach(inputField => {
   inputField.addEventListener('focus', function () {
     inputField.setAttribute('placeholder', ' ');
@@ -8,6 +8,11 @@ inputFields.forEach(inputField => {
   });
 });
 
+function adjustTextareaHeight(textarea) {
+  textarea.style.height = 'auto'; // Reseta a altura para calcular corretamente
+  textarea.style.height = textarea.scrollHeight + 'px'; // Define a altura baseada no conteúdo
+}
+
 function copy(inputId, messageId = 'msgCopiado') {
   const inputField = document.getElementById(inputId);
   if (inputField) {
@@ -34,6 +39,8 @@ copyButtons.forEach(button => {
 });
 
 
+
+
 function gerarEndereco() {
   const siglasEstados = [
     'AC', 'AL', 'AP', 'AM', 'BA', 'CE', 'DF', 'ES', 'GO', 'MA', 'MT', 'MS', 'MG', 'PA', 'PB', 'PR', 'PE', 'PI', 'RJ', 'RN', 'RS', 'RO', 'RR', 'SC', 'SP', 'SE', 'TO',
@@ -65,7 +72,7 @@ function gerarCartaoCredito() {
     'fldCcBandeira': cc.bandeira,
     'fldCcCvv': cc.cvv,
     'fldCcDataExpiracao':cc.dataExpiracao,
-    // FIXME está mantendo o menso nome
+    // FIXME está mantendo o mesmo nome
     'fldCcNomeTitular': cc.nomeTitular,
   };
 
@@ -104,7 +111,7 @@ function gerarBanco() {
   }
 }
 
-// FIXME está mantendo o menso nome
+// FIXME está mantendo o mesmo nome
 function gerarEmail() {
   const fields = {
     'fldEmail': email(nome.aleatorioCompleto()),

diff --git a/docs/_sidebar.md b/docs/_sidebar.md
@@ -1,34 +1,34 @@
-* [Home](./?id=gerador-de-dados-fictícios-brasi "Gerador-BR - Home")
-* [Início](inicio.md "Gerador-BR - Começar")
-* [Guia de Utilização](guia-utilizacao.md "Gerador-BR - Guia de Utilização")
+* [**HOME**](./ "Gerador-BR - Home")
+* [**INÍCIO**](inicio.md "Gerador-BR - Começar")
+* [**GUIA DE UTILIZAÇÃO**](guia-utilizacao.md "Gerador-BR - Guia de Utilização")
 
 <div style="background-color: #f0f0f0; padding: 5px">
 <h1>Geradores</h1>
 </div>
 
-* DOCUMENTOS PF
+* **DOCUMENTOS PF**
   * [Gerador de CPF](gerar/cpf.html "Gerador de CPF")
   * [Gerador de CNH](gerar/cnh.html "Gerador de CNH")
   * [Gerador de RG](gerar/rg.html "Gerador de RG")
   * [Gerador de CNS](gerar/cns.html "Gerador de Cartão Nacional Saúde")
   * [Gerador de PIS](gerar/pis.html "Gerador de PIS")
   * [Gerador de Título de Eleitor](gerar/tituloEleitor.html "Gerador de Título de Eleitor")
   * [Gerador de Passaporte](gerar/passaporte.html "Gerador de Passaporte")
-* DOCUMENTOS PJ
+* **DOCUMENTOS PJ**
   * [Gerador de CNPJ](gerar/cnpj.html "Gerador de CNPJ")
   * [Gerador de Inscrição Estadual](gerar/inscricaoEstadual.html "Gerador de Inscrição Estadual")
-* BANCOS
+* **BANCOS**
   * [Gerador de Cartão de Crédito](gerar/cartaoCredito.html "Gerador de Cartão de Crédito")
   * [Gerador de Conta Bancária](gerar/contaBancaria.html "Gerador de Conta Bancária")
   * [Gerador de Banco](gerar/banco.html "Gerador de Banco")
-* CONTATOS
+* **CONTATOS**
   * [Gerador de E-mail](gerar/email.html "Gerador de email")
   * [Gerador de CEP](gerar/cep.html "Gerador de CEP")
   * [Gerador de Endereço](gerar/endereco.html "Gerador de Endereço")
-* VEÍCULOS
+* **VEÍCULOS**
   * [Gerador de Placa Antiga](gerar/placaAntiga.html "Gerador de Placa Antiga")
   * [Gerador de Placa MERCOSUL](gerar/placaMercosul.html "Gerador de Placa MERCOSUL")
   * [Gerador de RENAVAM](gerar/renavam.html "Gerador de RENAVAM")
-* LOREM IPSUM
+* **LOREM IPSUM**
   * [Gerador de Sentenca](gerar/sentenca.html "Gerador de Sentença")
   * [Gerador de Parágrafos](gerar/paragrafo.html "Gerador de Parágrafo")
diff --git a/docs/geradores.md b/docs/geradores.md
@@ -0,0 +1,28 @@
+# Geradores
+
+* **DOCUMENTOS PF**
+  * [Gerador de CPF](gerar/cpf.html "Gerador de CPF")
+  * [Gerador de CNH](gerar/cnh.html "Gerador de CNH")
+  * [Gerador de RG](gerar/rg.html "Gerador de RG")
+  * [Gerador de CNS](gerar/cns.html "Gerador de Cartão Nacional Saúde")
+  * [Gerador de PIS](gerar/pis.html "Gerador de PIS")
+  * [Gerador de Título de Eleitor](gerar/tituloEleitor.html "Gerador de Título de Eleitor")
+  * [Gerador de Passaporte](gerar/passaporte.html "Gerador de Passaporte")
+* **DOCUMENTOS PJ**
+  * [Gerador de CNPJ](gerar/cnpj.html "Gerador de CNPJ")
+  * [Gerador de Inscrição Estadual](gerar/inscricaoEstadual.html "Gerador de Inscrição Estadual")
+* **BANCOS**
+  * [Gerador de Cartão de Crédito](gerar/cartaoCredito.html "Gerador de Cartão de Crédito")
+  * [Gerador de Conta Bancária](gerar/contaBancaria.html "Gerador de Conta Bancária")
+  * [Gerador de Banco](gerar/banco.html "Gerador de Banco")
+* **CONTATOS**
+  * [Gerador de E-mail](gerar/email.html "Gerador de email")
+  * [Gerador de CEP](gerar/cep.html "Gerador de CEP")
+  * [Gerador de Endereço](gerar/endereco.html "Gerador de Endereço")
+* **VEÍCULOS**
+  * [Gerador de Placa Antiga](gerar/placaAntiga.html "Gerador de Placa Antiga")
+  * [Gerador de Placa MERCOSUL](gerar/placaMercosul.html "Gerador de Placa MERCOSUL")
+  * [Gerador de RENAVAM](gerar/renavam.html "Gerador de RENAVAM")
+* **LOREM IPSUM**
+  * [Gerador de Sentença](gerar/sentenca.html "Gerador de Sentença")
+  * [Gerador de Parágrafos](gerar/paragrafo.html "Gerador de Parágrafos")
diff --git a/docs/gerar/_sidebar.md b/docs/gerar/_sidebar.md
@@ -1,34 +1,34 @@
-* [Home](../?id=gerador-de-dados-fictícios-brasi "Gerador-BR - Home")
-* [Início](inicio.md "Gerador-BR - Começar")
-* [Guia de Utilização](guia-utilizacao.md "Gerador-BR - Guia de Utilização")
+* [**HOME**](../ "Gerador-BR - Home")
+* [**INÍCIO**](inicio.md "Gerador-BR - Começar")
+* [**GUIA DE UTILIZAÇÃO**](guia-utilizacao.md "Gerador-BR - Guia de Utilização")
 
 <div style="background-color: #f0f0f0; padding: 5px">
   <h1>Geradores</h1>
 </div>
 
-* DOCUMENTOS PF
+* **DOCUMENTOS PF**
   * [Gerador de CPF](gerar/cpf.html "Gerador de CPF")
   * [Gerador de CNH](gerar/cnh.html "Gerador de CNH")
   * [Gerador de RG](gerar/rg.html "Gerador de RG")
   * [Gerador de CNS](gerar/cns.html "Gerador de Cartão Nacional Saúde")
   * [Gerador de PIS](gerar/pis.html "Gerador de PIS")
   * [Gerador de Título de Eleitor](gerar/tituloEleitor.html "Gerador de Título de Eleitor")
   * [Gerador de Passaporte](gerar/passaporte.html "Gerador de Passaporte")
-* DOCUMENTOS PJ
+* **DOCUMENTOS PJ**
   * [Gerador de CNPJ](gerar/cnpj.html "Gerador de CNPJ")
   * [Gerador de Inscrição Estadual](gerar/inscricaoEstadual.html "Gerador de Inscrição Estadual")
-* BANCOS
+* **BANCOS**
   * [Gerador de Cartão de Crédito](gerar/cartaoCredito.html "Gerador de Cartão de Crédito")
   * [Gerador de Conta Bancária](gerar/contaBancaria.html "Gerador de Conta Bancária")
   * [Gerador de Banco](gerar/banco.html "Gerador de Banco")
-* CONTATOS
+* **CONTATOS**
   * [Gerador de E-mail](gerar/email.html "Gerador de email")
   * [Gerador de CEP](gerar/cep.html "Gerador de CEP")
   * [Gerador de Endereço](gerar/endereco.html "Gerador de Endereço")
-* VEÍCULOS
+* **VEÍCULOS**
   * [Gerador de Placa Antiga](gerar/placaAntiga.html "Gerador de Placa Antiga")
   * [Gerador de Placa MERCOSUL](gerar/placaMercosul.html "Gerador de Placa MERCOSUL")
   * [Gerador de RENAVAM](gerar/renavam.html "Gerador de RENAVAM")
-* LOREM IPSUM
+* **LOREM IPSUM**
   * [Gerador de Sentença](gerar/sentenca.html "Gerador de Sentença")
   * [Gerador de Parágrafos](gerar/paragrafo.html "Gerador de Parágrafos")
diff --git a/docs/gerar/paragrafo.html b/docs/gerar/paragrafo.html
@@ -10,17 +10,16 @@
     <div class="row px-4 ">
       <div class="col-sm m-2 p-3 bg-body">
         <div class="form-group">
-          <!-- FIXME conveter textarea-->
-          <input type="text" class="form-control floating-label-input mb-4" disabled id="fldParagrafo" name="fldParagrafo" placeholder="">
-          <label class="form-label floating-label" for="fldParagrafo">Parágrafo</label>
+          <textarea  class="form-control floating-label-textarea mb-4" disabled id="fldParagrafo" name="fldParagrafo" placeholder=""></textarea>
+          <label class="form-label floating-label" for="fldParagrafo">Parágrafos</label>
           <i class="icon icon-16 icon-copy icon-copy-position" onclick="copy('fldParagrafo')"></i>
         </div>
-        <button onclick="document.getElementById('fldParagrafo').value = paragrafo(5,8);">
-          Gerar Parágrafo
+        <button onclick="document.getElementById('fldParagrafo').value = paragrafo(5,8); adjustTextareaHeight(fldParagrafo); ">
+          Gerar Parágrafos
         </button>
       </div>
     </div>
   </div>
 </body>
 
-</html>
+</html>
diff --git a/docs/gerar/sentenca.html b/docs/gerar/sentenca.html
@@ -9,16 +9,15 @@
     <div class="row px-4 ">
       <div class="col-sm m-2 p-3 bg-body">
         <div class="form-group">
-          <!-- FIXME conveter textarea-->
-          <input type="text" class="form-control floating-label-input mb-4" disabled id="fldSentenca" name="fldSentenca" placeholder="">
+          <textarea  class="form-control floating-label-textarea mb-4" disabled id="fldSentenca" name="fldSentenca" placeholder=""></textarea>
           <label class="form-label floating-label" for="fldSentenca">Sentença</label>
           <i class="icon icon-16 icon-copy icon-copy-position" onclick="copy('fldSentenca')"></i>
         </div>
-        <button onclick="document.getElementById('fldSentenca').value = sentenca(10);">
+        <button onclick="document.getElementById('fldSentenca').value = sentenca(10); adjustTextareaHeight(fldSentenca); ">
           Gerar Sentença
         </button>
       </div>
     </div>
   </div>
 </body>
-</html>
+</html>
diff --git a/docs/gerar/teste.markdown b/docs/gerar/teste.markdown