Skip to content

Funcionalidades JS Disponiveis

Jump to bottom
Edmo Souza edited this page Mar 11, 2022 · 7 revisions

Conheça as funcionalidades de JS que temos no Starter :)

Procuramos sempre criar uma abstração de complexidade para todo o trabalho repetitivo como:

  • Instâncias de plugins;
  • Validação de campos;
  • Máscaras de input;
  • Configuração de componentes;
  • entre outros...

Portanto, uma premissa das funcionalidades é:

Precisou fazer algo mais de 2 ou 3 vezes? Está na hora de pensar um pouco sobre reutilização de código (Robert C. Martin — Clean Code)

Como são funcões utilitárias, deixamos elas comentadas para facilitar a busca pela funcionalidade desejada. Portanto, precisamos sempre descomentar para executá-las assim que o DOM estiver disponível para nós (algumas funções muito utilizadas como a setupUtmHelpers() já estão 'ligadas' por padrão).

As funções são executadas no método de ready do jQuery (estamos a caminho de atualizar todas as execuções de jQuery para Vanilla JS) localizado no nosso arquivo orquestrador de JS, o resources/js/frontend.js.

Outro ponto importante, é que precisamos descomentar o caminho para importação no build de JS, localizado em resources/js/frontend-imports.js, pois como ainda não utilizamos os módulos para importação do script em tempo de execução, compilamos o frontend.js com todos os recursos necessários para o dinamismo das páginas.

Componentes

Fancybox (Modal para vídeos e galeria de imagens)

createFancybox()

Função que abstrai a inicialização do plugin do Fancybox.

Localizado em resources/js/components/fancybox.js

F&MD Header (Cabeçalho e Navegação)

setupFmdHeader() - habilitado por padrão

Controla o comportamento de esconde e mostra da barra de cabeçalho/navegação do site.

Lax JS (Animações)

setupLax()

Controla inicialização do plugin Lax JS e cria classes de CSS pré-configuradas para auxiliar o uso de animações.

Swiper (Slider/Carrossel)

createSlider(options)

Parâmetros:

Abstrai a instância do Swiper com a configuração padrão do plugin, sendo possível passar uma configuração específica. Essa função é geralmente utilizada quando queremos algum slider específico onde seja necessário sobreescrever a configuração padrão do plugin.

setupDefaultSlider()

Inicializa o slider com as configurações padrão do projeto.

Helpers

Validadores de CPF e CNPJ

class CpfCnpjValidators {

  sanitize(cpfOrCnpj) {
  }

  checkCNPJ(cnpjInput) {
  }

  checkCPF(cpfInput) {
  }
}

sanitize(cpfOrCnpj)

Parâmetros:

  • cpfOrCnpj: string;

Método usado para limpar os caracteres especiais do CPF ou CNPJ para facilitar as validações e tratativas.

checkCNPJ(cnpjInput)

Parâmetros:

  • cnpjInput: string;

Usado para validar um CNPJ.

checkCPF(cpfInput)

Parâmetros:

  • cpfInput: string;

Usado para validar um CPF.

Utilitários de formulário

setupCustomFormFieldsVisibility()

Adiciona métodos à biblioteca jQuery para habilitar ou desabilitar campos de um formulário filhos do elemento selecionado.

Geralmente é utilizado quando temos campos escondidos que aparecem somente em determinado cenário, mas mesmo assim precisamos validar o formulário, e se os campos escondidos não tiverema propriedade disabled="true", o formulário tentará validar os campos.

Exemplo:

const personalDataFieldset = $('fieldset.personal-data');
// Desabilita todos os campos do fieldset relacionado aos dados pessoais
personalDataFieldset.disableFormFields();

getFieldValue({ name, type })

Parâmetros:

  • name: string;
  • type: string (input || select);

Auxilia na obtenção do valor do input ou do select.

setCustomFileLabel()

Configura o campo de input de arquivos para receber o nome do arquivo inserido ao invés de somente aparecer "Arquivo selecionado".

setInvalidInput({ input, message })

Parâmetros:

  • input: HTMLInputElement;
  • message: string (Mensagem de erro);

Configura o campo como inválido. OBS: Mensagem é um campo obrigatório, pois para o JS, se o método setCustomValidity receber uma string vazia, significa que o campo é válido.

setValidInput({ input })

Parâmetros:

  • input: HTMLInputElement;

Configura o campo como válido.

guideUserToTheFirstError()

Configura um auxiliador visual para quando o usuário submeter o formulário com campos inválidos. Ou seja, a função irá scrollar a página até o primeiro campo inválido (de cima para baixo) encontrado no formulário.

validateFullName({ fullNameElement, invalidMessage })

Parâmetros:

  • fullNameElement: HTMLInputElement;
  • invalidMessage: string (Mensagem de erro);

Valida se o valor inserido no campo de nome completo é, no mínimo, um nome composto.

setupFullNameValidate()

Inicia e configura o validador de nome completo para o seletor padrão dessa funcionalidade, o .js-full-name.

setupBrazilianCellphoneValidate()

Configura o validador de número de celular brasileiro para o seletor padrão dessa funcionalidade, o .js-cellphone-validate;

setupBrazilianPhoneValidate()

Configura o validador de número fixo brasileiro para o seletor padrão dessa funcionalidade, o .js-phone-validate;

initializeFormHelpers() - habilitado por padrão

Inicializa os helpers e validadores padrão dos formulários.

Interação de usuários

throttle(fn, wait)

Parâmetros:

  • fn: Function;
  • wait: number (milisegundos);

A função throttle é uma técnica utilizada para inibir os usuários que ficam clicando sem parar, ou seja, a função fn() só será executada se nada acontecer no período de agora somado ao valor de wait.

Exemplo:

throttle(fn, 1000);
// clicou
// após .5s
// clicou de novo, nada acontece e zera a contagem...
// clicou de novo, nada acontece e zera a contagem...
// clicou de novo, nada acontece e zera a contagem...
// clicou de novo, e esperou...
// após 1s a função é executada

Utilitários de UTM

setupUtmHelpers() - habilitado por padrão

Configura o recebimento, captura e inserção de Cookies de trackeamento UTM presentes na URL.

Exemplo: https://fmd.ag?utm_source=instagram&utm_campaign=estamos+contratanto

Utilitários de Data Layer

setupDataLayerEventClickButton()

Configura, nos elementos selecionados, a criação e a atualização do Data Layer a partir de um evento de clique. Caso seja necessário alterar a action do ** Data Layer**, é utilizado o atributo no elemento clicado data-fmd-datalayer-action.

Exemplo:

<a href="//fmd.ag"
   class="js-btn-data-layer"
   data-fmd-datalayer-action="newAction"></a>

Seletor:

.js-btn-data-layer

generateDataLayerEvent(options)

Cria um objeto com as configurações básicas de um evento de Data Layer, podendo receber novos valores ou sobreescrever os valores básicos a partir do parâmetro options.

Parâmetros:

  • options: DataLayerEvent;

updateDataLayer(dataToBePushed)

Atualiza o Data Layer com o novo evento/variável.

Parâmetros:

  • dataToBePushed: DataLayerEvent;

Frontend JS

Esse é o nosso arquivo orquestrador que contém tanto a função ready do jQuery (que citamos no início) quanto o window.addEventListener('load'..., pois algumas inicializações de métodos dependem da finalização de cálculos de tamanho, pintura e renderização da página.

getThemeVariables()

Entrega os mesmos valores de variáveis que temos no arquivo de tema do Bootstrap, porém no JS, facilitando a manutenção do tema do projeto.

setupStateCityOptions()

Cria os options com os estados do Brasil para os selects que tenham o seletor padrão .js-state e configura para que quando o usuário selecionar um estado, o select de cidades seja preenchido automaticamente de acordo com o estado selecionado.

setupServiceWorker() - habilitado por padrão

Configura o Service Worker do projeto. No momento temos apenas as configurações de PWA mapeadas.

preventInvalidFormSubmit() - habilitado por padrão e usado somente quando não usamos Livewire

Bloqueia a reload da página quando um formulário é submetido. É nesse momento que as validações são executadas, o scroll para o primeiro erro encontrado no formulário (caso exista), bloqueio do botão de submissão até que a validação seja feita e a inserção de classes de campo inválido caso o formulário tenha sido preenchido no servidor.

disableButtonOnSubmit(form) - usado somente quando não usamos Livewire

Desabilita o botão de submissão do formulário adicionando o atributo disabled e as classes de loading.

setupSmoothScroll() - habilitado por padrão

Adiciona uma animação de scroll suavizada para todos os elementos a que tiverem a classe .js-scroll-top.

verifyUserAgent() - habilitado por padrão

Estiliza a barra de scroll do Windows e Linux para não ficar com o estilo padrão do sistema.

onChangeSelectLink()

Recarrega a página quando seleciona um novo valor nos selects que tenham o seletor padrão .js-onchange. Geralmente utilizado nas LPs ou sites que tenham filtros estáticos (sem dinamismo por parte do backend).

setupSelect2() - Select2 (selects pesquisáveis)

Inicializa o plugin Select 2 para os selects que tenham o seletor padrão .js-select2.

getBrowser()

Retorna se o usuário está utilizando o navegador Chrome ou Safari.

isSafari()

Testa e retorna um boolean se o usuário está utilizando o navegador Safari.

setupInputMasks() - habilitado por padrão

Configura máscaras de input de formulários.

  • .js-mask-phone: Máscara de telefone/celular
  • .js-mask-cpf: Máscara de CPF
  • .js-mask-cnpj: Máscara de CNPJ
  • .js-mask-cpfcnpj: Máscara de CPF e CNPJ (alterna conform o usuário digita)
  • .js-mask-cep: Máscara de CEP
  • .js-mask-money: Máscara de valor monetário (R$)
  • .js-mask-date: Máscara de data (como atualmente os navegadores implementam por padrão, talvez seja interessante remover essa funcionalidade)

setupCepSearch()

Adiciona endereço no formulário automaticamente quando o usuário remover o foco do input de seletor .js-zipcode.

setupPopover()

Inicializa a funcionalidade de Popover do Bootstrap.

setupTooltip()

Inicializa a funcionalidade de Tooltip do Bootstrap.

setupAnchorReloadPrevention()

Bloqueia o reload da página para links que tenham o valor #. Geralmente utilizado durante o desenvolvimento inicial das páginas.

setupInfiniteScroll() - habilitado por padrão

Configura e inicializa o plugin Infinite Scroll.

insertCopyrightYear()

Adiciona texto de direito reservados no footer dentro do elemento que tiver o seletor .js-copyright-container.

setupLivewire() - habilitado por padrão

Inicializa o plugin de formulários assíncronos do Laravel, o Livewire

setupClipboardJS()

Configura e inicializa copy to clipboard. Como é uma funcionalidade dificilmente utilizada, precisamos intalar o plugin com o comando npm install clipboard --save.

setupShareAPI() - habilitado por padrão

Configura a iniciliza a janela de compartilhamento do conteúdo nos elementos que tenham o seletor padrão .js-btn-share.

Clone this wiki locally