feat(Marquee): add Marquee component (#2225)

* feat: 新建Marquee滚动字幕组件

* feat: 添加scss变量

* doc: 更新示例

* refactor: 移除css变量

* doc: 更新示例

* feat: 添加MarqueeDirecTion文本滚动方向枚举类型

* doc: 添加注释

* doc: update localizer

* doc: update navmenu localizer

* refactor: 重构css

* doc: update demo

* doc: 更新资源文件

* doc: 更新源码文档映射

* refactor: 更改文件名

* refactor: 更改类名称

* refactor: 脚本增加保护

* refactor: 更新代码

* doc: 更新示例

* feat: ColorPicker 适配 InputGroup 组件

* refactor: 精简代码

* chore: 更新样式

* doc: 更新注释

* test: 增加单元测试

* chore: 更新打包脚本

* doc: 增加注释文档

* refactor: 增加异步检查逻辑防止报错

* refactor: 增加逗号符合规范

* test: 更新单元测试

---------

Co-authored-by: Argo-AscioTech <[email protected]>

src/BootstrapBlazor.Shared/Components/Pre.razor.js

@@ -50,13 +50,28 @@ export async function init(id, title) {
     }
 }
 
-export function highlight(id) {
+export async function highlight(id) {
     const el = document.getElementById(id);
 
     if (el) {
-        hljs.highlightElement(el.querySelector('code'))
-        el.querySelector('.loading').classList.add('d-none')
-        el.classList.remove('loaded')
+        const invoke = () => {
+            hljs.highlightElement(el.querySelector('code'))
+            el.querySelector('.loading').classList.add('d-none')
+            el.classList.remove('loaded')
+        }
+
+        const check = () => new Promise((resolve, reject) => {
+            const handler = setInterval(() => {
+                const done = window.hljs !== void 0;
+                if (done) {
+                    clearInterval(handler)
+                    resolve()
+                }
+            }, 20)
+        })
+
+        await check();
+        invoke();
     }
 }
 

src/BootstrapBlazor.Shared/Extensions/MenusLocalizerExtensions.cs

@@ -1021,6 +1021,12 @@ void AddNotice(DemoMenuItem item)
                     Url = "light"
                 },
                 new()
+                {
+                    IsNew = true,
+                    Text = Localizer["Marquee"],
+                    Url = "marquee"
+                },
+                new()
                 {
                     Text = Localizer["Message"],
                     Url = "message"

src/BootstrapBlazor.Shared/Locales/en.json

@@ -4514,7 +4514,8 @@
     "QueryBuilder": "QueryBuilder",
     "WebSerial": "Web Serial",
     "MindMap": "Mind Map",
-    "WebSpeech": "Web Speech"
+    "WebSpeech": "Web Speech",
+    "Marquee": "Marquee"
   },
   "BootstrapBlazor.Shared.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "Header grouping function",
@@ -5902,5 +5903,10 @@
     "AttrItemTemplate": "the template of Item",
     "AttrOnClickItem": "the callback on click item",
     "GetItemDisplayText": "the callback on get item display text"
+  },
+  "BootstrapBlazor.Shared.Samples.Marquees": {
+    "MarqueeTitle": "Usage",
+    "MarqueeIntro": "Adjusting the text scrolling effect through parameters",
+    "MarqueeDescription": "Marquee component"
   }
 }

src/BootstrapBlazor.Shared/Locales/zh.json

@@ -4514,7 +4514,8 @@
     "QueryBuilder": "条件生成器 QueryBuilder",
     "WebSerial": "串口读写 WebSerial",
     "MindMap": "思维导图 MindMap",
-    "WebSpeech": "语音识别/合成 WebSpeech"
+    "WebSpeech": "语音识别/合成 WebSpeech",
+    "Marquee": "文字滚动 Marquee"
   },
   "BootstrapBlazor.Shared.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "表头分组功能",
@@ -5902,5 +5903,10 @@
     "AttrItemTemplate": "选项模板",
     "AttrOnClickItem": "点击候选项回调方法",
     "GetItemDisplayText": "获得显示项显示内容回调方法"
+  },
+  "BootstrapBlazor.Shared.Samples.Marquees": {
+    "MarqueeTitle": "基本用法",
+    "MarqueeIntro": "通过参数调节文字滚动效果",
+    "MarqueeDescription": "文字滚动组件"
   }
 }

src/BootstrapBlazor.Shared/Samples/Marquees.razor

@@ -0,0 +1,39 @@
+@page "/marquee"
+@inject IStringLocalizer<Marquees> Localizer
+
+<h3>@Localizer["MarqueeDescription"]</h3>
+
+<DemoBlock Title="@Localizer["MarqueeTitle"]" Introduction="@Localizer["MarqueeIntro"]" Name="Normal">
+    <section ignore>
+        <h4>Options</h4>
+        <BootstrapInputGroup>
+            <BootstrapInputGroupLabel class="label-width" DisplayText="Direction" />
+            <RadioList @bind-Value="@Direction" />
+        </BootstrapInputGroup>
+        <BootstrapInputGroup>
+            <BootstrapInputGroupLabel class="label-width" DisplayText="Duration" />
+            <span class="input-group-text" style="width:48px">@Duration</span>
+            <Slider @bind-Value="@Duration" Step="1" Min="15" Max="30" />
+        </BootstrapInputGroup>
+        <BootstrapInputGroup>
+            <BootstrapInputGroupLabel class="label-width" DisplayText="FontSize" />
+            <span class="input-group-text" style="width:48px">@FontSize</span>
+            <Slider @bind-Value="@FontSize" Step="1" Min="20" Max="72" />
+        </BootstrapInputGroup>
+        <BootstrapInputGroup>
+            <BootstrapInputGroupLabel class="label-width" DisplayText="Text" />
+            <BootstrapInput TValue="string" @bind-Value="@Text" />
+        </BootstrapInputGroup>
+        <BootstrapInputGroup>
+            <BootstrapInputGroupLabel class="label-width" DisplayText="TextColor" />
+            <ColorPicker @bind-Value="@TextColor" />
+        </BootstrapInputGroup>
+        <BootstrapInputGroup>
+            <BootstrapInputGroupLabel class="label-width" DisplayText="BackgroundColor" />
+            <ColorPicker @bind-Value="@BackgroundColor" />
+        </BootstrapInputGroup>
+    </section>
+
+    <Marquee Text="@Text" Color="@TextColor" BackgroundColor="@BackgroundColor"
+             Duration="@Duration" DirecTion="@Direction" FontSize="@FontSize" />
+</DemoBlock>

src/BootstrapBlazor.Shared/Samples/Marquees.razor.cs

@@ -0,0 +1,23 @@
+// Copyright (c) Argo Zhang ([email protected]). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Shared.Samples;
+
+/// <summary>
+/// Marquee 组件
+/// </summary>
+public partial class Marquees
+{
+    private string BackgroundColor { get; set; } = "#000000";
+
+    private string TextColor { get; set; } = "#ff0000";
+
+    private string Text { get; set; } = "BootstrapBlazor 组件库，基于 Bootstrap 样式库精心打造，为您快速开发项目带来飞一般的感觉";
+
+    private int FontSize { get; set; } = 72;
+
+    private int Duration { get; set; } = 20;
+
+    private MarqueeDirection Direction { get; set; }
+}

src/BootstrapBlazor.Shared/Samples/Marquees.razor.css

@@ -0,0 +1,7 @@
+::deep .label-width {
+    width: 150px;
+}
+
+::deep > .input-group {
+    margin-bottom: .5rem;
+}

src/BootstrapBlazor.Shared/docs.json

@@ -89,6 +89,7 @@
     "input-group": "InputGroups",
     "ip": "Ips",
     "markdown": "Markdowns",
+    "marquee": "Marquees",
     "menu": "Menus",
     "message": "Messages",
     "mind-map": "MindMaps\\MindMaps",

src/BootstrapBlazor/Components/Marquee/Marquee.razor

@@ -0,0 +1,6 @@
+@namespace BootstrapBlazor.Components
+@inherits BootstrapComponentBase
+
+<div @attributes="AdditionalAttributes" class="@ClassString" style="@StyleString">
+    <span class="@TextClassString" style="@TextStyleString">@Text</span>
+</div>

src/BootstrapBlazor/Components/Marquee/Marquee.razor.cs

@@ -0,0 +1,71 @@
+// Copyright (c) Argo Zhang ([email protected]). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// Marquee 字幕滚动组件
+/// </summary>
+public partial class Marquee
+{
+    /// <summary>
+    /// 获得/设置 组件值 显示文本 默认 Empty
+    /// </summary>
+    [Parameter]
+    public string? Text { get; set; }
+
+    /// <summary>
+    /// 获得/设置 组件值 文本颜色 默认 #000
+    /// <para>支持16进制和颜色名称</para>
+    /// </summary>
+    [Parameter]
+    public string Color { get; set; } = "#000";
+
+    /// <summary>
+    /// 获得/设置 组件值 背景颜色 默认 #fff
+    /// <para>支持16进制和颜色名称</para>
+    /// </summary>
+    [Parameter]
+    public string BackgroundColor { get; set; } = "#fff";
+
+    /// <summary>
+    /// 获得/设置 组件值 文本大小 默认 72px
+    /// </summary>
+    [Parameter]
+    public int FontSize { get; set; } = 72;
+
+    /// <summary>
+    /// 获得/设置 组件值 动画时间 默认 14s
+    /// <para>值越小滚动越快</para>
+    /// </summary>
+    [Parameter]
+    public int Duration { get; set; } = 14;
+
+    /// <summary>
+    /// 获得/设置 组件值 滚动方向 默认 LeftToRight
+    /// </summary>
+    [Parameter]
+    public MarqueeDirection Direction { get; set; }
+
+    private string? ClassString => CssBuilder.Default("marquee")
+        .AddClass("marquee-vertical", Direction == MarqueeDirection.TopToBottom || Direction == MarqueeDirection.BottomToTop)
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+
+    private string? StyleString => CssBuilder.Default()
+        .AddClass($"background-color: {BackgroundColor};")
+        .AddClass($"color: {Color};")
+        .AddClass($"font-size: {FontSize}px;")
+        .Build();
+
+    private string? TextClassString => CssBuilder.Default("marquee-text")
+        .AddClass($"marquee-text-left", Direction == MarqueeDirection.LeftToRight || Direction == MarqueeDirection.RightToLeft)
+        .AddClass($"marquee-text-top", Direction == MarqueeDirection.TopToBottom || Direction == MarqueeDirection.BottomToTop)
+        .Build();
+
+    private string? TextStyleString => CssBuilder.Default()
+        .AddClass($"animation-duration: {Duration}s;")
+        .AddClass($"animation-name: {Direction.ToDescriptionString()};")
+        .Build();
+}

src/BootstrapBlazor/Components/Marquee/Marquee.razor.scss

@@ -0,0 +1,64 @@
+.marquee {
+    overflow: hidden;
+    white-space: nowrap;
+    position: relative;
+
+    &.marquee-vertical {
+        writing-mode: vertical-rl;
+        text-orientation: upright;
+    }
+
+    .marquee-text {
+        display: inline-block;
+        animation-timing-function: linear;
+        animation-iteration-count: infinite;
+
+        &.marquee-text-left {
+            padding-left: 100%;
+        }
+
+        &.marquee-text-top {
+            padding-top: 100%;
+        }
+    }
+}
+
+@keyframes RightToLeft {
+    from {
+        transform: translateX(0);
+    }
+
+    to {
+        transform: translateX(-100%);
+    }
+}
+
+@keyframes LeftToRight {
+    from {
+        transform: translateX(-100%);
+    }
+
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes TopToBottom {
+    from {
+        transform: translateY(-100%);
+    }
+
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes BottomToTop {
+    from {
+        transform: translateY(0);
+    }
+
+    to {
+        transform: translateY(-100%);
+    }
+}

src/BootstrapBlazor/Enums/MarqueeDirection.cs

@@ -0,0 +1,42 @@
+// Copyright (c) Argo Zhang ([email protected]). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+using System.ComponentModel;
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// Marquee组件，文本滚动方向枚举类型
+/// <para>Marquee component, Text scrolling direction enumeration</para>
+/// </summary>
+public enum MarqueeDirection
+{
+    /// <summary>
+    /// 文本从左向右滚动
+    /// scrolling text from left to right
+    /// </summary>
+    [Description("LeftToRight")]
+    LeftToRight,
+
+    /// <summary>
+    /// 文本从右向左滚动
+    /// scrolling text from right to left
+    /// </summary>
+    [Description("RightToLeft")]
+    RightToLeft,
+
+    /// <summary>
+    /// Marquee组件，从上到下滚动文本
+    /// scrolling text from top to bottom
+    /// </summary>
+    [Description("TopToBottom")]
+    TopToBottom,
+
+    /// <summary>
+    /// 从下至上滚动文本>
+    /// Scroll text from bottom to top
+    /// </summary>
+    [Description("BottomToTop")]
+    BottomToTop
+}