HTML
Visualizar impressão
[data-tooltip] {position: relative;}
[data-tooltip]:before {content: attr(data-tooltip);display: none;position: absolute;top: 4vw;left: -5vw;width: auto;white-space:pre;z-index: 100;padding: 10px;margin-top: 10px;text-decoration: none;text-align: left;font-family: "NunitoSans Regular", "Arial", sans-serif;font-size: .9vw;font-weight: bold;color: #666;}
[data-tooltip]:hover:before {display: inline-block;}
document.addEventListener("DOMContentLoaded", iniciar);
function iniciar() {
mapearEventosCSS();
}
function dataAtual() {
let data = new Date();
let dia = String(data.getDate()).padStart(2, '0');
let mes = String(data.getMonth() + 1).padStart(2, '0');
let ano = data.getFullYear();
return dia + '/' + mes + '/' + ano;
}
function visualizarImpressao() {
let canvas = document.getElementById('canvas').innerHTML;
let novaJanela = window.open('', '');
novaJanela.document.write(canvas);
novaJanela.document.close();
//limpa as linhas com o texto +
let linhas = novaJanela.document.querySelectorAll('LI');
let resposta = true;
if (!linhas) {
return
}
let map = [].map.call(
linhas,
function(linha) {
if (linha.innerText == "+") {
linha.remove();
}
}
);
//***********************
novaJanela.print();
}
function linhaNova(id) {
let linhas = document.getElementById(id).childNodes;
let resposta = true;
if (!linhas) {
return
}
let map = [].map.call(
linhas,
function(linha) {
if (linha.innerText == "+") {
resposta = false;
}
}
);
return resposta;
}
function mapearEventosCSS() {
document.querySelectorAll('IMG').forEach(item => {
item.addEventListener('mouseenter', event => {
if (event.target.id.search("ods") > -1) {
event.target.style.setProperty('scale', '1.2');
event.target.style.setProperty('transform', 'scale(1.2)');
}
});
item.addEventListener('mouseleave', event => {
if (event.target.id.search("ods") > -1) {
event.target.style.setProperty('scale', '1');
event.target.style.setProperty('transform', 'scale(1)');
}
});
});
document.querySelectorAll('DIV').forEach(item => {
item.addEventListener('mouseenter', event => {
if (event.target.id.search("div_") > -1) {
event.target.style.setProperty('background-color', 'rgba(0, 0, 0, .1)');
}
});
item.addEventListener('mouseleave', event => {
if (event.target.id.search("div_") > -1) {
if (event.target.id.search("_topo_") > -1) {
event.target.style.setProperty('background-color', 'white');
} else {
event.target.style.setProperty('background-color', 'rgba(0, 0, 0, 0)');
}
}
});
});
document.querySelectorAll('LI').forEach(item => {
item.addEventListener('mouseenter', event => {
event.target.style.backgroundColor = 'rgba(0, 0, 0, .1)';
});
item.addEventListener('mouseleave', event => {
event.target.style.backgroundColor = 'rgba(0, 0, 0, 0)';
});
});
document.getElementById('visualizar_impressao').addEventListener('mouseenter', event => {
event.target.style.setProperty('color', 'mediumblue');
event.target.style.setProperty('text-decoration-line', 'underline');
});
document.getElementById('visualizar_impressao').addEventListener('mouseleave', event => {
event.target.style.setProperty('color', 'black');
event.target.style.setProperty('text-decoration-line', 'none');
});
}
//**********EVENTOS DE FORMULARIO
document.body.addEventListener('click', function(event) {
let campo;
if (!event.target.id) {
campo = event.target.parentElement.id;
} else {
if (!event.target.id) {
return;
}
campo = event.target.id;
}
if (!campo) {
return;
}
if (campo.search("ods") > -1) {
let indicadores = " " + document.getElementById('span_indicadores').innerText;
let indicador_escolhido = document.getElementById(campo).parentElement.getAttribute('data-tooltip');
if (indicadores.search(indicador_escolhido) > -1) { //exclui
indicadores = indicadores.replace(indicador_escolhido, '');
document.getElementById(campo).style.setProperty('opacity', '0.3');
} else { //inclui
indicadores += indicador_escolhido;
document.getElementById(campo).style.setProperty('opacity', '1');
}
indicadores = indicadores.replace('Clique nos indicadores abaixo', '');
document.getElementById('span_indicadores').innerText = indicadores;
} else if (campo.includes('span_') && campo.includes('_LI')) {
//cadastro/alteração de dados na linha clicada
let titulo = event.target.innerText;
event.target.innerHTML = prompt(titulo, event.target.innerText);
event.target.style.setProperty('min-height', 'auto');
event.target.style.setProperty('color', 'mediumblue');
event.target.style.setProperty('text-align', 'left');
event.target.style.setProperty('font-weight', 'normal');
event.target.style.setProperty('font-size', '.7vw');
//comando "excluir"
let linhas = document.getElementById(campo).parentElement.childNodes;
if (!linhas) {
return
}
let map = [].map.call(
linhas,
function(linha) {
if (linha.innerText == "excluir") {
linha.remove();
}
}
);
//Adicionar linha nova
if (linhas[linhas.length-1].innerText != "" && event.target.parentElement) {
let el = document.createElement("li");
el.id = campo;
el.style = "min-height: 2vw; border-radius: 3px; color: lightgray; background-color: rgba(0, 0, 0, 0); text-align: center; font-weight: bolder; font-size: 2vw;";
el.innerText = "+";
if (linhaNova(event.target.parentElement.id)) {
event.target.parentElement.appendChild(el);
}
}
mapearEventosCSS();
} else if (campo.includes('span_topo')) {
let titulo = document.getElementById(campo).innerText;
document.getElementById(campo).innerHTML = prompt(titulo, document.getElementById(campo).innerText);
} else if (campo.includes('visualizar_impressao')) {
document.getElementById('visualizar_impressao').style.setProperty('visibility', 'hidden'); //oculta o link visualizar impressão para não sair na impressão
visualizarImpressao();
document.getElementById('visualizar_impressao').style.setProperty('visibility', 'visible'); //torna o link visualizar impressão novamente visível
}
});
|
|||||
|
|||||
|