+ test feedback js

SE/se-lib/ThemeDefault.php

@@ -28,6 +28,10 @@ class ThemeDefault {
 			if ($footerHtml) echo $footerHtml;
 			echo '</div>';
 		}
+		if (User::logged() && '1' === V::get('TEST_FEEDBACK', '', $_GET)) {
+			echo UI::h('script', [ 'type' => "text/javascript", 'src' => "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js" ]);
+			UI::inlineJS(APP_PATH_ROOT . '/static/p5UI/feedback.js');
+		}
 		echo UI::fixFooterPosition('footer_js_tag');
 	}
 

SE/static/p5UI/feedback.js

@@ -0,0 +1,159 @@
+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;