Skip to content

Commit 9ddcbc2

Browse files
bertrandgbertrandg
committed
RTL support + bug gutter size transition + 1.0.0-beta.9
1 parent 4fd83f3 commit 9ddcbc2

6 files changed

Lines changed: 98 additions & 54 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11

2+
<a name="1.0.0-beta.9"></a>
3+
# 1.0.0-beta.9 (2017-11-19)
4+
5+
* **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 `<split>` component and that's fix.
6+
* **Bug:** Fix small bug when updating `[gutterSize]` with `useTransition="true"`, now gutter's size got transition too and it's visually better.
7+
8+
29
<a name="1.0.0-beta.8"></a>
310
# 1.0.0-beta.8 (2017-11-17)
411

‎dist/bundles/angular-split.umd.js‎

Lines changed: 50 additions & 24 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/bundles/angular-split.umd.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎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": "1.0.0-beta.8",
3+
"version": "1.0.0-beta.9",
44
"description": "Angular (2+) UI library to split views using CSS flexbox layout.",
55
"main": "./bundles/angular-split.umd.js",
66
"module": "./esm5/angular-split.js",

‎src/components/split.component.ts‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ import { SplitAreaDirective } from './splitArea.directive';
7373
<split-gutter *ngIf="last === false"
7474
[order]="index*2+1"
7575
[direction]="direction"
76+
[useTransition]="useTransition"
7677
[size]="gutterSize"
7778
[color]="gutterColor"
7879
[imageH]="gutterImageH"
@@ -210,6 +211,19 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
210211

211212
////
212213

214+
private _dir: 'ltr' | 'rtl' = 'ltr';
215+
216+
@Input() set dir(v: 'ltr' | 'rtl') {
217+
v = (v === 'rtl') ? 'rtl' : 'ltr';
218+
this._dir = v;
219+
}
220+
221+
get dir(): 'ltr' | 'rtl' {
222+
return this._dir;
223+
}
224+
225+
////
226+
213227
@Output() dragStart = new EventEmitter<{gutterNum: number, sizes: Array<number>}>(false);
214228
@Output() dragProgress = new EventEmitter<{gutterNum: number, sizes: Array<number>}>(false);
215229
@Output() dragEnd = new EventEmitter<{gutterNum: number, sizes: Array<number>}>(false);
@@ -416,7 +430,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
416430
// All area sizes (container percentage) are less than guterSize,
417431
// It means containerSize < ngGutters * gutterSize
418432
else {
419-
this.displayedAreas[0].size = 1;
433+
this.displayedAreas[this.displayedAreas.length - 1].size = 1;
420434
}
421435
}
422436

@@ -519,13 +533,13 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
519533

520534
// ¤ AREAS SIZE PIXEL
521535

522-
const offsetPixel = (this.direction === 'horizontal') ? (start.x - end.x) : (start.y - end.y);
523-
536+
let offsetPixel = (this.direction === 'horizontal') ? (start.x - end.x) : (start.y - end.y);
537+
if(this.dir === 'rtl') {
538+
offsetPixel = -offsetPixel;
539+
}
540+
524541
let newSizePixelA = this.dragStartValues.sizePixelA - offsetPixel;
525542
let newSizePixelB = this.dragStartValues.sizePixelB + offsetPixel;
526-
527-
// const debSizePxA = newSizePixelA;
528-
// const debSizePxB = newSizePixelB;
529543

530544
if(newSizePixelA < this.gutterSize && newSizePixelB < this.gutterSize) {
531545
// WTF.. get out of here!
@@ -542,9 +556,6 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
542556

543557
// ¤ AREAS SIZE PERCENT
544558

545-
// const debSizeA = areaA.size;
546-
// const debSizeB = areaB.size;
547-
548559
if(newSizePixelA === 0) {
549560
areaB.size += areaA.size;
550561
areaA.size = 0;
@@ -569,16 +580,6 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
569580
}
570581
}
571582

572-
// const rd = (val: number) => Math.round(val*100)/100;
573-
// console.table([{
574-
// 'start drag PX': rd(this.dragStartValues.sizePixelA) + ' / ' + rd(this.dragStartValues.sizePixelB),
575-
// 'offset': offsetPixel,
576-
// 'new temp PX': rd(debSizePxA) + ' / ' + rd(debSizePxB),
577-
// 'new final PX': rd(newSizePixelA) + ' / ' + rd(newSizePixelB),
578-
// 'curr %-px': `${ rd(debSizeA)*100 }% / ${ rd(debSizeB)*100 }%`,
579-
// 'new %-px': `${ rd(areaA.size)*100 }% / ${ rd(areaB.size)*100 }%`,
580-
// }]);
581-
582583
this.refreshStyleSizes();
583584
this.notify('progress');
584585
}
@@ -591,7 +592,6 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
591592
this.displayedAreas.forEach(area => {
592593
area.comp.unlockEvents();
593594
});
594-
// console.log('>', this.displayedAreas.map(a => a.size).join('/'), ' ', this.displayedAreas.map(a => a.size).reduce((tot, s) => tot+s, 0));
595595

596596
while(this.dragListeners.length > 0) {
597597
const fct = this.dragListeners.pop();

‎src/components/splitGutter.directive.ts‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Directive, Input, ElementRef, Renderer2 } from '@angular/core';
66
export class SplitGutterDirective {
77

88
@Input() set order(v: number) {
9-
this.renderer.setStyle(this.elementRef.nativeElement, 'order', v);
9+
this.renderer.setStyle(this.elRef.nativeElement, 'order', v);
1010
}
1111

1212
////
@@ -24,8 +24,19 @@ export class SplitGutterDirective {
2424

2525
////
2626

27-
private _size: number;
27+
@Input() set useTransition(v: boolean) {
28+
if(v) {
29+
this.renderer.setStyle(this.elRef.nativeElement, 'transition', `flex-basis 0.3s`);
30+
}
31+
else {
32+
this.renderer.removeStyle(this.elRef.nativeElement, 'transition');
33+
}
34+
}
35+
36+
////
2837

38+
private _size: number;
39+
2940
@Input() set size(v: number) {
3041
this._size = v;
3142
this.refreshStyle();
@@ -89,20 +100,20 @@ export class SplitGutterDirective {
89100

90101
////
91102

92-
constructor(private elementRef: ElementRef,
103+
constructor(private elRef: ElementRef,
93104
private renderer: Renderer2) {}
94105

95106
private refreshStyle(): void {
96-
this.renderer.setStyle(this.elementRef.nativeElement, 'flex-basis', `${ this.size }px`);
107+
this.renderer.setStyle(this.elRef.nativeElement, 'flex-basis', `${ this.size }px`);
97108

98109
// fix safari bug about gutter height when direction is horizontal
99-
this.renderer.setStyle(this.elementRef.nativeElement, 'height', (this.direction === 'vertical') ? `${ this.size }px` : `100%`);
110+
this.renderer.setStyle(this.elRef.nativeElement, 'height', (this.direction === 'vertical') ? `${ this.size }px` : `100%`);
100111

101-
this.renderer.setStyle(this.elementRef.nativeElement, 'background-color', (this.color !== '') ? this.color : `#eeeeee`);
112+
this.renderer.setStyle(this.elRef.nativeElement, 'background-color', (this.color !== '') ? this.color : `#eeeeee`);
102113

103114
const state: 'disabled' | 'vertical' | 'horizontal' = (this.disabled === true) ? 'disabled' : this.direction;
104-
this.renderer.setStyle(this.elementRef.nativeElement, 'background-image', this.getImage(state));
105-
this.renderer.setStyle(this.elementRef.nativeElement, 'cursor', this.getCursor(state));
115+
this.renderer.setStyle(this.elRef.nativeElement, 'background-image', this.getImage(state));
116+
this.renderer.setStyle(this.elRef.nativeElement, 'cursor', this.getCursor(state));
106117
}
107118

108119
private getCursor(state: 'disabled' | 'vertical' | 'horizontal'): string {

0 commit comments

Comments
 (0)