O meu primeiro programa "front-end"

Frank K Hosaka · Maio 7, 2022

Esse programa só funciona se você não usar a tecla {ENTER}, ao clicar em 'ola' ou 'mundo', ele abre um input onde você pode digitar uma outra palavra para substituir a palavra que você selecionou. Para o input funcionar, basta você clicar fora da área do input.

Se você apertar a tecla {ENTER}, isso vai repaginar tudo, e vai voltar a tudo o que era antes. Não sei como evitar a repaginação com a tecla {ENTER}.

Pretendo usar esse algorítimo para alterar o registro de uma tabela - hoje eu tenho diario.php e detalhe.php, pretendo alterar tudo na tela do diario.php.

<style>
form {margin: 0;} 
.modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top:170;
		 width: 100%;   height: 50%;   overflow: auto; }
.modal-content { background-color: #fefefe; margin: auto; padding: 10px; border: 1px solid #888; width: 80%;}
</style>
<script>
var lig = "";
function mudali2() {divmodal.style.display="block";lig="li2";}
function mudali3() {divmodal.style.display="block";lig="li3";}
function mudar()  {
	if (lig=="li2") {li2.innerHTML=inpmudar.value;}
	if (lig=="li3") {li3.innerHTML=inpmudar.value;}
	divmodal.style.display="none";}
</script>
<li id="li2" onclick="mudali2()">olá</li>
<li id="li3" onclick="mudali3()">mundo</li>
<div id="divmodal" class="modal" >
	<div class="modal-content">
		<form> Mudar para:<input id="inpmudar" onchange="mudar()"></form>
	</div>
</div>

wash · Maio 8, 2022

Olá!
Segue sugestão:

<!doctype html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'>
  <meta http-equiv='X-UA-Compatible' content='ie=edge'>
  <title>Primeiro FrontEnd</title>
  <style>
    :root {
      --c-white: #fff;
      --c-black: #000;
      --c-lightBlue: #def;
      --c-almostWhite: #fafafa;
      --c-yellowHover: #ffffef;

      --c-primary: #5d89b2;
      --c-secondary: #889;
      --c-warning: #f9b115;
      --c-danger: #e55353;

      --c-gE: #eee;
      --c-gD: #ddd;
      --c-gC: #ccc;
      --c-g100: #ebedef;

      --c-shadow15: rgba(0, 0, 0, .15);
      --c-shadow50: rgba(0, 0, 0, .5);
      --c-shadow75: rgba(0, 0, 0, .75);

      --pF: 12px;

      --v-buttonBrightFactor: 1.1;

      --headerHight: 60px;
    }

    * {
      box-sizing: border-box;
    }

    html, body {
      padding: 0;
      margin: 0;
      height: 100%;
    }

    body {
      font-family: sans-serif;
      min-height: 100%;
    }

    .app {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      flex-direction: column;
    }

    main {
      flex: 1;
      min-width: 100vw;
      padding-bottom: var(--pF);
    }

    .app > header,
    .app > footer {
      padding: var(--pF);
      display: flex;
      height: var(--headerHight);
      width: 100%;
      align-items: center;
      justify-content: center;
    }

    .app > header {
      background-color: var(--c-almostWhite);
      box-shadow: 0 1px 5px var(--c-shadow15)
    }

    .app > footer {
      background-color: var(--c-g100);
      box-shadow: 0 -1px 5px var(--c-shadow15)
    }

    .card {
      background-color: var(--c-almostWhite);
      border-radius: 8px;
      box-shadow: 1px 1px 5px var(--c-shadow15);
    }

    /* modal */
    .modal {
      position: fixed;
      top: var(--headerHight);
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 55;
      display: none;
      justify-content: center;
      align-items: center;
    }

    .modal .modal-backdrop {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: repeating-linear-gradient(
        -45deg,
        rgba(0, 0, 0, .51),
        var(--c-shadow50) 20px,
        var(--c-shadow50) 20px,
        var(--c-shadow50) 40px
      );
      z-index: 55;
    }

    .modal .modal-container {
      max-width: 94vw;
      position: relative;
      z-index: 60;
      box-shadow: 2px 2px 5px var(--c-shadow15);
    }

    .modal-body {
      padding: 0 var(--pF) var(--pF);
    }

    input {
      width: 100%;
    }

    input, button {
      display: block;
      padding: 0.375rem 0.75rem;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      border-radius: 0.25rem;
      border: thin solid var(--c-gC);
      color: #212529;
      min-height: 32px;
    }

    input:focus, button:focus {
      color: #111;
      border-color: #86b7fe;
      outline: 0;
      box-shadow: 0 0 0 0.15rem rgb(13 110 253 / 25%);
    }

    button {
      cursor: pointer;
      padding: 0.375rem 1rem;
    }

    button:hover {
      box-shadow: 1px 1px 5px var(--c-shadow15);
      filter: brightness(var(--v-buttonBrightFactor));
    }

    .btn-close {
      width: 2em;
      height: 1em;
      padding: .25em .25em;
      color: var(--c-black);
      background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
      border: 0;
      opacity: .5;
    }

    .text-secondary {
      color: var(--c-secondary);
    }

    .text-end {
      text-align: right;
    }

    .text-end > * {
      margin-left: auto;
    }
  </style>
</head>
<body>
<div class='app'>
  <header>HEADER</header>
  <main>
    <ul>
      <li>A</li>
      <li>vaca</li>
      <li>foi</li>
      <li>para</li>
      <li>o</li>
      <li>brejo</li>
    </ul>
  </main>
  <footer>
    <div class='text-end'>
      <small class='text-secondary'>&copy; 2022</small>
    </div>
  </footer>
</div>
<div class="modal">
  <div class='modal-container card'>
    <div class='modal-header text-end me-2'>
      <button title='fechar modal' class='btn-close'></button>
    </div>
    <div class='modal-body'>
      Mudar para:<input type='text'>
    </div>
  </div>
  <div class='modal-backdrop'></div>
</div>
<script>
  // define qual elemento html é a modal
  const divModal = document.querySelector('.modal')
  // cria funções para a modal
  const modal = {
    open : () => {
      divModal.style.display = 'flex'
    },
    close: () => {
      divModal.style.display = 'none'
    },
  }

  // define variável que vai guardar qual li está sendo editada
  let editingLi

  const fillLi = (e) => {
    editingLi.textContent = e.target.value
  }

  // define o elemento input dentro da modal
  const inputElement = divModal.querySelector('input')

  // quando escrever no input dentro da modal, execute a função fillLi
  inputElement.addEventListener('input', fillLi)
  // quando pressionar qualquer tecla no input
  inputElement.addEventListener('keydown', e => {
    // se a tecla for enter
    if (e.key === 'Enter') {
      // limpa o input
      e.target.value = ''
      // fecha a modal
      modal.close()
    }
  })

  // define qual element html é a unorder list
  const unorderList = document.querySelector('ul')

  // quando clicar em unorderList
  unorderList.addEventListener('click', e => {
    // define qual elemento foi clicado
    const clickedElement = e.target
    // se o elemento clicado for uma <li>
    if (clickedElement.matches('li')) {
      editingLi = clickedElement
      // coloca o conteúdo da li para ser editado no input
      inputElement.value = editingLi.textContent

      // mostra a modal
      modal.open()

      // coloca o cursor no input
      inputElement.focus()
    }
  })

  // quando clicar no botão de fechar modal, fecha a modal
  divModal.querySelector('.modal-header button').addEventListener('click', modal.close)

</script>
</body>
</html>

Exemplo fucionando aqui: codepen.io/pen/oNEbpLW

screenshot para referência:

Frank K Hosaka · Maio 8, 2022

A minha segunda versão é bem melhor que a primeira. Eu criei um <input> oculto para ajudar a função 'mudar' a "lembrar" qual foi o item que foi selecionado, mas ainda não descobri como evitar a repaginação se alguém apertar a tecla {enter}.

<style>
form {margin: 0;} 
.modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top:170;
		 width: 100%;   height: 50%;   overflow: auto; }
.modal-content { background-color: #fefefe; margin: auto; padding: 10px; border: 1px solid #888; width: 80%;}
</style>
<script>
function verli(jd) {inpli.value=jd;divmodal.style.display="block"}
function mudar()  {
	var element = document.getElementById(inpli.value);
	element.innerHTML=inpmudar.value;
	divmodal.style.display="none";}
</script>
<li id="li1" onclick="verli(id)">A</li>
<li id="li2" onclick="verli(id)">vaca</li>
<li id="li3" onclick="verli(id)">foi</li>
<li id="li4" onclick="verli(id)">para</li>
<li id="li5" onclick="verli(id)">o</li>
<li id="li6" onclick="verli(id)">brejo</li>
<div id="divmodal" class="modal" >
	<div class="modal-content">
		<form> 
			Mudar para:<input id="inpmudar" onchange="mudar()">
			<input type="hidden" id="inpli">
		</form>
	</div>
</div>

Frank K Hosaka · Maio 8, 2022

Na terceira versão, eu mexi o máximo que pude no CSS .modal, quase que eu consegui botar a caixa do input em cima do elemento que foi clicado. Pelo menos, deixei mais prático, o input recebe o foco e sempre limpa.

<style>
form {margin: 0;} 
.modal { display: none; position: relative; z-index: 1; padding-top: 0px; left: 0; top:0;
		 width: 29%;   height: 20%;   overflow: absolute; }
.modal-content { background-color: #fefefe; margin: auto; padding: 0px; border: 1px solid #888; width: 80%;}
</style>
<script>
function verli(jd) {
	inpli.value=jd;
	divmodal.style.display="block";
	inpmudar.focus();}
function mudar()  {
	var element = document.getElementById(inpli.value);
	element.innerHTML=inpmudar.value;
	inpmudar.value="";
	divmodal.style.display="none";}
</script>
<li id="li1" onclick="verli(id)">A</li>
<li id="li2" onclick="verli(id)">vaca</li>
<li id="li3" onclick="verli(id)">foi</li>
<li id="li4" onclick="verli(id)">para</li>
<li id="li5" onclick="verli(id)">o</li>
<li id="li6" onclick="verli(id)">brejo</li>
<div id="divmodal" class="modal" >
	<div class="modal-content">
		<form> 
			<input id="inpmudar" onchange="mudar()" autocomplete="off">
			<input type="hidden" id="inpli">
		</form>
	</div>
</div>

Frank K Hosaka · Maio 9, 2022

Obrigado Wash pela sua sugestão. Vou experimentar o código nessa semana.

Entrar

O meu primeiro programa "front-end"

Pergunta

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

wash

Link para o comentário

Compartilhar em outros sites

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades