cssjs-func-lib/flag.js

133 lines
3.6 KiB
JavaScript

(function(connector) {
'use strict';
var style = 'default';
if(document.body.dataset.feedbackstyle) {
style = document.body.dataset.feedbackstyle;
}
var iframe;
var flag;
var col = 'light';
//TODO color css
//TODO abbrechen close anders
var closeFlag = function(ev) {
flag.classList.add('closing');
iframe.classList.add('closing');
setTimeout(function() {
flag.style.opacity = 0;
iframe.style.opacity = 0;
setTimeout(function() {
flag.remove();
iframe.remove();
document.body.style.overflowY = 'auto';
},500);
},1000);
}
var openFlag = function(ev, infos=false) {
flag = document.createElement('div');
document.body.style.overflowY = 'hidden';
flag.id = 'flag-overlay';
iframe = document.createElement('iframe');
iframe.src= '';
iframe.name = 'flag-iframe';
iframe.id = 'flag-iframe';
document.body.appendChild(flag);
setTimeout(function() {
flag.addEventListener('click',function(){
closeFlag();
//console.log('close2');
});
},3000);
document.body.appendChild(iframe);
var form = document.createElement('form');
form.action = connector+"?style="+style;
form.target = 'flag-iframe';
form.method = 'POST';
const screenshotTarget = document.body;
/*html2canvas(screenshotTarget).then((canvas) => {
const base64image = canvas.toDataURL("image/png");
window.location.href = base64image;
});*/
var fields = {};
fields['s'] = window.location.hostname;
var datas = document.querySelectorAll('[data-flaginfo]');
if(datas) {
for(var i=0; i<datas.length;i++) {
console.log(datas[i].dataset['flaginfo']);
var tmp = datas[i].dataset['flaginfo'];
tmp = tmp.split(':',2);
fields[tmp[0]] = tmp[1];
}
}
if(document.referrer) {fields['r'] = document.referrer;}
if(window.location.href) {fields['u'] = window.location.href;}
if(navigator.userAgent) {fields['a'] = navigator.userAgent;}
fields['d'] = ''+window.screen.width+'x'+window.screen.height+' ('+window.screen.colorDepth+'bit)';
if(infos && typeof(infos) == typeof({})) {
for(var i in infos) {
fields[i] = infos[i];
}
}
console.log('Fields',fields);
for(var f in fields) {
var inp = document.createElement('input');
inp.type = 'hidden';
inp.name = f;
inp.value = fields[f]
form.appendChild(inp);
}
form.style = 'display:none';
document.body.appendChild(form);
form.submit();
form.remove();
}
var panel = document.createElement('div');
panel.id = 'flag-panel';
var tab = document.createElement('span');
tab.innerHTML = '&#9873;';
tab.addEventListener('mouseenter',function(ev) {
if(!panel.classList.contains('opened')) {
panel.classList.add('opened');
}
panel.classList.toggle('open');
});
var button = document.createElement('button');
button.innerHTML = 'Problem melden';
button.addEventListener('click',openFlag);
window.addEventListener("message", (event) => {
//console.log(event);
if(event.data == 'close') {
//console.log('close1');
closeFlag();
}
});
var links = document.getElementsByClassName('flag-link');
if(links.length > 0) {
for(var l=0;l<links.length;l++) {
//console.log(l,links[l]);
links[l].addEventListener('click',function(ev) {
openFlag(ev,ev.target.dataset);
ev.preventDefault();
return false;
});
}
}
panel.appendChild(tab);
panel.appendChild(button);
document.body.appendChild(panel);
})('https://troy-grunt.de/feedback');