diff --git a/package.json b/package.json index 121021f7..662e52f4 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bugbattle", - "version": "3.0.4", + "version": "3.0.5", "main": "build/index.js", "types": "index.d.ts", "scripts": { diff --git a/public/index.html b/public/index.html index e96ce3d6..de31779a 100755 --- a/public/index.html +++ b/public/index.html @@ -1,44 +1,50 @@ + -BugBattle DEMO - - - + BugBattle DEMO + + + +
- + \ No newline at end of file diff --git a/src/lib/BugBattle.js b/src/lib/BugBattle.js index 0b7e8820..afd8bfa1 100755 --- a/src/lib/BugBattle.js +++ b/src/lib/BugBattle.js @@ -1,15 +1,15 @@ -import './css/App.css'; -import html2canvas from 'html2canvas'; +import "./css/App.css"; +import html2canvas from "html2canvas"; class BugBattle { - apiUrl = 'https://api.bugbattle.io'; + apiUrl = "https://api.bugbattle.io"; sdkKey = null; - privacyPolicyUrl = 'https://www.bugbattle.io/pages/privacy-policy'; + privacyPolicyUrl = "https://www.bugbattle.io/pages/privacy-policy"; privacyPolicyCheckEnabled = false; - email = localStorage.getItem('bugbattle-sender-email'); - activation = ''; + email = localStorage.getItem("bugbattle-sender-email") ?? ""; + activation = ""; screenshot = null; - screenshotURL = ''; + screenshotURL = ""; crashDetectorEnabled = true; crashDetected = false; actionLog = []; @@ -17,15 +17,16 @@ class BugBattle { customData = {}; sessionStart = new Date(); bugReportingRunning = false; - description = ''; - email = ''; - severity = 'LOW'; - appVersionCode = ''; - appBuildNumber = ''; + description = ""; + severity = "LOW"; + appVersionCode = ""; + appBuildNumber = ""; + mainColor = "#398CFE"; + previousBodyOverflow; // Activation methods - static FEEDBACK_BUTTON = 'FEEDBACK_BUTTON'; - static NONE = 'NONE'; + static FEEDBACK_BUTTON = "FEEDBACK_BUTTON"; + static NONE = "NONE"; static instance; @@ -33,7 +34,7 @@ class BugBattle { if (!this.instance) { this.instance = new BugBattle(sdkKey, activation); } else { - console.warn('Bugbattle already initialized.'); + console.warn("Bugbattle already initialized."); } } @@ -114,20 +115,21 @@ class BugBattle { */ static setMainColor(color) { let colorStyleSheet = - '.bugbattle--feedback-button { background-color: ' + + ".bugbattle--feedback-button { background-color: " + color + - '; } .bugbattle--feedback-dialog-header-button { color: ' + + "; } .bugbattle--feedback-dialog-header-button { color: " + color + - '; } .bugbattle--toggle { border: 1px solid ' + + "; } .bugbattle--toggle { border: 1px solid " + color + - '; color: ' + + "; color: " + color + - '; } .bugbattle--toggle label:before { background: ' + + "; } .bugbattle--toggle label:before { background: " + color + - '; } .bugbattle--toggle label:not(:last-child) { border-right: 1px solid ' + + "; } .bugbattle--toggle label:not(:last-child) { border-right: 1px solid " + color + - '; }'; - let node = document.createElement('style'); + "; }"; + this.instance.mainColor = color; + let node = document.createElement("style"); node.innerHTML = colorStyleSheet; document.body.appendChild(node); } @@ -136,14 +138,22 @@ class BugBattle { * Starts the bug reporting flow. */ static startBugReporting() { - let feedbackBtn = document.querySelector('.bugbattle--feedback-button'); + this.instance.disableScroll(); + let feedbackBtn = document.querySelector(".bugbattle--feedback-button"); if (feedbackBtn) { - feedbackBtn.style.display = 'none'; + feedbackBtn.style.display = "none"; } - html2canvas(document.body).then((img) => { - this.instance.screenshot = img.toDataURL(); + + html2canvas(document.body, { + x: window.scrollX, + y: window.scrollY, + width: window.innerWidth, + height: window.innerHeight, + logging: false, + }).then((canvas) => { + this.instance.screenshot = canvas.toDataURL(); if (feedbackBtn) { - feedbackBtn.style.display = 'block'; + feedbackBtn.style.display = "block"; } this.instance.createBugReportingDialog(); }); @@ -153,13 +163,13 @@ class BugBattle { const self = this; window.onerror = function (msg, url, lineNo, columnNo, error) { var message = [ - 'Message: ' + msg, - 'URL: ' + url, - 'Line: ' + lineNo, - 'Column: ' + columnNo, - 'Error object: ' + JSON.stringify(error), + "Message: " + msg, + "URL: " + url, + "Line: " + lineNo, + "Column: " + columnNo, + "Error object: " + JSON.stringify(error), ]; - self.addLog(message, 'error'); + self.addLog(message, "error"); self.startCrashFlow(); @@ -180,9 +190,9 @@ class BugBattle { return; } - var log = ''; + var log = ""; for (var i = 0; i < args.length; i++) { - log += args[i] + ' '; + log += args[i] + " "; } this.logArray.push({ log: log, @@ -200,29 +210,42 @@ class BugBattle { return { log: function () { - self.addLog(arguments, 'log'); + self.addLog(arguments, "log"); origConsole.log && origConsole.log.apply(origConsole, arguments); }, warn: function () { - self.addLog(arguments, 'warns'); + self.addLog(arguments, "warns"); origConsole.warn && origConsole.warn.apply(origConsole, arguments); }, error: function () { - self.addLog(arguments, 'error'); + self.addLog(arguments, "error"); origConsole.error && origConsole.error.apply(origConsole, arguments); self.startCrashFlow(); }, info: function (v) { - self.addLog(arguments, 'info'); + self.addLog(arguments, "info"); origConsole.info && origConsole.info.apply(origConsole, arguments); }, }; })(window.console); } + disableScroll() { + this.previousBodyOverflow = document.body.style.overflow; + document.body.style.overflow = 'hidden'; + } + + enableScroll() { + if (this.previousBodyOverflow) { + document.body.style.overflow = this.previousBodyOverflow; + } else { + document.body.style.overflow = null; + } + } + createBugReportingDialog() { - var elem = document.createElement('div'); - elem.className = 'bugbattle--feedback-dialog-container'; + var elem = document.createElement("div"); + elem.className = "bugbattle--feedback-dialog-container"; elem.innerHTML = `
@@ -238,7 +261,7 @@ class BugBattle {