@progress/kendo-angular-toolbar
Version:
Kendo UI Angular Toolbar component - a single UI element that organizes buttons and other navigation elements
111 lines (110 loc) • 4.96 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Injectable, NgZone } from '@angular/core';
import { isDocumentAvailable } from '@progress/kendo-angular-common';
import { Subject } from 'rxjs';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
const DEFAULT_SCROLL_BEHAVIOR = 'smooth';
const DEFAULT_SCROLL_SPEED = 100;
/**
* @hidden
*/
export class ScrollService {
ngZone;
localization;
owner;
position = 0;
scrollButtonActiveStateChange = new Subject();
get scrollElement() {
return this.owner.scrollContainer?.nativeElement;
}
get scrollContainerOverflowSize() {
if (!isDocumentAvailable()) {
return 0;
}
if (!this.scrollElement) {
return 0;
}
const overflowSize = Math.floor(this.scrollElement.scrollWidth - this.scrollElement.getBoundingClientRect().width);
return overflowSize < 0 ? 0 : overflowSize;
}
get toolsOverflow() {
return this.scrollContainerOverflowSize > 0;
}
constructor(ngZone, localization) {
this.ngZone = ngZone;
this.localization = localization;
}
toggleScrollButtonsState() {
const toolbar = this.owner;
if (!toolbar.hasScrollButtons) {
return;
}
const currentPrevButtonActive = !this.isDisabled('prev');
const currentNextButtonActive = !this.isDisabled('next');
const defaultOffset = 1;
const rtlDelta = this.localization.rtl ? -1 : 1;
const calculatedPrevButtonActive = (this.position * rtlDelta) > 0 && this.scrollContainerOverflowSize > 0;
const calculatedNextButtonActive = (this.position * rtlDelta) < this.scrollContainerOverflowSize - defaultOffset && this.scrollContainerOverflowSize > 0;
if (calculatedPrevButtonActive !== currentPrevButtonActive) {
this.ngZone.run(() => this.toggleButtonActiveState('prev', calculatedPrevButtonActive));
}
if (calculatedNextButtonActive !== currentNextButtonActive) {
this.ngZone.run(() => this.toggleButtonActiveState('next', calculatedNextButtonActive));
}
}
onScroll(e) {
this.position = e.target.scrollLeft;
this.toggleScrollButtonsState();
}
scrollTools(direction) {
this.calculateListPosition(direction, DEFAULT_SCROLL_SPEED);
if (this.scrollElement) {
this.scrollElement.scrollTo({ left: this.position, behavior: DEFAULT_SCROLL_BEHAVIOR });
}
this.toggleScrollButtonsState();
}
updateScrollPosition(element) {
this.position = element.scrollLeft;
}
calculateListPosition(direction, scrollSpeed) {
if (direction === 'prev') {
if (!this.localization.rtl) {
this.position = this.position - scrollSpeed <= 0 ? 0 : this.position - scrollSpeed;
}
else {
this.position = this.position + scrollSpeed >= 0 ? 0 : this.position + scrollSpeed;
}
}
else if (direction === 'next' && this.position < this.scrollContainerOverflowSize) {
if (this.position + scrollSpeed > this.scrollContainerOverflowSize) {
if (this.localization.rtl) {
this.position = -this.scrollContainerOverflowSize;
}
else {
this.position = this.scrollContainerOverflowSize;
}
return;
}
if (this.localization.rtl) {
this.position -= scrollSpeed;
}
else {
this.position += scrollSpeed;
}
}
}
toggleButtonActiveState(buttonType, active) {
this.scrollButtonActiveStateChange.next({ buttonType, active });
}
isDisabled = (buttonType) => this.owner[`${buttonType}ScrollButton`]?.nativeElement.classList.contains('k-disabled');
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollService, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScrollService, decorators: [{
type: Injectable
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.LocalizationService }]; } });