pushfeedback 0.0.10 → 0.0.11

package/dist/collection/components/feedback-modal/feedback-modal.js

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core';
-import html2canvas from 'html2canvas';
+import domtoimage from 'dom-to-image';
 export class FeedbackModal {
   constructor() {
     this.handleSubmit = async (event) => {
@@ -8,6 +8,14 @@ export class FeedbackModal {
       this.showScreenshotMode = false;
       this.showModal = false;
       this.sending = true;
+      let encodedScreenshot = "";
+      if (this.encodedScreenshot) {
+        await this.encodedScreenshot.then((data) => {
+          encodedScreenshot = data;
+        }).catch((error) => {
+          console.log(error);
+        });
+      }
       try {
         const res = await fetch('https://app.pushfeedback.com/api/feedback/', {
           method: 'POST',
@@ -16,7 +24,7 @@ export class FeedbackModal {
             message: this.formMessage,
             email: this.formEmail,
             project: this.project,
-            screenshot: this.encodedScreenshot
+            screenshot: encodedScreenshot
           }),
           headers: {
             'Content-Type': 'application/json'
@@ -122,26 +130,27 @@ export class FeedbackModal {
     };
     this.handleMouseClickedSelectedElement = (event) => {
       event.preventDefault();
-      if (this.elementSelected) {
+      if (this.elementSelected)
         this.elementSelected.classList.add('feedback-modal-element-selected');
-      }
       let top = this.elementSelected.getBoundingClientRect().top;
-      this.elementSelected.style.top = `${top + window.scrollY}px`;
+      this.elementSelected.style.top = `${top + window.pageYOffset}px`;
       const clonedElementSelected = this.elementSelected.cloneNode(true);
       document.body.appendChild(clonedElementSelected);
       this.elementSelected.style.top = `${top}px`;
-      html2canvas(document.body).then((canvas) => {
-        this.encodedScreenshot = canvas.toDataURL();
+      this.encodedScreenshot = domtoimage.toPng(document.body, { cacheBust: true })
+        .then(function (dataUrl) {
         document.body.removeChild(clonedElementSelected);
-        const page = document.getElementsByTagName('html')[0];
-        page.style.overflow = 'hidden';
-        this.hasSelectedElement = true;
-        this.overlay.style.display = 'block';
-        this.showModal = true;
-      }).catch((error) => {
-        console.log(error);
+        return dataUrl;
+      })
+        .catch(function (error) {
+        console.error('Oops, something went wrong!', error);
         return "";
       });
+      const page = document.getElementsByTagName('html')[0];
+      page.style.overflow = 'hidden';
+      this.hasSelectedElement = true;
+      this.overlay.style.display = 'block';
+      this.showModal = true;
     };
     this.sending = false;
     this.formMessage = '';