#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:

Importação da Biblioteca jwc.js

Importe via CDN ou NPM:

npm i jwc-components

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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().

Codigo HTML

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.

Inicialização do status atual da página e direcionamento automático

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.

JavaScript

Diretório dos arquivos .html: /component

jwc.inicialize('/component/'); 
//ou  
jwc.inicialize('component');

JavaScript

Definir uma pagina Home ou pagina padrao na index

jwc.defaultPage('home.html', '.load');
//ou  
jwc.defaultPage('home', '.load');

Exemplo: components/teste.html

JavaScript

jwc.element("my-content").component('components/test.html');
jwc.element(".load").component('components/test.html');
jwc.element("#load").component('components/test.html');

Codigo 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

JavaScript

Carregamento Personalizado em qualquer página.

Exemplo: jwc.element(".load").component('/folder/test.html');

jwc.element(".load").component('/components/test.html');

Estado atual da Página após o refresh

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.

Capturando Parâmetros da URL

para recuperar parametros da url por exemplo: site.com/post/1

JavaScript

 //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/2

jwc_active button

Adicione automaticamente um indicador de botão clicado na página. A classe jwc_active é adicionada automaticamente.

JavaScript

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);

Animações entre páginas

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:

JavaScript

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')

JavaScript

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