From eff512c8f25b9462e6c2175298170b3ff42bdb13 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Fri, 9 May 2025 15:29:55 +0800 Subject: [PATCH 1/9] =?UTF-8?q?refactor:=20=E5=A2=9E=E5=8A=A0=E5=85=A8?= =?UTF-8?q?=E5=B1=8F=E6=8C=89=E9=92=AE=E6=BA=90=E7=A0=81=E6=98=A0=E5=B0=84?= =?UTF-8?q?=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Server/docs.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/BootstrapBlazor.Server/docs.json b/src/BootstrapBlazor.Server/docs.json index 5d6a7e2ad57..b3dd5b46714 100644 --- a/src/BootstrapBlazor.Server/docs.json +++ b/src/BootstrapBlazor.Server/docs.json @@ -232,7 +232,8 @@ "opt-input": "OtpInputs", "otp-service": "OtpServices", "video-device": "VideoDevices", - "audio-device": "AudioDevices" + "audio-device": "AudioDevices", + "fullscreen-button": "FullScreenButtons" }, "video": { "table": "BV1ap4y1x7Qn?p=1", From 8c082fd2b74f0e202445ce87b6289204dcce9b0b Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Fri, 9 May 2025 15:35:54 +0800 Subject: [PATCH 2/9] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=E6=9C=AC?= =?UTF-8?q?=E5=9C=B0=E5=8C=96=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Server/Locales/en-US.json | 17 +++++++++++------ src/BootstrapBlazor.Server/Locales/zh-CN.json | 17 +++++++++++------ 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index 8e78d65fdcc..fec9e7fba21 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -2254,11 +2254,15 @@ "Tips": "This component provides functionality in the form of injection services, the user experience is very comfortable to use, anytime, anywhere calls, need to be built into the page using this component FullScreen component, or in the main layout component of MainLayout, the sample code is as follows:", "FullScreenNormalTitle": "Basic usage", "FullScreenNormalIntro": "The entire page is fully screened by calling the Show method that FullScreenService service instance", - "FullScreenNormalButtonText1": "FullScreen", - "FullScreenTitleTitle": "Button", - "FullScreenTitleIntro": "The full screen of the entire web page is component FullScreenButton", - "FullScreenTitleLi1": "The button default icon can be set through the ButtonIcon, and the full-screen icon can be set through the FullScreenIcon property", - "FullScreenTitleLi3": "Use the Text property to set current page title" + "FullScreenNormalButtonText1": "FullScreen" + }, + "BootstrapBlazor.Server.Components.Samples.FullScreenButtons": { + "FullScreenButtonTitle": "FullScreenButton", + "FullScreenButtonIntro": "Use the FullScreenButton component to make the entire web page or a specified element full screen", + "FullScreenButtonNormalTitle": "Basic usage", + "FullScreenButtonNormalIntro": "You can set the default icon of the button through Icon, and set the icon when exiting full screen through the FullScreenExitIcon property", + "FullScreenTitleLi1": "Set the fullscreen element ID through the TargetId parameter", + "FullScreenTitleLi2": "Set the current page title text through the Text property" }, "BootstrapBlazor.Server.Components.Samples.Buttons": { "Title": "Button", @@ -4923,7 +4927,8 @@ "OtpInput": "OtpInput", "TotpService": "ITotpService", "VideoDevice": "IVideoDevice", - "AudioDevice": "IAudioDevice" + "AudioDevice": "IAudioDevice", + "FullScreenButton": "FullScreenButton" }, "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": { "TablesHeaderTitle": "Header grouping function", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index ae2eac1a317..5496f89ca58 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -2254,11 +2254,15 @@ "Tips": "本组件使用注入服务的形式提供功能，使用时用户体验效果非常舒适，随时随地的调用，需要在使用本组件的页面中内置 FullScreen 组件，或者在 MainLayout 主布局组件中内置，示例代码如下：", "FullScreenNormalTitle": "基础用法", "FullScreenNormalIntro": "通过调用FullScreenService 服务实例的 Show 方法将整个网页进行全屏化", - "FullScreenNormalButtonText1": "全屏", - "FullScreenTitleTitle": "按钮组件", - "FullScreenTitleIntro": "通过 FullScreenButton 组件将整个网页进行全屏化", - "FullScreenTitleLi1": "可通过 ButtonIcon 设置按钮默认图标，通过 FullScreenIcon 属性设置全屏时图标", - "FullScreenTitleLi3": "通过 Text 属性设置当前页标题文字" + "FullScreenNormalButtonText1": "全屏" + }, + "BootstrapBlazor.Server.Components.Samples.FullScreenButtons": { + "FullScreenButtonTitle": "FullScreenButton 全屏按钮", + "FullScreenButtonIntro": "通过 FullScreenButton 组件将整个网页或者指定元素进行全屏化", + "FullScreenButtonNormalTitle": "基础用法", + "FullScreenButtonNormalIntro": "可通过 Icon 设置按钮默认图标，通过 FullScreenExitIcon 属性设置退出全屏时图标", + "FullScreenTitleLi1": "通过 TargetId 参数设置全屏元素 Id", + "FullScreenTitleLi2": "通过 Text 属性设置当前页标题文字" }, "BootstrapBlazor.Server.Components.Samples.Buttons": { "Title": "Button 按钮", @@ -4923,7 +4927,8 @@ "OtpInput": "验证码输入框 OtpInput", "TotpService": "时间密码验证服务 ITotpService", "VideoDevice": "视频设备服务 IVideoDevice", - "AudioDevice": "音频设备服务 IAudioDevice" + "AudioDevice": "音频设备服务 IAudioDevice", + "FullScreenButton": "全屏按钮 FullScreenButton" }, "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": { "TablesHeaderTitle": "表头分组功能", From f5c6150b9a838b6fd2beab052be1890b95171025 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Fri, 9 May 2025 15:36:03 +0800 Subject: [PATCH 3/9] =?UTF-8?q?chore:=20=E5=A2=9E=E5=8A=A0=E5=85=A8?= =?UTF-8?q?=E5=B1=8F=E6=8C=89=E9=92=AE=E8=8F=9C=E5=8D=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Extensions/MenusLocalizerExtensions.cs | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs index d4c98de9bec..01de5dff64b 100644 --- a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs +++ b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs @@ -1182,6 +1182,12 @@ void AddNotice(DemoMenuItem item) Url = "flip-clock" }, new() + { + IsNew = true, + Text = Localizer["FullScreenButton"], + Url = "fullscreen-button" + }, + new() { Text = Localizer["Light"], Url = "light" From 4ecc6a2d713741d536059affff6435c7d4906030 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Fri, 9 May 2025 15:36:29 +0800 Subject: [PATCH 4/9] =?UTF-8?q?refactor:=20=E6=9B=B4=E6=96=B0=E5=85=A8?= =?UTF-8?q?=E5=B1=8F=E6=9C=8D=E5=8A=A1=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Samples/FullScreens.razor | 10 ---------- .../Components/Samples/FullScreens.razor.cs | 14 ++++++++++++++ 2 files changed, 14 insertions(+), 10 deletions(-) create mode 100644 src/BootstrapBlazor.Server/Components/Samples/FullScreens.razor.cs diff --git a/src/BootstrapBlazor.Server/Components/Samples/FullScreens.razor b/src/BootstrapBlazor.Server/Components/Samples/FullScreens.razor index 7debdfe9890..d2f23870bca 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/FullScreens.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/FullScreens.razor @@ -9,13 +9,3 @@ - - -
-
    -
  • @((MarkupString)Localizer["FullScreenTitleLi1"].Value)
    • -
  • @((MarkupString)Localizer["FullScreenTitleLi3"].Value)
    • -
-
- - diff --git a/src/BootstrapBlazor.Server/Components/Samples/FullScreens.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/FullScreens.razor.cs new file mode 100644 index 00000000000..6af806f6347 --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Samples/FullScreens.razor.cs @@ -0,0 +1,14 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the Apache 2.0 License +// See the LICENSE file in the project root for more information. +// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone + +namespace BootstrapBlazor.Server.Components.Samples; + +/// +/// FullScreen Service +/// +public partial class FullScreens +{ + +} From 05b061ff8a064de0077a0dba99e22e0116f9ddb0 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Fri, 9 May 2025 15:37:12 +0800 Subject: [PATCH 5/9] =?UTF-8?q?doc:=20=E5=A2=9E=E5=8A=A0=E5=85=A8=E5=B1=8F?= =?UTF-8?q?=E6=8C=89=E9=92=AE=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Samples/FullScreenButtons.razor | 18 +++++++ .../Samples/FullScreenButtons.razor.cs | 52 +++++++++++++++++++ 2 files changed, 70 insertions(+) create mode 100644 src/BootstrapBlazor.Server/Components/Samples/FullScreenButtons.razor create mode 100644 src/BootstrapBlazor.Server/Components/Samples/FullScreenButtons.razor.cs diff --git a/src/BootstrapBlazor.Server/Components/Samples/FullScreenButtons.razor b/src/BootstrapBlazor.Server/Components/Samples/FullScreenButtons.razor new file mode 100644 index 00000000000..f20a46790e0 --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Samples/FullScreenButtons.razor @@ -0,0 +1,18 @@ +@page "/fullscreen-button" +@inject IStringLocalizer Localizer + +

@Localizer["FullScreenButtonTitle"]

+ +

@((MarkupString)Localizer["FullScreenButtonIntro"].Value)

+ + +
+
    +
  • @((MarkupString)Localizer["FullScreenTitleLi1"].Value)
    • +
  • @((MarkupString)Localizer["FullScreenTitleLi2"].Value)
    • +
+
+ + + + diff --git a/src/BootstrapBlazor.Server/Components/Samples/FullScreenButtons.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/FullScreenButtons.razor.cs new file mode 100644 index 00000000000..ed92f4139d7 --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Samples/FullScreenButtons.razor.cs @@ -0,0 +1,52 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the Apache 2.0 License +// See the LICENSE file in the project root for more information. +// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone + +namespace BootstrapBlazor.Server.Components.Samples; + +/// +/// 全屏按钮代码示例 +/// +public partial class FullScreenButtons +{ + /// + /// GetAttributes + /// + /// + private static AttributeItem[] GetAttributes() => + [ + new() + { + Name = nameof(FullScreenButton.Icon), + Description = "全屏图标", + Type = "string", + ValueList = " — ", + DefaultValue = " — " + }, + new() + { + Name = nameof(FullScreenButton.FullScreenExitIcon), + Description = "退出全屏图标", + Type = "string", + ValueList = " — ", + DefaultValue = " — " + }, + new() + { + Name = nameof(FullScreenButton.TargetId), + Description = "全屏元素 Id", + Type = "string", + ValueList = " — ", + DefaultValue = " — " + }, + new() + { + Name = nameof(FullScreenButton.Text), + Description = "显示文字", + Type = "string", + ValueList = " — ", + DefaultValue = " — " + } + ]; +} From 671b34939f6db0b19d54ad6eedaa726ba4f771bb Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Fri, 9 May 2025 15:37:19 +0800 Subject: [PATCH 6/9] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/FullScreen/FullScreenButton.razor.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/BootstrapBlazor/Components/FullScreen/FullScreenButton.razor.cs b/src/BootstrapBlazor/Components/FullScreen/FullScreenButton.razor.cs index 6425e54b2d5..525f73589d9 100644 --- a/src/BootstrapBlazor/Components/FullScreen/FullScreenButton.razor.cs +++ b/src/BootstrapBlazor/Components/FullScreen/FullScreenButton.razor.cs @@ -11,7 +11,7 @@ namespace BootstrapBlazor.Components; public partial class FullScreenButton { /// - /// 获得/设置 退出全屏图标 默认 fa-solid fa-maximize + /// 获得/设置 全屏图标 默认 fa-solid fa-maximize /// [Parameter] [Obsolete("已弃用，请使用 Icon 参数；Deprecated. Please use Icon parameter")] From 07c00e823f81d1ea3b073c8a5e8598762914e16d Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Fri, 9 May 2025 15:46:02 +0800 Subject: [PATCH 7/9] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20Selector=20?= =?UTF-8?q?=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/FullScreen/FullScreenOption.cs | 5 +++++ src/BootstrapBlazor/wwwroot/modules/fullscreen.js | 3 +++ 2 files changed, 8 insertions(+) diff --git a/src/BootstrapBlazor/Components/FullScreen/FullScreenOption.cs b/src/BootstrapBlazor/Components/FullScreen/FullScreenOption.cs index a9b1da37287..349ad2cc3aa 100644 --- a/src/BootstrapBlazor/Components/FullScreen/FullScreenOption.cs +++ b/src/BootstrapBlazor/Components/FullScreen/FullScreenOption.cs @@ -19,4 +19,9 @@ public class FullScreenOption /// 获得/设置 要全屏的 HTML Element Id /// public string? Id { get; set; } + + /// + /// 获得/设置 要全屏的 HTML css selector + /// + public string? Selector { get; set; } } diff --git a/src/BootstrapBlazor/wwwroot/modules/fullscreen.js b/src/BootstrapBlazor/wwwroot/modules/fullscreen.js index addbca44456..93ceb5bd14c 100644 --- a/src/BootstrapBlazor/wwwroot/modules/fullscreen.js +++ b/src/BootstrapBlazor/wwwroot/modules/fullscreen.js @@ -6,6 +6,9 @@ export async function toggle(options) { if (options.id) { el = document.getElementById(options.id); } + else if (options.selector) { + el = document.querySelector(options.selector); + } else if (isElement(options.element)) { el = options.element; } From 202cec03f02b143f22bdbb427e1d533f4d006314 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Fri, 9 May 2025 15:46:16 +0800 Subject: [PATCH 8/9] =?UTF-8?q?doc:=20=E5=A2=9E=E5=8A=A0=20FullScreenOptio?= =?UTF-8?q?n=20=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Samples/FullScreens.razor | 3 +++ src/BootstrapBlazor.Server/Locales/en-US.json | 4 ++-- src/BootstrapBlazor.Server/Locales/zh-CN.json | 4 ++-- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/FullScreens.razor b/src/BootstrapBlazor.Server/Components/Samples/FullScreens.razor index d2f23870bca..04153a8d479 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/FullScreens.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/FullScreens.razor @@ -7,5 +7,8 @@

@((MarkupString)Localizer["FullScreensDescription"].Value)

+
+
@((MarkupString)Localizer["FullScreenOptionDesc"].Value)
+
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index fec9e7fba21..2a2af746a92 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -2251,10 +2251,10 @@ "BootstrapBlazor.Server.Components.Samples.FullScreens": { "FullScreensTitle": "FullScreen", "FullScreensDescription": "Human-computer interaction by injecting service calls Show method pop-ups", - "Tips": "This component provides functionality in the form of injection services, the user experience is very comfortable to use, anytime, anywhere calls, need to be built into the page using this component FullScreen component, or in the main layout component of MainLayout, the sample code is as follows:", "FullScreenNormalTitle": "Basic usage", "FullScreenNormalIntro": "The entire page is fully screened by calling the Show method that FullScreenService service instance", - "FullScreenNormalButtonText1": "FullScreen" + "FullScreenNormalButtonText1": "FullScreen", + "FullScreenOptionDesc": "You can set the full-screen window by setting FullScreenOption, and specify the page element by ElementReference Id Selector" }, "BootstrapBlazor.Server.Components.Samples.FullScreenButtons": { "FullScreenButtonTitle": "FullScreenButton", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index 5496f89ca58..1bdee0a05a2 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -2251,10 +2251,10 @@ "BootstrapBlazor.Server.Components.Samples.FullScreens": { "FullScreensTitle": "FullScreen 全屏", "FullScreensDescription": "通过注入服务调用 Show 方法弹出窗口进行人机交互", - "Tips": "本组件使用注入服务的形式提供功能，使用时用户体验效果非常舒适，随时随地的调用，需要在使用本组件的页面中内置 FullScreen 组件，或者在 MainLayout 主布局组件中内置，示例代码如下：", "FullScreenNormalTitle": "基础用法", "FullScreenNormalIntro": "通过调用FullScreenService 服务实例的 Show 方法将整个网页进行全屏化", - "FullScreenNormalButtonText1": "全屏" + "FullScreenNormalButtonText1": "全屏", + "FullScreenOptionDesc": "通过设置 FullScreenOption 对全屏化的窗口进行设置，可通过 ElementReference Id Selector 指定页面元素" }, "BootstrapBlazor.Server.Components.Samples.FullScreenButtons": { "FullScreenButtonTitle": "FullScreenButton 全屏按钮", From eabaf854164f7abd3bf06cc77aea282562636526 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Fri, 9 May 2025 15:47:15 +0800 Subject: [PATCH 9/9] =?UTF-8?q?test:=20=E5=A2=9E=E5=8A=A0=E5=8D=95?= =?UTF-8?q?=E5=85=83=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- test/UnitTest/Services/FullScreenServiceTest.cs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/test/UnitTest/Services/FullScreenServiceTest.cs b/test/UnitTest/Services/FullScreenServiceTest.cs index fe7d91c216e..121d04e1678 100644 --- a/test/UnitTest/Services/FullScreenServiceTest.cs +++ b/test/UnitTest/Services/FullScreenServiceTest.cs @@ -88,9 +88,10 @@ public async Task Toggle_Ok() [Fact] public void FullScreenOption_Ok() { - var option = new FullScreenOption() { Element = new("test01", null), Id = "test" }; + var option = new FullScreenOption() { Element = new("test01", null), Id = "test", Selector = "test-selector" }; Assert.NotNull(option.Id); Assert.Null(option.Element.Context); + Assert.Null(option.Selector); } private class MockFullScreen : ComponentBase