screenshot hata bildir

by Destan Sarpkaya

HTML

<feedback-button text="Hata Bildir"></feedback-button>

JavaScript

import ScreenshotButton from "https://grispiapp.github.io/screenshot-button-web-component/screenshot-button.js";

class FeedbackButton extends HTMLElement {
  static #htmlContent = `
  			<style>
        	button {
            background-color: lightgray;
            border-radius: 5px;
            border: 1px solid #333;
            color: #333;
            cursor: pointer;
            display: flex;
            font-family: sans-serif;
            font-size: 13pt;
            height: 30px;
            justify-content: center;
            padding-top: 3px;
            position: fixed;
            right: -65px;
            top: 50%;
            transform: rotate(-90deg);
            min-width: 150px;
        }
        </style>
        <screenshot-button style="display: none;"></screenshot-button>
        <button></button>
        <section>
        	<header>
        	<img id="preview" />
        </section>
      `;

  #screenshotButton;
  #previewImg;
  #popup;

  constructor() {
    super();

    const text = this.attributes.getNamedItem('text')?.value || 'Feedback';
    const shadowDom = this.attachShadow({
      mode: 'open'
    });
    shadowDom.innerHTML = FeedbackButton.#htmlContent;
    const button = shadowDom.querySelector('button');
    button.innerText = text;
    button.onclick = this.#clickCallback.bind(this);

    this.#screenshotButton = shadowDom.querySelector('screenshot-button');
    this.#previewImg = shadowDom.getElementById('preview');
    this.#popup = shadowDom.getElementById('section');
  }

  #clickCallback() {
    this.#screenshotButton
      .takeScreenshot()
      .then(blob => {
        const imgEl = this.#previewImg;
        imgEl.removeAttribute('width');
        imgEl.src = URL.createObjectURL(blob);
        imgEl.onload = () => {
          imgEl.width = imgEl.width * 0.4;
        };
      });
  }

  #showPopup(blob) {
    this.#popup.style.display = flex;
  }

}

window.customElements.define('feedback-button', FeedbackButton);