diff --git a/README.md b/README.md index 66286fff..c0b6e7c8 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,6 @@ -# angular-split [![npm latest version](https://img.shields.io/npm/v/angular-split/latest.svg?style=flat-square)](https://www.npmjs.com/package/angular-split) [![NPM next version](https://img.shields.io/npm/v/angular-split/next.svg?style=flat-square)](https://www.npmjs.com/package/angular-split) [![Travis build](https://img.shields.io/travis/com/bertrandg/angular-split/master.svg?style=flat-square&label=Cypress+E2E+tests)](https://travis-ci.com/bertrandg/angular-split) -Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout. - -Documentation and examples: +This is a fork of: [https://bertrandg.github.io/angular-split/](https://bertrandg.github.io/angular-split/) -### Credits -Crossbrowser testing sponsored by [Browser Stack](https://www.browserstack.com) -[Browser Stack](https://www.browserstack.com) - ### License Apache 2.0 diff --git a/projects/angular-split/package.json b/projects/angular-split/package.json index 4f83b754..204915ab 100644 --- a/projects/angular-split/package.json +++ b/projects/angular-split/package.json @@ -1,27 +1,26 @@ { - "name": "angular-split", - "version": "3.0.1", - "description": "Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout.", - "author": "bertrandg", + "name": "angular-split-8", + "version": "3.0.2", + "description": "Angular UI library fork for Angular 8.", + "author": "kryptand", "repository": { - "type": "git", - "url": "https://github.com/bertrandg/angular-split.git" + "type": "git", + "url": "https://github.com/kryptand/angular-split.git" }, "bugs": { - "url": "https://github.com/bertrandg/angular-split/issues" + "url": "https://github.com/kryptand/angular-split/issues" }, - "homepage": "https://bertrandg.github.io/angular-split/", "keywords": [ - "angular", - "split", - "split-pane", - "split-area", - "flexbox" + "angular", + "split", + "split-pane", + "split-area", + "flexbox" ], "license": "Apache-2.0", "peerDependencies": { - "@angular/common": "^7.0.0", - "@angular/core": "^7.0.0", + "@angular/common": "^8.0.0", + "@angular/core": "^8.0.0", "rxjs": "^6.0.0" } } \ No newline at end of file diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts index 5c3c9b17..089236f6 100644 --- a/projects/angular-split/src/lib/component/split.component.ts +++ b/projects/angular-split/src/lib/component/split.component.ts @@ -8,8 +8,8 @@ import { getInputPositiveNumber, getInputBoolean, isUserSizesValid, getAreaMinSi /** * angular-split - * - * + * + * * PERCENT MODE ([unit]="'percent'") * ___________________________________________________________________________________________ * | A [g1] B [g2] C [g3] D [g4] E | @@ -21,11 +21,11 @@ import { getInputPositiveNumber, getInputBoolean, isUserSizesValid, getAreaMinSi * |___________________________________________________________________________________________| * 800px <-- el.getBoundingClientRect().width * flex-basis = calc( { area.size }% - { area.size/100 * nbGutter*gutterSize }px ); - * - * + * + * * PIXEL MODE ([unit]="'pixel'") * ___________________________________________________________________________________________ - * | A [g1] B [g2] C [g3] D [g4] E | + * | A [g1] B [g2] C [g3] D [g4] E | * |-------------------------------------------------------------------------------------------| * | 100 250 * 150 100 | <-- [size]="y" * | 10px 10px 10px 10px | <-- [gutterSize]="10" @@ -33,7 +33,7 @@ import { getInputPositiveNumber, getInputBoolean, isUserSizesValid, getAreaMinSi * | 100px 250px 200px 150px 100px | <-- el.getBoundingClientRect().width * |___________________________________________________________________________________________| * 800px <-- el.getBoundingClientRect().width - * + * */ @Component({ @@ -44,7 +44,7 @@ import { getInputPositiveNumber, getInputBoolean, isUserSizesValid, getAreaMinSi template: ` -
(20) ); } - + private dragProgressSubject: Subject = new Subject(); dragProgress$: Observable = this.dragProgressSubject.asObservable(); @@ -213,12 +213,12 @@ export class SplitComponent implements AfterViewInit, OnDestroy { public readonly displayedAreas: Array = []; private readonly hidedAreas: Array = []; - @ViewChildren('gutterEls') private gutterEls: QueryList; + @ViewChildren('gutterEls', { static: false }) private gutterEls: QueryList; constructor(private ngZone: NgZone, - private elRef: ElementRef, - private cdRef: ChangeDetectorRef, - private renderer: Renderer2) { + private elRef: ElementRef, + private cdRef: ChangeDetectorRef, + private renderer: Renderer2) { // To force adding default class, could be override by user @Input() or not this.direction = this._direction; } @@ -229,21 +229,21 @@ export class SplitComponent implements AfterViewInit, OnDestroy { setTimeout(() => this.renderer.addClass(this.elRef.nativeElement, 'as-init')); }); } - + private getNbGutters(): number { return (this.displayedAreas.length === 0) ? 0 : this.displayedAreas.length - 1; } public addArea(component: SplitAreaDirective): void { const newArea: IArea = { - component, - order: 0, + component, + order: 0, size: 0, minSize: null, maxSize: null, }; - if(component.visible === true) { + if (component.visible === true) { this.displayedAreas.push(newArea); this.build(true, true); @@ -254,27 +254,27 @@ export class SplitComponent implements AfterViewInit, OnDestroy { } public removeArea(component: SplitAreaDirective): void { - if(this.displayedAreas.some(a => a.component === component)) { + if (this.displayedAreas.some(a => a.component === component)) { const area = this.displayedAreas.find(a => a.component === component); this.displayedAreas.splice(this.displayedAreas.indexOf(area), 1); this.build(true, true); } - else if(this.hidedAreas.some(a => a.component === component)) { + else if (this.hidedAreas.some(a => a.component === component)) { const area = this.hidedAreas.find(a => a.component === component); this.hidedAreas.splice(this.hidedAreas.indexOf(area), 1); } } public updateArea(component: SplitAreaDirective, resetOrders: boolean, resetSizes: boolean): void { - if(component.visible === true) { + if (component.visible === true) { this.build(resetOrders, resetSizes); } } public showArea(component: SplitAreaDirective): void { const area = this.hidedAreas.find(a => a.component === component); - if(area === undefined) { + if (area === undefined) { return; } @@ -286,7 +286,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { public hideArea(comp: SplitAreaDirective): void { const area = this.displayedAreas.find(a => a.component === comp); - if(area === undefined) { + if (area === undefined) { return; } @@ -305,14 +305,14 @@ export class SplitComponent implements AfterViewInit, OnDestroy { } public setVisibleAreaSizes(sizes: IOutputAreaSizes): boolean { - if(sizes.length !== this.displayedAreas.length) { + if (sizes.length !== this.displayedAreas.length) { return false; } const formatedSizes = sizes.map(s => getInputPositiveNumber(s, null)); const isValid = isUserSizesValid(this.unit, formatedSizes); - if(isValid === false) { + if (isValid === false) { return false; } @@ -327,14 +327,14 @@ export class SplitComponent implements AfterViewInit, OnDestroy { this.stopDragging(); // ¤ AREAS ORDER - - if(resetOrders === true) { + + if (resetOrders === true) { // If user provided 'order' for each area, use it to sort them. - if(this.displayedAreas.every(a => a.component.order !== null)) { - this.displayedAreas.sort((a, b) => ( a.component.order) - ( b.component.order)); + if (this.displayedAreas.every(a => a.component.order !== null)) { + this.displayedAreas.sort((a, b) => (a.component.order) - (b.component.order)); } - + // Then set real order with multiples of 2, numbers between will be used by gutters. this.displayedAreas.forEach((area, i) => { area.order = i * 2; @@ -343,23 +343,23 @@ export class SplitComponent implements AfterViewInit, OnDestroy { } // ¤ AREAS SIZE - - if(resetSizes === true) { + + if (resetSizes === true) { const useUserSizes = isUserSizesValid(this.unit, this.displayedAreas.map(a => a.component.size)); - switch(this.unit) { + switch (this.unit) { case 'percent': { const defaultSize = 100 / this.displayedAreas.length; - + this.displayedAreas.forEach(area => { - area.size = useUserSizes ? area.component.size : defaultSize; + area.size = useUserSizes ? area.component.size : defaultSize; area.minSize = getAreaMinSize(area); area.maxSize = getAreaMaxSize(area); }); break; } case 'pixel': { - if(useUserSizes) { + if (useUserSizes) { this.displayedAreas.forEach(area => { area.size = area.component.size; area.minSize = getAreaMinSize(area); @@ -368,9 +368,9 @@ export class SplitComponent implements AfterViewInit, OnDestroy { } else { const wildcardSizeAreas = this.displayedAreas.filter(a => a.component.size === null); - + // No wildcard area > Need to select one arbitrarily > first - if(wildcardSizeAreas.length === 0 && this.displayedAreas.length > 0) { + if (wildcardSizeAreas.length === 0 && this.displayedAreas.length > 0) { this.displayedAreas.forEach((area, i) => { area.size = (i === 0) ? null : area.component.size; @@ -379,12 +379,12 @@ export class SplitComponent implements AfterViewInit, OnDestroy { }); } // More than one wildcard area > Need to keep only one arbitrarly > first - else if(wildcardSizeAreas.length > 1) { + else if (wildcardSizeAreas.length > 1) { let alreadyGotOne = false; this.displayedAreas.forEach(area => { - if(area.component.size === null) { - if(alreadyGotOne === false) { + if (area.component.size === null) { + if (alreadyGotOne === false) { area.size = null; area.minSize = null; area.maxSize = null; @@ -416,31 +416,31 @@ export class SplitComponent implements AfterViewInit, OnDestroy { private refreshStyleSizes(): void { /////////////////////////////////////////// // PERCENT MODE - if(this.unit === 'percent') { + if (this.unit === 'percent') { // Only one area > flex-basis 100% - if(this.displayedAreas.length === 1) { + if (this.displayedAreas.length === 1) { this.displayedAreas[0].component.setStyleFlex(0, 0, `100%`, false, false); } // Multiple areas > use each percent basis else { const sumGutterSize = this.getNbGutters() * this.gutterSize; - + this.displayedAreas.forEach(area => { area.component.setStyleFlex( - 0, 0, `calc( ${ area.size }% - ${ area.size / 100 * sumGutterSize }px )`, + 0, 0, `calc( ${area.size}% - ${area.size / 100 * sumGutterSize}px )`, (area.minSize !== null && area.minSize === area.size) ? true : false, (area.maxSize !== null && area.maxSize === area.size) ? true : false, ); }); - } + } } /////////////////////////////////////////// // PIXEL MODE - else if(this.unit === 'pixel') { + else if (this.unit === 'pixel') { this.displayedAreas.forEach(area => { // Area with wildcard size - if(area.size === null) { - if(this.displayedAreas.length === 1) { + if (area.size === null) { + if (this.displayedAreas.length === 1) { area.component.setStyleFlex(1, 1, `100%`, false, false); } else { @@ -450,13 +450,13 @@ export class SplitComponent implements AfterViewInit, OnDestroy { // Area with pixel size else { // Only one area > flex-basis 100% - if(this.displayedAreas.length === 1) { + if (this.displayedAreas.length === 1) { area.component.setStyleFlex(0, 0, `100%`, false, false); } // Multiple areas > use each pixel basis else { area.component.setStyleFlex( - 0, 0, `${ area.size }px`, + 0, 0, `${area.size}px`, (area.minSize !== null && area.minSize === area.size) ? true : false, (area.maxSize !== null && area.maxSize === area.size) ? true : false, ); @@ -472,10 +472,10 @@ export class SplitComponent implements AfterViewInit, OnDestroy { const tempPoint = getPointFromEvent(event); // Be sure mouseup/touchend happened at same point as mousedown/touchstart to trigger click/dblclick - if(this.startPoint && this.startPoint.x === tempPoint.x && this.startPoint.y === tempPoint.y) { + if (this.startPoint && this.startPoint.x === tempPoint.x && this.startPoint.y === tempPoint.y) { // If timeout in progress and new click > clearTimeout & dblClickEvent - if(this._clickTimeout !== null) { + if (this._clickTimeout !== null) { window.clearTimeout(this._clickTimeout); this._clickTimeout = null; this.notify('dblclick', gutterNum); @@ -497,7 +497,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { event.stopPropagation(); this.startPoint = getPointFromEvent(event); - if(this.startPoint === null || this.disabled === true) { + if (this.startPoint === null || this.disabled === true) { return; } @@ -517,17 +517,17 @@ export class SplitComponent implements AfterViewInit, OnDestroy { sizePercentAtStart: (this.unit === 'percent') ? area.size : -1 // If pixel mode, anyway, will not be used. }; - if(area.order < gutterOrder) { - if(this.restrictMove === true) { + if (area.order < gutterOrder) { + if (this.restrictMove === true) { this.snapshot.areasBeforeGutter = [areaSnapshot]; } else { this.snapshot.areasBeforeGutter.unshift(areaSnapshot); } } - else if(area.order > gutterOrder) { - if(this.restrictMove === true) { - if(this.snapshot.areasAfterGutter.length === 0) this.snapshot.areasAfterGutter = [areaSnapshot]; + else if (area.order > gutterOrder) { + if (this.restrictMove === true) { + if (this.snapshot.areasAfterGutter.length === 0) this.snapshot.areasAfterGutter = [areaSnapshot]; } else { this.snapshot.areasAfterGutter.push(areaSnapshot); @@ -535,19 +535,19 @@ export class SplitComponent implements AfterViewInit, OnDestroy { } }); - this.snapshot.allInvolvedAreasSizePercent = [...this.snapshot.areasBeforeGutter, ...this.snapshot.areasAfterGutter].reduce((t, a) => t+a.sizePercentAtStart, 0); - - if(this.snapshot.areasBeforeGutter.length === 0 || this.snapshot.areasAfterGutter.length === 0) { + this.snapshot.allInvolvedAreasSizePercent = [...this.snapshot.areasBeforeGutter, ...this.snapshot.areasAfterGutter].reduce((t, a) => t + a.sizePercentAtStart, 0); + + if (this.snapshot.areasBeforeGutter.length === 0 || this.snapshot.areasAfterGutter.length === 0) { return; } - this.dragListeners.push( this.renderer.listen('document', 'mouseup', this.stopDragging.bind(this)) ); - this.dragListeners.push( this.renderer.listen('document', 'touchend', this.stopDragging.bind(this)) ); - this.dragListeners.push( this.renderer.listen('document', 'touchcancel', this.stopDragging.bind(this)) ); - + this.dragListeners.push(this.renderer.listen('document', 'mouseup', this.stopDragging.bind(this))); + this.dragListeners.push(this.renderer.listen('document', 'touchend', this.stopDragging.bind(this))); + this.dragListeners.push(this.renderer.listen('document', 'touchcancel', this.stopDragging.bind(this))); + this.ngZone.runOutsideAngular(() => { - this.dragListeners.push( this.renderer.listen('document', 'mousemove', this.dragEvent.bind(this)) ); - this.dragListeners.push( this.renderer.listen('document', 'touchmove', this.dragEvent.bind(this)) ); + this.dragListeners.push(this.renderer.listen('document', 'mousemove', this.dragEvent.bind(this))); + this.dragListeners.push(this.renderer.listen('document', 'touchmove', this.dragEvent.bind(this))); }); this.displayedAreas.forEach(area => area.component.lockEvents()); @@ -555,7 +555,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { this.isDragging = true; this.renderer.addClass(this.elRef.nativeElement, 'as-dragging'); this.renderer.addClass(this.gutterEls.toArray()[this.snapshot.gutterNum - 1].nativeElement, 'as-dragged'); - + this.notify('start', this.snapshot.gutterNum); } @@ -563,44 +563,44 @@ export class SplitComponent implements AfterViewInit, OnDestroy { event.preventDefault(); event.stopPropagation(); - if(this._clickTimeout !== null) { + if (this._clickTimeout !== null) { window.clearTimeout(this._clickTimeout); this._clickTimeout = null; } - if(this.isDragging === false) { + if (this.isDragging === false) { return; } this.endPoint = getPointFromEvent(event); - if(this.endPoint === null) { + if (this.endPoint === null) { return; } // Calculate steppedOffset let offset = (this.direction === 'horizontal') ? (this.startPoint.x - this.endPoint.x) : (this.startPoint.y - this.endPoint.y); - if(this.dir === 'rtl') { + if (this.dir === 'rtl') { offset = -offset; } const steppedOffset = Math.round(offset / this.gutterStep) * this.gutterStep; - - if(steppedOffset === this.snapshot.lastSteppedOffset) { + + if (steppedOffset === this.snapshot.lastSteppedOffset) { return; } - + this.snapshot.lastSteppedOffset = steppedOffset; - + // Need to know if each gutter side areas could reacts to steppedOffset - + let areasBefore = getGutterSideAbsorptionCapacity(this.unit, this.snapshot.areasBeforeGutter, -steppedOffset, this.snapshot.allAreasSizePixel); let areasAfter = getGutterSideAbsorptionCapacity(this.unit, this.snapshot.areasAfterGutter, steppedOffset, this.snapshot.allAreasSizePixel); - // Each gutter side areas can't absorb all offset - if(areasBefore.remain !== 0 && areasAfter.remain !== 0) { - if(Math.abs(areasBefore.remain) === Math.abs(areasAfter.remain)) { + // Each gutter side areas can't absorb all offset + if (areasBefore.remain !== 0 && areasAfter.remain !== 0) { + if (Math.abs(areasBefore.remain) === Math.abs(areasAfter.remain)) { } - else if(Math.abs(areasBefore.remain) > Math.abs(areasAfter.remain)) { + else if (Math.abs(areasBefore.remain) > Math.abs(areasAfter.remain)) { areasAfter = getGutterSideAbsorptionCapacity(this.unit, this.snapshot.areasAfterGutter, steppedOffset + areasBefore.remain, this.snapshot.allAreasSizePixel); } else { @@ -608,60 +608,60 @@ export class SplitComponent implements AfterViewInit, OnDestroy { } } // Areas before gutter can't absorbs all offset > need to recalculate sizes for areas after gutter. - else if(areasBefore.remain !== 0) { + else if (areasBefore.remain !== 0) { areasAfter = getGutterSideAbsorptionCapacity(this.unit, this.snapshot.areasAfterGutter, steppedOffset + areasBefore.remain, this.snapshot.allAreasSizePixel); } // Areas after gutter can't absorbs all offset > need to recalculate sizes for areas before gutter. - else if(areasAfter.remain !== 0) { + else if (areasAfter.remain !== 0) { areasBefore = getGutterSideAbsorptionCapacity(this.unit, this.snapshot.areasBeforeGutter, -(steppedOffset - areasAfter.remain), this.snapshot.allAreasSizePixel); } - if(this.unit === 'percent') { + if (this.unit === 'percent') { // Hack because of browser messing up with sizes using calc(X% - Ypx) -> el.getBoundingClientRect() // If not there, playing with gutters makes total going down to 99.99875% then 99.99286%, 99.98986%,.. const all = [...areasBefore.list, ...areasAfter.list]; const areaToReset = all.find(a => a.percentAfterAbsorption !== 0 && a.percentAfterAbsorption !== a.areaSnapshot.area.minSize && a.percentAfterAbsorption !== a.areaSnapshot.area.maxSize) - if(areaToReset) { - areaToReset.percentAfterAbsorption = this.snapshot.allInvolvedAreasSizePercent - all.filter(a => a !== areaToReset).reduce((total, a) => total+a.percentAfterAbsorption, 0); + if (areaToReset) { + areaToReset.percentAfterAbsorption = this.snapshot.allInvolvedAreasSizePercent - all.filter(a => a !== areaToReset).reduce((total, a) => total + a.percentAfterAbsorption, 0); } } // Now we know areas could absorb steppedOffset, time to really update sizes - + areasBefore.list.forEach(item => updateAreaSize(this.unit, item)); areasAfter.list.forEach(item => updateAreaSize(this.unit, item)); - + this.refreshStyleSizes(); this.notify('progress', this.snapshot.gutterNum); } private stopDragging(event?: Event): void { - if(event) { + if (event) { event.preventDefault(); event.stopPropagation(); } - - if(this.isDragging === false) { + + if (this.isDragging === false) { return; } - + this.displayedAreas.forEach(area => area.component.unlockEvents()); - - while(this.dragListeners.length > 0) { + + while (this.dragListeners.length > 0) { const fct = this.dragListeners.pop(); - if(fct) fct(); + if (fct) fct(); } - - // Warning: Have to be before "notify('end')" + + // Warning: Have to be before "notify('end')" // because "notify('end')"" can be linked to "[size]='x'" > "build()" > "stopDragging()" this.isDragging = false; // If moved from starting point, notify end - if(this.endPoint && (this.startPoint.x !== this.endPoint.x || this.startPoint.y !== this.endPoint.y)) { + if (this.endPoint && (this.startPoint.x !== this.endPoint.x || this.startPoint.y !== this.endPoint.y)) { this.notify('end', this.snapshot.gutterNum); } - + this.renderer.removeClass(this.elRef.nativeElement, 'as-dragging'); this.renderer.removeClass(this.gutterEls.toArray()[this.snapshot.gutterNum - 1].nativeElement, 'as-dragged'); this.snapshot = null; @@ -678,26 +678,26 @@ export class SplitComponent implements AfterViewInit, OnDestroy { public notify(type: 'start' | 'progress' | 'end' | 'click' | 'dblclick' | 'transitionEnd', gutterNum: number): void { const sizes = this.getVisibleAreaSizes(); - if(type === 'start') { - this.dragStart.emit({gutterNum, sizes}); + if (type === 'start') { + this.dragStart.emit({ gutterNum, sizes }); } - else if(type === 'end') { - this.dragEnd.emit({gutterNum, sizes}); + else if (type === 'end') { + this.dragEnd.emit({ gutterNum, sizes }); } - else if(type === 'click') { - this.gutterClick.emit({gutterNum, sizes}); + else if (type === 'click') { + this.gutterClick.emit({ gutterNum, sizes }); } - else if(type === 'dblclick') { - this.gutterDblClick.emit({gutterNum, sizes}); + else if (type === 'dblclick') { + this.gutterDblClick.emit({ gutterNum, sizes }); } - else if(type === 'transitionEnd') { - if(this.transitionEndSubscriber) { + else if (type === 'transitionEnd') { + if (this.transitionEndSubscriber) { this.ngZone.run(() => this.transitionEndSubscriber.next(sizes)); } } - else if(type === 'progress') { + else if (type === 'progress') { // Stay outside zone to allow users do what they want about change detection mechanism. - this.dragProgressSubject.next({gutterNum, sizes}); + this.dragProgressSubject.next({ gutterNum, sizes }); } } diff --git a/projects/angular-split/src/lib/directive/splitArea.directive.ts b/projects/angular-split/src/lib/directive/splitArea.directive.ts index db4b96b8..cdefa60a 100644 --- a/projects/angular-split/src/lib/directive/splitArea.directive.ts +++ b/projects/angular-split/src/lib/directive/splitArea.directive.ts @@ -16,7 +16,7 @@ export class SplitAreaDirective implements OnInit, OnDestroy { this.split.updateArea(this, true, false); } - + get order(): number | null { return this._order; } @@ -30,7 +30,7 @@ export class SplitAreaDirective implements OnInit, OnDestroy { this.split.updateArea(this, false, true); } - + get size(): number | null { return this._size; } @@ -44,7 +44,7 @@ export class SplitAreaDirective implements OnInit, OnDestroy { this.split.updateArea(this, false, true); } - + get minSize(): number | null { return this._minSize; } @@ -58,7 +58,7 @@ export class SplitAreaDirective implements OnInit, OnDestroy { this.split.updateArea(this, false, true); } - + get maxSize(): number | null { return this._maxSize; } @@ -72,7 +72,7 @@ export class SplitAreaDirective implements OnInit, OnDestroy { this.split.updateArea(this, false, true); } - + get lockSize(): boolean { return this._lockSize; } @@ -84,7 +84,7 @@ export class SplitAreaDirective implements OnInit, OnDestroy { @Input() set visible(v: boolean) { this._visible = getInputBoolean(v); - if(this._visible) { + if (this._visible) { this.split.showArea(this); this.renderer.removeClass(this.elRef.nativeElement, 'as-hidden'); } @@ -104,9 +104,9 @@ export class SplitAreaDirective implements OnInit, OnDestroy { private readonly lockListeners: Array = []; constructor(private ngZone: NgZone, - public elRef: ElementRef, - private renderer: Renderer2, - private split: SplitComponent) { + public elRef: ElementRef, + private renderer: Renderer2, + private split: SplitComponent) { this.renderer.addClass(this.elRef.nativeElement, 'as-split-area'); } @@ -116,7 +116,7 @@ export class SplitAreaDirective implements OnInit, OnDestroy { this.ngZone.runOutsideAngular(() => { this.transitionListener = this.renderer.listen(this.elRef.nativeElement, 'transitionend', (event: TransitionEvent) => { // Limit only flex-basis transition to trigger the event - if(event.propertyName === 'flex-basis') { + if (event.propertyName === 'flex-basis') { this.split.notify('transitionEnd', -1); } }); @@ -126,38 +126,38 @@ export class SplitAreaDirective implements OnInit, OnDestroy { public setStyleOrder(value: number): void { this.renderer.setStyle(this.elRef.nativeElement, 'order', value); } - + public setStyleFlex(grow: number, shrink: number, basis: string, isMin: boolean, isMax: boolean): void { // Need 3 separated properties to work on IE11 (https://github.com/angular/flex-layout/issues/323) this.renderer.setStyle(this.elRef.nativeElement, 'flex-grow', grow); this.renderer.setStyle(this.elRef.nativeElement, 'flex-shrink', shrink); this.renderer.setStyle(this.elRef.nativeElement, 'flex-basis', basis); - - if(isMin === true) this.renderer.addClass(this.elRef.nativeElement, 'as-min'); - else this.renderer.removeClass(this.elRef.nativeElement, 'as-min'); - - if(isMax === true) this.renderer.addClass(this.elRef.nativeElement, 'as-max'); - else this.renderer.removeClass(this.elRef.nativeElement, 'as-max'); - } - + + if (isMin === true) this.renderer.addClass(this.elRef.nativeElement, 'as-min'); + else this.renderer.removeClass(this.elRef.nativeElement, 'as-min'); + + if (isMax === true) this.renderer.addClass(this.elRef.nativeElement, 'as-max'); + else this.renderer.removeClass(this.elRef.nativeElement, 'as-max'); + } + public lockEvents(): void { this.ngZone.runOutsideAngular(() => { - this.lockListeners.push( this.renderer.listen(this.elRef.nativeElement, 'selectstart', (e: Event) => false) ); - this.lockListeners.push( this.renderer.listen(this.elRef.nativeElement, 'dragstart', (e: Event) => false) ); + this.lockListeners.push(this.renderer.listen(this.elRef.nativeElement, 'selectstart', (e: Event) => false)); + this.lockListeners.push(this.renderer.listen(this.elRef.nativeElement, 'dragstart', (e: Event) => false)); }); } public unlockEvents(): void { - while(this.lockListeners.length > 0) { + while (this.lockListeners.length > 0) { const fct = this.lockListeners.pop(); - if(fct) fct(); + if (fct) fct(); } } public ngOnDestroy(): void { this.unlockEvents(); - if(this.transitionListener) { + if (this.transitionListener) { this.transitionListener(); }