mirror of
https://gitlab.com/openstapps/openstapps.git
synced 2026-01-20 16:42:56 +00:00
107 lines
2.5 KiB
TypeScript
107 lines
2.5 KiB
TypeScript
/*
|
|
* Copyright (C) 2023 StApps
|
|
* This program is free software: you can redistribute it and/or modify it
|
|
* under the terms of the GNU General Public License as published by the Free
|
|
* Software Foundation, version 3.
|
|
*
|
|
* This program is distributed in the hope that it will be useful, but WITHOUT
|
|
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
|
|
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
|
|
* more details.
|
|
*
|
|
* You should have received a copy of the GNU General Public License along with
|
|
* this program. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
import {
|
|
AfterContentInit,
|
|
Component,
|
|
EventEmitter,
|
|
HostBinding,
|
|
Input,
|
|
OnDestroy,
|
|
OnInit,
|
|
Output,
|
|
ViewContainerRef,
|
|
} from '@angular/core';
|
|
import {SCThings} from '@openstapps/core';
|
|
|
|
/**
|
|
* Shows a horizontal list of action chips
|
|
*/
|
|
@Component({
|
|
selector: 'stapps-section',
|
|
templateUrl: 'section.component.html',
|
|
styleUrls: ['section.component.scss'],
|
|
})
|
|
export class SectionComponent implements OnInit, AfterContentInit, OnDestroy {
|
|
@HostBinding('class.is-extended') isExtendedClass = false;
|
|
|
|
@HostBinding('class.is-editable') isEditableClass = false;
|
|
|
|
@Input() title = '';
|
|
|
|
@Input() isSectionExtended = false;
|
|
|
|
@Input() isEditable = false;
|
|
|
|
@Input() customIcon?: string = undefined;
|
|
|
|
@Input() item?: SCThings;
|
|
|
|
// eslint-disable-next-line @angular-eslint/no-output-on-prefix
|
|
@Output() onEdit = new EventEmitter<void>();
|
|
|
|
mutationObserver: MutationObserver;
|
|
|
|
swiper?: HTMLElement;
|
|
|
|
constructor(readonly viewContainerRef: ViewContainerRef) {}
|
|
|
|
ngOnInit() {
|
|
this.isExtendedClass = this.isSectionExtended;
|
|
this.isEditableClass = this.isEditable;
|
|
}
|
|
|
|
ngAfterContentInit() {
|
|
this.mutationObserver = new MutationObserver(() => {
|
|
const simpleSwiper = this.viewContainerRef.element.nativeElement.querySelector('simple-swiper');
|
|
if (!simpleSwiper) return;
|
|
|
|
this.swiper = simpleSwiper;
|
|
});
|
|
this.mutationObserver.observe(this.viewContainerRef.element.nativeElement, {
|
|
childList: true,
|
|
subtree: true,
|
|
});
|
|
}
|
|
|
|
slideNext() {
|
|
if (this.swiper) {
|
|
this.swiper.scrollBy({
|
|
left: this.swiper.offsetWidth,
|
|
behavior: 'smooth',
|
|
});
|
|
}
|
|
}
|
|
|
|
slidePrev() {
|
|
if (this.swiper) {
|
|
this.swiper.scrollBy({
|
|
left: -this.swiper.offsetWidth,
|
|
behavior: 'smooth',
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Action when edit is clicked
|
|
*/
|
|
onEditClick() {
|
|
this.onEdit.emit();
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
this.mutationObserver.disconnect();
|
|
}
|
|
}
|