Uma ferramenta para marcar suas fotos! Nesta atividade vamos praticar:

1. diferentes eventos (mouseover, mouseout, mousemove, input);
2. colocar e remover classes;
3. definir o conteúdo de um elemento;
4. exercitar template strings;
5. recuperar e definir atributos de dados;
6. interagir com vários tipos de campos de dados e de escolha;
7. uso da propriedade CSS filter;
8. uso da FileReader API trocar a foto (desafio opcional).

Crie uma página interativa que permite o usuário configurar 2 marcações em uma foto e que mostram um balãozinho com algumas informações quando se passa o mouse sobre elas.

Além da funcionalidade de visualizar as informações das marcações no balão, também deve ser possível definir diferentes propriedades das marcações (repare a seção de controles à direita da imagem), como sua posição, tamanho, formato, título, conteúdo e cor do texto no balãozinho.

Nesta atividade, serão sugeridas formas de implementação, mas fique à vontade implementar a mesma funcionalidade de outra forma.

body
  //...
  main
    //...
    div.linha
      div.foto-anotada
        img
        div.marcacao
        div.marcacao
      div#balaozinho

      section.controles
        //...
        label
          input
        label
          input
        //...

Para esquentar: no arquivo script/controles-marcacao.js faça com que, ao marcar ou desmarcar o campo ocultar marcações, as duas .marcacao desapareçam (e não respondam a eventos de mouse).

<label>ocultar marcações: 
  <input type="checkbox" id="visibilidade-das-marcacoes" value="marcacoes-ocultas">
</label>

No arquivo script/balaozinho.js, este exercício pede que você configure o #balaozinho para que ele:

1. Apareça quando o mouse está sobre uma .marcacao
   • Ele deve ter o seguinte conteúdo:

     <div id="balaozinho">
       <h2>...título...</h2>
       <p>...conteúdo...</p>
     </div>

   • O título e conteúdo devem ser preenchidos como os atributos data-titulo e data-conteudo da .marcacao.
     • OBSERVAÇÃO: é uma boa oportunidade para usar template strings ao definir o conteúdo do balão (veja slides sobre template strings)
   • A cor do texto do balãozinho deve ser definida como o valor do atributo data-cor da .marcacao.
     • Veja no FAQ como alterar o estilo de um elemento HTML via JavaScript
2. Desapareça quando o mouse sair da .marcacao
3. Se movimente com sua posição sendo a mesma do mouse enquanto ele estiver em cima da .marcacao

Lembre-se dos eventos de mouse no FAQ.

#balaozinho {
  position: absolute;
  border: 1px solid silver;
  background-color: rgba(255, 255, 255, .9);
  font-size: 10px;
  padding: 0.5em 1em;
  border-radius: 4px;
  box-shadow: 5px 5px 8px rgba(0, 0, 0, .3);
  pointer-events: none; /* ¹ */
}

#balaozinho:empty {  /* ² */
  display: none;
}

Em script/controles-marcacao.js, torne possível que o usuário selecione¹ uma .marcacao clicando nela. A marcação selecionada deve ter a classe selecionada adicionada a ela (aí fica com a borda amarelinha).

Uma vez selecionada, preencha os campos de section.controles com os respectivos valores:

1. x, y, largura e altura: vêm do style da marcação, das propriedades left, top, width, height
   • Observação: os valores recuperados do style do elemento possuem valor e unidade de medida (eg, '200px'). Contudo, ao definir o value dos input[type="number"], deve-se passar apenas o número. Veja como extrair apenas o número de uma string no FAQ.
2. título, conteúdo e cor: vêm dos atributos de dados da .marcacao
3. formato da marcação: deve-se verificar as classes que a .marcacao possui:
   • Se ela tiver .formato-oval, deve-se "checkar" o input[type="radio"] cujo value é formato-oval
   • Senão, checkar o que tem value="formato-retangular"

¹Selecionar uma marcação: quando alguma .marcacao sofrer um click, remova a classe selecionada de quem é a marcação atual e insira essa mesma classe naquela que foi alvo do click.

De forma análoga ao exercício anterior, no mesmo arquivo script/controles-marcacao.js, agora você deve permitir o usuário alterar os controles e isso refletir no estado da .marcacao.selecionada.

Os campos que devem alterar o estado da .marcacao.selecionada são os mesmos do exercício anterior. Observe que:

1. Campos x, y, largura e altura: devem alterar o style da marcação
   • Lembre-se de concatenar o valor numérico do campo com a unidade de medida px
2. Campos título, conteúdo e cor: definem atributos de dados da marcação
3. Botão de rádio de formato: remove as classes de formato e insere novamente apenas aquela cujo botão de rádio está "checkado"

Codifique no arquivo script/controles-foto-anotada.js. Para exercitar a propriedade CSS filter, permita que o usuário escolha um filtro do select#filtro-da-foto.

Quando o usuário escolher um filtro, simplesmente altere a propriedade filter da .foto-anotada > img para o valor da opção escolhida. O FAQ mostra como pegar o valor da opção escolhida em um campo select.

<select id="filtro-da-foto">
  <option value="none">nenhum</option>
  <option value="sepia(1)">tom de cor sépia</option>
  <option value="invert(1)">cores invertidas</option>
  <option value="grayscale(1)">escala de cinza</option>
  <option value="contrast(8)">super contraste</option>
  <option value="blur(3px)">borragem</option>
  <option value="hue-rotate(300deg)">rotação de tonalidade</option>
</select>

Há um <input type="file"> que permite ao usuário escolher um arquivo de seu computador. Faça com que o usuário possa escolher uma imagem para substituir a foto.

Veja o artigo a seguir e tente identificar um código nele que faz o que você precisa: deixa usuário escolher um arquivo e o coloca como uma imagem no lugar da foto dos pokémons.

Referência: https://www.html5rocks.com/en/tutorials/file/dndfiles/

Veja algumas perguntas frequentes ao realizar esta atividade e suas respostas.

Veja os slides sobre alteração de classes. Em suma:

el.classList.add('nome-da-classe');     // coloca
el.classList.remove('nome-da-classe');  // retira
el.classList.toggle('nome-da-classe');  // coloca ou retira

O método classList.toggle() retorna um booleano indicando se colocou (true) ou se retirou (false) a classe do elemento. Por exemplo:

const colocou = el.classList.toggle('nome-da-classe');
if (colocou) {
  console.log('.nome-da-classe foi INSERIDA no elemento');
} else {
  console.log('.nome-da-classe foi REMOVIDA no elemento');
}

Além disso, ele aceita um segundo parâmetro, booleano, que o força a inserir (se true) ou a retirar (se false). Por exemplo:

const inserir = true;
el.classList.toggle('nome-da-classe', inserir);
// vai sempre inserir, mesmo que a classe já esteja lá

Veja os slides de alteração de visibilidade. Dependendo da forma usada, será possível ou não interagir com os elementos (por meio de eventos) mesmo com eles invisíveis. Use a forma mais adequada considerando que o enunciado pede para que não seja possível interagir com as marcações.

Veja os slides sobre como interagir com checkbox via JavaScript. Tendo uma referência a um <input type="checkbox">, você pode acessar a propriedade checked, assim:

const el = document....;
console.log(el.checked);  // true, se estiver marcado

A mesma lógica vale para saber se um certo botão de rádio (ie, <input type="radio">) está selecionado.

E, se quiser programaticamente marcar ou desmarcar um checkbox ou radio, vocÊ pode alterar o valor da propriedade checked para true/false, assim:

const el = document....;
el.checked = true; // marcou

Veja os slides sobre como definir o conteúdo de um elemento usando a propriedade innerHTML.

Veja os slides sobre eventos de mouse.

Veja os slides sobre alteração de estilos via JavaScript. Em suma, usamos a propriedade style de um elemento HTML e podemos recuperar ou definir o valor de cada propriedade CSS. Lembre-se que os nomes das propriedades CSS, em JavaScript, devem ser "camelCased". Por exemplo:

const el = document....;
el.style.color = 'white';
el.style.backgroundColor = 'black';
el.style.left = '10px';
el.style.position = 'absolute';

Se quiser remover todo o conteúdo de um elemento, você pode definir seu innerHTML como uma string vazia:

el.innerHTML = '';

Veja os slides sobre como pegar a posição do mouse durante um evento de mousemove.

Para extrar apenas os números de um string que começa com números, mas tem algum texto depois, você pode usar:

const numeroInteiro = parseInt(texto);
const numeroReal = parseFloat(texto);

Neste exemplo, se texto === '235.2px', o parseInt retorna 235 e o parseFloat 235.2. Lembre-se, contudo, que seja inteiro ou real, em JavaScript o único tipo de dados numérico se chama Number e é de ponto flutuante com precisão de 64 bits (equivalente ao double de C, Java).

Veja os slides sobre como pegar o value da option selecionada em um select