#JWC-COMPONENTS Carregue componentes no seu HTML usando esta JavaScript que já inclui um sistema de rota integrado, indicado para sites de carregamento sem recarga e para quem deseja manter o seu código organizado.
Importação da Biblioteca jwc-components.js Importe via CDN ou NPM:
Importe via CDN ou NPM:
npm i jwc-components
<script src="https://cdn.jsdelivr.net/npm/jwc-components@1.1.3/jwc.js"></script>Para garantir que a biblioteca funcione sem erros, primeiro crie uma página HTML principal com o nome index.html. Ela deve ficar no diretório principal do seu projeto, e todos os componentes devem ser adicionados em um diretório de sua preferência, mas que seja configurado no component().
Crie uma tag HTML com um nome opcional ou escolha uma de sua preferência:
tagName
<my-content></my-content>
className
<div class="load"></div>
idName
<div id="load"></div>Para carregar o seu Componente HTML, você deve criar uma página separada com um nome opcional. Por exemplo:
Html: test.html
Diretório: components.
Para ativar o status da página, sempre inicialize a função passando element() e component() com o caminho/diretório. Por exemplo, /component/home refere-se ao home.html.
Diretório dos arquivos .html: /component
jwc.inicialize('/component/');
//ou
jwc.inicialize('component');Definir uma pagina Home ou pagina padrao na index
jwc.defaultPage('home.html', '.load');
//ou
jwc.defaultPage('home', '.load');Exemplo: components/teste.html
jwc.element("my-content").component('components/test.html');
jwc.element(".load").component('components/test.html');
jwc.element("#load").component('components/test.html');Formas de como usar o carregamento quando clicado. Para tags de link, usa-se o atributo href; para outras, como div, botão, li, usa-se path. index.html
<div class="load"></div>
<loading></loading>
<div class="menu">
<a class="btn jwc_click" content=".load" href="/home">Home</a>
<a class="btn jwc_click" content=".load" href="/pagina1/post/1">Pagina1</a>
</div>
<div class="menu">
<button class="btn jwc_click" content="loading" path="/pagina1">Pagina1</button>
<button class="btn jwc_click" content="loading" path="/pagina1/post/1">Pagina1</button>
</div>
<div class="menu">
<div class="btn jwc_click" content=".load" path="/home">Home</div>
<div class="btn jwc_click" content=".load" path="/pagina1/post/1">Pagina1</div>
</div>Outra alternativa usando Classes
Carregamento Personalizado em qualquer página.
Exemplo: jwc.element(".load").component('/folder/test.html');
jwc.element(".load").component('/components/test.html');Após atualizações da página, a biblioteca automaticamente carrega a página de acordo com a URL. Caso você tenha clicado na página "pagina3", após apertar F5, a biblioteca vai carregar a "pagina3". Se você tiver uma classe como jwc_ + nome da página.html criadas, exemplo jwc_pagina3, a biblioteca adiciona uma classe do tipo jwc_active, caso você a tenha em seu CSS com estilo de aba clicada.
para recuperar parametros da url por exemplo: site.com/post/1
//Active = Nome da sua class com estilo em css exemplo .active{background:red;}
var p = jwc.getParams();
console.log(p)
//returno
{
"param1": "http:",
"param2": "localhost:4000",
"param3": "pagina1",
"param4": "post",
"param5": "1"
}
var p = jwc.getParams('param1');
console.log(p) //returno = http:
//setar parametros exemplos
jwc.setParams('/sobre/1')
jwc.setParams('/contatos/2')
//localhos:80/sobre/1
//localhos:80/sobre/2Adicione automaticamente um indicador de botão clicado na página. A classe jwc_active é adicionada automaticamente.
app.js
//jwc_active = Nome da sua class com estilo em css exemplo .jwc_active{background:red;}
var back = {
background: '#0080ff',
color: '#fff'
}
var hover = {
background: '#0080ff',
color: '#fff'
}
jwc.activeBackground(back);
jwc.activeHover(hover);A biblioteca também permite adicionar animações entre as páginas carregadas. Você pode escolher o tipo de animação ou, se preferir, criar sua própria animação no CSS.
Exemplo de uso:
/* Animação de stretch-in */
.jwc_stretch_in {
animation: jwc_stretchIn 1s ease-in-out;
}
@keyframes jwc_stretchIn {
0% {
transform: scaleY(0);
opacity: 0;
}
100% {
transform: scaleY(1);
opacity: 1;
}
}Como definir uma animação no JavaScript após inicializar a biblioteca:
app.js
jwc.animate('jwc_slide_down');Todas as animações disponíveis:
.jwc_fade_in .jwc_slide_in .jwc_zoom_in .jwc_bounce_in .jwc_rotate_in .jwc_flip_in .jwc_slide_up .jwc_slide_down .jwc_expand_in .jwc_stretch_in .jwc_fade_slide_in .jwc_rotate_zoom_in
Encode e Decode de strings: jwc.encode('string') jwc.decode('string')
app.js
var encode = jwc.encode('hello-word');
console.log(encode)
var decode = jwc.decode(encode)
console.log(decode)###exemplo de uso
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div class="menu">
<a class="btn jwc_click" content="mydiv" href="/home">Home</a>
<a class="btn jwc_click" content="mydiv" href="/pagina1/post/1">Pagina1</a>
</div>
<mydiv></mydiv>
<script src="/jwc.js"></script>
<script>
//verifica o status atual da pagina
jwc.inicialize('component');
jwc.defaultPage('teste.html', 'mydiv');
//carrega o componente na pagina
jwc.element('mydiv').component('/component/teste.html');
//cria uma class css do jwc_active
var back = {
background: '#0080ff',
color: '#fff'
}
//cria uma class css do jwc_active:hover
var hover = {
background: '#0080ff',
color: '#fff'
}
//adiciona o css jwc_active
jwc.activeBackground(back);
//adiciona o css jwc_active:hover
jwc.activeHover(hover);
//cria uma animação de slide_down
jwc.animate('jwc_slide_down');
//codefica uma string
var x1 = jwc.encode('teste');
console.log(x1);
//decodifica uma string
var x2 = jwc.decode(x1);
console.log(x2)
</script>
</body>
</html>Nosso Site jsaplication.com.br