From 536cfb8b2a5d30948e7f94e431afd2444f87e4f7 Mon Sep 17 00:00:00 2001 From: Gaillard Date: Wed, 14 Nov 2018 11:47:49 +0100 Subject: [PATCH 001/307] Remove ref to TouchEvent to avoid bug edge/firefox --- .../src/lib/component/split.component.ts | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts index 3905f9b6..6845e62e 100644 --- a/projects/angular-split/src/lib/component/split.component.ts +++ b/projects/angular-split/src/lib/component/split.component.ts @@ -47,17 +47,17 @@ import { SplitAreaDirective } from '../directive/splitArea.directive'; + [order]="index*2+1" + [direction]="direction" + [useTransition]="useTransition" + [size]="gutterSize" + [color]="gutterColor" + [imageH]="gutterImageH" + [imageV]="gutterImageV" + [disabled]="disabled" + (click)="clickGutter($event, index*2+1, index+1)" + (mousedown)="startDragging($event, index*2+1, index+1)" + (touchstart)="startDragging($event, index*2+1, index+1)"> `, }) export class SplitComponent implements AfterViewInit, OnDestroy { @@ -630,17 +630,17 @@ export class SplitComponent implements AfterViewInit, OnDestroy { function getPointFromEvent(event: MouseEvent | TouchEvent): IPoint { // TouchEvent - if(event instanceof TouchEvent) { + if(( event).touches !== undefined && ( event).touches.length > 0) { return { - x: event.touches[0].pageX, - y: event.touches[0].pageY, + x: ( event).touches[0].pageX, + y: ( event).touches[0].pageY, }; } // MouseEvent - else if(event.pageX !== undefined && event.pageY !== undefined) { + else if(( event).pageX !== undefined && ( event).pageY !== undefined) { return { - x: event.pageX, - y: event.pageY, + x: ( event).pageX, + y: ( event).pageY, }; } return null; From 99a40630c3a974d375278f12ce36c8ee96e5d31e Mon Sep 17 00:00:00 2001 From: Gaillard Date: Wed, 14 Nov 2018 12:15:11 +0100 Subject: [PATCH 002/307] version 1.0.3 which fix critical bug --- CHANGELOG.md | 6 ++++++ projects/angular-split/package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8ae40f9d..42b4bd46 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,10 @@ + +# 1.0.3 (2018-11-14) + +* **Bug:** Remove reference to `TouchEvent` which cause error on Firefox & IE/Edge. Introduced in `1.0.1` but was there (before)[https://github.com/bertrandg/angular-split/blob/c71b7cf10a66a698820e91962d06cf35b726edc2/projects/angular-split/src/lib/component/split.component.ts#L478] (less frequent). + + # 1.0.2 (2018-11-13) diff --git a/projects/angular-split/package.json b/projects/angular-split/package.json index 43ad85b9..d94b7640 100644 --- a/projects/angular-split/package.json +++ b/projects/angular-split/package.json @@ -1,6 +1,6 @@ { "name": "angular-split", - "version": "1.0.2", + "version": "1.0.3", "description": "Angular UI library used to split views and to allow dragging to resize the split areas using CSS flexbox layout.", "author": "bertrandg", "repository": { From 575d89be3daf8440d6a7a06e4f92822f5c425a9a Mon Sep 17 00:00:00 2001 From: bertrandg Date: Wed, 14 Nov 2018 12:17:04 +0100 Subject: [PATCH 003/307] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 42b4bd46..852e9555 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ # 1.0.3 (2018-11-14) -* **Bug:** Remove reference to `TouchEvent` which cause error on Firefox & IE/Edge. Introduced in `1.0.1` but was there (before)[https://github.com/bertrandg/angular-split/blob/c71b7cf10a66a698820e91962d06cf35b726edc2/projects/angular-split/src/lib/component/split.component.ts#L478] (less frequent). +* **Bug:** Remove reference to `TouchEvent` which cause error on Firefox & IE/Edge. Introduced in `1.0.1` but was there [before](https://github.com/bertrandg/angular-split/blob/c71b7cf10a66a698820e91962d06cf35b726edc2/projects/angular-split/src/lib/component/split.component.ts#L478) (less frequent). From 7f9f671251b7b30372ca765604f7184bebe2b7bb Mon Sep 17 00:00:00 2001 From: bertrandg Date: Wed, 14 Nov 2018 12:25:53 +0100 Subject: [PATCH 004/307] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 852e9555..01f813c4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ # 1.0.3 (2018-11-14) -* **Bug:** Remove reference to `TouchEvent` which cause error on Firefox & IE/Edge. Introduced in `1.0.1` but was there [before](https://github.com/bertrandg/angular-split/blob/c71b7cf10a66a698820e91962d06cf35b726edc2/projects/angular-split/src/lib/component/split.component.ts#L478) (less frequent). +* **Critiqual bug:** Remove reference to `TouchEvent` which cause error on Firefox & IE/Edge. Introduced in `1.0.1` but was there [before](https://github.com/bertrandg/angular-split/blob/c71b7cf10a66a698820e91962d06cf35b726edc2/projects/angular-split/src/lib/component/split.component.ts#L478) (less frequent). From dfc49fd29408e88c227a4c678dc9def4a307e909 Mon Sep 17 00:00:00 2001 From: Gaillard Date: Wed, 14 Nov 2018 15:38:56 +0100 Subject: [PATCH 005/307] npm script: build library before building website --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3d194c3c..943f384e 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "ng": "ng", "start": "ng serve", "lint": "ng lint", - "app_build": "ng build --prod --base-href /angular-split/", + "app_build": "npm run lib_build && ng build --prod --base-href /angular-split/", "app_analyze": "npm run lib_build && ng build --prod --stats-json && webpack-bundle-analyzer dist/angular-split-app/stats.json", "lib_build": "ng build angular-split", "lib_tgz": "npm run lib_build && cd dist/angular-split && npm pack", From eea32a73b2d07cc034a4ac6218b23efa74e1ad0c Mon Sep 17 00:00:00 2001 From: bertrandg Date: Wed, 14 Nov 2018 22:06:43 +0100 Subject: [PATCH 006/307] add cypress tests on custom gutter style page --- cypress/integration/5.style.spec.js | 32 +++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 cypress/integration/5.style.spec.js diff --git a/cypress/integration/5.style.spec.js b/cypress/integration/5.style.spec.js new file mode 100644 index 00000000..702c8483 --- /dev/null +++ b/cypress/integration/5.style.spec.js @@ -0,0 +1,32 @@ +/// + +import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils' + + +context('Custom split style example page tests', () => { + const W = 1070; + const H = 300; + const GUTTER = 30; + const COLOR = 'rgb(255, 255, 0)'; + const IMGH = `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAjCAYAAABl/XGVAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANkSURBVEiJrddfaJdlFAfwzztda6tdZNo/pZstWlmhSy8siiwhGfQP3IWRIGUEJRgFQXTbZRBeFBhlBv25iFD6s4zCqI0GaWXEhNK5tTCUsJGUWQtOF++zeH7vfnO/3/JcPef7nOd8z3ne5znPeWlCgi3BeHAieDoomlnfDNGy4HBwabAoGAieOReOW4Lu4IIMuyd4LdMXBceCJY36bamXAb7C2/g+eC5YgFPonLYr+DXZ3J/WtQZ9wfrgvEazejHYmsbtwa7g1eDC4OegPbNdGXwdtAXDwVvBm8Fg0DpnZliMsRT9n9iCbmzAPtybZfeNMutnMVawsSgz/QmbGsnsoeD1CrYs+DHYFuytzD0RTAWPZtiGYGcjZK3BgaC/gvcFI+nYL60EEsGTGbYq+CRYF7wQPBWcPxthV8qkq4K/FJwJNmdYWyLbnmGXBKeD74L7gpeDV86WYX+wP2jLsDuS460V26lgT6YXiWxV0tuDk/UOCCjKYz2OuzN4EL+ho2L+Oy6qXe54wYGkT1H/NOayG32Zh7/xkez4JzmN/Zl+PX7J9CsxMRfZXtwZtUG9X4fsD3yW6bfgaKZ3YfSsZKlKjEp7n2RA9h2TnMJQpt+sNtPuOcky5+uzAE5ipGIzVjCZ6V3YQXlY8DDea4RsBFdVsOHpQdriLzL9Guwqyq2lvK/HC4YEPcGHwQdR7nWNBL3BpxWsJRsvqLwOj0/XxTR3KOidnvw42BTcFoxWCYOlwaEGdmDaviMbb47yCv0HTGaRrA2+rCy+Lvi2UbJs3ZJgLOipIasYHQmuyPT+4I15kO0OtlXBo8HFFaPbg4XBAym6m+ZBdiTK56oG3BusyfTH0kcdD3YGy5slSn5ORPXFDrbnVTxhq/Ns50HUGeUDWiML8QOuzsGi9vbPR1aoc4JblIV1Y6TG5RzJGtnFr5H02g4HO2bs8zwk2BOsO5tBWyIbCi7/H0RFlP1kZyPGD6brMKN0NUjWE2Xf2fCCG1N0i+e2nrH2keD5enN1q35RRvYu7mqWDLfi84bJkgxi9TzIenGwWbIJWX/YhFyGY82SjeHaqNOzzybBSkymxqg5SaXsYJQt+fIo+/p8viNYkd6td4KJYO1s/ub8c0wVvx83KJ/8FuXF/wdncFhZmgawr+Cv2Xz9Cy1ParntgE8FAAAAAElFTkSuQmCC")`; + const IMGV = `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAdCAYAAAAgqdWEAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAOxSURBVEiJtddtzNdTGAfwz7+6y91qKpaGF0UjY8JmrIw1sdj0YFMeMzYLJWaUmac1bfQiw0hkkjErTy+whrARm0zztHmYp3mayjyFkny9+J3bfv7uf3e3/p03v3Od872u8z3Xua7rnB9tamFQmB1eDhvC7+G7sCZcHw5u11o9ETkmPBBODgeGjtBZ+qeEZWFjeCKM2Z1ExodN4eKwPBzdAtc/XB6+DbPbsfCwcEI5jqXhvfBLeCacFfrvhI2R4f1wW2jU5xotFPrhMIwt38PLd198ibexHi9hbYM/ermp4ViD1Q2ubgU6LjwafgwJH4cHw5XhxDCsN4v2QGifEuDTmic6wpJC4KewIBzSwkiPR9ELQqeH7/+1ybCoEFka9qqNd4ZTwx0lZW8Pg9tFpqzxdLilSzggbA831gATwqrC+vkwP4xuJ4naWhPD5jBIuDG8HfqGGaW/KkwJA5sURxV822pFaISPwpmNsBq/YgS2YVaDD+tgnIQ5GIXzG7y1iwQGNNhak+9Dp/BpiZcVoW8NMDjMDR+UenJuSfldbs0ZFC4K65XsWd+1UBgabi3p/UqYXC9O4YhwXbghdPxPMvPCkTV5fPhFqaCTyuBp4ZvwQji2ycDk8E54N8xpjqdekrkszKrJR4Ytwlep7o1zwp+p7o+6J4aEx8I9qarwLrfimcU1eVL4vB9+wBDcjXkNbq+B9sMjuKJRlf92tYH4syaPwzrhs+KNN5o8MrSk+fFtJNFle3mYX/qdJYlmCJ8UQjObFFaEle0mUmx/HMaFPqneQe+GDiVYE/avgSeEv8IRO2m8IxwVLgn3hyk7wB4Tfk715Fib6lV4aNfkveHzJoVnw3M9LD41LA6vht/Khr4MN4XOFnqN2ua/CHemepb8A7gmrK3JI4pXprYwODJV+V4TFtZInB36tNpA0V0YtpQC+t+3VJge3qzJ0wrrvt1gO8K6cs57hNfDi6nd9C1IDC0xuK3VJruAo4snpoc9w5Ph2hbY21JdDQPCXeWI9tiB7WHF8xtSVfTWRGpKTxV3p7hxeDeYS0tsjC1BuDHs08LeQYXs5lTPkEWtsN0pd4bVhczD3cxflao6n1fkh8KCbnBjUv2ObE91r81sFcw9Edq7kJlaGxseVoat4cLa+DvN6ZvqV2VLOcaJvSbQDaGvS0BOS3UrbyqZM74J91q4uSZfUDby+I5iqLdkJqSqyNtTPSvmhgHd4OaWzFiWqtZsLTVjh6m9W1qqMr6kBPRH4Yx22P0bNcolauCjiTYAAAAASUVORK5CYII=")` + + beforeEach(() => { + cy.visit('/#/examples/custom-gutter-style') + }) + + it('Veriy gutter size color and horizontal image', () => { + checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [312, 728]); + + cy.get('as-split > as-split-gutter').should('have.css', 'background-color', COLOR); + cy.get('as-split > as-split-gutter').should('have.css', 'background-image', IMGH); + }) + + it('Change direction', () => { + cy.get('.btns > .btn').click(); + checkSplitDirAndSizes('as-split', 'vertical', W, H, GUTTER, [81, 189]); + + cy.get('as-split > as-split-gutter').should('have.css', 'background-color', COLOR); + cy.get('as-split > as-split-gutter').should('have.css', 'background-image', IMGV); + }) +}) From 6784a2e212d8d13515e9633329991c5d5fdd7d29 Mon Sep 17 00:00:00 2001 From: Gaillard Date: Thu, 15 Nov 2018 11:50:26 +0100 Subject: [PATCH 007/307] website: fix example source url --- src/app/data/listExamples.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/data/listExamples.ts b/src/app/data/listExamples.ts index 1bdba35c..cc92a59b 100644 --- a/src/app/data/listExamples.ts +++ b/src/app/data/listExamples.ts @@ -11,7 +11,7 @@ import { DirRtlComponent } from '../component/examples/dirRtl.route.component'; import { WorkspaceLocalstorageComponent } from '../component/examples/workspaceLocalstorage.route.component'; import { ExampleEnum } from './enum' -const srcUrlBase = 'https://github.com/bertrandg/angular-split/blob/master/src/app/examples/'; +const srcUrlBase = 'https://github.com/bertrandg/angular-split/blob/master/src/app/component/examples/'; export const examples: Array = [ From 896f923896029750733c31806d6fe647ebcac6d3 Mon Sep 17 00:00:00 2001 From: Gaillard Date: Thu, 15 Nov 2018 11:51:30 +0100 Subject: [PATCH 008/307] Remove currently unused minSize property --- .../src/lib/directive/splitArea.directive.ts | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/projects/angular-split/src/lib/directive/splitArea.directive.ts b/projects/angular-split/src/lib/directive/splitArea.directive.ts index 1e5257d2..f757cb20 100644 --- a/projects/angular-split/src/lib/directive/splitArea.directive.ts +++ b/projects/angular-split/src/lib/directive/splitArea.directive.ts @@ -37,21 +37,6 @@ export class SplitAreaDirective implements OnInit, OnDestroy { //// - private _minSize: number = 0; - - @Input() set minSize(v: number) { - v = Number(v); - this._minSize = (!isNaN(v) && v > 0 && v < 100) ? v/100 : 0; - - this.split.updateArea(this, false, true); - } - - get minSize(): number { - return this._minSize; - } - - //// - private _visible: boolean = true; @Input() set visible(v: boolean) { @@ -82,6 +67,7 @@ export class SplitAreaDirective implements OnInit, OnDestroy { public ngOnInit(): void { this.split.addArea(this); + this.split.updateArea(this, true, true); this.renderer.setStyle(this.elRef.nativeElement, 'flex-grow', '0'); this.renderer.setStyle(this.elRef.nativeElement, 'flex-shrink', '0'); From 49795155d904463fb077a664e413abfeed6917e1 Mon Sep 17 00:00:00 2001 From: Gaillard Date: Thu, 15 Nov 2018 12:10:45 +0100 Subject: [PATCH 009/307] Apply css flex-direction property differently on to fix Edge issue (#125) --- .../angular-split/src/lib/component/split.component.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts index 6845e62e..0e3bb4ce 100644 --- a/projects/angular-split/src/lib/component/split.component.ts +++ b/projects/angular-split/src/lib/component/split.component.ts @@ -68,6 +68,10 @@ export class SplitComponent implements AfterViewInit, OnDestroy { v = (v === 'vertical') ? 'vertical' : 'horizontal'; this._direction = v; + // ngAfterViewInit not called but DOM element available + // Do this because using @HostBinding('style.flex-direction') cause Edge bug () + this.renderer.setStyle(this.elRef.nativeElement, 'flex-direction', (v === 'horizontal') ? 'row' : 'column'); + [...this.displayedAreas, ...this.hidedAreas].forEach(area => { area.comp.setStyleVisibleAndDir(area.comp.visible, this.isDragging, this.direction); }); @@ -223,10 +227,6 @@ export class SplitComponent implements AfterViewInit, OnDestroy { debounceTime(20) ); - @HostBinding('style.flex-direction') get cssFlexdirection() { - return (this.direction === 'horizontal') ? 'row' : 'column'; - } - @HostBinding('style.width') get cssWidth() { return this.width ? `${ this.width }px` : '100%'; } @@ -496,6 +496,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy { } private dragEvent(event: MouseEvent | TouchEvent, areaA: IArea, areaB: IArea): void { + event.preventDefault(); + if(!this.isDragging) { return; } From b8ad48bd468ea7e673a3e9dcb8e5f69ee4991f0c Mon Sep 17 00:00:00 2001 From: Gaillard Date: Thu, 15 Nov 2018 12:18:39 +0100 Subject: [PATCH 010/307] Revert testing code line added for test --- projects/angular-split/src/lib/directive/splitArea.directive.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/projects/angular-split/src/lib/directive/splitArea.directive.ts b/projects/angular-split/src/lib/directive/splitArea.directive.ts index f757cb20..dabc8399 100644 --- a/projects/angular-split/src/lib/directive/splitArea.directive.ts +++ b/projects/angular-split/src/lib/directive/splitArea.directive.ts @@ -67,7 +67,6 @@ export class SplitAreaDirective implements OnInit, OnDestroy { public ngOnInit(): void { this.split.addArea(this); - this.split.updateArea(this, true, true); this.renderer.setStyle(this.elRef.nativeElement, 'flex-grow', '0'); this.renderer.setStyle(this.elRef.nativeElement, 'flex-shrink', '0'); From 4a3c475d922c26fac875b375a1b9449c9a384707 Mon Sep 17 00:00:00 2001 From: Gaillard Date: Thu, 15 Nov 2018 15:07:59 +0100 Subject: [PATCH 011/307] version 1.0.4 --- projects/angular-split/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/angular-split/package.json b/projects/angular-split/package.json index d94b7640..eb274a3f 100644 --- a/projects/angular-split/package.json +++ b/projects/angular-split/package.json @@ -1,6 +1,6 @@ { "name": "angular-split", - "version": "1.0.3", + "version": "1.0.4", "description": "Angular UI library used to split views and to allow dragging to resize the split areas using CSS flexbox layout.", "author": "bertrandg", "repository": { From 2c1bd9b98ac311fd9a554a798ccd7961f714c63a Mon Sep 17 00:00:00 2001 From: Gaillard Date: Thu, 15 Nov 2018 15:19:19 +0100 Subject: [PATCH 012/307] version 1.0.4 --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 01f813c4..125a09fc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,10 @@ + +# 1.0.4 (2018-11-15) + +* **Bug:** Fix Edge first rendering issue with nested split by applying css flex-direction property differently on `` [#25](https://github.com/bertrandg/angular-split/issues/125). + + # 1.0.3 (2018-11-14) From d4b0417b1dead335f5e34e3822c8687430aee9e4 Mon Sep 17 00:00:00 2001 From: bertrandg Date: Thu, 15 Nov 2018 15:22:47 +0100 Subject: [PATCH 013/307] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 125a09fc..66d1e7fe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ # 1.0.4 (2018-11-15) -* **Bug:** Fix Edge first rendering issue with nested split by applying css flex-direction property differently on `` [#25](https://github.com/bertrandg/angular-split/issues/125). +* **Bug:** Fix Edge first rendering issue with nested split by applying css flex-direction property differently on `` [#125](https://github.com/bertrandg/angular-split/issues/125). From ae42079f4b196959345bc552599c446e1833b777 Mon Sep 17 00:00:00 2001 From: Gaillard Date: Thu, 15 Nov 2018 15:33:22 +0100 Subject: [PATCH 014/307] add missing lodash dep to website package.json --- package-lock.json | 31 ++++++++----------------------- package.json | 9 +++++---- 2 files changed, 13 insertions(+), 27 deletions(-) diff --git a/package-lock.json b/package-lock.json index c783d553..5ac91076 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4852,14 +4852,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -4874,20 +4872,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -5004,8 +4999,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -5017,7 +5011,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5032,7 +5025,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -5040,14 +5032,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -5066,7 +5056,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -5147,8 +5136,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -5160,7 +5148,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -5282,7 +5269,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7413,8 +7399,7 @@ "lodash": { "version": "4.17.11", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", - "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", - "dev": true + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==" }, "lodash.assign": { "version": "4.2.0", diff --git a/package.json b/package.json index 943f384e..a2129a77 100644 --- a/package.json +++ b/package.json @@ -27,12 +27,13 @@ "@angular/platform-browser": "7.0.3", "@angular/platform-browser-dynamic": "7.0.3", "@angular/router": "7.0.3", - "core-js": "2.5.7", - "rxjs": "6.3.3", - "zone.js": "0.8.26", "bootstrap": "4.1.3", + "core-js": "2.5.7", + "lodash": "4.17.11", + "marked": "0.5.1", "ngx-bootstrap": "3.1.1", - "marked": "0.5.1" + "rxjs": "6.3.3", + "zone.js": "0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "0.10.5", From 8fe5751ba5a1a1e6552e7d4463023e3ab0111122 Mon Sep 17 00:00:00 2001 From: Gaillard Date: Thu, 15 Nov 2018 15:59:24 +0100 Subject: [PATCH 015/307] add es7 reflect polyfill to allow compile website github sources directly on stackblitz! --- src/polyfills.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/polyfills.ts b/src/polyfills.ts index 1bdb5041..f2a9f303 100644 --- a/src/polyfills.ts +++ b/src/polyfills.ts @@ -78,3 +78,6 @@ import 'zone.js/dist/zone'; // Included with Angular CLI. /*************************************************************************************************** * APPLICATION IMPORTS */ + +// Needed to allow access directly on https://stackblitz.com/github/bertrandg/angular-split +import 'core-js/es7/reflect'; \ No newline at end of file From 736c09288dd7bd1c41140499767f05b4d79c8900 Mon Sep 17 00:00:00 2001 From: Gaillard Date: Thu, 15 Nov 2018 16:44:04 +0100 Subject: [PATCH 016/307] changelog update --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 66d1e7fe..c3efb08c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,7 +8,7 @@ # 1.0.3 (2018-11-14) -* **Critiqual bug:** Remove reference to `TouchEvent` which cause error on Firefox & IE/Edge. Introduced in `1.0.1` but was there [before](https://github.com/bertrandg/angular-split/blob/c71b7cf10a66a698820e91962d06cf35b726edc2/projects/angular-split/src/lib/component/split.component.ts#L478) (less frequent). +* **Critiqual bug:** Remove reference to `TouchEvent` which cause error on Firefox & IE/Edge. Introduced in `1.0.1` but was there [before](https://github.com/bertrandg/angular-split/blob/c71b7cf10a66a698820e91962d06cf35b726edc2/projects/angular-split/src/lib/component/split.component.ts#L478) on mobile browser other than chromium based. From 23a67c68c65e88b2b131a209a77ae20b0c9fb0ef Mon Sep 17 00:00:00 2001 From: Gaillard Date: Fri, 16 Nov 2018 18:48:45 +0100 Subject: [PATCH 017/307] refactor the way styles are applied --- .../src/lib/component/split.component.scss | 89 ++++++- .../src/lib/component/split.component.ts | 223 +++++------------- .../src/lib/directive/splitArea.directive.ts | 51 +--- .../lib/directive/splitGutter.directive.ts | 148 ------------ projects/angular-split/src/lib/module.ts | 2 - 5 files changed, 133 insertions(+), 380 deletions(-) delete mode 100644 projects/angular-split/src/lib/directive/splitGutter.directive.ts diff --git a/projects/angular-split/src/lib/component/split.component.scss b/projects/angular-split/src/lib/component/split.component.scss index e5f58fff..a2880075 100644 --- a/projects/angular-split/src/lib/component/split.component.scss +++ b/projects/angular-split/src/lib/component/split.component.scss @@ -5,20 +5,85 @@ justify-content: flex-start; align-items: stretch; overflow: hidden; - /* - Important to keep following rules even if overrided later by 'HostBinding' - because if [width] & [height] not provided, when build() is executed, - 'HostBinding' hasn't been applied yet so code: - this.elRef.nativeElement["offsetHeight"] gives wrong value! - */ width: 100%; height: 100%; -} + + + & > .as-split-gutter { + flex-grow: 0; + flex-shrink: 0; + background-position: center center; + background-repeat: no-repeat; + background-color: #eeeeee; + } + + & > as-split-area { + flex-grow: 0; + flex-shrink: 0; + overflow-x: hidden; + overflow-y: auto; + + &.hided { + flex-basis: 0; + overflow-x: hidden; + overflow-y: hidden; + } + } + + + &.horizontal { + flex-direction: row; + + & > .as-split-gutter { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=="); + cursor: col-resize; + + // Fix safari bug about gutter height when direction is horizontal + height: 100%; + } + + & > as-split-area { + height: 100%; + } + } + + &.vertical { + flex-direction: column; + + & > .as-split-gutter { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC"); + cursor: row-resize; + + width: 100%; + } + + & > as-split-area { + width: 100%; + + &.hided { + max-width: 0; + } + } + } + + &.disabled { + + & > .as-split-gutter { + background-color: ''; + cursor: default; + } + } + + &.transition:not(.dragging) { + + & > .as-split-gutter { + transition: flex-basis 0.3s; + } + + & > as-split-area { + transition: flex-basis 0.3s; + } -as-split-gutter { - flex-grow: 0; - flex-shrink: 0; - background-position: center center; - background-repeat: no-repeat; + } } \ 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 0e3bb4ce..ddec0f61 100644 --- a/projects/angular-split/src/lib/component/split.component.ts +++ b/projects/angular-split/src/lib/component/split.component.ts @@ -1,5 +1,4 @@ -import { Component, ChangeDetectorRef, Input, Output, HostBinding, ChangeDetectionStrategy, - EventEmitter, Renderer2, OnDestroy, ElementRef, AfterViewInit, NgZone } from '@angular/core'; +import { Component, ChangeDetectorRef, Input, Output, HostBinding, ChangeDetectionStrategy, EventEmitter, Renderer2, OnDestroy, ElementRef, NgZone } from '@angular/core'; import { Subject, Observable } from 'rxjs'; import { debounceTime } from 'rxjs/operators'; @@ -46,21 +45,16 @@ import { SplitAreaDirective } from '../directive/splitArea.directive'; template: ` - +
`, }) -export class SplitComponent implements AfterViewInit, OnDestroy { +export class SplitComponent implements OnDestroy { private _direction: 'horizontal' | 'vertical' = 'horizontal'; @@ -68,13 +62,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { v = (v === 'vertical') ? 'vertical' : 'horizontal'; this._direction = v; - // ngAfterViewInit not called but DOM element available - // Do this because using @HostBinding('style.flex-direction') cause Edge bug () - this.renderer.setStyle(this.elRef.nativeElement, 'flex-direction', (v === 'horizontal') ? 'row' : 'column'); - - [...this.displayedAreas, ...this.hidedAreas].forEach(area => { - area.comp.setStyleVisibleAndDir(area.comp.visible, this.isDragging, this.direction); - }); + this.renderer.addClass(this.elRef.nativeElement, this._direction); this.build(false, false); } @@ -90,6 +78,9 @@ export class SplitComponent implements AfterViewInit, OnDestroy { @Input() set useTransition(v: boolean) { v = (typeof(v) === 'boolean') ? v : (v === 'false' ? false : true); this._useTransition = v; + + if(v) this.renderer.addClass(this.elRef.nativeElement, 'transition'); + else this.renderer.removeClass(this.elRef.nativeElement, 'transition'); } get useTransition(): boolean { @@ -104,8 +95,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy { v = (typeof(v) === 'boolean') ? v : (v === 'false' ? false : true); this._disabled = v; - // Force repaint if modified from TS class (instead of the template) - this.cdRef.markForCheck(); + if(v) this.renderer.addClass(this.elRef.nativeElement, 'disabled'); + else this.renderer.removeClass(this.elRef.nativeElement, 'disabled'); } get disabled(): boolean { @@ -114,36 +105,6 @@ export class SplitComponent implements AfterViewInit, OnDestroy { //// - private _width: number | null = null; - - @Input() set width(v: number | null) { - v = Number(v); - this._width = (!isNaN(v) && v > 0) ? v : null; - - this.build(false, false); - } - - get width(): number | null { - return this._width; - } - - //// - - private _height: number | null = null; - - @Input() set height(v: number | null) { - v = Number(v); - this._height = (!isNaN(v) && v > 0) ? v : null; - - this.build(false, false); - } - - get height(): number | null { - return this._height; - } - - //// - private _gutterSize: number = 11; @Input() set gutterSize(v: number) { @@ -156,51 +117,6 @@ export class SplitComponent implements AfterViewInit, OnDestroy { get gutterSize(): number { return this._gutterSize; } - - //// - - private _gutterColor: string = ''; - - @Input() set gutterColor(v: string) { - this._gutterColor = (typeof v === 'string' && v !== '') ? v : ''; - - // Force repaint if modified from TS class (instead of the template) - this.cdRef.markForCheck(); - } - - get gutterColor(): string { - return this._gutterColor; - } - - //// - - private _gutterImageH: string = ''; - - @Input() set gutterImageH(v: string) { - this._gutterImageH = (typeof v === 'string' && v !== '') ? v : ''; - - // Force repaint if modified from TS class (instead of the template) - this.cdRef.markForCheck(); - } - - get gutterImageH(): string { - return this._gutterImageH; - } - - //// - - private _gutterImageV: string = ''; - - @Input() set gutterImageV(v: string) { - this._gutterImageV = (typeof v === 'string' && v !== '') ? v : ''; - - // Force repaint if modified from TS class (instead of the template) - this.cdRef.markForCheck(); - } - - get gutterImageV(): string { - return this._gutterImageV; - } //// @@ -209,6 +125,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy { @Input() set dir(v: 'ltr' | 'rtl') { v = (v === 'rtl') ? 'rtl' : 'ltr'; this._dir = v; + + this.renderer.setAttribute(this.elRef.nativeElement, 'dir', this._dir); } get dir(): 'ltr' | 'rtl' { @@ -227,14 +145,6 @@ export class SplitComponent implements AfterViewInit, OnDestroy { debounceTime(20) ); - @HostBinding('style.width') get cssWidth() { - return this.width ? `${ this.width }px` : '100%'; - } - - @HostBinding('style.height') get cssHeight() { - return this.height ? `${ this.height }px` : '100%'; - } - @HostBinding('style.min-width') get cssMinwidth() { return (this.direction === 'horizontal') ? `${ this.getNbGutters() * this.gutterSize }px` : null; } @@ -243,7 +153,6 @@ export class SplitComponent implements AfterViewInit, OnDestroy { return (this.direction === 'vertical') ? `${ this.getNbGutters() * this.gutterSize }px` : null; } - public isViewInitialized: boolean = false; private isDragging: boolean = false; private currentGutterNum: number = 0; private startPoint: IPoint | null = null; @@ -266,10 +175,6 @@ export class SplitComponent implements AfterViewInit, OnDestroy { private cdRef: ChangeDetectorRef, private renderer: Renderer2) {} - public ngAfterViewInit() { - this.isViewInitialized = true; - } - private getNbGutters(): number { return this.displayedAreas.length - 1; } @@ -286,10 +191,9 @@ export class SplitComponent implements AfterViewInit, OnDestroy { } else { this.hidedAreas.push(newArea); + comp.setStyleFlexbasis('0'); } - comp.setStyleVisibleAndDir(comp.visible, this.isDragging, this.direction); - this.build(true, true); } @@ -309,40 +213,39 @@ export class SplitComponent implements AfterViewInit, OnDestroy { public updateArea(comp: SplitAreaDirective, resetOrders: boolean, resetSizes: boolean): void { // Only refresh if area is displayed (No need to check inside 'hidedAreas') const item = this.displayedAreas.find(a => a.comp === comp); - - if(item) { - this.build(resetOrders, resetSizes); + if(!item) { + return; } + + this.build(resetOrders, resetSizes); } public showArea(comp: SplitAreaDirective): void { const area = this.hidedAreas.find(a => a.comp === comp); + if(!area) { + return; + } - if(area) { - comp.setStyleVisibleAndDir(comp.visible, this.isDragging, this.direction); - - const areas = this.hidedAreas.splice(this.hidedAreas.indexOf(area), 1); - this.displayedAreas.push(...areas); + const areas = this.hidedAreas.splice(this.hidedAreas.indexOf(area), 1); + this.displayedAreas.push(...areas); - this.build(true, true); - } + this.build(true, true); } public hideArea(comp: SplitAreaDirective): void { const area = this.displayedAreas.find(a => a.comp === comp); + if(!area) { + return; + } - if(area) { - comp.setStyleVisibleAndDir(comp.visible, this.isDragging, this.direction); - - const areas = this.displayedAreas.splice(this.displayedAreas.indexOf(area), 1); - areas.forEach(area => { - area.order = 0; - area.size = 0; - }) - this.hidedAreas.push(...areas); + const areas = this.displayedAreas.splice(this.displayedAreas.indexOf(area), 1); + areas.forEach(area => { + area.order = 0; + area.size = 0; + }) + this.hidedAreas.push(...areas); - this.build(true, true); - } + this.build(true, true); } private build(resetOrders: boolean, resetSizes: boolean): void { @@ -395,13 +298,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { let percentToDispatch = 0; // Get container pixel size - let containerSizePixel = this.getNbGutters() * this.gutterSize; - if(this.direction === 'horizontal') { - containerSizePixel = this.width ? this.width : this.elRef.nativeElement['offsetWidth']; - } - else { - containerSizePixel = this.height ? this.height : this.elRef.nativeElement['offsetHeight']; - } + const containerSizePixel = this.elRef.nativeElement[(this.direction === 'horizontal') ? 'offsetWidth' : 'offsetHeight']; this.displayedAreas.forEach(area => { if(area.size * containerSizePixel < this.gutterSize) { @@ -436,7 +333,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { const sumGutterSize = this.getNbGutters() * this.gutterSize; this.displayedAreas.forEach(area => { - area.comp.setStyleFlexbasis(`calc( ${ area.size * 100 }% - ${ area.size * sumGutterSize }px )`, this.isDragging); + area.comp.setStyleFlexbasis(`calc( ${ area.size * 100 }% - ${ area.size * sumGutterSize }px )`); }); } @@ -449,14 +346,11 @@ export class SplitComponent implements AfterViewInit, OnDestroy { } public startDragging(startEvent: MouseEvent | TouchEvent, gutterOrder: number, gutterNum: number): void { + console.log('startDragging', startEvent) startEvent.preventDefault(); this.startPoint = getPointFromEvent(startEvent); - if(!this.startPoint) { - return; - } - - if(this.disabled) { + if(!this.startPoint || this.disabled) { return; } @@ -491,11 +385,12 @@ export class SplitComponent implements AfterViewInit, OnDestroy { areaB.comp.lockEvents(); this.isDragging = true; - + this.renderer.addClass(this.elRef.nativeElement, 'dragging'); this.notify('start'); } private dragEvent(event: MouseEvent | TouchEvent, areaA: IArea, areaB: IArea): void { + console.time('dragEvent') event.preventDefault(); if(!this.isDragging) { @@ -507,11 +402,6 @@ export class SplitComponent implements AfterViewInit, OnDestroy { return; } - this.drag(areaA, areaB); - } - - private drag(areaA: IArea, areaB: IArea): void { - // ยค AREAS SIZE PIXEL const devicePixelRatio = /*window.devicePixelRatio ||*/ 1; @@ -569,6 +459,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { if(this.startPoint.x !== this.endPoint.x || this.startPoint.y !== this.endPoint.y) { this.notify('progress'); } + console.timeEnd('dragEvent') } private stopDragging(): void { @@ -590,8 +481,9 @@ export class SplitComponent implements AfterViewInit, OnDestroy { if(this.endPoint && (this.startPoint.x !== this.endPoint.x || this.startPoint.y !== this.endPoint.y)) { this.notify('end'); } - + this.isDragging = false; + this.renderer.removeClass(this.elRef.nativeElement, 'dragging'); // Needed to let (click)="clickGutter(...)" event run and verify if mouse moved or not setTimeout(() => { @@ -602,24 +494,15 @@ export class SplitComponent implements AfterViewInit, OnDestroy { public notify(type: 'start' | 'progress' | 'end' | 'click' | 'transitionEnd'): void { - const areasSize: Array = this.displayedAreas.map(a => a.size * 100); + const sizes: Array = this.displayedAreas.map(a => a.size * 100); this.ngZone.run(() => { switch(type) { - case 'start': - return this.dragStart.emit({gutterNum: this.currentGutterNum, sizes: areasSize}); - - case 'progress': - return this.dragProgress.emit({gutterNum: this.currentGutterNum, sizes: areasSize}); - - case 'end': - return this.dragEnd.emit({gutterNum: this.currentGutterNum, sizes: areasSize}); - - case 'click': - return this.gutterClick.emit({gutterNum: this.currentGutterNum, sizes: areasSize}); - - case 'transitionEnd': - return this.transitionEndInternal.next(areasSize); + case 'start': return this.dragStart.emit({gutterNum: this.currentGutterNum, sizes}); + case 'progress': return this.dragProgress.emit({gutterNum: this.currentGutterNum, sizes}); + case 'end': return this.dragEnd.emit({gutterNum: this.currentGutterNum, sizes}); + case 'click': return this.gutterClick.emit({gutterNum: this.currentGutterNum, sizes}); + case 'transitionEnd': return this.transitionEndInternal.next(sizes); } }); } diff --git a/projects/angular-split/src/lib/directive/splitArea.directive.ts b/projects/angular-split/src/lib/directive/splitArea.directive.ts index dabc8399..ebf10c49 100644 --- a/projects/angular-split/src/lib/directive/splitArea.directive.ts +++ b/projects/angular-split/src/lib/directive/splitArea.directive.ts @@ -45,9 +45,11 @@ export class SplitAreaDirective implements OnInit, OnDestroy { if(this.visible) { this.split.showArea(this); + this.renderer.removeClass(this.elRef.nativeElement, 'hided'); } else { this.split.hideArea(this); + this.renderer.addClass(this.elRef.nativeElement, 'hided'); } } @@ -68,9 +70,6 @@ export class SplitAreaDirective implements OnInit, OnDestroy { public ngOnInit(): void { this.split.addArea(this); - this.renderer.setStyle(this.elRef.nativeElement, 'flex-grow', '0'); - this.renderer.setStyle(this.elRef.nativeElement, 'flex-shrink', '0'); - this.ngZone.runOutsideAngular(() => { this.transitionListener = this.renderer.listen(this.elRef.nativeElement, 'transitionend', (e: TransitionEvent) => this.onTransitionEnd(e)); }); @@ -80,58 +79,14 @@ export class SplitAreaDirective implements OnInit, OnDestroy { return this.elRef.nativeElement[prop]; } - public setStyleVisibleAndDir(isVisible: boolean, isDragging: boolean, direction: 'horizontal' | 'vertical'): void { - if(isVisible === false) { - this.setStyleFlexbasis('0', isDragging); - this.renderer.setStyle(this.elRef.nativeElement, 'overflow-x', 'hidden'); - this.renderer.setStyle(this.elRef.nativeElement, 'overflow-y', 'hidden'); - - if(direction === 'vertical') { - this.renderer.setStyle(this.elRef.nativeElement, 'max-width', '0'); - } - } - else { - this.renderer.setStyle(this.elRef.nativeElement, 'overflow-x', 'hidden'); - this.renderer.setStyle(this.elRef.nativeElement, 'overflow-y', 'auto'); - this.renderer.removeStyle(this.elRef.nativeElement, 'max-width'); - } - - if(direction === 'horizontal') { - this.renderer.setStyle(this.elRef.nativeElement, 'height', '100%'); - this.renderer.removeStyle(this.elRef.nativeElement, 'width'); - } - else { - this.renderer.setStyle(this.elRef.nativeElement, 'width', '100%'); - this.renderer.removeStyle(this.elRef.nativeElement, 'height'); - } - } - public setStyleOrder(value: number): void { this.renderer.setStyle(this.elRef.nativeElement, 'order', value); } - public setStyleFlexbasis(value: string, isDragging: boolean): void { - // If component not yet initialized or gutter being dragged, disable transition - if(this.split.isViewInitialized === false || isDragging === true) { - this.setStyleTransition(false); - } - // Or use 'useTransition' to know if transition. - else { - this.setStyleTransition(this.split.useTransition); - } - + public setStyleFlexbasis(value: string): void { this.renderer.setStyle(this.elRef.nativeElement, 'flex-basis', value); } - private setStyleTransition(useTransition: boolean): void { - if(useTransition) { - this.renderer.setStyle(this.elRef.nativeElement, 'transition', `flex-basis 0.3s`); - } - else { - this.renderer.removeStyle(this.elRef.nativeElement, 'transition'); - } - } - private onTransitionEnd(event: TransitionEvent): void { // Limit only flex-basis transition to trigger the event if(event.propertyName === 'flex-basis') { diff --git a/projects/angular-split/src/lib/directive/splitGutter.directive.ts b/projects/angular-split/src/lib/directive/splitGutter.directive.ts deleted file mode 100644 index 00ae3b08..00000000 --- a/projects/angular-split/src/lib/directive/splitGutter.directive.ts +++ /dev/null @@ -1,148 +0,0 @@ -import { Directive, Input, ElementRef, Renderer2 } from '@angular/core'; - -@Directive({ - selector: 'as-split-gutter' -}) -export class SplitGutterDirective { - - @Input() set order(v: number) { - this.renderer.setStyle(this.elRef.nativeElement, 'order', v); - } - - //// - - private _direction: 'vertical' | 'horizontal'; - - @Input() set direction(v: 'vertical' | 'horizontal') { - this._direction = v; - this.refreshStyle(); - } - - get direction(): 'vertical' | 'horizontal' { - return this._direction; - } - - //// - - @Input() set useTransition(v: boolean) { - if(v) { - this.renderer.setStyle(this.elRef.nativeElement, 'transition', `flex-basis 0.3s`); - } - else { - this.renderer.removeStyle(this.elRef.nativeElement, 'transition'); - } - } - - //// - - private _size: number; - - @Input() set size(v: number) { - this._size = v; - this.refreshStyle(); - } - - get size(): number { - return this._size; - } - - //// - - private _color: string; - - @Input() set color(v: string) { - this._color = v; - this.refreshStyle(); - } - - get color(): string { - return this._color; - } - - //// - - private _imageH: string; - - @Input() set imageH(v: string) { - this._imageH = v; - this.refreshStyle(); - } - - get imageH(): string { - return this._imageH; - } - - //// - - private _imageV: string; - - @Input() set imageV(v: string) { - this._imageV = v; - this.refreshStyle(); - } - - get imageV(): string { - return this._imageV; - } - - //// - - private _disabled: boolean = false; - - @Input() set disabled(v: boolean) { - this._disabled = v; - this.refreshStyle(); - } - - get disabled(): boolean { - return this._disabled; - } - - //// - - constructor(private elRef: ElementRef, - private renderer: Renderer2) {} - - private refreshStyle(): void { - this.renderer.setStyle(this.elRef.nativeElement, 'flex-basis', `${ this.size }px`); - - // fix safari bug about gutter height when direction is horizontal - this.renderer.setStyle(this.elRef.nativeElement, 'height', (this.direction === 'vertical') ? `${ this.size }px` : `100%`); - - this.renderer.setStyle(this.elRef.nativeElement, 'background-color', (this.color !== '') ? this.color : `#eeeeee`); - - const state: 'disabled' | 'vertical' | 'horizontal' = (this.disabled === true) ? 'disabled' : this.direction; - this.renderer.setStyle(this.elRef.nativeElement, 'background-image', this.getImage(state)); - this.renderer.setStyle(this.elRef.nativeElement, 'cursor', this.getCursor(state)); - } - - private getCursor(state: 'disabled' | 'vertical' | 'horizontal'): string { - switch(state) { - case 'horizontal': - return 'col-resize'; - - case 'vertical': - return 'row-resize'; - - case 'disabled': - return 'default'; - } - } - - private getImage(state: 'disabled' | 'vertical' | 'horizontal'): string { - switch(state) { - case 'horizontal': - return (this.imageH !== '') ? this.imageH : defaultImageH; - - case 'vertical': - return (this.imageV !== '') ? this.imageV : defaultImageV; - - case 'disabled': - return ''; - } - } -} - - -const defaultImageH = 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==")'; -const defaultImageV = 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC")'; diff --git a/projects/angular-split/src/lib/module.ts b/projects/angular-split/src/lib/module.ts index 28c29fb9..347fd831 100644 --- a/projects/angular-split/src/lib/module.ts +++ b/projects/angular-split/src/lib/module.ts @@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common'; import { SplitComponent } from './component/split.component'; import { SplitAreaDirective } from './directive/splitArea.directive'; -import { SplitGutterDirective } from './directive/splitGutter.directive'; @NgModule({ imports: [ @@ -12,7 +11,6 @@ import { SplitGutterDirective } from './directive/splitGutter.directive'; declarations: [ SplitComponent, SplitAreaDirective, - SplitGutterDirective, ], exports: [ SplitComponent, From e124e525fdb28ceff08ccdd549a7df4fdc8c0bb8 Mon Sep 17 00:00:00 2001 From: bertrandg Date: Sat, 17 Nov 2018 09:55:28 +0100 Subject: [PATCH 018/307] Style applying method refactor in progress --- .../src/lib/component/split.component.scss | 28 ++-- .../src/lib/component/split.component.ts | 156 ++++++++---------- .../src/lib/directive/splitArea.directive.ts | 10 +- .../angular-split/src/lib/interface/IArea.ts | 2 +- projects/angular-split/src/lib/utils.ts | 27 +++ 5 files changed, 117 insertions(+), 106 deletions(-) create mode 100644 projects/angular-split/src/lib/utils.ts diff --git a/projects/angular-split/src/lib/component/split.component.scss b/projects/angular-split/src/lib/component/split.component.scss index a2880075..4b573628 100644 --- a/projects/angular-split/src/lib/component/split.component.scss +++ b/projects/angular-split/src/lib/component/split.component.scss @@ -8,7 +8,6 @@ width: 100%; height: 100%; - & > .as-split-gutter { flex-grow: 0; flex-shrink: 0; @@ -17,21 +16,20 @@ background-color: #eeeeee; } - & > as-split-area { + ::ng-deep as-split-area { flex-grow: 0; flex-shrink: 0; overflow-x: hidden; overflow-y: auto; - &.hided { - flex-basis: 0; + &.is-hided { + flex-basis: 0 !important; overflow-x: hidden; overflow-y: hidden; } } - - &.horizontal { + &.is-horizontal { flex-direction: row; & > .as-split-gutter { @@ -42,12 +40,12 @@ height: 100%; } - & > as-split-area { + ::ng-deep as-split-area { height: 100%; } } - &.vertical { + &.is-vertical { flex-direction: column; & > .as-split-gutter { @@ -57,30 +55,30 @@ width: 100%; } - & > as-split-area { + ::ng-deep as-split-area { width: 100%; - &.hided { + &.is-hided { max-width: 0; } } } - &.disabled { - + &.is-disabled { + & > .as-split-gutter { - background-color: ''; + background-image: url(""); cursor: default; } } - &.transition:not(.dragging) { + &.is-transition.is-init:not(.is-dragging) { & > .as-split-gutter { transition: flex-basis 0.3s; } - & > as-split-area { + ::ng-deep as-split-area { transition: flex-basis 0.3s; } diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts index ddec0f61..4e073d72 100644 --- a/projects/angular-split/src/lib/component/split.component.ts +++ b/projects/angular-split/src/lib/component/split.component.ts @@ -1,10 +1,11 @@ -import { Component, ChangeDetectorRef, Input, Output, HostBinding, ChangeDetectionStrategy, EventEmitter, Renderer2, OnDestroy, ElementRef, NgZone } from '@angular/core'; +import { Component, Input, Output, HostBinding, ChangeDetectionStrategy, ChangeDetectorRef, EventEmitter, Renderer2, AfterViewInit, OnDestroy, ElementRef, NgZone } from '@angular/core'; import { Subject, Observable } from 'rxjs'; import { debounceTime } from 'rxjs/operators'; import { IArea } from '../interface/IArea'; import { IPoint } from '../interface/IPoint'; import { SplitAreaDirective } from '../directive/splitArea.directive'; +import { getPointFromEvent, getPixelSize } from '../utils'; /** * angular-split @@ -54,7 +55,7 @@ import { SplitAreaDirective } from '../directive/splitArea.directive'; (touchstart)="startDragging($event, index*2+1, index+1)"> `, }) -export class SplitComponent implements OnDestroy { +export class SplitComponent implements AfterViewInit, OnDestroy { private _direction: 'horizontal' | 'vertical' = 'horizontal'; @@ -62,7 +63,8 @@ export class SplitComponent implements OnDestroy { v = (v === 'vertical') ? 'vertical' : 'horizontal'; this._direction = v; - this.renderer.addClass(this.elRef.nativeElement, this._direction); + this.renderer.addClass(this.elRef.nativeElement, `is-${ this._direction }`); + this.renderer.removeClass(this.elRef.nativeElement, `is-${ (this._direction === 'vertical') ? 'horizontal' : 'vertical' }`); this.build(false, false); } @@ -73,14 +75,29 @@ export class SplitComponent implements OnDestroy { //// + private _gutterSize: number = 11; + + @Input() set gutterSize(v: number) { + v = Number(v); + this._gutterSize = (!isNaN(v) && v > 0) ? v : 11; + + this.build(false, false); + } + + get gutterSize(): number { + return this._gutterSize; + } + + //// + private _useTransition: boolean = false; @Input() set useTransition(v: boolean) { v = (typeof(v) === 'boolean') ? v : (v === 'false' ? false : true); this._useTransition = v; - if(v) this.renderer.addClass(this.elRef.nativeElement, 'transition'); - else this.renderer.removeClass(this.elRef.nativeElement, 'transition'); + if(v) this.renderer.addClass(this.elRef.nativeElement, 'is-transition'); + else this.renderer.removeClass(this.elRef.nativeElement, 'is-transition'); } get useTransition(): boolean { @@ -95,28 +112,13 @@ export class SplitComponent implements OnDestroy { v = (typeof(v) === 'boolean') ? v : (v === 'false' ? false : true); this._disabled = v; - if(v) this.renderer.addClass(this.elRef.nativeElement, 'disabled'); - else this.renderer.removeClass(this.elRef.nativeElement, 'disabled'); + if(v) this.renderer.addClass(this.elRef.nativeElement, 'is-disabled'); + else this.renderer.removeClass(this.elRef.nativeElement, 'is-disabled'); } get disabled(): boolean { return this._disabled; } - - //// - - private _gutterSize: number = 11; - - @Input() set gutterSize(v: number) { - v = Number(v); - this._gutterSize = (!isNaN(v) && v > 0) ? v : 11; - - this.build(false, false); - } - - get gutterSize(): number { - return this._gutterSize; - } //// @@ -141,7 +143,7 @@ export class SplitComponent implements OnDestroy { @Output() gutterClick = new EventEmitter<{gutterNum: number, sizes: Array}>(false); private transitionEndInternal = new Subject>(); - @Output() transitionEnd = (>> this.transitionEndInternal.asObservable()).pipe( + @Output() transitionEnd: Observable> = this.transitionEndInternal.asObservable().pipe( debounceTime(20) ); @@ -173,55 +175,66 @@ export class SplitComponent implements OnDestroy { constructor(private ngZone: NgZone, private elRef: ElementRef, private cdRef: ChangeDetectorRef, - private renderer: Renderer2) {} + private renderer: Renderer2) { + // To force adding default class, could be override by user @Input() or not + this.direction = this._direction; + } + public ngAfterViewInit() { + this.ngZone.runOutsideAngular(() => { + // To avoid transition at first rendering + setTimeout(() => this.renderer.addClass(this.elRef.nativeElement, 'is-init')); + }); + } + private getNbGutters(): number { - return this.displayedAreas.length - 1; + return (this.displayedAreas.length === 0) ? 0 : this.displayedAreas.length - 1; } - public addArea(comp: SplitAreaDirective): void { + public addArea(component: SplitAreaDirective): void { const newArea: IArea = { - comp, + component, order: 0, size: 0, }; - if(comp.visible === true) { + if(component.visible === true) { this.displayedAreas.push(newArea); + + this.build(true, true); + this.cdRef.markForCheck(); } else { this.hidedAreas.push(newArea); - comp.setStyleFlexbasis('0'); } - - this.build(true, true); } - public removeArea(comp: SplitAreaDirective): void { - if(this.displayedAreas.some(a => a.comp === comp)) { - const area = this.displayedAreas.find(a => a.comp === comp) + public removeArea(component: SplitAreaDirective): void { + 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); + this.cdRef.markForCheck(); } - else if(this.hidedAreas.some(a => a.comp === comp)) { - const area = this.hidedAreas.find(a => a.comp === comp) + 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(comp: SplitAreaDirective, resetOrders: boolean, resetSizes: boolean): void { + public updateArea(component: SplitAreaDirective, resetOrders: boolean, resetSizes: boolean): void { // Only refresh if area is displayed (No need to check inside 'hidedAreas') - const item = this.displayedAreas.find(a => a.comp === comp); - if(!item) { + const area = this.displayedAreas.find(a => a.component === component); + if(!area) { return; } this.build(resetOrders, resetSizes); } - public showArea(comp: SplitAreaDirective): void { - const area = this.hidedAreas.find(a => a.comp === comp); + public showArea(component: SplitAreaDirective): void { + const area = this.hidedAreas.find(a => a.component === component); if(!area) { return; } @@ -230,10 +243,11 @@ export class SplitComponent implements OnDestroy { this.displayedAreas.push(...areas); this.build(true, true); + this.cdRef.markForCheck(); } public hideArea(comp: SplitAreaDirective): void { - const area = this.displayedAreas.find(a => a.comp === comp); + const area = this.displayedAreas.find(a => a.component === comp); if(!area) { return; } @@ -246,6 +260,7 @@ export class SplitComponent implements OnDestroy { this.hidedAreas.push(...areas); this.build(true, true); + this.cdRef.markForCheck(); } private build(resetOrders: boolean, resetSizes: boolean): void { @@ -256,14 +271,14 @@ export class SplitComponent implements OnDestroy { if(resetOrders === true) { // If user provided 'order' for each area, use it to sort them. - if(this.displayedAreas.every(a => a.comp.order !== null)) { - this.displayedAreas.sort((a, b) => ( a.comp.order) - ( b.comp.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; - area.comp.setStyleOrder(area.order); + area.component.setStyleOrder(area.order); }); } @@ -272,13 +287,13 @@ export class SplitComponent implements OnDestroy { if(resetSizes === true) { - const totalUserSize = this.displayedAreas.reduce((total: number, s: IArea) => s.comp.size ? total + s.comp.size : total, 0); + const totalUserSize = this.displayedAreas.reduce((total: number, s: IArea) => s.component.size ? total + s.component.size : total, 0); // If user provided 'size' for each area and total == 1, use it. - if(this.displayedAreas.every(a => a.comp.size !== null) && totalUserSize > .999 && totalUserSize < 1.001 ) { + if(this.displayedAreas.every(a => a.component.size !== null) && totalUserSize > .999 && totalUserSize < 1.001 ) { this.displayedAreas.forEach(area => { - area.size = area.comp.size; + area.size = area.component.size; }); } // Else set equal sizes for all areas. @@ -298,7 +313,7 @@ export class SplitComponent implements OnDestroy { let percentToDispatch = 0; // Get container pixel size - const containerSizePixel = this.elRef.nativeElement[(this.direction === 'horizontal') ? 'offsetWidth' : 'offsetHeight']; + const containerSizePixel = getPixelSize(this.elRef, this.direction); this.displayedAreas.forEach(area => { if(area.size * containerSizePixel < this.gutterSize) { @@ -324,16 +339,14 @@ export class SplitComponent implements OnDestroy { } } - this.refreshStyleSizes(); - this.cdRef.markForCheck(); } private refreshStyleSizes(): void { const sumGutterSize = this.getNbGutters() * this.gutterSize; this.displayedAreas.forEach(area => { - area.comp.setStyleFlexbasis(`calc( ${ area.size * 100 }% - ${ area.size * sumGutterSize }px )`); + area.component.setStyleFlexbasis(`calc( ${ area.size * 100 }% - ${ area.size * sumGutterSize }px )`); }); } @@ -346,7 +359,6 @@ export class SplitComponent implements OnDestroy { } public startDragging(startEvent: MouseEvent | TouchEvent, gutterOrder: number, gutterNum: number): void { - console.log('startDragging', startEvent) startEvent.preventDefault(); this.startPoint = getPointFromEvent(startEvent); @@ -367,10 +379,9 @@ export class SplitComponent implements OnDestroy { this.dragListeners.push( this.renderer.listen('document', 'touchcancel', (e: TouchEvent) => this.stopDragging()) ); }); - const prop = (this.direction === 'horizontal') ? 'offsetWidth' : 'offsetHeight'; - this.dragStartValues.sizePixelContainer = this.elRef.nativeElement[prop]; - this.dragStartValues.sizePixelA = areaA.comp.getSizePixel(prop); - this.dragStartValues.sizePixelB = areaB.comp.getSizePixel(prop); + this.dragStartValues.sizePixelContainer = getPixelSize(this.elRef, this.direction); + this.dragStartValues.sizePixelA = getPixelSize(areaA.component.elRef, this.direction); + this.dragStartValues.sizePixelB = getPixelSize(areaB.component.elRef, this.direction); this.dragStartValues.sizePercentA = areaA.size; this.dragStartValues.sizePercentB = areaB.size; @@ -381,16 +392,15 @@ export class SplitComponent implements OnDestroy { this.dragListeners.push( this.renderer.listen('document', 'touchmove', (e: TouchEvent) => this.dragEvent(e, areaA, areaB)) ); }); - areaA.comp.lockEvents(); - areaB.comp.lockEvents(); + areaA.component.lockEvents(); + areaB.component.lockEvents(); this.isDragging = true; - this.renderer.addClass(this.elRef.nativeElement, 'dragging'); + this.renderer.addClass(this.elRef.nativeElement, 'is-dragging'); this.notify('start'); } private dragEvent(event: MouseEvent | TouchEvent, areaA: IArea, areaB: IArea): void { - console.time('dragEvent') event.preventDefault(); if(!this.isDragging) { @@ -459,7 +469,6 @@ export class SplitComponent implements OnDestroy { if(this.startPoint.x !== this.endPoint.x || this.startPoint.y !== this.endPoint.y) { this.notify('progress'); } - console.timeEnd('dragEvent') } private stopDragging(): void { @@ -468,7 +477,7 @@ export class SplitComponent implements OnDestroy { } this.displayedAreas.forEach(area => { - area.comp.unlockEvents(); + area.component.unlockEvents(); }); while(this.dragListeners.length > 0) { @@ -483,7 +492,7 @@ export class SplitComponent implements OnDestroy { } this.isDragging = false; - this.renderer.removeClass(this.elRef.nativeElement, 'dragging'); + this.renderer.removeClass(this.elRef.nativeElement, 'is-dragging'); // Needed to let (click)="clickGutter(...)" event run and verify if mouse moved or not setTimeout(() => { @@ -511,22 +520,3 @@ export class SplitComponent implements OnDestroy { this.stopDragging(); } } - - -function getPointFromEvent(event: MouseEvent | TouchEvent): IPoint { - // TouchEvent - if(( event).touches !== undefined && ( event).touches.length > 0) { - return { - x: ( event).touches[0].pageX, - y: ( event).touches[0].pageY, - }; - } - // MouseEvent - else if(( event).pageX !== undefined && ( event).pageY !== undefined) { - return { - x: ( event).pageX, - y: ( event).pageY, - }; - } - return null; -} \ No newline at end of file diff --git a/projects/angular-split/src/lib/directive/splitArea.directive.ts b/projects/angular-split/src/lib/directive/splitArea.directive.ts index ebf10c49..633d91b3 100644 --- a/projects/angular-split/src/lib/directive/splitArea.directive.ts +++ b/projects/angular-split/src/lib/directive/splitArea.directive.ts @@ -45,11 +45,11 @@ export class SplitAreaDirective implements OnInit, OnDestroy { if(this.visible) { this.split.showArea(this); - this.renderer.removeClass(this.elRef.nativeElement, 'hided'); + this.renderer.removeClass(this.elRef.nativeElement, 'is-hided'); } else { this.split.hideArea(this); - this.renderer.addClass(this.elRef.nativeElement, 'hided'); + this.renderer.addClass(this.elRef.nativeElement, 'is-hided'); } } @@ -63,7 +63,7 @@ export class SplitAreaDirective implements OnInit, OnDestroy { private readonly lockListeners: Array = []; constructor(private ngZone: NgZone, - private elRef: ElementRef, + public elRef: ElementRef, private renderer: Renderer2, private split: SplitComponent) {} @@ -75,10 +75,6 @@ export class SplitAreaDirective implements OnInit, OnDestroy { }); } - public getSizePixel(prop: 'offsetWidth' | 'offsetHeight'): number { - return this.elRef.nativeElement[prop]; - } - public setStyleOrder(value: number): void { this.renderer.setStyle(this.elRef.nativeElement, 'order', value); } diff --git a/projects/angular-split/src/lib/interface/IArea.ts b/projects/angular-split/src/lib/interface/IArea.ts index d224c58f..2df35f58 100644 --- a/projects/angular-split/src/lib/interface/IArea.ts +++ b/projects/angular-split/src/lib/interface/IArea.ts @@ -1,7 +1,7 @@ import { SplitAreaDirective } from "../directive/splitArea.directive"; export interface IArea { - comp: SplitAreaDirective; + component: SplitAreaDirective; size: number; order: number; } \ No newline at end of file diff --git a/projects/angular-split/src/lib/utils.ts b/projects/angular-split/src/lib/utils.ts new file mode 100644 index 00000000..d1d3c08c --- /dev/null +++ b/projects/angular-split/src/lib/utils.ts @@ -0,0 +1,27 @@ +import { ElementRef } from '@angular/core'; + +import { IPoint } from './interface/IPoint'; + + +export function getPointFromEvent(event: MouseEvent | TouchEvent): IPoint { + // TouchEvent + if(( event).touches !== undefined && ( event).touches.length > 0) { + return { + x: ( event).touches[0].pageX, + y: ( event).touches[0].pageY, + }; + } + // MouseEvent + else if(( event).pageX !== undefined && ( event).pageY !== undefined) { + return { + x: ( event).pageX, + y: ( event).pageY, + }; + } + return null; +} + +export function getPixelSize(elRef: ElementRef, direction: 'horizontal' | 'vertical'): number { + return elRef.nativeElement[(direction === 'horizontal') ? 'offsetWidth' : 'offsetHeight']; + +} \ No newline at end of file From 25a6a85b7bf9a115035ef61f107f070491b5c726 Mon Sep 17 00:00:00 2001 From: bertrandg Date: Sat, 17 Nov 2018 10:30:59 +0100 Subject: [PATCH 019/307] Update website src to work with 2.x --- .../examples/classAccess.route.component.ts | 2 +- .../customGutterStyle.route.component.ts | 17 +++++++++--- .../examples/dirRtl.route.component.ts | 4 +-- .../examples/geekDemo.route.component.ts | 26 +++++++++---------- 4 files changed, 29 insertions(+), 20 deletions(-) diff --git a/src/app/component/examples/classAccess.route.component.ts b/src/app/component/examples/classAccess.route.component.ts index a819361c..9e3db4c8 100644 --- a/src/app/component/examples/classAccess.route.component.ts +++ b/src/app/component/examples/classAccess.route.component.ts @@ -26,7 +26,7 @@ import { AComponent } from './AComponent'; template: `
-
+

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eodolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

diff --git a/src/app/component/examples/customGutterStyle.route.component.ts b/src/app/component/examples/customGutterStyle.route.component.ts index 47aea1ce..ff63f98e 100644 --- a/src/app/component/examples/customGutterStyle.route.component.ts +++ b/src/app/component/examples/customGutterStyle.route.component.ts @@ -9,6 +9,18 @@ import { AComponent } from './AComponent'; 'class': 'split-example-page' }, styles: [` + :host ::ng-deep .as-split-gutter { + background-color: yellow !important; + } + :host ::ng-deep as-split.is-horizontal .as-split-gutter { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAjCAYAAABl/XGVAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANkSURBVEiJrddfaJdlFAfwzztda6tdZNo/pZstWlmhSy8siiwhGfQP3IWRIGUEJRgFQXTbZRBeFBhlBv25iFD6s4zCqI0GaWXEhNK5tTCUsJGUWQtOF++zeH7vfnO/3/JcPef7nOd8z3ne5znPeWlCgi3BeHAieDoomlnfDNGy4HBwabAoGAieOReOW4Lu4IIMuyd4LdMXBceCJY36bamXAb7C2/g+eC5YgFPonLYr+DXZ3J/WtQZ9wfrgvEazejHYmsbtwa7g1eDC4OegPbNdGXwdtAXDwVvBm8Fg0DpnZliMsRT9n9iCbmzAPtybZfeNMutnMVawsSgz/QmbGsnsoeD1CrYs+DHYFuytzD0RTAWPZtiGYGcjZK3BgaC/gvcFI+nYL60EEsGTGbYq+CRYF7wQPBWcPxthV8qkq4K/FJwJNmdYWyLbnmGXBKeD74L7gpeDV86WYX+wP2jLsDuS460V26lgT6YXiWxV0tuDk/UOCCjKYz2OuzN4EL+ho2L+Oy6qXe54wYGkT1H/NOayG32Zh7/xkez4JzmN/Zl+PX7J9CsxMRfZXtwZtUG9X4fsD3yW6bfgaKZ3YfSsZKlKjEp7n2RA9h2TnMJQpt+sNtPuOcky5+uzAE5ipGIzVjCZ6V3YQXlY8DDea4RsBFdVsOHpQdriLzL9Guwqyq2lvK/HC4YEPcGHwQdR7nWNBL3BpxWsJRsvqLwOj0/XxTR3KOidnvw42BTcFoxWCYOlwaEGdmDaviMbb47yCv0HTGaRrA2+rCy+Lvi2UbJs3ZJgLOipIasYHQmuyPT+4I15kO0OtlXBo8HFFaPbg4XBAym6m+ZBdiTK56oG3BusyfTH0kcdD3YGy5slSn5ORPXFDrbnVTxhq/Ns50HUGeUDWiML8QOuzsGi9vbPR1aoc4JblIV1Y6TG5RzJGtnFr5H02g4HO2bs8zwk2BOsO5tBWyIbCi7/H0RFlP1kZyPGD6brMKN0NUjWE2Xf2fCCG1N0i+e2nrH2keD5enN1q35RRvYu7mqWDLfi84bJkgxi9TzIenGwWbIJWX/YhFyGY82SjeHaqNOzzybBSkymxqg5SaXsYJQt+fIo+/p8viNYkd6td4KJYO1s/ub8c0wVvx83KJ/8FuXF/wdncFhZmgawr+Cv2Xz9Cy1ParntgE8FAAAAAElFTkSuQmCC') !important; + cursor: grab !important; + } + :host ::ng-deep as-split.is-vertical .as-split-gutter { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAdCAYAAAAgqdWEAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAOxSURBVEiJtddtzNdTGAfwz7+6y91qKpaGF0UjY8JmrIw1sdj0YFMeMzYLJWaUmac1bfQiw0hkkjErTy+whrARm0zztHmYp3mayjyFkny9+J3bfv7uf3e3/p03v3Od872u8z3Xua7rnB9tamFQmB1eDhvC7+G7sCZcHw5u11o9ETkmPBBODgeGjtBZ+qeEZWFjeCKM2Z1ExodN4eKwPBzdAtc/XB6+DbPbsfCwcEI5jqXhvfBLeCacFfrvhI2R4f1wW2jU5xotFPrhMIwt38PLd198ibexHi9hbYM/ermp4ViD1Q2ubgU6LjwafgwJH4cHw5XhxDCsN4v2QGifEuDTmic6wpJC4KewIBzSwkiPR9ELQqeH7/+1ybCoEFka9qqNd4ZTwx0lZW8Pg9tFpqzxdLilSzggbA831gATwqrC+vkwP4xuJ4naWhPD5jBIuDG8HfqGGaW/KkwJA5sURxV822pFaISPwpmNsBq/YgS2YVaDD+tgnIQ5GIXzG7y1iwQGNNhak+9Dp/BpiZcVoW8NMDjMDR+UenJuSfldbs0ZFC4K65XsWd+1UBgabi3p/UqYXC9O4YhwXbghdPxPMvPCkTV5fPhFqaCTyuBp4ZvwQji2ycDk8E54N8xpjqdekrkszKrJR4Ytwlep7o1zwp+p7o+6J4aEx8I9qarwLrfimcU1eVL4vB9+wBDcjXkNbq+B9sMjuKJRlf92tYH4syaPwzrhs+KNN5o8MrSk+fFtJNFle3mYX/qdJYlmCJ8UQjObFFaEle0mUmx/HMaFPqneQe+GDiVYE/avgSeEv8IRO2m8IxwVLgn3hyk7wB4Tfk715Fib6lV4aNfkveHzJoVnw3M9LD41LA6vht/Khr4MN4XOFnqN2ua/CHemepb8A7gmrK3JI4pXprYwODJV+V4TFtZInB36tNpA0V0YtpQC+t+3VJge3qzJ0wrrvt1gO8K6cs57hNfDi6nd9C1IDC0xuK3VJruAo4snpoc9w5Ph2hbY21JdDQPCXeWI9tiB7WHF8xtSVfTWRGpKTxV3p7hxeDeYS0tsjC1BuDHs08LeQYXs5lTPkEWtsN0pd4bVhczD3cxflao6n1fkh8KCbnBjUv2ObE91r81sFcw9Edq7kJlaGxseVoat4cLa+DvN6ZvqV2VLOcaJvSbQDaGvS0BOS3UrbyqZM74J91q4uSZfUDby+I5iqLdkJqSqyNtTPSvmhgHd4OaWzFiWqtZsLTVjh6m9W1qqMr6kBPRH4Yx22P0bNcolauCjiTYAAAAASUVORK5CYII=') !important; + cursor: grab !important; + } + .btns { display: flex; justify-content: center; @@ -20,7 +32,7 @@ import { AComponent } from './AComponent';
- +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

@@ -37,7 +49,4 @@ import { AComponent } from './AComponent'; }) export class CustomGutterStyleComponent extends AComponent { direction = 'horizontal'; - - customImageH: string = `url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAjCAYAAABl/XGVAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANkSURBVEiJrddfaJdlFAfwzztda6tdZNo/pZstWlmhSy8siiwhGfQP3IWRIGUEJRgFQXTbZRBeFBhlBv25iFD6s4zCqI0GaWXEhNK5tTCUsJGUWQtOF++zeH7vfnO/3/JcPef7nOd8z3ne5znPeWlCgi3BeHAieDoomlnfDNGy4HBwabAoGAieOReOW4Lu4IIMuyd4LdMXBceCJY36bamXAb7C2/g+eC5YgFPonLYr+DXZ3J/WtQZ9wfrgvEazejHYmsbtwa7g1eDC4OegPbNdGXwdtAXDwVvBm8Fg0DpnZliMsRT9n9iCbmzAPtybZfeNMutnMVawsSgz/QmbGsnsoeD1CrYs+DHYFuytzD0RTAWPZtiGYGcjZK3BgaC/gvcFI+nYL60EEsGTGbYq+CRYF7wQPBWcPxthV8qkq4K/FJwJNmdYWyLbnmGXBKeD74L7gpeDV86WYX+wP2jLsDuS460V26lgT6YXiWxV0tuDk/UOCCjKYz2OuzN4EL+ho2L+Oy6qXe54wYGkT1H/NOayG32Zh7/xkez4JzmN/Zl+PX7J9CsxMRfZXtwZtUG9X4fsD3yW6bfgaKZ3YfSsZKlKjEp7n2RA9h2TnMJQpt+sNtPuOcky5+uzAE5ipGIzVjCZ6V3YQXlY8DDea4RsBFdVsOHpQdriLzL9Guwqyq2lvK/HC4YEPcGHwQdR7nWNBL3BpxWsJRsvqLwOj0/XxTR3KOidnvw42BTcFoxWCYOlwaEGdmDaviMbb47yCv0HTGaRrA2+rCy+Lvi2UbJs3ZJgLOipIasYHQmuyPT+4I15kO0OtlXBo8HFFaPbg4XBAym6m+ZBdiTK56oG3BusyfTH0kcdD3YGy5slSn5ORPXFDrbnVTxhq/Ns50HUGeUDWiML8QOuzsGi9vbPR1aoc4JblIV1Y6TG5RzJGtnFr5H02g4HO2bs8zwk2BOsO5tBWyIbCi7/H0RFlP1kZyPGD6brMKN0NUjWE2Xf2fCCG1N0i+e2nrH2keD5enN1q35RRvYu7mqWDLfi84bJkgxi9TzIenGwWbIJWX/YhFyGY82SjeHaqNOzzybBSkymxqg5SaXsYJQt+fIo+/p8viNYkd6td4KJYO1s/ub8c0wVvx83KJ/8FuXF/wdncFhZmgawr+Cv2Xz9Cy1ParntgE8FAAAAAElFTkSuQmCC')`; - customImageV: string = `url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAdCAYAAAAgqdWEAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAOxSURBVEiJtddtzNdTGAfwz7+6y91qKpaGF0UjY8JmrIw1sdj0YFMeMzYLJWaUmac1bfQiw0hkkjErTy+whrARm0zztHmYp3mayjyFkny9+J3bfv7uf3e3/p03v3Od872u8z3Xua7rnB9tamFQmB1eDhvC7+G7sCZcHw5u11o9ETkmPBBODgeGjtBZ+qeEZWFjeCKM2Z1ExodN4eKwPBzdAtc/XB6+DbPbsfCwcEI5jqXhvfBLeCacFfrvhI2R4f1wW2jU5xotFPrhMIwt38PLd198ibexHi9hbYM/ermp4ViD1Q2ubgU6LjwafgwJH4cHw5XhxDCsN4v2QGifEuDTmic6wpJC4KewIBzSwkiPR9ELQqeH7/+1ybCoEFka9qqNd4ZTwx0lZW8Pg9tFpqzxdLilSzggbA831gATwqrC+vkwP4xuJ4naWhPD5jBIuDG8HfqGGaW/KkwJA5sURxV822pFaISPwpmNsBq/YgS2YVaDD+tgnIQ5GIXzG7y1iwQGNNhak+9Dp/BpiZcVoW8NMDjMDR+UenJuSfldbs0ZFC4K65XsWd+1UBgabi3p/UqYXC9O4YhwXbghdPxPMvPCkTV5fPhFqaCTyuBp4ZvwQji2ycDk8E54N8xpjqdekrkszKrJR4Ytwlep7o1zwp+p7o+6J4aEx8I9qarwLrfimcU1eVL4vB9+wBDcjXkNbq+B9sMjuKJRlf92tYH4syaPwzrhs+KNN5o8MrSk+fFtJNFle3mYX/qdJYlmCJ8UQjObFFaEle0mUmx/HMaFPqneQe+GDiVYE/avgSeEv8IRO2m8IxwVLgn3hyk7wB4Tfk715Fib6lV4aNfkveHzJoVnw3M9LD41LA6vht/Khr4MN4XOFnqN2ua/CHemepb8A7gmrK3JI4pXprYwODJV+V4TFtZInB36tNpA0V0YtpQC+t+3VJge3qzJ0wrrvt1gO8K6cs57hNfDi6nd9C1IDC0xuK3VJruAo4snpoc9w5Ph2hbY21JdDQPCXeWI9tiB7WHF8xtSVfTWRGpKTxV3p7hxeDeYS0tsjC1BuDHs08LeQYXs5lTPkEWtsN0pd4bVhczD3cxflao6n1fkh8KCbnBjUv2ObE91r81sFcw9Edq7kJlaGxseVoat4cLa+DvN6ZvqV2VLOcaJvSbQDaGvS0BOS3UrbyqZM74J91q4uSZfUDby+I5iqLdkJqSqyNtTPSvmhgHd4OaWzFiWqtZsLTVjh6m9W1qqMr6kBPRH4Yx22P0bNcolauCjiTYAAAAASUVORK5CYII=')`; } diff --git a/src/app/component/examples/dirRtl.route.component.ts b/src/app/component/examples/dirRtl.route.component.ts index 77d98b4c..18595231 100644 --- a/src/app/component/examples/dirRtl.route.component.ts +++ b/src/app/component/examples/dirRtl.route.component.ts @@ -19,8 +19,8 @@ import { AComponent } from './AComponent'; template: `
-
- +
+

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

diff --git a/src/app/component/examples/geekDemo.route.component.ts b/src/app/component/examples/geekDemo.route.component.ts index 94c5fcf8..ef93d4b9 100644 --- a/src/app/component/examples/geekDemo.route.component.ts +++ b/src/app/component/examples/geekDemo.route.component.ts @@ -59,17 +59,17 @@ import { AComponent } from './AComponent';
+ [gutterSize]="d.gutterSize" + [style.width]="d.width" + [style.height]="d.height" + useTransition="true" + style="background-color: #ffffff;"> {{ area.id }} + [visible]="area.visible" + [order]="index" + [size]="area.size" + [style.background-color]="area.color">{{ area.id }}
@@ -85,16 +85,16 @@ import { AComponent } from './AComponent';
- - + +
- - + +
From 5e92518f70d366885cdfb6339c9aa8b8597b8553 Mon Sep 17 00:00:00 2001 From: bertrandg Date: Sat, 17 Nov 2018 10:44:58 +0100 Subject: [PATCH 020/307] update cypress e2e tests to match 2.x --- cypress/integration/1.simple.spec.js | 12 ++++++------ cypress/integration/2.nested.spec.js | 20 ++++++++++---------- cypress/integration/4.sync.spec.js | 12 ++++++------ cypress/integration/5.style.spec.js | 8 ++++---- cypress/integration/7.click.spec.js | 26 +++++++++++++------------- cypress/support/splitUtils.js | 8 ++++---- 6 files changed, 43 insertions(+), 43 deletions(-) diff --git a/cypress/integration/1.simple.spec.js b/cypress/integration/1.simple.spec.js index e7194228..ee8b9fc8 100644 --- a/cypress/integration/1.simple.spec.js +++ b/cypress/integration/1.simple.spec.js @@ -22,32 +22,32 @@ context('Simple split example page tests', () => { }) it('Move gutter horizontally', () => { - moveGutter('as-split-gutter', 0, 280, 0); + moveGutter('.as-split-gutter', 0, 280, 0); checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [597, 462]); }) it('Change direction & move gutter vertically', () => { cy.get('.btns > .btn').click(); - moveGutter('as-split-gutter', 0, 0, 60); + moveGutter('.as-split-gutter', 0, 0, 60); checkSplitDirAndSizes('as-split', 'vertical', W, H, GUTTER, [146, 143]); }) it('Move gutter horizontally and move it back', () => { - moveGutter('as-split-gutter', 0, 280, 0); + moveGutter('.as-split-gutter', 0, 280, 0); checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [597, 462]); - moveGutter('as-split-gutter', 0, -280, 0); + moveGutter('.as-split-gutter', 0, -280, 0); checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [317, 742]); }) it('Move gutter horizontally to max, change direction', () => { - moveGutter('as-split-gutter', 0, -1000, 0); + moveGutter('.as-split-gutter', 0, -1000, 0); checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [0, 1059]); cy.get('.btns > .btn').click(); checkSplitDirAndSizes('as-split', 'vertical', W, H, GUTTER, [0, 289]); - moveGutter('as-split-gutter', 0, 0, 1000); + moveGutter('.as-split-gutter', 0, 0, 1000); cy.get('.btns > .btn').click(); checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [1059, 0]); }) diff --git a/cypress/integration/2.nested.spec.js b/cypress/integration/2.nested.spec.js index f9a723d0..9f7d2bfb 100644 --- a/cypress/integration/2.nested.spec.js +++ b/cypress/integration/2.nested.spec.js @@ -19,44 +19,44 @@ context('Nested splits example page tests', () => { }) it('Move gutter horizontally 3 times and until maximum', () => { - moveGutter('.split-example > as-split > as-split-gutter', 0, 280, 0); + moveGutter('.split-example > as-split > .as-split-gutter', 0, 280, 0); checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [703, 356]); - moveGutter('.split-example > as-split > as-split-gutter', 0, -80, 0); + moveGutter('.split-example > as-split > .as-split-gutter', 0, -80, 0); checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [623, 436]); - moveGutter('.split-example > as-split > as-split-gutter', 0, 700, 0); + moveGutter('.split-example > as-split > .as-split-gutter', 0, 700, 0); checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [1059, 0]); }) it('Move nested split 1 multiple times', () => { - moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > as-split-gutter', 0, 0, 60); + moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, 60); checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [186, 66, 126]); - moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > as-split-gutter', 1, 0, -300); + moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 1, 0, -300); checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [186, 0, 192]); // Move space smaller than gutter > nothing change - moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > as-split-gutter', 0, 0, -10); + moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -10); checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [186, 0, 192]); // Move space same as gutter > move - moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > as-split-gutter', 0, 0, -GUTTER); + moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -GUTTER); checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [175, 11, 192]); // Move space bigger than gutter > move - moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > as-split-gutter', 0, 0, -20); + moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -20); checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [155, 31, 192]); }) it('Move nested split 2 multiple times', () => { - moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > as-split-gutter', 0, 0, 600); + moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 0, 600); checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'vertical', 635, H, GUTTER, [389, 0]); - moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > as-split-gutter', 0, 0, -600); + moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 0, -600); checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'vertical', 635, H, GUTTER, [0, 389]); }) }) diff --git a/cypress/integration/4.sync.spec.js b/cypress/integration/4.sync.spec.js index 2f87c954..3d8d3d94 100644 --- a/cypress/integration/4.sync.spec.js +++ b/cypress/integration/4.sync.spec.js @@ -19,29 +19,29 @@ context('Sync splits example page tests', () => { }) it('Move gutter upper split horizontally and check if other split follow', () => { - moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > as-split-gutter', 0, 280, 0); + moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 280, 0); checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [544, 515]); checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [544, 515]); - moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > as-split-gutter', 0, 600, 0); + moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 600, 0); checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [1059, 0]); checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [1059, 0]); - moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > as-split-gutter', 0, -1500, 0); + moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, -1500, 0); checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [0, 1059]); checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [0, 1059]); }) it('Move gutter down split horizontally and check if other split follow', () => { - moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > as-split-gutter', 0, 280, 0); + moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 280, 0); checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [544, 515]); checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [544, 515]); - moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > as-split-gutter', 0, 600, 0); + moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 600, 0); checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [1059, 0]); checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [1059, 0]); - moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > as-split-gutter', 0, -1500, 0); + moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, -1500, 0); checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [0, 1059]); checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [0, 1059]); }) diff --git a/cypress/integration/5.style.spec.js b/cypress/integration/5.style.spec.js index 702c8483..438a6b37 100644 --- a/cypress/integration/5.style.spec.js +++ b/cypress/integration/5.style.spec.js @@ -18,15 +18,15 @@ context('Custom split style example page tests', () => { it('Veriy gutter size color and horizontal image', () => { checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [312, 728]); - cy.get('as-split > as-split-gutter').should('have.css', 'background-color', COLOR); - cy.get('as-split > as-split-gutter').should('have.css', 'background-image', IMGH); + cy.get('as-split > .as-split-gutter').should('have.css', 'background-color', COLOR); + cy.get('as-split > .as-split-gutter').should('have.css', 'background-image', IMGH); }) it('Change direction', () => { cy.get('.btns > .btn').click(); checkSplitDirAndSizes('as-split', 'vertical', W, H, GUTTER, [81, 189]); - cy.get('as-split > as-split-gutter').should('have.css', 'background-color', COLOR); - cy.get('as-split > as-split-gutter').should('have.css', 'background-image', IMGV); + cy.get('as-split > .as-split-gutter').should('have.css', 'background-color', COLOR); + cy.get('as-split > .as-split-gutter').should('have.css', 'background-image', IMGV); }) }) diff --git a/cypress/integration/7.click.spec.js b/cypress/integration/7.click.spec.js index 9af9c957..afd7f8d0 100644 --- a/cypress/integration/7.click.spec.js +++ b/cypress/integration/7.click.spec.js @@ -17,56 +17,56 @@ context('Gutter click example page tests', () => { }) it('Click gutters to switch area sizes between 0 and X', () => { - cy.get('as-split-gutter').eq(0).click(); + cy.get('.as-split-gutter').eq(0).click(); checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 788, 262]); - cy.get('as-split-gutter').eq(0).click(); + cy.get('.as-split-gutter').eq(0).click(); checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [263, 525, 262]); - cy.get('as-split-gutter').eq(0).click(); + cy.get('.as-split-gutter').eq(0).click(); checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 788, 262]); - cy.get('as-split-gutter').eq(1).click(); + cy.get('.as-split-gutter').eq(1).click(); checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 1050, 0]); - cy.get('as-split-gutter').eq(0).click(); + cy.get('.as-split-gutter').eq(0).click(); checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [263, 787, 0]); - cy.get('as-split-gutter').eq(1).click(); + cy.get('.as-split-gutter').eq(1).click(); checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [263, 525, 262]); cy.get('.logs ul li').should('have.length', 6); }) it('Mix gutter click and dragging', () => { - moveGutter('as-split-gutter', 0, -100, 0); + moveGutter('.as-split-gutter', 0, -100, 0); checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [263, 525, 262]); cy.get('.logs ul li').should('have.length', 0); cy.get('.btns button').eq(1).click(); - moveGutter('as-split-gutter', 0, -100, 0); + moveGutter('.as-split-gutter', 0, -100, 0); checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [163, 624, 263]); cy.get('.logs ul li').should('have.length', 6); - cy.get('as-split-gutter').eq(0).click(); + cy.get('.as-split-gutter').eq(0).click(); checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 788, 262]); cy.get('.logs ul li').should('have.length', 8); - cy.get('as-split-gutter').eq(1).click(); + cy.get('.as-split-gutter').eq(1).click(); checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 1050, 0]); cy.get('.logs ul li').should('have.length', 10); - moveGutter('as-split-gutter', 1, -20, 0); + moveGutter('.as-split-gutter', 1, -20, 0); checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 1030, 20]); cy.get('.logs ul li').should('have.length', 16); - cy.get('as-split-gutter').eq(1).click(); + cy.get('.as-split-gutter').eq(1).click(); checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 788, 262]); cy.get('.logs ul li').should('have.length', 18); - cy.get('as-split-gutter').eq(0).click(); + cy.get('.as-split-gutter').eq(0).click(); checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [263, 525, 262]); cy.get('.logs ul li').should('have.length', 20); diff --git a/cypress/support/splitUtils.js b/cypress/support/splitUtils.js index 113f0665..3f1e3175 100644 --- a/cypress/support/splitUtils.js +++ b/cypress/support/splitUtils.js @@ -18,7 +18,7 @@ export function checkSplitDirAndCalcSizes(el, dir, w, h, gutter, sizes) { cy.get(el).should('have.css', 'flex-direction', propFlexDir); const propSize = (dir === 'horizontal') ? 'width' : 'height'; - cy.get(`${ el } > as-split-gutter`).should('have.css', propSize, `${ gutter }px`); + cy.get(`${ el } > .as-split-gutter`).should('have.css', propSize, `${ gutter }px`); const propSize2 = (propSize === 'width') ? 'height' : 'width'; const propValue2 = (propSize === 'width') ? h : w; @@ -47,9 +47,9 @@ export function checkSplitDirAndSizes(el, dir, w, h, gutter, sizes) { const propSize2 = (propSize === 'width') ? 'height' : 'width'; const propValue2 = (propSize === 'width') ? h : w; - cy.get(`${ el } > as-split-gutter`).should('have.length', sizes.length - 1); - cy.get(`${ el } > as-split-gutter`).invoke(propSize).should('eq', gutter); - cy.get(`${ el } > as-split-gutter`).invoke(propSize2).should('eq', propValue2); + cy.get(`${ el } > .as-split-gutter`).should('have.length', sizes.length - 1); + cy.get(`${ el } > .as-split-gutter`).invoke(propSize).should('eq', gutter); + cy.get(`${ el } > .as-split-gutter`).invoke(propSize2).should('eq', propValue2); cy.get(`${ el } > as-split-area`) .should('have.length', sizes.length) From 3452925bc44324bd09297626c3929a978b95cd2e Mon Sep 17 00:00:00 2001 From: bertrandg Date: Mon, 19 Nov 2018 13:23:44 +0100 Subject: [PATCH 021/307] gutter style overriding example update --- .../examples/customGutterStyle.route.component.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/app/component/examples/customGutterStyle.route.component.ts b/src/app/component/examples/customGutterStyle.route.component.ts index ff63f98e..c444dd12 100644 --- a/src/app/component/examples/customGutterStyle.route.component.ts +++ b/src/app/component/examples/customGutterStyle.route.component.ts @@ -9,16 +9,15 @@ import { AComponent } from './AComponent'; 'class': 'split-example-page' }, styles: [` - :host ::ng-deep .as-split-gutter { + :host as-split ::ng-deep .as-split-gutter { background-color: yellow !important; + cursor: grab !important; } - :host ::ng-deep as-split.is-horizontal .as-split-gutter { + :host as-split.is-horizontal ::ng-deep .as-split-gutter { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAjCAYAAABl/XGVAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANkSURBVEiJrddfaJdlFAfwzztda6tdZNo/pZstWlmhSy8siiwhGfQP3IWRIGUEJRgFQXTbZRBeFBhlBv25iFD6s4zCqI0GaWXEhNK5tTCUsJGUWQtOF++zeH7vfnO/3/JcPef7nOd8z3ne5znPeWlCgi3BeHAieDoomlnfDNGy4HBwabAoGAieOReOW4Lu4IIMuyd4LdMXBceCJY36bamXAb7C2/g+eC5YgFPonLYr+DXZ3J/WtQZ9wfrgvEazejHYmsbtwa7g1eDC4OegPbNdGXwdtAXDwVvBm8Fg0DpnZliMsRT9n9iCbmzAPtybZfeNMutnMVawsSgz/QmbGsnsoeD1CrYs+DHYFuytzD0RTAWPZtiGYGcjZK3BgaC/gvcFI+nYL60EEsGTGbYq+CRYF7wQPBWcPxthV8qkq4K/FJwJNmdYWyLbnmGXBKeD74L7gpeDV86WYX+wP2jLsDuS460V26lgT6YXiWxV0tuDk/UOCCjKYz2OuzN4EL+ho2L+Oy6qXe54wYGkT1H/NOayG32Zh7/xkez4JzmN/Zl+PX7J9CsxMRfZXtwZtUG9X4fsD3yW6bfgaKZ3YfSsZKlKjEp7n2RA9h2TnMJQpt+sNtPuOcky5+uzAE5ipGIzVjCZ6V3YQXlY8DDea4RsBFdVsOHpQdriLzL9Guwqyq2lvK/HC4YEPcGHwQdR7nWNBL3BpxWsJRsvqLwOj0/XxTR3KOidnvw42BTcFoxWCYOlwaEGdmDaviMbb47yCv0HTGaRrA2+rCy+Lvi2UbJs3ZJgLOipIasYHQmuyPT+4I15kO0OtlXBo8HFFaPbg4XBAym6m+ZBdiTK56oG3BusyfTH0kcdD3YGy5slSn5ORPXFDrbnVTxhq/Ns50HUGeUDWiML8QOuzsGi9vbPR1aoc4JblIV1Y6TG5RzJGtnFr5H02g4HO2bs8zwk2BOsO5tBWyIbCi7/H0RFlP1kZyPGD6brMKN0NUjWE2Xf2fCCG1N0i+e2nrH2keD5enN1q35RRvYu7mqWDLfi84bJkgxi9TzIenGwWbIJWX/YhFyGY82SjeHaqNOzzybBSkymxqg5SaXsYJQt+fIo+/p8viNYkd6td4KJYO1s/ub8c0wVvx83KJ/8FuXF/wdncFhZmgawr+Cv2Xz9Cy1ParntgE8FAAAAAElFTkSuQmCC') !important; - cursor: grab !important; } - :host ::ng-deep as-split.is-vertical .as-split-gutter { + :host as-split.is-vertical ::ng-deep .as-split-gutter { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAdCAYAAAAgqdWEAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAOxSURBVEiJtddtzNdTGAfwz7+6y91qKpaGF0UjY8JmrIw1sdj0YFMeMzYLJWaUmac1bfQiw0hkkjErTy+whrARm0zztHmYp3mayjyFkny9+J3bfv7uf3e3/p03v3Od872u8z3Xua7rnB9tamFQmB1eDhvC7+G7sCZcHw5u11o9ETkmPBBODgeGjtBZ+qeEZWFjeCKM2Z1ExodN4eKwPBzdAtc/XB6+DbPbsfCwcEI5jqXhvfBLeCacFfrvhI2R4f1wW2jU5xotFPrhMIwt38PLd198ibexHi9hbYM/ermp4ViD1Q2ubgU6LjwafgwJH4cHw5XhxDCsN4v2QGifEuDTmic6wpJC4KewIBzSwkiPR9ELQqeH7/+1ybCoEFka9qqNd4ZTwx0lZW8Pg9tFpqzxdLilSzggbA831gATwqrC+vkwP4xuJ4naWhPD5jBIuDG8HfqGGaW/KkwJA5sURxV822pFaISPwpmNsBq/YgS2YVaDD+tgnIQ5GIXzG7y1iwQGNNhak+9Dp/BpiZcVoW8NMDjMDR+UenJuSfldbs0ZFC4K65XsWd+1UBgabi3p/UqYXC9O4YhwXbghdPxPMvPCkTV5fPhFqaCTyuBp4ZvwQji2ycDk8E54N8xpjqdekrkszKrJR4Ytwlep7o1zwp+p7o+6J4aEx8I9qarwLrfimcU1eVL4vB9+wBDcjXkNbq+B9sMjuKJRlf92tYH4syaPwzrhs+KNN5o8MrSk+fFtJNFle3mYX/qdJYlmCJ8UQjObFFaEle0mUmx/HMaFPqneQe+GDiVYE/avgSeEv8IRO2m8IxwVLgn3hyk7wB4Tfk715Fib6lV4aNfkveHzJoVnw3M9LD41LA6vht/Khr4MN4XOFnqN2ua/CHemepb8A7gmrK3JI4pXprYwODJV+V4TFtZInB36tNpA0V0YtpQC+t+3VJge3qzJ0wrrvt1gO8K6cs57hNfDi6nd9C1IDC0xuK3VJruAo4snpoc9w5Ph2hbY21JdDQPCXeWI9tiB7WHF8xtSVfTWRGpKTxV3p7hxeDeYS0tsjC1BuDHs08LeQYXs5lTPkEWtsN0pd4bVhczD3cxflao6n1fkh8KCbnBjUv2ObE91r81sFcw9Edq7kJlaGxseVoat4cLa+DvN6ZvqV2VLOcaJvSbQDaGvS0BOS3UrbyqZM74J91q4uSZfUDby+I5iqLdkJqSqyNtTPSvmhgHd4OaWzFiWqtZsLTVjh6m9W1qqMr6kBPRH4Yx22P0bNcolauCjiTYAAAAASUVORK5CYII=') !important; - cursor: grab !important; } .btns { From 71dcfe6560db6d271c4fffc9b1a05e32291d94f1 Mon Sep 17 00:00:00 2001 From: bertrandg Date: Mon, 19 Nov 2018 13:24:53 +0100 Subject: [PATCH 022/307] simple example updated to view cd run in console --- src/app/component/examples/simple.route.component.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/app/component/examples/simple.route.component.ts b/src/app/component/examples/simple.route.component.ts index 1ddd84f0..de085273 100644 --- a/src/app/component/examples/simple.route.component.ts +++ b/src/app/component/examples/simple.route.component.ts @@ -20,7 +20,7 @@ import { AComponent } from './AComponent';
- +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

@@ -31,10 +31,20 @@ import { AComponent } from './AComponent';

+ {{ testChangeDetectorRun() }}
` }) export class SimpleComponent extends AComponent { direction: string = 'horizontal' + + testChangeDetectorRun() { + console.log('Change detector run just now !', Date.now()) + return ''; + } + + log($event) { + console.log('>>>>', $event); + } } From 7952f7c9fce813dd0d3ed86eed572bdfbc0e446b Mon Sep 17 00:00:00 2001 From: bertrandg Date: Mon, 19 Nov 2018 22:23:03 +0100 Subject: [PATCH 023/307] Add cd.OnPush and a log in console to track change detection run in all examples --- src/app/component/examples/AComponent.ts | 5 +++++ .../examples/classAccess.route.component.ts | 3 ++- .../customGutterStyle.route.component.ts | 4 +++- .../component/examples/dirRtl.route.component.ts | 4 +++- .../examples/geekDemo.route.component.ts | 4 +++- .../examples/gutterClick.route.component.ts | 4 +++- .../component/examples/nested.route.component.ts | 4 +++- .../component/examples/simple.route.component.ts | 16 ++++------------ .../component/examples/sync.route.component.ts | 4 +++- .../togglingDomAndVisible.route.component.ts | 4 +++- .../examples/transitions.route.component.ts | 4 +++- .../workspaceLocalstorage.route.component.ts | 3 ++- 12 files changed, 37 insertions(+), 22 deletions(-) diff --git a/src/app/component/examples/AComponent.ts b/src/app/component/examples/AComponent.ts index fccb46f8..785fbefa 100644 --- a/src/app/component/examples/AComponent.ts +++ b/src/app/component/examples/AComponent.ts @@ -3,4 +3,9 @@ import { ExampleEnum } from '../../data/enum'; export class AComponent { exampleEnum = ExampleEnum + + testChangeDetectorRun() { + console.log('Change detector run just now !', Date.now()) + return ''; + } } diff --git a/src/app/component/examples/classAccess.route.component.ts b/src/app/component/examples/classAccess.route.component.ts index 9e3db4c8..4c0bf7f7 100644 --- a/src/app/component/examples/classAccess.route.component.ts +++ b/src/app/component/examples/classAccess.route.component.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, ViewChildren, QueryList, AfterViewInit } from '@angular/core'; +import { Component, ViewChild, ViewChildren, QueryList, AfterViewInit, ChangeDetectionStrategy } from '@angular/core'; import { SplitComponent, SplitAreaDirective } from 'angular-split'; import { AComponent } from './AComponent'; @@ -6,6 +6,7 @@ import { AComponent } from './AComponent'; @Component({ selector: 'sp-ex-class-access', + changeDetection: ChangeDetectionStrategy.OnPush, host: { 'class': 'split-example-page' }, diff --git a/src/app/component/examples/customGutterStyle.route.component.ts b/src/app/component/examples/customGutterStyle.route.component.ts index c444dd12..79ba7ba0 100644 --- a/src/app/component/examples/customGutterStyle.route.component.ts +++ b/src/app/component/examples/customGutterStyle.route.component.ts @@ -1,10 +1,11 @@ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { AComponent } from './AComponent'; @Component({ selector: 'sp-ex-custom-gutter-style', + changeDetection: ChangeDetectionStrategy.OnPush, host: { 'class': 'split-example-page' }, @@ -28,6 +29,7 @@ import { AComponent } from './AComponent'; } `], template: ` + {{ testChangeDetectorRun() }}
diff --git a/src/app/component/examples/dirRtl.route.component.ts b/src/app/component/examples/dirRtl.route.component.ts index 18595231..fecc3160 100644 --- a/src/app/component/examples/dirRtl.route.component.ts +++ b/src/app/component/examples/dirRtl.route.component.ts @@ -1,10 +1,11 @@ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { AComponent } from './AComponent'; @Component({ selector: 'sp-ex-dir_rtl', + changeDetection: ChangeDetectionStrategy.OnPush, host: { 'class': 'split-example-page' }, @@ -17,6 +18,7 @@ import { AComponent } from './AComponent'; } `], template: ` + {{ testChangeDetectorRun() }}
diff --git a/src/app/component/examples/geekDemo.route.component.ts b/src/app/component/examples/geekDemo.route.component.ts index ef93d4b9..f8eae08a 100644 --- a/src/app/component/examples/geekDemo.route.component.ts +++ b/src/app/component/examples/geekDemo.route.component.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild } from '@angular/core'; +import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core'; import { SortableComponent } from 'ngx-bootstrap/sortable'; import { AComponent } from './AComponent'; @@ -6,6 +6,7 @@ import { AComponent } from './AComponent'; @Component({ selector: 'sp-ex-geek-demo', + changeDetection: ChangeDetectionStrategy.OnPush, host: { 'class': 'split-example-page' }, @@ -55,6 +56,7 @@ import { AComponent } from './AComponent'; } `], template: ` + {{ testChangeDetectorRun() }}
diff --git a/src/app/component/examples/gutterClick.route.component.ts b/src/app/component/examples/gutterClick.route.component.ts index 7e6ed172..5cde614c 100644 --- a/src/app/component/examples/gutterClick.route.component.ts +++ b/src/app/component/examples/gutterClick.route.component.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, ElementRef } from '@angular/core'; +import { Component, ViewChild, ElementRef, ChangeDetectionStrategy } from '@angular/core'; import { AComponent } from './AComponent'; import { formatDate } from '../../service/utils'; @@ -6,6 +6,7 @@ import { formatDate } from '../../service/utils'; @Component({ selector: 'sp-ex-gutter-click', + changeDetection: ChangeDetectionStrategy.OnPush, host: { 'class': 'split-example-page' }, @@ -37,6 +38,7 @@ import { formatDate } from '../../service/utils'; } `], template: ` + {{ testChangeDetectorRun() }}
diff --git a/src/app/component/examples/nested.route.component.ts b/src/app/component/examples/nested.route.component.ts index dcbdcb42..98a568b1 100644 --- a/src/app/component/examples/nested.route.component.ts +++ b/src/app/component/examples/nested.route.component.ts @@ -1,14 +1,16 @@ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { AComponent } from './AComponent'; @Component({ selector: 'sp-ex-nested', + changeDetection: ChangeDetectionStrategy.OnPush, host: { 'class': 'split-example-page' }, template: ` + {{ testChangeDetectorRun() }}
diff --git a/src/app/component/examples/simple.route.component.ts b/src/app/component/examples/simple.route.component.ts index de085273..ceadf197 100644 --- a/src/app/component/examples/simple.route.component.ts +++ b/src/app/component/examples/simple.route.component.ts @@ -1,10 +1,11 @@ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { AComponent } from './AComponent'; @Component({ selector: 'sp-ex-simple', + changeDetection: ChangeDetectionStrategy.OnPush, host: { 'class': 'split-example-page' }, @@ -17,10 +18,11 @@ import { AComponent } from './AComponent'; } `], template: ` + {{ testChangeDetectorRun() }}
- +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

@@ -31,20 +33,10 @@ import { AComponent } from './AComponent';

- {{ testChangeDetectorRun() }}
` }) export class SimpleComponent extends AComponent { direction: string = 'horizontal' - - testChangeDetectorRun() { - console.log('Change detector run just now !', Date.now()) - return ''; - } - - log($event) { - console.log('>>>>', $event); - } } diff --git a/src/app/component/examples/sync.route.component.ts b/src/app/component/examples/sync.route.component.ts index 6ae238ef..99ac4a69 100644 --- a/src/app/component/examples/sync.route.component.ts +++ b/src/app/component/examples/sync.route.component.ts @@ -1,14 +1,16 @@ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { AComponent } from './AComponent'; @Component({ selector: 'sp-ex-sync', + changeDetection: ChangeDetectionStrategy.OnPush, host: { 'class': 'split-example-page' }, template: ` + {{ testChangeDetectorRun() }}
diff --git a/src/app/component/examples/togglingDomAndVisible.route.component.ts b/src/app/component/examples/togglingDomAndVisible.route.component.ts index 5009926e..ad7f4fa7 100644 --- a/src/app/component/examples/togglingDomAndVisible.route.component.ts +++ b/src/app/component/examples/togglingDomAndVisible.route.component.ts @@ -1,10 +1,11 @@ -import { Component } from '@angular/core'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; import { AComponent } from './AComponent'; @Component({ selector: 'sp-ex-toggling-dom-and-visible', + changeDetection: ChangeDetectionStrategy.OnPush, host: { 'class': 'split-example-page' }, @@ -17,6 +18,7 @@ import { AComponent } from './AComponent'; } `], template: ` + {{ testChangeDetectorRun() }}
diff --git a/src/app/component/examples/transitions.route.component.ts b/src/app/component/examples/transitions.route.component.ts index f7d4b5e2..98e3589a 100644 --- a/src/app/component/examples/transitions.route.component.ts +++ b/src/app/component/examples/transitions.route.component.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild, ElementRef } from '@angular/core'; +import { Component, ViewChild, ElementRef, ChangeDetectionStrategy } from '@angular/core'; import { AComponent } from './AComponent'; import { formatDate } from '../../service/utils'; @@ -6,6 +6,7 @@ import { formatDate } from '../../service/utils'; @Component({ selector: 'sp-ex-transitions', + changeDetection: ChangeDetectionStrategy.OnPush, host: { 'class': 'split-example-page' }, @@ -51,6 +52,7 @@ import { formatDate } from '../../service/utils'; } `], template: ` + {{ testChangeDetectorRun() }}
diff --git a/src/app/component/examples/workspaceLocalstorage.route.component.ts b/src/app/component/examples/workspaceLocalstorage.route.component.ts index 69f1c8ce..771a2494 100644 --- a/src/app/component/examples/workspaceLocalstorage.route.component.ts +++ b/src/app/component/examples/workspaceLocalstorage.route.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core'; import { cloneDeep } from 'lodash'; import { AComponent } from './AComponent'; @@ -52,6 +52,7 @@ const defaultConfig: IConfig = { @Component({ selector: 'sp-ex-workspace-localstorage', + changeDetection: ChangeDetectionStrategy.OnPush, styles: [` :host { display: block; From 104cb851b0d7603f1185e90e49db2ea355102fdd Mon Sep 17 00:00:00 2001 From: bertrandg Date: Mon, 19 Nov 2018 23:13:35 +0100 Subject: [PATCH 024/307] Modify event emitters to limit change detection runs --- CHANGELOG.md | 12 +++ projects/angular-split/package.json | 2 +- .../src/lib/component/split.component.ts | 97 +++++++++++++------ 3 files changed, 78 insertions(+), 33 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c3efb08c..738e21f1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,16 @@ + +# 2.0.0-beta.2 (2018-11-19) + +* **Performance:** Make `@Output()` event emitters (`dragStart`, `dragProgress`, `dragEnd`, `gutterClick`, `transitionEnd`) works "lazily" to avoid useless change detection runs, especially for `dragProgress` which could be costly in big app. + + + +# 2.0.0-beta.1 (2018-11-17) + +* **Styles:** Refactor the way styles are manage, no more `renderer.setStyle()` everywhere (except for areas `order` & `flex-basis`), now works with added/removed classes (`is-horizontal`/`is-vertical`, `is-disabled`, `is-transition`, `is-disabled`, `is-dragging`), way better. Doing like this, `` directive is not needed anymore. + + # 1.0.4 (2018-11-15) diff --git a/projects/angular-split/package.json b/projects/angular-split/package.json index eb274a3f..97d08044 100644 --- a/projects/angular-split/package.json +++ b/projects/angular-split/package.json @@ -1,6 +1,6 @@ { "name": "angular-split", - "version": "1.0.4", + "version": "2.0.0-beta.2", "description": "Angular UI library used to split views and to allow dragging to resize the split areas using CSS flexbox layout.", "author": "bertrandg", "repository": { diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts index 4e073d72..aaf19fe6 100644 --- a/projects/angular-split/src/lib/component/split.component.ts +++ b/projects/angular-split/src/lib/component/split.component.ts @@ -1,5 +1,5 @@ -import { Component, Input, Output, HostBinding, ChangeDetectionStrategy, ChangeDetectorRef, EventEmitter, Renderer2, AfterViewInit, OnDestroy, ElementRef, NgZone } from '@angular/core'; -import { Subject, Observable } from 'rxjs'; +import { Component, Input, Output, HostBinding, ChangeDetectionStrategy, ChangeDetectorRef, Renderer2, AfterViewInit, OnDestroy, ElementRef, NgZone } from '@angular/core'; +import { Observable, Subscriber } from 'rxjs'; import { debounceTime } from 'rxjs/operators'; import { IArea } from '../interface/IArea'; @@ -50,7 +50,7 @@ import { getPointFromEvent, getPixelSize } from '../utils'; class="as-split-gutter" [style.flex-basis.px]="gutterSize" [style.order]="index*2+1" - (click)="clickGutter($event, index*2+1, index+1)" + (click)="clickGutter($event, index+1)" (mousedown)="startDragging($event, index*2+1, index+1)" (touchstart)="startDragging($event, index*2+1, index+1)">
`, @@ -137,15 +137,29 @@ export class SplitComponent implements AfterViewInit, OnDestroy { //// - @Output() dragStart = new EventEmitter<{gutterNum: number, sizes: Array}>(false); - @Output() dragProgress = new EventEmitter<{gutterNum: number, sizes: Array}>(false); - @Output() dragEnd = new EventEmitter<{gutterNum: number, sizes: Array}>(false); - @Output() gutterClick = new EventEmitter<{gutterNum: number, sizes: Array}>(false); + private _dragStartSubscriber: Subscriber<{gutterNum: number, sizes: Array}> + @Output() get dragStart(): Observable<{gutterNum: number, sizes: Array}> { + return new Observable(subscriber => this._dragStartSubscriber = subscriber); + } + private _dragProgressSubscriber: Subscriber<{gutterNum: number, sizes: Array}> + @Output() get dragProgress(): Observable<{gutterNum: number, sizes: Array}> { + return new Observable(subscriber => this._dragProgressSubscriber = subscriber); + } + private _dragEndSubscriber: Subscriber<{gutterNum: number, sizes: Array}> + @Output() get dragEnd(): Observable<{gutterNum: number, sizes: Array}> { + return new Observable(subscriber => this._dragEndSubscriber = subscriber); + } + private _gutterClickSubscriber: Subscriber<{gutterNum: number, sizes: Array}> + @Output() get gutterClick(): Observable<{gutterNum: number, sizes: Array}> { + return new Observable(subscriber => this._gutterClickSubscriber = subscriber); + } - private transitionEndInternal = new Subject>(); - @Output() transitionEnd: Observable> = this.transitionEndInternal.asObservable().pipe( - debounceTime(20) - ); + private _transitionEndSubscriber: Subscriber> + @Output() get transitionEnd(): Observable> { + return new Observable(subscriber => this._transitionEndSubscriber = subscriber).pipe( + debounceTime>(20) + ); + } @HostBinding('style.min-width') get cssMinwidth() { return (this.direction === 'horizontal') ? `${ this.getNbGutters() * this.gutterSize }px` : null; @@ -350,7 +364,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { }); } - public clickGutter(event: MouseEvent, gutterOrder: number, gutterNum: number): void { + public clickGutter(event: MouseEvent, gutterNum: number): void { if(this.startPoint && this.startPoint.x === event.pageX && this.startPoint.y === event.pageY) { this.currentGutterNum = gutterNum; @@ -373,21 +387,18 @@ export class SplitComponent implements AfterViewInit, OnDestroy { return; } - this.ngZone.runOutsideAngular(() => { - this.dragListeners.push( this.renderer.listen('document', 'mouseup', (e: MouseEvent) => this.stopDragging()) ); - this.dragListeners.push( this.renderer.listen('document', 'touchend', (e: TouchEvent) => this.stopDragging()) ); - this.dragListeners.push( this.renderer.listen('document', 'touchcancel', (e: TouchEvent) => this.stopDragging()) ); - }); - this.dragStartValues.sizePixelContainer = getPixelSize(this.elRef, this.direction); this.dragStartValues.sizePixelA = getPixelSize(areaA.component.elRef, this.direction); this.dragStartValues.sizePixelB = getPixelSize(areaB.component.elRef, this.direction); this.dragStartValues.sizePercentA = areaA.size; this.dragStartValues.sizePercentB = areaB.size; - this.currentGutterNum = gutterNum; this.ngZone.runOutsideAngular(() => { + 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', 'mousemove', (e: MouseEvent) => this.dragEvent(e, areaA, areaB)) ); this.dragListeners.push( this.renderer.listen('document', 'touchmove', (e: TouchEvent) => this.dragEvent(e, areaA, areaB)) ); }); @@ -471,7 +482,11 @@ export class SplitComponent implements AfterViewInit, OnDestroy { } } - private stopDragging(): void { + private stopDragging(event?: Event): void { + if(event) { + event.preventDefault(); + } + if(this.isDragging === false) { return; } @@ -495,25 +510,43 @@ export class SplitComponent implements AfterViewInit, OnDestroy { this.renderer.removeClass(this.elRef.nativeElement, 'is-dragging'); // Needed to let (click)="clickGutter(...)" event run and verify if mouse moved or not - setTimeout(() => { - this.startPoint = null; - this.endPoint = null; - }) + this.ngZone.runOutsideAngular(() => { + setTimeout(() => { + this.startPoint = null; + this.endPoint = null; + }) + }); } public notify(type: 'start' | 'progress' | 'end' | 'click' | 'transitionEnd'): void { const sizes: Array = this.displayedAreas.map(a => a.size * 100); - this.ngZone.run(() => { - switch(type) { - case 'start': return this.dragStart.emit({gutterNum: this.currentGutterNum, sizes}); - case 'progress': return this.dragProgress.emit({gutterNum: this.currentGutterNum, sizes}); - case 'end': return this.dragEnd.emit({gutterNum: this.currentGutterNum, sizes}); - case 'click': return this.gutterClick.emit({gutterNum: this.currentGutterNum, sizes}); - case 'transitionEnd': return this.transitionEndInternal.next(sizes); + if(type === 'start') { + if(this._dragStartSubscriber) { + this.ngZone.run(() => this._dragStartSubscriber.next({gutterNum: this.currentGutterNum, sizes})); } - }); + } + else if(type === 'progress') { + if(this._dragProgressSubscriber) { + this.ngZone.run(() => this._dragProgressSubscriber.next({gutterNum: this.currentGutterNum, sizes})); + } + } + else if(type === 'end') { + if(this._dragEndSubscriber) { + this.ngZone.run(() => this._dragEndSubscriber.next({gutterNum: this.currentGutterNum, sizes})); + } + } + else if(type === 'click') { + if(this._gutterClickSubscriber) { + this.ngZone.run(() => this._gutterClickSubscriber.next({gutterNum: this.currentGutterNum, sizes})); + } + } + else if(type === 'transitionEnd') { + if(this._transitionEndSubscriber) { + this.ngZone.run(() => this._transitionEndSubscriber.next(sizes)); + } + } } public ngOnDestroy(): void { From cf8e593c779e17834306aca86f14b90843bc2107 Mon Sep 17 00:00:00 2001 From: Gaillard Date: Mon, 26 Nov 2018 11:57:08 +0100 Subject: [PATCH 025/307] v2.0.0-beta.3 fix css selector --- CHANGELOG.md | 6 +++++ projects/angular-split/package.json | 6 ++--- .../src/lib/component/split.component.scss | 22 ++++++++++--------- .../examples/nested.route.component.ts | 2 +- 4 files changed, 22 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 738e21f1..6ee139d9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,10 @@ + +# 2.0.0-beta.3 (2018-11-26) + +* **Style:** Modify `` CSS selector to act only on current split areas children and not on potential sub split areas. + + # 2.0.0-beta.2 (2018-11-19) diff --git a/projects/angular-split/package.json b/projects/angular-split/package.json index 97d08044..5f412d2b 100644 --- a/projects/angular-split/package.json +++ b/projects/angular-split/package.json @@ -1,7 +1,7 @@ { "name": "angular-split", - "version": "2.0.0-beta.2", - "description": "Angular UI library used to split views and to allow dragging to resize the split areas using CSS flexbox layout.", + "version": "2.0.0-beta.3", + "description": "Lightweight Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout.", "author": "bertrandg", "repository": { "type": "git", @@ -10,7 +10,7 @@ "bugs": { "url": "https://github.com/bertrandg/angular-split/issues" }, - "homepage": "https://github.com/bertrandg/angular-split", + "homepage": "https://bertrandg.github.io/angular-split/", "keywords": [ "angular", "split", diff --git a/projects/angular-split/src/lib/component/split.component.scss b/projects/angular-split/src/lib/component/split.component.scss index 4b573628..99de8af4 100644 --- a/projects/angular-split/src/lib/component/split.component.scss +++ b/projects/angular-split/src/lib/component/split.component.scss @@ -16,12 +16,14 @@ background-color: #eeeeee; } - ::ng-deep as-split-area { + ::ng-deep > as-split-area { flex-grow: 0; flex-shrink: 0; overflow-x: hidden; overflow-y: auto; + /* When force size to 0. */ + &.is-hided { flex-basis: 0 !important; overflow-x: hidden; @@ -36,11 +38,11 @@ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=="); cursor: col-resize; - // Fix safari bug about gutter height when direction is horizontal + // Fix safari bug about gutter height when direction is horizontal. height: 100%; } - ::ng-deep as-split-area { + ::ng-deep > as-split-area { height: 100%; } } @@ -55,7 +57,7 @@ width: 100%; } - ::ng-deep as-split-area { + ::ng-deep > as-split-area { width: 100%; &.is-hided { @@ -64,6 +66,8 @@ } } + /* When disabled remove gutters background image and specific cursor. */ + &.is-disabled { & > .as-split-gutter { @@ -72,16 +76,14 @@ } } - &.is-transition.is-init:not(.is-dragging) { + /* Add transition only when transition enabled + split initialized + not currently dragging. */ - & > .as-split-gutter { - transition: flex-basis 0.3s; - } + &.is-transition.is-init:not(.is-dragging) { - ::ng-deep as-split-area { + & > .as-split-gutter, + ::ng-deep > as-split-area { transition: flex-basis 0.3s; } - } } \ No newline at end of file diff --git a/src/app/component/examples/nested.route.component.ts b/src/app/component/examples/nested.route.component.ts index 98a568b1..4d06a647 100644 --- a/src/app/component/examples/nested.route.component.ts +++ b/src/app/component/examples/nested.route.component.ts @@ -14,7 +14,7 @@ import { AComponent } from './AComponent';
- + From 14aa872ee2ee235a915d4b1f511702fe8262d3a3 Mon Sep 17 00:00:00 2001 From: bertrandg Date: Mon, 26 Nov 2018 23:00:48 +0100 Subject: [PATCH 026/307] add cypress tests to geek example page --- cypress/integration/1.simple.spec.js | 108 ++++++++--------- cypress/integration/2.nested.spec.js | 125 +++++++++---------- cypress/integration/4.sync.spec.js | 97 +++++++-------- cypress/integration/5.style.spec.js | 65 +++++----- cypress/integration/7.click.spec.js | 150 ++++++++++++----------- cypress/integration/9.geek.spec.js | 173 +++++++++++++++++++++++++++ 6 files changed, 446 insertions(+), 272 deletions(-) create mode 100644 cypress/integration/9.geek.spec.js diff --git a/cypress/integration/1.simple.spec.js b/cypress/integration/1.simple.spec.js index ee8b9fc8..c0718ff9 100644 --- a/cypress/integration/1.simple.spec.js +++ b/cypress/integration/1.simple.spec.js @@ -1,54 +1,54 @@ -/// - -import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils' - - -context('Simple split example page tests', () => { - const W = 1070; - const H = 300; - const GUTTER = 11; - - beforeEach(() => { - cy.visit('/#/examples/simple-split') - }) - - it('Display initial state', () => { - checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [318, 741]); - }) - - it('Change direction', () => { - cy.get('.btns > .btn').click(); - checkSplitDirAndSizes('as-split', 'vertical', W, H, GUTTER, [87, 202]); - }) - - it('Move gutter horizontally', () => { - moveGutter('.as-split-gutter', 0, 280, 0); - checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [597, 462]); - }) - - it('Change direction & move gutter vertically', () => { - cy.get('.btns > .btn').click(); - moveGutter('.as-split-gutter', 0, 0, 60); - checkSplitDirAndSizes('as-split', 'vertical', W, H, GUTTER, [146, 143]); - }) - - it('Move gutter horizontally and move it back', () => { - moveGutter('.as-split-gutter', 0, 280, 0); - checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [597, 462]); - - moveGutter('.as-split-gutter', 0, -280, 0); - checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [317, 742]); - }) - - it('Move gutter horizontally to max, change direction', () => { - moveGutter('.as-split-gutter', 0, -1000, 0); - checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [0, 1059]); - - cy.get('.btns > .btn').click(); - checkSplitDirAndSizes('as-split', 'vertical', W, H, GUTTER, [0, 289]); - - moveGutter('.as-split-gutter', 0, 0, 1000); - cy.get('.btns > .btn').click(); - checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [1059, 0]); - }) -}) +/// + +import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils' + + +context('Simple split example page tests', () => { + const W = 1070; + const H = 300; + const GUTTER = 11; + + beforeEach(() => { + cy.visit('/#/examples/simple-split') + }) + + it('Display initial state', () => { + checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [318, 741]); + }) + + it('Change direction', () => { + cy.get('.btns > .btn').click(); + checkSplitDirAndSizes('as-split', 'vertical', W, H, GUTTER, [87, 202]); + }) + + it('Move gutter horizontally', () => { + moveGutter('.as-split-gutter', 0, 280, 0); + checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [597, 462]); + }) + + it('Change direction & move gutter vertically', () => { + cy.get('.btns > .btn').click(); + moveGutter('.as-split-gutter', 0, 0, 60); + checkSplitDirAndSizes('as-split', 'vertical', W, H, GUTTER, [146, 143]); + }) + + it('Move gutter horizontally and move it back', () => { + moveGutter('.as-split-gutter', 0, 280, 0); + checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [597, 462]); + + moveGutter('.as-split-gutter', 0, -280, 0); + checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [317, 742]); + }) + + it('Move gutter horizontally to max, change direction', () => { + moveGutter('.as-split-gutter', 0, -1000, 0); + checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [0, 1059]); + + cy.get('.btns > .btn').click(); + checkSplitDirAndSizes('as-split', 'vertical', W, H, GUTTER, [0, 289]); + + moveGutter('.as-split-gutter', 0, 0, 1000); + cy.get('.btns > .btn').click(); + checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [1059, 0]); + }) +}) diff --git a/cypress/integration/2.nested.spec.js b/cypress/integration/2.nested.spec.js index 9f7d2bfb..61a4d10d 100644 --- a/cypress/integration/2.nested.spec.js +++ b/cypress/integration/2.nested.spec.js @@ -1,62 +1,63 @@ -/// - -import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils' - -context('Nested splits example page tests', () => { - const W = 1070; - const H = 400; - const GUTTER = 11; - - beforeEach(() => { - cy.visit('/#/examples/nested-split') - }) - - it('Display initial state', () => { - checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [424, 635]); - - checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [126, 126, 126]); - checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'vertical', 635, H, GUTTER, [97, 292]); - }) - - it('Move gutter horizontally 3 times and until maximum', () => { - moveGutter('.split-example > as-split > .as-split-gutter', 0, 280, 0); - - checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [703, 356]); - - moveGutter('.split-example > as-split > .as-split-gutter', 0, -80, 0); - - checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [623, 436]); - - moveGutter('.split-example > as-split > .as-split-gutter', 0, 700, 0); - - checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [1059, 0]); - }) - - it('Move nested split 1 multiple times', () => { - moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, 60); - checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [186, 66, 126]); - - moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 1, 0, -300); - checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [186, 0, 192]); - - // Move space smaller than gutter > nothing change - moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -10); - checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [186, 0, 192]); - - // Move space same as gutter > move - moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -GUTTER); - checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [175, 11, 192]); - - // Move space bigger than gutter > move - moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -20); - checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [155, 31, 192]); - }) - - it('Move nested split 2 multiple times', () => { - moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 0, 600); - checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'vertical', 635, H, GUTTER, [389, 0]); - - moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 0, -600); - checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'vertical', 635, H, GUTTER, [0, 389]); - }) -}) +/// + +import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils' + +context('Nested splits example page tests', () => { + const W = 1070; + const H = 400; + const GUTTER = 11; + + beforeEach(() => { + cy.visit('/#/examples/nested-split') + }) + + it('Display initial state', () => { + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [424, 635]); + + checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [126, 126, 126]); + checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'vertical', 635, H, GUTTER, [97, 292]); + }) + + it('Move gutter horizontally 3 times and until maximum', () => { + moveGutter('.split-example > as-split > .as-split-gutter', 0, 280, 0); + + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [703, 356]); + + moveGutter('.split-example > as-split > .as-split-gutter', 0, -80, 0); + + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [623, 436]); + + moveGutter('.split-example > as-split > .as-split-gutter', 0, 700, 0); + + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [1059, 0]); + }) + + it('Move nested split 1 multiple times', () => { + moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, 60); + checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [186, 66, 126]); + + moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 1, 0, -300); + checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [186, 0, 192]); + + // Move space smaller than gutter > nothing change + moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -10); + checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [186, 0, 192]); + + // Move space same as gutter > move + moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -GUTTER); + checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [175, 11, 192]); + + // Move space bigger than gutter > move + moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 0, -20); + checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'vertical', 424, H, GUTTER, [155, 31, 192]); + }) + + it('Move nested split 2 multiple times', () => { + moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 0, 600); + checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'vertical', 635, H, GUTTER, [389, 0]); + + moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 0, -600); + checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'vertical', 635, H, GUTTER, [0, 389]); + }) + +}) diff --git a/cypress/integration/4.sync.spec.js b/cypress/integration/4.sync.spec.js index 3d8d3d94..d2a862c4 100644 --- a/cypress/integration/4.sync.spec.js +++ b/cypress/integration/4.sync.spec.js @@ -1,48 +1,49 @@ -/// - -import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils' - - -context('Sync splits example page tests', () => { - const W = 1070; - const H = 300; - const GUTTER = 11; - - beforeEach(() => { - cy.visit('/#/examples/sync-split') - }) - - it('Display initial state', () => { - checkSplitDirAndSizes('.split-example > as-split', 'vertical', W, H, GUTTER, [87, 202]); - checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [265, 794]); - checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [265, 794]); - }) - - it('Move gutter upper split horizontally and check if other split follow', () => { - moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 280, 0); - checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [544, 515]); - checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [544, 515]); - - moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 600, 0); - checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [1059, 0]); - checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [1059, 0]); - - moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, -1500, 0); - checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [0, 1059]); - checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [0, 1059]); - }) - - it('Move gutter down split horizontally and check if other split follow', () => { - moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 280, 0); - checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [544, 515]); - checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [544, 515]); - - moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 600, 0); - checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [1059, 0]); - checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [1059, 0]); - - moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, -1500, 0); - checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [0, 1059]); - checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [0, 1059]); - }) -}) +/// + +import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils' + + +context('Sync splits example page tests', () => { + const W = 1070; + const H = 300; + const GUTTER = 11; + + beforeEach(() => { + cy.visit('/#/examples/sync-split') + }) + + it('Display initial state', () => { + checkSplitDirAndSizes('.split-example > as-split', 'vertical', W, H, GUTTER, [87, 202]); + checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [265, 794]); + checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [265, 794]); + }) + + it('Move gutter upper split horizontally and check if other split follow', () => { + moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 280, 0); + checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [544, 515]); + checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [544, 515]); + + moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, 600, 0); + checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [1059, 0]); + checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [1059, 0]); + + moveGutter('.split-example > as-split > as-split-area:nth-child(1) > as-split > .as-split-gutter', 0, -1500, 0); + checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [0, 1059]); + checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [0, 1059]); + }) + + it('Move gutter down split horizontally and check if other split follow', () => { + moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 280, 0); + checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [544, 515]); + checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [544, 515]); + + moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, 600, 0); + checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [1059, 0]); + checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [1059, 0]); + + moveGutter('.split-example > as-split > as-split-area:nth-child(2) > as-split > .as-split-gutter', 0, -1500, 0); + checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(1) > as-split', 'horizontal', W, 87, GUTTER, [0, 1059]); + checkSplitDirAndSizes('.split-example > as-split > as-split-area:nth-child(2) > as-split', 'horizontal', W, 202, GUTTER, [0, 1059]); + }) + +}) diff --git a/cypress/integration/5.style.spec.js b/cypress/integration/5.style.spec.js index 438a6b37..3f25c411 100644 --- a/cypress/integration/5.style.spec.js +++ b/cypress/integration/5.style.spec.js @@ -1,32 +1,33 @@ -/// - -import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils' - - -context('Custom split style example page tests', () => { - const W = 1070; - const H = 300; - const GUTTER = 30; - const COLOR = 'rgb(255, 255, 0)'; - const IMGH = `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAjCAYAAABl/XGVAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANkSURBVEiJrddfaJdlFAfwzztda6tdZNo/pZstWlmhSy8siiwhGfQP3IWRIGUEJRgFQXTbZRBeFBhlBv25iFD6s4zCqI0GaWXEhNK5tTCUsJGUWQtOF++zeH7vfnO/3/JcPef7nOd8z3ne5znPeWlCgi3BeHAieDoomlnfDNGy4HBwabAoGAieOReOW4Lu4IIMuyd4LdMXBceCJY36bamXAb7C2/g+eC5YgFPonLYr+DXZ3J/WtQZ9wfrgvEazejHYmsbtwa7g1eDC4OegPbNdGXwdtAXDwVvBm8Fg0DpnZliMsRT9n9iCbmzAPtybZfeNMutnMVawsSgz/QmbGsnsoeD1CrYs+DHYFuytzD0RTAWPZtiGYGcjZK3BgaC/gvcFI+nYL60EEsGTGbYq+CRYF7wQPBWcPxthV8qkq4K/FJwJNmdYWyLbnmGXBKeD74L7gpeDV86WYX+wP2jLsDuS460V26lgT6YXiWxV0tuDk/UOCCjKYz2OuzN4EL+ho2L+Oy6qXe54wYGkT1H/NOayG32Zh7/xkez4JzmN/Zl+PX7J9CsxMRfZXtwZtUG9X4fsD3yW6bfgaKZ3YfSsZKlKjEp7n2RA9h2TnMJQpt+sNtPuOcky5+uzAE5ipGIzVjCZ6V3YQXlY8DDea4RsBFdVsOHpQdriLzL9Guwqyq2lvK/HC4YEPcGHwQdR7nWNBL3BpxWsJRsvqLwOj0/XxTR3KOidnvw42BTcFoxWCYOlwaEGdmDaviMbb47yCv0HTGaRrA2+rCy+Lvi2UbJs3ZJgLOipIasYHQmuyPT+4I15kO0OtlXBo8HFFaPbg4XBAym6m+ZBdiTK56oG3BusyfTH0kcdD3YGy5slSn5ORPXFDrbnVTxhq/Ns50HUGeUDWiML8QOuzsGi9vbPR1aoc4JblIV1Y6TG5RzJGtnFr5H02g4HO2bs8zwk2BOsO5tBWyIbCi7/H0RFlP1kZyPGD6brMKN0NUjWE2Xf2fCCG1N0i+e2nrH2keD5enN1q35RRvYu7mqWDLfi84bJkgxi9TzIenGwWbIJWX/YhFyGY82SjeHaqNOzzybBSkymxqg5SaXsYJQt+fIo+/p8viNYkd6td4KJYO1s/ub8c0wVvx83KJ/8FuXF/wdncFhZmgawr+Cv2Xz9Cy1ParntgE8FAAAAAElFTkSuQmCC")`; - const IMGV = `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAdCAYAAAAgqdWEAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAOxSURBVEiJtddtzNdTGAfwz7+6y91qKpaGF0UjY8JmrIw1sdj0YFMeMzYLJWaUmac1bfQiw0hkkjErTy+whrARm0zztHmYp3mayjyFkny9+J3bfv7uf3e3/p03v3Od872u8z3Xua7rnB9tamFQmB1eDhvC7+G7sCZcHw5u11o9ETkmPBBODgeGjtBZ+qeEZWFjeCKM2Z1ExodN4eKwPBzdAtc/XB6+DbPbsfCwcEI5jqXhvfBLeCacFfrvhI2R4f1wW2jU5xotFPrhMIwt38PLd198ibexHi9hbYM/ermp4ViD1Q2ubgU6LjwafgwJH4cHw5XhxDCsN4v2QGifEuDTmic6wpJC4KewIBzSwkiPR9ELQqeH7/+1ybCoEFka9qqNd4ZTwx0lZW8Pg9tFpqzxdLilSzggbA831gATwqrC+vkwP4xuJ4naWhPD5jBIuDG8HfqGGaW/KkwJA5sURxV822pFaISPwpmNsBq/YgS2YVaDD+tgnIQ5GIXzG7y1iwQGNNhak+9Dp/BpiZcVoW8NMDjMDR+UenJuSfldbs0ZFC4K65XsWd+1UBgabi3p/UqYXC9O4YhwXbghdPxPMvPCkTV5fPhFqaCTyuBp4ZvwQji2ycDk8E54N8xpjqdekrkszKrJR4Ytwlep7o1zwp+p7o+6J4aEx8I9qarwLrfimcU1eVL4vB9+wBDcjXkNbq+B9sMjuKJRlf92tYH4syaPwzrhs+KNN5o8MrSk+fFtJNFle3mYX/qdJYlmCJ8UQjObFFaEle0mUmx/HMaFPqneQe+GDiVYE/avgSeEv8IRO2m8IxwVLgn3hyk7wB4Tfk715Fib6lV4aNfkveHzJoVnw3M9LD41LA6vht/Khr4MN4XOFnqN2ua/CHemepb8A7gmrK3JI4pXprYwODJV+V4TFtZInB36tNpA0V0YtpQC+t+3VJge3qzJ0wrrvt1gO8K6cs57hNfDi6nd9C1IDC0xuK3VJruAo4snpoc9w5Ph2hbY21JdDQPCXeWI9tiB7WHF8xtSVfTWRGpKTxV3p7hxeDeYS0tsjC1BuDHs08LeQYXs5lTPkEWtsN0pd4bVhczD3cxflao6n1fkh8KCbnBjUv2ObE91r81sFcw9Edq7kJlaGxseVoat4cLa+DvN6ZvqV2VLOcaJvSbQDaGvS0BOS3UrbyqZM74J91q4uSZfUDby+I5iqLdkJqSqyNtTPSvmhgHd4OaWzFiWqtZsLTVjh6m9W1qqMr6kBPRH4Yx22P0bNcolauCjiTYAAAAASUVORK5CYII=")` - - beforeEach(() => { - cy.visit('/#/examples/custom-gutter-style') - }) - - it('Veriy gutter size color and horizontal image', () => { - checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [312, 728]); - - cy.get('as-split > .as-split-gutter').should('have.css', 'background-color', COLOR); - cy.get('as-split > .as-split-gutter').should('have.css', 'background-image', IMGH); - }) - - it('Change direction', () => { - cy.get('.btns > .btn').click(); - checkSplitDirAndSizes('as-split', 'vertical', W, H, GUTTER, [81, 189]); - - cy.get('as-split > .as-split-gutter').should('have.css', 'background-color', COLOR); - cy.get('as-split > .as-split-gutter').should('have.css', 'background-image', IMGV); - }) -}) +/// + +import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils' + + +context('Custom split style example page tests', () => { + const W = 1070; + const H = 300; + const GUTTER = 30; + const COLOR = 'rgb(255, 255, 0)'; + const IMGH = `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAjCAYAAABl/XGVAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANkSURBVEiJrddfaJdlFAfwzztda6tdZNo/pZstWlmhSy8siiwhGfQP3IWRIGUEJRgFQXTbZRBeFBhlBv25iFD6s4zCqI0GaWXEhNK5tTCUsJGUWQtOF++zeH7vfnO/3/JcPef7nOd8z3ne5znPeWlCgi3BeHAieDoomlnfDNGy4HBwabAoGAieOReOW4Lu4IIMuyd4LdMXBceCJY36bamXAb7C2/g+eC5YgFPonLYr+DXZ3J/WtQZ9wfrgvEazejHYmsbtwa7g1eDC4OegPbNdGXwdtAXDwVvBm8Fg0DpnZliMsRT9n9iCbmzAPtybZfeNMutnMVawsSgz/QmbGsnsoeD1CrYs+DHYFuytzD0RTAWPZtiGYGcjZK3BgaC/gvcFI+nYL60EEsGTGbYq+CRYF7wQPBWcPxthV8qkq4K/FJwJNmdYWyLbnmGXBKeD74L7gpeDV86WYX+wP2jLsDuS460V26lgT6YXiWxV0tuDk/UOCCjKYz2OuzN4EL+ho2L+Oy6qXe54wYGkT1H/NOayG32Zh7/xkez4JzmN/Zl+PX7J9CsxMRfZXtwZtUG9X4fsD3yW6bfgaKZ3YfSsZKlKjEp7n2RA9h2TnMJQpt+sNtPuOcky5+uzAE5ipGIzVjCZ6V3YQXlY8DDea4RsBFdVsOHpQdriLzL9Guwqyq2lvK/HC4YEPcGHwQdR7nWNBL3BpxWsJRsvqLwOj0/XxTR3KOidnvw42BTcFoxWCYOlwaEGdmDaviMbb47yCv0HTGaRrA2+rCy+Lvi2UbJs3ZJgLOipIasYHQmuyPT+4I15kO0OtlXBo8HFFaPbg4XBAym6m+ZBdiTK56oG3BusyfTH0kcdD3YGy5slSn5ORPXFDrbnVTxhq/Ns50HUGeUDWiML8QOuzsGi9vbPR1aoc4JblIV1Y6TG5RzJGtnFr5H02g4HO2bs8zwk2BOsO5tBWyIbCi7/H0RFlP1kZyPGD6brMKN0NUjWE2Xf2fCCG1N0i+e2nrH2keD5enN1q35RRvYu7mqWDLfi84bJkgxi9TzIenGwWbIJWX/YhFyGY82SjeHaqNOzzybBSkymxqg5SaXsYJQt+fIo+/p8viNYkd6td4KJYO1s/ub8c0wVvx83KJ/8FuXF/wdncFhZmgawr+Cv2Xz9Cy1ParntgE8FAAAAAElFTkSuQmCC")`; + const IMGV = `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAdCAYAAAAgqdWEAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAOxSURBVEiJtddtzNdTGAfwz7+6y91qKpaGF0UjY8JmrIw1sdj0YFMeMzYLJWaUmac1bfQiw0hkkjErTy+whrARm0zztHmYp3mayjyFkny9+J3bfv7uf3e3/p03v3Od872u8z3Xua7rnB9tamFQmB1eDhvC7+G7sCZcHw5u11o9ETkmPBBODgeGjtBZ+qeEZWFjeCKM2Z1ExodN4eKwPBzdAtc/XB6+DbPbsfCwcEI5jqXhvfBLeCacFfrvhI2R4f1wW2jU5xotFPrhMIwt38PLd198ibexHi9hbYM/ermp4ViD1Q2ubgU6LjwafgwJH4cHw5XhxDCsN4v2QGifEuDTmic6wpJC4KewIBzSwkiPR9ELQqeH7/+1ybCoEFka9qqNd4ZTwx0lZW8Pg9tFpqzxdLilSzggbA831gATwqrC+vkwP4xuJ4naWhPD5jBIuDG8HfqGGaW/KkwJA5sURxV822pFaISPwpmNsBq/YgS2YVaDD+tgnIQ5GIXzG7y1iwQGNNhak+9Dp/BpiZcVoW8NMDjMDR+UenJuSfldbs0ZFC4K65XsWd+1UBgabi3p/UqYXC9O4YhwXbghdPxPMvPCkTV5fPhFqaCTyuBp4ZvwQji2ycDk8E54N8xpjqdekrkszKrJR4Ytwlep7o1zwp+p7o+6J4aEx8I9qarwLrfimcU1eVL4vB9+wBDcjXkNbq+B9sMjuKJRlf92tYH4syaPwzrhs+KNN5o8MrSk+fFtJNFle3mYX/qdJYlmCJ8UQjObFFaEle0mUmx/HMaFPqneQe+GDiVYE/avgSeEv8IRO2m8IxwVLgn3hyk7wB4Tfk715Fib6lV4aNfkveHzJoVnw3M9LD41LA6vht/Khr4MN4XOFnqN2ua/CHemepb8A7gmrK3JI4pXprYwODJV+V4TFtZInB36tNpA0V0YtpQC+t+3VJge3qzJ0wrrvt1gO8K6cs57hNfDi6nd9C1IDC0xuK3VJruAo4snpoc9w5Ph2hbY21JdDQPCXeWI9tiB7WHF8xtSVfTWRGpKTxV3p7hxeDeYS0tsjC1BuDHs08LeQYXs5lTPkEWtsN0pd4bVhczD3cxflao6n1fkh8KCbnBjUv2ObE91r81sFcw9Edq7kJlaGxseVoat4cLa+DvN6ZvqV2VLOcaJvSbQDaGvS0BOS3UrbyqZM74J91q4uSZfUDby+I5iqLdkJqSqyNtTPSvmhgHd4OaWzFiWqtZsLTVjh6m9W1qqMr6kBPRH4Yx22P0bNcolauCjiTYAAAAASUVORK5CYII=")` + + beforeEach(() => { + cy.visit('/#/examples/custom-gutter-style') + }) + + it('Veriy gutter size color and horizontal image', () => { + checkSplitDirAndSizes('as-split', 'horizontal', W, H, GUTTER, [312, 728]); + + cy.get('as-split > .as-split-gutter').should('have.css', 'background-color', COLOR); + cy.get('as-split > .as-split-gutter').should('have.css', 'background-image', IMGH); + }) + + it('Change direction', () => { + cy.get('.btns > .btn').click(); + checkSplitDirAndSizes('as-split', 'vertical', W, H, GUTTER, [81, 189]); + + cy.get('as-split > .as-split-gutter').should('have.css', 'background-color', COLOR); + cy.get('as-split > .as-split-gutter').should('have.css', 'background-image', IMGV); + }) + +}) diff --git a/cypress/integration/7.click.spec.js b/cypress/integration/7.click.spec.js index afd7f8d0..996f160a 100644 --- a/cypress/integration/7.click.spec.js +++ b/cypress/integration/7.click.spec.js @@ -1,76 +1,74 @@ -/// - -import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils' - - -context('Gutter click example page tests', () => { - const W = 1070; - const H = 300; - const GUTTER = 10; - - beforeEach(() => { - cy.visit('/#/examples/gutter-click-roll-unroll') - }) - - it('Display initial state', () => { - checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [263, 525, 262]); - }) - - it('Click gutters to switch area sizes between 0 and X', () => { - cy.get('.as-split-gutter').eq(0).click(); - checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 788, 262]); - - cy.get('.as-split-gutter').eq(0).click(); - checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [263, 525, 262]); - - cy.get('.as-split-gutter').eq(0).click(); - checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 788, 262]); - - cy.get('.as-split-gutter').eq(1).click(); - checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 1050, 0]); - - cy.get('.as-split-gutter').eq(0).click(); - checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [263, 787, 0]); - - cy.get('.as-split-gutter').eq(1).click(); - checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [263, 525, 262]); - - cy.get('.logs ul li').should('have.length', 6); - }) - - it('Mix gutter click and dragging', () => { - moveGutter('.as-split-gutter', 0, -100, 0); - checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [263, 525, 262]); - cy.get('.logs ul li').should('have.length', 0); - - cy.get('.btns button').eq(1).click(); - - moveGutter('.as-split-gutter', 0, -100, 0); - checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [163, 624, 263]); - - cy.get('.logs ul li').should('have.length', 6); - - cy.get('.as-split-gutter').eq(0).click(); - checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 788, 262]); - cy.get('.logs ul li').should('have.length', 8); - - cy.get('.as-split-gutter').eq(1).click(); - checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 1050, 0]); - cy.get('.logs ul li').should('have.length', 10); - - moveGutter('.as-split-gutter', 1, -20, 0); - checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 1030, 20]); - cy.get('.logs ul li').should('have.length', 16); - - cy.get('.as-split-gutter').eq(1).click(); - checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 788, 262]); - cy.get('.logs ul li').should('have.length', 18); - - cy.get('.as-split-gutter').eq(0).click(); - checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [263, 525, 262]); - cy.get('.logs ul li').should('have.length', 20); - - }) - - -}) +/// + +import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils' + + +context('Gutter click example page tests', () => { + const W = 1070; + const H = 300; + const GUTTER = 10; + + beforeEach(() => { + cy.visit('/#/examples/gutter-click-roll-unroll') + }) + + it('Display initial state', () => { + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [263, 525, 262]); + }) + + it('Click gutters to switch area sizes between 0 and X', () => { + cy.get('.as-split-gutter').eq(0).click(); + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 788, 262]); + + cy.get('.as-split-gutter').eq(0).click(); + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [263, 525, 262]); + + cy.get('.as-split-gutter').eq(0).click(); + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 788, 262]); + + cy.get('.as-split-gutter').eq(1).click(); + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 1050, 0]); + + cy.get('.as-split-gutter').eq(0).click(); + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [263, 787, 0]); + + cy.get('.as-split-gutter').eq(1).click(); + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [263, 525, 262]); + + cy.get('.logs ul li').should('have.length', 6); + }) + + it('Mix gutter click and dragging', () => { + moveGutter('.as-split-gutter', 0, -100, 0); + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [263, 525, 262]); + cy.get('.logs ul li').should('have.length', 0); + + cy.get('.btns button').eq(1).click(); + + moveGutter('.as-split-gutter', 0, -100, 0); + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [163, 624, 263]); + + cy.get('.logs ul li').should('have.length', 6); + + cy.get('.as-split-gutter').eq(0).click(); + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 788, 262]); + cy.get('.logs ul li').should('have.length', 8); + + cy.get('.as-split-gutter').eq(1).click(); + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 1050, 0]); + cy.get('.logs ul li').should('have.length', 10); + + moveGutter('.as-split-gutter', 1, -20, 0); + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 1030, 20]); + cy.get('.logs ul li').should('have.length', 16); + + cy.get('.as-split-gutter').eq(1).click(); + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [0, 788, 262]); + cy.get('.logs ul li').should('have.length', 18); + + cy.get('.as-split-gutter').eq(0).click(); + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [263, 525, 262]); + cy.get('.logs ul li').should('have.length', 20); + }) + +}) diff --git a/cypress/integration/9.geek.spec.js b/cypress/integration/9.geek.spec.js new file mode 100644 index 00000000..d12457ba --- /dev/null +++ b/cypress/integration/9.geek.spec.js @@ -0,0 +1,173 @@ +/// + +import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils' + + +context('Geek demo example page tests', () => { + const W = 1070; + const H = 300; + const GUTTER = 11; + + beforeEach(() => { + cy.visit('/#/examples/geek-demo'); + }) + + it('Display initial state', () => { + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [262, 524, 262]); + cy.get('.opts-area div[draggable="true"]').should('have.length', 3); + }) + + it('Change direction / width / height / gutter size', () => { + cy.get('.opts-prop .btn').contains('vertical').click(); + checkSplitDirAndSizes('.split-example > as-split', 'vertical', W, H, GUTTER, [70, 139, 69]); + + cy.get('.opts-prop .btn').contains('400').click(); + checkSplitDirAndSizes('.split-example > as-split', 'vertical', 400, H, GUTTER, [70, 139, 69]); + + cy.get('.opts-prop .btn').contains('horizontal').click(); + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', 400, H, GUTTER, [95, 189, 94]); + + cy.get('.opts-prop .btn').contains('600').click(); + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', 600, H, GUTTER, [145, 289, 144]); + + cy.get('.opts-prop .btn').contains('200').click(); + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', 600, 200, GUTTER, [145, 289, 144]); + + cy.get('.opts-prop .btn').contains('vertical').click(); + checkSplitDirAndSizes('.split-example > as-split', 'vertical', 600, 200, GUTTER, [45, 89, 44]); + + cy.get('.opts-prop .btn').contains('350').click(); + checkSplitDirAndSizes('.split-example > as-split', 'vertical', 600, 350, GUTTER, [82, 164, 82]); + + cy.get('.opts-prop .btn').contains('7').click(); + checkSplitDirAndSizes('.split-example > as-split', 'vertical', 600, 350, 7, [84, 168, 84]); + + cy.get('.opts-prop .btn').contains('horizontal').click(); + cy.get('.opts-prop .btn').contains('22').click(); + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', 600, 350, 22, [139, 278, 139]); + + cy.get('.opts-prop').contains('Width: ').parent().contains('null').click(); + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, 350, 22, [257, 513, 256]); + }) + + + it('Add areas, move all to limit and change direction / gutter size', () => { + cy.get('.opts-area .btn').contains('Add area').click(); + cy.get('.opts-area .btn').contains('Add area').click(); + cy.get('.opts-area .btn').contains('Add area').click(); + cy.get('.opts-area .btn').contains('Add area').click(); + cy.get('.opts-area .btn').contains('Add area').click(); + + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [124, 124, 124, 125, 124, 124, 124, 124]); + cy.get('.opts-area div[draggable="true"]').should('have.length', 8); + + cy.get('.opts-prop .btn').contains('vertical').click(); + checkSplitDirAndSizes('.split-example > as-split', 'vertical', W, H, GUTTER, [28, 28, 28, 28, 27, 28, 28, 28]); + + moveGutter('.as-split-gutter', 0, 0, -200); + moveGutter('.as-split-gutter', 1, 0, -200); + moveGutter('.as-split-gutter', 2, 0, -200); + moveGutter('.as-split-gutter', 3, 0, -200); + moveGutter('.as-split-gutter', 4, 0, -200); + moveGutter('.as-split-gutter', 5, 0, -200); + moveGutter('.as-split-gutter', 6, 0, -200); + checkSplitDirAndSizes('.split-example > as-split', 'vertical', W, H, GUTTER, [0, 0, 0, 0, 0, 0, 0, 223]); + + moveGutter('.as-split-gutter', 0, 0, 100); + moveGutter('.as-split-gutter', 1, 0, 100); + moveGutter('.as-split-gutter', 2, 0, 100); + moveGutter('.as-split-gutter', 3, 0, 100); + moveGutter('.as-split-gutter', 4, 0, 100); + moveGutter('.as-split-gutter', 5, 0, 100); + moveGutter('.as-split-gutter', 6, 0, 100); + checkSplitDirAndSizes('.split-example > as-split', 'vertical', W, H, GUTTER, [0, 0, 0, 0, 0, 0, 100, 123]); + + moveGutter('.as-split-gutter', 5, 0, 150); + moveGutter('.as-split-gutter', 4, 0, 150); + moveGutter('.as-split-gutter', 3, 0, 150); + moveGutter('.as-split-gutter', 2, 0, 150); + moveGutter('.as-split-gutter', 1, 0, 150); + moveGutter('.as-split-gutter', 0, 0, 150); + checkSplitDirAndSizes('.split-example > as-split', 'vertical', W, H, GUTTER, [100, 0, 0, 0, 0, 0, 0, 123]); + + cy.get('.opts-prop .btn').contains('horizontal').click(); + cy.get('.opts-prop .btn').contains('200').click(); + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, 200, GUTTER, [445, 0, 0, 0, 0, 0, 0, 548]); + + cy.get('.opts-area .btn').contains('Add area').click(); + cy.get('.opts-area .btn').contains('Add area').click(); + cy.get('.opts-area .btn').contains('Add area').click(); + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, 200, GUTTER, [87, 88, 87, 87, 87, 88, 87, 87, 87, 88, 87]); + cy.get('.opts-area div[draggable="true"]').should('have.length', 11); + + cy.get('.opts-prop .btn').contains('22').click(); + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, 200, 22, [77, 78, 77, 77, 77, 78, 77, 77, 77, 78, 77]); + + cy.get('.opts-prop .btn').contains('vertical').click(); + checkSplitDirAndSizes('.split-example > as-split', 'vertical', W, 220 /* <- because gutterSize*nbGutter */, 22, [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]); + + cy.get('.opts-prop .btn').contains('horizontal').click(); + checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, 200, 22, [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 850]); + }) + + + it.only('Add areas, check order, move them and check order', () => { + // cy.get('.opts-area .btn').contains('Add area').click(); + // cy.get('.opts-area .btn').contains('Add area').click(); + // cy.get('.opts-area .btn').contains('Add area').click(); + // cy.get('.opts-area .btn').contains('Add area').click(); + // cy.get('.opts-area .btn').contains('Add area').click(); + + // checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [124, 124, 124, 125, 124, 124, 124, 124]); + // cy.get('.opts-area div[draggable="true"]').should('have.length', 8); + // checkAreaOrder(); + + moveArea(0, 2); + checkAreaOrder(); + }) + + +}) + + + +function checkAreaOrder() { + // Retrieve all displayed in order + cy.get('as-split-area').then($splitAreas => { + const splitAreasNum = $splitAreas.map((i, $el) => $el.textContent); + + // Retrieve all listed areas displayed in order + cy.get('.opts-area div[draggable="true"] .num').then($controlAreas => { + const controlAreasNum = $controlAreas.map((i, $el) => $el.textContent); + + // Compare 2 lists > should be the same + expect(splitAreasNum.get()).to.deep.eq(controlAreasNum.get()); + }); + }) +} + +function moveArea(numArea, gap) { + const dataTransfer = new DataTransfer(); + dataTransfer.effectAllowed = 'all'; + + const dataTransferOptions = { + dataTransfer/*: { + dropEffect: 'none', + effectAllowed: 'all', + files: [], + types: ['Text'], + setData: (x, y) => {}, + //getData: k => 'placeholder', + }*/ + }; + + cy.get('.opts-area div[draggable="true"]').eq(numArea).as('movedItem') + .get('.opts-area div[draggable="true"]').eq(numArea + gap).as('destItem') + .get('bs-sortable > div').as('dropDiv') + .get('@movedItem') + .trigger('dragstart', dataTransferOptions) + .get('@destItem') + .trigger('dragover', dataTransferOptions) + .get('@dropDiv') + .trigger('drop', dataTransferOptions); +} \ No newline at end of file From 7b6b26a329dc39eebb6d591ce1512dbbda47516e Mon Sep 17 00:00:00 2001 From: bertrandg Date: Wed, 28 Nov 2018 22:30:36 +0100 Subject: [PATCH 027/307] v2.0.0-beta.4 --- CHANGELOG.md | 437 +++---- projects/angular-split/package.json | 2 +- .../src/lib/component/split.component.scss | 198 +-- .../src/lib/component/split.component.ts | 1112 +++++++++-------- .../directive/eventOutsideZone.directive.ts | 70 ++ .../src/lib/directive/splitArea.directive.ts | 238 ++-- .../customGutterStyle.route.component.scss | 110 ++ .../customGutterStyle.route.component.ts | 88 +- .../examples/geekDemo.route.component.ts | 346 ++--- .../examples/sync.route.component.ts | 86 +- src/index.html | 27 +- 11 files changed, 1457 insertions(+), 1257 deletions(-) create mode 100644 projects/angular-split/src/lib/directive/eventOutsideZone.directive.ts create mode 100644 src/app/component/examples/customGutterStyle.route.component.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 6ee139d9..57795c0e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,215 +1,222 @@ - - -# 2.0.0-beta.3 (2018-11-26) - -* **Style:** Modify `` CSS selector to act only on current split areas children and not on potential sub split areas. - - - -# 2.0.0-beta.2 (2018-11-19) - -* **Performance:** Make `@Output()` event emitters (`dragStart`, `dragProgress`, `dragEnd`, `gutterClick`, `transitionEnd`) works "lazily" to avoid useless change detection runs, especially for `dragProgress` which could be costly in big app. - - - -# 2.0.0-beta.1 (2018-11-17) - -* **Styles:** Refactor the way styles are manage, no more `renderer.setStyle()` everywhere (except for areas `order` & `flex-basis`), now works with added/removed classes (`is-horizontal`/`is-vertical`, `is-disabled`, `is-transition`, `is-disabled`, `is-dragging`), way better. Doing like this, `` directive is not needed anymore. - - - -# 1.0.4 (2018-11-15) - -* **Bug:** Fix Edge first rendering issue with nested split by applying css flex-direction property differently on `` [#125](https://github.com/bertrandg/angular-split/issues/125). - - - -# 1.0.3 (2018-11-14) - -* **Critiqual bug:** Remove reference to `TouchEvent` which cause error on Firefox & IE/Edge. Introduced in `1.0.1` but was there [before](https://github.com/bertrandg/angular-split/blob/c71b7cf10a66a698820e91962d06cf35b726edc2/projects/angular-split/src/lib/component/split.component.ts#L478) on mobile browser other than chromium based. - - - -# 1.0.2 (2018-11-13) - -* **Bug:** Modify the way to emit gutterClick event which was buggy [#109](https://github.com/bertrandg/angular-split/issues/109). - - - -# 1.0.1 (2018-11-13) - -* **Bug:** Some events were emitted outside of Zone.js leading to errors like [#118](https://github.com/bertrandg/angular-split/issues/118) & [#109](https://github.com/bertrandg/angular-split/issues/109). - - - -# 1.0.0 (2018-11-10) - -* **Project organization:** Now follow `@angular/cli` library management way which is awesome: [Library status update ๐Ÿ“ข](https://github.com/bertrandg/angular-split/issues/122). -* **Dependencies:** `angular@^7` and `rxjs@^6` with pipe method (`rxjs-compat` not needed anymore). -* **Breaking changes:** Prefix `as-` added to component/directive to follow best practises: `` & ``. -* **Regression:** Revert change about `devicePixelRatio` added in `1.0.0-rc.3` because it was causing bad behavior on mobile [#85](https://github.com/bertrandg/angular-split/issues/85), need to investigate more to resolve [#81](https://github.com/bertrandg/angular-split/issues/81). - - - -# 1.0.0-rc.3 (2018-01-31) - -* **Bug:** Use `devicePixelRatio` to make dragging value effective on HiDPI screen and browsers with zoom !== 100%, thanks to [tkglaser](https://github.com/tkglaser) and [HondaHiroyuki](https://github.com/HondaHiroyuki). - - - -# 1.0.0-rc.1 (2018-01-13) - -* **Performances:** Put all event listeners inside `ngZone.runOutsideAngular()` to avoid triggering change detection during drag, thanks to [klemenoslaj](https://github.com/klemenoslaj). - - - -# 1.0.0-rc.0 (2017-12-01) - -* **Bug:** Call `cdRef.markForCheck()` in several setters inside `SplitComponent` to force repaint if modified from TS class (instead of the template). - - - -# 1.0.0-beta.9 (2017-11-19) - -* **Feature:** Add RTL support. Previously on 'right to the left' pages, dragging went opposite side, [issue here](https://github.com/bertrandg/angular-split/issues/48). Now just add `dir="ltr"` on `` component and that's fix. -* **Bug:** Fix small bug when updating `[gutterSize]` with `useTransition="true"`, now gutter's size got transition too and it's visually better. - - - -# 1.0.0-beta.8 (2017-11-17) - -* **Bug:** When updating `[disabled]`, `[direction]`, `[width]`, `[height]`,.. keep size values got after gutter being dragged instead of reset to user provided values. -* **Bug:** When `[useTransition]="true"`, no more transition at component initialisation. - - - -# 1.0.0-beta.7 (2017-11-16) - -* **gutterSize:** Default value from `10` to `11` because of a small discrepancy in the shown dots position pointed [there](https://github.com/bertrandg/angular-split/issues/46). -* **Custom gutters style:** You can now use properties `[gutterColor]="'#ff0000'"`, `[gutterImageH]="'url(xxx)'"` and `[gutterImageV]="'url(xxx)'"`. - - - -# 1.0.0-beta.6 (2017-11-16) - -* **Feature:** Emit `(gutterClick)` event even if `[disabled]="true"` to specific usecase. -* **Bug:** Fix bug occuring on split with `direction="vertical"` initialization, container height was wrong because `HostBinding` wasn't applied yet. - - - -# 1.0.0-beta.5 (2017-11-15) - -* **Renaming:** `[visibleTransition]` property renamed to `[useTransition]` and work with `[visible]` & `[size]`. -* **Renaming:** `(visibleTransitionEnd)` event renamed to `(transitionEnd)` and now triggered from `[visible]` & `[size]` property. - - - -# 0.2.7 (2017-11-14) - -* **SemVer compatibility:** Copy of `0.2.3` to avoid breaking semantic versionning (I screwed up with `0.2.5` & `0.2.6` which needed angular >=5). Apps using angular 4.x having `"angular-split": "^0.2.2"` inside their `package.json` shoudn't break anymore. - - - -# 1.0.0-beta.4 (2017-11-13) - -* **Bug:** Code rewrite to calculate new `flex-basis` values to avoid unwanted size flickering on areas not linked to dragged gutter. -* **Comment:** Add an explanation comment on `split.component.ts` top. - - - -# 1.0.0-beta.3 (2017-11-12) - -* **Feature:** Accept number & boolean params as string to allow template syntax like `...` or `...`. -* **Feature:** Add a `(gutterClick)` event for usecases like toggling area between 0% & X%. Now all drag events and gutterSize return `{gutterNum: number, sizes: Array}`. - - - -# 1.0.0-beta.2 (2017-11-11) - -* **Bug:** Fix bug when dragging gutter with previous area with `[visible]="false"` (bug there since the `[visible]` feature was added.. :( ). -* **Component access from JS/TS class:** You can now access `SplitComponent` and `SplitAreaDirective` as `ViewChild`/`ViewChildren` directly from your class to interact with. - - - -# 1.0.0-beta.1 (2017-11-10) - -### Complete refactor, more robust, will be used as new base to add frequently asked features like `[minSize]` (pixel or percent) and custom style. - -* **Allow area size init or drag to zero:** Refactor way to calcul area size `flex-basis: calc( X% - Ypx );` (seems easy at first sight but a bit painfull to implement). For example, you can now have 4 areas (with `[visible]="true"`), so 3 gutters, with sizes [0,0,0,100]. This was impossible before (size couldn't go down to 5%). -* **No more css `/deep/` use:** Could have used `::ng-deep` but I prefer to avoid it too. -* **Renderer2:** Use `Renderer2` instead of `Renderer` which is deprecated. - - - -# 0.2.6 (2017-11-07) - -* **UMD module fix:** Rollup config file wasn't correct. - - - -# 0.2.5 (2017-11-06) - -### Warning: Angular 5.0.0 minimum. - -* **New files organisation:** Complete reorganisation of the github repository and files published on npm forked from this [library starter](https://github.com/robisim74/angular-library-starter). -* **New bundles generation:** Now you have umd bundles, flat ES module, and ES2015 flat ESM format. -* **Add tests:** This is what motivated me to change organisation, I will add others one soon `npm test`. - - - -# 0.2.3 (2017-11-02) - -* **Update package.json:** Moves dependencies to peerDependencies to be compatible with angular 5.x [pr59](https://github.com/bertrandg/angular-split/pull/59). - - - -# 0.2.2 (2017-08-04) - -* **UMD bundle:** Add UMD bundle export thanks to [BenjaminDobler](https://github.com/BenjaminDobler). - - - -# 0.2.1 (2017-07-18) - -* **license:** Add an Apache license. -* **dependencies:** Update `rxjs` version inside `package.json`. - - - -# 0.2.0 (2017-03-30) - -* **ng upgrade:** upgrade to angular `^4.0.0`, replace `