Skip to content

Commit 397c72e

Browse files
author
Gaillard
committed
v3.0.0-beta.7: mobile click/dblclick working + update doc
1 parent 34c729b commit 397c72e

File tree

6 files changed

+25
-16
lines changed

6 files changed

+25
-16
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@
33

44
* **Pixel mode:** Now your can choose to work with `pixel` or `percent` mode. In `pixel` mode, an area with wildcard size (`size="*"`) is mandatory.
55
* **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+
* **lockSize area:** Use `<as-split-area [size]="X" [lockSize]="true">` as a shortcut for `<as-split-area [size]="X" [minSize]="X" [maxSize]="X">`.
67
* **gutterDblClick event:** Double click on gutter is now catchable with `(gutterDblClick)`.
78
* **gutterDblClickDuration property:** Specify duration between 2 clicks to consider a double click `(gutterDblClick)` event.
89
* **exportAs:** You can access `SplitComponent` as `<as-split #split="asSplit">` and `SplitAreaDirective` as `<as-split-area #area1="asSplitArea">` from template variables easily with `ViewChild`.
10+
* **CSS classes updates:** Some `split`, `area` and `gutter` elements has CSS class names update.
911
* **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!
1012

1113
<a name="2.0.1"></a>

‎projects/angular-split/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-split",
3-
"version": "3.0.0-beta.6",
3+
"version": "3.0.0-beta.7",
44
"description": "Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout.",
55
"author": "bertrandg",
66
"repository": {

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

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,10 @@ import { getInputPositiveNumber, getInputBoolean, isUserSizesValid, getAreaMinSi
4949
class="as-split-gutter"
5050
[style.flex-basis.px]="gutterSize"
5151
[style.order]="index*2+1"
52-
(click)="clickGutter($event, index+1)"
5352
(mousedown)="startDragging($event, index*2+1, index+1)"
54-
(touchstart)="startDragging($event, index*2+1, index+1)">
53+
(touchstart)="startDragging($event, index*2+1, index+1)"
54+
(mouseup)="clickGutter($event, index+1)"
55+
(touchend)="clickGutter($event, index+1)">
5556
<div class="as-split-gutter-icon"></div>
5657
</div>
5758
</ng-template>`,
@@ -430,23 +431,22 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
430431
_clickTimeout: number | null = null
431432

432433
public clickGutter(event: MouseEvent, gutterNum: number): void {
433-
console.log('DEBUG > clickGutter', event)
434-
event.preventDefault();
435-
event.stopPropagation();
436-
434+
// Be sure mouseup/touchend happened at same point as mousedown/touchstart to trigger click/dblclick
437435
if(this.startPoint && this.startPoint.x === event.clientX && this.startPoint.y === event.clientY) {
438436

439-
// If timeout in progress and new again > clearTimeout & dblClickEvent
437+
// If timeout in progress and new click > clearTimeout & dblClickEvent
440438
if(this._clickTimeout !== null) {
441439
window.clearTimeout(this._clickTimeout);
442440
this._clickTimeout = null;
443441
this.notify('dblclick', gutterNum);
442+
this.stopDragging();
444443
}
445444
// Else start timeout to call clickEvent at end
446445
else {
447446
this._clickTimeout = window.setTimeout(() => {
448447
this._clickTimeout = null;
449448
this.notify('click', gutterNum);
449+
this.stopDragging();
450450
}, this.gutterDblClickDuration);
451451
}
452452
}
@@ -523,6 +523,11 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
523523
event.preventDefault();
524524
event.stopPropagation();
525525

526+
if(this._clickTimeout !== null) {
527+
window.clearTimeout(this._clickTimeout);
528+
this._clickTimeout = null;
529+
}
530+
526531
if(this.isDragging === false) {
527532
return;
528533
}

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

Lines changed: 3 additions & 3 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>' / exportAs: '<span class="selContent">asSplit</span>')</span></h4>
2+
<h4><b>SplitComponent</b>&nbsp;<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>' / exportAs: '<span class="selContent">asSplitArea</span>')</span></h4>
55+
<h4><b>SplitAreaDirective</b>&nbsp;<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>
@@ -73,7 +73,7 @@ <h4>SplitAreaDirective <span class="sel">(selector: '<span class="selContent">as
7373
</table>
7474
<br><br>
7575

76-
<h4>CSS classes</h4>
76+
<h4><b>CSS classes</b></h4>
7777
<table class="table table-striped">
7878
<thead>
7979
<tr>

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export class DocComponent {
3434
readonly splitDoc = {
3535
inputs: [
3636
{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>.`},
37+
{name: 'unit', type: 'string', default: '"percent"', details: `Selected unit you want to use: <code>"percent"</code> or <code>"pixel"</code> to specify area sizes.`},
3838
{name: 'gutterSize', type: 'number', default: '11', details: `Gutters's size (dragging elements) in pixels.`},
3939
{name: 'gutterStep', type: 'number', default: '1', details: `Gutter step while moving in pixels.`},
4040
{name: 'restrictMove', type: 'boolean', default: 'false', details: 'Set to <code>true</code> if you want to limit gutter move to adjacent areas.'},
@@ -59,10 +59,11 @@ export class DocComponent {
5959

6060
readonly splitAreaDoc = {
6161
inputs: [
62-
{name: 'size', type: 'number', default: '-', details: `Size of the area in selected unit (<code>percent</code>/<code>pixel</code>).<br><u>Percent mode:</u> If not provided or if all areas sizes not equal to 100, all areas will have the same size.<br><u>Pixel mode:</u> An area with <code>[size]="'*'"</code> is mandatory (only one) and can't have <code>minSize</code>/<code>maxSize</code>/<code>lockSize</code>.`},
63-
{name: 'minSize', type: 'number', default: 'null', details: 'Minimum pixel or percent size, can\'t be smaller than provided <code>size</code>.'},
64-
{name: 'maxSize', type: 'number', default: 'null', details: 'Maximum pixel or percent size, can\'t be bigger than provided <code>size</code>.'},
65-
{name: 'lockSize', type: 'boolean', default: 'false', details: 'Lock area size, same as <code>minSize</code> = <code>maxSize</code> = <code>size</code>.'},
62+
{name: 'size', type: 'number', default: '-', details: `Size of the area in selected unit (<code>percent</code>/<code>pixel</code>).<br><u>Percent mode:</u> All areas sizes should equal to 100, If not, all areas will have the same size.<br><u>Pixel mode:</u> An area with wildcard size (<code>[size]="'*'"</code>) is mandatory (only one) and can't have <code>[visible]="false"</code> or <code>minSize</code>/<code>maxSize</code>/<code>lockSize</code> properties.`},
63+
{name: 'minSize', type: 'number', default: 'null', details: `Minimum pixel or percent size, can't be smaller than provided <code>size</code>.<br><u>Not working when <code>[size]="'*'"</code></u>`},
64+
{name: 'maxSize', type: 'number', default: 'null', details: `Maximum pixel or percent size, can't be bigger than provided <code>size</code>.<br><u>Not working when <code>[size]="'*'"</code></u>`},
65+
{name: 'lockSize', type: 'boolean', default: 'false', details: `Lock area size, same as <code>minSize</code> = <code>maxSize</code> = <code>size</code>.<br><u>Not working when <code>[size]="'*'"</code></u>`},
66+
{name: 'visible', type: 'boolean', default: 'true', details: `Hide area visually but still present in the DOM, use <code>ngIf</code> to completely remove it.<br><u>Not working when <code>[size]="'*'"</code></u>`},
6667
]
6768
}
6869

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,7 @@ export class GutterClickComponent extends AComponent implements AfterViewInit, O
121121

122122
log(type: string, e: {gutterNum: number, sizes: Array<number>}) {
123123
this.logMessages.push({type, text: `${ formatDate(new Date()) } > ${ type } event > ${ JSON.stringify(e) }`});
124+
124125
setTimeout(() => {
125126
if(this.logsEl.nativeElement.scroll) {
126127
(<HTMLElement> this.logsEl.nativeElement).scroll({top: this.logMessages.length*30});

0 commit comments

Comments
 (0)