@obliczeniowo/elementary
Version:
Library made in Angular version 20
208 lines (200 loc) • 12.3 kB
JavaScript
import * as i3 from '@obliczeniowo/elementary/pie-progress';
import { PieProgressModule } from '@obliczeniowo/elementary/pie-progress';
import * as i1 from '@obliczeniowo/elementary/buttons';
import { ButtonsModule } from '@obliczeniowo/elementary/buttons';
import * as i2 from '@obliczeniowo/elementary/icons';
import { IconsModule } from '@obliczeniowo/elementary/icons';
import * as i0 from '@angular/core';
import { Input, HostBinding, Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as i4 from '@angular/cdk/overlay';
import { OverlayModule } from '@angular/cdk/overlay';
class PageControllerAdapter {
page;
constructor(page) {
this.page = page;
}
move(nav, direction, size) {
if (direction && size) {
this.scroll(nav, this.page[size] * (direction === 'up' && 1 || -1));
}
this.scroll(nav);
}
}
class PageControllerElementAdapter extends PageControllerAdapter {
constructor() {
super({
step: 50,
jump: 450
});
}
scroll(nav, move) {
const scroll = (sc, max) => sc / max;
const { element, horizontal } = nav;
if (horizontal) {
element?.scrollTo({
left: element.scrollLeft + (move || 0)
});
nav.position = element ? scroll(element.scrollLeft, element.scrollWidth - element.clientWidth) : 0;
}
else {
element?.scrollTo({
top: element.scrollTop + (move || 0)
});
nav.position = element ? scroll(element.scrollTop, element.scrollHeight - element.clientHeight) : 0;
}
}
show(nav) {
const { element, horizontal } = nav;
if (horizontal) {
return element && element.scrollWidth > element.clientWidth || false;
}
else {
return element && element.scrollHeight > element.clientHeight || false;
}
}
positionChange(nav, pos) {
nav.position = pos / 100;
const { element, horizontal } = nav;
if (horizontal) {
element?.scrollTo({
left: (element.scrollWidth - element.clientWidth) * nav.position
});
}
else {
element?.scrollTo({
top: (element.scrollHeight - element.clientHeight) * nav.position
});
}
}
stepsPos(nav) {
const { element, horizontal } = nav;
if (horizontal) {
return element && Math.floor((element.scrollWidth - element.clientWidth) / this.page.step) || 0;
}
return element && Math.floor((element.scrollHeight - element.clientHeight) / this.page.step) || 0;
}
}
class ScrollerNavComponent {
change;
element;
show = false;
horizontal = true;
pageController = new PageControllerElementAdapter();
position = 0;
isOpen = false;
resize = new ResizeObserver(_ => {
this.checkShow();
this.change.detectChanges();
});
constructor(change) {
this.change = change;
}
ngOnChanges(changes) {
if (changes.element) {
this.resize.disconnect();
if (this.element) {
this.resize.observe(this.element);
setTimeout(() => this.checkShow());
}
}
}
ngOnDestroy() {
this.resize.disconnect();
}
checkShow() {
this.show = this.pageController.show(this);
this.pageController.move(this);
}
toggle() {
this.isOpen = !this.isOpen;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScrollerNavComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: ScrollerNavComponent, isStandalone: false, selector: "obl-scroller-nav", inputs: { element: "element", show: "show", horizontal: "horizontal", pageController: "pageController" }, host: { properties: { "class.show": "this.show", "class.horizontal": "this.horizontal" } }, usesOnChanges: true, ngImport: i0, template: "<button oblButton (click)=\"pageController.move(this, 'down', 'jump')\">\n <obl-icon [name]=\"horizontal ? 'left-more' : 'up-more'\"></obl-icon>\n</button>\n<button oblButton (click)=\"pageController.move(this, 'down', 'step')\">\n <obl-icon [name]=\"horizontal ? 'left' : 'up'\"></obl-icon>\n</button>\n<button\n oblButton\n (click)=\"toggle()\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n>\n <obl-pie-progress\n [value]=\"position * 100\"\n [display]=\"false\"\n [size]=\"24\"\n ></obl-pie-progress>\n</button>\n<button oblButton (click)=\"pageController.move(this, 'up', 'step')\">\n <obl-icon [name]=\"horizontal ? 'right' : 'down'\"></obl-icon>\n</button>\n<button oblButton (click)=\"pageController.move(this, 'up', 'jump')\">\n <obl-icon [name]=\"horizontal ? 'right-more' : 'down-more'\"></obl-icon>\n</button>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n (overlayOutsideClick)=\"toggle()\"\n>\n <div class=\"scroller\">\n <obl-pie-progress\n [value]=\"position * 100\"\n (valueChange)=\"pageController.positionChange(this, $event)\"\n [size]=\"100\"\n [display]=\"false\"\n [interactive]=\"true\"\n ></obl-pie-progress>\n </div>\n</ng-template>\n", styles: [":host{display:none;flex-direction:column}:host.show{display:flex}:host.horizontal{flex-direction:row}.scroller{width:100px;height:100px;background-color:var(--default-background-color);border-radius:50px}\n"], dependencies: [{ kind: "directive", type: i1.ButtonDirective, selector: "oblButton, [oblButton]", inputs: ["oblButton", "icon", "blockWhenLoading", "loading", "toggle", "selected", "link", "target"], exportAs: ["oblButton"] }, { kind: "component", type: i2.IconComponent, selector: "obl-icon", inputs: ["name", "width"] }, { kind: "component", type: i3.PieProgressComponent, selector: "obl-pie-progress", inputs: ["status", "interactive", "size", "colorFn", "display", "value", "fontSize", "column", "write"], outputs: ["valueChange"] }, { kind: "directive", type: i4.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i4.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScrollerNavComponent, decorators: [{
type: Component,
args: [{ selector: 'obl-scroller-nav', standalone: false, template: "<button oblButton (click)=\"pageController.move(this, 'down', 'jump')\">\n <obl-icon [name]=\"horizontal ? 'left-more' : 'up-more'\"></obl-icon>\n</button>\n<button oblButton (click)=\"pageController.move(this, 'down', 'step')\">\n <obl-icon [name]=\"horizontal ? 'left' : 'up'\"></obl-icon>\n</button>\n<button\n oblButton\n (click)=\"toggle()\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n>\n <obl-pie-progress\n [value]=\"position * 100\"\n [display]=\"false\"\n [size]=\"24\"\n ></obl-pie-progress>\n</button>\n<button oblButton (click)=\"pageController.move(this, 'up', 'step')\">\n <obl-icon [name]=\"horizontal ? 'right' : 'down'\"></obl-icon>\n</button>\n<button oblButton (click)=\"pageController.move(this, 'up', 'jump')\">\n <obl-icon [name]=\"horizontal ? 'right-more' : 'down-more'\"></obl-icon>\n</button>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n (overlayOutsideClick)=\"toggle()\"\n>\n <div class=\"scroller\">\n <obl-pie-progress\n [value]=\"position * 100\"\n (valueChange)=\"pageController.positionChange(this, $event)\"\n [size]=\"100\"\n [display]=\"false\"\n [interactive]=\"true\"\n ></obl-pie-progress>\n </div>\n</ng-template>\n", styles: [":host{display:none;flex-direction:column}:host.show{display:flex}:host.horizontal{flex-direction:row}.scroller{width:100px;height:100px;background-color:var(--default-background-color);border-radius:50px}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { element: [{
type: Input
}], show: [{
type: Input
}, {
type: HostBinding,
args: ['class.show']
}], horizontal: [{
type: Input
}, {
type: HostBinding,
args: ['class.horizontal']
}], pageController: [{
type: Input
}] } });
class ScrollerNavModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScrollerNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.4", ngImport: i0, type: ScrollerNavModule, declarations: [ScrollerNavComponent], imports: [CommonModule,
ButtonsModule,
IconsModule,
PieProgressModule,
OverlayModule], exports: [ScrollerNavComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScrollerNavModule, imports: [CommonModule,
ButtonsModule,
IconsModule,
PieProgressModule,
OverlayModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ScrollerNavModule, decorators: [{
type: NgModule,
args: [{
declarations: [
ScrollerNavComponent
],
imports: [
CommonModule,
ButtonsModule,
IconsModule,
PieProgressModule,
OverlayModule,
],
exports: [
ScrollerNavComponent
]
}]
}] });
class PageControllerRecordAdapter extends PageControllerAdapter {
max;
position = 0;
getMax() {
return this.max;
}
setMax(max, nav) {
this.max = max;
nav?.checkShow();
}
constructor(max) {
super({
step: 1,
jump: 9
});
this.max = max;
}
scroll(nav, move) {
this.position = Math.min(Math.max(this.position + (move || 0), 0), this.max - this.page.jump);
nav.position = this.position / ((this.max - this.page.jump) || 1);
}
positionChange(nav, pos) {
nav.position = pos / 100;
this.position = Math.round(nav.position * (this.max - this.page.jump));
}
stepsPos(nav) {
return this.position;
}
show(nav) {
return this.max > this.page.jump;
}
}
/**
* Generated bundle index. Do not edit.
*/
export { PageControllerAdapter, PageControllerElementAdapter, PageControllerRecordAdapter, ScrollerNavComponent, ScrollerNavModule };
//# sourceMappingURL=obliczeniowo-elementary-scroller-nav.mjs.map