From 006776d3992e6887c7e5894d545accad33cb856f Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Thu, 22 Oct 2020 12:11:26 +0200
Subject: [PATCH] Instead fo scrolling emit an event after the image is drawn
This lets the user decide what to do (like scrolling)
---
packages/qr-code-scanner/README.md | 1 +
packages/qr-code-scanner/src/qr-code-scanner.js | 13 ++++++-------
2 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/packages/qr-code-scanner/README.md b/packages/qr-code-scanner/README.md
index 343d7c05..15a06955 100644
--- a/packages/qr-code-scanner/README.md
+++ b/packages/qr-code-scanner/README.md
@@ -32,6 +32,7 @@ after loaded. This attribute is also used to stop the QR code reader or if you d
## Events
- `'code-detected'`: Outgoing Event which is fired if a QR code is detected. The data of the detected QR code is in `event.detail`.
+- `'scan-started`: Fired after the first image is drawn. Can be used to scrolling or other layout dependent tasks.
## Local development
diff --git a/packages/qr-code-scanner/src/qr-code-scanner.js b/packages/qr-code-scanner/src/qr-code-scanner.js
index 2ace1598..87aa3bfa 100644
--- a/packages/qr-code-scanner/src/qr-code-scanner.js
+++ b/packages/qr-code-scanner/src/qr-code-scanner.js
@@ -198,8 +198,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
this.stopScan = false;
let canvasElement = this._("#canvas");
- let qrContainer = this._("#qr");
- let scroll = false;
+ let firstDrawDone = false;
this._askPermission = true;
this._loadingMessage = i18n.t('no-camera-access');
@@ -232,6 +231,10 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
canvasElement.width = video.videoWidth;
let canvas = canvasElement.getContext("2d");
canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
+ if (!firstDrawDone) {
+ that.dispatchEvent(new CustomEvent("scan-started", {bubbles: true, composed: true}));
+ firstDrawDone = true;
+ }
let maskWidth = canvasElement.width;
let maskHeight = canvasElement.height;
@@ -303,10 +306,6 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
lastSentData = null;
}
}
- if (video.readyState === video.HAVE_ENOUGH_DATA && !scroll) {
- qrContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
- scroll = true;
- }
console.assert(that._requestID === null);
that._requestID = requestAnimationFrame(tick);
}
@@ -446,7 +445,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
return html`
<div class="columns">
- <div class="column" id="qr">
+ <div class="column">
<div class="${classMap({hidden: !hasDevices})}">
--
GitLab