Se inscreva no canal! https://www.youtube.com/@meiodev

Visite meu site! https://www.meiodev.com.br/

MEIO DEV

Este pacote está sendo desenvolvido para criar funções que ajude a comunidade a desenvolver seus projetos de forma mais rápida e fluida.

Como usar o pacote em seu site

1 - Com o modo avançado (Velo) ativo no seu editor;

2 - Vá em Código (menu lateral esquerdo) > Pacotes e aplicativos > NPM;

3 - Clique em + para adicionar um pacote NPM e na janela que irá exibir busque por "meiodev".

4 - Clique em instalar.

Para importar e utilizar no seu código, use a seguinte sintaxe:

Use assim caso queira usar apenas uma função do pacote:

import { nomeDaFunção } from 'meiodev'

Use assim caso queira usa várias funções do pacote:

import meiodev from 'meiodev'

Depois use assim: meiodev.nomeDaFunção

Funções

> sendWhatsAppMessage

A função retorna um link que redireciona para o whatsapp com uma mensagem pré definida.

sendWhatsAppMessage(whatsappNumber, message, formFactor)

Parâmetros

whatsappNumber [number] = número a qual irá enviar a mensagem, importante incluir o DDI. message [string] = mensagem que quer enviar. Dica: use \n para pular linha. formFactor [string] = use wixWindow para passar o formFactor que obtém que tipo de dispositivo está sendo usado.

> timeOptions

A função retorna um array com label e value pra usar em campos de seleção de lista (dropdowns). Ela retorna as 24h do dia a cada x minutos informado.

timeOptions(numMinutes, arr)

Parâmetros

numMinutes [number] = a cada quantos minutos. arr [array] = você pode iniciar com um array inicial.

> changePositionRepeater

A função muda a posição do item no repetidor.

changePositionRepeater(repeaterElement, from, to)

Parâmetros

repeaterElement [element] = o repetidor. from [number] = index atual do item que quer mudar de posição. to [number] = index para qual posição deseja que este item vá.

> weekDay_for_Number

A função retorna o nome do dia da semana em português-br. Use new Date().getDay() para ter o dia da semana de hoje.

weekDay_for_Number(dayNumber)

Parâmetros

dayNumber [number] = número do dia da semana.

> minToHours

A função converte minutos em horas e retorna uma string neste formato "00:00".

minToHours(time_in_minutes)

Parâmetros

time_in_minutes [number] = tempo em minutos

> diffDates

A função retorna a diferença em dias de duas data específicas.

diffDates (dateStart, dateEnd)

Parâmetros

dateStart [date] = data inicial que será usada para caucular.

dateEnd [date] = data final que será usada para caucular.

> fileCache

A função coloca um arquivo em cache do navegador manualmente com base numa URL. Esta função só suporta url's estáticas, portanto não use a URL do wix, você deve converter primeiramente para uma URL estática. Para imagens use a função do pacote getStaticImageUrl.

fileCache(url, name)

Parâmetros

url [string] = url do arquivo, use aqui apenas url's estáticas

name [string] = o nome do armazenamento cache, use isso para organizar or arquivos cache

> getStaticImageUrl

A função retorna a url estática de uma imagem e permite o controle de compreesão da mesma. Use esta função para retornar imagens do tamanho ideal e com masi velocidade para a sua aplicação.

getStaticImageUrl(url, compress, cache)

Parâmetros

url [string] = url da imagem, use aqui apenas URL padrão do wix (que contém 'wix:image')

compress [object] = passe um objeto para comprimir e indicar o tamanho de corte da imagem, use:

let compress = {
    w: 1920, // Indica a largura da imagem
    h: 1080, // Indica a altura da imagem
    q: 60 // Indica a qualidade da imagem (0 - 100)
}

cache [boolean] = passe true para colocar esta imagem em cache

> messageAlert

A função retorna um HTML com uma menssagem como resposta. A mensagem é retornada com um estilo personalizado.

messageAlert(textElement, message, type, time, styleCSS)

Parâmetros

textElement [element] = passe o campo de texto que deseja exibir a mensagem ($w('#campo')).

message [string] = passe a mensagem que deseja exibir.

type [string] = escolha que tipo de mensagem deseja exibir, isso afetará no layout padrão da menssagem. (danger/success)

time [number] = escolha quanto tempo em milisegundos deseja exibir a mensagem.

styleCSS (opcional) [string] = personalize o estilo da mensagem com css, usar esse parametro substituirá todo o estilo padrão.

> randomNumber

A função retorna um número aleatório entre um número mínimo (0 é padrão) e o número um máximo.

randomNumber(max, min)

Parâmetros

max [number] = número máximo.

min [number] = número mínimo.

> limitString

A função atribui um limite de caracteres a uma string.

limitString(str, limit, endString)

Parâmetros

str [string] = passe o texto que pode ou não ser limitado.

limit [number] = passe a quantidade de caracteres limite para a string.

endString (opcional) [string] = passe o que será incluido no fim desta string.

> mask

mask(type, input)

type = tipo de máscara, deve ser uma string

input = o campo que a mascara será aplicada

> Types

espace : remove espaços da string e substitui por hífen phone : fomata em número de telefone cpf : formata para cpf cnpj : formata para cnpj cep : formata para cep currency : formata para valor de moeda date : formata para data

> Exemplos

Executa a função mask('phone', $('#campoPhone'))

Na prática

let align
$w('#campoPhone').onKeyPress((e) => {

    if (align) {
        clearTimeout(align);
        align = undefined;
    }

    align = setTimeout(async () => {
        await mask('phone', $w("#inPhoneShop"))
    }, 200)

})

A função retornará no campo valor em String já formatado: 19993314015 > (19) 99331-4015