From cf543b7028bdf958794061b5e5dfdfce7825e315 Mon Sep 17 00:00:00 2001 From: VovanSuper Date: Mon, 11 Jul 2022 11:47:23 +0300 Subject: [PATCH] fix:min: move doneAnim, startAnim to component --- .github/workflows/ci.yml | 4 +- .github/workflows/releases.yml | 1 + .../@ngx-dummy/accordion-simple/README.md | 35 +++++++-- .../src/lib/accordion-item-img.directive.ts | 73 ++++++++++--------- .../src/lib/accordion-item.component.ts | 21 +++++- .../src/lib/accordion-item.directive.ts | 29 +------- .../src/lib/accordion-open.service.ts | 1 + .../src/lib/accordion.component.spec.ts | 2 +- .../src/lib/accordion.component.ts | 7 +- .../accordion-sample/src/app/app.component.ts | 2 +- .../accordion-sample/src/app/app.module.ts | 2 +- 11 files changed, 99 insertions(+), 78 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 226d23f0..40bb97c1 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -12,10 +12,11 @@ jobs: strategy: matrix: - node-version: [ 12 ] + node-version: [ 14, 16 ] steps: - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v2 with: @@ -43,6 +44,7 @@ jobs: echo Installing local packages and Building Sample app npm ci npm run build:sample --if-present + - name: Make a drop uses: actions/upload-artifact@v1 with: diff --git a/.github/workflows/releases.yml b/.github/workflows/releases.yml index 29eaaf8c..bb44ead3 100644 --- a/.github/workflows/releases.yml +++ b/.github/workflows/releases.yml @@ -14,6 +14,7 @@ jobs: steps: - name: Checkout code uses: actions/checkout@v2 + - name: Create Release id: create_release uses: actions/create-release@latest diff --git a/projects/@ngx-dummy/accordion-simple/README.md b/projects/@ngx-dummy/accordion-simple/README.md index 9610b102..829c95d6 100644 --- a/projects/@ngx-dummy/accordion-simple/README.md +++ b/projects/@ngx-dummy/accordion-simple/README.md @@ -52,13 +52,9 @@ npm install --save @ngx-dummy/accordion-simple ```typescript import { NgModule, Component, enableProdMode } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { - AccordionModule, - Accordion, - IAccordionStyling, -} from 'https://cdn.jsdelivr.net/npm/@ngx-dummy/accordion-simple@latest/bundles/ngx-dummy-accordion-simple.umd.min.js'; +import { AccordionModule, Accordion, IAccordionStyling } from 'https://cdn.jsdelivr.net/npm/@ngx-dummy/accordion-simple@latest/bundles/ngx-dummy-accordion-simple.umd.min.js'; @Component({ selector: 'my-app', @@ -94,7 +90,7 @@ class AppCmp { } @NgModule({ - imports: [BrowserModule, AccordionModule], + imports: [BrowserAnimationsModule, AccordionModule], declarations: [AppCmp], bootstrap: [AppCmp], }) @@ -119,15 +115,19 @@ $~> npm run sample [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/vovansuper/accordion-simple) +**Make sure in install `BrowserAnimationsModule` or `NoopAnimationsModule` in the `AppModule` of Your application** + --- ## Main idea -Simple Angular accordion component and a simple demonstrator app; the app is a simple demonstrator project - showcasing the integration of the accordion library and applying basic setting of it. +Simple Angular accordion component and a simple demostrator app; the app is a simple demonstrator project - showcasing the integration of the accordion library and applying basic setting of it. Any suggestions for improvement are welcome. Please [setup a new issue](https://github.com/VovanSuper/accordion-simple/issues/new) if you have any problems using this package or find ways in which it could be improved. To ask for features / report on a bug follow the guide in : [Issue Report](./.github/ISSUE_TEMPLATE/bug_report.md) +
+
TODO: @@ -135,6 +135,10 @@ To ask for features / report on a bug follow the guide in : [Issue Report](./.gi
+
+ +--- + ## Documentation - General typeDoc generated types of the Accordion-simple library are available in [[docs](./docs/typedocs/index.html)] @@ -147,6 +151,21 @@ To ask for features / report on a bug follow the guide in : [Issue Report](./.gi --- +
+ +
+Other projects: + +| Name | URL | +| :-----------: | :----------------------------------------: | +| Select Simple | https://github.com/ngx-dummy/select-simple | + +
+ +
+ +--- + ##### Redistribution Licensed under the GNU GPLv3 License - see the [LICENSE](LICENSE) file for details. diff --git a/projects/@ngx-dummy/accordion-simple/src/lib/accordion-item-img.directive.ts b/projects/@ngx-dummy/accordion-simple/src/lib/accordion-item-img.directive.ts index 7246619c..ffb65297 100644 --- a/projects/@ngx-dummy/accordion-simple/src/lib/accordion-item-img.directive.ts +++ b/projects/@ngx-dummy/accordion-simple/src/lib/accordion-item-img.directive.ts @@ -35,88 +35,89 @@ export class AccordionItemImgDirective implements AfterViewInit, AfterContentChe @HostBinding('attr.src') get src() { return this._src; } - private nativeImgEl: HTMLImageElement; + + private _nativeImgEl: HTMLImageElement; private _src: string | SafeResourceUrl | undefined; private _openSign: string | SafeResourceUrl | undefined; private _closeSign: string | SafeResourceUrl | undefined; private _baseLogoImg = getSvgSafeRes(logo_svg, this.sanitizer); private _baseChevronImg = getSvgSafeRes(arrow_down, this.sanitizer); - private isSet = false; - private needToRecheck = false; + private _isSet = false; + private _needToRecheck = false; constructor(private el: ElementRef, private renderer: Renderer2, private zone: NgZone, private sanitizer: DomSanitizer) {} ngAfterViewInit() { - this.nativeImgEl = this.el.nativeElement; + this._nativeImgEl = this.el.nativeElement; } ngAfterContentChecked() { - if (this.isSet && !this.needToRecheck) { + if (this._isSet && !this._needToRecheck) { return; } - if (this.isSet && this.needToRecheck) { - return this.doOpenCloseSrcRecheck(); + if (this._isSet && this._needToRecheck) { + return this._doOpenCloseSrcRecheck(); } - if (this.isLogoImg()) { + if (this._isLogoImg()) { // this._src = this.readElDataSet('src') || this._baseLogoImg; // return this.setNoRecheck(); - return this.setItemHeaderImgSageSrc(this.readElDataSet('src') || this._baseLogoImg); - } else if (this.isCloserImg()) { - this._openSign = this.readElDataSet('opensrc') ?? undefined; - this._closeSign = this.readElDataSet('closesrc') ?? undefined; - if (!this.isImgOpenClose()) { + return this._setItemHeaderImgSafeSrc(this._readElDataSet('src') || this._baseLogoImg); + } else if (this._isCloserImg()) { + this._openSign = this._readElDataSet('opensrc') ?? undefined; + this._closeSign = this._readElDataSet('closesrc') ?? undefined; + if (!this._isImgOpenClose()) { // this._src = this._baseChevronImg; // return this.setNoRecheck(); - return this.setItemHeaderImgSageSrc(this._baseChevronImg); + return this._setItemHeaderImgSafeSrc(this._baseChevronImg); } else { if (this._openSign !== this._closeSign) { - this.needToRecheck = true; + this._needToRecheck = true; } - this.isSet = true; + this._isSet = true; return; } } } - onLoad = ({ target, ...rest }: { target: HTMLImageElement; rest: any[] }) => this.setLoadSuccess(target); + onLoad = ({ target, ...rest }: { target: HTMLImageElement; rest: any[] }) => this._setLoadSuccess(target); onError = ({ target, ...rest }: { target: HTMLImageElement; rest: any[] }) => { - this.setLoadAlter(target); + this._setLoadAlter(target); if (target.classList.contains(ImgClasses.LOGO)) { // this.setItemHeaderImgSrc(target, this._baseLogoImg); - this.setItemHeaderImgSageSrc(this._baseLogoImg); + this._setItemHeaderImgSafeSrc(this._baseLogoImg); } else if (target.classList.contains(ImgClasses.ENDING)) { // this.setItemHeaderImgSrc(target, this._baseChevronImg); - this.setItemHeaderImgSageSrc(this._baseChevronImg); + this._setItemHeaderImgSafeSrc(this._baseChevronImg); } else { return l('Not an Accordion Item header image'); } }; - private doOpenCloseSrcRecheck = () => { + private _doOpenCloseSrcRecheck = () => { this.zone.runOutsideAngular(() => { - this._src = this.nativeImgEl?.classList.contains('open') ? this._closeSign : this._openSign; + this._src = this._nativeImgEl?.classList.contains('open') ? this._closeSign : this._openSign; }); }; - private setItemHeaderImgSrc = (imgRef: HTMLImageElement, src: string | SafeResourceUrl) => this.renderer.setAttribute(imgRef, 'src', src as string); - private setItemHeaderImgSageSrc = (src: string | SafeResourceUrl) => { + private _setItemHeaderImgSrc = (imgRef: HTMLImageElement, src: string | SafeResourceUrl) => this.renderer.setAttribute(imgRef, 'src', src as string); + private _setItemHeaderImgSafeSrc = (src: string | SafeResourceUrl) => { this._src = src; - return this.setNoRecheck(); + return this._setNoRecheck(); }; - private readElDataSet = (attr: string) => this.nativeImgEl?.dataset[attr]; - private setLoadSuccess = (target: HTMLImageElement) => { + private _readElDataSet = (attr: string) => this._nativeImgEl?.dataset[attr]; + private _setLoadSuccess = (target: HTMLImageElement) => { target.classList.add(ImgLoadClass.SUCCESS); - this.isSet = true; + this._isSet = true; }; - private setLoadAlter = (target: HTMLImageElement) => { + private _setLoadAlter = (target: HTMLImageElement) => { target.classList.add(ImgLoadClass.ALTER); - this.setNoRecheck(); + this._setNoRecheck(); }; - private isImgOpenClose = () => !!this._closeSign && !!(this._closeSign as string).length && !!this._openSign && !!(this._openSign as string).length; - private isLogoImg = () => this.nativeImgEl?.classList.contains(ImgClasses.LOGO); - private isCloserImg = () => this.nativeImgEl?.classList.contains(ImgClasses.ENDING); - private setNoRecheck = () => { - this.isSet = true; - this.needToRecheck = false; + private _isImgOpenClose = () => !!this._closeSign && !!(this._closeSign as string).length && !!this._openSign && !!(this._openSign as string).length; + private _isLogoImg = () => this._nativeImgEl?.classList.contains(ImgClasses.LOGO); + private _isCloserImg = () => this._nativeImgEl?.classList.contains(ImgClasses.ENDING); + private _setNoRecheck = () => { + this._isSet = true; + this._needToRecheck = false; }; } diff --git a/projects/@ngx-dummy/accordion-simple/src/lib/accordion-item.component.ts b/projects/@ngx-dummy/accordion-simple/src/lib/accordion-item.component.ts index bb9398a8..365313be 100644 --- a/projects/@ngx-dummy/accordion-simple/src/lib/accordion-item.component.ts +++ b/projects/@ngx-dummy/accordion-simple/src/lib/accordion-item.component.ts @@ -23,6 +23,23 @@ export class AccordionItemComponent { getItemBodyTemplate = getItemBodyTemplate!; isOpen$ = of(false); item: Partial; - startAnim: (e: NgAnimationEvent) => void; - doneAnim: (e: NgAnimationEvent) => void; + + startAnim(e: NgAnimationEvent) { + (e.element).style.willChange = 'height, opacity, visibility'; + const classes = e.element.classList; + if (e.fromState === 'void') { + classes?.add('closed'); + } + if (e.fromState === 'closed' && e.toState === 'opened') { + classes.replace('closed', 'opened'); + } + } + + doneAnim(e: NgAnimationEvent) { + (e.element).style.willChange = 'auto'; + const classes = e.element.classList; + if (e.fromState == 'opened' && e.toState == 'closed') { + classes.replace('opened', 'closed'); + } + } } diff --git a/projects/@ngx-dummy/accordion-simple/src/lib/accordion-item.directive.ts b/projects/@ngx-dummy/accordion-simple/src/lib/accordion-item.directive.ts index 43fee04c..1454893f 100644 --- a/projects/@ngx-dummy/accordion-simple/src/lib/accordion-item.directive.ts +++ b/projects/@ngx-dummy/accordion-simple/src/lib/accordion-item.directive.ts @@ -55,24 +55,6 @@ export class AccordionItemDirective implements OnInit, AfterViewInit, OnDestroy private cd: ChangeDetectorRef ) {} - startAnim(e: NgAnimationEvent) { - (e.element).style.willChange = 'height, opacity, visibility'; - const classes = e.element.classList; - if (e.fromState === 'void') { - classes?.add('closed'); - } - if (e.fromState === 'closed' && e.toState === 'opened') { - classes.replace('closed', 'opened'); - } - } - doneAnim(e: NgAnimationEvent) { - (e.element).style.willChange = 'auto'; - const classes = e.element.classList; - if (e.fromState == 'opened' && e.toState == 'closed') { - classes.replace('opened', 'closed'); - } - } - ngOnInit() { this.hostCmp.item = { ...this.item, @@ -93,9 +75,6 @@ export class AccordionItemDirective implements OnInit, AfterViewInit, OnDestroy pluck('isOpen'), tap((isOpen = false) => (this.isOpen = isOpen)) ); - - this.hostCmp.startAnim = this.startAnim; - this.hostCmp.doneAnim = this.doneAnim; } ngAfterViewInit() { @@ -146,11 +125,11 @@ export class AccordionItemDirective implements OnInit, AfterViewInit, OnDestroy } onClick = ([{ outerHTML }, { dataset }]: [{ outerHTML: string }, { dataset: any }]) => - !!outerHTML && !!dataset && outerHTML.includes('header') ? this.handleClick({ ...dataset }) : void 0; + !!outerHTML && !!dataset && outerHTML.includes('header') ? this._handleClick({ ...dataset }) : void 0; onDblClick = ([{ outerHTML }, { dataset }]: [{ outerHTML: string }, { dataset: any }]) => - !!outerHTML && this.bodyDblclkClose && outerHTML.includes('accord-item__body') ? this.handleClick({ ...dataset }) : void 0; + !!outerHTML && this.bodyDblclkClose && outerHTML.includes('accord-item__body') ? this._handleClick({ ...dataset }) : void 0; - private handleClick = ({ idx, ...rest } = { idx: -1 }) => this.toggle(+idx); - private toggle = (itemId: number) => this.toggled.emit({ itemId, isOpen: !this.isOpen }); + private _handleClick = ({ idx, ...rest } = { idx: -1 }) => this._toggle(+idx); + private _toggle = (itemId: number) => this.toggled.emit({ itemId, isOpen: !this.isOpen }); } diff --git a/projects/@ngx-dummy/accordion-simple/src/lib/accordion-open.service.ts b/projects/@ngx-dummy/accordion-simple/src/lib/accordion-open.service.ts index c54ab61c..48a63fe4 100644 --- a/projects/@ngx-dummy/accordion-simple/src/lib/accordion-open.service.ts +++ b/projects/@ngx-dummy/accordion-simple/src/lib/accordion-open.service.ts @@ -30,6 +30,7 @@ export class AccordionOpenService extends BehaviorSubject { } setItemsOpen = (itemsStats: IToggler[]) => this.next(itemsStats); + close = () => { this.complete(); super.unsubscribe(); diff --git a/projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.spec.ts b/projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.spec.ts index fcaab86c..4bf7666e 100644 --- a/projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.spec.ts +++ b/projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.spec.ts @@ -6,6 +6,7 @@ * Copyright Vladimir Ovsyukov * Published under GNU LGPLv3 License */ +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { DebugElement } from '@angular/core'; import { TestBed, ComponentFixture } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; @@ -16,7 +17,6 @@ import { AccordionModule } from './accordion.module'; import { IAccordionItemStyling } from './settings/IAccordionStylings'; import { simpleAccordionList, sampleStyling, dummyAccordionList1 } from '../helpers/dummy-data'; import { TestHostModule, TestHostComponent } from '../helpers/test-host.component'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; describe('An Accordion component', () => { let accordCmpFixture: ComponentFixture; diff --git a/projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts b/projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts index 07bda41e..72185b01 100644 --- a/projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts +++ b/projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts @@ -90,13 +90,14 @@ export class AccordionComponent implements OnInit, OnChanges, OnDestroy { get loadingTpl(): TemplateRef { return this._loadingTpl ?? this.defloadingTpl; } - private _loadingTpl: TemplateRef; - private _accord: AccordionInternal; _bodyDblclkClose = false; - private multiSelect = false; _itemStyle: IAccordionItemStyling; _isNumbered = false; + private _loadingTpl: TemplateRef; + private _accord: AccordionInternal; + private multiSelect = false; + constructor(@Self() private itemsOpenSvc: AccordionOpenService, private hostEl: ElementRef, private renderer: Renderer2) {} ngOnInit() { diff --git a/projects/accordion-sample/src/app/app.component.ts b/projects/accordion-sample/src/app/app.component.ts index 3976d978..34f47e4d 100644 --- a/projects/accordion-sample/src/app/app.component.ts +++ b/projects/accordion-sample/src/app/app.component.ts @@ -11,7 +11,7 @@ import { delay } from 'rxjs/operators'; import { of } from 'rxjs'; import { MDCRipple } from '@material/ripple'; -import { IAccordionStyling, Accordion } from '@ngx-dummy/accordion-simple/index'; +import { IAccordionStyling, Accordion } from '@ngx-dummy/accordion-simple/settings'; import { dummyAccordionList1 as list1, dummyAccordionList2 } from './helpers/dummy-data'; import { loaderIn } from './loader.anim'; diff --git a/projects/accordion-sample/src/app/app.module.ts b/projects/accordion-sample/src/app/app.module.ts index 008e6514..d4795569 100644 --- a/projects/accordion-sample/src/app/app.module.ts +++ b/projects/accordion-sample/src/app/app.module.ts @@ -10,7 +10,7 @@ import { NgModule } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppComponent } from './app.component'; -import { AccordionModule } from '@ngx-dummy/accordion-simple/index'; +import { AccordionModule } from '@ngx-dummy/accordion-simple/accordion.module'; import { App2Component } from './app2.component'; @NgModule({