libs/ui/scrollbars/src/lib/scrollbars/scrollbars.component.ts
The scrollbars UI Component
<ts-scrollbars
id="my-id"
[isDisabled]="true"
(scrollDown)="myFunc($event)
(scrollLeft)="myFunc($event)
(scrollRight)="myFunc($event)
(scrollUp)="myFunc($event)
(scrollX)="myFunc($event)
(scrollY)="myFunc($event)
(xReachEnd)="myFunc($event)
(xReachStart)="myFunc($event)
(yReachEnd)="myFunc($event)
(yReachStart)="myFunc($event)
>My content...</ts-scrollbars>
<example-url>https://getterminus.github.io/ui-demos-release/components/scrollbars</example-url>
changeDetection | ChangeDetectionStrategy.OnPush |
encapsulation | ViewEncapsulation.None |
exportAs | tsScrollbars |
host | { |
selector | ts-scrollbars |
styleUrls | ./scrollbars.component.scss, |
templateUrl | ./scrollbars.component.html |
Properties |
|
Methods |
|
Inputs |
Outputs |
Accessors |
id | |
Type : string
|
|
Define an ID for the component |
isDisabled | |
Default value : false
|
|
Define if the scrollbars are disabled |
scrollDown | |
Type : EventEmitter
|
|
Event Emitters |
scrollLeft | |
Type : EventEmitter
|
|
scrollRight | |
Type : EventEmitter
|
|
scrollUp | |
Type : EventEmitter
|
|
scrollX | |
Type : EventEmitter
|
|
scrollY | |
Type : EventEmitter
|
|
xReachEnd | |
Type : EventEmitter
|
|
xReachStart | |
Type : EventEmitter
|
|
yReachEnd | |
Type : EventEmitter
|
|
yReachStart | |
Type : EventEmitter
|
|
Public scrollable | ||||||||||
scrollable(direction: TsScrollbarsScrollDirections)
|
||||||||||
Determine if a direction is scrollable. See TsScrollbarsScrollDirections for all possible options.
Parameters :
Returns :
boolean | null
Whether the direction is currently scrollable |
Public scrollTo | ||||||||||||||||
scrollTo(x: number, y?: number, speed?: number)
|
||||||||||||||||
Scroll to a location
Parameters :
Returns :
void
|
Public scrollToBottom | |||||||||||||||
scrollToBottom(speed: number, offset?: number)
|
|||||||||||||||
Scroll to the bottom
Parameters :
Returns :
void
|
Public scrollToElement | ||||||||||||||||||||
scrollToElement(queryString: string, speed: number, offset?: number)
|
||||||||||||||||||||
Scroll to element
Parameters :
Returns :
void
|
Public scrollToLeft | |||||||||||||||
scrollToLeft(speed: number, offset?: number)
|
|||||||||||||||
Scroll to the left
Parameters :
Returns :
void
|
Public scrollToRight | |||||||||||||||
scrollToRight(speed: number, offset?: number)
|
|||||||||||||||
Scroll to the right
Parameters :
Returns :
void
|
Public scrollToTop | |||||||||||||||
scrollToTop(speed: number, offset?: number)
|
|||||||||||||||
Scroll to the top
Parameters :
Returns :
void
|
Public update |
update()
|
Trigger an update on the underlying scrollbar library instance.
Returns :
void
|
Protected _id |
Default value : this._uid
|
Protected _uid |
Default value : `ts-scrollbars-${nextUniqueId++}`
|
Define the default component ID |
Public scrollbar |
Type : PerfectScrollbarDirective
|
Decorators :
@ViewChild(undefined)
|
Access underlying scrollbar directive |
Protected scrollSpeed |
Default value : DEFAULT_SCROLL_SPEED
|
Define the speed at which to scroll during automated movements |
geometry |
getgeometry()
|
Return an object containing scrollbar geometry.
Returns :
TsScrollbarsGeometry | null
|
position |
getposition()
|
Return the current scrollbar position.
Returns :
TsScrollbarPosition | null
|
id | ||||||
getid()
|
||||||
setid(value: string)
|
||||||
Define an ID for the component
Parameters :
Returns :
void
|
import {
ChangeDetectionStrategy,
Component,
EventEmitter,
forwardRef,
Input,
Output,
ViewChild,
ViewEncapsulation,
} from '@angular/core';
import {
Geometry,
PerfectScrollbarDirective,
Position,
} from 'ngx-perfect-scrollbar';
/**
* Define possible scroll directions for {@link TsScrollbarsComponent}.
*/
export type TsScrollbarsScrollDirections
= 'any'
| 'both'
| 'x'
| 'y'
;
/**
* A class that represents the current geometric state of scrolling for {@link TsScrollbarsComponent}.
*/
export class TsScrollbarsGeometry extends Geometry {}
/**
* A class that represents the current scrollbar positions for {@link TsScrollbarsComponent}.
*/
export class TsScrollbarPosition extends Position {}
/**
* Unique ID for each instance
*/
let nextUniqueId = 0;
const DEFAULT_SCROLL_SPEED = 400;
/**
* The scrollbars UI Component
*
* @example
* <ts-scrollbars
* id="my-id"
* [isDisabled]="true"
* (scrollDown)="myFunc($event)
* (scrollLeft)="myFunc($event)
* (scrollRight)="myFunc($event)
* (scrollUp)="myFunc($event)
* (scrollX)="myFunc($event)
* (scrollY)="myFunc($event)
* (xReachEnd)="myFunc($event)
* (xReachStart)="myFunc($event)
* (yReachEnd)="myFunc($event)
* (yReachStart)="myFunc($event)
* >My content...</ts-scrollbars>
*
* <example-url>https://getterminus.github.io/ui-demos-release/components/scrollbars</example-url>
*/
@Component({
selector: 'ts-scrollbars',
templateUrl: './scrollbars.component.html',
styleUrls: [
'./scrollbars.component.scss',
'./../../../../../../node_modules/perfect-scrollbar/css/perfect-scrollbar.css',
],
host: { class: 'ts-scrollbars' },
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
exportAs: 'tsScrollbars',
})
export class TsScrollbarsComponent {
/**
* Define the default component ID
*/
protected _uid = `ts-scrollbars-${nextUniqueId++}`;
/**
* Define the speed at which to scroll during automated movements
*/
protected scrollSpeed = DEFAULT_SCROLL_SPEED;
/**
* Return an object containing scrollbar geometry.
*
* @returns An object with all geometry information
*/
public get geometry(): TsScrollbarsGeometry | null {
if (this.scrollbar) {
return this.scrollbar.geometry('scroll') as TsScrollbarsGeometry;
}
return null;
}
/**
* Return the current scrollbar position.
*
* @returns The current scrollbar position
*/
public get position(): TsScrollbarPosition | null {
if (this.scrollbar) {
return this.scrollbar.position() as TsScrollbarPosition;
}
return null;
}
/**
* Define an ID for the component
*
* @param value
*/
@Input()
public set id(value: string) {
this._id = value || this._uid;
}
public get id(): string {
return this._id;
}
protected _id = this._uid;
/**
* Define if the scrollbars are disabled
*/
@Input()
public isDisabled = false;
/**
* Access underlying scrollbar directive
*/
@ViewChild(forwardRef(() => PerfectScrollbarDirective))
public scrollbar!: PerfectScrollbarDirective;
/**
* Event Emitters
*/
@Output()
public readonly scrollDown = new EventEmitter<Event>();
@Output()
public readonly scrollLeft = new EventEmitter<Event>();
@Output()
public readonly scrollRight = new EventEmitter<Event>();
@Output()
public readonly scrollUp = new EventEmitter<Event>();
@Output()
public readonly scrollX = new EventEmitter<Event>();
@Output()
public readonly scrollY = new EventEmitter<Event>();
@Output()
public readonly xReachEnd = new EventEmitter<Event>();
@Output()
public readonly xReachStart = new EventEmitter<Event>();
@Output()
public readonly yReachEnd = new EventEmitter<Event>();
@Output()
public readonly yReachStart = new EventEmitter<Event>();
/**
* Determine if a direction is scrollable.
*
* See {@link TsScrollbarsScrollDirections} for all possible options.
*
* @param direction - The scroll direction to check
* @returns Whether the direction is currently scrollable
*/
public scrollable(direction: TsScrollbarsScrollDirections = 'any'): boolean | null {
if (this.scrollbar) {
return this.scrollbar.scrollable(direction);
}
return null;
}
/**
* Scroll to a location
*
* @param x - The value to scroll the x axis
* @param y - The value to scroll the y axis
* @param speed
*/
public scrollTo(x: number, y?: number, speed?: number): void {
// istanbul ignore else
if (this.scrollbar) {
this.scrollbar.scrollTo(x, y, speed);
}
}
/**
* Scroll to element
*
* @param queryString - The string to query the DOM for
* @param speed - The speed to move at
* @param offset - A px offset
*/
public scrollToElement(queryString: string, speed: number = this.scrollSpeed, offset?: number): void {
// istanbul ignore else
if (this.scrollbar) {
this.scrollbar.scrollToElement(queryString, offset, speed);
}
}
/**
* Scroll to the bottom
*
* @param speed - The rate at which to move
* @param offset - An offset when scrolling
*/
public scrollToBottom(speed: number = this.scrollSpeed, offset?: number): void {
// istanbul ignore else
if (this.scrollbar) {
this.scrollbar.scrollToBottom(offset, speed);
}
}
/**
* Scroll to the left
*
* @param speed - The rate at which to move
* @param offset - An offset when scrolling
*/
public scrollToLeft(speed: number = this.scrollSpeed, offset?: number): void {
// istanbul ignore else
if (this.scrollbar) {
this.scrollbar.scrollToLeft(offset, speed);
}
}
/**
* Scroll to the right
*
* @param speed - The rate at which to move
* @param offset - An offset when scrolling
*/
public scrollToRight(speed: number = this.scrollSpeed, offset?: number): void {
// istanbul ignore else
if (this.scrollbar) {
this.scrollbar.scrollToRight(offset, speed);
}
}
/**
* Scroll to the top
*
* @param speed - The rate at which to move
* @param offset - An offset when scrolling
*/
public scrollToTop(speed: number = this.scrollSpeed, offset?: number): void {
// istanbul ignore else
if (this.scrollbar) {
this.scrollbar.scrollToTop(offset, speed);
}
}
/**
* Trigger an update on the underlying scrollbar library instance.
*/
public update(): void {
// istanbul ignore else
if (this.scrollbar) {
this.scrollbar.update();
}
}
}