File

libs/ui/scrollbars/src/lib/scrollbars/scrollbars.component.ts

Description

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>

Metadata

changeDetection ChangeDetectionStrategy.OnPush
encapsulation ViewEncapsulation.None
exportAs tsScrollbars
host {
}
selector ts-scrollbars
styleUrls ./scrollbars.component.scss,
./../../../../../../node_modules/perfect-scrollbar/css/perfect-scrollbar.css
templateUrl ./scrollbars.component.html

Index

Properties
Methods
Inputs
Outputs
Accessors

Inputs

id
Type : string

Define an ID for the component

isDisabled
Default value : false

Define if the scrollbars are disabled

Outputs

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

Methods

Public scrollable
scrollable(direction: TsScrollbarsScrollDirections)

Determine if a direction is scrollable.

See TsScrollbarsScrollDirections for all possible options.

Parameters :
Name Type Optional Default value Description
direction TsScrollbarsScrollDirections No 'any'
  • The scroll direction to check
Returns : boolean | null

Whether the direction is currently scrollable

Public scrollTo
scrollTo(x: number, y?: number, speed?: number)

Scroll to a location

Parameters :
Name Type Optional Description
x number No
  • The value to scroll the x axis
y number Yes
  • The value to scroll the y axis
speed number Yes
Returns : void
Public scrollToBottom
scrollToBottom(speed: number, offset?: number)

Scroll to the bottom

Parameters :
Name Type Optional Default value Description
speed number No this.scrollSpeed
  • The rate at which to move
offset number Yes
  • An offset when scrolling
Returns : void
Public scrollToElement
scrollToElement(queryString: string, speed: number, offset?: number)

Scroll to element

Parameters :
Name Type Optional Default value Description
queryString string No
  • The string to query the DOM for
speed number No this.scrollSpeed
  • The speed to move at
offset number Yes
  • A px offset
Returns : void
Public scrollToLeft
scrollToLeft(speed: number, offset?: number)

Scroll to the left

Parameters :
Name Type Optional Default value Description
speed number No this.scrollSpeed
  • The rate at which to move
offset number Yes
  • An offset when scrolling
Returns : void
Public scrollToRight
scrollToRight(speed: number, offset?: number)

Scroll to the right

Parameters :
Name Type Optional Default value Description
speed number No this.scrollSpeed
  • The rate at which to move
offset number Yes
  • An offset when scrolling
Returns : void
Public scrollToTop
scrollToTop(speed: number, offset?: number)

Scroll to the top

Parameters :
Name Type Optional Default value Description
speed number No this.scrollSpeed
  • The rate at which to move
offset number Yes
  • An offset when scrolling
Returns : void
Public update
update()

Trigger an update on the underlying scrollbar library instance.

Returns : void

Properties

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

Accessors

geometry
getgeometry()

Return an object containing scrollbar geometry.

position
getposition()

Return the current scrollbar position.

id
getid()
setid(value: string)

Define an ID for the component

Parameters :
Name Type Optional
value string No
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();
    }
  }
}

result-matching ""

    No results matching ""