!409 feat(#I1SFBY): Scroll 组件更新 js 依赖减小体积

* doc: 更改 Scroll 组件相关文档 * refactor: 更新 Scroll 组件高度更改为 400px * style: 更新 scroll-demo 样式 * refactor: 移除 IsDark 属性 * refactor: 更新滚动条组件 * feat: 更新 Scroll 组件改用 slimscroll 脚本
2024-12-07 14:39:24 +08:00 · 2020-08-23 20:50:14 +08:00 · 2020-08-23 20:50:14 +08:00 · f139c88d16
commit f139c88d16
parent ac401d3aaf
15 changed files with 44 additions and 108 deletions
--- a/dist/404.html
+++ b/dist/404.html
@ -17,7 +17,6 @@
    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/chartjs/Chart.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/summernote/summernote-bs4.min.css">
-    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/overlayscrollbars/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor.Shared/lib/highlight/vs.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor.Shared/css/site.css">
@ -64,7 +63,7 @@
    <script src="_content/BootstrapBlazor/lib/chartjs/Chart.bundle.min.js"></script>
    <script src="_content/BootstrapBlazor/lib/summernote/summernote-bs4.min.js"></script>
    <script src="_content/BootstrapBlazor/lib/summernote/summernote-zh-CN.min.js"></script>
-    <script src="_content/BootstrapBlazor/lib/overlayscrollbars/jquery.overlayScrollbars.min.js"></script>
+    <script src="_content/BootstrapBlazor/lib/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="_content/BootstrapBlazor/js/bootstrap.blazor.js"></script>
    <script src="_content/BootstrapBlazor.Shared/lib/highlight/highlight.min.js"></script>
    <script src="_content/BootstrapBlazor.Shared/js/common.js"></script>
--- a/src/BootstrapBlazor.Docs/wwwroot/docs/install/install.1.html
+++ b/src/BootstrapBlazor.Docs/wwwroot/docs/install/install.1.html
@ -2,5 +2,4 @@
 <link rel="stylesheet" href="_content/BootstrapBlazor/lib/font-awesome/css/font-awesome.min.css" />
 <link rel="stylesheet" href="_content/BootstrapBlazor/lib/chartjs/Chart.min.css" />
 <link rel="stylesheet" href="_content/BootstrapBlazor/lib/summernote/summernote-bs4.min.css">
-<link rel="stylesheet" href="_content/BootstrapBlazor/lib/overlayscrollbars/OverlayScrollbars.min.css">
 <link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.css" />
--- a/src/BootstrapBlazor.Docs/wwwroot/docs/install/install.2.html
+++ b/src/BootstrapBlazor.Docs/wwwroot/docs/install/install.2.html
@ -3,5 +3,5 @@
 <script src="_content/BootstrapBlazor/lib/chartjs/Chart.bundle.min.js"></script>
 <script src="_content/BootstrapBlazor/lib/summernote/summernote-bs4.min.js"></script>
 <script src="_content/BootstrapBlazor/lib/summernote/summernote-zh-CN.min.js"></script>
-<script src="_content/BootstrapBlazor/lib/overlayscrollbars/jquery.overlayScrollbars.min.js"></script>
+<script src="_content/BootstrapBlazor/lib/slimscroll/jquery.slimscroll.min.js"></script>
 <script src="_content/BootstrapBlazor/js/bootstrap.blazor.js"></script>
--- a/src/BootstrapBlazor.Server/Pages/_Host.cshtml
+++ b/src/BootstrapBlazor.Server/Pages/_Host.cshtml
@ -22,7 +22,6 @@
    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/chartjs/Chart.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/summernote/summernote-bs4.min.css">
-    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/overlayscrollbars/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/editor.md/editormd.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor.Shared/lib/highlight/vs.css">
@ -50,7 +49,7 @@
    <script src="_content/BootstrapBlazor/lib/chartjs/Chart.bundle.min.js"></script>
    <script src="_content/BootstrapBlazor/lib/summernote/summernote-bs4.min.js"></script>
    <script src="_content/BootstrapBlazor/lib/summernote/summernote-zh-CN.min.js"></script>
-    <script src="_content/BootstrapBlazor/lib/overlayscrollbars/jquery.overlayScrollbars.min.js"></script>
+    <script src="_content/BootstrapBlazor/lib/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="_content/BootstrapBlazor/lib/editor.md/editormd.js"></script>
    <script src="_content/BootstrapBlazor/js/bootstrap.blazor.js"></script>
    <script src="_content/BootstrapBlazor.Shared/lib/highlight/highlight.min.js"></script>
--- a/src/BootstrapBlazor.Shared/Pages/Scrolls.razor
+++ b/src/BootstrapBlazor.Shared/Pages/Scrolls.razor
@ -6,16 +6,16 @@

 <p>由于滚动条组件内部屏蔽了系统的滚动条，设置了 <code>overflow: hidden</code> 所以自身或者其父元素必须拥有固定高度时才可呈现滚动条，可以通过外套元素设置其 <code>height</code> 或者直接设置 <code>Scroll</code> 组件的高度 <code>Height</code> 属性</p>

-<Block Title="普通用法" Introduction="给组件增加滚动条，通过设置 <code>Height</code> 高度值为 400 使内部子元素高度为 1000 时出现滚动条" CodeFile="scroll.1.html">
-    <Scroll Height="200" IsAutoHide="false" IsDark="true" class="scroll-demo">
-        <div style="height: 600px;">Top</div>
+<Block Title="普通用法" Introduction="给组件增加滚动条，通过设置 <code>Height</code> 高度值为 200px 使内部子元素高度为 400px 时出现滚动条" CodeFile="scroll.1.html">
+    <Scroll class="scroll-demo" IsAutoHide="false" Height="200px">
+        <div style="height: 400px;">Top</div>
        <div>Bottom</div>
    </Scroll>
 </Block>

 <Block Title="自动隐藏" Introduction="鼠标 <code>hover</code> 状态下自动显示滚动条，移开鼠标后滚动条自动隐藏" CodeFile="scroll.2.html">
-    <Scroll Height="200" IsAutoHide="true" Delay="1000" IsDark="true" class="scroll-demo">
-        <div style="height: 600px;">Top</div>
+    <Scroll class="scroll-demo" Height="200px">
+        <div style="height: 400px;">Top</div>
        <div>Bottom</div>
    </Scroll>
 </Block>
--- a/src/BootstrapBlazor.Shared/Pages/Scrolls.razor.cs
+++ b/src/BootstrapBlazor.Shared/Pages/Scrolls.razor.cs
@ -36,26 +36,12 @@ namespace BootstrapBlazor.Shared.Pages
                ValueList = " — ",
                DefaultValue = "0"
            },
-            new AttributeItem() {
-                Name = "IsDark",
-                Description = "是否为暗黑模式",
-                Type = "bool",
-                ValueList = "true|false",
-                DefaultValue = "false"
-            },
            new AttributeItem() {
                Name = "IsAutoHide",
                Description = "是否自动隐藏",
                Type = "true",
                ValueList = "true|false",
                DefaultValue = "true"
-            },
-            new AttributeItem() {
-                Name = "Delay",
-                Description = "自动隐藏延时时间",
-                Type = "int",
-                ValueList = "—",
-                DefaultValue = "1000"
            }
        };
    }
--- a/src/BootstrapBlazor.Shared/Shared/MainLayout.razor
+++ b/src/BootstrapBlazor.Shared/Shared/MainLayout.razor
@ -3,7 +3,7 @@

 <section class="section">
    <div class="sidebar">
-        <Scroll IsDark="true">
+        <Scroll>
            <NavMenu />
        </Scroll>
    </div>
--- a/src/BootstrapBlazor.Shared/wwwroot/css/site.css
+++ b/src/BootstrapBlazor.Shared/wwwroot/css/site.css
@ -898,8 +898,9 @@ section {
    z-index: 1080 !important;
 }

-.scroll-demo.scroll.os-theme-dark > .os-scrollbar > .os-scrollbar-track {
-    background-color: #f1f1f1;
+.scroll-demo {
+    border: solid 1px #f1f1f1;
+    padding: 1rem;
 }

 .coms-cate {
--- a/src/BootstrapBlazor.WebAssembly.ClientHost/wwwroot/index.html
+++ b/src/BootstrapBlazor.WebAssembly.ClientHost/wwwroot/index.html
@ -17,7 +17,6 @@
    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/chartjs/Chart.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/summernote/summernote-bs4.min.css">
-    <link rel="stylesheet" href="_content/BootstrapBlazor/lib/overlayscrollbars/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor.Shared/lib/highlight/vs.css">
    <link rel="stylesheet" href="_content/BootstrapBlazor.Shared/css/site.css">
@ -64,7 +63,7 @@
    <script src="_content/BootstrapBlazor/lib/chartjs/Chart.bundle.min.js"></script>
    <script src="_content/BootstrapBlazor/lib/summernote/summernote-bs4.min.js"></script>
    <script src="_content/BootstrapBlazor/lib/summernote/summernote-zh-CN.min.js"></script>
-    <script src="_content/BootstrapBlazor/lib/overlayscrollbars/jquery.overlayScrollbars.min.js"></script>
+    <script src="_content/BootstrapBlazor/lib/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="_content/BootstrapBlazor/js/bootstrap.blazor.js"></script>
    <script src="_content/BootstrapBlazor.Shared/lib/highlight/highlight.min.js"></script>
    <script src="_content/BootstrapBlazor.Shared/js/common.js"></script>
--- a/src/BootstrapBlazor/Components/Scroll/Scroll.razor
+++ b/src/BootstrapBlazor/Components/Scroll/Scroll.razor
@ -1,6 +1,6 @@
@namespace BootstrapBlazor.Components
@inherits ScrollBase

-<div @attributes="AdditionalAttributes" class="@ClassString" style="@StyleString" data-dark="@IsDarkString" data-hide="@AutoHideString" data-delay="@Delay" @ref="ScrollElement">
+<div @attributes="AdditionalAttributes" class="@ClassString" data-height="@Height" data-width="@Width" data-hide="@AutoHideString" @ref="ScrollElement">
    @ChildContent
 </div>
--- a/src/BootstrapBlazor/Components/Scroll/ScrollBase.cs
+++ b/src/BootstrapBlazor/Components/Scroll/ScrollBase.cs
@ -20,25 +20,11 @@ namespace BootstrapBlazor.Components
            .AddClassFromAttributes(AdditionalAttributes)
            .Build();

-        /// <summary>
-        /// 获得 组件 Style
-        /// </summary>
-        protected string? StyleString => CssBuilder.Default()
-            .AddClass($"height: {Height}px", Height > 0)
-            .AddClass($"width: {Width}px", Width > 0)
-            .AddStyleFromAttributes(AdditionalAttributes)
-            .Build();
-
        /// <summary>
        /// 获得 是否自动隐藏
        /// </summary>
        protected string? AutoHideString => IsAutoHide ? "true" : "false";

-        /// <summary>
-        /// 获得 滚动条样式
-        /// </summary>
-        protected string? IsDarkString => IsDark ? "true" : "false";
-
        /// <summary>
        /// 获得/设置 子组件
        /// </summary>
@ -49,13 +35,13 @@ namespace BootstrapBlazor.Components
        /// 获得/设置 组件高度
        /// </summary>
        [Parameter]
-        public int Height { get; set; }
+        public string Height { get; set; } = "auto";

        /// <summary>
        /// 获得/设置 组件宽度
        /// </summary>
        [Parameter]
-        public int Width { get; set; }
+        public string Width { get; set; } = "auto";

        /// <summary>
        /// 获得/设置 是否自动隐藏
@ -63,18 +49,6 @@ namespace BootstrapBlazor.Components
        [Parameter]
        public bool IsAutoHide { get; set; } = true;

-        /// <summary>
-        /// 获得/设置 自动隐藏延时时间 默认 1000 毫秒
-        /// </summary>
-        [Parameter]
-        public int Delay { get; set; } = 1000;
-
-        /// <summary>
-        /// 获得/设置 是否为暗黑模式
-        /// </summary>
-        [Parameter]
-        public bool IsDark { get; set; }
-
        /// <summary>
        /// OnAfterRenderAsync 方法
        /// </summary>
@ -86,7 +60,7 @@ namespace BootstrapBlazor.Components

            if (firstRender && JSRuntime != null)
            {
-                await JSRuntime.Invoke(ScrollElement, "scroll");
+                await JSRuntime.Invoke(ScrollElement, "bb_scroll");
            }
        }
    }
--- a/src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.js
+++ b/src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.js
@ -1602,7 +1602,7 @@

            calcWindow();
        },
-        scroll: function (el) {
+        bb_scroll: function (el) {
            var $el = $(el);

            // 移动端不需要修改滚动条
@ -1610,28 +1610,17 @@
            var mac = navigator.userAgent.match(/iPhone/i);
            if (!mac) {
                var autoHide = $el.attr('data-hide');
-                var delay = parseInt($el.attr('data-delay'));
-                var dark = $el.attr('data-dark');
-                var className = 'os-theme-light';
-                if (dark === 'true') {
-                    className = 'os-theme-dark';
-                }
-                var scrollbars = {
-                    className: className
+                var height = $el.attr('data-height');
+                var width = $el.attr('data-width');
+
+                var option = {
+                    alwaysVisible: autoHide !== "true",
                };
-                if (autoHide === 'true') {
-                    if (isNaN(delay)) {
-                        delay = 1000;
-                    }
-                    scrollbars = {
-                        autoHide: 'leave',
-                        autoHideDelay: delay
-                    }
-                }
-                $el.overlayScrollbars({
-                    className: className,
-                    scrollbars: scrollbars
-                });
+
+                if (!height) height = "auto";
+                if (height !== "") option.height = height;
+                if (!width) option.width = width;
+                $el.slimScroll(option);
            }
            else {
                $el.addClass('is-phone');
--- a/src/BootstrapBlazor/wwwroot/lib/overlayscrollbars/OverlayScrollbars.min.css
+++ b/src/BootstrapBlazor/wwwroot/lib/overlayscrollbars/OverlayScrollbars.min.css
--- a/src/BootstrapBlazor/wwwroot/lib/overlayscrollbars/jquery.overlayScrollbars.min.js
+++ b/src/BootstrapBlazor/wwwroot/lib/overlayscrollbars/jquery.overlayScrollbars.min.js
--- a/src/BootstrapBlazor/wwwroot/lib/slimscroll/jquery.slimscroll.min.js
+++ b/src/BootstrapBlazor/wwwroot/lib/slimscroll/jquery.slimscroll.min.js
@ -0,0 +1,16 @@
+/*! Copyright (c) 2011 Piotr Rochala (http://rocha.la)
+ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
+ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+ *
+ * Version: 1.3.8
+ *
+ */
+(function(e){e.fn.extend({slimScroll:function(f){var a=e.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200,borderRadius:"7px",railBorderRadius:"7px"},f);this.each(function(){function v(d){if(r){d=d||window.event;
+var c=0;d.wheelDelta&&(c=-d.wheelDelta/120);d.detail&&(c=d.detail/3);e(d.target||d.srcTarget||d.srcElement).closest("."+a.wrapperClass).is(b.parent())&&n(c,!0);d.preventDefault&&!k&&d.preventDefault();k||(d.returnValue=!1)}}function n(d,g,e){k=!1;var f=b.outerHeight()-c.outerHeight();g&&(g=parseInt(c.css("top"))+d*parseInt(a.wheelStep)/100*c.outerHeight(),g=Math.min(Math.max(g,0),f),g=0<d?Math.ceil(g):Math.floor(g),c.css({top:g+"px"}));l=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());g=
+l*(b[0].scrollHeight-b.outerHeight());e&&(g=d,d=g/b[0].scrollHeight*b.outerHeight(),d=Math.min(Math.max(d,0),f),c.css({top:d+"px"}));b.scrollTop(g);b.trigger("slimscrolling",~~g);w();p()}function x(){u=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),30);c.css({height:u+"px"});var a=u==b.outerHeight()?"none":"block";c.css({display:a})}function w(){x();clearTimeout(B);l==~~l?(k=a.allowPageScroll,C!=l&&b.trigger("slimscroll",0==~~l?"top":"bottom")):k=!1;C=l;u>=b.outerHeight()?k=!0:(c.stop(!0,
+!0).fadeIn("fast"),a.railVisible&&m.stop(!0,!0).fadeIn("fast"))}function p(){a.alwaysVisible||(B=setTimeout(function(){a.disableFadeOut&&r||y||z||(c.fadeOut("slow"),m.fadeOut("slow"))},1E3))}var r,y,z,B,A,u,l,C,k=!1,b=e(this);if(b.parent().hasClass(a.wrapperClass)){var q=b.scrollTop(),c=b.siblings("."+a.barClass),m=b.siblings("."+a.railClass);x();if(e.isPlainObject(f)){if("height"in f&&"auto"==f.height){b.parent().css("height","auto");b.css("height","auto");var h=b.parent().parent().height();b.parent().css("height",
+h);b.css("height",h)}else"height"in f&&(h=f.height,b.parent().css("height",h),b.css("height",h));if("scrollTo"in f)q=parseInt(a.scrollTo);else if("scrollBy"in f)q+=parseInt(a.scrollBy);else if("destroy"in f){c.remove();m.remove();b.unwrap();return}n(q,!1,!0)}}else if(!(e.isPlainObject(f)&&"destroy"in f)){a.height="auto"==a.height?b.parent().height():a.height;q=e("<div></div>").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",
+width:a.width,height:a.height});var m=e("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.railBorderRadius,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=e("<div></div>").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.borderRadius,BorderRadius:a.borderRadius,MozBorderRadius:a.borderRadius,
+WebkitBorderRadius:a.borderRadius,zIndex:99}),h="right"==a.position?{right:a.distance}:{left:a.distance};m.css(h);c.css(h);b.wrap(q);b.parent().append(c);b.parent().append(m);a.railDraggable&&c.bind("mousedown",function(a){var b=e(document);z=!0;t=parseFloat(c.css("top"));pageY=a.pageY;b.bind("mousemove.slimscroll",function(a){currTop=t+a.pageY-pageY;c.css("top",currTop);n(0,c.position().top,!1)});b.bind("mouseup.slimscroll",function(a){z=!1;p();b.unbind(".slimscroll")});return!1}).bind("selectstart.slimscroll",
+function(a){a.stopPropagation();a.preventDefault();return!1});m.hover(function(){w()},function(){p()});c.hover(function(){y=!0},function(){y=!1});b.hover(function(){r=!0;w();p()},function(){r=!1;p()});b.bind("touchstart",function(a,b){a.originalEvent.touches.length&&(A=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){k||b.originalEvent.preventDefault();b.originalEvent.touches.length&&(n((A-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0),A=b.originalEvent.touches[0].pageY)});
+x();"bottom"===a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),n(0,!0)):"top"!==a.start&&(n(e(a.start).position().top,null,!0),a.alwaysVisible||c.hide());window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)}});return this}});e.fn.extend({slimscroll:e.fn.slimScroll})})(jQuery);