From 4bac0ce928ee6a33e702c5848ff1a7e92ad39044 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maro=C5=A1=20Valter?= Date: Thu, 24 Sep 2020 20:04:47 +0200 Subject: [PATCH 1/6] Enable slider values update from code --- src/MatBlazor.Demo/Demo/DemoMatSlider.razor | 52 ++++++++-- src/MatBlazor.Web/src/matSlider/matSlider.js | 69 +++++++++----- .../Components/Base/BaseMatInputComponent.cs | 3 +- .../Components/MatSlider/BaseMatSlider.cs | 94 ++++++++++++++++++- 4 files changed, 181 insertions(+), 37 deletions(-) diff --git a/src/MatBlazor.Demo/Demo/DemoMatSlider.razor b/src/MatBlazor.Demo/Demo/DemoMatSlider.razor index 3be302f0..c861d8a9 100644 --- a/src/MatBlazor.Demo/Demo/DemoMatSlider.razor +++ b/src/MatBlazor.Demo/Demo/DemoMatSlider.razor @@ -23,7 +23,7 @@ - @code @@ -70,7 +70,7 @@ - @code @@ -118,7 +118,7 @@ - @code @@ -165,7 +165,7 @@ - @code @@ -213,7 +213,7 @@ - @code @@ -243,7 +243,7 @@ - ")> @@ -267,7 +267,7 @@ - @code @@ -283,3 +283,41 @@ ")> + +
Value update
+ + + + + + + + @code + { + + public decimal Value { get; set; } = 50; + public decimal ValueMin { get; set; } = 0; + public decimal ValueMax { get; set; } = 100; + + } + + + + + + + + + @code + { + + public decimal Value { get; set; } = 50; + public decimal ValueMin { get; set; } = 0; + public decimal ValueMax { get; set; } = 100; + + } + + ")> + + \ No newline at end of file diff --git a/src/MatBlazor.Web/src/matSlider/matSlider.js b/src/MatBlazor.Web/src/matSlider/matSlider.js index 4a5a4431..5a64ad26 100644 --- a/src/MatBlazor.Web/src/matSlider/matSlider.js +++ b/src/MatBlazor.Web/src/matSlider/matSlider.js @@ -1,40 +1,59 @@ import { MDCSlider } from '@material/slider'; +export let sliders = {} + export class MatSlider { + OnChange(jsHelper) { + try { + jsHelper.invokeMethodAsync('OnChangeHandler', this.slider.value) + .then(r => { + // console.log(r); + }); + } catch (e) { + debugger; + throw e; + } + } constructor(ref, jsHelper, immediate) { this.slider = new MDCSlider(ref); - this.slider.listen('MDCSlider:change', () => { - // debugger; - try { - jsHelper.invokeMethodAsync('OnChangeHandler', this.slider.value) - .then(r => { - // console.log(r); - }); - } catch (e) { - debugger; - throw e; - } - }); + this.slider.listen('MDCSlider:change', () => this.OnChange(jsHelper)); if (immediate) { - this.slider.listen('MDCSlider:input', () => { - // debugger; - try { - jsHelper.invokeMethodAsync('OnChangeHandler', this.slider.value) - .then(r => { - // console.log(r); - }); - } catch (e) { - debugger; - throw e; - } - }); + this.slider.listen('MDCSlider:input', () => this.OnChange(jsHelper)); } } } export function init(ref, jsHelper, immediate) { - new MatSlider(ref, jsHelper, immediate); + sliders[ref] = new MatSlider(ref, jsHelper, immediate); +} + +export function updateValue(ref, value) { + if (!sliders[ref]) { + return; + } + sliders[ref].slider.value = value; +} + +export function updateValueMin(ref, value) { + if (!sliders[ref]) { + return; + } + sliders[ref].slider.min = value; } + +export function updateValueMax(ref, value) { + if (!sliders[ref]) { + return; + } + sliders[ref].slider.max = value; +} + +export function updateStep(ref, value) { + if (!sliders[ref]) { + return; + } + sliders[ref].slider.step = value; +} \ No newline at end of file diff --git a/src/MatBlazor/Components/Base/BaseMatInputComponent.cs b/src/MatBlazor/Components/Base/BaseMatInputComponent.cs index 9b4bf723..8d2e46ef 100644 --- a/src/MatBlazor/Components/Base/BaseMatInputComponent.cs +++ b/src/MatBlazor/Components/Base/BaseMatInputComponent.cs @@ -43,8 +43,9 @@ public T Value get => _value; set { - OnValueChanged(!EqualityComparer.Default.Equals(_value, value)); + var old = _value; _value = value; + OnValueChanged(!EqualityComparer.Default.Equals(old, value)); } } diff --git a/src/MatBlazor/Components/MatSlider/BaseMatSlider.cs b/src/MatBlazor/Components/MatSlider/BaseMatSlider.cs index 5f2ce71d..ddf1a439 100644 --- a/src/MatBlazor/Components/MatSlider/BaseMatSlider.cs +++ b/src/MatBlazor/Components/MatSlider/BaseMatSlider.cs @@ -1,6 +1,7 @@ using System; -using System.Threading.Tasks; +using System.Collections.Generic; using Microsoft.AspNetCore.Components; +using Microsoft.JSInterop; namespace MatBlazor { @@ -10,6 +11,10 @@ namespace MatBlazor /// sbyte, byte, short, ushort, int, uint, long, ulong, char, float, double, decimal, decimal? public class BaseMatSlider : BaseMatInputComponent { + private TValue valueMin; + private TValue valueMax; + private TValue step; + protected MatDotNetObjectReference jsHelper; public BaseMatSlider() @@ -36,6 +41,24 @@ private void Value_OnChangeEvent(object sender, decimal e) CurrentValue = SwitchT.FromDecimal(e); } + protected override void OnValueChanged(bool changed) + { + if (changed && Rendered) + { + InvokeAsync(async () => + { + try + { + await Js.InvokeVoidAsync("matBlazor.matSlider.updateValue", Ref, Value); + } + catch (Exception e) + { + Console.WriteLine(e.Message); + } + }); + } + } + public override void Dispose() { base.Dispose(); @@ -44,10 +67,52 @@ public override void Dispose() [Parameter] - public TValue ValueMin { get; set; } + public TValue ValueMin + { + get => valueMin; + set + { + if (!EqualityComparer.Default.Equals(valueMin, value) && Rendered) + { + InvokeAsync(async () => + { + try + { + await Js.InvokeVoidAsync("matBlazor.matSlider.updateValueMin", Ref, value); + } + catch (Exception e) + { + Console.WriteLine(e.Message); + } + }); + } + valueMin = value; + } + } [Parameter] - public TValue ValueMax { get; set; } + public TValue ValueMax + { + get => valueMax; + set + { + if (!EqualityComparer.Default.Equals(valueMax, value) && Rendered) + { + InvokeAsync(async () => + { + try + { + await Js.InvokeVoidAsync("matBlazor.matSlider.updateValueMax", Ref, value); + } + catch (Exception e) + { + Console.WriteLine(e.Message); + } + }); + } + valueMax = value; + } + } [Parameter] public bool Discrete { get; set; } @@ -62,7 +127,28 @@ public override void Dispose() public bool Pin { get; set; } [Parameter] - public TValue Step { get; set; } + public TValue Step + { + get => step; + set + { + if (!EqualityComparer.Default.Equals(step, value) && Rendered) + { + InvokeAsync(async () => + { + try + { + await Js.InvokeVoidAsync("matBlazor.matSlider.updateStep", Ref, value); + } + catch (Exception e) + { + Console.WriteLine(e.Message); + } + }); + } + step = value; + } + } [Parameter] public bool EnableStep { get; set; } From 2e701d21c05c53b1b3086b6a06a6d68920aba62e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maro=C5=A1=20Valter?= Date: Thu, 24 Sep 2020 20:23:17 +0200 Subject: [PATCH 2/6] Add catch to slider js Update demo example --- src/MatBlazor.Demo/Demo/DemoMatSlider.razor | 14 ++++++++++++-- src/MatBlazor.Web/src/matSlider/matSlider.js | 14 +++++--------- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/MatBlazor.Demo/Demo/DemoMatSlider.razor b/src/MatBlazor.Demo/Demo/DemoMatSlider.razor index c861d8a9..f867fea8 100644 --- a/src/MatBlazor.Demo/Demo/DemoMatSlider.razor +++ b/src/MatBlazor.Demo/Demo/DemoMatSlider.razor @@ -290,7 +290,7 @@ - + @code { @@ -299,6 +299,11 @@ public decimal ValueMin { get; set; } = 0; public decimal ValueMax { get; set; } = 100; + public void OnValueChanged2(decimal val) + { + Value = val; + } + } @@ -307,7 +312,7 @@ - + @code { @@ -316,6 +321,11 @@ public decimal ValueMin { get; set; } = 0; public decimal ValueMax { get; set; } = 100; + public void OnValueChanged2(decimal val) + { + Value = val; + } + } ")> diff --git a/src/MatBlazor.Web/src/matSlider/matSlider.js b/src/MatBlazor.Web/src/matSlider/matSlider.js index 5a64ad26..463d8c71 100644 --- a/src/MatBlazor.Web/src/matSlider/matSlider.js +++ b/src/MatBlazor.Web/src/matSlider/matSlider.js @@ -4,15 +4,11 @@ export let sliders = {} export class MatSlider { OnChange(jsHelper) { - try { - jsHelper.invokeMethodAsync('OnChangeHandler', this.slider.value) - .then(r => { - // console.log(r); - }); - } catch (e) { - debugger; - throw e; - } + jsHelper.invokeMethodAsync('OnChangeHandler', this.slider.value) + .then(r => { + // console.log(r); + }) + .catch(e => console.error(e)); } constructor(ref, jsHelper, immediate) { From a1feda8f080bbf3bc3cd3cec604d731f73c7f536 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maro=C5=A1=20Valter?= Date: Wed, 7 Oct 2020 20:02:16 +0200 Subject: [PATCH 3/6] Fix MatSlider map key in JS --- src/MatBlazor.Web/src/matSlider/matSlider.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/MatBlazor.Web/src/matSlider/matSlider.js b/src/MatBlazor.Web/src/matSlider/matSlider.js index 463d8c71..a073a166 100644 --- a/src/MatBlazor.Web/src/matSlider/matSlider.js +++ b/src/MatBlazor.Web/src/matSlider/matSlider.js @@ -23,33 +23,33 @@ export class MatSlider { export function init(ref, jsHelper, immediate) { - sliders[ref] = new MatSlider(ref, jsHelper, immediate); + sliders[ref.id] = new MatSlider(ref, jsHelper, immediate); } export function updateValue(ref, value) { - if (!sliders[ref]) { + if (!sliders[ref.id]) { return; } - sliders[ref].slider.value = value; + sliders[ref.id].slider.value = value; } export function updateValueMin(ref, value) { - if (!sliders[ref]) { + if (!sliders[ref.id]) { return; } - sliders[ref].slider.min = value; + sliders[ref.id].slider.min = value; } export function updateValueMax(ref, value) { - if (!sliders[ref]) { + if (!sliders[ref.id]) { return; } - sliders[ref].slider.max = value; + sliders[ref.id].slider.max = value; } export function updateStep(ref, value) { - if (!sliders[ref]) { + if (!sliders[ref.id]) { return; } - sliders[ref].slider.step = value; + sliders[ref.id].slider.step = value; } \ No newline at end of file From 9b2a54836583ad5fc2c9bed40e0467d714cfbe87 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maro=C5=A1=20Valter?= Date: Wed, 7 Oct 2020 20:15:02 +0200 Subject: [PATCH 4/6] Revert code styling cleanup --- src/MatBlazor.Demo/Demo/DemoMatSlider.razor | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/MatBlazor.Demo/Demo/DemoMatSlider.razor b/src/MatBlazor.Demo/Demo/DemoMatSlider.razor index f867fea8..522f7ab6 100644 --- a/src/MatBlazor.Demo/Demo/DemoMatSlider.razor +++ b/src/MatBlazor.Demo/Demo/DemoMatSlider.razor @@ -23,7 +23,7 @@ - @code @@ -70,7 +70,7 @@ - @code @@ -118,7 +118,7 @@ - @code @@ -165,7 +165,7 @@ - @code @@ -213,7 +213,7 @@ - @code @@ -243,7 +243,7 @@ - ")> @@ -267,7 +267,7 @@ - @code @@ -308,7 +308,7 @@ - From 0bd41e27a05fff76adc146596522c0eac87e9958 Mon Sep 17 00:00:00 2001 From: MarosValter Date: Wed, 7 Oct 2020 20:30:53 +0200 Subject: [PATCH 5/6] Update DemoMatSlider.razor Revert style cleanup changes --- src/MatBlazor.Demo/Demo/DemoMatSlider.razor | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/MatBlazor.Demo/Demo/DemoMatSlider.razor b/src/MatBlazor.Demo/Demo/DemoMatSlider.razor index 522f7ab6..1407a119 100644 --- a/src/MatBlazor.Demo/Demo/DemoMatSlider.razor +++ b/src/MatBlazor.Demo/Demo/DemoMatSlider.razor @@ -23,7 +23,7 @@ - @code @@ -70,7 +70,7 @@ - @code @@ -118,7 +118,7 @@ - @code @@ -165,7 +165,7 @@ - @code @@ -213,7 +213,7 @@ - @code @@ -243,7 +243,7 @@ - ")> @@ -267,7 +267,7 @@ - @code @@ -308,7 +308,7 @@ - @@ -330,4 +330,4 @@ ")> - \ No newline at end of file + From 11031433285eb8834ed107552a729fd06a7ac3ca Mon Sep 17 00:00:00 2001 From: Keith Date: Wed, 7 Oct 2020 12:22:14 -0700 Subject: [PATCH 6/6] Update DemoMatSlider.razor minor formatting --- src/MatBlazor.Demo/Demo/DemoMatSlider.razor | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/MatBlazor.Demo/Demo/DemoMatSlider.razor b/src/MatBlazor.Demo/Demo/DemoMatSlider.razor index 1407a119..f10d6233 100644 --- a/src/MatBlazor.Demo/Demo/DemoMatSlider.razor +++ b/src/MatBlazor.Demo/Demo/DemoMatSlider.razor @@ -148,7 +148,7 @@ @code - { + { public int Val4 { @@ -169,7 +169,7 @@ @code - { + { public int Val4 {