diff --git a/projects/angular-split/src/lib/angular-split-config.token.ts b/projects/angular-split/src/lib/angular-split-config.token.ts new file mode 100644 index 00000000..e24411d6 --- /dev/null +++ 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>('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 index 52a4a699..d2d1a39e 100644 --- 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,15 +186,27 @@ 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 { - return new Observable((subscriber) => (this.transitionEndSubscriber = subscriber)).pipe( - debounceTime(20), - ) + return new Observable( + (subscriber: Subscriber) => (this.transitionEndSubscriber = subscriber), + ).pipe(debounceTime(20)) + } + + private _config: IDefaultOptions = { + direction: 'horizontal', + unit: 'percent', + gutterSize: 11, + gutterStep: 1, + restrictMove: false, + useTransition: false, + disabled: false, + dir: 'ltr', + gutterDblClickDuration: 0, } constructor( @@ -199,27 +214,32 @@ export class SplitComponent implements AfterViewInit, OnDestroy { 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(false) @Output() dragEnd = new EventEmitter(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 index 13e23aba..884284de 100644 --- 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 index 07393a3e..45465dc8 100644 --- 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 index 7258fffe..1718ec89 100644 --- 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 index 6d7a1a77..d10695aa 100644 --- 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 new file mode 100644 index 00000000..bf42526d --- /dev/null +++ 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() }} +
+ +
Global direction and gutter size:
+
+ + +

+ 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. +

+
+ +

+ 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? +

+
+
+
+
+
+ `, +}) +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 new file mode 100644 index 00000000..d8a415ca --- /dev/null +++ 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 {}