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

* doc: 更改 Scroll 组件相关文档
* refactor: 更新 Scroll 组件高度更改为 400px
* style: 更新 scroll-demo 样式
* refactor: 移除 IsDark 属性
* refactor: 更新滚动条组件
* feat: 更新 Scroll 组件改用 slimscroll 脚本
This commit is contained in:
Argo 2020-08-23 20:50:14 +08:00
parent ac401d3aaf
commit f139c88d16
15 changed files with 44 additions and 108 deletions

3
dist/404.html vendored
View File

@ -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>

View File

@ -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" />

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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"
}
};
}

View File

@ -3,7 +3,7 @@
<section class="section">
<div class="sidebar">
<Scroll IsDark="true">
<Scroll>
<NavMenu />
</Scroll>
</div>

View File

@ -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 {

View File

@ -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>

View File

@ -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>

View File

@ -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");
}
}
}

View File

@ -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');

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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);