Skip to content

Commit 65a11d7

Browse files
pawelwojkiewiczpawelwojkiewicznp
pawelwojkiewicz
and
pawelwojkiewicznp
authored
feat: allow for setting global config (angular-split#309)
Closes angular-split#166 * global config settings * changed interface name and property to private * changed config property to private * added Optional addnotation to Inject * removed ts-ignore comment * added missed injection token * moved IDefaultOptions to interface.ts * fixed IDefaultOptions import Co-authored-by: wojkiewp <[email protected]>
1 parent 77db412 commit 65a11d7

8 files changed

Lines changed: 146 additions & 15 deletions

File tree

‎projects/angular-split/src/lib/angular-split-config.token.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { InjectionToken } from '@angular/core'
2+
import { IDefaultOptions } from './interface'
3+
4+
export const ANGULAR_SPLIT_DEFAULT_OPTIONS = new InjectionToken<Partial<IDefaultOptions>>('angular-split-global-config')

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

Lines changed: 35 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,13 @@ import {
1313
QueryList,
1414
EventEmitter,
1515
ViewEncapsulation,
16+
Inject,
17+
Optional,
1618
} from '@angular/core'
1719
import { Observable, Subscriber, Subject } from 'rxjs'
1820
import { debounceTime } from 'rxjs/operators'
1921

20-
import { IArea, IPoint, ISplitSnapshot, IAreaSnapshot, IOutputData, IOutputAreaSizes } from '../interface'
22+
import { IArea, IPoint, ISplitSnapshot, IAreaSnapshot, IOutputData, IOutputAreaSizes, IDefaultOptions } from '../interface'
2123
import { SplitAreaDirective } from '../directive/split-area.directive'
2224
import {
2325
getInputPositiveNumber,
@@ -31,6 +33,7 @@ import {
3133
pointDeltaEquals,
3234
updateAreaSize,
3335
} from '../utils'
36+
import { ANGULAR_SPLIT_DEFAULT_OPTIONS} from '../angular-split-config.token'
3437

3538
/**
3639
* angular-split
@@ -183,43 +186,60 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
183186
this._gutterDblClickDuration = getInputPositiveNumber(v, 0)
184187
}
185188

186-
@Input() gutterClickDeltaPx = 2;
189+
@Input() gutterClickDeltaPx = 2
187190

188191
get gutterDblClickDuration(): number {
189192
return this._gutterDblClickDuration
190193
}
191194
@Output() get transitionEnd(): Observable<IOutputAreaSizes> {
192-
return new Observable((subscriber) => (this.transitionEndSubscriber = subscriber)).pipe(
193-
debounceTime<IOutputAreaSizes>(20),
194-
)
195+
return new Observable<IOutputAreaSizes>(
196+
(subscriber: Subscriber<IOutputAreaSizes>) => (this.transitionEndSubscriber = subscriber),
197+
).pipe(debounceTime<IOutputAreaSizes>(20))
198+
}
199+
200+
private _config: IDefaultOptions = {
201+
direction: 'horizontal',
202+
unit: 'percent',
203+
gutterSize: 11,
204+
gutterStep: 1,
205+
restrictMove: false,
206+
useTransition: false,
207+
disabled: false,
208+
dir: 'ltr',
209+
gutterDblClickDuration: 0,
195210
}
196211

197212
constructor(
198213
private ngZone: NgZone,
199214
private elRef: ElementRef,
200215
private cdRef: ChangeDetectorRef,
201216
private renderer: Renderer2,
217+
@Optional() @Inject(ANGULAR_SPLIT_DEFAULT_OPTIONS) globalConfig: IDefaultOptions,
202218
) {
203219
// To force adding default class, could be override by user @Input() or not
204220
this.direction = this._direction
221+
this._config = globalConfig ? Object.assign(this._config, globalConfig) : this._config
222+
Object.keys(this._config).forEach((property) => {
223+
this[property] = this._config[property]
224+
})
205225
}
206-
private _direction: 'horizontal' | 'vertical' = 'horizontal'
226+
private _direction: 'horizontal' | 'vertical'
207227

208-
private _unit: 'percent' | 'pixel' = 'percent'
228+
private _unit: 'percent' | 'pixel'
209229

210-
private _gutterSize: number | null = 11
230+
private _gutterSize: number | null
211231

212-
private _gutterStep = 1
232+
private _gutterStep: number
213233

214-
private _restrictMove = false
234+
private _restrictMove: boolean
215235

216-
private _useTransition = false
236+
private _useTransition: boolean
217237

218-
private _disabled = false
238+
private _disabled: boolean
219239

220-
private _dir: 'ltr' | 'rtl' = 'ltr'
240+
private _dir: 'ltr' | 'rtl'
221241

222-
private _gutterDblClickDuration = 0
242+
private _gutterDblClickDuration: number
223243

224244
@Output() dragStart = new EventEmitter<IOutputData>(false)
225245
@Output() dragEnd = new EventEmitter<IOutputData>(false)
@@ -580,7 +600,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
580600
event.preventDefault()
581601
event.stopPropagation()
582602

583-
const tempPoint = getPointFromEvent(event);
603+
const tempPoint = getPointFromEvent(event)
584604
if (this._clickTimeout !== null && !pointDeltaEquals(this.startPoint, tempPoint, this.gutterClickDeltaPx)) {
585605
window.clearTimeout(this._clickTimeout)
586606
this._clickTimeout = null

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,18 @@ export interface IAreaAbsorptionCapacity {
4646
pixelRemain: number
4747
}
4848

49+
export interface IDefaultOptions {
50+
dir: 'ltr' | 'rtl'
51+
direction: 'horizontal' | 'vertical'
52+
disabled: boolean
53+
gutterDblClickDuration: number
54+
gutterSize: number | null
55+
gutterStep: number
56+
restrictMove: boolean
57+
unit: 'percent' | 'pixel'
58+
useTransition: boolean
59+
}
60+
4961
// CREATED TO SEND OUTSIDE
5062

5163
export interface IOutputData {

‎projects/angular-split/src/public_api.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@
55
export { AngularSplitModule } from './lib/module'
66
export { SplitComponent } from './lib/component/split.component'
77
export { SplitAreaDirective } from './lib/directive/split-area.directive'
8+
export { ANGULAR_SPLIT_DEFAULT_OPTIONS } from './lib/angular-split-config.token'
89
export * from './lib/interface'

‎src/app/examples/example-types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,5 @@ export enum ExampleEnum {
1313
TOGGLE = 'toggle',
1414
TRANSITION = 'transition',
1515
WORKSPACE = 'workspace',
16+
GLOBAL = 'global',
1617
}

‎src/app/examples/examples.routes.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,4 +138,13 @@ export const exampleRoutes: Routes = [
138138
loadChildren: () =>
139139
import('./workspace-localstorage/workspace-localstorage.module').then((m) => m.WorkspaceLocalstorageModule),
140140
},
141+
{
142+
data: {
143+
type: ExampleEnum.GLOBAL,
144+
label: 'Split with global settings',
145+
srcUrl: `${srcUrlBaseApp}/global-options/global-options.component.ts`,
146+
},
147+
path: 'global-options',
148+
loadChildren: () => import('./global-options/global-options.module').then((m) => m.GlobalOptionsModule),
149+
},
141150
]

‎src/app/examples/global-options/global-options.component.ts‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core'
2+
import { AComponent } from '../../ui/components/AComponent'
3+
import { SplitComponent, SplitAreaDirective } from 'angular-split'
4+
5+
@Component({
6+
selector: 'app-global-options',
7+
changeDetection: ChangeDetectionStrategy.OnPush,
8+
host: {
9+
class: 'split-example-page',
10+
},
11+
template: `
12+
{{ testChangeDetectorRun() }}
13+
<div class="container">
14+
<sp-example-title [type]="exampleEnum.GLOBAL"></sp-example-title>
15+
<h5>Global direction and gutter size:</h5>
16+
<div class="split-example ex-percent">
17+
<as-split #split="asSplit">
18+
<as-split-area #area1="asSplitArea">
19+
<p>
20+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, quis nostrud exercitation
21+
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
22+
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
23+
</p>
24+
</as-split-area>
25+
<as-split-area #area2="asSplitArea">
26+
<p>
27+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
28+
rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
29+
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
30+
consequuntur magni dolores eodolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
31+
tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
32+
nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
33+
autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel
34+
illum qui dolorem eum fugiat quo voluptas nulla pariatur?
35+
</p>
36+
</as-split-area>
37+
</as-split>
38+
</div>
39+
<br />
40+
</div>
41+
`,
42+
})
43+
export class GlobalOptionsComponent extends AComponent {
44+
@ViewChild('split') split: SplitComponent
45+
@ViewChild('area1') area1: SplitAreaDirective
46+
@ViewChild('area2') area2: SplitAreaDirective
47+
48+
constructor() {
49+
super()
50+
51+
setTimeout(() => {
52+
console.log('>>> split > ', this.split)
53+
console.log('>>> area1 > ', this.area1)
54+
console.log('>>> area2 > ', this.area2)
55+
}, 1000)
56+
}
57+
}

‎src/app/examples/global-options/global-options.module.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { NgModule } from '@angular/core'
2+
import { CommonModule } from '@angular/common'
3+
import { RouterModule } from '@angular/router'
4+
import { GlobalOptionsComponent } from './global-options.component'
5+
import { AngularSplitModule } from 'angular-split'
6+
import { UiModule } from '../../ui/ui.module'
7+
import { ANGULAR_SPLIT_DEFAULT_OPTIONS } from 'angular-split'
8+
9+
@NgModule({
10+
declarations: [GlobalOptionsComponent],
11+
imports: [
12+
CommonModule,
13+
RouterModule.forChild([{ path: '', component: GlobalOptionsComponent }]),
14+
AngularSplitModule,
15+
UiModule,
16+
],
17+
providers: [
18+
{
19+
provide: ANGULAR_SPLIT_DEFAULT_OPTIONS,
20+
useValue: {
21+
direction: 'vertical',
22+
gutterSize: 30,
23+
},
24+
},
25+
],
26+
})
27+
export class GlobalOptionsModule {}

0 commit comments

Comments
 (0)