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;

// 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 {
        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",
                        }
                    })
                ])
            ]),
        ]);
    }
})


global.p5UI__feedback = p5UI__feedback;