angular-split · beeman · Nov 26, 2021 · Oct 18, 2021 · Oct 18, 2021 · Oct 18, 2021
diff --git a/projects/angular-split/src/lib/angular-split-config.token.ts b/projects/angular-split/src/lib/angular-split-config.token.ts
@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core'
+import { IDefaultOptions } from './interface'
+
+export const ANGULAR_SPLIT_DEFAULT_OPTIONS = new InjectionToken<Partial<IDefaultOptions>>('angular-split-global-config')
diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts
@@ -13,11 +13,13 @@ import {
   QueryList,
   EventEmitter,
   ViewEncapsulation,
+  Inject,
+  Optional,
 } from '@angular/core'
 import { Observable, Subscriber, Subject } from 'rxjs'
 import { debounceTime } from 'rxjs/operators'
 
-import { IArea, IPoint, ISplitSnapshot, IAreaSnapshot, IOutputData, IOutputAreaSizes } from '../interface'
+import { IArea, IPoint, ISplitSnapshot, IAreaSnapshot, IOutputData, IOutputAreaSizes, IDefaultOptions } from '../interface'
 import { SplitAreaDirective } from '../directive/split-area.directive'
 import {
   getInputPositiveNumber,
@@ -31,6 +33,7 @@ import {
   pointDeltaEquals,
   updateAreaSize,
 } from '../utils'
+import { ANGULAR_SPLIT_DEFAULT_OPTIONS} from '../angular-split-config.token'
 
 /**
  * angular-split
@@ -183,43 +186,60 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
     this._gutterDblClickDuration = getInputPositiveNumber(v, 0)
   }
 
-  @Input() gutterClickDeltaPx = 2;
+  @Input() gutterClickDeltaPx = 2
 
   get gutterDblClickDuration(): number {
     return this._gutterDblClickDuration
   }
   @Output() get transitionEnd(): Observable<IOutputAreaSizes> {
-    return new Observable((subscriber) => (this.transitionEndSubscriber = subscriber)).pipe(
-      debounceTime<IOutputAreaSizes>(20),
-    )
+    return new Observable<IOutputAreaSizes>(
+      (subscriber: Subscriber<IOutputAreaSizes>) => (this.transitionEndSubscriber = subscriber),
+    ).pipe(debounceTime<IOutputAreaSizes>(20))
+  }
+
+  private _config: IDefaultOptions = {
+    direction: 'horizontal',
+    unit: 'percent',
+    gutterSize: 11,
+    gutterStep: 1,
+    restrictMove: false,
+    useTransition: false,
+    disabled: false,
+    dir: 'ltr',
+    gutterDblClickDuration: 0,
   }
 
   constructor(
     private ngZone: NgZone,
     private elRef: ElementRef,
     private cdRef: ChangeDetectorRef,
     private renderer: Renderer2,
+    @Optional() @Inject(ANGULAR_SPLIT_DEFAULT_OPTIONS) globalConfig: IDefaultOptions,
   ) {
     // To force adding default class, could be override by user @Input() or not
     this.direction = this._direction
+    this._config = globalConfig ? Object.assign(this._config, globalConfig) : this._config
+    Object.keys(this._config).forEach((property) => {
+      this[property] = this._config[property]
+    })
   }
-  private _direction: 'horizontal' | 'vertical' = 'horizontal'
+  private _direction: 'horizontal' | 'vertical'
 
-  private _unit: 'percent' | 'pixel' = 'percent'
+  private _unit: 'percent' | 'pixel'
 
-  private _gutterSize: number | null = 11
+  private _gutterSize: number | null
 
-  private _gutterStep = 1
+  private _gutterStep: number
 
-  private _restrictMove = false
+  private _restrictMove: boolean
 
-  private _useTransition = false
+  private _useTransition: boolean
 
-  private _disabled = false
+  private _disabled: boolean
 
-  private _dir: 'ltr' | 'rtl' = 'ltr'
+  private _dir: 'ltr' | 'rtl'
 
-  private _gutterDblClickDuration = 0
+  private _gutterDblClickDuration: number
 
   @Output() dragStart = new EventEmitter<IOutputData>(false)
   @Output() dragEnd = new EventEmitter<IOutputData>(false)
@@ -580,7 +600,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
     event.preventDefault()
     event.stopPropagation()
 
-    const tempPoint = getPointFromEvent(event);
+    const tempPoint = getPointFromEvent(event)
     if (this._clickTimeout !== null && !pointDeltaEquals(this.startPoint, tempPoint, this.gutterClickDeltaPx)) {
       window.clearTimeout(this._clickTimeout)
       this._clickTimeout = null

diff --git a/projects/angular-split/src/lib/interface.ts b/projects/angular-split/src/lib/interface.ts
@@ -46,6 +46,18 @@ export interface IAreaAbsorptionCapacity {
   pixelRemain: number
 }
 
+export interface IDefaultOptions {
+  dir: 'ltr' | 'rtl'
+  direction: 'horizontal' | 'vertical'
+  disabled: boolean
+  gutterDblClickDuration: number
+  gutterSize: number | null
+  gutterStep: number
+  restrictMove: boolean
+  unit: 'percent' | 'pixel'
+  useTransition: boolean
+}
+
 // CREATED TO SEND OUTSIDE
 
 export interface IOutputData {

diff --git a/projects/angular-split/src/public_api.ts b/projects/angular-split/src/public_api.ts
@@ -5,4 +5,5 @@
 export { AngularSplitModule } from './lib/module'
 export { SplitComponent } from './lib/component/split.component'
 export { SplitAreaDirective } from './lib/directive/split-area.directive'
+export { ANGULAR_SPLIT_DEFAULT_OPTIONS } from './lib/angular-split-config.token'
 export * from './lib/interface'
diff --git a/src/app/examples/example-types.ts b/src/app/examples/example-types.ts
@@ -13,4 +13,5 @@ export enum ExampleEnum {
   TOGGLE = 'toggle',
   TRANSITION = 'transition',
   WORKSPACE = 'workspace',
+  GLOBAL = 'global',
 }
diff --git a/src/app/examples/examples.routes.ts b/src/app/examples/examples.routes.ts
@@ -138,4 +138,13 @@ export const exampleRoutes: Routes = [
     loadChildren: () =>
       import('./workspace-localstorage/workspace-localstorage.module').then((m) => m.WorkspaceLocalstorageModule),
   },
+  {
+    data: {
+      type: ExampleEnum.GLOBAL,
+      label: 'Split with global settings',
+      srcUrl: `${srcUrlBaseApp}/global-options/global-options.component.ts`,
+    },
+    path: 'global-options',
+    loadChildren: () => import('./global-options/global-options.module').then((m) => m.GlobalOptionsModule),
+  },
 ]
diff --git a/src/app/examples/global-options/global-options.component.ts b/src/app/examples/global-options/global-options.component.ts
@@ -0,0 +1,57 @@
+import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core'
+import { AComponent } from '../../ui/components/AComponent'
+import { SplitComponent, SplitAreaDirective } from 'angular-split'
+
+@Component({
+  selector: 'app-global-options',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: 'split-example-page',
+  },
+  template: `
+    {{ testChangeDetectorRun() }}
+    <div class="container">
+      <sp-example-title [type]="exampleEnum.GLOBAL"></sp-example-title>
+      <h5>Global direction and gutter size:</h5>
+      <div class="split-example ex-percent">
+        <as-split #split="asSplit">
+          <as-split-area #area1="asSplitArea">
+            <p>
+              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.
+            </p>
+          </as-split-area>
+          <as-split-area #area2="asSplitArea">
+            <p>
+              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?
+            </p>
+          </as-split-area>
+        </as-split>
+      </div>
+      <br />
+    </div>
+  `,
+})
+export class GlobalOptionsComponent extends AComponent {
+  @ViewChild('split') split: SplitComponent
+  @ViewChild('area1') area1: SplitAreaDirective
+  @ViewChild('area2') area2: SplitAreaDirective
+
+  constructor() {
+    super()
+
+    setTimeout(() => {
+      console.log('>>> split > ', this.split)
+      console.log('>>> area1 > ', this.area1)
+      console.log('>>> area2 > ', this.area2)
+    }, 1000)
+  }
+}
diff --git a/src/app/examples/global-options/global-options.module.ts b/src/app/examples/global-options/global-options.module.ts
@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { RouterModule } from '@angular/router'
+import { GlobalOptionsComponent } from './global-options.component'
+import { AngularSplitModule } from 'angular-split'
+import { UiModule } from '../../ui/ui.module'
+import { ANGULAR_SPLIT_DEFAULT_OPTIONS } from 'angular-split'
+
+@NgModule({
+  declarations: [GlobalOptionsComponent],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([{ path: '', component: GlobalOptionsComponent }]),
+    AngularSplitModule,
+    UiModule,
+  ],
+  providers: [
+    {
+      provide: ANGULAR_SPLIT_DEFAULT_OPTIONS,
+      useValue: {
+        direction: 'vertical',
+        gutterSize: 30,
+      },
+    },
+  ],
+})
+export class GlobalOptionsModule {}