ng-cw-v12
Version:
Angular UI Component Library
95 lines • 10.1 kB
JavaScript
import { Directive, HostListener, Input } from '@angular/core';
import * as i0 from "@angular/core";
export class HorizontalScrollDirective {
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
/** 滚动条显示模式 */
this._scrollBar = 'show';
this.isMouseOver = false;
this.applyScrollbarStyles();
}
set ncScrollBar(value) {
this._scrollBar = value;
this.updateScrollbarVisibility();
}
get ncScrollBar() {
return this._scrollBar;
}
ngAfterViewInit() {
this.updateScrollbarVisibility();
}
updateScrollbarVisibility() {
switch (this.ncScrollBar) {
case 'show':
this.renderer.setStyle(this.el.nativeElement, 'overflow-x', 'auto');
break;
case 'hide':
this.renderer.setStyle(this.el.nativeElement, 'overflow-x', 'hidden');
break;
case 'hover':
this.renderer.setStyle(this.el.nativeElement, 'overflow-x', this.isMouseOver ? 'auto' : 'hidden');
break;
}
}
applyScrollbarStyles() {
const styles = `
::-webkit-scrollbar {
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: rgb(206,201,207);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: rgb(120,108,122);
}
`;
const styleElement = this.renderer.createElement('style');
this.renderer.appendChild(styleElement, this.renderer.createText(styles));
this.renderer.appendChild(this.el.nativeElement, styleElement);
}
onMouseEnter() {
this.isMouseOver = true;
if (this.ncScrollBar === 'hover') {
this.updateScrollbarVisibility();
}
}
onMouseLeave() {
this.isMouseOver = false;
if (this.ncScrollBar === 'hover') {
this.updateScrollbarVisibility();
}
}
onWheel(event) {
if (this.isMouseOver) {
event.preventDefault();
this.el.nativeElement.scrollLeft += event.deltaY;
}
}
ngOnDestroy() {
}
}
HorizontalScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: HorizontalScrollDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
HorizontalScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.5", type: HorizontalScrollDirective, selector: "[ncHorizontalScroll]", inputs: { ncScrollBar: "ncScrollBar" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "wheel": "onWheel($event)" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: HorizontalScrollDirective, decorators: [{
type: Directive,
args: [{
selector: '[ncHorizontalScroll]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { ncScrollBar: [{
type: Input
}], onMouseEnter: [{
type: HostListener,
args: ['mouseenter']
}], onMouseLeave: [{
type: HostListener,
args: ['mouseleave']
}], onWheel: [{
type: HostListener,
args: ['wheel', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaG9yaXpvbnRhbC1zY3JvbGwuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50cy9ob3Jpem9udGFsLXNjcm9sbC9ob3Jpem9udGFsLXNjcm9sbC5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxZQUFZLEVBQUUsS0FBSyxFQUF3QixNQUFNLGVBQWUsQ0FBQzs7QUFPakcsTUFBTSxPQUFPLHlCQUF5QjtJQWFwQyxZQUFvQixFQUFjLEVBQVUsUUFBbUI7UUFBM0MsT0FBRSxHQUFGLEVBQUUsQ0FBWTtRQUFVLGFBQVEsR0FBUixRQUFRLENBQVc7UUFaL0QsY0FBYztRQUNOLGVBQVUsR0FBb0IsTUFBTSxDQUFDO1FBU3JDLGdCQUFXLEdBQUcsS0FBSyxDQUFDO1FBRzFCLElBQUksQ0FBQyxvQkFBb0IsRUFBRSxDQUFDO0lBQzlCLENBQUM7SUFaRCxJQUFhLFdBQVcsQ0FBQyxLQUFzQjtRQUM3QyxJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQztRQUN4QixJQUFJLENBQUMseUJBQXlCLEVBQUUsQ0FBQztJQUNuQyxDQUFDO0lBQ0QsSUFBSSxXQUFXO1FBQ2IsT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDO0lBQ3pCLENBQUM7SUFRRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLHlCQUF5QixFQUFFLENBQUM7SUFDbkMsQ0FBQztJQUVPLHlCQUF5QjtRQUMvQixRQUFRLElBQUksQ0FBQyxXQUFXLEVBQUU7WUFDeEIsS0FBSyxNQUFNO2dCQUNULElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLENBQUMsQ0FBQztnQkFDcEUsTUFBTTtZQUNSLEtBQUssTUFBTTtnQkFDVCxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFBRSxZQUFZLEVBQUUsUUFBUSxDQUFDLENBQUM7Z0JBQ3RFLE1BQU07WUFDUixLQUFLLE9BQU87Z0JBQ1YsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsWUFBWSxFQUFFLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUM7Z0JBQ2xHLE1BQU07U0FDVDtJQUNILENBQUM7SUFFTyxvQkFBb0I7UUFDMUIsTUFBTSxNQUFNLEdBQUc7Ozs7Ozs7Ozs7Ozs7O0tBY2QsQ0FBQztRQUNGLE1BQU0sWUFBWSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQzFELElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLFlBQVksRUFBRSxJQUFJLENBQUMsUUFBUSxDQUFDLFVBQVUsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDO1FBQzFFLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLFlBQVksQ0FBQyxDQUFDO0lBQ2pFLENBQUM7SUFHRCxZQUFZO1FBQ1YsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUM7UUFDeEIsSUFBSSxJQUFJLENBQUMsV0FBVyxLQUFLLE9BQU8sRUFBRTtZQUNoQyxJQUFJLENBQUMseUJBQXlCLEVBQUUsQ0FBQztTQUNsQztJQUNILENBQUM7SUFHRCxZQUFZO1FBQ1YsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUM7UUFDekIsSUFBSSxJQUFJLENBQUMsV0FBVyxLQUFLLE9BQU8sRUFBRTtZQUNoQyxJQUFJLENBQUMseUJBQXlCLEVBQUUsQ0FBQztTQUNsQztJQUNILENBQUM7SUFHRCxPQUFPLENBQUMsS0FBaUI7UUFDdkIsSUFBSSxJQUFJLENBQUMsV0FBVyxFQUFFO1lBQ3BCLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUN2QixJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxVQUFVLElBQUksS0FBSyxDQUFDLE1BQU0sQ0FBQztTQUNsRDtJQUNILENBQUM7SUFFRCxXQUFXO0lBRVgsQ0FBQzs7c0hBbEZVLHlCQUF5QjswR0FBekIseUJBQXlCOzJGQUF6Qix5QkFBeUI7a0JBSHJDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLHNCQUFzQjtpQkFDakM7eUhBSWMsV0FBVztzQkFBdkIsS0FBSztnQkFzRE4sWUFBWTtzQkFEWCxZQUFZO3VCQUFDLFlBQVk7Z0JBUzFCLFlBQVk7c0JBRFgsWUFBWTt1QkFBQyxZQUFZO2dCQVMxQixPQUFPO3NCQUROLFlBQVk7dUJBQUMsT0FBTyxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBIb3N0TGlzdGVuZXIsIElucHV0LCBPbkRlc3Ryb3ksIFJlbmRlcmVyMiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuZXhwb3J0IHR5cGUgTmNTY3JvbGxCYXJUeXBlID0gJ3Nob3cnIHwgJ2hpZGUnIHwgJ2hvdmVyJztcclxuXHJcbkBEaXJlY3RpdmUoe1xyXG4gIHNlbGVjdG9yOiAnW25jSG9yaXpvbnRhbFNjcm9sbF0nXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBIb3Jpem9udGFsU2Nyb2xsRGlyZWN0aXZlIGltcGxlbWVudHMgT25EZXN0cm95IHtcclxuICAvKiog5rua5Yqo5p2h5pi+56S65qih5byPICovXHJcbiAgcHJpdmF0ZSBfc2Nyb2xsQmFyOiBOY1Njcm9sbEJhclR5cGUgPSAnc2hvdyc7XHJcbiAgQElucHV0KCkgc2V0IG5jU2Nyb2xsQmFyKHZhbHVlOiBOY1Njcm9sbEJhclR5cGUpIHtcclxuICAgIHRoaXMuX3Njcm9sbEJhciA9IHZhbHVlO1xyXG4gICAgdGhpcy51cGRhdGVTY3JvbGxiYXJWaXNpYmlsaXR5KCk7XHJcbiAgfVxyXG4gIGdldCBuY1Njcm9sbEJhcigpOiBOY1Njcm9sbEJhclR5cGUge1xyXG4gICAgcmV0dXJuIHRoaXMuX3Njcm9sbEJhcjtcclxuICB9XHJcblxyXG4gIHByaXZhdGUgaXNNb3VzZU92ZXIgPSBmYWxzZTtcclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBlbDogRWxlbWVudFJlZiwgcHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyKSB7XHJcbiAgICB0aGlzLmFwcGx5U2Nyb2xsYmFyU3R5bGVzKCk7XHJcbiAgfVxyXG5cclxuICBuZ0FmdGVyVmlld0luaXQoKSB7XHJcbiAgICB0aGlzLnVwZGF0ZVNjcm9sbGJhclZpc2liaWxpdHkoKTtcclxuICB9XHJcblxyXG4gIHByaXZhdGUgdXBkYXRlU2Nyb2xsYmFyVmlzaWJpbGl0eSgpIHtcclxuICAgIHN3aXRjaCAodGhpcy5uY1Njcm9sbEJhcikge1xyXG4gICAgICBjYXNlICdzaG93JzpcclxuICAgICAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgJ292ZXJmbG93LXgnLCAnYXV0bycpO1xyXG4gICAgICAgIGJyZWFrO1xyXG4gICAgICBjYXNlICdoaWRlJzpcclxuICAgICAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgJ292ZXJmbG93LXgnLCAnaGlkZGVuJyk7XHJcbiAgICAgICAgYnJlYWs7XHJcbiAgICAgIGNhc2UgJ2hvdmVyJzpcclxuICAgICAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgJ292ZXJmbG93LXgnLCB0aGlzLmlzTW91c2VPdmVyID8gJ2F1dG8nIDogJ2hpZGRlbicpO1xyXG4gICAgICAgIGJyZWFrO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBhcHBseVNjcm9sbGJhclN0eWxlcygpIHtcclxuICAgIGNvbnN0IHN0eWxlcyA9IGBcclxuICAgICAgOjotd2Via2l0LXNjcm9sbGJhciB7XHJcbiAgICAgICAgaGVpZ2h0OiA4cHg7XHJcbiAgICAgIH1cclxuICAgICAgOjotd2Via2l0LXNjcm9sbGJhci10cmFjayB7XHJcbiAgICAgICAgYmFja2dyb3VuZDogI2YxZjFmMTtcclxuICAgICAgfVxyXG4gICAgICA6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iIHtcclxuICAgICAgICBiYWNrZ3JvdW5kOiByZ2IoMjA2LDIwMSwyMDcpO1xyXG4gICAgICAgIGJvcmRlci1yYWRpdXM6IDRweDtcclxuICAgICAgfVxyXG4gICAgICA6Oi13ZWJraXQtc2Nyb2xsYmFyLXRodW1iOmhvdmVyIHtcclxuICAgICAgICBiYWNrZ3JvdW5kOiByZ2IoMTIwLDEwOCwxMjIpO1xyXG4gICAgICB9XHJcbiAgICBgO1xyXG4gICAgY29uc3Qgc3R5bGVFbGVtZW50ID0gdGhpcy5yZW5kZXJlci5jcmVhdGVFbGVtZW50KCdzdHlsZScpO1xyXG4gICAgdGhpcy5yZW5kZXJlci5hcHBlbmRDaGlsZChzdHlsZUVsZW1lbnQsIHRoaXMucmVuZGVyZXIuY3JlYXRlVGV4dChzdHlsZXMpKTtcclxuICAgIHRoaXMucmVuZGVyZXIuYXBwZW5kQ2hpbGQodGhpcy5lbC5uYXRpdmVFbGVtZW50LCBzdHlsZUVsZW1lbnQpO1xyXG4gIH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignbW91c2VlbnRlcicpXHJcbiAgb25Nb3VzZUVudGVyKCkge1xyXG4gICAgdGhpcy5pc01vdXNlT3ZlciA9IHRydWU7XHJcbiAgICBpZiAodGhpcy5uY1Njcm9sbEJhciA9PT0gJ2hvdmVyJykge1xyXG4gICAgICB0aGlzLnVwZGF0ZVNjcm9sbGJhclZpc2liaWxpdHkoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ21vdXNlbGVhdmUnKVxyXG4gIG9uTW91c2VMZWF2ZSgpIHtcclxuICAgIHRoaXMuaXNNb3VzZU92ZXIgPSBmYWxzZTtcclxuICAgIGlmICh0aGlzLm5jU2Nyb2xsQmFyID09PSAnaG92ZXInKSB7XHJcbiAgICAgIHRoaXMudXBkYXRlU2Nyb2xsYmFyVmlzaWJpbGl0eSgpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignd2hlZWwnLCBbJyRldmVudCddKVxyXG4gIG9uV2hlZWwoZXZlbnQ6IFdoZWVsRXZlbnQpIHtcclxuICAgIGlmICh0aGlzLmlzTW91c2VPdmVyKSB7XHJcbiAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XHJcbiAgICAgIHRoaXMuZWwubmF0aXZlRWxlbWVudC5zY3JvbGxMZWZ0ICs9IGV2ZW50LmRlbHRhWTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIG5nT25EZXN0cm95KCkge1xyXG5cclxuICB9XHJcbn0iXX0=