Tag: javascript

Como adicionar e remover dinamicamente campos HTML em um Formulário? (Javascript puro)

O Javascript nos permite criar conteúdos dinâmicos e podemos usar isso para adicionar remover e adicionar elementos de acordo com as opções do usuário. Dados como informações sobre dependentes, links de mídias sociais, e-mails adicionais, etc. são curtos e não fazem sentido criarmos um formulário separado apenas para estes. Por isso, é interessante incluirmos a opção de adicionar diretamente esses campos em um subformulário dinâmico.

Obs. Se quiser ir direto para o código final, procure o link do JsFiddle no final do post.

HTML

Para iniciarmos, basta criar um container no HTML onde você quer que os elementos sejam exibidos, além do botão simples de adição e um botão de captura de dados, para que, desta forma, possamos enviar o JSON resultante para o back-end.

A organização dos containers é sempre muito importante quando trabalhamos com Javascript e nos dedicamos ao uso correto da web semântica.

<div class="dependentes">
  <button id="btnAdicionarDependentes">
  📝Adicionar Dependentes
  </button>
  <div class="container" id="dependentesContainer">
  </div>
  <button class="green" id="btnCapturarDados">
  ✅ Capturar Dados
  </button>
</div>
<pre id="containerDados"></pre>

Javascript

Como de praxe, usaremos o Javascript puro para realizar essa tarefa, dessa forma você poderá usar em qualquer lugar o que aprender aqui.

Para poder capturar e devolver os dados, usaremos um objeto JSON, dessa forma fica fácil remontar, tanto no back-end, quando no front-end, os dados nas formatações e/ou elementos que precisamos.

Vamos criar, como exemplo, o JSON abaixo, e vamos declará-lo em uma variável global chamada dependentes, seguindo a ideia de um cadastro de lista de dependentes, então temos:

var dependentes = [{
  identificador: 13,
  nome: "Joana da Silva",
  idade: 12,
}];

Agora vamos nos focar nas funções. A primeira coisa que vamos fazer é criar um método que pegue os dados do JSON e o converta para elementos HTML renderizados na tela. Dessa forma, usaremos um laço para ler o JSON e aplicamos seus dados em uma template string e o adicionamos no container específico:

function carregarDependentes() {
  let dependentes_container = document.querySelector("#dependentesContainer");
  dependentes_container.innerHTML = "";
  dependentes.forEach((el) => {
    let identificador = el.identificador;
    let nome = el.nome;
    let idade = el.idade;
    let dependente_container = `<div class="dependente" data-id="${identificador}">
    								<input class="nome" placeholder="Digite o nome" type="text" value="${nome}">
                                    <input class="idade" placeholder="Digite a idade" type="number" value="${idade}">
                                    <div class="action">
                                        <a href="#" class="salvar">salvar 💾</a>
                                        <a href="#" class="remover">❌</a>
									</div>
                                </div>`;
    dependentes_container.innerHTML += dependente_container;
  });
}

Agora vem o segredo que facilita o processo e o deixa mais organizado. Ao invés de remover e adicionar os elementos na tela, iremos nos focar em remover e adicionar do JSON e, em seguida, regenerar os elementos a partir desse objeto. Ficando, assim, com um código mais limpo. Outro motivo pelo qual usamos a regeneração dos elementos é para evitar criarmos IDs únicos temporários. Ao regenerar, podemos usar os índices do próprio array como identificador.

Para adicionar um novo item, basta incluirmos um dado vazio no JSON, porém, seguindo nosso modelo, e mandamos gerar novamente os elementos:

function adicionarDependentes() {
  dependentes.push({ identificador: "", nome: "", idade: "" });
  carregarDependentes();
}

Para remover, similar a criação de um novo, vamos usar um laço, porém para adicionar o evento aos botões de excluir. Usaremos então o método splice para remover o array. Depois, obviamente, vamos regenerar os elementos a partir da função carregarDependentes():

function removerDependentes() {
  document
    .querySelectorAll("#dependentesContainer .remover")
    .forEach((el, i) => {
      el.addEventListener("click", () => {
        dependentes.splice(i, 1); // O splice vai remover um item do array no JSON
        carregarDependentes(); // E chamamos o método para regenerar os elementos
      });
    });
}

Uma vez que adicionamos uma nova linha em branco precisamos salvar seu preenchimento e aí iremos usar a mesma lógica de remoção, mas usaremos o splice para substituir e não para remover um dado do JSON. Porém, adicionaremos uma pequena validação para evitar entrar dados incompletos:

function salvarDependentes() {
  document
    .querySelectorAll("#dependentesContainer .salvar")
    .forEach((el, i) => {
      el.addEventListener("click", () => {
        let identificador = el.parentElement.parentElement.getAttribute(
          "data-id"
        );
        let nome = el.parentElement.parentElement.querySelector(".nome").value;
        let idade = el.parentElement.parentElement.querySelector(".idade")
          .value;

        if (!nome.length || !idade.length) { // Verifica se nome e idade foram preenchidos
          alert("Nome e idade precisam ser preenchidos para salvar.");
          return false;
        }
        dependentes.splice(i, 1, {
          identificador: identificador,
          nome: nome,
          idade: idade,
        }); // Substitui o dado no JSON
        carregarDependentes(); //  E chamamos o método para regenerar os elementos
      });
    });
}

Um outro método que precisamos adicionar é uma forma de bloquear para que um usuário consiga clicar em outros elementos ao redor, sem antes finalizar a edição do item. Para isso, iremos fazer um laço que adiciona uma classe de CSS, que vamos chamar de disabled, em todos os elementos, exceto o que está sendo editado. Essa classe possui um point-events: 0 e um opacity: 0.5. Para demonstrar que está desativado, você pode ainda adicionar outros efeitos, como filtros de baixo contraste ou escala de cinza.

function travarOutros(element) {
  if (element == false) { // Passar false como parâmetro para que todos os elementos fiquem habilitados novamente, ao invés de apenas o elemento que queremos liberar
    document
      .querySelectorAll(".dependentes button, .dependentes .container > div")
      .forEach((el) => {
        el.classList.remove("disabled");
      });
    document.querySelector("#containerDados").innerHTML = "";
    return false;
  }
  document
    .querySelectorAll(".dependentes button, .dependentes .container > div")
    .forEach((el) => {
      if (el != element) {  // Verifica se o elemento no laço é o que está sendo editado
        el.classList.add("disabled");
      }
    });
}

Agora, antes de continuarmos, vamos revisitar as funções acima para chamar, quando necessário, uma função dentro da outra (leia os comentários no código para entender), ficando assim:

function carregarDependentes() {
  let dependentes_container = document.querySelector("#dependentesContainer");
  dependentes_container.innerHTML = "";
  dependentes.forEach((el) => {
    let identificador = el.identificador;
    let nome = el.nome;
    let idade = el.idade;
    let dependente_container = `<div class="dependente" data-id="${identificador}">
    															<input class="nome" placeholder="Digite o nome" type="text" value="${nome}">
                                  <input class="idade" placeholder="Digite a idade" type="number" value="${idade}">
                                  <div class="action">
                                  	<a href="#" class="salvar">salvar 💾</a>
                                    <a href="#" class="remover">❌</a>
																	</div>
															  </div>`;
    dependentes_container.innerHTML += dependente_container;
  });
  salvarDependentes(); // Adicionamos o método aqui para que o laço seja aplicado nos novos items adicionados
  removerDependentes(); // Adicionamos o método aqui para que o laço seja aplicado nos novos items adicionados
  travarOutros(false); // Adicionamos para destravar tudo
}

function removerDependentes() {
  document
    .querySelectorAll("#dependentesContainer .remover")
    .forEach((el, i) => {
      el.addEventListener("click", () => {
        dependentes.splice(i, 1);
        carregarDependentes(); // Regenerar os elementos HTML após remover do JSON
      });
    });
}

function adicionarDependentes() {
  dependentes.push({ identificador: "", nome: "", idade: "" });
  carregarDependentes(); // Regenerar os elementos HTML após remover do JSON
  travarOutros(
    document.querySelector("#dependentesContainer > div:last-child")
  ); // Desabilitar todos os outros elementos, exceto o que acabou de ser adicionado
}

function salvarDependentes() {
  document
    .querySelectorAll("#dependentesContainer .salvar")
    .forEach((el, i) => {
      el.addEventListener("click", () => {
        let identificador = el.parentElement.parentElement.getAttribute(
          "data-id"
        );
        let nome = el.parentElement.parentElement.querySelector(".nome").value;
        let idade = el.parentElement.parentElement.querySelector(".idade")
          .value;

        if (!nome.length || !idade.length) {
          alert("Nome e idade precisam ser preenchidos para salvar.");
          return false;
        }
        dependentes.splice(i, 1, {
          identificador: identificador,
          nome: nome,
          idade: idade,
        });
        carregarDependentes(); // Regenerar os elementos HTML após remover do JSON
        travarOutros(false); // Liberar todos os elementos novamente
      });
    });
}

function travarOutros(element) {
  if (element == false) {
    document
      .querySelectorAll(".dependentes button, .dependentes .container > div")
      .forEach((el) => {
        el.classList.remove("disabled");
      });
    document.querySelector("#containerDados").innerHTML = "";
    return false;
  }
  document
    .querySelectorAll(".dependentes button, .dependentes .container > div")
    .forEach((el) => {
      if (el != element) {
        el.classList.add("disabled");
      }
    });
}

Agora, tudo o que precisamos fazer é incluir os comandos de inicialização, onde aplicamos o método de adição ao evento de clique do botão e carregamos os dados iniciais do JSON:

//init
document.querySelector("#btnAdicionarDependentes").addEventListener("click", adicionarDependentes);
carregarDependentes();

Por fim, vamos criar uma função para o botão de capturar dados apenas para extrair e mostrar os dados em JSON. Você pode, eventualmente, usar esses dados e enviar via POST, por AJAX ou via campo oculto, e pegar no back-end para guardar ou processar os dados (como com um json_decoder, do PHP):

//capturarDados
document.querySelector("#btnCapturarDados").addEventListener("click", ()=>{
	document.querySelector("#containerDados").innerHTML = JSON.stringify(dependentes, undefined, 4);
});

CSS

O único CSS que precisaremos usar é para aplicar a classe disabled. Se por acaso você está usando algum framework CSS, recomendo que você use o relativo a esta classe deste. Consulte a documentação, onde geralmente está relacionado aos helpers:

.disabled{
  pointer-events: none;
  opacity: .5;
}

Se você quer usar o CSS mais elaborado que usei aqui, veja abaixo o link do JsFiddle.

Finalizando

Criar formulários dinâmicos auxilia a usabilidade à medida que permite que o usuário adicione dados de forma mais rápida e com respostas visuais imediatas. O uso aqui do Javascript puro visa a facilidade para que você possa implementar em quaisquer projetos, incluindo os com Typescript. Trabalhe um pouco no código para adequá-lo à sua necessidade. E, como sempre, você poderá puxar o código e testar direto do JsFiddle.

Aproveite e entre para nosso grupo de discussão no Telegram.

14 de fevereiro de 2021

Microsoft traz Edge para o MacOS e Modo Internet Explorer

Na Microsoft Build 2019 iniciado nesta segunda-feira (06/05), a empresa fundada por Bill Gates apresentou uma série de novidades para seu mais recente navegador.

O principal destaque é o interesse da Microsoft em finalmente aposentar o Internet Explorer. Porém, a solução para isso, sem enfurecer os desenvolvedores de sistemas legados, é adicionar uma nova função ao seu novo navegador chamada de Modo Internet Explorer, que aciona o motor do Internet Explorer dentro do Edge, em determinadas situações.

https://www.youtube.com/watch?v=dKmzyj-ovkg

Ainda, foi feita uma rápida apresentação mostrando o Edge rodando no MacOS. Isso é possível agora que a Microsoft decidiu usar o webkit como seu motor de renderização. Vale ressaltar que o modo Internet Explorer não estará disponível para MacOS.

Além disso, foram apresentadas também soluções para Android e iOS, novidades a respeito de privacidade, melhorias de compatibilidade com o Office 360 e até mesmo a opção de usar extensões fora da loja do Edge.

Com isso, o Firefox passará a ser o único navegador, dentre os principais players, a não usar o motor desenvolvido pela Apple (webkit).

Com notícias do CNET e da Microsoft Build

6 de maio de 2019

Como criar um uploader drag & drop, AJAX com porcentagem e Javascript puro?

Eu sei, o título é grande, mas trata-se de uma tecnologia muito útil quanto a usabilidade. A ideia é criar, da forma mais simples possível um uploader que mostre a porcentagem do que está sendo enviado, com múltiplos arquivos. Porém, não apenas isso, mas da forma mais pura possível, sem a necessidade de frameworks, bibliotecas de terceiros ou pre-processadores. Em nosso tutorial, usaremos PHP no back-end, mas você pode usar a linguagem que melhor lhe adequar. Abaixo você pode testar um exemplo:

Clique ou arraste o arquivo

DISCLAIMER: Para preservar você, o blog e a mim, o upload.php do exemplo não está fazendo upload de verdade, então você não vai ter acesso ao arquivo no final, porém, no link do github está o código funcional.

Download

HTML

Antes de prosseguir, vou alertar que estou usando o font-awesome no exemplo, apenas para não ter que fazer nenhum upload de imagens por hora, mas ele não é obrigado para o que vamos fazer.

Iniciaremos com um HTML bem simples. Vamos definir apenas a área de upload, da lista e uma área onde ficará o input. Esse input deve ser do tipo file e deve estar com o atributo mutiple definido. Nada muito especial por enquanto, pois nosso trunfo está mais no CSS e Javascript.

<div class="area-upload">
			<label for="upload-file" class="label-upload">
				<i class="fas fa-cloud-upload-alt"></i>
				<div class="texto">Clique ou arraste o arquivo</div>
			</label>
			<input type="file" accept="image/jpg,image/png" id="upload-file" multiple/>
			
			<div class="lista-uploads">
			</div>
		</div>

CSS3

O CSS que usaremos tem pontos específicos aos quais devemos prestar atenção. Por isso, vamos ver por trechos:

.area-upload{
	box-shadow: 0 5px 20px rgba(0,0,0,.2);
	margin: 20px auto;
	padding: 20px;
	box-sizing: border-box;
	
	width: 100%;
	max-width: 700px;
	position: relative;
}

.area-upload label.label-upload{
	border: 2px dashed #0d8acd;
	min-height: 200px;
	text-align: center;
	width: 100%;
	
	display: flex;
	justify-content: center;
	flex-direction: column;
	color: #0d8acd;
	position: relative;
	
	-webkit-transition: .3s all;
	-moz-transition: .3s all;
	-o-transition: .3s all;
	transition: .3s all;
}

.area-upload label.label-upload.highlight{
	background-color: #fffdaa;
}

.area-upload label.label-upload *{
	pointer-events: none;
}

A área de upload é definida pelo CSS a partir de um espaço abrangente. O label, vai ser a referência que vamos usar para atingir toda a área pré-determinada e é o que vai também receber o estilo que indicará onde e quando pode soltar o objeto. Dessa forma, deve estar com um position: absolute, pegando toda a área do upload. Um detalhe importante é que esse label não pode possuir filhos com eventos do mouse, pois isso pode acarretar em funcionamento inadequado ao fazer um hover em uma área não indicada.

A área marcada como hightlight é justamente para demonstrar ao usuário que ele já pode soltar o arquivo.

.area-upload input{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	-webkit-appearance: none;
	opacity: 0;
}

O input vai nos servir de área de drop. Isso já é um padrão tanto para Windows, MacOS e Linux – de receber um (ou mais arquivos) arrastando os dados para o botão. Retirando a aparência padrão, podemos nos aproveitar dessa função e economizar várias linhas de código do Javascript. Não havendo a necessidade de configurarmos eventos de arquivos.

.area-upload .lista-uploads .barra{
	background-color: #e6e6e6;
	margin: 10px 0;
	width: 100%;
	position: relative;
}

.area-upload .lista-uploads .barra .fill{
	background-color: #a1f7ff;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	min-width: 0;
	
	-webkit-transition: .2s all;
	-moz-transition: .2s all;
	-o-transition: .2s all;
	transition: .2s all;
}

.area-upload .lista-uploads .barra.complete .fill{
	background-color: #bcffdf;
}

.area-upload .lista-uploads .barra .text{
	z-index: 10;
	text-align: center;
	padding: 3px 5px;
	box-sizing: border-box;
	position: relative;
	width: 100%;
	color: black;
	font-size: 12px;
}
.area-upload .lista-uploads .barra .text a{
	color: black;
	font-weight: bold;
}

.area-upload .lista-uploads .barra.error .fill{	
	background-color: #c02929;
	color: white;
	min-width: 100%;
}

.area-upload .lista-uploads .barra.error .text{
	color: white;
}

Talvez a área que possa confundir um pouco mais, principalmente os mais novatos, seja o CSS referente as barras de loading. As barras são definidas como relative e seu conteúdo como absolute. Dessa forma, podemos herdar a porcentagem do upload e usá-la diretamente no min-width do elemento. Usamos min-width, ao invés de width para utilizar o transition, dando uma leveza no upload ao invés de pequenos estalos.

Javascript

Inicialmente iremos definir os efeitos de drag and drop. Utilizaremos os eventos específicos para adicionar ou retirar o css de hightlight. Aquele que falamos acima ao montar o CSS.

let drop_ = document.querySelector('.area-upload #upload-file');
drop_.addEventListener('dragenter', function(){
	document.querySelector('.area-upload .label-upload').classList.add('highlight');
});
drop_.addEventListener('dragleave', function(){
	document.querySelector('.area-upload .label-upload').classList.remove('highlight');
});
drop_.addEventListener('drop', function(){
	document.querySelector('.area-upload .label-upload').classList.remove('highlight');
});

Agora precisamos validar os dados antes de colocar em nosso servidor. Compusemos uma validação que verifica o tipo de arquivo e a quantidade máxima de 2MB. Essa validação é totalmente no front-end. É recomendado que você também faça uma validação posterior no back-end para evitar fraudes. Essa função receberá como parâmetro um arquivo, o qual faremos a validação.

function validarArquivo(file){
	console.log(file);
	// Tipos permitidos
	var mime_types = [ 'image/jpeg', 'image/png' ];
	
	// Validar os tipos
	if(mime_types.indexOf(file.type) == -1) {
		return {"error" : "O arquivo " + file.name + " não permitido"};
	}

	// Apenas 2MB é permitido
	if(file.size > 2*1024*1024) {
		return {"error" : file.name + " ultrapassou limite de 2MB"};
	}

	// Se der tudo certo
	return {"success": "Enviando: " + file.name};
}

Para enviar os arquivos, usaremos uma função AJAX simples. Fazemos um request no método POST. Nesta função, iremos capturar também a porcentagem do upload e atualizaremos a barra a partir desta, através do evento progress. Essa nossa função receberá o índice, para identificar o arquivo que está sendo enviado e a barra que será modificada.

function enviarArquivo(indice, barra){
	var data = new FormData();
	var request = new XMLHttpRequest();
	
	//Adicionar arquivo
	data.append('file', document.querySelector('#upload-file').files[indice]);
	
	// AJAX request finished
	request.addEventListener('load', function(e) {
		// Resposta
		if(request.response.status == "success"){
			barra.querySelector(".text").innerHTML = "<a href=\"" + request.response.path + "\" target=\"_blank\">" + request.response.name + "</a> <i class=\"fas fa-check\"></i>";
			barra.classList.add("complete");
		}else{
			barra.querySelector(".text").innerHTML = "Erro ao enviar: " + request.response.name;
			barra.classList.add("error");
		}
	});
	
	// Calcular e mostrar o progresso
	request.upload.addEventListener('progress', function(e) {
		var percent_complete = (e.loaded / e.total)*100;
		
		barra.querySelector(".fill").style.minWidth = percent_complete + "%"; 
	});
	
	//Resposta em JSON
	request.responseType = 'json';
	
	// Caminho
	request.open('post', 'upload.php'); 
	request.send(data);
}

Por fim, iremos juntar um pouco de cada coisa que fizemos, adicionando uma função em um evento change do input do upload. Neste momento, também é feito o laço dentre o(s) arquivo(s) selecionado(s) para validar e, se for válido, fazer o upload, utilizando os outros métodos acima mencionados. É neste momento também que serão criadas dinamicamente as barras: uma para cada arquivo.

document.querySelector('#upload-file').addEventListener('change', function() {
var files = this.files;
for(var i = 0; i < files.length; i++){
var info = validarArquivo(files[i]);
    //Criar barra
    var barra = document.createElement("div");
    var fill = document.createElement("div");
    var text = document.createElement("div");
    barra.appendChild(fill);
    barra.appendChild(text);

    barra.classList.add("barra");
    fill.classList.add("fill");
    text.classList.add("text");

    if(info.error == undefined){
        text.innerHTML = info.success;
        enviarArquivo(i, barra); //Enviar
    }else{
        text.innerHTML = info.error;
        barra.classList.add("error");
    }

    //Adicionar barra
    document.querySelector('.lista-uploads').appendChild(barra);
};
});

PHP

E pra terminar com chave de ouro, um PHPzinho que receberá esses arquivos e retornará um json com a confirmação de sucesso ou erro. Não aplicamos muitas validações nesse PHP pois nosso foco era neste exemplo está no front-end, mas é suficiente para que você compreenda sua funcionalidade.

<?php
ini_set('upload_max_filesize', '2M');
header('Content-Type: application/json');
$file = $_FILES['file'];

$ret = [];

if(move_uploaded_file($file['tmp_name'],'uploads/'.$file['name'])){
    $ret["status"] = "success";
    $ret["path"] = 'uploads/'. $file['name'];
    $ret["name"] = $file['name'];
}else{
    $ret["status"] = "error";
    $ret["name"] = $file['name'];
}

echo json_encode($ret, JSON_PRETTY_PRINT);
?>

E, como sempre, você pode baixar o código inteiro no Github e usar direto na sua aplicação.

Download

Gostou? Se sim, compartilha com seus amiguinhos interessados na área e curte a página no Facebook. O exemplo acima está levemente modificado para que funcione melhor aqui no site. Entre também no grupo de Design e Desenvolvimento. O link está abaixo do post.

1 de fevereiro de 2019

Como tirar uma foto usando a Webcam (Javascript + HTML)?
Disclaimer: Provavelmente a funcionalidade de webcam não está acessível via navegador interno de aplicativo (como o navegador interno do app do Facebook ou outro app mobile). Experimente direto em um navegador (mobile ou desktop).

O HTML5 nos trouxe diversas opções interessantes para desenvolvimento de RIAs (Rich Internet Applications). Em diversos sistemas online, precisamos de uma foto da pessoa que está sendo cadastrada. Para sistemas de hotéis, saúde, academias, dentre outros, que precisam de maior identificação, podemos usar a webcam para fazer a foto na hora que poderá ser usada em posterior conferência. Recurso esse que também está disponível em dispositivos móveis.

A ideia é transformar a imagem corrente da webcam em uma imagem base64. Após isso, converter essa codificação em uma imagem JPG e devolver o caminho – quase como se fosse um upload. Dessa forma você poderá salvar apenas o caminho da imagem no seu banco de dados, sem ficar um campo muito extenso ou que possa falhar em dispositivos móveis. Neste exemplo, será usado Javascript puro, a fim de universalizar para quem quiser utilizar em sua aplicação web.

Exemplo:

HTML5

Vamos começar criando nosso exemplo com os elementos HTML. Tudo o que realmente precisamos é de uma tag button e uma tag video, mas para poder visualizar o exemplo, vamos colocar o retorno em um img, link da imagem gerada e um textarea para vermos o base64.
```
<div class="area">
			<video autoplay="true" id="webCamera">
			</video>
	
			<input type="text" id="base_img" name="base_img">
			<button type="button" onclick="takeSnapShot()">Tirar foto e salvar</button>
	
			<img id="imagemConvertida">
			<p id="caminhoImagem" class="caminho-imagem"><a href="" target="_blank" rel="noopener"></a></p>
			<script src="script.js"></script>
</div>
```
Não precisamos necessariamente de um CSS para poder funcionar, mas, apenas para exemplo, vamos colocar um CSSzinho…
```
body{
	font-family: sans-serif;
	margin: 0;
}

.area{
	margin: 10px auto;
	box-shadow: 0 10px 100px #ccc;
	padding: 20px;
	box-sizing: border-box;
	max-width: 500px;
}

.area video{
	width: 100%;
	height: auto;
	background-color: whitesmoke;
}

.area textarea{
	width: 100%;
	margin-top: 10px;
	height: 80px;
	box-sizing: border-box;
}

.area button{
	-webkit-appearance: none;
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	text-align: center;
	background-color: #068c84;
	color: white;
	text-transform: uppercase;
	border: 1px solid white;
	box-shadow: 0 1px 5px #666;
}

.area button:focus{
	outline: none;
	background-color: #0989b0;
}

.area img{
	max-width: 100%;
	height: auto;
}

.area .caminho-imagem{
	padding: 5px 10px;
	border-radius: 3px;
	background-color: #068c84;
	text-align: center;
}

.area .caminho-imagem a{
	color: white;
	text-decoration: none;
}

.area .caminho-imagem a:hover{
	color: yellow;
}
```
Javascript

Agora vamos para a parte divertida. Basicamente vamos dividir nosso código em 3 partes: Chamar a webcam, tirar o instantâneo, e enviar/receber os dados do PHP. Criaremos o arquivo script.js.

A função LoadCamera, irá transformar a webcam em uma espécie de streamming local. Para isso, é necessário que o navegador tenha suporte a isso, logo, precisamos de um navegador moderno com total compatibilidade a HTML5. Basicamente, todos os navegadores modernos, então não pense em compatibilidade com Internet Explorer.
```
function loadCamera(){
	//Captura elemento de vídeo
	var video = document.querySelector("#webCamera");
		//As opções abaixo são necessárias para o funcionamento correto no iOS
		video.setAttribute('autoplay', '');
	    video.setAttribute('muted', '');
	    video.setAttribute('playsinline', '');
	    //--
	
	//Verifica se o navegador pode capturar mídia
	if (navigator.mediaDevices.getUserMedia) {
		navigator.mediaDevices.getUserMedia({audio: false, video: {facingMode: 'user'}})
		.then( function(stream) {
			//Definir o elemento vídeo a carregar o capturado pela webcam
			video.srcObject = stream;
		})
		.catch(function(error) {
			alert("Oooopps... Falhou :'(");
		});
	}
}
```
Você deve ter notado que a função acima tem um comentário com alguns parâmetros adicionais. Esses parâmetros são necessários para o funcionamento no iOS.

Já a função takeSnapShot irá justamente tirar o instantâneo. Essa função irá criar um elemento canvas e desenhar em seu conteúdo uma imagem matricial, baseada no vídeo (um ctrl+c / ctrl+v automático, digamos assim). A partir daí podemos obter o base64 desse canvas e utilizá-lo para enviar posteriormente.
```
function takeSnapShot(){
	//Captura elemento de vídeo
	var video = document.querySelector("#webCamera");
	
	//Criando um canvas que vai guardar a imagem temporariamente
	var canvas = document.createElement('canvas');
	canvas.width = video.videoWidth;
	canvas.height = video.videoHeight;
	var ctx = canvas.getContext('2d');
	
	//Desenhando e convertendo as dimensões
	ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
	
	//Criando o JPG
	var dataURI = canvas.toDataURL('image/jpeg'); //O resultado é um BASE64 de uma imagem.
	document.querySelector("#base_img").value = dataURI;
	
	sendSnapShot(dataURI); //Gerar Imagem e Salvar Caminho no Banco
}
```
Você pode, inclusive, se quiser, já adicionar essa base64 em no src de um elemento img.

Agora, precisamos enviar essa base64 para o PHP. Usaremos o PHP para salvar a imagem em um arquivo jpg (você pode optar por png também). O PHP irá retornar, posteriormente, um json com o caminho completo da imagem, que iremos carregar no objeto img descrito no HTML supracitado. Faremos isso dinamicamente, por técnica de Ajax, sem formulário, pois o submit de um form poderá ser usado futuramente para a conclusão de um determinado cadastro:
```
function sendSnapShot(base64){
var request = new XMLHttpRequest();
request.open('POST', 'save_photos.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
<pre><code>    request.onload = function() {
        console.log(request);
        if (request.status >= 200 && request.status < 400) {
            //Colocar o caminho da imagem no SRC
            var data = JSON.parse(request.responseText);

            //verificar se houve erro
            if(data.error){
                alert(data.error);
                return false;
            }

            //Mostrar informações
            document.querySelector("#imagemConvertida").setAttribute("src", data.img);
            document.querySelector("#caminhoImagem a").setAttribute("href", data.img);
            document.querySelector("#caminhoImagem a").innerHTML = data.img.split("/")[1];
        } else {
            alert( "Erro ao salvar. Tipo:" + request.status );
        }
    };

    request.onerror = function() {
        alert("Erro ao salvar. Back-End inacessível.");
    }

    request.send("base_img="+base64); // Enviar dados</code></pre>
<p>}
```
PHP

No lado do PHP, basicamente, usaremos um $_POST para capturar o dado enviado via Ajax pelo Javascript. Criaremos então o arquivo salvar_photos.php.

Não há muitos segredos, mas é importante se atentar a dois detalhes:
1. Os dados chegam com o + transformado em espaço, então precisamos converter novamente para + com um replace.
2. Precisamos salvar apenas os dados mime, sem os cabeçalhos, logo precisamos dar um explode para coletar apenas os dados.
Fora isso, basicamente colocamos os dados em um arquivo JPG e retornamos a URL em json para ser lido pelo Javascript novamente.
```
<?php
	if(!isset($_POST['base_img'])){
		die("{\"error\": \" Flopou. Cadê o base_img?\"}");
	}

	$result = [];
	$data = str_replace(" ","+",$_POST['base_img']); //O envio do dado pelo XMLHttpRequest tende a trocar o + por espaço, por isso a necessidade de substituir. 
	$name = md5(time().uniqid()); 
	$path = "snaps/{$name}.jpg";

	//data
	$data = explode(',', $data);
	
	//Save data
	file_put_contents($path, base64_decode(trim($data[1])));
	
	//Print Data
	$result['img'] = $path;
	echo json_encode($result, JSON_PRETTY_PRINT);
?>
```
Uma vez tudo pronto, basta chamar a função loadCamera() no evento que você quer que ele seja disparado.

Como sempre, deixamos o código disponível para quem quiser utilizar. Desta vez, o código está no GitHub.
Follow @velhobit
ATENÇÃO: O navegador não vai liberar o uso das ferramentas em um ambiente http. Você precisa necessariamente estar com seu site ou sistema em conexão segura (https).

Se gostou, compartilha com seus amiguinhos interessados na área e curte a página no Facebook. O exemplo acima está levemente modificado para que funcione melhor aqui no site. Entre também no grupo de Design e Desenvolvimento. O link está abaixo do post.
19 de janeiro de 2019
FAB (Botão Flutuante) com CSS3 e HTML (sem Javascript)
Disclaimer: O comportamento não vai funcionar no iOS, pois o iOS desconsidera as pseudoclasses utilizadas aqui. No lugar, ele utiliza uma pseudoclasse de :hover para significar a seleção sem clique. Ainda estou vendo qual a melhor forma de usar no iOS sem bugar o comportamento em desktop.

Continuando com os exercícios de lógica com CSS e HTML, iremos desta vez ver se é possível criar um FAB (Float Action Button) sem usar Javascript. E, adianto, sim, é possível. Se você quer ver os outros exercícios, acesse a categoria de Tutoriais, deste site.

Editado -> Para quem quer aplicar uma interação melhor, eu adicionei um exemplo de uso com Javascript no final do Post.

Esse tipo de botão é comum em aplicativos Android com Material Design. Se trata de um botão flutuante que fica em uma das extremidades inferiores (geralmente a direita) que abre uma lista com outros botões. Bem, se você está nesta página, basta olhar logo abaixo 😁.
Opção 1

Opção 2

Opção 3
HTML + CSS

Um dos desafios é conseguir fazer algo semanticamente correto. Então, o leiaute em si consistirá em um container que contém um botão e uma lista de botões. Cada botão terá uma etiqueta (label) que será a descrição do que ele pode fazer.
```
<div class="fab"  ontouchstart="">
  <button class="main" >
  </button>
  <ul>
    <li>
      <label for="opcao1">Opção 1</label>
      <button id="opcao1">
      ⎈
      </button>
    </li>
    <li>
      <label for="opcao2">Opção 2</label>
      <button id="opcao2">
      ⎗
      </button>
    </li>
    <li>
      <label for="opcao3">Opção 3</label>
      <button id="opcao3">
      ☏
      </button>
    </li>
  </ul>
</div>
```
No exemplo, há apenas 3 opções e com caracteres genéricos. Você pode substituir por imagens (mas tomando cuidado com o tamanho destas) ou usando font-icons, como o Font-Awesome, o MaterialDesign Lite ou até mesmo criar os seus próprios font-icons, como mostra este tutorial. Também pode colocar quantos items quiser na lista, apenas tomando cuidado para não ficar alto demais e enrolar o usuário.

Como sempre usaremos as pseudoclasses para poder reconhecer ações. No caso, utilizaremos a pseudoclasse :active e :focus para detectar o “click” ou o “foco” (quando o tab fica em cima). Você também notará a existência de um símbolo de positivo (+). No CSS, o símbolo + é um indicativo de que o item que deverá ser formatado é o item logo após o DOM atual, porém no mesmo container hierárquico. Ou seja, quando você declara input + p, você quer aplicar o estilo no p imediatamente após o input.

Sem mais enrolações, segue o CSS
```
.fab{
  position: fixed;
  bottom:10px;
  right:10px;
}

.fab button{
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 30px;
  background-color: #cb60b3;
  border: none;
  box-shadow: 0 1px 5px rgba(0,0,0,.4);
  font-size: 24px;
  color: white;
    
  -webkit-transition: .2s ease-out;
  -moz-transition: .2s ease-out;
  transition: .2s ease-out;
}

.fab button.main{
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background-color: #5b19b7;
  right: 0;
  bottom: 0;
  z-index: 20;
}

.fab button.main:before{
  content: '⏚';
}

.fab ul{
  position:absolute;
  bottom: 0;
  right: 0;
  padding:0;
  padding-right:5px;
  margin:0;
  list-style:none;
  z-index:10;
  
  -webkit-transition: .2s ease-out;
  -moz-transition: .2s ease-out;
  transition: .2s ease-out;
}

.fab ul li{
  display: flex;
  justify-content: flex-start;
  position: relative;
  margin-bottom: -10%;
  opacity: 0;
  
  -webkit-transition: .3s ease-out;
  -moz-transition: .3s ease-out;
  transition: .3s ease-out;
}

.fab ul li label{
  margin-right:10px;
  white-space: nowrap;
  display: block;
  margin-top: 10px;
  padding: 5px 8px;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  border-radius:3px;
  height: 18px;
  font-size: 16px;
  pointer-events: none;
  opacity:0;
  
  -webkit-transition: .2s ease-out;
  -moz-transition: .2s ease-out;
  transition: .2s ease-out;
}

.fab button.main:active,
.fab button.main:focus{
  outline: none;
  background-color: #7716ff;
  box-shadow: 0 3px 8px rgba(0,0,0,.5);
 }
 
.fab button.main:active:before,
.fab button.main:focus:before{
  content: '↑';
}

.fab button.main:active + ul,
.fab button.main:focus + ul{
  bottom: 70px;
}

.fab button.main:active + ul li,
.fab button.main:focus + ul li{
  margin-bottom: 10px;
  opacity: 1;
}

.fab button.main:active + ul li:hover label,
.fab button.main:focus + ul li:hover label{
  opacity: 1;
}
```
O que estamos fazendo é aplicar um estilo na lista assim que o botão ganha foco ou é ativado. Você pode, se preferir, adicionar também ao passar em cima com o mouse, bastando adicionar, junto aos demais comandos do botão principal, a pseudoclasse :hover e repetindo o resto da declaração.

Simples, não é? E, como sempre, o exemplo no JsFiddle para você ir experimentando e fazendo seus próprios testes. Compartilhe com a galera!

Versão com Javascript:
24 de dezembro de 2018
Destacando um Elemento HTML (coachmark): Efeito Spotlight ( com CSS3 e Javascript puro)
Obs. Se você só quer o código pronto, pule para o final do post. Ou acesse o link do JSFiddle.

As vezes precisamos encontrar formas de destacar elementos na tela (coachmark). Isso é muito útil principalmente quando você está tratando de pequenos tutoriais, afim de ajudar os usuários. Convém, também, entregar soluções simples e esteticamente elegantes para que ajudem no relacionamento com a ferramenta.

Faz algum tempo, um cliente meu quis criar um modo tutorial em seu sistema. Esse tutorial não deveria permitir que outras áreas da tela fossem clicadas até que a pessoa confirmasse que compreendeu. Como designer, lembrei que, anos atrás, no Android, a Google usava uma espécie de spotlight, mas não vi nada a respeito para websites. E, também, eu precisava que fosse dinâmico. Então eu resolvi usar meus conhecimentos de CSS3 e Javascript para usar essa ideia. E é disso que eu falarei neste tutorial.

Apesar de eu ter usado originalmente jQuery, para compartilhar com todos, resolvi fazer uma versão com Javascript puro, de forma que você poderá adicionar a qualquer aplicação web que você já tenha.

Criando a Estrutura: HTML e o CSS3

Para criar o efeito, vamos usar uma propriedade interessante do CSS3 chamada clip-path. O clip-path permite que criemos elementos vetoriais que serão usados como máscaras. Já utilizamos essa propriedade em um outro exemplo, no caso, sobre um loader.

Exemplo de uso do clip-path:

Dessa forma, se já não tiver, teu projeto deve possuir um container principal que é pai de todos os elementos, mas abaixo do <body>. Se não houver, o crie, é até uma questão lógica de organização para evitar problemas futuros. Veja um código de exemplo:
```
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
<body>
	<div id="container" class="container">
	</div>
</body>
</html>
```
A div container vai ser justamente o elemento que iremos clippar. Para ajudar em nosso exemplo, vamos criar um form básico dentro do container, ficando assim:
```
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
<body>
	<div id="container" class="container">
		 <div class="form">
		  First name:<br>
		  <input type="text" name="firstname" id="firstname" value="Mickey">
		  <br>		  <br>
		  Last name:
		  <br>
		  <input type="text" name="lastname" id="lastname" value="Mouse">
		  <br><br>
		  <input type="submit" id="submeter" value="Submit">
		  <div class="btn_ajuda">?</div>
		</div> 
	</div>
</body>
</html>
```
Para finalizar nosso HTML, vamos colocar a caixa de mensagens. Repare que no código abaixo a caixa de mensagem vai ter uma div chamada spacer. O objetivo dessa div vai ser adicionar o espaço do elemento referência, para que o código funcione também em dispositivos móveis e ela deverá ficar fora do container da aplicação. Mais à frente isso vai ficar mais bem explicado.
```
<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
<body>
	<div id="container" class="container">
		 <div class="form">
		  First name:<br>
		  <input type="text" name="firstname" id="firstname" value="Mickey">
		  <br>		  <br>
		  Last name:
		  <br>
		  <input type="text" name="lastname" id="lastname" value="Mouse">
		  <br><br>
		  <input type="submit" id="submeter" value="Submit">
		  <div class="btn_ajuda">?</div>
		</div> 
	</div>

		
		<div class="mensagem_area" id="mensagemAjuda">
			<div class="spacer"></div>
			<div class="mensagem">
				<h2></h2>
				<p></p>
				<button onclick="ocultarAjuda()">
				  OK, entendi
				</button>
			</div>
		</div>
</body>
</html>
```
Agora que o HTML está pronto, vamos para o CSS inicial. A primeira fase é estabelecer todo comportamento da div que estamos usando como container. Também precisamos adicionar uma cor ao plano de fundo, que vai ser a cor que usaremos como base para a área em lowlight.

A animação ficará a cargo do recurso transition do CSS3. Importante ressaltar que uma animação criada por CSS é mais leve e possui melhor frequência do que uma criada pelo Javascript. Isso porque o navegador tenta usar a renderização da GPU nesses casos. Dessa forma, vamos aplicar o parâmetro transition para aplicar o efeito.
```
body{
		    margin: 0;
		    font-family: sans-serif;
		    background-color: #15d115;
}
		    
.container{
			background-color: white;
			min-width: 100%;
/* Obs. A largura do clip-path, abaixo, está definido
como 3840 de diâmetro, porque ultrapassa
o tamanho do 4K - O clip-path considera o raio.
Posteriormente, você poderá trabalhar com
adição de classes, se você quiser evitar
a definição inicial desse tamanho,
mas é necessário haver uma para poder
ativar a animação.*/
			clip-path: circle(1920px at center);
			-webkit-clip-path: circle(1920px at center);
		    transition: 2s ease-in-out;
		    -webkit-transition: 1s ease-in-out;

		    position: absolute;
		    min-width: 100%;
		    min-height: 100%;
}
```
O parâmetro position como absolute, com suas larguras e alturas mínimas marcados como 100% servirão para emular o comportamento do body. Isso só é necessário porque alguns sistemas costumam ter áreas menores do que a primeira dobra do navegador. Nesse caso, apenas, é necessário aplicar esses três parâmetros.

Já para o CSS do bloco de mensagem, você pode fazer algo do jeito que preferir. Apenas é importante lembrar que esse bloco deverá ficar com position absolute, ou fixed, dependendo de como for sua aplicação, para que possa se encaixar no local correto.
```
.mensagem_area{
		 position: fixed;
		 opacity: 0;
		  pointer-events: none;
		  transition: 2s ease-in-out;
		  -webkit-transition: 1s ease-in-out;
		  color: white;
		    
		  display: flex;
		  justify-content: flex-start;
		  flex-wrap: wrap;
}
.mensagem_area.show{
		    opacity: 1;
		    max-width: 100%;
		    pointer-events: all;
}
.mensagem_area .spacer{
	visibility: hidden;  
}
.mensagem_area .mensagem{
		    width: 250px;
		    padding: 15px;
		    box-sizing: border-box;
 }
.mensagem_area .mensagem h2{
		    font-size: 18px;
		    font-weight: bold;
		    margin: 0;
}
.mensagem_area .mensagem p{
		    font-size: 16px;
}
```
Criando as Funções Javascript

Agora basta que a gente crie as funções de aparecer e desaparecer o spotlight. Originalmente eu havia usado jQuery, pois ele possui soluções rápidas e funcionais como o offset nativo e outerWidth, mas com uma pesquisa rápida conseguir adaptar, apesar do código ter ficado um pouquinho maior.

O código consiste em 4 blocos:
- Capturar largura e posição em relação ao document, do objeto referência (que será passado como parâmetro), fazendo os cálculos apropriados para adição do círculo. Você irá reparar que é usado como base o raio e não o diâmetro, pois é a referência do parâmetro clip-path;
- Adicionar o clip ao container;
- Adicionar os textos da mensagem a partir dos parâmetros passados;
- Aplicar os estilos com os novos parâmetros. O timeout que precede a adição da classe show da mensagem existe para que o texto apareça após a transição do spotlight.
```
function mostrarAjuda(id_obj, titulo, mensagem){
	//Pegar raio e posição
	var raio = document.querySelector('#' + id_obj).offsetWidth / 2;
	var offset = document.querySelector('#' + id_obj).getBoundingClientRect();
		offset.top = offset.top + document.body.scrollTop;
		offset.left = offset.left + document.body.scrollLeft;
	
	//Adicionar clip
	var clip = "circle(" + parseInt(raio).toString() + "px at " + parseInt(offset.left + raio).toString() + "px " + parseInt(offset.top + offset.height/2).toString() + "px)";
	
	var container = document.querySelector('#container');
		container.style.clipPath = clip;
		container.style.webkitClipPath = clip;
		
	//Textos
	document.querySelector("#mensagemAjuda h2").innerHTML = titulo;
	document.querySelector("#mensagemAjuda p").innerHTML = mensagem;
	
	//Estilos
	document.querySelector("#mensagemAjuda .spacer").style.width = parseInt(raio * 2 + offset.left).toString() + "px";
	document.querySelector("#mensagemAjuda .spacer").style.height = parseInt(raio).toString() + "px";
	document.querySelector("#mensagemAjuda").style.top = parseInt(offset.top).toString() + "px";

	setTimeout(function(){
		document.querySelector("#mensagemAjuda").classList.add("show");
	}, 1500);
	
}
```
Por fim, basta adicionar uma função que restaure as configurações originais dos estilos e textos.
```
function ocultarAjuda(){
	//Limpar
	document.querySelector("#mensagemAjuda").classList.remove("show");
	container.style.clipPath = "circle(1920px at center)";
	container.style.webkitClipPath = "circle(1920px at center)";
	setTimeout(function(){
		document.querySelector("#mensagemAjuda h2").innerHTML = "";
		document.querySelector("#mensagemAjuda p").innerHTML = "";
	}, 2000);
}
```
Como sempre, deixei o código completo para você testar ou copiar. No caso, o código está no jsfiddle e você pode visualizar abaixo:

Se você gostou da publicação, curta e compartilhe esta página com o maior número de pessoas. Aproveite e curta nossa página do Facebook.

ATUALIZAÇÃO: Que tal experimentar uma versão com blur, usando o html2canvas? Obs. É meio pesado. Dê preferência a usar em projetos para desktop.
7 de dezembro de 2018

Como Selecionar o Item de Uma Tabela HTML

Uma dúvida foi postada no grupo de Design e Programação de nossa página, lá no Facebook, hoje. Essa pergunta era referente a como selecionar de uma linha de uma tabela HTML?

Para tal, basta usar um pouco de Javascript e CSS.

Montando a Tabela

Vamos montar, para testar, uma tabela simples, respeitando a semântica HTML básica. Vamos aproveitar para colocar logo um botão, que vai ser por onde podemos visualizar os dados da linha selecionada:

<table id='minhaTabela'>
     <thead>
          <tr>
               <th>ID</th>
               <th>Nome</th>
               <th>Idade</th>
          <tr>
     </thead>
     <tbody>
          <tr>
               <td>01</td>
               <td>Rodrigo</td>
               <td>33</td>
               </tr>
          <tr>
               <td>02</td>
               <td>Taynara</td>
               <td>21</td>
          </tr>
          <tr>
               <td>03</td>
               <td>Raveny</td>
               <td>22</td>
          </tr>
          <tr>
               <td>04</td>
               <td>Sérgio</td>
               <td>51</td>
          </tr>
          <tr>
               <td>05</td>
               <td>Alice</td>
               <td>20</td>
          </tr>
     </tbody>
</table>

<button id="visualizarDados">Visualizar Dados</button>

Agora precisamos incluir um estilo para que a tabela fique mais elegante.

É importantíssimo prestar atenção ao class “selecionado” que vai ser a referência para o seu javascript saber qual linha está selecionada na tabela.

#minhaTabela{
  width:80%;
  margin:0 auto;
  border:0;
  box-shadow: 0 5px 30px darkgrey;
  border-spacing: 0;
}

#minhaTabela thead th{
  font-weight: bold;
  background-color: black;
  color:white;
  
  padding:5px 10px;
}

#minhaTabela tr td{
  padding:5px 10px;
  text-align: center;
  
  cursor: pointer; /**importante para não mostrar cursor de texto**/
}

#minhaTabela tr td:last-child{
  text-align: right;
}

/**Cores**/
#minhaTabela tr:nth-child(odd){
  background-color: #eee;
}

/**Cor quando passar por cima**/
#minhaTabela tr:hover td{
  background-color: #feffb7;
}

/**Cor quando selecionado**/
#minhaTabela tr.selecionado td{
  background-color: #aff7ff;
}

button#visualizarDados{
  background-color: white;
  border: 1px solid black;
  width:50%;
  margin: 10px auto;
  padding:10px 0;
  display: block;
  color: black;
}

Javascript

Para sermos mais justos, vamos fazer o exemplo usando Javascript puro. No nosso exemplo, vamos contemplar a opção de selecionar uma única linha ou mais de uma linha, opção determinada apenas por um parâmetro. Ainda vamos ver como manipular os dados.

Inicialmente, precisamos capturar a tabela e adicionar, à ação de clique, uma função que adicione ou remova a classe de seleção:

var tabela = document.getElementById("minhaTabela");
var linhas = tabela.getElementsByTagName("tr");

for(var i = 0; i < linhas.length; i++){
	var linha = linhas[i];
  linha.addEventListener("click", function(){
  	//Adicionar ao atual
		selLinha(this, false); //Selecione apenas um
                //selLinha(this, true); //Selecione quantos quiser
	});
}

A função selLinha() vai ser responsável por adicionar ou remover a class “selecionado” do nó. Passamos também um parâmetro que vai determinar se poderá selecionar mais que uma linha ou apenas uma. O primeiro laço, caso múltiplos seja falso, irá apenas desmarcar todos as linhas antes de marcar a linha clicada.

/**
Caso passe true, você pode selecionar multiplas linhas.
Caso passe false, você só pode selecionar uma linha por vez.
**/
function selLinha(linha, multiplos){
  if(!multiplos){
  	var linhas = linha.parentElement.getElementsByTagName("tr");
        for(var i = 0; i < linhas.length; i++){
           var linha_ = linhas[i];
           linha_.classList.remove("selecionado");    
        }
  }
  linha.classList.toggle("selecionado");
}

Agora vamos adicionar uma função ao clique do botão para que a gente possa visualizar os dados selecionados. Para isso, iremos justamente capturar apenas as linhas que tiverem a class “selecionado” e, através de um laço, vamos concatenar os valores dentro dos nós <td> da(s) linha(s) selecionada(s).

/**
Exemplo de como capturar os dados
**/
var btnVisualizar = document.getElementById("visualizarDados");

btnVisualizar.addEventListener("click", function(){
	var selecionados = tabela.getElementsByClassName("selecionado");
  //Verificar se eestá selecionado
  if(selecionados.length < 1){
  	alert("Selecione pelo menos uma linha");
    return false;
  }
  
  var dados = "";
  
  for(var i = 0; i < selecionados.length; i++){
  	var selecionado = selecionados[i];
    selecionado = selecionado.getElementsByTagName("td");
    dados += "ID: " + selecionado[0].innerHTML + " - Nome: " + selecionado[1].innerHTML + " - Idade: " + selecionado[2].innerHTML + "\n";
  }
  
  alert(dados);
});

Vamos Testar?

ID	Nome	Idade
01	Rodrigo	33
02	Taynara	21
03	Raveny	22
04	Sérgio	51
05	Alice	20

No entanto, se você preferir ver todo código completo, acesse o JsFiddle incorporado abaixo:

Gostou do post curtinho? Tem dúvidas? Deixe seu comentário e compartilhe com quem você achar que vai gostar. Aproveite para entrar no nosso grupo de Design e Programação no Facebook ou em nossa página. Acompanhe-nos no Twitter e Instagram.

26 de junho de 2018

Gráfico / Loader Radial com CSS e Javascript Puro
Disclaimer: If you are coming from an english or international chat/group, please roll to jsfiddle at the end of this post and get all comments and explanations in english or access jsfiddle link.

Bibliotecas de gráficos existem aos montes. A maioria pesada e com poucas (ou complexas) opções de personalização. De modo que, pensei, será que é possível usar a animação do CSS para criar um gráfico leve? Como exercício, talvez eu pudesse desenvolver uma solução de gráfico radial que pudesse funcionar bem. Esse questionamento veio a partir da pergunta de uma pessoa, em um grupo, que queria criar um loading infinito com CSS.

Criando o CSS

Para poder criar a animação do load, pensei em diversas formas que já são usadas como solução, como o gradient ou gambiarras com contornos, mas eles não usam realmente o conceito da animação do raio a partir do centro. Para resolver, pensei em apelar para a trigonometria. Dividi então o círculo em 4 triângulos retângulos.

A partir daí podemos considerar a animação a partir de cada dos vértices da hipotenusa, se abrindo do raio, formando o triângulo retângulo, como no exemplo abaixo:
```
<style>
 .triangulo{
    width: 200px;
    height: 200px;
    background-color: #c1f347;
    margin:0 auto;
    animation: triangle 3s infinite  alternate;
}

@keyframes triangle {
    from   {
        clip-path: polygon(50% 0%, 0% 100%, 0 100%);
    }
    to {
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    }
}
<style>
```
OK, conseguimos criar os triângulos com o clip-path do CSS. Graças ao ele podemos colocar caminhos de uma imagem a partir de vértices. Mas como colocar isso nos 4 triângulos? Não faria o menor sentido colocar os triângulos um do lado do outro. Como fazer então para utilizar um caminho completo para dar o efeito de transição radial?

Para isso, basta fazermos um cálculo simples. Quantos vértices seriam necessários para criar um polígono que dê a volta? Bem, basta contarmos o vértices do quadrado (4) mais um ao centro que define os triângulos e mais um para fechar a animação. Ou seja, precisamos de um hexagono.
```
<style>
 .hexagono{
     width: 250px;
     height: 250px;
     background-color: #f98b2a;
     margin: 0 auto;
     animation: hexagon 3s infinite  alternate;
}

@keyframes hexagon {
     from   {
          clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
          background-color: #2af9f7;
     }
    to {
          clip-path: polygon(50% 0%, 100% 0, 100% 60%, 100% 100%, 0 100%, 0% 60%, 0 0);
     }
}
<style>
```
Agora basta manipular os vértices do hexagono para se comportar similar ao triângulo retângulo, levando os pontos do vértice, em fila, sempre ao próximo ponto do quadrado.
```
<style>
 .quadrado{
    width: 250px;
    height: 250px;
    background-color: #f98b2a;
    margin:0 auto;
    animation: square 3s infinite  alternate;
}

@keyframes square {
    0%   {
        clip-path: polygon(100% 0, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 50% 50%);
        background-color: #36ff9a;
    }
    25%  {
        clip-path: polygon(100% 0, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 50%);
        background-color: #fccf40;
    }
    50%{
        clip-path: polygon(100% 0, 100% 100%, 0% 100%, 0% 100%, 0 100%, 50% 50%);
        background-color: #f40696;
    }
    75%  {
        clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0%, 0 0, 50% 50%);
        background-color: #55aadd;
    }
    100% {
        clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0, 100% 0, 50% 50%);
        background-color: #36ff9a;
    }
}
<style>
```
Basta colocar agora a animação como linear, para evitar as pausas (o padrão possui um ease) e adicionar um elemento acima com um overflow: false e um border-radius: 50%, de forma a ficar realmente circular:

Controlando com Javascript

Podemos fazer um jeitinho para que o Javascript controle a animação. Para isso, podemos usar algumas propriedades que controlam a animação. Em especial, vamos poder pausar e continuar a animação, através do parâmetro animationPlayState.

O código completo está disponível pelo jsFiddle. O código está todo comentado e pode ser testado diretamente abaixo:

0%

Obs. Não use filtro blur ou muitas sombras se quiser compatibilidade com o Safari iOS.

Provavelmente, esta não é a melhor solução para criação de um gráfico radial. Mas é interessante vermos que podemos desenvolver novas soluções, e mais leves, a partir de tecnologias mais recentes. Se você gostou, compartilhe, se tem alguma dúvida, comente. Aproveite para curtir nossa página do Facebook e entrar no grupo, através do link abaixo.
1 de maio de 2018

Tag: javascript

HTML

Javascript

CSS

Finalizando

HTML

CSS3

Javascript

PHP

Exemplo:

HTML5

Javascript

PHP

HTML + CSS

Criando a Estrutura: HTML e o CSS3

Exemplo de uso do clip-path:

Criando as Funções Javascript

Montando a Tabela

Javascript

Vamos Testar?

Criando o CSS

Controlando com Javascript