se/SE/static/p5UI/feedback.js

var feedbackNode = null

if (!global.p5VendorJs) throw "Missing vendor.js!";
if (!html2canvas) throw "Missing html2canvas!";
var h = global.p5VendorJs.React.createElement;
var ReactDOM = global.p5VendorJs.ReactDOM;
var createReactClass = global.p5VendorJs.createReactClass;
var DBG = DBG || false;
var DBG1 = true;

// echo UI:: h('div', [
//     'style' => "position:fixed; width:20px; height:20px; right:5px; bottom:5px; cursor:pointer; z-index:1041",
// ], [
//         UI:: h('i', [
//             'class' => "glyphicon glyphicon-camera",
//             'style' => "color:#666",
//             'onClick' => "p5UI__feedback(event)"
//         ])
//     ]);
(function () {
    var node = document.createElement('div')
    node.style.position = 'fixed';
    node.style.width = '20px';
    node.style.height = '20px';
    node.style.right = '5px';
    node.style.bottom = '5px';
    node.style.cursor = 'pointer';
    node.style.zIndex = '1041';
    var feedbackBtn = document.createElement('i')
    feedbackBtn.style.color = "#666";
    feedbackBtn.setAttribute('onClick', "p5UI__feedback(event)");
    feedbackBtn.setAttribute('class', "glyphicon glyphicon-camera");
    node.appendChild(feedbackBtn);
    document.body.appendChild(node);
})();



function p5UI__feedback(event) {
    event.stopPropagation()
    event.preventDefault()
    console.log('DBG:p5UI__feedback', { target: event.target });
    
    if (feedbackNode) hideFeedback();
    else {

        TODO__getDomToJson();
        
        makeScreenshot().then(function (pngDataUrl) {
            showFeedback(pngDataUrl);
        }).catch(function (err) {
            console.log('Error: ', err);
        })
    }
}
function showFeedback(pngDataUrl) {
    feedbackNode = document.createElement('div')
    feedbackNode.style.position = 'absolute';
    feedbackNode.style.top = '0px';
    feedbackNode.style.left = '0px';
    feedbackNode.style.width = '' + document.documentElement.clientWidth + 'px';
    var bodyHeight = Math.max(
        document.body.scrollHeight, document.body.offsetHeight,
        document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight
    );
feedbackNode.style.height = '' + bodyHeight + 'px';
feedbackNode.style.zIndex = '2';
feedbackNode.style.backgroundColor = '#eee';
document.body.appendChild(feedbackNode)
ReactDOM.render(
    h(p5UI__feedbackBox, {
        pngDataUrl: pngDataUrl,
        // nameSection: nameSection,
        // store: globalGraphStore,
        // actions: globalGraphActions,
    }),
    feedbackNode
    );
}
function hideFeedback() {
    if (!feedbackNode) return false;
    document.body.removeChild(feedbackNode)
    feedbackNode = null;
}

function makeScreenshot() {
    return new Promise((resolve, reject) => {
        var node = document.querySelector('body');
        html2canvas(node, {
            onrendered: (canvas) => {
                let pngUrl = canvas.toDataURL();
                resolve(pngUrl);
            }
        });
    });
}


var p5UI__feedbackBox = createReactClass({
    sendFeedback: function () {
        console.log('TODO: send feedback...');
    },
    close: function () {
        hideFeedback();
    },
    render: function () {
        return h('div', {
            style: {
                width: '100%',
                height: '100%',
            }
        }, [
            h('form', { onSubmit: this.sendFeedback }, [
                h('table', {
                    style: { width: "100%",
                    backgroundColor: "#eee",
                    borderBottom: "2px solid #ccc",
                }
            }, [
                h('tr', {}, [
                    // h('td', { style: { padding: "2px 12px" } }, [
                        //     h('h1', {}, "Test..."),
                        // ]),
                        h('td', { style: { padding: "2px 12px", width: "10%" } }, [
                            h('select', {}, [
                                h('option', { value: "BUG" }, "Zgłoś błąd"),
                                h('option', { value: "IDEA" }, "Zaproponuj zmianę/nową funkcjonalność"),
                                h('option', { value: "DOC" }, "Dokumantacja"),
                            ]),
                        ]),
                        h('td', { style: { padding: "2px 12px", width: "10%" } }, [
                            h('textarea', { placeholder: "opis..." }),
                        ]),
                        h('td', { style: { padding: "2px 12px", width: "10%" } }, [
                            h('button', { type: "submit" }, "Zapisz"),
                        ]),
                        h('td', { style: { padding: "2px 12px", textAlign: "right" } }, [
                            h('i', { onClick: this.close, className: "glyphicon glyphicon-remove", style: { cursor: "pointer" } }),
                        ]),
                    ])
                ]),
                h('div', {
                    style: {
                        padding: "6px",
                        textAlign: "center",
                        backgroundColor: "#fff",
                    }
                }, [
                    h('img', {
                        src: this.props.pngDataUrl,
                        style: {
                            width: '90%',
                            border: "2px solid #ccc",
                        }
                    })
                ])
            ]),
        ]);
    }
})

function TODO__getDomToJson() {
    // var pageStaticHtml = htmlScreenCaptureJs.capture(htmlScreenCaptureJs.OutputType.STRING);
    // console.log('DBG:TODO__getDomToJson', { pageStaticHtml });
    
    // var pageHtml = document.body.innerHTML;
    // pageHtml.replace(/<script(.*)<\/script>/g, '')
    // console.log('DBG:TODO__getDomToJson', pageHtml);

    var staticDomClone = cloneDomToStaticPage(document.body);
    var staticPage = {
        width: window.document.body.clientWidth,
        height: window.document.body.clientHeight,
        body:
            '<body' + (staticDomClone.hasAttribute('style') ? ' style="' + staticDomClone.getAttribute('style') + '"' : '') + '>' +
                staticDomClone.innerHTML +
            '</body>',
    }
    DBG1 && console.log('DBG:TODO__getDomToJson', staticPage);
}

function cloneDomToStaticPage(node) {
    var staticClone = node.cloneNode(false);
    DBG && console.log('DBG:cloneDomToStaticPage', { type: node.nodeType, name: node.nodeName, node })
    cloneChildrensToStatic(staticClone, node, '');
    return staticClone;
}
function cloneDomToStaticPage__rec(parentStaticClone, node, path) {
    DBG && console.log('DBG:cloneDomToStaticPage__rec', { path, type: node.nodeType, name: node.nodeName, node })
    switch (node.nodeType) {
        case 1: return cloneDomToStaticPage__rec__tag(parentStaticClone, node, path); // TAG
        case 3: return cloneDomToStaticPage__rec__text(parentStaticClone, node, path); // #text
        default: return cloneDomToStaticPage__rec__unknown(parentStaticClone, node, path);
    }
    // for (var child = node.firstChild; child !== null; child = child.nextSibling) {
    //     DBG && console.log('DBG:cloneDomToStaticPageRec child', { type: child.nodeType, name: child.nodeName, child })
    // }
}
function cloneDomToStaticPage__rec__text(parentStaticClone, node, path) {
    DBG && console.log('DBG:cloneDomToStaticPage__rec__text', { path, type: node.nodeType, name: node.nodeName, node })
    parentStaticClone.appendChild(node.cloneNode(false)); // #text cannot have childrens?
}
function cloneDomToStaticPage__rec__tag(parentStaticClone, node, path) {
    DBG && console.log('DBG:cloneDomToStaticPage__rec__tag', { path, type: node.nodeType, name: node.nodeName, node })
    switch (node.nodeName) {
        case 'SCRIPT': return cloneDomToStaticPage__rec__tag_script(parentStaticClone, node, path + '/script');
        case 'LINK': return cloneDomToStaticPage__rec__tag_link(parentStaticClone, node, path + '/link');
        case 'BUTTON': return cloneDomToStaticPage__rec__tag_button(parentStaticClone, node, path + '/link');

        // TODO: if (clonedNode.classList.contains('glyphicon'))
        case 'I': return cloneDomToStaticPage__rec__tag_with_glyphicon(parentStaticClone, node, path + '/i');
        case 'SPAN': return cloneDomToStaticPage__rec__tag_with_glyphicon(parentStaticClone, node, path + '/span');
        case 'A': return cloneDomToStaticPage__rec__tag_with_glyphicon(parentStaticClone, node, path + '/a');

        default: return cloneDomToStaticPage__rec__tag_default(parentStaticClone, node, path + '/' + node.nodeName.toLowerCase());
    }
}
function cloneDomToStaticPage__rec__tag_script(parentStaticClone, node, path) {
    return false; // skip script tags
}
function cloneDomToStaticPage__rec__tag_link(parentStaticClone, node, path) {
    DBG && console.log('DBG:cloneDomToStaticPage__rec__tag_link', { path, type: node.nodeType, name: node.nodeName, node })
    var clonedNode = cloneNodeToStatic(node);
    parentStaticClone.appendChild(clonedNode);
    cloneChildrensToStatic(clonedNode, node, path);
}
function cloneDomToStaticPage__rec__tag_button(parentStaticClone, node, path) {
    DBG && console.log('DBG:cloneDomToStaticPage__rec__tag_button', { path, type: node.nodeType, name: node.nodeName, node })
    var clonedNode = cloneNodeToStatic(node);
    { // fix button height with only glyphicon inside (electron bug)
        var btnStyleObj = document.defaultView.getComputedStyle(node)
        // clonedNode.style.height = btnStyleObj.height + 'px';
        clonedNode.setAttribute('style',
            (clonedNode.hasAttribute('style')
                ? clonedNode.getAttribute('style') + ';'
                : ''
            ) + 'height:' + btnStyleObj.height
        )
    }
    parentStaticClone.appendChild(clonedNode);
    for (var child = node.firstChild; child !== null; child = child.nextSibling) {
        cloneDomToStaticPage__rec(clonedNode, child, path);
    }
}
function cloneDomToStaticPage__rec__tag_with_glyphicon(parentStaticClone, node, path) {
    DBG && console.log('DBG:cloneDomToStaticPage__rec__tag_with_glyphicon', { path, type: node.nodeType, name: node.nodeName, node })
    var clonedNode = cloneNodeToStatic(node);
    { // convert glyphicon
        if (clonedNode.classList.contains('glyphicon')) {
            var styleObj = document.defaultView.getComputedStyle(node);
            var width = parseInt(styleObj.width.replace('px', ''));
            var height = parseInt(styleObj.height.replace('px', ''));
            if (!height) width = height = parseInt(styleObj.fontSize.replace('px', ''));
            if (!height) width = height = 12;
            DBG && console.log('DBG:glyphicon', { classses: clonedNode.classList, width: styleObj.width, height: styleObj.height, fontSize: styleObj.fontSize });
            if (convertBsIconToSvg['search'](clonedNode, width, height)) {
            } else if (convertBsIconToSvg['envelope'](clonedNode, width, height)) {
            } else if (convertBsIconToSvg['map-marker'](clonedNode, width, height)) {
            } else if (convertBsIconToSvg['remove'](clonedNode, width, height)) {
            } else if (convertBsIconToSvg['download'](clonedNode, width, height)) {
            } else if (convertBsIconToSvg['pencil'](clonedNode, width, height)) {
            } else if (convertBsIconToSvg['folder-open'](clonedNode, width, height)) {
            } else if (convertBsIconToSvg['plus-sign'](clonedNode, width, height)) {
            } else if (convertBsIconToSvg['plus'](clonedNode, width, height)) {
            } else if (convertBsIconToSvg['refresh'](clonedNode, width, height)) {
            } else if (convertBsIconToSvg['cog'](clonedNode, width, height)) {
            } else if (convertBsIconToSvg['question-sign'](clonedNode, width, height)) {
            } else if (convertBsIconToSvg['align-left'](clonedNode, width, height)) {
            } else if (convertBsIconToSvg['menu-hamburger'](clonedNode, width, height)) {
            // triangle-top
            // camera
            // off
            // bell
            // calendar
            // user
            // lock
            } else {
                DBG1 && console.log('DBG:glyphicon NOT SUPPORTED', { classses: clonedNode.classList, width: styleObj.width, height: styleObj.height, fontSize: styleObj.fontSize });
            }
        }
    }
    parentStaticClone.appendChild(clonedNode);
    cloneChildrensToStatic(clonedNode, node, path);
}
var convertBsIconToSvg = {};
convertBsIconToSvg['search'] = function(node, width, height) {
    return cloneNodeBsIconToSvg(node, width, height, 'search', '<circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>');
};
convertBsIconToSvg['envelope'] = function(node, width, height) {
    return cloneNodeBsIconToSvg(node, width, height, 'envelope', '<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline>');
};
convertBsIconToSvg['map-marker'] = function (node, width, height) {
    return cloneNodeBsIconToSvg(node, width, height, 'map-marker', '<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle>');
};
convertBsIconToSvg['remove'] = function (node, width, height) {
    return cloneNodeBsIconToSvg(node, width, height, 'remove', '<line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>');
};
convertBsIconToSvg['download'] = function (node, width, height) {
    return cloneNodeBsIconToSvg(node, width, height, 'download', '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line>');
};
convertBsIconToSvg['pencil'] = function (node, width, height) {
    return cloneNodeBsIconToSvg(node, width, height, 'pencil', '<path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path><polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon>');
};
convertBsIconToSvg['folder-open'] = function (node, width, height) {
    return cloneNodeBsIconToSvg(node, width, height, 'folder-open', '<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>');
};
convertBsIconToSvg['plus-sign'] = function (node, width, height) {
    return cloneNodeBsIconToSvg(node, width, height, 'plus-sign', '<circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line>');
};
convertBsIconToSvg['plus'] = function (node, width, height) {
    return cloneNodeBsIconToSvg(node, width, height, 'plus', '<g stroke-width="4" stroke-linecap="butt" stroke-linejoin="miter"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></g>');
};
convertBsIconToSvg['refresh'] = function (node, width, height) {
    return cloneNodeBsIconToSvg(node, width, height, 'refresh', '<polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>');
};
convertBsIconToSvg['cog'] = function (node, width, height) {
    return cloneNodeBsIconToSvg(node, width, height, 'cog', '<circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>');
};
convertBsIconToSvg['question-sign'] = function (node, width, height) {
    return cloneNodeBsIconToSvg(node, width, height, 'question-sign', '<circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12" y2="17"></line>');
};
convertBsIconToSvg['align-left'] = function (node, width, height) {
    return cloneNodeBsIconToSvg(node, width, height, 'align-left', '<line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line>');
};
convertBsIconToSvg['menu-hamburger'] = function (node, width, height) {
    return cloneNodeBsIconToSvg(node, width, height, 'menu-hamburger', '<line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>');
};
function cloneNodeBsIconToSvg(node, width, height, bsIcon, svgContent) {
    if (!node.classList.contains('glyphicon-' + bsIcon)) return false;
    node.classList.remove('glyphicon-' + bsIcon);
    DBG && console.log('DBG:cloneNodeBsIconToSvg', { bsIcon, width, height });
    var svgFont = document.createElement('svg');
    svgFont.setAttribute('viewBox', "0 0 24 24");
    svgFont.setAttribute('height', height);
    svgFont.setAttribute('width', width);
    svgFont.setAttribute('fill', "none");
    svgFont.setAttribute('stroke', "currentColor");
    svgFont.setAttribute('stroke-width', "3");
    svgFont.setAttribute('stroke-linecap', "round");
    svgFont.setAttribute('stroke-linejoin', "round");
    node.appendChild(svgFont)
    svgFont.innerHTML = svgContent;
    return true;
}


function cloneDomToStaticPage__rec__tag_default(parentStaticClone, node, path) {
    DBG && console.log('DBG:cloneDomToStaticPage__rec__tag_default', { path, type: node.nodeType, name: node.nodeName, node })
    var clonedNode = cloneNodeToStatic(node);
    parentStaticClone.appendChild(clonedNode);
    cloneChildrensToStatic(clonedNode, node, path);
}
function cloneDomToStaticPage__rec__unknown(parentStaticClone, node, path) {
    DBG && console.log('DBG:cloneDomToStaticPage__rec__unknown', { path, type: node.nodeType, name: node.nodeName, node })
}
function cloneChildrensToStatic(targetNode, sourceNode, path) {
    for (var child = sourceNode.firstChild; child !== null; child = child.nextSibling) {
        cloneDomToStaticPage__rec(targetNode, child, path);
    }
}
function cloneNodeToStatic(node) {
    var clonedNode = node.cloneNode(false);
    if (clonedNode.hasAttribute('onclick')) clonedNode.removeAttribute('onclick');
    if (clonedNode.hasAttribute('href')) clonedNode.removeAttribute('href');
    // if (clonedNode.hasAttribute('href')) clonedNode.href = clonedNode.href.replace(URL_BASE_PATH, './')
    return clonedNode;
}

global.p5UI__feedback = p5UI__feedback;