Feature/59 create with html element instead of id only #697

bilal-elchami · 2023-02-13T16:38:12Z

This PR is made to support sending the HTML Element of the reader directly to the library instead of the element-id string to avoid problems when using shadowRoot.
An example was submitted (examples/html5-shadow-dom)

The issue details can be found here #59

Please note that sending the element-id as a string is still compatible in this version.

@all-contributors please add @bilal-elchami for this feature.

Accept both HTML Element & Element Id as parameters

…d_Of_Id

InDIOS

This PR looks good, the approach is very useful in cases where we need to pass an element on demand or need to choose the element from a component template such as Web Component or Angular Component templates. 👌

InDIOS

Nice work, still compatible with old code. It looks very well.

mebjas · 2023-02-24T15:05:12Z

Thanks for the PR.

Can you re-sync with the latest changes. Happy to do the review and merge.

…d_Of_Id

bilal-elchami · 2023-02-25T12:07:29Z

Hello @mebjas
I justed synced the latest changes into my branch.
Thanks

README.md

examples/html5-shadow-dom/README.md

README.md

minified/html5-qrcode.min.js

package-lock.json

mebjas · 2023-02-28T16:07:20Z

src/html5-qrcode-scanner.ts

-                if (this.lastMatchFound === decodedText) {
-                    return;
-                }
+                if (qrCodeSuccessCallback) {


Are these changes driven by some tool or manual?

I just formatted the file using the default VsCode TypeScript formatter.

mebjas · 2023-02-28T16:08:06Z

src/html5-qrcode-scanner.ts

+     * @param config Extra configurations to tune the code scanner.
+     * @param verbose - If true, all logs would be printed to console. 
+     */
+    public constructor(


For my information, what does this constructor overload with no implementation do in typescript?

The idea was to have multiple constructors with a different signature each.
So in order to implement this constructor overloads, we couldn't have two constructors with bodies. You have to create the constructors signatures and then a global constructor that will handle the whole logic.
An example can be found here: https://timmousk.com/blog/typescript-multiple-constructors/

The purpose of adding multiple constructors is having the following IntelliSense suggestions:

I can remove this overloading and use one constructor instead if you prefer with the suggested signature:
public constructor(elementOrElementId: HTMLElement | string, config: Html5QrcodeScannerConfig | undefined, verbose: boolean | undefined)

Waiting for your response

…d_Of_Id

bilal-elchami · 2023-03-03T23:09:46Z

Hello @mebjas
I just resolved your comments.
Btw building the project on the latest version is not compiling properly the dist\html5-qrcode.min.js
Any idea if it's related to the newly pushed changes?

mebjas · 2023-03-04T06:57:28Z

Btw building the project on the latest version is not compiling properly the dist\html5-qrcode.min.js

What issue are you seeing?

bilal-elchami · 2023-03-04T07:51:26Z

Btw building the project on the latest version is not compiling properly the dist\html5-qrcode.min.js

What issue are you seeing?

After running the npm run-script build command on the latest master version, the dist/html5-qrcode.min.js content is as follow:

if (window) { if (!Html5QrcodeScanner) { var Html5QrcodeScanner = window.__Html5QrcodeLibrary__.Html5QrcodeScanner; } if (!Html5Qrcode) { var Html5Qrcode = window.__Html5QrcodeLibrary__.Html5Qrcode; } if (!Html5QrcodeSupportedFormats) { var Html5QrcodeSupportedFormats = window.__Html5QrcodeLibrary__.Html5QrcodeSupportedFormats } if (!Html5QrcodeScannerState) { var Html5QrcodeScannerState = window.__Html5QrcodeLibrary__.Html5QrcodeScannerState; } if (!Html5QrcodeScanType) { var Html5QrcodeScanType = window.__Html5QrcodeLibrary__.Html5QrcodeScanType; }}

Which isn't the complete compiled library.

bilal-elchami · 2023-03-10T12:52:46Z

Hello @mebjas ! Any updates about this PR? And please note that the compilation problem is not related to this PR.

webermax · 2023-04-23T16:26:47Z

...we are eagerly waiting for this to work, too.

(The following example isn't working yet (?): https://github.com/mebjas/html5-qrcode/tree/master/examples/lit)

cemkalyoncu · 2023-06-22T13:29:03Z

@bilal-elchami

I fixed that problem by installing webpack first.

npm install --save-dev webpack

I also had to change lib version from es7 to es2018 in tsconfig.json

webermax · 2023-06-24T09:06:03Z

@bilal-elchami

I fixed that problem by installing webpack first.

npm install --save-dev webpack

I also had to change lib version from es7 to es2018 in tsconfig.json

Which problem do you mean (the custom element example does not involve any build process at all)?

(Still getting "Uncaught (in promise) HTML Element with id=[object HTMLDivElement] not found"...)

cemkalyoncu · 2023-06-24T11:33:44Z

Bilal commented about not being able to build and got mostly empty .min.js file. This is to fix that problem. If you want that system, you should use Bilal's repository at his feature branch and compile it yourself to get the min.js, the one in repo is from the original one. I managed to get it working.

…d_Of_Id

bilal-elchami · 2023-06-29T12:17:40Z

@bilal-elchami

I fixed that problem by installing webpack first.

npm install --save-dev webpack

I also had to change lib version from es7 to es2018 in tsconfig.json

Hello @cemkalyoncu
I was trying to sync my branch with the latest version of master and tried what you suggested in order to have a complete build of the dist/html5-qrcode.min.js, but I didn't manage to make it work.

Can you tell me the steps you took to make it build properly?

Thanks

bilal-elchami · 2023-06-29T12:42:02Z

Hello @mebjas

I just merged the latest version of master into my branch and the PR is now up to date.

cemkalyoncu · 2023-06-30T06:06:20Z

After last merge, the error about TS version error has disappeared. Here are the steps I have taken to build:

npm install --save-dev webpack
npm run-script build

The minified file is built into dist folder.

TheodoreGC · 2023-09-18T10:48:51Z

Is this PR ready to be merged?

@bilal-elchami , @mebjas

bilal-elchami · 2023-09-18T10:59:58Z

Is this PR ready to be merged?

@bilal-elchami , @mebjas

Hello @TheodoreGC , I updated the branch on the 29th of June and we're waiting for @mebjas to review it.
Once reviewed, I'll sync it with the latest version of master.

Meanwhile, if you would like to use or test it, my project uses a custom branch on my forked repo.
package.json dependency: https://gitpkg.now.sh/bilal-elchami/html5-qrcode/dist?mobee (via https://gitpkg.vercel.app/)

ROBERT-MCDOWELL · 2023-09-18T11:30:25Z

wouldn't be more logic and easy that @mebjas delegate his repo to trusty guys like you since there are here more than 3.7k users/developers following it?

mebjas · 2023-09-18T12:06:43Z

Any suggestions?

ROBERT-MCDOWELL · 2023-09-18T12:20:53Z

for example give the rights to the most active PR guys here?

TheodoreGC · 2023-09-20T02:03:31Z

Thank you @bilal-elchami for the update and the efforts you have put into this.

Giving rights to the most active PR contributors sounds more practical for speeding up reviews and the merging process.

@mebjas, do you have any idea if/when this could be implemented?

vmandrespascual · 2023-11-27T10:56:29Z

Thank you @bilal-elchami !
I find this request very interesting and the code seems to work correctly for me.

@mebjas, it really raises the inclusion at the end?
It makes a lot of sense, how can the community help you to get this to the main branch?

Best regards

bilal-elchami added 14 commits February 8, 2023 22:36

Send HTML Element instead of Id to scanner

c667224

Add backward compatibility

dcabcdc

Accept both HTML Element & Element Id as parameters

Rename variables & format documents

6bb601f

Remove unused var & format documents

006e728

Merge branch 'master' into feature/59_Create_With_HTML_Element_Instea…

73d0ebf

…d_Of_Id

Update package-lock

2d937ea

Add shadow dom example

891ce00

Update Example & Documentation

240dcc8

Format example

ddea928

Revert 3rd party fix

735ef23

Reduce constructor complexity & fix back quotes

a70cd3a

Initialize the container in the constructor

133a752

Replace single quotes with double quotes

2db7242

Revert html5 example & upload new build

d987f39

bilal-elchami mentioned this pull request Feb 14, 2023

Fix compatibility with older browsers in zxing-js #700

Merged

InDIOS reviewed Feb 16, 2023

View reviewed changes

InDIOS approved these changes Feb 16, 2023

View reviewed changes

Merge branch 'master' into feature/59_Create_With_HTML_Element_Instea…

2c875e8

…d_Of_Id

Remove manual scan call

88b5a26

mebjas reviewed Feb 28, 2023

View reviewed changes

bilal-elchami added 5 commits March 3, 2023 23:04

Merge branch 'master' into feature/59_Create_With_HTML_Element_Instea…

1bad070

…d_Of_Id

Revert minified and package lock files

313e4cb

Update readmes

33c3428

Revert package lock and minified files

df96228

Fix Code Analyzer warning

77c78b8

Eisonsky approved these changes Apr 9, 2023

View reviewed changes

Merge branch 'master' into feature/59_Create_With_HTML_Element_Instea…

bcc6017

…d_Of_Id

bilal-elchami added 2 commits June 29, 2023 14:35

Merge latest master and fix test errors

f67598c

Fix readme table

5d80902

bilal-elchami requested a review from mebjas June 29, 2023 12:45

iStefo mentioned this pull request Feb 14, 2024

Scanner sample code (lit) does not open and error in console #789

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/59 create with html element instead of id only #697

Feature/59 create with html element instead of id only #697

bilal-elchami commented Feb 13, 2023

InDIOS left a comment

InDIOS left a comment

mebjas commented Feb 24, 2023

bilal-elchami commented Feb 25, 2023

mebjas Feb 28, 2023

bilal-elchami Mar 1, 2023

mebjas Feb 28, 2023

bilal-elchami Mar 1, 2023 •

edited

bilal-elchami commented Mar 3, 2023

mebjas commented Mar 4, 2023

bilal-elchami commented Mar 4, 2023

bilal-elchami commented Mar 10, 2023

webermax commented Apr 23, 2023 •

edited

cemkalyoncu commented Jun 22, 2023 •

edited

webermax commented Jun 24, 2023

cemkalyoncu commented Jun 24, 2023

bilal-elchami commented Jun 29, 2023

bilal-elchami commented Jun 29, 2023

cemkalyoncu commented Jun 30, 2023

TheodoreGC commented Sep 18, 2023 •

edited

bilal-elchami commented Sep 18, 2023 •

edited

ROBERT-MCDOWELL commented Sep 18, 2023 •

edited

mebjas commented Sep 18, 2023

ROBERT-MCDOWELL commented Sep 18, 2023

TheodoreGC commented Sep 20, 2023

vmandrespascual commented Nov 27, 2023

Feature/59 create with html element instead of id only #697

Are you sure you want to change the base?

Feature/59 create with html element instead of id only #697

Conversation

bilal-elchami commented Feb 13, 2023

InDIOS left a comment

Choose a reason for hiding this comment

InDIOS left a comment

Choose a reason for hiding this comment

mebjas commented Feb 24, 2023

bilal-elchami commented Feb 25, 2023

mebjas Feb 28, 2023

Choose a reason for hiding this comment

bilal-elchami Mar 1, 2023

Choose a reason for hiding this comment

mebjas Feb 28, 2023

Choose a reason for hiding this comment

bilal-elchami Mar 1, 2023 • edited

Choose a reason for hiding this comment

bilal-elchami commented Mar 3, 2023

mebjas commented Mar 4, 2023

bilal-elchami commented Mar 4, 2023

bilal-elchami commented Mar 10, 2023

webermax commented Apr 23, 2023 • edited

cemkalyoncu commented Jun 22, 2023 • edited

webermax commented Jun 24, 2023

cemkalyoncu commented Jun 24, 2023

bilal-elchami commented Jun 29, 2023

bilal-elchami commented Jun 29, 2023

cemkalyoncu commented Jun 30, 2023

TheodoreGC commented Sep 18, 2023 • edited

bilal-elchami commented Sep 18, 2023 • edited

ROBERT-MCDOWELL commented Sep 18, 2023 • edited

mebjas commented Sep 18, 2023

ROBERT-MCDOWELL commented Sep 18, 2023

TheodoreGC commented Sep 20, 2023

vmandrespascual commented Nov 27, 2023

bilal-elchami Mar 1, 2023 •

edited

webermax commented Apr 23, 2023 •

edited

cemkalyoncu commented Jun 22, 2023 •

edited

TheodoreGC commented Sep 18, 2023 •

edited

bilal-elchami commented Sep 18, 2023 •

edited

ROBERT-MCDOWELL commented Sep 18, 2023 •

edited