Skip to content

Commit a89abdc

Browse files
author
Gaillard
committed
v3.0.0-beta.6
1 parent de88c59 commit a89abdc

18 files changed

Lines changed: 214 additions & 86 deletions

‎CHANGELOG.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
<a name="3.0.0-XXX"></a>
2+
# 3.0.0-XXX (2019-02-XX)
3+
4+
* **Pixel mode:** Now your can choose to work with `pixel` or `percent` mode. In `pixel` mode, an area with wildcard size (`size="*"`) is mandatory.
5+
* **minSize & maxSize area:** Now you can set minimum and maximum sizes for each areas whatever the current mode (Only exception is the wildcard area size in `pixel` mode).
6+
* **gutterDblClick event:** Double click on gutter is now catchable with `(gutterDblClick)`.
7+
* **gutterDblClickDuration property:** Specify duration between 2 clicks to consider a double click `(gutterDblClick)` event.
8+
* **exportAs:** You can access `SplitComponent` as `<as-split #split="asSplit">` and `SplitAreaDirective` as `<as-split-area #area1="asSplitArea">` from template variables easily with `ViewChild`.
9+
* **Internal:** Remove `EventManagerPlugin` and start/end/click subscribers stuff which was added to avoid some change detection runs but adding too much complexity.. I stopped going against the framework, clearer now!
10+
111
<a name="2.0.1"></a>
212
# 2.0.1 (2018-12-21)
313

‎projects/angular-split/src/lib/component/split.component.ts‎

Lines changed: 43 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, Input, Output, ChangeDetectionStrategy, ChangeDetectorRef, Renderer2, AfterViewInit, OnDestroy, ElementRef, NgZone, ViewChildren, QueryList } from '@angular/core';
1+
import { Component, Input, Output, ChangeDetectionStrategy, ChangeDetectorRef, Renderer2, AfterViewInit, OnDestroy, ElementRef, NgZone, ViewChildren, QueryList, EventEmitter } from '@angular/core';
22
import { Observable, Subscriber, Subject } from 'rxjs';
33
import { debounceTime } from 'rxjs/operators';
44

@@ -38,6 +38,7 @@ import { getInputPositiveNumber, getInputBoolean, isUserSizesValid, getAreaMinSi
3838

3939
@Component({
4040
selector: 'as-split',
41+
exportAs: 'asSplit',
4142
changeDetection: ChangeDetectionStrategy.OnPush,
4243
styleUrls: [`./split.component.scss`],
4344
template: `
@@ -48,9 +49,9 @@ import { getInputPositiveNumber, getInputBoolean, isUserSizesValid, getAreaMinSi
4849
class="as-split-gutter"
4950
[style.flex-basis.px]="gutterSize"
5051
[style.order]="index*2+1"
51-
(as-split-undetected.click)="clickGutter($event, index+1)"
52-
(as-split-undetected.mousedown)="startDragging($event, index*2+1, index+1)"
53-
(as-split-undetected.touchstart)="startDragging($event, index*2+1, index+1)">
52+
(click)="clickGutter($event, index+1)"
53+
(mousedown)="startDragging($event, index*2+1, index+1)"
54+
(touchstart)="startDragging($event, index*2+1, index+1)">
5455
<div class="as-split-gutter-icon"></div>
5556
</div>
5657
</ng-template>`,
@@ -170,24 +171,26 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
170171
get dir(): 'ltr' | 'rtl' {
171172
return this._dir;
172173
}
173-
174+
174175
////
175176

176-
private dragStartSubscriber: Subscriber<IOutputData>
177-
@Output() get dragStart(): Observable<IOutputData> {
178-
return new Observable(subscriber => this.dragStartSubscriber = subscriber);
179-
}
177+
private _gutterDblClickDuration: number = 0;
180178

181-
private dragEndSubscriber: Subscriber<IOutputData>
182-
@Output() get dragEnd(): Observable<IOutputData> {
183-
return new Observable(subscriber => this.dragEndSubscriber = subscriber);
179+
@Input() set gutterDblClickDuration(v: number) {
180+
this._gutterDblClickDuration = getInputPositiveNumber(v, 0);
184181
}
185-
186-
private gutterClickSubscriber: Subscriber<IOutputData>
187-
@Output() get gutterClick(): Observable<IOutputData> {
188-
return new Observable(subscriber => this.gutterClickSubscriber = subscriber);
182+
183+
get gutterDblClickDuration(): number {
184+
return this._gutterDblClickDuration;
189185
}
190186

187+
////
188+
189+
@Output() dragStart = new EventEmitter<IOutputData>(false)
190+
@Output() dragEnd = new EventEmitter<IOutputData>(false)
191+
@Output() gutterClick = new EventEmitter<IOutputData>(false)
192+
@Output() gutterDblClick = new EventEmitter<IOutputData>(false)
193+
191194
private transitionEndSubscriber: Subscriber<IOutputAreaSizes>
192195
@Output() get transitionEnd(): Observable<IOutputAreaSizes> {
193196
return new Observable(subscriber => this.transitionEndSubscriber = subscriber).pipe(
@@ -424,12 +427,28 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
424427
}
425428
}
426429

430+
_clickTimeout: number | null = null
431+
427432
public clickGutter(event: MouseEvent, gutterNum: number): void {
433+
console.log('DEBUG > clickGutter', event)
428434
event.preventDefault();
429435
event.stopPropagation();
430436

431437
if(this.startPoint && this.startPoint.x === event.clientX && this.startPoint.y === event.clientY) {
432-
this.notify('click', gutterNum);
438+
439+
// If timeout in progress and new again > clearTimeout & dblClickEvent
440+
if(this._clickTimeout !== null) {
441+
window.clearTimeout(this._clickTimeout);
442+
this._clickTimeout = null;
443+
this.notify('dblclick', gutterNum);
444+
}
445+
// Else start timeout to call clickEvent at end
446+
else {
447+
this._clickTimeout = window.setTimeout(() => {
448+
this._clickTimeout = null;
449+
this.notify('click', gutterNum);
450+
}, this.gutterDblClickDuration);
451+
}
433452
}
434453
}
435454

@@ -611,23 +630,20 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
611630
});
612631
}
613632

614-
public notify(type: 'start' | 'progress' | 'end' | 'click' | 'transitionEnd', gutterNum: number): void {
633+
public notify(type: 'start' | 'progress' | 'end' | 'click' | 'dblclick' | 'transitionEnd', gutterNum: number): void {
615634
const sizes = this.getVisibleAreaSizes();
616635

617636
if(type === 'start') {
618-
if(this.dragStartSubscriber) {
619-
this.ngZone.run(() => this.dragStartSubscriber.next({gutterNum, sizes}));
620-
}
637+
this.dragStart.emit({gutterNum, sizes});
621638
}
622639
else if(type === 'end') {
623-
if(this.dragEndSubscriber) {
624-
this.ngZone.run(() => this.dragEndSubscriber.next({gutterNum, sizes}));
625-
}
640+
this.dragEnd.emit({gutterNum, sizes});
626641
}
627642
else if(type === 'click') {
628-
if(this.gutterClickSubscriber) {
629-
this.ngZone.run(() => this.gutterClickSubscriber.next({gutterNum, sizes}));
630-
}
643+
this.gutterClick.emit({gutterNum, sizes});
644+
}
645+
else if(type === 'dblclick') {
646+
this.gutterDblClick.emit({gutterNum, sizes});
631647
}
632648
else if(type === 'transitionEnd') {
633649
if(this.transitionEndSubscriber) {

‎projects/angular-split/src/lib/directive/splitArea.directive.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import { SplitComponent } from '../component/split.component';
44
import { getInputPositiveNumber, getInputBoolean } from '../utils';
55

66
@Directive({
7-
selector: 'as-split-area, [as-split-area]'
7+
selector: 'as-split-area, [as-split-area]',
8+
exportAs: 'asSplitArea'
89
})
910
export class SplitAreaDirective implements OnInit, OnDestroy {
1011

‎projects/angular-split/src/lib/module.ts‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import { NgModule, ModuleWithProviders } from '@angular/core';
22
import { CommonModule } from '@angular/common';
3-
import { EVENT_MANAGER_PLUGINS } from '@angular/platform-browser';
43

54
import { SplitComponent } from './component/split.component';
65
import { SplitAreaDirective } from './directive/splitArea.directive';
7-
import { UndetectedEventPlugin } from "./service/UndetectedEventPlugin";
86

97
@NgModule({
108
imports: [
@@ -24,11 +22,7 @@ export class AngularSplitModule {
2422
public static forRoot(): ModuleWithProviders {
2523
return {
2624
ngModule: AngularSplitModule,
27-
providers: [{
28-
provide: EVENT_MANAGER_PLUGINS,
29-
useClass: UndetectedEventPlugin,
30-
multi: true
31-
}]
25+
providers: []
3226
};
3327
}
3428

‎projects/angular-split/src/lib/service/UndetectedEventPlugin.ts‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎src_app/app/app.module.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { CollapseModule } from 'ngx-bootstrap/collapse';
88
import { ButtonsModule } from 'ngx-bootstrap/buttons';
99
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
1010
import { SortableModule } from 'ngx-bootstrap/sortable';
11+
import { TooltipModule } from 'ngx-bootstrap/tooltip';
1112
import { AngularSplitModule } from 'angular-split';
1213

1314
import { AppComponent } from './component/app.component';
@@ -20,6 +21,7 @@ import { DocComponent } from './component/doc/doc.route.component';
2021
import { SimpleComponent } from './component/examples/simple.route.component';
2122
import { MinMaxComponent } from './component/examples/minMax.route.component';
2223
import { NestedComponent } from './component/examples/nested.route.component';
24+
import { IframeComponent } from './component/examples/iframe.route.component';
2325
import { TransitionsComponent } from './component/examples/transitions.route.component';
2426
import { SyncComponent } from './component/examples/sync.route.component';
2527
import { CustomGutterStyleComponent } from './component/examples/customGutterStyle.route.component';
@@ -54,6 +56,7 @@ const routes = [
5456
SimpleComponent,
5557
MinMaxComponent,
5658
NestedComponent,
59+
IframeComponent,
5760
TransitionsComponent,
5861
SyncComponent,
5962
CustomGutterStyleComponent,
@@ -73,6 +76,7 @@ const routes = [
7376
CollapseModule.forRoot(),
7477
BsDropdownModule.forRoot(),
7578
SortableModule.forRoot(),
79+
TooltipModule.forRoot(),
7680
AngularSplitModule.forRoot(),
7781
],
7882
providers: [{

‎src_app/app/component/doc/doc.route.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="container">
2-
<h4>SplitComponent <span class="sel">(selector: '<span class="selContent">as-split</span>')</span></h4>
2+
<h4>SplitComponent <span class="sel">(selector: '<span class="selContent">as-split</span>' / exportAs: '<span class="selContent">asSplit</span>')</span></h4>
33
<table class="table table-striped">
44
<thead>
55
<tr>
@@ -52,7 +52,7 @@ <h4>SplitComponent <span class="sel">(selector: '<span class="selContent">as-spl
5252
</table>
5353
<br><br>
5454

55-
<h4>SplitAreaDirective <span class="sel">(selector: '<span class="selContent">as-split-area, [as-split-area]</span>')</span></h4>
55+
<h4>SplitAreaDirective <span class="sel">(selector: '<span class="selContent">as-split-area, [as-split-area]</span>' / exportAs: '<span class="selContent">asSplitArea</span>')</span></h4>
5656
<table class="table table-striped">
5757
<thead>
5858
<tr>

‎src_app/app/component/doc/doc.route.component.ts‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -33,19 +33,21 @@ export class DocComponent {
3333

3434
readonly splitDoc = {
3535
inputs: [
36-
{name: 'direction', type: 'string', default: '"horizontal"', details: 'Select split direction: <code>"horizontal"</code> or <code>"vertical"</code>.'},
37-
{name: 'unit', type: 'string', default: '"percent"', details: `Selected unit you want to use: <code>"percent"</code> or <code>"pixel"</code>.`},
38-
{name: 'gutterSize', type: 'number', default: '11', details: `Gutters's size (dragging elements) in pixels.`},
39-
{name: 'gutterStep', type: 'number', default: '1', details: `Gutter step while moving in pixels.`},
40-
{name: 'restrictMove', type: 'boolean', default: 'false', details: 'Set to <code>true</code> if you want to limit gutter move to adjacent areas.'},
41-
{name: 'disabled', type: 'boolean', default: 'false', details: 'Disable the dragging feature (remove cursor/image on gutters). <code>(gutterClick)</code> still emits.'},
42-
{name: 'dir', type: 'string', default: '"ltr"', details: 'Indicates the directionality of the areas: <code>"ltr"</code> (left to right) or <code>"rtl"</code> (right to left).'},
43-
{name: 'useTransition', type: 'boolean', default: 'false', details: 'Add transition when toggling visibility using <code>[visible]</code> or <code>[size]</code>.<br><u>Warning: Transitions are not working for <a href="https://github.com/philipwalton/flexbugs#flexbug-16">IE/Edge/Safari</a></u>'},
36+
{name: 'direction', type: 'string', default: '"horizontal"', details: 'Select split direction: <code>"horizontal"</code> or <code>"vertical"</code>.'},
37+
{name: 'unit', type: 'string', default: '"percent"', details: `Selected unit you want to use: <code>"percent"</code> or <code>"pixel"</code>.`},
38+
{name: 'gutterSize', type: 'number', default: '11', details: `Gutters's size (dragging elements) in pixels.`},
39+
{name: 'gutterStep', type: 'number', default: '1', details: `Gutter step while moving in pixels.`},
40+
{name: 'restrictMove', type: 'boolean', default: 'false', details: 'Set to <code>true</code> if you want to limit gutter move to adjacent areas.'},
41+
{name: 'disabled', type: 'boolean', default: 'false', details: 'Disable the dragging feature (remove cursor/image on gutters). <code>(gutterClick)</code> still emits.'},
42+
{name: 'dir', type: 'string', default: '"ltr"', details: 'Indicates the directionality of the areas: <code>"ltr"</code> (left to right) or <code>"rtl"</code> (right to left).'},
43+
{name: 'useTransition', type: 'boolean', default: 'false', details: 'Add transition when toggling visibility using <code>[visible]</code> or <code>[size]</code>.<br><u>Warning: Transitions are not working for <a href="https://github.com/philipwalton/flexbugs#flexbug-16">IE/Edge/Safari</a></u>'},
44+
{name: 'gutterDblClickDuration', type: 'number', default: '0', details: `Milliseconds to detect a double click on a gutter. Set it around 300-500ms if you want to use <code>(gutterDblClick)</code> event.`},
4445
],
4546
outputs: [
4647
{name: 'dragStart', value: '{gutterNum: number, sizes: Array<number>}', details: 'Emit when drag starts.'},
4748
{name: 'dragEnd', value: '{gutterNum: number, sizes: Array<number>}', details: 'Emit when drag ends.'},
48-
{name: 'gutterClick', value: '{gutterNum: number, sizes: Array<number>}', details: 'Emit when user clicks on a gutter.'},
49+
{name: 'gutterClick', value: '{gutterNum: number, sizes: Array<number>}', details: 'Emit when user clicks on a gutter. See <code>[gutterDblClickDuration]</code> input.'},
50+
{name: 'gutterDblClick', value: '{gutterNum: number, sizes: Array<number>}', details: 'Emit when user double clicks on a gutter. See <code>[gutterDblClickDuration]</code> input.'},
4951
{name: 'transitionEnd', value: 'Array<number>', details: 'Emit when transition ends (could be triggered from <code>[visible]</code> or <code>[size]</code> changes).<br>Only if <code>[useTransition]="true"</code>.<br><u>Warning: Transitions are not working for <a href="https://github.com/philipwalton/flexbugs#flexbug-16">IE/Edge/Safari</a></u>'},
5052
],
5153
class: [

‎src_app/app/component/examples/customGutterStyle.route.component.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -132,16 +132,16 @@
132132

133133
&.as-horizontal {
134134
::ng-deep .as-split-gutter-icon {
135-
width: 13px !important;
136-
left: -6px;
137-
right: 6px;
135+
width: 17px !important;
136+
left: -8px;
137+
right: 8px;
138138
}
139139
}
140140
&.as-vertical {
141141
::ng-deep .as-split-gutter-icon {
142-
height: 13px !important;
143-
top: -6px;
144-
bottom: 6px;
142+
height: 17px !important;
143+
top: -8px;
144+
bottom: 8px;
145145
}
146146
}
147147
}

‎src_app/app/component/examples/geekDemo.route.component.ts‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ import { AComponent } from './AComponent';
6363
<as-split [direction]="d.dir"
6464
[restrictMove]="d.restrictMove"
6565
[gutterSize]="d.gutterSize"
66+
[gutterStep]="d.gutterStep"
6667
[style.width]="d.width"
6768
[style.height]="d.height"
6869
[useTransition]="d.useTransition"
@@ -87,29 +88,37 @@ import { AComponent } from './AComponent';
8788
</div>
8889
</div>
8990
<div>
90-
<label>Width: </label>
91+
<label>Width:&nbsp;</label>
9192
<div class="btn-group">
9293
<label class="btn btn-warning btn-sm" [(ngModel)]="d.width" [btnRadio]="null">null</label>
9394
<label class="btn btn-warning btn-sm" [(ngModel)]="d.width" btnRadio="400px">400</label>
9495
<label class="btn btn-warning btn-sm" [(ngModel)]="d.width" btnRadio="600px">600</label>
9596
</div>
9697
</div>
9798
<div>
98-
<label>Height: </label>
99+
<label>Height:&nbsp;</label>
99100
<div class="btn-group">
100101
<label class="btn btn-warning btn-sm" [(ngModel)]="d.height" [btnRadio]="null">null</label>
101102
<label class="btn btn-warning btn-sm" [(ngModel)]="d.height" btnRadio="200px">200</label>
102103
<label class="btn btn-warning btn-sm" [(ngModel)]="d.height" btnRadio="350px">350</label>
103104
</div>
104105
</div>
105106
<div>
106-
<label>Gutter size: </label>
107+
<label>Gutter size:&nbsp;</label>
107108
<div class="btn-group">
108109
<label class="btn btn-warning btn-sm" [(ngModel)]="d.gutterSize" [btnRadio]="null">null</label>
109110
<label class="btn btn-warning btn-sm" [(ngModel)]="d.gutterSize" btnRadio="7">7</label>
110111
<label class="btn btn-warning btn-sm" [(ngModel)]="d.gutterSize" btnRadio="22">22</label>
111112
</div>
112113
</div>
114+
<div>
115+
<label>Gutter step:&nbsp;</label>
116+
<div class="btn-group">
117+
<label class="btn btn-warning btn-sm" [(ngModel)]="d.gutterStep" [btnRadio]="null">null</label>
118+
<label class="btn btn-warning btn-sm" [(ngModel)]="d.gutterStep" btnRadio="10">10</label>
119+
<label class="btn btn-warning btn-sm" [(ngModel)]="d.gutterStep" btnRadio="50">50</label>
120+
</div>
121+
</div>
113122
</div>
114123
<div class="opts-area">
115124
<div class="title">
@@ -139,6 +148,7 @@ export class GeekDemoComponent extends AComponent {
139148
restrictMove: true,
140149
useTransition: true,
141150
gutterSize: null,
151+
gutterStep: null,
142152
width: null,
143153
height: null,
144154
areas: [

0 commit comments

Comments
 (0)