ng-cw-v12
Version:
Angular UI component library
117 lines (112 loc) • 4.91 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, Input, HostListener, NgModule } from '@angular/core';
class HorizontalScrollDirective {
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
this.isMouseOver = false;
this.scrollBarMode = 'show';
this.applyScrollbarStyles();
}
set ncScrollBar(value) {
this.scrollBarMode = value;
this.updateScrollbarVisibility();
}
ngAfterViewInit() {
this.updateScrollbarVisibility();
}
updateScrollbarVisibility() {
switch (this.scrollBarMode) {
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.scrollBarMode === 'hover') {
this.updateScrollbarVisibility();
}
}
onMouseLeave() {
this.isMouseOver = false;
if (this.scrollBarMode === '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']]
}] } });
class NcHorizontalScrollModule {
}
NcHorizontalScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcHorizontalScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NcHorizontalScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcHorizontalScrollModule, declarations: [HorizontalScrollDirective], exports: [HorizontalScrollDirective] });
NcHorizontalScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcHorizontalScrollModule, imports: [[]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcHorizontalScrollModule, decorators: [{
type: NgModule,
args: [{
declarations: [
HorizontalScrollDirective
],
imports: [],
exports: [
HorizontalScrollDirective
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { HorizontalScrollDirective, NcHorizontalScrollModule };
//# sourceMappingURL=ng-cw-v12-horizontal-scroll.js.map