ng2-split-pane-patch
Version:
A simple resizable split pane Angular 2 library
178 lines • 8.02 kB
JavaScript
import { Component, ViewChild, ElementRef, HostListener, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
const _c0 = ["primaryComponent"];
const _c1 = ["secondaryComponent"];
export class SplitPaneComponent {
constructor() {
this.initialRatio = 0.5;
this.primaryMinSize = 0;
this.secondaryMinSize = 0;
this.separatorThickness = 7;
this.primaryToggledOff = false;
this.secondaryToggledOff = false;
this.localStorageKey = null;
this.notifySizeDidChange = new EventEmitter();
this.notifyBeginResizing = new EventEmitter();
this.notifyEndedResizing = new EventEmitter();
this.dividerSize = 8.0;
this.isResizing = false;
}
ngAfterViewInit() {
this.checkBothToggledOff();
let ratio = this.initialRatio;
if (this.localStorageKey != null) {
let ratioStr = localStorage.getItem(this.localStorageKey);
if (ratioStr != null) {
ratio = JSON.parse(ratioStr);
}
}
let size = ratio * this.getTotalSize();
if (!this.primaryToggledOff && !this.secondaryToggledOff) {
this.applySizeChange(size);
}
else {
this.primarySizeBeforeTogglingOff = size;
}
}
ngOnChanges(changes) {
this.checkBothToggledOff();
if (changes['primaryToggledOff']) {
if (changes['primaryToggledOff'].currentValue === true) {
this.primarySizeBeforeTogglingOff = this.getPrimarySize();
this.applySizeChange(0);
}
else {
this.applySizeChange(this.primarySizeBeforeTogglingOff);
}
}
else if (changes['secondaryToggledOff']) {
if (changes['secondaryToggledOff'].currentValue === true) {
this.primarySizeBeforeTogglingOff = this.getPrimarySize();
this.applySizeChange(this.getTotalSize());
}
else {
this.applySizeChange(this.primarySizeBeforeTogglingOff);
}
}
}
getTotalSize() {
throw ("SplitPaneComponent shouldn't be instantiated. Override this method.");
}
getPrimarySize() {
throw ("SplitPaneComponent shouldn't be instantiated. Override this method.");
}
getSecondarySize() {
throw ("SplitPaneComponent shouldn't be instantiated. Override this method.");
}
dividerPosition(size) {
throw ("SplitPaneComponent shouldn't be instantiated. Override this method.");
}
getAvailableSize() {
return this.getTotalSize() - this.dividerSize;
}
applySizeChange(size) {
let primarySize = this.checkValidBounds(size, this.primaryMinSize, this.getAvailableSize() - this.secondaryMinSize);
if (this.primaryToggledOff) {
primarySize = 0;
}
else if (this.secondaryToggledOff) {
primarySize = this.getTotalSize();
}
this.dividerPosition(primarySize);
this.notifySizeDidChange.emit({ 'primary': this.getPrimarySize(), 'secondary': this.getSecondarySize() });
}
notifyWillChangeSize(resizing) {
this.isResizing = resizing;
this.notifyBeginResizing.emit();
}
checkValidBounds(newSize, minSize, maxSize) {
return newSize >= minSize
? (newSize <= maxSize)
? newSize
: maxSize
: minSize;
}
checkBothToggledOff() {
if (this.primaryToggledOff && this.secondaryToggledOff) {
throw ('You cannot toggle off both the primary and secondary component');
}
}
stopResizing() {
this.isResizing = false;
this.primaryComponent.nativeElement.style.cursor = "auto";
this.secondaryComponent.nativeElement.style.cursor = "auto";
if (this.localStorageKey != null) {
let ratio = this.getPrimarySize() / (this.getTotalSize());
localStorage.setItem(this.localStorageKey, JSON.stringify(ratio));
}
this.notifyEndedResizing.emit();
}
onMouseup(event) {
if (this.isResizing) {
this.stopResizing();
return false;
}
}
}
SplitPaneComponent.ɵfac = function SplitPaneComponent_Factory(t) { return new (t || SplitPaneComponent)(); };
SplitPaneComponent.ɵcmp = i0.ɵɵdefineComponent({ type: SplitPaneComponent, selectors: [["split-pane"]], viewQuery: function SplitPaneComponent_Query(rf, ctx) { if (rf & 1) {
i0.ɵɵviewQuery(_c0, 7);
i0.ɵɵviewQuery(_c1, 7);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.primaryComponent = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.secondaryComponent = _t.first);
} }, hostAttrs: [2, "height", "100%"], hostBindings: function SplitPaneComponent_HostBindings(rf, ctx) { if (rf & 1) {
i0.ɵɵlistener("mouseup", function SplitPaneComponent_mouseup_HostBindingHandler($event) { return ctx.onMouseup($event); })("touchend", function SplitPaneComponent_touchend_HostBindingHandler($event) { return ctx.onMouseup($event); });
} }, inputs: { initialRatio: ["primary-component-initialratio", "initialRatio"], primaryMinSize: ["primary-component-minsize", "primaryMinSize"], secondaryMinSize: ["secondary-component-minsize", "secondaryMinSize"], separatorThickness: ["separator-thickness", "separatorThickness"], primaryToggledOff: ["primary-component-toggled-off", "primaryToggledOff"], secondaryToggledOff: ["secondary-component-toggled-off", "secondaryToggledOff"], localStorageKey: ["local-storage-key", "localStorageKey"] }, outputs: { notifySizeDidChange: "on-change", notifyBeginResizing: "on-begin-resizing", notifyEndedResizing: "on-ended-resizing" }, features: [i0.ɵɵNgOnChangesFeature], decls: 0, vars: 0, template: function SplitPaneComponent_Template(rf, ctx) { }, encapsulation: 2 });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SplitPaneComponent, [{
type: Component,
args: [{
selector: 'split-pane',
template: '',
host: { 'style': 'height: 100%' }
}]
}], null, { primaryComponent: [{
type: ViewChild,
args: ['primaryComponent', { static: true }]
}], secondaryComponent: [{
type: ViewChild,
args: ['secondaryComponent', { static: true }]
}], initialRatio: [{
type: Input,
args: ['primary-component-initialratio']
}], primaryMinSize: [{
type: Input,
args: ['primary-component-minsize']
}], secondaryMinSize: [{
type: Input,
args: ['secondary-component-minsize']
}], separatorThickness: [{
type: Input,
args: ['separator-thickness']
}], primaryToggledOff: [{
type: Input,
args: ['primary-component-toggled-off']
}], secondaryToggledOff: [{
type: Input,
args: ['secondary-component-toggled-off']
}], localStorageKey: [{
type: Input,
args: ['local-storage-key']
}], notifySizeDidChange: [{
type: Output,
args: ['on-change']
}], notifyBeginResizing: [{
type: Output,
args: ['on-begin-resizing']
}], notifyEndedResizing: [{
type: Output,
args: ['on-ended-resizing']
}], onMouseup: [{
type: HostListener,
args: ['mouseup', ['$event']]
}, {
type: HostListener,
args: ['touchend', ['$event']]
}] }); })();
//# sourceMappingURL=split-pane.component.js.map