Ir ao conteúdo
  • Cadastre-se

bigbossbr

Membro Pleno
 Perfil  Explorar Conteúdo

  • Posts

    48

  • Cadastrado em

  • Última visita

  1. bigbossbr
    Olá pessoal, Estou precisando matar todas as sessions quando o usuário fecahr a aba do navegador, não a janela, mais apenas a aba. Tem como fazer isto? Tentei algumas formas via javascript e php, mais nenhuma deu certo Como eu tentei e não deu certo. $(document).ready(function () { $(window).on('beforeunload unload', function () { pageCleanUp(); }); var clear = false; function pageCleanUp() { if (!clear) { $.ajax({ type: 'GET', async: false, url: '/Clear', success: function () { clear = true; } }); } } }) No Laravel/PHP só passei na rota Session::flush(); Mais não deu certo
  2. bigbossbr
    Criei um trigger para chamar a procedure, porém a mesma esta dando erro quando tento fazer um INSERT TRIGGER DELIMITER $$ CREATE TRIGGER tgr_atualiza_codigo_operacao AFTER INSERT ON propostas FOR EACH ROW BEGIN CALL pr_codigo_operacao (new.Id, new.DocumentoCliente, new.Id_banco); END $$
  3. bigbossbr
  4. bigbossbr
    Olá pessoal, Estou tentando criar uma procedure no MySql para seja disparada sempre que um novo registro for cadastrado na tabela. Ela precisa atualizar um campo específico concatenando dois outros campos de outra tabela. Isto é possível? Preciso concatenar a coluna ID e ID_BANCO, da tabela empresa e atualizar a coluna CODIGO_OPERACAO da tabela proposta.
  5. bigbossbr
    @KairanD Olá Kairan, obrigado por sua ajuda, aos poucos vou aprendendo a me virar com o linux hehehe. Deu certo as permissões. @KairanD Desculpa, esqueci de mencionar uma situação que esta ocorrendo em alguns casos. Quando eu tento dar o comando sudo chmod 777 htdocs -R por exemplo ele retorna com a mensagem sudo: /usr/bin/sudo deve ter como dono o uid 0 e tem definido o bit setuid, porém é estranho, porque eu já dei permissões teoricamente completas para a pasta raiz (no caso tanto a / quanto na opt), logo estas permissões não deveria se propagar para as pastas filhos? Caramba, acredito que devo ter feito alguma .... grande, todos os comando que eu dou agora retorna a mensagem sudo: /usr/bin/sudo deve ter como dono o uid 0 e tem definido o bit setuid, um simples sudo apt update esta retornando esta mensagem
  6. bigbossbr
    @Rui Guilherme Opa Rui, obrigado pela ajuda, fiz algumas adaptações e finalizei o código, caso queira ver em funcionamento esta na url https://jktraderpro.com/memory-match/ Segue o código para quem quiser estuar ou até melhorar. Só ajustar as imagens e sons nas pastas HMTL <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./css/style.css"> <title>Memory Match</title> </head> <body> <audio id="audio" src=""></audio> <div class="container"> <img src="./images/match.webp" id="imgMatchTtile"> <div class="cards"> <div class="card" id="0"></div> <div class="card" id="1"></div> <div class="card" id="2"></div> <div class="card" id="3"></div> <div class="card" id="4"></div> <div class="card" id="5"></div> <div class="card" id="6"></div> <div class="card" id="7"></div> <div class="card" id="8"></div> <div class="card" id="9"></div> <div class="card" id="10"></div> <div class="card" id="11"></div> </div> <img src="./images/match.webp" id="imgMatch"> </div> <div id="modalEndGame"> <img id="endGame" src="./images/end-game.jpeg" alt=""> <button id="btnEndGame">JOGAR NOVAMENTE</button> </div> <script src="./js/script.js"></script> </body> </html> Javascript //Constantes const cards = document.querySelector('.cards') const card = document.querySelectorAll('.card') const flipCard = document.querySelectorAll('flipCard') const btnEndGame = document.querySelector('#btnEndGame') //Para controlar a modal endGame var modalEndGame = document.querySelector('#modalEndGame') modalEndGame.style.display = 'none'; var imgMatch = document.querySelector('#imgMatch') //Arrays com os sons const songs = [ './songs/match.wav', './songs/flip-card.wav', './songs/end-game.wav' ] const paySong = (key) => { var som = document.getElementById("audio"); som.src = songs[key]; som.play(); } //verificar os acerto var hits = 0; //Combinações possíveis para acertos const calculateResult = (cardOne, cardTwo) => { const equals = [ ['imgCard_0', 'imgCard_6'], ['imgCard_1', 'imgCard_7'], ['imgCard_2', 'imgCard_8'], ['imgCard_3', 'imgCard_9'], ['imgCard_4', 'imgCard_10'], ['imgCard_5', 'imgCard_11'], ] let result = false equals.map((prop) => { if ((cardOne === prop[0] || cardOne === prop[1]) && (cardTwo === prop[0] || cardTwo === prop[1])) { result = true } }) return result } //Gerar background e as cartas const startGame = () => { hits = 0; rotateCards = []; arr = sort(arr); for (let i = 0; i < arr.length; i++) { card[i].innerHTML = `<div class="flipCard" id="flipCard_${arr[i]}"><img class="imgCard" id="imgCard_${arr[i]}" src="./images/avengers.png"></div>`; card[i].style.backgroundImage = "url(images/" + arr[i] + ".jpg)"; card[i].style.backgroundSize = "cover"; card[i].style.backgroundPosition = "center"; card[i].style.backgroundRepeat = "no-repeat"; } modalEndGame.style.display = 'none'; btnEndGame.addEventListener('click', startGame, false) } //Array que verifica as cartas que forma viradas var rotateCards = []; var clickCard = []; //Montando o array das cartas var arr = [] for (var i = 0; i < card.length; i++) { arr.push(card[i].id) } //Sortear as cartas com base no array montado anteriormente const sort = (oldArray) => { var newArray = []; while (newArray.length != arr.length) { var sortCard = Math.floor(Math.random() * oldArray.length) if (newArray.indexOf(oldArray[sortCard]) < 0) { newArray.push(oldArray[sortCard]); } } return newArray; } //Rodar a carta quando for clicado const rotateCard = (ev) => { const verifyClick = ev.target.classList; if (verifyClick.contains('flipCard') || verifyClick.contains('imgCard')) { const imgCard = ev.target.id; const elCard = ev.target const child = elCard.children.length > 0 ? elCard.children.item('id') : false; if (rotateCards.length < 2) { paySong(1) if (child != false) { if (child.classList.length > 1) { return; } } if (verifyClick.contains("imgCard") || verifyClick.contains("hover")) { ev.target.classList.toggle('hover') } else if (verifyClick.contains("flipCard")) { child.classList.remove('hover') } rotateCards.push(elCard); clickCard.push(imgCard); if (clickCard.length == 2) { if (calculateResult(clickCard[0], clickCard[1])) { rotateCards[0].parentNode.classList.add('match') rotateCards[1].parentNode.classList.add('match') paySong(0) hitCardCombination(); hits++; rotateCards = []; clickCard = []; if (hits === 6) { endGame(); paySong(2) } } } } else { paySong(1) rotateCards[0].classList.toggle('hover') rotateCards[1].classList.toggle('hover') rotateCards = []; clickCard = []; } } } const cardClick = document.addEventListener('click', rotateCard, false) //Modal para final do jogo const endGame = () => { modalEndGame.style.display = 'flex'; btnEndGame.addEventListener('click', startGame, false) } //Função para mostrar que o usuário acertou um combinação const hitCardCombination = () => { imgMatch.style.zIndex = 1; imgMatch.style.top = 45 + "%"; imgMatch.style.opacity = 0; setTimeout(function () { imgMatch.style.zIndex = -1; imgMatch.style.top = 20 + "%"; imgMatch.style.opacity = 1; }, 1500); } startGame(); CSS body, html { margin: 0; padding: 0; background: #240128; text-align: center; } .container{ width: 970px; margin: 0 auto; } #imgMatchTtile{ width: 556px; margin-left: auto; margin-right: auto; } h1{ font-size: 35px; font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-weight: 900; text-align: center; } .cards{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; background: rgb(86 2 51); border: 1px solid #000; justify-content: center; align-items: center; border-radius: 10px; box-shadow: rgb(182 35 214) 0 0 5px 1px; } .card{ display: flex; width: 150px; height: 250px; border-radius: 15px; background: #fff; margin: 5px; justify-content: center; align-items: center; background: #fff; } .card:hover{ cursor: pointer; box-shadow: rgb(104 120 241 / 80%) 0 0 5px 1px; } .imgCard{ backface-visibility: hidden; transition: all 1s; } .hover{ transform: rotateY(-180deg); } .card .flipCard, img{ display: flex; width: 150px; height: 250px; border-radius: 15px; } .flipCardHover{ transform: rotateY(-180deg); } #modalEndGame{ display: none; flex-wrap: wrap; position: absolute; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.75); justify-content: center; align-items: center; } #btnEndGame{ position: absolute; top: 70%; width: 350px; height: 70px; background-color: rgb(182 35 214); color: #240128; font-size: 25px; font-weight: 900; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; z-index: 2; border-radius: 50px; } #endGame{ width: 65%; height: 65%; transition-property: top, opacity; transition-duration: 2.5s; z-index: 1; } .hover, .match{ border: 2px solid #81abf9; background-color: rgba(177, 177, 177, 0.8); box-shadow: rgb(104 120 241 / 80%) 0 0 5px 1px; } #imgMatch{ position: absolute; top: 20%; left: 35%; width: 556px; transition-property: top, opacity; transition-duration: 2.5s; z-index: -1; }
  7. bigbossbr
    Também tentei desta forma sem sucesso for (i = 0; i < equals.length; i++) { if (clickCard.indexOf(equals[i]) >= 0) { console.log(equals[i]); } }
  8. bigbossbr
    @KairanD Olá Kairan, vou testar aqui. Obrigado
  9. bigbossbr
    Olá pessoal, Como faço para comparar se conjunto de dados de um array contém no outro array javascript? Array 1 //Combinações possíveis para acertar a carta const equals = [ ['imgCard_0', 'imgCard_6'], ['imgCard_1', 'imgCard_7'], ['imgCard_2', 'imgCard_8'], ['imgCard_3', 'imgCard_9'], ['imgCard_4', 'imgCard_10'], ['imgCard_5', 'imgCard_11'], ] Array 2 de nome rotateCards criado dinamicamente conforme o usuário clica na carta ["imgCard_0", "imgCard_9"] Preciso verificar se as duas cartas clicadas por ele, estão nas possíveis combinações do array 1 tentei fazer com indexOf, mais sempre retorna -1, ou seja, não encontrado. tentei também assim const equal = !rotateCards.some((val, idx) => val !== equals[idx]), e também sem sucesso até o momento Abaixo imagem do console.log, nesta tela é possível ver que a combinação foi satisfeita, porém a verificação acima deu false
  10. bigbossbr
    Olá pessoal, Resolvi começar a utilizar o linux, depois de muito tempo criando resistência hehehe, e óbvio estão surgindo varias dificuldades, que para alguns com certeza serão até coisas simples ou básicas provavelmente. Instalei a versão 20.04 do Ubuntu, mais estou tento dificuldades de como definir o meu HD todo ou uma partição especifica dele com chmod 777, para uma pasta específica eu já fiz (sudo chmod 777 htdocs -R), mais mesmo assim não consigo favoritar ela, acredito que seja porque fica mostrando a informação que não sou proprietário. Também tive problemas em tentar abrir um arquivo que esta na partição de backup que tinha o windows, acabei tendo que copiar o arquivo para uma pasta do linux (exemplo, pasta imagens), para dai poder abrir/editar o arquivo. Obrigado pela ajuda de todos.
  11. bigbossbr
    Efetuei algumas melhorias no código afim de deixá-lo menos repetitivo, e acredito que esta tudo funcionando. Se tiverem alguma sugestão, sempre é bem vinda. $(document).ready(function () { const hexToRGB = (hex, alpha) => { var r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16); if (alpha) { return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")"; } else { return "rgb(" + r + ", " + g + ", " + b + ")"; } } const colorInti = (color, op, hl, vl, br, sf, i = '') => { return hexToRGB(color, op) + ' ' + hl + 'px ' + vl + 'px ' + br + 'px ' + sf + 'px ' + i; } //QUAIS CAMPOS E ELEMENTOS const horizontalLength = $('#horizontal-length'); const verticalLength = $('#vertical-length'); const blurRadius = $('#blur-radius'); const spreedField = $('#spread-field'); const boxColor = $('#box-color'); const backgroundColor = $('#background-color'); const shadowColor = $('#shadow-color'); const shadowOpacity = $('#shadow-opacity'); const colorBoxPanel = $('#box-shadow-object'); const colorBackgroundColor = $('#box-shadow-wrapper'); const boxCode = $('#box-shadow-code'); //VALOR DOS CAMPOS var valHorizontalLength = horizontalLength.val(); var valVerticalLength = verticalLength.val(); var valBlurRadius = blurRadius.val(); var valSpreedField = spreedField.val(); var valBoxColor = boxColor.val(); var valBackgroundColor = backgroundColor.val(); var valShadowColor = shadowColor.val(); var valShadowOpacity = shadowOpacity.val(); var tab = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'; var shadowBoxPanel; var inset; // INSET BUTTON $(".option-panel input").checkboxradio(); $(".option-panel .option").click(function () { var option = $(this).attr('id'); inset = option == 'inset' ? 'inset' : ''; updateShadow(); codeUpdate(); }) //SLIDERS $('.slider-bar').slider({ value: 10, min: -200, max: 200, step: 1, slide: function (event, ui) { let selected = $(this).attr('id'); if (selected == 'slider-horizontal-bs') { $("#horizontal-length").val(ui.value); valHorizontalLength = ui.value; colorBoxPanel.css('box-shadow', colorInti(valShadowColor, valShadowOpacity, valHorizontalLength, valVerticalLength, valBlurRadius, valSpreedField, inset)); } else if (selected == 'slider-vertical-bs') { $("#vertical-length").val(ui.value); valVerticalLength = ui.value; colorBoxPanel.css('box-shadow', colorInti(valShadowColor, valShadowOpacity, valHorizontalLength, valVerticalLength, valBlurRadius, valSpreedField, inset)); } else if (selected == 'slider-spread-field') { $("#spread-field").val(ui.value); valSpreedField = ui.value; colorBoxPanel.css('box-shadow', colorInti(valShadowColor, valShadowOpacity, valHorizontalLength, valVerticalLength, valBlurRadius, valSpreedField, inset)); } codeUpdate(); } }); //SOMENTE PARA CASO DO SLIDER DE OPACITY $('#slider-opacity-bs').slider({ value: 0.7, min: 0, max: 1, step: 0.01, slide: function (event, ui) { $("#shadow-opacity").val(ui.value); valShadowOpacity = ui.value; colorBoxPanel.css('box-shadow', colorInti(valShadowColor, valShadowOpacity, valHorizontalLength, valVerticalLength, valBlurRadius, valSpreedField, inset)); codeUpdate(); } }); //SOMENTE PARA CASO DO SLIDER BLUR RADIUS $('#slider-blur-bs').slider({ value: 50, min: 0, max: 300, step: 1, slide: function (event, ui) { $("#blur-radius").val(ui.value); valBlurRadius = ui.value; colorBoxPanel.css('box-shadow', colorInti(valShadowColor, valShadowOpacity, valHorizontalLength, valVerticalLength, valBlurRadius, valSpreedField, inset)); codeUpdate(); } }); const optionsSpectrum = { showInput: true, showAlpha: true, preferredFormat: "rgb" } const cores = { boxColor: '', backgroundColor: '', shadowColor: '' } $(".colorpicker").spectrum({ optionsSpectrum, move: function (color) { let selected = $(this).attr('id'); const colorEl = () => cores[($(this).attr('id'))] = hexToRGB(color.toHexString(), color['_a']); if (selected == 'box-color') { valBoxColor = colorEl(); colorBoxPanel.css('background-color', valBoxColor); codeUpdate(); } else if (selected == 'shadow-color') { valShadowColor = color.toHexString(); valShadowOpacity = color['_a']; shadowBoxPanel = colorInti(valShadowColor, valShadowOpacity, valHorizontalLength, valVerticalLength, valBlurRadius, valSpreedField, inset); colorBoxPanel.css('box-shadow', shadowBoxPanel); codeUpdate(); } else if (selected == 'background-color') { valBackgroundColor = colorEl(); colorBackgroundColor.css('background-color', valBackgroundColor); codeUpdate(); } } }) const codeUpdate = () => { if (valBoxColor) { valBoxColor = valBoxColor; } boxCode.html( '<span class=text-danger>.sua-classe</span> {' + '<div>' + tab + 'background-color: ' + valBoxColor + ';</div>\n' + '<div>' + tab + '<i>-webkit-box-shadow: ' + colorInti(valShadowColor, valShadowOpacity, valHorizontalLength, valVerticalLength, valBlurRadius, valSpreedField, inset) + ';</div>\n' + '<div>' + tab + '-moz-box-shadow: ' + colorInti(valShadowColor, valShadowOpacity, valHorizontalLength, valVerticalLength, valBlurRadius, valSpreedField, inset) + ';</div>\n' + '<div>' + tab + 'box-shadow: ' + colorInti(valShadowColor, valShadowOpacity, valHorizontalLength, valVerticalLength, valBlurRadius, valSpreedField, inset) + ';</div>\n' + '</i>}' ); } const updateShadow = () => { colorBoxPanel.css({ '-webkit-box-shadow': colorInti(valShadowColor, valShadowOpacity, valHorizontalLength, valVerticalLength, valBlurRadius, valSpreedField, inset), '-moz-box-shadow': colorInti(valShadowColor, valShadowOpacity, valHorizontalLength, valVerticalLength, valBlurRadius, valSpreedField, inset), 'box-shadow': colorInti(valShadowColor, valShadowOpacity, valHorizontalLength, valVerticalLength, valBlurRadius, valSpreedField, inset), 'background-color': valBoxColor }) } updateShadow(); codeUpdate(); //FUNÇÃO PARA COPIAR O CÓDIGO CRIADO $('#copy-code').click(function () { var txt = $('#box-shadow-code').text(); txt = txt.replace(' ', ''); txt = txt.replace(' ', ''); txt = txt.replace(' ', ''); txt = txt.replace(' ', ''); $('body').append('<textarea id="copied">'); $('#copied').html(txt); $('#copied').select(); var ok = document.execCommand('copy'); $('#copied').remove(); if (ok) { $('#modalAlertCodCopied').modal('show'); } }); });
  12. bigbossbr
    Efetuei algumas melhorias no código afim de deixá-lo menos repetitivo, porém ainda não consegui entender o porque as informações estão sendo resetadas a cada input que pe modificado. Onde estou me perdendo? $(document).ready(function () { const hexToRGB = (hex, alpha) => { var r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16); if (alpha) { return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")"; } else { return "rgb(" + r + ", " + g + ", " + b + ")"; } } const colorInti = (color, op, hl, vl, br, sf, i = '') => { return hexToRGB(color, op) + ' ' + hl + 'px ' + vl + 'px ' + br + 'px ' + sf + 'px ' + i; } //QUAIS CAMPOS E ELEMENTOS const horizontalLength = $('#horizontal-length'); const verticalLength = $('#vertical-length'); const blurRadius = $('#blur-radius'); const spreedField = $('#spread-field'); const boxColor = $('#box-color'); const backgroundColor = $('#background-color'); const shadowColor = $('#shadow-color'); const shadowOpacity = $('#shadow-opacity'); const colorBoxPanel = $('#box-shadow-object'); const colorBackgroundColor = $('#box-shadow-wrapper'); //VALOR DOS CAMPOS var valHorizontalLength = horizontalLength.val(); var valVerticalLength = verticalLength.val(); var valBlurRadius = blurRadius.val(); var valSpreedField = spreedField.val(); var valBoxColor = boxColor.val(); var valBackgroundColor = backgroundColor.val(); var valShadowColor = shadowColor.val(); var valShadowOpacity = shadowOpacity.val(); var shadowBoxPanel; var inset; // INSET BUTTON $(".option-panel input").checkboxradio(); $(".option-panel .option").click(function () { var option = $(this).attr('id'); inset = option == 'inset' ? 'inset' : 'outline'; }) //SLIDERS $('.slider-bar').slider({ value: 10, min: -200, max: 200, step: 1, slide: function (event, ui) { let selected = $(this).attr('id'); if (selected == 'slider-horizontal-bs') { $("#horizontal-length").val(ui.value); colorBoxPanel.css('box-shadow', colorInti(valShadowColor, valShadowOpacity, ui.value, valVerticalLength, valBlurRadius, valSpreedField, inset)); } else if (selected == 'slider-vertical-bs') { $("#vertical-length").val(ui.value); colorBoxPanel.css('box-shadow', colorInti(valShadowColor, valShadowOpacity, valHorizontalLength, ui.value, valBlurRadius, valSpreedField, inset)); } else if (selected == 'slider-blur-bs') { $("#shadow-opacity").val(ui.value); colorBoxPanel.css('box-shadow', colorInti(valShadowColor, valShadowOpacity, valHorizontalLength, valVerticalLength, ui.value, valSpreedField, inset)); } else if (selected == 'slider-spread-field') { $("#shadow-opacity").val(ui.value); colorBoxPanel.css('box-shadow', colorInti(valShadowColor, valShadowOpacity, valHorizontalLength, valVerticalLength, valBlurRadius, ui.value, inset)); } } }); //SOMENTE PARA CASO DO SLIDER DE OPACITY $('#slider-opacity-bs').slider({ value: 0.7, min: 0, max: 1, step: 0.01, slide: function (event, ui) { $("#shadow-opacity").val(ui.value); colorBoxPanel.css('box-shadow', colorInti(valShadowColor, ui.value, valHorizontalLength, valVerticalLength, valBlurRadius, valSpreedField, inset)); } }); const optionsSpectrum = { showInput: true, showAlpha: true, preferredFormat: "rgb" } const cores = { boxColor: '', backgroundColor: '', shadowColor: '' } $(".colorpicker").spectrum({ optionsSpectrum, move: function (color) { let selected = $(this).attr('id'); const colorEl = () => cores[($(this).attr('id'))] = hexToRGB(color.toHexString(), color['_a']); console.log(selected) if (selected == 'box-color') { colorBoxPanel.css('background-color', colorEl()); } else if (selected == 'shadow-color') { shadowBoxPanel = colorEl() + ' ' + valHorizontalLength + 'px ' + valVerticalLength + 'px ' + valBlurRadius + 'px ' + valSpreedField + 'px '; colorBoxPanel.css('box-shadow', shadowBoxPanel); } else if (selected == 'background-color') { colorBackgroundColor.css('background-color', colorEl()); } } }) colorInti(valShadowColor, valShadowOpacity, valHorizontalLength, valVerticalLength, valBlurRadius, valSpreedField, inset); });
  13. bigbossbr
    @Rui Guilherme Opa Rui, obrigado pela dica, estou aprendendo muito com todos estes materiais que estou desenvolvendo. Vou colocar o HTML aqui para ajudar. <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="./img/css.svg" sizes="16x16 32x32" type="image/png"> <title>CSS Generator - Border Radius/Noise Texture/Box Shadow/Gradiente Generator</title> <!-- STYLES CSS --> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <link href='https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.css' rel='stylesheet'> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/spectrum-colorpicker2/dist/spectrum.min.css"> <link type="text/css" rel="stylesheet" href="./css/all.css"> </head> <body> <div class="container mt-3"> <!-- NAVEGAÇÃO --> <nav class="navbar navbar-light bg-light"> <a href="#" class="navbar-brand"> <img src="./img/css.svg" width="30" height="30" alt=""> CSS Generator </a> <ul class="nav nav-pills"> <li class="nav-item"><a class="nav-link" href="#">Box Shadow</a></li> <li class="nav-item"><a class="nav-link" href="#">Gradient</a></li> <li class="nav-item"><a class="nav-link" href="#">Border Radius</a></li> <li class="nav-item"><a class="nav-link" href="#">Lorem Ipsum</a></li> <li class="nav-item"><a class="nav-link" href="#">Lorem Ipsum IMG</a></li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="faz fa-bars"></i> </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Ação</a> <a class="dropdown-item" href="#">Outra ação</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Algo mais aqui</a> </div> </li> </ul> </nav> <div class="row justify-content-center mt-2 mb-3"> <div class="banner "> <img src="holder.js/728x90?theme=gray"> </div> </div> <!-- CONTEÚDO PRINCIPAL --> <div class="row"> <div class="col-sm-4"> <div class="card"> <div class="card-header title"> Configurações </div> <div class="card-body"> <!-- CONFIG HORIZONTAL LENGTH --> <div class="block-config"> <div class="row"> <label for="horizontal-length">Tamanho Horizontal</label> <label class="align-right" for="horizontal-length">px</label> <div class="text-1"> <input id="horizontal-length" type="text" value="10"> </div> </div> <div id="slider-horizontal-bs" class="slider-bar large ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"> <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 21.5%;"></a> </div> <!-- CONFIG VERTICAL LENGTH --> <div class="row mtop15"> <label for="vertical-length">Tamanho Vertical</label> <label class="align-right" for="vertical-length">px</label> <div class="text-1"> <input id="vertical-length" type="text" value="10"> </div> </div> <div id="slider-vertical-bs" class="slider-bar large ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"> <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 52.5%;"></a> </div> </div> <!-- CONFIG BLUR RADIUS --> <div class="block-config"> <div class="row"> <label for="blur-radius">Propriedade Blur Radius</label> <label class="align-right" for="blur-radius">px</label> <div class="text-1"> <input id="blur-radius" type="text" value="5"> </div> </div> <div id="slider-blur-bs" class="slider-bar large ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"> <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 3.33333%;"></a> </div> <!-- CONFIG BLUR RADIUS SPREAD RADIUS--> <div class="row mtop15"> <label for="spread-field">Tamanho do Raio</label> <label class="align-right" for="spread-field">px</label> <div class="text-1"> <input id="spread-field" type="text" value="0"> </div> </div> <div id="slider-spread-field" class="row-s slider-bar large ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"> <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 50%;"></a> </div> </div> <!-- CONFIG SHADOW COLOR --> <div class="block-config"> <div class="row color-row"> <label for="shadow-color">Cor da Sombra</label> <div class="text-2"> <input id="shadow-color" type="text" value="#08713c"> </div> </div> </div> <!-- CONFIG BACKGROUND COLOR --> <div class="block-config"> <div class="row color-row"> <label for="background-color">Cor do Background</label> <div class="text-2"> <input id="background-color" type="text" value="#ffffff"> </div> </div> </div> <!-- CONFIG BOX COLOR --> <div class="block-config"> <div class="row color-row"> <label for="box-color">Box Cor</label> <div class="text-2"> <input id="box-color" type="text" value="#1a6880"> </div> </div> </div> <!-- CONFIG OPACITY --> <div class="block-config"> <div class="row"> <label for="shadow-opacity">Opacidade</label> <div class="text-1"> <input id="shadow-opacity" type="text" value="0.75"> </div> </div> <div id="slider-opacity-bs" class="slider-bar large ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"> <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 70%;"></a> </div> </div> <!-- CONFIG OUTLINE E INSET --> <div class="block-config"> <div class="option-panel"> <fieldset> <label for="outline" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label">Outline</label> <input type="radio" name="option" id="outline" class="ui-checkboxradio ui-helper-hidden-accessible option"> <label for="inset" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label">Inset</label> <input type="radio" name="option" id="inset" class="ui-checkboxradio ui-helper-hidden-accessible option"> </fieldset> </div> </div> </div> </div> </div> <div class="col-sm-8"> <div class="card"> <div class="card-header title"> Resultado </div> <div class="card-body"> <div id="box-shadow-wrapper" class="right-column" style="background-color: rgb(255, 255, 255);"> <div class="box-wrap"> <div id="box-shadow-code" class="content"> <div>-webkit-box-shadow: -9px -5px 5px 0px rgba(0,0,0,0.75);</div> <div>-moz-box-shadow: -9px -5px 5px 0px rgba(0,0,0,0.75);</div> <div>box-shadow: -9px -5px 5px 0px rgba(0,0,0,0.75);</div> </div> <div id="box-shadow-panel"> <div id="box-shadow-object"> <a id="copy-text-input" class="btn-link-1" href="javascript:;">Copiar Código</a> </div> </div> </div> </div> </div> </div> </div> </div> <div class="row justify-content-center mt-5 mb-3"> <div class="banner "> <img src="holder.js/728x90?theme=gray"> </div> </div> <!-- FOOTER --> <div class="row"> <footer class="container py-5"> <div class="row border-top pt-3"> <div class="col-12 col-md"> <a href="#" class="navbar-brand"> <img src="./img/css.svg" width="30" height="30" alt=""> CSS Generator </a> <small class="d-block mb-3 text-muted">© 2021</small> </div> <div class="col-6 col-md"> <h5>Features</h5> <ul class="list-unstyled text-small"> <li><a class="text-muted" href="#">Algo legal</a></li> <li><a class="text-muted" href="#">Feature aleatória</a></li> <li><a class="text-muted" href="#">Recursos para times</a></li> <li><a class="text-muted" href="#">Coisas para desenvolvedores</a></li> <li><a class="text-muted" href="#">Outra coisa legal</a></li> <li><a class="text-muted" href="#">Último item</a></li> </ul> </div> <div class="col-6 col-md"> <h5>Fontes</h5> <ul class="list-unstyled text-small"> <li><a class="text-muted" href="#">Fonte</a></li> <li><a class="text-muted" href="#">Nome da fonte</a></li> <li><a class="text-muted" href="#">Outra fonte</a></li> <li><a class="text-muted" href="#">Fonte final</a></li> </ul> </div> <div class="col-6 col-md"> <h5>Fontes</h5> <ul class="list-unstyled text-small"> <li><a class="text-muted" href="#">Negócios</a></li> <li><a class="text-muted" href="#">Educação</a></li> <li><a class="text-muted" href="#">Governo</a></li> <li><a class="text-muted" href="#">Jogos</a></li> </ul> </div> <div class="col-6 col-md"> <h5>Sobre</h5> <ul class="list-unstyled text-small"> <li><a class="text-muted" href="#">Equipe</a></li> <li><a class="text-muted" href="#">Locais</a></li> <li><a class="text-muted" href="#">Privacidade</a></li> <li><a class="text-muted" href="#">Termos</a></li> </ul> </div> </div> </footer> </div> </div> <!-- SCRIPTS JS --> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/spectrum-colorpicker2/dist/spectrum.min.js"></script> <script src="./js/box-shadow.js"></script> <script src="./js/holder.js"></script> <script src="./js/script.js"></script> </body> </html>
  14. bigbossbr
    @DiF Então, estou analisando agora o código e algo que esta me deixando um pouco preocupado é ter muitas partes iguais, ai fico imaginando como da para criar algumas funções para receber determinadas informações iguais, para chamar depois, por exemplo: Como diminuir este código, tendo em vida que as configurações do plugin spectrum é iguais para todas as chamadas? //COLOR PIKER SPECTRUM boxColor.spectrum({ showInput: true, showAlpha: true, preferredFormat: "rgb", move: function (color) { colorBoxPanel.css('background-color', color.toHexString()); } }); backgroundColor.spectrum({ showInput: true, showAlpha: true, preferredFormat: "rgb", move: function (color) { colorBackgroundColor.css('background-color', color.toHexString()); } }); shadowColor.spectrum({ showInput: true, showAlpha: true, preferredFormat: "rgb", move: function (color) { r = hexToRgb(color.toHexString())[0]; g = hexToRgb(color.toHexString())[1]; b = hexToRgb(color.toHexString())[2]; shadowBoxPanel = 'rgba(' + r + ',' + g + ',' + b + ', ' + valShadowOpacity + ') ' + valHorizontalLength + 'px ' + valVerticalLength + 'px ' + valBlurRadius + 'px ' + valSpreedField + 'px '; colorBoxPanel.css('box-shadow', shadowBoxPanel); console.log(shadowBoxPanel) } }); Outra situação que notei, foi que, quando eu atualizo um dos itens, ao modificar outro, o antigo é zerado, a variável não esta ficando com o novo valor, estranho Algum valores joguei em um arrays, não sei se é a melhor forma, mais foi o que pensei no momento, assim todas as configurações que este plugin tiver, jogo no mesmo arrays evitando replicar o código const optionsSpectrum = [ { showInput: true, showAlpha: true, preferredFormat: "rgb" } ]
  15. bigbossbr
    Olá pessoal, Estou criando uma sistema para criar automaticamente padrões de box-shadow, acredito que meu código pode ser bem melhorado, mais como estou ainda aprendendo, fico na dúvida de como melhorar ele para não ter tantos códigos repetidos. CÓDIGO $(document).ready(function () { const hexToRgb = hex => hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i , (m, r, g, b) => '#' + r + r + g + g + b + b) .substring(1).match(/.{2}/g) .map(x => parseInt(x, 16)) //QUAIS CAMPOS E ELEMENTOS var horizontalLength = $('#horizontal-length'); var verticalLength = $('#vertical-length'); var blurRadius = $('#blur-radius'); var spreedField = $('#spread-field'); var boxColor = $('#box-color'); var backgroundColor = $('#background-color'); var shadowColor = $('#shadow-color'); var shadowOpacity = $('#shadow-opacity'); var colorBoxPanel = $('#box-shadow-object'); var colorBackgroundColor = $('#box-shadow-wrapper'); //VALOR DOS CAMPOS var valHorizontalLength = horizontalLength.val(); var valVerticalLength = verticalLength.val(); var valBlurRadius = blurRadius.val(); var valSpreedField = spreedField.val(); var valBoxColor = boxColor.val(); var valBackgroundColor = backgroundColor.val(); var valShadowColor = shadowColor.val(); var r = hexToRgb(valShadowColor)[0]; var g = hexToRgb(valShadowColor)[1]; var b = hexToRgb(valShadowColor)[2]; var valShadowOpacity = shadowOpacity.val(); var shadowBoxPanel = 'rgba(' + r + ',' + g + ',' + b + ', ' + valShadowOpacity + ') ' + valHorizontalLength + 'px ' + valVerticalLength + 'px ' + valBlurRadius + 'px ' + valSpreedField + 'px'; var inset = $($(this).find('.right-pos')).length == 1; //ONDE APLICAR colorBoxPanel.css({ 'box-shadow': shadowBoxPanel, 'background-color': valBoxColor }); colorBackgroundColor.css('background-color', valBackgroundColor); //MUDAR CONFORME A COR E ITENS SELECIONADOS //SLIDER HORIZONTAL $('#slider-horizontal-bs').slider({ value: 10, min: -200, max: 200, step: 1, slide: function (event, ui) { $("#horizontal-length").val(ui.value); shadowBoxPanel = 'rgba(' + r + ',' + g + ',' + b + ', ' + valShadowOpacity + ') ' + ui.value + 'px ' + valVerticalLength + 'px ' + valBlurRadius + 'px ' + valSpreedField + 'px'; colorBoxPanel.css('box-shadow', shadowBoxPanel); } }); $("#horizontal-length").val($("#slider-horizontal-bs").slider("value")); //SLIDER VERTICAL $('#slider-vertical-bs').slider({ value: 10, min: -200, max: 200, step: 1, slide: function (event, ui) { $("#vertical-length").val(ui.value); shadowBoxPanel = 'rgba(' + r + ',' + g + ',' + b + ', ' + valShadowOpacity + ') ' + valHorizontalLength + 'px ' + ui.value + 'px ' + valBlurRadius + 'px ' + valSpreedField + 'px'; colorBoxPanel.css('box-shadow', shadowBoxPanel); } }); $("#vertical-length").val($("#slider-vertical-bs").slider("value")); //SLIDER OPACITY $('#slider-opacity-bs').slider({ value: 0.7, min: 0, max: 1, step: 0.01, slide: function (event, ui) { $("#shadow-opacity").val(ui.value); shadowBoxPanel = 'rgba(' + r + ',' + g + ',' + b + ', ' + ui.value + ') ' + valHorizontalLength + 'px ' + valVerticalLength + 'px ' + valBlurRadius + 'px ' + valSpreedField + 'px'; colorBoxPanel.css('box-shadow', shadowBoxPanel); } }); $("#vertical-length").val($("#slider-opacity-bs").slider("value")); // INSET BUTTON $(".option-panel input").checkboxradio(); $(".option-panel .option").click(function () { var option = $(this).attr('id'); if (option == 'inset') { shadowBoxPanel = 'rgba(' + r + ',' + g + ',' + b + ', ' + valShadowOpacity + ') ' + valHorizontalLength + 'px ' + valVerticalLength + 'px ' + valBlurRadius + 'px ' + valSpreedField + 'px ' + option; colorBoxPanel.css('box-shadow', shadowBoxPanel); } else { shadowBoxPanel = 'rgba(' + r + ',' + g + ',' + b + ', ' + valShadowOpacity + ') ' + valHorizontalLength + 'px ' + valVerticalLength + 'px ' + valBlurRadius + 'px ' + valSpreedField + 'px '; colorBoxPanel.css('box-shadow', shadowBoxPanel); } }) //COLOR PIKER SPECTRUM boxColor.spectrum({ showInput: true, showAlpha: true, preferredFormat: "hex", }); backgroundColor.spectrum({ showInput: true, showAlpha: true, preferredFormat: "rgb", }); shadowColor.spectrum({ showInput: true, showAlpha: true, preferredFormat: "rgb", }); horizontalLength.on('change', function () { horizontalLength = $(this).val(); shadowBoxPanel = valShadowColor + ' ' + horizontalLength + 'px ' + valVerticalLength + 'px ' + valBlurRadius + 'px ' + valSpreedField + 'px'; colorBoxPanel.css('box-shadow', shadowBoxPanel); }) shadowColor.on('change', function () { valShadowColor = $(this).val(); shadowBoxPanel = valShadowColor + ' ' + valHorizontalLength + 'px ' + valVerticalLength + 'px ' + valBlurRadius + 'px ' + valSpreedField + 'px'; colorBoxPanel.css('box-shadow', shadowBoxPanel); }); boxColor.on('change', function () { boxColor = $(this).val(); colorBoxPanel.css('background-color', boxColor); }); backgroundColor.on('change', function () { backgroundColor = $(this).val(); colorbackgroundColor.css('background-color', backgroundColor); }); }); Os inputs

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

Mais

×
×
  • Criar novo...