From f79a2f9d04bc1a0727bc246ef10205a2a850718a Mon Sep 17 00:00:00 2001 From: Argo-Asicotech Date: Tue, 25 Oct 2022 17:30:30 +0800 Subject: [PATCH 1/3] =?UTF-8?q?refactor:=20=E6=A0=BC=E5=BC=8F=E5=8C=96?= =?UTF-8?q?=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/BarcodeReader/BarcodeReader.js | 76 +++++++++---------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/src/Extensions/Components/BootstrapBlazor.BarCode/Components/BarcodeReader/BarcodeReader.js b/src/Extensions/Components/BootstrapBlazor.BarCode/Components/BarcodeReader/BarcodeReader.js index 23baa5929..0a51c1441 100644 --- a/src/Extensions/Components/BootstrapBlazor.BarCode/Components/BarcodeReader/BarcodeReader.js +++ b/src/Extensions/Components/BootstrapBlazor.BarCode/Components/BarcodeReader/BarcodeReader.js @@ -1,6 +1,6 @@ import BlazorComponent from "../../../_content/BootstrapBlazor/modules/base/blazor-component.js" -import EventHandler from "../../../_content/BootstrapBlazor/modules/base/event-handler.js"; -import {vibrate} from "../../../_content/BootstrapBlazor/modules/base/utility.js"; +import EventHandler from "../../../_content/BootstrapBlazor/modules/base/event-handler.js" +import { vibrate } from "../../../_content/BootstrapBlazor/modules/base/utility.js" export class BarcodeReader extends BlazorComponent { _init() { @@ -12,7 +12,7 @@ export class BarcodeReader extends BlazorComponent { this.scan = () => { this._invoker.invokeMethodAsync("Start") const deviceId = this._element.getAttribute('data-bb-deviceid') - const video = this._element.querySelector('video').getAttribute('id'); + const video = this._element.querySelector('video').getAttribute('id') this._reader.decodeFromVideoDevice(deviceId, video, (result, err) => { if (result) { vibrate() @@ -28,13 +28,13 @@ export class BarcodeReader extends BlazorComponent { console.error(err) this._invoker.invokeMethodAsync('GetError', err) } - }); - }; + }) + } this.stop = () => { this._reader.reset(); - this._invoker.invokeMethodAsync("Stop"); - }; + this._invoker.invokeMethodAsync("Stop") + } this._reader.getVideoInputDevices().then(videoInputDevices => { this._invoker.invokeMethodAsync("InitDevices", videoInputDevices).then(() => { @@ -43,68 +43,68 @@ export class BarcodeReader extends BlazorComponent { const button = this._element.querySelector('[data-bb-method="scan"]') button.click() } - }); - }); + }) + }) } else { const scanImageHandler = () => { - const files = this._reader.file.files; + const files = this._reader.file.files if (files.length === 0) { - return; + return } - const reader = new FileReader(); + const reader = new FileReader() reader.onloadend = e => { this._reader.decodeFromImageUrl(e.target.result).then(result => { if (result) { - vibrate(); + vibrate() console.log(result.text); - this._invoker.invokeMethodAsync('GetResult', result.text); + this._invoker.invokeMethodAsync('GetResult', result.text) } }).catch((err) => { if (err) { console.log(err) - this._invoker.invokeMethodAsync('GetError', err.message); + this._invoker.invokeMethodAsync('GetError', err.message) } }) - }; - reader.readAsDataURL(files[0]); + } + reader.readAsDataURL(files[0]) } const resetFile = () => { - let file = this._element.querySelector('[type="file"]'); + let file = this._element.querySelector('[type="file"]') if (file) { EventHandler.off(file, 'change'); - file.remove(); + file.remove() } - file = document.createElement('input'); - file.setAttribute('type', 'file'); - file.setAttribute('hidden', 'true'); - file.setAttribute('accept', 'image/*'); - this._element.append(file); - EventHandler.on(file, 'change', scanImageHandler); - this._reader.file = file; - return file; - }; + file = document.createElement('input') + file.setAttribute('type', 'file') + file.setAttribute('hidden', 'true') + file.setAttribute('accept', 'image/*') + this._element.append(file) + EventHandler.on(file, 'change', scanImageHandler) + this._reader.file = file + return file + } this.scanImage = () => { - let file = resetFile(); - file.click(); - }; + let file = resetFile() + file.click() + } } const eventHandler = e => { - let button = e.delegateTarget; - const method = button.getAttribute('data-bb-method'); - const fn = this[method]; + let button = e.delegateTarget + const method = button.getAttribute('data-bb-method') + const fn = this[method] if (typeof fn === 'function') { - fn(); + fn() } } - EventHandler.on(this._element, 'click', '[data-bb-method]', eventHandler); + EventHandler.on(this._element, 'click', '[data-bb-method]', eventHandler) } _dispose() { - EventHandler.off(this._element, 'click', '[data-bb-method]'); - this._reader.reset(); + EventHandler.off(this._element, 'click', '[data-bb-method]') + this._reader.reset() } } -- Gitee From de4927007428f4de5ce5ef0c235c97acf85a4381 Mon Sep 17 00:00:00 2001 From: Argo-Asicotech Date: Tue, 25 Oct 2022 17:31:43 +0800 Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=20QRCode=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/QRCode/QRCode.js | 60 +++++++++++-------- .../Components/QRCode/QRCode.razor | 2 +- .../Components/QRCode/QRCode.razor.cs | 32 ++-------- .../wwwroot/qrcode.bundle.min.js | 2 +- 4 files changed, 44 insertions(+), 52 deletions(-) diff --git a/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.js b/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.js index 35dfa6625..7ca11e653 100644 --- a/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.js +++ b/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.js @@ -5,45 +5,57 @@ export class BlazorQRCode extends BlazorComponent { // arguments list: methodName content callbackFn BootstrapBlazorModules.addScript('./_content/BootstrapBlazor.BarCode/modules/qrcode.min.js') + this._invoker = this._config.arguments[0] + this._content = this._config.arguments[1] + this._invokerMethod = this._config.arguments[2] + this._qr = this._element.querySelector(this._config.QRSELECTOR) + const handler = window.setInterval(() => { if (typeof QRCode === 'function') { - window.clearInterval(handler); + window.clearInterval(handler) dowork() } }, 100) - this._qr = this._element.querySelector(this._config.QRSELECTOR) - this._invokerName = this._config.arguments[3] - const dowork = () => { - this._qr.innerHTML = '' - this._execute(this._config.arguments) + this._generate() } } _execute(args) { - const obj = args[0] - const method = args[1] - const text = args[2] - if (method === 'generate') { - if (this._qrcode === undefined) { - const config = { - ...this._config, - ...{ - height: this._config.width, - text: text, - correctLevel: QRCode.CorrectLevel.H - } + this._content = args[1] + if (this._content.length > 0) { + this._generate() + } + else { + this._clear() + } + } + + _clear() { + this._qrcode.clear() + const img = this._qr.querySelector('img') + img.src = '' + } + + _generate() { + if (this._qrcode === undefined) { + const config = { + ...this._config, + ...{ + height: this._config.width, + text: this._content, + correctLevel: QRCode.CorrectLevel.H } - this._qrcode = new QRCode(this._qr, config) - } - else { - this._qrcode.clear() - this._qrcode.makeCode(text) } - obj.invokeMethodAsync(this._invokerName) + this._qrcode = new QRCode(this._qr, config) + } + else { + this._qrcode.clear() + this._qrcode.makeCode(this._content) } + this._invoker.invokeMethodAsync(this._invokerMethod) } static get Default() { diff --git a/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.razor b/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.razor index 41eb95d21..4a263b007 100644 --- a/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.razor +++ b/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.razor @@ -1,7 +1,7 @@ @namespace BootstrapBlazor.Components @inherits BootstrapModuleComponentBase -
+
@if (ShowButtons) { diff --git a/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.razor.cs b/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.razor.cs index e58c79c10..f451f96d3 100644 --- a/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.razor.cs +++ b/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.razor.cs @@ -10,10 +10,8 @@ namespace BootstrapBlazor.Components; /// QRCode 组件 /// [JSModuleAutoLoader("./_content/BootstrapBlazor.BarCode/qrcode.bundle.min.js", JSObjectReference = true, ModuleName = "BlazorQRCode", Relative = false)] -public partial class QRCode : IAsyncDisposable +public partial class QRCode { - private ElementReference QRCodeElement { get; set; } - private string? ClassString => CssBuilder.Default("qrcode") .AddClassFromAttributes(AdditionalAttributes) .Build(); @@ -90,8 +88,6 @@ public partial class QRCode : IAsyncDisposable [Parameter] public int Width { get; set; } = 128; - private string? MethodName { get; set; } = "generate"; - [Inject] [NotNull] private IStringLocalizer? Localizer { get; set; } @@ -113,31 +109,15 @@ public partial class QRCode : IAsyncDisposable /// /// /// - protected override async Task ModuleInitAsync() - { - if (Module != null) - { - await Module.InvokeVoidAsync($"{ModuleName}.init", QRCodeElement, MethodName, Content, nameof(Generated)); - } - MethodName = null; - } + protected override Task ModuleInitAsync() => InvokeInitAsync(Id, Content, nameof(Generated)); - /// - /// - /// - /// - protected override async Task ModuleExecuteAsync() + private async Task Clear() { - if (Module != null) - { - await Module.InvokeVoidAsync($"{ModuleName}.execute", QRCodeElement, MethodName, Content); - } - MethodName = null; + Content = ""; + await InvokeExecuteAsync(Id, ""); } - private void Clear() => MethodName = "clear"; - - private void Generate() => MethodName = string.IsNullOrEmpty(Content) ? "clear" : "generate"; + private Task Generate() => InvokeExecuteAsync(Id, Content); /// /// diff --git a/src/Extensions/Components/BootstrapBlazor.BarCode/wwwroot/qrcode.bundle.min.js b/src/Extensions/Components/BootstrapBlazor.BarCode/wwwroot/qrcode.bundle.min.js index afe341c0c..36c7747f2 100644 --- a/src/Extensions/Components/BootstrapBlazor.BarCode/wwwroot/qrcode.bundle.min.js +++ b/src/Extensions/Components/BootstrapBlazor.BarCode/wwwroot/qrcode.bundle.min.js @@ -1 +1 @@ -import BlazorComponent from"../../../_content/BootstrapBlazor/modules/base/blazor-component.js";export class BlazorQRCode extends BlazorComponent{_init(){BootstrapBlazorModules.addScript("./_content/BootstrapBlazor.BarCode/modules/qrcode.min.js");const n=window.setInterval(()=>{typeof QRCode=="function"&&(window.clearInterval(n),t())},100);this._qr=this._element.querySelector(this._config.QRSELECTOR);this._invokerName=this._config.arguments[3];const t=()=>{this._qr.innerHTML="",this._execute(this._config.arguments)}}_execute(n){const i=n[0],r=n[1],t=n[2];if(r==="generate"){if(this._qrcode===undefined){const n={...this._config,...{height:this._config.width,text:t,correctLevel:QRCode.CorrectLevel.H}};this._qrcode=new QRCode(this._qr,n)}else this._qrcode.clear(),this._qrcode.makeCode(t);i.invokeMethodAsync(this._invokerName)}}static get Default(){return{width:128,height:128,colorDark:"#000000",colorLight:"#ffffff",QRSELECTOR:".qrcode-img"}}} \ No newline at end of file +import BlazorComponent from"../../../_content/BootstrapBlazor/modules/base/blazor-component.js";export class BlazorQRCode extends BlazorComponent{_init(){BootstrapBlazorModules.addScript("./_content/BootstrapBlazor.BarCode/modules/qrcode.min.js");this._invoker=this._config.arguments[0];this._content=this._config.arguments[1];this._invokerMethod=this._config.arguments[2];this._qr=this._element.querySelector(this._config.QRSELECTOR);const n=window.setInterval(()=>{typeof QRCode=="function"&&(window.clearInterval(n),t())},100),t=()=>{this._generate()}}_execute(n){this._content=n[1];this._content.length>0?this._generate():this._clear()}_clear(){this._qrcode.clear();const n=this._qr.querySelector("img");n.src=""}_generate(){if(this._qrcode===undefined){const n={...this._config,...{height:this._config.width,text:this._content,correctLevel:QRCode.CorrectLevel.H}};this._qrcode=new QRCode(this._qr,n)}else this._qrcode.clear(),this._qrcode.makeCode(this._content);this._invoker.invokeMethodAsync(this._invokerMethod)}static get Default(){return{width:128,height:128,colorDark:"#000000",colorLight:"#ffffff",QRSELECTOR:".qrcode-img"}}} \ No newline at end of file -- Gitee From e97771a9717f0e7eb4672138e46e3674fd5f28da Mon Sep 17 00:00:00 2001 From: Argo-Asicotech Date: Tue, 25 Oct 2022 17:57:15 +0800 Subject: [PATCH 3/3] chore: bump version 6.1.2 --- .../BootstrapBlazor.BarCode/BootstrapBlazor.BarCode.csproj | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Extensions/Components/BootstrapBlazor.BarCode/BootstrapBlazor.BarCode.csproj b/src/Extensions/Components/BootstrapBlazor.BarCode/BootstrapBlazor.BarCode.csproj index acd1ffab4..cfeac7b94 100644 --- a/src/Extensions/Components/BootstrapBlazor.BarCode/BootstrapBlazor.BarCode.csproj +++ b/src/Extensions/Components/BootstrapBlazor.BarCode/BootstrapBlazor.BarCode.csproj @@ -3,7 +3,7 @@ - 6.1.1 + 6.1.2 @@ -24,7 +24,7 @@ - + -- Gitee