Created
August 23, 2018 20:37
-
-
Save FusRoDah061/b18de5837acd8e6f4a869e3fc63b3f0d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function Balanca(idParent){ | |
var idBraco = "js-balanca-braco"; | |
var idPesoEsquerdo = "js-balanca-peso-esq"; | |
var idPesoDireito = "js-balanca-peso-dir"; | |
var idLegendaEsquerda = "js-peso-legenda-esq"; | |
var idLegendaDireita = "js-peso-legenda-dir"; | |
var elParent; | |
var corLegendaEsquerda = "#000"; | |
var corLegendaDireita = "#000"; | |
var animacaoAtual = null; | |
this.peso = ""; | |
this.direcao = ""; | |
this.prefixoLegenda = ""; | |
var init = function(){ | |
var css = "@charset 'UTF-8';.balanca{position:relative;display:block;width:100%;height:100%}.balanca__braco,.balanca__mastro,.balanca__peso{position:absolute;display:block}.balanca__peso>img,.balanca__peso__legenda{position:absolute;display:block;margin:0;padding:0;color:#000}.balanca__mastro{height:100%;top:0;left:50%;transform:translateX(-50%)}.balanca__braco{max-width:80%;top:5%;left:10%;right:10%;transition:.4s;transform-origin:50% 30%}.balanca__peso-dir,.balanca__peso-esq{transform-origin:50% 1%}.balanca__peso{height:52%;width:27%;top:14%;transition:.45s}.balanca__peso>img{max-height:100%;top:0;left:0}.balanca__peso-esq{left:2%}.balanca__peso-dir{right:2%}.balanca__peso__legenda{width:100%;text-align:center;font-family:Sans-serif;font-size:12pt;bottom:-12pt;left:0;right:0;font-weight:700}.pende-esq-10{transform:rotate(-10deg)}.pende-esq-15{transform:rotate(-15deg)}.pende-esq-20{transform:rotate(-20deg)}.pende-dir-10{transform:rotate(10deg)}.pende-dir-15{transform:rotate(15deg)}.pende-dir-20{transform:rotate(20deg)}.desce-peso-esq-10{transform:translate(7%,12%)}.desce-peso-esq-15{transform:translate(12%,17%)}.desce-peso-esq-20{transform:translate(17%,22%)}.sobe-peso-esq-10{transform:translate(-3%,-12%)}.sobe-peso-esq-15{transform:translate(-3%,-18%)}.sobe-peso-esq-20{transform:translate(-3%,-24%)}.desce-peso-dir-10{transform:translate(-7%,12%)}.desce-peso-dir-15{transform:translate(-12%,17%)}.desce-peso-dir-20{transform:translate(-17%,22%)}.sobe-peso-dir-10{transform:translate(3%,-12%)}.sobe-peso-dir-15{transform:translate(3%,-18%)}.sobe-peso-dir-20{transform:translate(2%,-23%)}"; | |
var html = "<div class='balanca'> <img class='balanca__mastro' src='http://lojavirtual.sysnobre.com.br/uncaflow/img/pau.png'/> <img id='js-balanca-braco' class='balanca__braco' src='http://lojavirtual.sysnobre.com.br/uncaflow/img/braco.png'/> <div id='js-balanca-peso-esq' class='balanca__peso balanca__peso-esq'> <img src='http://lojavirtual.sysnobre.com.br/uncaflow/img/peso.png'/> <p id='js-peso-legenda-esq' class='balanca__peso__legenda'></p></div><div id='js-balanca-peso-dir' class='balanca__peso balanca__peso-dir'> <img src='http://lojavirtual.sysnobre.com.br/uncaflow/img/peso.png'/> <p id='js-peso-legenda-dir' class='balanca__peso__legenda'></p></div></div>"; | |
elParent = document.getElementById(idParent); | |
elParent.insertAdjacentHTML('beforeend', '<style>' + css + '</style>'); | |
elParent.insertAdjacentHTML('beforeend', html); | |
}(); | |
this.setLegendaEsquerda = function(texto, cor){ | |
var legenda = document.getElementById(idLegendaEsquerda); | |
legenda.innerHTML = (this.prefixoLegenda + " " + texto).trim(); | |
legenda.style.color = cor; | |
} | |
this.setLegendaDireita = function(texto, cor){ | |
var legenda = document.getElementById(idLegendaDireita); | |
legenda.innerHTML = (this.prefixoLegenda + " " + texto).trim(); | |
legenda.style.color = cor; | |
} | |
this.pesar = function(pesoEsquerda, pesoDireita, atualizaLegenda = false){ | |
//Calcular a diferença do peso em porcentagem | |
pesoEsquerda = parseInt(pesoEsquerda); | |
pesoDireita = parseInt(pesoDireita); | |
var dif = (Math.abs(pesoEsquerda - pesoDireita) * 100) / (pesoEsquerda + pesoDireita); | |
var peso, direcao; | |
console.log("total: " + (pesoEsquerda + pesoDireita)); | |
console.log("dif: " + Math.abs(pesoEsquerda - pesoDireita)); | |
console.log("dif pct: " + dif); | |
if(pesoDireita == pesoEsquerda){ | |
direcao = "meio"; | |
} | |
else if(pesoDireita > pesoEsquerda){ | |
direcao = "direita"; | |
} | |
else{ | |
direcao = "esquerda"; | |
} | |
if(dif <= 15){ | |
peso = "leve"; | |
} | |
else if(dif <= 50){ | |
peso = "medio"; | |
} | |
else{ | |
peso = "pesado"; | |
} | |
if(atualizaLegenda){ | |
this.setLegendaEsquerda(pesoEsquerda); | |
this.setLegendaDireita(pesoDireita); | |
} | |
this.atualizaBalanca(direcao, peso); | |
} | |
this.atualizaBalanca = function(direcao, peso){ | |
var grau; | |
var animBraco, animPesoEsq, animPesoDir; | |
switch(peso) { | |
case "leve": | |
grau = 10; | |
break; | |
case "medio": | |
grau = 15; | |
break; | |
case "pesado": | |
grau = 20; | |
break; | |
default: | |
grau = 10; | |
} | |
if(direcao == "meio"){ | |
animBraco = ""; | |
animPesoEsq = ""; | |
animPesoDir = ""; | |
} | |
else if(direcao == "esquerda"){ | |
animBraco = "pende-esq-" + grau; | |
animPesoEsq = "desce-peso-esq-" + grau; | |
animPesoDir = "sobe-peso-dir-" + grau; | |
} | |
else if(direcao == "direita"){ | |
animBraco = "pende-dir-" + grau; | |
animPesoDir = "desce-peso-dir-" + grau; | |
animPesoEsq = "sobe-peso-esq-" + grau; | |
} | |
this.peso = peso; | |
this.direcao = direcao; | |
if(animacaoAtual != null){ | |
document.getElementById(idBraco).classList.remove(animacaoAtual.braco); | |
document.getElementById(idPesoEsquerdo).classList.remove(animacaoAtual.esq); | |
document.getElementById(idPesoDireito).classList.remove(animacaoAtual.dir); | |
} | |
document.getElementById(idBraco).classList.add(animBraco); | |
document.getElementById(idPesoEsquerdo).classList.add(animPesoEsq); | |
document.getElementById(idPesoDireito).classList.add(animPesoDir); | |
animacaoAtual = {braco: animBraco, esq: animPesoEsq, dir: animPesoDir}; | |
}; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="js-balanca-parent" style="height: 300px; width: 300px;"></div> | |
<div> | |
<br/> | |
<label for="js-peso-esquerdo">Peso no lado esquerdo</label><br/> | |
<input type="number" id="js-peso-esquerdo" min="0" value="0"/> | |
<br/><br/> | |
<label for="js-peso-direito">Peso no lado direito</label><br/> | |
<input type="number" id="js-peso-direito" min="0" value="0"/> | |
<br/> | |
</div> | |
<script type="text/javascript" src="balanca.js"></script> | |
<script> | |
var balanca = new Balanca("js-balanca-parent"); | |
var inPesoEsquerdo = document.getElementById("js-peso-esquerdo"); | |
var inPesoDireito = document.getElementById("js-peso-direito"); | |
inPesoEsquerdo.addEventListener("keyup", function(event){ | |
pesa(inPesoEsquerdo.value, inPesoDireito.value); | |
}); | |
inPesoDireito.addEventListener("keyup", function(event){ | |
pesa(inPesoEsquerdo.value, inPesoDireito.value); | |
}); | |
inPesoEsquerdo.addEventListener("mouseup", function(event){ | |
pesa(inPesoEsquerdo.value, inPesoDireito.value); | |
}); | |
inPesoDireito.addEventListener("mouseup", function(event){ | |
pesa(inPesoEsquerdo.value, inPesoDireito.value); | |
}); | |
function pesa(esquerda, direita){ | |
balanca.pesar(esquerda, direita, true); | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment