diff --git a/.gitignore b/.gitignore index eb548c1..c7e06d8 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ *.tgz .vscode node_modules -lib +compiled *ngfactory.ts *.ngsummary.json + diff --git a/lib/horizontal-split-pane-separator.component.d.ts b/lib/horizontal-split-pane-separator.component.d.ts new file mode 100644 index 0000000..2c4dfea --- /dev/null +++ b/lib/horizontal-split-pane-separator.component.d.ts @@ -0,0 +1,5 @@ +import { OnInit } from '@angular/core'; +import { SplitSeparatorComponent } from './split-pane-separator.component'; +export declare class HorizontalSplitSeparatorComponent extends SplitSeparatorComponent implements OnInit { + ngAfterViewInit(): void; +} diff --git a/lib/horizontal-split-pane-separator.component.js b/lib/horizontal-split-pane-separator.component.js new file mode 100644 index 0000000..243222a --- /dev/null +++ b/lib/horizontal-split-pane-separator.component.js @@ -0,0 +1,38 @@ +"use strict"; +var __extends = (this && this.__extends) || (function () { + var extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; + return function (d, b) { + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); + }; +})(); +Object.defineProperty(exports, "__esModule", { value: true }); +var core_1 = require("@angular/core"); +var split_pane_separator_component_1 = require("./split-pane-separator.component"); +var HorizontalSplitSeparatorComponent = (function (_super) { + __extends(HorizontalSplitSeparatorComponent, _super); + function HorizontalSplitSeparatorComponent() { + return _super !== null && _super.apply(this, arguments) || this; + } + HorizontalSplitSeparatorComponent.prototype.ngAfterViewInit = function () { + this.invisibleExtension.nativeElement.style.top = + -(7 - this.thickness) / 2 + "px"; + }; + return HorizontalSplitSeparatorComponent; +}(split_pane_separator_component_1.SplitSeparatorComponent)); +HorizontalSplitSeparatorComponent.decorators = [ + { type: core_1.Component, args: [{ + selector: 'horizontal-split-separator', + styles: ["\n :host {\n background-color: #fff;\n border-top: 1px solid #ddd;\n cursor: ns-resize;\n position: relative;\n }\n :host:hover {\n background-color: #fafafa;\n }\n\n .invisible-extension {\n position: absolute;\n height: 100%;\n width: 100%;\n min-height: 7px;\n }\n\n .handle {\n width: 35px;\n height: 100%;\n background-color: #eee;\n margin: auto;\n }\n "], + template: "\n \n = 7\"\n class=\"invisible-extension\">\n\n
\n ", + host: { + '[style.height.px]': 'thickness' + } + },] }, +]; +HorizontalSplitSeparatorComponent.ctorParameters = function () { return []; }; +exports.HorizontalSplitSeparatorComponent = HorizontalSplitSeparatorComponent; +//# sourceMappingURL=horizontal-split-pane-separator.component.js.map \ No newline at end of file diff --git a/lib/horizontal-split-pane-separator.component.js.map b/lib/horizontal-split-pane-separator.component.js.map new file mode 100644 index 0000000..85c5232 --- /dev/null +++ b/lib/horizontal-split-pane-separator.component.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../src/horizontal-split-pane-separator.component.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,sCAAkD;AAClD,mFAAwC;AAGxC;IACU,qDAAuB;IADjC;;IAuDA,CAAC;IAnDC,2DAAe,GAAf;QACE,IAAI,CAAC,kBAAkB,CAAC,aAAa,CAAC,KAAK,CAAC,GAAG;YAC7C,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IACrC,CAAC;IAgDH,wCAAC;AAAD,CAvDA,AAuDC,CAtDS,wDAAuB;AAQ1B,4CAAU,GAA0B;IAC3C,EAAE,IAAI,EAAE,gBAAS,EAAE,IAAI,EAAE,CAAC;gBACxB,QAAQ,EAAE,4BAA4B;gBACtC,MAAM,EAAE,CAAC,mcAwBR,CAAC;gBACF,QAAQ,EAAE,sRAST;gBACD,IAAI,EAAE;oBACJ,mBAAmB,EAAE,WAAW;iBACjC;aACF,EAAG,EAAE;CACL,CAAC;AAEK,gDAAc,GAAmE,cAAM,OAAA,EAC7F,EAD6F,CAC7F,CAAC;AAtDW,8EAAiC","file":"horizontal-split-pane-separator.component.js","sourceRoot":""} \ No newline at end of file diff --git a/lib/horizontal-split-pane-separator.component.metadata.json b/lib/horizontal-split-pane-separator.component.metadata.json new file mode 100644 index 0000000..737c83d --- /dev/null +++ b/lib/horizontal-split-pane-separator.component.metadata.json @@ -0,0 +1 @@ +[{"__symbolic":"module","version":3,"metadata":{"HorizontalSplitSeparatorComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./split-pane-separator.component","name":"SplitSeparatorComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"horizontal-split-separator","styles":["\n :host {\n background-color: #fff;\n border-top: 1px solid #ddd;\n cursor: ns-resize;\n position: relative;\n }\n :host:hover {\n background-color: #fafafa;\n }\n\n .invisible-extension {\n position: absolute;\n height: 100%;\n width: 100%;\n min-height: 7px;\n }\n\n .handle {\n width: 35px;\n height: 100%;\n background-color: #eee;\n margin: auto;\n }\n "],"template":"\n \n = 7\"\n class=\"invisible-extension\">\n\n
\n ","host":{"[style.height.px]":"thickness","$quoted$":["[style.height.px]"]}}]}],"members":{"ngAfterViewInit":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"HorizontalSplitSeparatorComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./split-pane-separator.component","name":"SplitSeparatorComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"horizontal-split-separator","styles":["\n :host {\n background-color: #fff;\n border-top: 1px solid #ddd;\n cursor: ns-resize;\n position: relative;\n }\n :host:hover {\n background-color: #fafafa;\n }\n\n .invisible-extension {\n position: absolute;\n height: 100%;\n width: 100%;\n min-height: 7px;\n }\n\n .handle {\n width: 35px;\n height: 100%;\n background-color: #eee;\n margin: auto;\n }\n "],"template":"\n \n = 7\"\n class=\"invisible-extension\">\n\n
\n ","host":{"[style.height.px]":"thickness"}}]}],"members":{"ngAfterViewInit":[{"__symbolic":"method"}]}}}}] \ No newline at end of file diff --git a/lib/horizontal-split-pane.component.d.ts b/lib/horizontal-split-pane.component.d.ts new file mode 100644 index 0000000..1d73df2 --- /dev/null +++ b/lib/horizontal-split-pane.component.d.ts @@ -0,0 +1,12 @@ +import { ElementRef } from '@angular/core'; +import { SplitPaneComponent } from './split-pane.component'; +export declare class HorizontalSplitPaneComponent extends SplitPaneComponent { + outerContainer: ElementRef; + test: number; + getTotalSize(): number; + getPrimarySize(): number; + getSecondarySize(): number; + dividerPosition(size: number): void; + onMousemove(event: MouseEvent): boolean; + onTouchmove(event: TouchEvent): boolean; +} diff --git a/lib/horizontal-split-pane.component.js b/lib/horizontal-split-pane.component.js new file mode 100644 index 0000000..c0f1c59 --- /dev/null +++ b/lib/horizontal-split-pane.component.js @@ -0,0 +1,68 @@ +"use strict"; +var __extends = (this && this.__extends) || (function () { + var extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; + return function (d, b) { + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); + }; +})(); +Object.defineProperty(exports, "__esModule", { value: true }); +var core_1 = require("@angular/core"); +var split_pane_component_1 = require("./split-pane.component"); +var position_service_1 = require("./position.service"); +var HorizontalSplitPaneComponent = (function (_super) { + __extends(HorizontalSplitPaneComponent, _super); + function HorizontalSplitPaneComponent() { + return _super !== null && _super.apply(this, arguments) || this; + } + HorizontalSplitPaneComponent.prototype.getTotalSize = function () { + return this.outerContainer.nativeElement.offsetHeight; + }; + HorizontalSplitPaneComponent.prototype.getPrimarySize = function () { + return this.primaryComponent.nativeElement.offsetHeight; + }; + HorizontalSplitPaneComponent.prototype.getSecondarySize = function () { + return this.secondaryComponent.nativeElement.offsetHeight; + }; + HorizontalSplitPaneComponent.prototype.dividerPosition = function (size) { + var sizePct = (size / this.getTotalSize()) * 100.0; + this.primaryComponent.nativeElement.style.height = sizePct + "%"; + this.secondaryComponent.nativeElement.style.height = + "calc(" + (100 - sizePct) + "% - " + + (this.primaryToggledOff || this.secondaryToggledOff ? 0 : this.separatorThickness) + "px)"; + }; + HorizontalSplitPaneComponent.prototype.onMousemove = function (event) { + if (this.isResizing) { + var coords = position_service_1.PositionService.offset(this.primaryComponent); + this.applySizeChange(event.pageY - coords.top); + return false; + } + }; + HorizontalSplitPaneComponent.prototype.onTouchmove = function (event) { + if (this.isResizing) { + var coords = position_service_1.PositionService.offset(this.primaryComponent); + this.applySizeChange(event.changedTouches[0].pageY - coords.top); + return false; + } + }; + return HorizontalSplitPaneComponent; +}(split_pane_component_1.SplitPaneComponent)); +HorizontalSplitPaneComponent.decorators = [ + { type: core_1.Component, args: [{ + selector: 'horizontal-split-pane', + styles: ["\n .h-outer {\n height: 100%;\n width: 100%;\n display: flex;\n flex-flow: column;\n }\n\n .upper-component {\n height: calc(50% - 4px);\n }\n\n .lower-component {\n height: calc(50% - 4px);\n }\n "], + template: "\n
\n \n \n
\n \n \n \n \n \n \n ", + },] }, +]; +HorizontalSplitPaneComponent.ctorParameters = function () { return []; }; +HorizontalSplitPaneComponent.propDecorators = { + 'outerContainer': [{ type: core_1.ViewChild, args: ['outer',] },], + 'test': [{ type: core_1.Input },], + 'onMousemove': [{ type: core_1.HostListener, args: ['mousemove', ['$event'],] },], + 'onTouchmove': [{ type: core_1.HostListener, args: ['touchmove', ['$event'],] },], +}; +exports.HorizontalSplitPaneComponent = HorizontalSplitPaneComponent; +//# sourceMappingURL=horizontal-split-pane.component.js.map \ No newline at end of file diff --git a/lib/horizontal-split-pane.component.js.map b/lib/horizontal-split-pane.component.js.map new file mode 100644 index 0000000..66bd89c --- /dev/null +++ b/lib/horizontal-split-pane.component.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../src/horizontal-split-pane.component.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,sCAAmI;AACnI,+DAAmC;AACnC,uDAAgC;AAGhC;IAAkD,gDAAkB;IAApE;;IA+FA,CAAC;IA1FC,mDAAY,GAAZ;QACE,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,YAAY,CAAC;IACxD,CAAC;IAED,qDAAc,GAAd;QACE,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,YAAY,CAAC;IAC1D,CAAC;IAED,uDAAgB,GAAhB;QACE,MAAM,CAAC,IAAI,CAAC,kBAAkB,CAAC,aAAa,CAAC,YAAY,CAAC;IAC5D,CAAC;IAED,sDAAe,GAAf,UAAgB,IAAY;QAC1B,IAAM,OAAO,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC,GAAG,KAAK,CAAC;QACrD,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,GAAG,OAAO,GAAG,GAAG,CAAC;QACjE,IAAI,CAAC,kBAAkB,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM;YAChD,OAAO,GAAG,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,MAAM;gBAClC,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,mBAAmB,GAAG,CAAC,GAAG,IAAI,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC;IAC/F,CAAC;IAGD,kDAAW,GAAX,UAAY,KAAiB;QACzB,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;YACpB,IAAI,MAAM,GAAG,kCAAe,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;YAC3D,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;YAC/C,MAAM,CAAC,KAAK,CAAC;QACf,CAAC;IACH,CAAC;IAGD,kDAAW,GAAX,UAAY,KAAiB;QACzB,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;YACpB,IAAI,MAAM,GAAG,kCAAe,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;YAC3D,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;YACjE,MAAM,CAAC,KAAK,CAAC;QACf,CAAC;IACH,CAAC;IAsDP,mCAAC;AAAD,CA/FA,AA+FC,CA/FiD,yCAAkB;AA2C7D,uCAAU,GAA0B;IAC3C,EAAE,IAAI,EAAE,gBAAS,EAAE,IAAI,EAAE,CAAC;gBACxB,QAAQ,EAAE,uBAAuB;gBACjC,MAAM,EAAE,CAAC,wPAeR,CAAC;gBACF,QAAQ,EAAE,wrBAqBT;aACF,EAAG,EAAE;CACL,CAAC;AAEK,2CAAc,GAAmE,cAAM,OAAA,EAC7F,EAD6F,CAC7F,CAAC;AACK,2CAAc,GAA2C;IAChE,gBAAgB,EAAE,CAAC,EAAE,IAAI,EAAE,gBAAS,EAAE,IAAI,EAAE,CAAC,OAAO,EAAG,EAAE,EAAE;IAC3D,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,YAAK,EAAE,EAAE;IAC1B,aAAa,EAAE,CAAC,EAAE,IAAI,EAAE,mBAAY,EAAE,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,EAAG,EAAE,EAAE;IAC3E,aAAa,EAAE,CAAC,EAAE,IAAI,EAAE,mBAAY,EAAE,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,EAAG,EAAE,EAAE;CAC1E,CAAC;AA9FW,oEAA4B","file":"horizontal-split-pane.component.js","sourceRoot":""} \ No newline at end of file diff --git a/lib/horizontal-split-pane.component.metadata.json b/lib/horizontal-split-pane.component.metadata.json new file mode 100644 index 0000000..f5b119c --- /dev/null +++ b/lib/horizontal-split-pane.component.metadata.json @@ -0,0 +1 @@ +[{"__symbolic":"module","version":3,"metadata":{"HorizontalSplitPaneComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./split-pane.component","name":"SplitPaneComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"horizontal-split-pane","styles":["\n .h-outer {\n height: 100%;\n width: 100%;\n display: flex;\n flex-flow: column;\n }\n\n .upper-component {\n height: calc(50% - 4px);\n }\n\n .lower-component {\n height: calc(50% - 4px);\n }\n "],"template":"\n
\n \n \n
\n \n \n \n \n \n \n "}]}],"members":{"outerContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["outer"]}]}],"test":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"getTotalSize":[{"__symbolic":"method"}],"getPrimarySize":[{"__symbolic":"method"}],"getSecondarySize":[{"__symbolic":"method"}],"dividerPosition":[{"__symbolic":"method"}],"onMousemove":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["mousemove",["$event"]]}]}],"onTouchmove":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["touchmove",["$event"]]}]}]}}}},{"__symbolic":"module","version":1,"metadata":{"HorizontalSplitPaneComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./split-pane.component","name":"SplitPaneComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"horizontal-split-pane","styles":["\n .h-outer {\n height: 100%;\n width: 100%;\n display: flex;\n flex-flow: column;\n }\n\n .upper-component {\n height: calc(50% - 4px);\n }\n\n .lower-component {\n height: calc(50% - 4px);\n }\n "],"template":"\n
\n \n \n
\n \n \n \n \n \n \n "}]}],"members":{"outerContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["outer"]}]}],"test":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"getTotalSize":[{"__symbolic":"method"}],"getPrimarySize":[{"__symbolic":"method"}],"getSecondarySize":[{"__symbolic":"method"}],"dividerPosition":[{"__symbolic":"method"}],"onMousemove":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["mousemove",["$event"]]}]}],"onTouchmove":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["touchmove",["$event"]]}]}]}}}}] \ No newline at end of file diff --git a/lib/ng2-split-pane.d.ts b/lib/ng2-split-pane.d.ts new file mode 100644 index 0000000..9c6033a --- /dev/null +++ b/lib/ng2-split-pane.d.ts @@ -0,0 +1,5 @@ +import { ModuleWithProviders } from '@angular/core'; +export declare function delayedInit(): ModuleWithProviders; +export declare class SplitPaneModule { + static forRoot: ModuleWithProviders; +} diff --git a/lib/ng2-split-pane.js b/lib/ng2-split-pane.js new file mode 100644 index 0000000..d30c2b7 --- /dev/null +++ b/lib/ng2-split-pane.js @@ -0,0 +1,40 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +var core_1 = require("@angular/core"); +var common_1 = require("@angular/common"); +var horizontal_split_pane_separator_component_1 = require("./horizontal-split-pane-separator.component"); +var vertical_split_pane_separator_component_1 = require("./vertical-split-pane-separator.component"); +var horizontal_split_pane_component_1 = require("./horizontal-split-pane.component"); +var vertical_split_pane_component_1 = require("./vertical-split-pane.component"); +var split_pane_separator_component_1 = require("./split-pane-separator.component"); +var split_pane_component_1 = require("./split-pane.component"); +function delayedInit() { + return { + ngModule: SplitPaneModule, + providers: [] + }; +} +exports.delayedInit = delayedInit; +var SplitPaneModule = (function () { + function SplitPaneModule() { + } + return SplitPaneModule; +}()); +SplitPaneModule.forRoot = delayedInit(); +SplitPaneModule.decorators = [ + { type: core_1.NgModule, args: [{ + imports: [common_1.CommonModule], + declarations: [ + horizontal_split_pane_component_1.HorizontalSplitPaneComponent, + vertical_split_pane_component_1.VerticalSplitPaneComponent, + horizontal_split_pane_separator_component_1.HorizontalSplitSeparatorComponent, + vertical_split_pane_separator_component_1.VerticalSplitSeparatorComponent, + split_pane_separator_component_1.SplitSeparatorComponent, + split_pane_component_1.SplitPaneComponent + ], + exports: [horizontal_split_pane_component_1.HorizontalSplitPaneComponent, vertical_split_pane_component_1.VerticalSplitPaneComponent] + },] }, +]; +SplitPaneModule.ctorParameters = function () { return []; }; +exports.SplitPaneModule = SplitPaneModule; +//# sourceMappingURL=ng2-split-pane.js.map \ No newline at end of file diff --git a/lib/ng2-split-pane.js.map b/lib/ng2-split-pane.js.map new file mode 100644 index 0000000..c4e2cb4 --- /dev/null +++ b/lib/ng2-split-pane.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../src/ng2-split-pane.ts"],"names":[],"mappings":";;AAAA,sCAA8D;AAC9D,0CAA+C;AAE/C,yGAAgG;AAChG,qGAA4F;AAC5F,qFAAiF;AACjF,iFAA6E;AAC7E,mFAA2E;AAC3E,+DAA4D;AAE5D;IACE,MAAM,CAAC;QACL,QAAQ,EAAE,eAAA;QACV,SAAS,EAAE,EAAA;KACZ,CAAA;AACH,CAAC;AALD,kCAKC;AAGD;IAAA;IAmBA,CAAC;IAAD,sBAAC;AAAD,CAnBA,AAmBC;AAlBQ,uBAAO,GAAG,WAAW,EAAE,CAAC;AAC1B,0BAAU,GAA0B;IAC3C,EAAE,IAAI,EAAE,eAAQ,EAAE,IAAI,EAAE,CAAC;gBACvB,OAAO,EAAE,CAAC,qBAAY,CAAC;gBACvB,YAAY,EAAE;oBACZ,8DAA4B;oBAC5B,0DAA0B;oBAC1B,6EAAiC;oBACjC,yEAA+B;oBAC/B,wDAAuB;oBACvB,yCAAkB;iBACnB;gBACD,OAAO,EAAE,CAAC,8DAA4B,EAAE,0DAA0B,CAAC;aACpE,EAAG,EAAE;CACL,CAAC;AAEK,8BAAc,GAAmE,cAAM,OAAA,EAC7F,EAD6F,CAC7F,CAAC;AAlBW,0CAAe","file":"ng2-split-pane.js","sourceRoot":""} \ No newline at end of file diff --git a/lib/ng2-split-pane.metadata.json b/lib/ng2-split-pane.metadata.json new file mode 100644 index 0000000..981e148 --- /dev/null +++ b/lib/ng2-split-pane.metadata.json @@ -0,0 +1 @@ +[{"__symbolic":"module","version":3,"metadata":{"delayedInit":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"SplitPaneModule"},"providers":[]}},"SplitPaneModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","module":"./horizontal-split-pane.component","name":"HorizontalSplitPaneComponent"},{"__symbolic":"reference","module":"./vertical-split-pane.component","name":"VerticalSplitPaneComponent"},{"__symbolic":"reference","module":"./horizontal-split-pane-separator.component","name":"HorizontalSplitSeparatorComponent"},{"__symbolic":"reference","module":"./vertical-split-pane-separator.component","name":"VerticalSplitSeparatorComponent"},{"__symbolic":"reference","module":"./split-pane-separator.component","name":"SplitSeparatorComponent"},{"__symbolic":"reference","module":"./split-pane.component","name":"SplitPaneComponent"}],"exports":[{"__symbolic":"reference","module":"./horizontal-split-pane.component","name":"HorizontalSplitPaneComponent"},{"__symbolic":"reference","module":"./vertical-split-pane.component","name":"VerticalSplitPaneComponent"}]}]}],"statics":{"forRoot":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"delayedInit"}}}}}},{"__symbolic":"module","version":1,"metadata":{"delayedInit":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"SplitPaneModule"},"providers":[]}},"SplitPaneModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","module":"./horizontal-split-pane.component","name":"HorizontalSplitPaneComponent"},{"__symbolic":"reference","module":"./vertical-split-pane.component","name":"VerticalSplitPaneComponent"},{"__symbolic":"reference","module":"./horizontal-split-pane-separator.component","name":"HorizontalSplitSeparatorComponent"},{"__symbolic":"reference","module":"./vertical-split-pane-separator.component","name":"VerticalSplitSeparatorComponent"},{"__symbolic":"reference","module":"./split-pane-separator.component","name":"SplitSeparatorComponent"},{"__symbolic":"reference","module":"./split-pane.component","name":"SplitPaneComponent"}],"exports":[{"__symbolic":"reference","module":"./horizontal-split-pane.component","name":"HorizontalSplitPaneComponent"},{"__symbolic":"reference","module":"./vertical-split-pane.component","name":"VerticalSplitPaneComponent"}]}]}],"statics":{"forRoot":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"delayedInit"}}}}}}] \ No newline at end of file diff --git a/lib/position.service.d.ts b/lib/position.service.d.ts new file mode 100644 index 0000000..b49d7bd --- /dev/null +++ b/lib/position.service.d.ts @@ -0,0 +1,24 @@ +import { ElementRef } from '@angular/core'; +export declare class PositionService { + static position(element: ElementRef): { + width: number; + height: number; + top: number; + left: number; + }; + static offset(element: ElementRef): { + width: number; + height: number; + top: number; + left: number; + }; + static positionElements(host: ElementRef, target: ElementRef, positionStr: any, appendToBody: any): { + top: number; + left: number; + }; + private static readonly window; + private static readonly document; + private static getStyle(nativeEl, cssProp); + private static isStaticPositioned(nativeEl); + private static parentOffsetEl(nativeEl); +} diff --git a/lib/position.service.js b/lib/position.service.js new file mode 100644 index 0000000..3b915c5 --- /dev/null +++ b/lib/position.service.js @@ -0,0 +1,134 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +var PositionService = (function () { + function PositionService() { + } + PositionService.position = function (element) { + var nativeEl = element.nativeElement; + var elBCR = this.offset(nativeEl); + var offsetParentBCR = { top: 0, left: 0 }; + var offsetParentEl = this.parentOffsetEl(nativeEl); + if (offsetParentEl !== this.document) { + offsetParentBCR = this.offset(offsetParentEl); + offsetParentBCR.top += offsetParentEl.clientTop - offsetParentEl.scrollTop; + offsetParentBCR.left += offsetParentEl.clientLeft - offsetParentEl.scrollLeft; + } + var boundingClientRect = nativeEl.getBoundingClientRect(); + return { + width: boundingClientRect.width || nativeEl.offsetWidth, + height: boundingClientRect.height || nativeEl.offsetHeight, + top: elBCR.top - offsetParentBCR.top, + left: elBCR.left - offsetParentBCR.left + }; + }; + PositionService.offset = function (element) { + var nativeEl = element.nativeElement; + var boundingClientRect = nativeEl.getBoundingClientRect(); + return { + width: boundingClientRect.width || nativeEl.offsetWidth, + height: boundingClientRect.height || nativeEl.offsetHeight, + top: boundingClientRect.top + (this.window.pageYOffset || this.document.documentElement.scrollTop), + left: boundingClientRect.left + (this.window.pageXOffset || this.document.documentElement.scrollLeft) + }; + }; + PositionService.positionElements = function (host, target, positionStr, appendToBody) { + var hostEl = host.nativeElement; + var targetEl = target.nativeElement; + var positionStrParts = positionStr.split('-'); + var pos0 = positionStrParts[0]; + var pos1 = positionStrParts[1] || 'center'; + var hostElPos = appendToBody ? + this.offset(hostEl) : + this.position(hostEl); + var targetElWidth = targetEl.offsetWidth; + var targetElHeight = targetEl.offsetHeight; + var shiftWidth = { + center: function () { + return hostElPos.left + hostElPos.width / 2 - targetElWidth / 2; + }, + left: function () { + return hostElPos.left; + }, + right: function () { + return hostElPos.left + hostElPos.width; + } + }; + var shiftHeight = { + center: function () { + return hostElPos.top + hostElPos.height / 2 - targetElHeight / 2; + }, + top: function () { + return hostElPos.top; + }, + bottom: function () { + return hostElPos.top + hostElPos.height; + } + }; + var targetElPos; + switch (pos0) { + case 'right': + targetElPos = { + top: shiftHeight[pos1](), + left: shiftWidth[pos0]() + }; + break; + case 'left': + targetElPos = { + top: shiftHeight[pos1](), + left: hostElPos.left - targetElWidth + }; + break; + case 'bottom': + targetElPos = { + top: shiftHeight[pos0](), + left: shiftWidth[pos1]() + }; + break; + default: + targetElPos = { + top: hostElPos.top - targetElHeight, + left: shiftWidth[pos1]() + }; + break; + } + return targetElPos; + }; + Object.defineProperty(PositionService, "window", { + get: function () { + return window; + }, + enumerable: true, + configurable: true + }); + Object.defineProperty(PositionService, "document", { + get: function () { + return window.document; + }, + enumerable: true, + configurable: true + }); + PositionService.getStyle = function (nativeEl, cssProp) { + if (nativeEl.currentStyle) { + return nativeEl.currentStyle[cssProp]; + } + if (this.window.getComputedStyle) { + return this.window.getComputedStyle(nativeEl)[cssProp]; + } + return nativeEl.style[cssProp]; + }; + PositionService.isStaticPositioned = function (nativeEl) { + return (this.getStyle(nativeEl, 'position') || 'static') === 'static'; + }; + PositionService.parentOffsetEl = function (nativeEl) { + var offsetParent = nativeEl.offsetParent || this.document; + while (offsetParent && offsetParent !== this.document && + this.isStaticPositioned(offsetParent)) { + offsetParent = offsetParent.offsetParent; + } + return offsetParent || this.document; + }; + ; + return PositionService; +}()); +exports.PositionService = PositionService; +//# sourceMappingURL=position.service.js.map \ No newline at end of file diff --git a/lib/position.service.js.map b/lib/position.service.js.map new file mode 100644 index 0000000..76a3f6f --- /dev/null +++ b/lib/position.service.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../src/position.service.ts"],"names":[],"mappings":"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","file":"position.service.js","sourceRoot":""} \ No newline at end of file diff --git a/lib/position.service.metadata.json b/lib/position.service.metadata.json new file mode 100644 index 0000000..9a5a063 --- /dev/null +++ b/lib/position.service.metadata.json @@ -0,0 +1 @@ +[{"__symbolic":"module","version":3,"metadata":{"PositionService":{"__symbolic":"class","statics":{"window":{"__symbolic":"error","message":"Variable not initialized","line":112,"character":21},"document":{"__symbolic":"error","message":"Variable not initialized","line":116,"character":21},"isStaticPositioned":{"__symbolic":"function","parameters":["nativeEl"],"value":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"error","message":"Expression form not supported","line":138,"character":12},"right":"static"},"right":"static"}}}}}},{"__symbolic":"module","version":1,"metadata":{"PositionService":{"__symbolic":"class","statics":{"window":{"__symbolic":"error","message":"Variable not initialized","line":112,"character":21},"document":{"__symbolic":"error","message":"Variable not initialized","line":116,"character":21},"isStaticPositioned":{"__symbolic":"function","parameters":["nativeEl"],"value":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"error","message":"Expression form not supported","line":138,"character":12},"right":"static"},"right":"static"}}}}}}] \ No newline at end of file diff --git a/lib/split-pane-separator.component.d.ts b/lib/split-pane-separator.component.d.ts new file mode 100644 index 0000000..9c11b38 --- /dev/null +++ b/lib/split-pane-separator.component.d.ts @@ -0,0 +1,10 @@ +import { OnInit, EventEmitter, ElementRef } from '@angular/core'; +export declare class SplitSeparatorComponent implements OnInit { + thickness: number; + notifyWillChangeSize: EventEmitter; + invisibleExtension: ElementRef; + constructor(); + ngOnInit(): void; + onMousedown(event: any): boolean; + ontouchstart(event: any): boolean; +} diff --git a/lib/split-pane-separator.component.js b/lib/split-pane-separator.component.js new file mode 100644 index 0000000..86fb80d --- /dev/null +++ b/lib/split-pane-separator.component.js @@ -0,0 +1,34 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +var core_1 = require("@angular/core"); +var SplitSeparatorComponent = (function () { + function SplitSeparatorComponent() { + this.notifyWillChangeSize = new core_1.EventEmitter(); + } + SplitSeparatorComponent.prototype.ngOnInit = function () { + }; + SplitSeparatorComponent.prototype.onMousedown = function (event) { + this.notifyWillChangeSize.emit(true); + return false; + }; + SplitSeparatorComponent.prototype.ontouchstart = function (event) { + this.notifyWillChangeSize.emit(true); + return false; + }; + return SplitSeparatorComponent; +}()); +SplitSeparatorComponent.decorators = [ + { type: core_1.Component, args: [{ + template: '' + },] }, +]; +SplitSeparatorComponent.ctorParameters = function () { return []; }; +SplitSeparatorComponent.propDecorators = { + 'thickness': [{ type: core_1.Input },], + 'notifyWillChangeSize': [{ type: core_1.Output },], + 'invisibleExtension': [{ type: core_1.ViewChild, args: ['invisibleExtension',] },], + 'onMousedown': [{ type: core_1.HostListener, args: ['mousedown', ['$event'],] },], + 'ontouchstart': [{ type: core_1.HostListener, args: ['touchstart', ['$event'],] },], +}; +exports.SplitSeparatorComponent = SplitSeparatorComponent; +//# sourceMappingURL=split-pane-separator.component.js.map \ No newline at end of file diff --git a/lib/split-pane-separator.component.js.map b/lib/split-pane-separator.component.js.map new file mode 100644 index 0000000..7727f14 --- /dev/null +++ b/lib/split-pane-separator.component.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../src/split-pane-separator.component.ts"],"names":[],"mappings":";;AAAA,sCAAoH;AAGpH;IAOE;QAJC,yBAAoB,GAA0B,IAAI,mBAAY,EAAW,CAAC;IAI3D,CAAC;IAEjB,0CAAQ,GAAR;IACA,CAAC;IAGD,6CAAW,GAAX,UAAY,KAAK;QACf,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrC,MAAM,CAAC,KAAK,CAAC;IACf,CAAC;IAED,8CAAY,GAAZ,UAAa,KAAK;QAChB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrC,MAAM,CAAC,KAAK,CAAC;IACf,CAAC;IAgBH,8BAAC;AAAD,CArCA,AAqCC;AAfM,kCAAU,GAA0B;IAC3C,EAAE,IAAI,EAAE,gBAAS,EAAE,IAAI,EAAE,CAAC;gBACxB,QAAQ,EAAE,EAAE;aACb,EAAG,EAAE;CACL,CAAC;AAEK,sCAAc,GAAmE,cAAM,OAAA,EAC7F,EAD6F,CAC7F,CAAC;AACK,sCAAc,GAA2C;IAChE,WAAW,EAAE,CAAC,EAAE,IAAI,EAAE,YAAK,EAAE,EAAE;IAC/B,sBAAsB,EAAE,CAAC,EAAE,IAAI,EAAE,aAAM,EAAE,EAAE;IAC3C,oBAAoB,EAAE,CAAC,EAAE,IAAI,EAAE,gBAAS,EAAE,IAAI,EAAE,CAAC,oBAAoB,EAAG,EAAE,EAAE;IAC5E,aAAa,EAAE,CAAC,EAAE,IAAI,EAAE,mBAAY,EAAE,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,EAAG,EAAE,EAAE;IAC3E,cAAc,EAAE,CAAC,EAAE,IAAI,EAAE,mBAAY,EAAE,IAAI,EAAE,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,EAAG,EAAE,EAAE;CAC5E,CAAC;AApCW,0DAAuB","file":"split-pane-separator.component.js","sourceRoot":""} \ No newline at end of file diff --git a/lib/split-pane-separator.component.metadata.json b/lib/split-pane-separator.component.metadata.json new file mode 100644 index 0000000..fd2d671 --- /dev/null +++ b/lib/split-pane-separator.component.metadata.json @@ -0,0 +1 @@ +[{"__symbolic":"module","version":3,"metadata":{"SplitSeparatorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"template":""}]}],"members":{"thickness":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"notifyWillChangeSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"invisibleExtension":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["invisibleExtension"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"onMousedown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["mousedown",["$event"]]}]}],"ontouchstart":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["touchstart",["$event"]]}]}]}}}},{"__symbolic":"module","version":1,"metadata":{"SplitSeparatorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"template":""}]}],"members":{"thickness":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"notifyWillChangeSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"invisibleExtension":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["invisibleExtension"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"onMousedown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["mousedown",["$event"]]}]}],"ontouchstart":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["touchstart",["$event"]]}]}]}}}}] \ No newline at end of file diff --git a/lib/split-pane.component.d.ts b/lib/split-pane.component.d.ts new file mode 100644 index 0000000..83b1ca6 --- /dev/null +++ b/lib/split-pane.component.d.ts @@ -0,0 +1,32 @@ +import { ElementRef, EventEmitter, OnChanges, SimpleChanges } from '@angular/core'; +export declare class SplitPaneComponent implements OnChanges { + primaryComponent: ElementRef; + secondaryComponent: ElementRef; + initialRatio: number; + primaryMinSize: number; + secondaryMinSize: number; + separatorThickness: number; + primaryToggledOff: boolean; + secondaryToggledOff: boolean; + localStorageKey: string; + notifySizeDidChange: EventEmitter; + notifyBeginResizing: EventEmitter; + notifyEndedResizing: EventEmitter; + primarySizeBeforeTogglingOff: number; + dividerSize: number; + isResizing: boolean; + ngAfterViewInit(): void; + ngOnChanges(changes: SimpleChanges): void; + getTotalSize(): number; + getPrimarySize(): number; + getSecondarySize(): number; + dividerPosition(size: number): void; + getAvailableSize(): number; + applySizeChange(size: number): void; + notifyWillChangeSize(resizing: boolean): void; + checkValidBounds(newSize: number, minSize: number, maxSize: number): number; + checkBothToggledOff(): void; + stopResizing(): void; + onMouseup(event: any): boolean; + ontouchend(event: any): boolean; +} diff --git a/lib/split-pane.component.js b/lib/split-pane.component.js new file mode 100644 index 0000000..1498102 --- /dev/null +++ b/lib/split-pane.component.js @@ -0,0 +1,144 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +var core_1 = require("@angular/core"); +var SplitPaneComponent = (function () { + function SplitPaneComponent() { + 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 core_1.EventEmitter(); + this.notifyBeginResizing = new core_1.EventEmitter(); + this.notifyEndedResizing = new core_1.EventEmitter(); + this.dividerSize = 8.0; + this.isResizing = false; + } + SplitPaneComponent.prototype.ngAfterViewInit = function () { + this.checkBothToggledOff(); + if (!this.primaryToggledOff && !this.secondaryToggledOff) { + var ratio = this.initialRatio; + if (this.localStorageKey != null) { + var ratioStr = localStorage.getItem(this.localStorageKey); + if (ratioStr != null) { + ratio = JSON.parse(ratioStr); + } + } + var size = ratio * this.getTotalSize(); + this.applySizeChange(size); + } + }; + SplitPaneComponent.prototype.ngOnChanges = function (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); + } + } + }; + SplitPaneComponent.prototype.getTotalSize = function () { + throw ("SplitPaneComponent shouldn't be instantiated. Override this method."); + }; + SplitPaneComponent.prototype.getPrimarySize = function () { + throw ("SplitPaneComponent shouldn't be instantiated. Override this method."); + }; + SplitPaneComponent.prototype.getSecondarySize = function () { + throw ("SplitPaneComponent shouldn't be instantiated. Override this method."); + }; + SplitPaneComponent.prototype.dividerPosition = function (size) { + throw ("SplitPaneComponent shouldn't be instantiated. Override this method."); + }; + SplitPaneComponent.prototype.getAvailableSize = function () { + return this.getTotalSize() - this.dividerSize; + }; + SplitPaneComponent.prototype.applySizeChange = function (size) { + var 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() }); + }; + SplitPaneComponent.prototype.notifyWillChangeSize = function (resizing) { + this.isResizing = resizing; + this.notifyBeginResizing.emit(); + }; + SplitPaneComponent.prototype.checkValidBounds = function (newSize, minSize, maxSize) { + return newSize >= minSize + ? (newSize <= maxSize) + ? newSize + : maxSize + : minSize; + }; + SplitPaneComponent.prototype.checkBothToggledOff = function () { + if (this.primaryToggledOff && this.secondaryToggledOff) { + throw ('You cannot toggle off both the primary and secondary component'); + } + }; + SplitPaneComponent.prototype.stopResizing = function () { + this.isResizing = false; + this.primaryComponent.nativeElement.style.cursor = "auto"; + this.secondaryComponent.nativeElement.style.cursor = "auto"; + if (this.localStorageKey != null) { + var ratio = this.getPrimarySize() / (this.getTotalSize()); + localStorage.setItem(this.localStorageKey, JSON.stringify(ratio)); + } + this.notifyEndedResizing.emit(); + }; + SplitPaneComponent.prototype.onMouseup = function (event) { + if (this.isResizing) { + this.stopResizing(); + return false; + } + }; + SplitPaneComponent.prototype.ontouchend = function (event) { + if (this.isResizing) { + this.stopResizing(); + return false; + } + }; + return SplitPaneComponent; +}()); +SplitPaneComponent.decorators = [ + { type: core_1.Component, args: [{ + selector: 'split-pane', + template: '', + host: { 'style': 'height: 100%' } + },] }, +]; +SplitPaneComponent.ctorParameters = function () { return []; }; +SplitPaneComponent.propDecorators = { + 'primaryComponent': [{ type: core_1.ViewChild, args: ['primaryComponent',] },], + 'secondaryComponent': [{ type: core_1.ViewChild, args: ['secondaryComponent',] },], + 'initialRatio': [{ type: core_1.Input, args: ['primary-component-initialratio',] },], + 'primaryMinSize': [{ type: core_1.Input, args: ['primary-component-minsize',] },], + 'secondaryMinSize': [{ type: core_1.Input, args: ['secondary-component-minsize',] },], + 'separatorThickness': [{ type: core_1.Input, args: ['separator-thickness',] },], + 'primaryToggledOff': [{ type: core_1.Input, args: ['primary-component-toggled-off',] },], + 'secondaryToggledOff': [{ type: core_1.Input, args: ['secondary-component-toggled-off',] },], + 'localStorageKey': [{ type: core_1.Input, args: ['local-storage-key',] },], + 'notifySizeDidChange': [{ type: core_1.Output, args: ['on-change',] },], + 'notifyBeginResizing': [{ type: core_1.Output, args: ['on-begin-resizing',] },], + 'notifyEndedResizing': [{ type: core_1.Output, args: ['on-ended-resizing',] },], + 'onMouseup': [{ type: core_1.HostListener, args: ['mouseup', ['$event'],] }, { type: core_1.HostListener, args: ['touchend', ['$event'],] },], +}; +exports.SplitPaneComponent = SplitPaneComponent; +//# sourceMappingURL=split-pane.component.js.map \ No newline at end of file diff --git a/lib/split-pane.component.js.map b/lib/split-pane.component.js.map new file mode 100644 index 0000000..44b415f --- /dev/null +++ b/lib/split-pane.component.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../src/split-pane.component.ts"],"names":[],"mappings":"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","file":"split-pane.component.js","sourceRoot":""} \ No newline at end of file diff --git a/lib/split-pane.component.metadata.json b/lib/split-pane.component.metadata.json new file mode 100644 index 0000000..2ed7155 --- /dev/null +++ b/lib/split-pane.component.metadata.json @@ -0,0 +1 @@ +[{"__symbolic":"module","version":3,"metadata":{"SplitPaneComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"split-pane","template":"","host":{"style":"height: 100%","$quoted$":["style"]}}]}],"members":{"primaryComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["primaryComponent"]}]}],"secondaryComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["secondaryComponent"]}]}],"initialRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["primary-component-initialratio"]}]}],"primaryMinSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["primary-component-minsize"]}]}],"secondaryMinSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["secondary-component-minsize"]}]}],"separatorThickness":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["separator-thickness"]}]}],"primaryToggledOff":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["primary-component-toggled-off"]}]}],"secondaryToggledOff":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["secondary-component-toggled-off"]}]}],"localStorageKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["local-storage-key"]}]}],"notifySizeDidChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["on-change"]}]}],"notifyBeginResizing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["on-begin-resizing"]}]}],"notifyEndedResizing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["on-ended-resizing"]}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"getTotalSize":[{"__symbolic":"method"}],"getPrimarySize":[{"__symbolic":"method"}],"getSecondarySize":[{"__symbolic":"method"}],"dividerPosition":[{"__symbolic":"method"}],"getAvailableSize":[{"__symbolic":"method"}],"applySizeChange":[{"__symbolic":"method"}],"notifyWillChangeSize":[{"__symbolic":"method"}],"checkValidBounds":[{"__symbolic":"method"}],"checkBothToggledOff":[{"__symbolic":"method"}],"stopResizing":[{"__symbolic":"method"}],"onMouseup":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["mouseup",["$event"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["touchend",["$event"]]}]}],"ontouchend":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SplitPaneComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"split-pane","template":"","host":{"style":"height: 100%"}}]}],"members":{"primaryComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["primaryComponent"]}]}],"secondaryComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["secondaryComponent"]}]}],"initialRatio":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["primary-component-initialratio"]}]}],"primaryMinSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["primary-component-minsize"]}]}],"secondaryMinSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["secondary-component-minsize"]}]}],"separatorThickness":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["separator-thickness"]}]}],"primaryToggledOff":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["primary-component-toggled-off"]}]}],"secondaryToggledOff":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["secondary-component-toggled-off"]}]}],"localStorageKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["local-storage-key"]}]}],"notifySizeDidChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["on-change"]}]}],"notifyBeginResizing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["on-begin-resizing"]}]}],"notifyEndedResizing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["on-ended-resizing"]}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"getTotalSize":[{"__symbolic":"method"}],"getPrimarySize":[{"__symbolic":"method"}],"getSecondarySize":[{"__symbolic":"method"}],"dividerPosition":[{"__symbolic":"method"}],"getAvailableSize":[{"__symbolic":"method"}],"applySizeChange":[{"__symbolic":"method"}],"notifyWillChangeSize":[{"__symbolic":"method"}],"checkValidBounds":[{"__symbolic":"method"}],"checkBothToggledOff":[{"__symbolic":"method"}],"stopResizing":[{"__symbolic":"method"}],"onMouseup":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["mouseup",["$event"]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["touchend",["$event"]]}]}],"ontouchend":[{"__symbolic":"method"}]}}}}] \ No newline at end of file diff --git a/lib/vertical-split-pane-separator.component.d.ts b/lib/vertical-split-pane-separator.component.d.ts new file mode 100644 index 0000000..29928dd --- /dev/null +++ b/lib/vertical-split-pane-separator.component.d.ts @@ -0,0 +1,5 @@ +import { OnInit } from '@angular/core'; +import { SplitSeparatorComponent } from './split-pane-separator.component'; +export declare class VerticalSplitSeparatorComponent extends SplitSeparatorComponent implements OnInit { + ngAfterViewInit(): void; +} diff --git a/lib/vertical-split-pane-separator.component.js b/lib/vertical-split-pane-separator.component.js new file mode 100644 index 0000000..e0b63a7 --- /dev/null +++ b/lib/vertical-split-pane-separator.component.js @@ -0,0 +1,38 @@ +"use strict"; +var __extends = (this && this.__extends) || (function () { + var extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; + return function (d, b) { + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); + }; +})(); +Object.defineProperty(exports, "__esModule", { value: true }); +var core_1 = require("@angular/core"); +var split_pane_separator_component_1 = require("./split-pane-separator.component"); +var VerticalSplitSeparatorComponent = (function (_super) { + __extends(VerticalSplitSeparatorComponent, _super); + function VerticalSplitSeparatorComponent() { + return _super !== null && _super.apply(this, arguments) || this; + } + VerticalSplitSeparatorComponent.prototype.ngAfterViewInit = function () { + this.invisibleExtension.nativeElement.style.left = + -(7 - this.thickness) / 2 + "px"; + }; + return VerticalSplitSeparatorComponent; +}(split_pane_separator_component_1.SplitSeparatorComponent)); +VerticalSplitSeparatorComponent.decorators = [ + { type: core_1.Component, args: [{ + selector: 'vertical-split-separator', + styles: ["\n :host {\n background-color: #fff;\n border-left: 1px solid #ddd;\n cursor: ew-resize;\n position: relative;\n }\n :host:hover {\n background-color: #fafafa;\n }\n\n .invisible-extension {\n position: absolute;\n height: 100%;\n width: 100%;\n min-width: 7px;\n }\n\n .handle {\n width: 100%;\n height: 35px;\n background-color: #eee;\n position: absolute;\n top: calc(50% - 17px);\n }\n "], + template: "\n \n = 7\"\n class=\"invisible-extension\">\n\n
\n ", + host: { + '[style.width.px]': 'thickness' + } + },] }, +]; +VerticalSplitSeparatorComponent.ctorParameters = function () { return []; }; +exports.VerticalSplitSeparatorComponent = VerticalSplitSeparatorComponent; +//# sourceMappingURL=vertical-split-pane-separator.component.js.map \ No newline at end of file diff --git a/lib/vertical-split-pane-separator.component.js.map b/lib/vertical-split-pane-separator.component.js.map new file mode 100644 index 0000000..853c699 --- /dev/null +++ b/lib/vertical-split-pane-separator.component.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../src/vertical-split-pane-separator.component.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,sCAAkD;AAClD,mFAAwC;AAGxC;IACU,mDAAuB;IADjC;;IAuDA,CAAC;IAnDC,yDAAe,GAAf;QACE,IAAI,CAAC,kBAAkB,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI;YAC9C,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IACrC,CAAC;IAgDH,sCAAC;AAAD,CAvDA,AAuDC,CAtDS,wDAAuB;AAO1B,0CAAU,GAA0B;IAC3C,EAAE,IAAI,EAAE,gBAAS,EAAE,IAAI,EAAE,CAAC;gBACxB,QAAQ,EAAE,0BAA0B;gBACpC,MAAM,EAAE,CAAC,ueAyBR,CAAC;gBACF,QAAQ,EAAE,sRAST;gBACD,IAAI,EAAE;oBACJ,kBAAkB,EAAE,WAAW;iBAChC;aACF,EAAG,EAAE;CACL,CAAC;AAEK,8CAAc,GAAmE,cAAM,OAAA,EAC7F,EAD6F,CAC7F,CAAC;AAtDW,0EAA+B","file":"vertical-split-pane-separator.component.js","sourceRoot":""} \ No newline at end of file diff --git a/lib/vertical-split-pane-separator.component.metadata.json b/lib/vertical-split-pane-separator.component.metadata.json new file mode 100644 index 0000000..d353b2f --- /dev/null +++ b/lib/vertical-split-pane-separator.component.metadata.json @@ -0,0 +1 @@ +[{"__symbolic":"module","version":3,"metadata":{"VerticalSplitSeparatorComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./split-pane-separator.component","name":"SplitSeparatorComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"vertical-split-separator","styles":["\n :host {\n background-color: #fff;\n border-left: 1px solid #ddd;\n cursor: ew-resize;\n position: relative;\n }\n :host:hover {\n background-color: #fafafa;\n }\n\n .invisible-extension {\n position: absolute;\n height: 100%;\n width: 100%;\n min-width: 7px;\n }\n\n .handle {\n width: 100%;\n height: 35px;\n background-color: #eee;\n position: absolute;\n top: calc(50% - 17px);\n }\n "],"template":"\n \n = 7\"\n class=\"invisible-extension\">\n\n
\n ","host":{"[style.width.px]":"thickness","$quoted$":["[style.width.px]"]}}]}],"members":{"ngAfterViewInit":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"VerticalSplitSeparatorComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./split-pane-separator.component","name":"SplitSeparatorComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"vertical-split-separator","styles":["\n :host {\n background-color: #fff;\n border-left: 1px solid #ddd;\n cursor: ew-resize;\n position: relative;\n }\n :host:hover {\n background-color: #fafafa;\n }\n\n .invisible-extension {\n position: absolute;\n height: 100%;\n width: 100%;\n min-width: 7px;\n }\n\n .handle {\n width: 100%;\n height: 35px;\n background-color: #eee;\n position: absolute;\n top: calc(50% - 17px);\n }\n "],"template":"\n \n = 7\"\n class=\"invisible-extension\">\n\n
\n ","host":{"[style.width.px]":"thickness"}}]}],"members":{"ngAfterViewInit":[{"__symbolic":"method"}]}}}}] \ No newline at end of file diff --git a/lib/vertical-split-pane.component.d.ts b/lib/vertical-split-pane.component.d.ts new file mode 100644 index 0000000..67410e6 --- /dev/null +++ b/lib/vertical-split-pane.component.d.ts @@ -0,0 +1,11 @@ +import { ElementRef } from '@angular/core'; +import { SplitPaneComponent } from './split-pane.component'; +export declare class VerticalSplitPaneComponent extends SplitPaneComponent { + outerContainer: ElementRef; + getTotalSize(): number; + getPrimarySize(): number; + getSecondarySize(): number; + dividerPosition(size: number): void; + onMousemove(event: MouseEvent): boolean; + onTouchmove(event: TouchEvent): boolean; +} diff --git a/lib/vertical-split-pane.component.js b/lib/vertical-split-pane.component.js new file mode 100644 index 0000000..a56859b --- /dev/null +++ b/lib/vertical-split-pane.component.js @@ -0,0 +1,67 @@ +"use strict"; +var __extends = (this && this.__extends) || (function () { + var extendStatics = Object.setPrototypeOf || + ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || + function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; + return function (d, b) { + extendStatics(d, b); + function __() { this.constructor = d; } + d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); + }; +})(); +Object.defineProperty(exports, "__esModule", { value: true }); +var core_1 = require("@angular/core"); +var split_pane_component_1 = require("./split-pane.component"); +var position_service_1 = require("./position.service"); +var VerticalSplitPaneComponent = (function (_super) { + __extends(VerticalSplitPaneComponent, _super); + function VerticalSplitPaneComponent() { + return _super !== null && _super.apply(this, arguments) || this; + } + VerticalSplitPaneComponent.prototype.getTotalSize = function () { + return this.outerContainer.nativeElement.offsetWidth; + }; + VerticalSplitPaneComponent.prototype.getPrimarySize = function () { + return this.primaryComponent.nativeElement.offsetWidth; + }; + VerticalSplitPaneComponent.prototype.getSecondarySize = function () { + return this.secondaryComponent.nativeElement.offsetWidth; + }; + VerticalSplitPaneComponent.prototype.dividerPosition = function (size) { + var sizePct = (size / this.getTotalSize()) * 100; + this.primaryComponent.nativeElement.style.width = sizePct + "%"; + this.secondaryComponent.nativeElement.style.width = + "calc(" + (100 - sizePct) + "% - " + + (this.primaryToggledOff || this.secondaryToggledOff ? 0 : this.separatorThickness) + "px)"; + }; + VerticalSplitPaneComponent.prototype.onMousemove = function (event) { + if (this.isResizing) { + var coords = position_service_1.PositionService.offset(this.primaryComponent); + this.applySizeChange(event.pageX - coords.left); + return false; + } + }; + VerticalSplitPaneComponent.prototype.onTouchmove = function (event) { + if (this.isResizing) { + var coords = position_service_1.PositionService.offset(this.primaryComponent); + this.applySizeChange(event.changedTouches[0].pageX - coords.left); + return false; + } + }; + return VerticalSplitPaneComponent; +}(split_pane_component_1.SplitPaneComponent)); +VerticalSplitPaneComponent.decorators = [ + { type: core_1.Component, args: [{ + selector: 'vertical-split-pane', + styles: ["\n .v-outer {\n height: 100%;\n width: 100%;\n display: flex;\n }\n\n .left-component {\n width: calc(50% - 4px);\n }\n\n .right-component {\n width: calc(50% - 4px);\n }\n "], + template: "\n
\n \n \n
\n \n \n \n \n \n \n ", + },] }, +]; +VerticalSplitPaneComponent.ctorParameters = function () { return []; }; +VerticalSplitPaneComponent.propDecorators = { + 'outerContainer': [{ type: core_1.ViewChild, args: ['outer',] },], + 'onMousemove': [{ type: core_1.HostListener, args: ['mousemove', ['$event'],] },], + 'onTouchmove': [{ type: core_1.HostListener, args: ['touchmove', ['$event'],] },], +}; +exports.VerticalSplitPaneComponent = VerticalSplitPaneComponent; +//# sourceMappingURL=vertical-split-pane.component.js.map \ No newline at end of file diff --git a/lib/vertical-split-pane.component.js.map b/lib/vertical-split-pane.component.js.map new file mode 100644 index 0000000..026c6da --- /dev/null +++ b/lib/vertical-split-pane.component.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../src/vertical-split-pane.component.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,sCAAoH;AACpH,+DAAmC;AACnC,uDAAgC;AAGhC;IAAgD,8CAAkB;IAAlE;;IA2FA,CAAC;IAvFC,iDAAY,GAAZ;QACE,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,WAAW,CAAC;IACvD,CAAC;IAED,mDAAc,GAAd;QACE,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,WAAW,CAAC;IACzD,CAAC;IAED,qDAAgB,GAAhB;QACE,MAAM,CAAC,IAAI,CAAC,kBAAkB,CAAC,aAAa,CAAC,WAAW,CAAC;IAC3D,CAAC;IAED,oDAAe,GAAf,UAAgB,IAAY;QAC1B,IAAM,OAAO,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC,GAAG,GAAG,CAAC;QACnD,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,GAAG,OAAO,GAAG,GAAG,CAAC;QAChE,IAAI,CAAC,kBAAkB,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK;YAC/C,OAAO,GAAG,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,MAAM;gBAClC,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,mBAAmB,GAAG,CAAC,GAAG,IAAI,CAAC,kBAAkB,CAAC,GAAG,KAAK,CAAC;IAC/F,CAAC;IAGD,gDAAW,GAAX,UAAY,KAAiB;QACzB,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;YACpB,IAAI,MAAM,GAAG,kCAAe,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;YAC3D,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;YAChD,MAAM,CAAC,KAAK,CAAC;QACf,CAAC;IACH,CAAC;IAGD,gDAAW,GAAX,UAAY,KAAiB;QACzB,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;YACpB,IAAI,MAAM,GAAG,kCAAe,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;YAC3D,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;YAClE,MAAM,CAAC,KAAK,CAAC;QACf,CAAC;IACH,CAAC;IAmDP,iCAAC;AAAD,CA3FA,AA2FC,CA3F+C,yCAAkB;AAyC3D,qCAAU,GAA0B;IAC3C,EAAE,IAAI,EAAE,gBAAS,EAAE,IAAI,EAAE,CAAC;gBACxB,QAAQ,EAAE,qBAAqB;gBAC/B,MAAM,EAAE,CAAC,2NAcR,CAAC;gBACF,QAAQ,EAAE,mrBAqBT;aACF,EAAG,EAAE;CACL,CAAC;AAEK,yCAAc,GAAmE,cAAM,OAAA,EAC7F,EAD6F,CAC7F,CAAC;AACK,yCAAc,GAA2C;IAChE,gBAAgB,EAAE,CAAC,EAAE,IAAI,EAAE,gBAAS,EAAE,IAAI,EAAE,CAAC,OAAO,EAAG,EAAE,EAAE;IAC3D,aAAa,EAAE,CAAC,EAAE,IAAI,EAAE,mBAAY,EAAE,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,EAAG,EAAE,EAAE;IAC3E,aAAa,EAAE,CAAC,EAAE,IAAI,EAAE,mBAAY,EAAE,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,EAAG,EAAE,EAAE;CAC1E,CAAC;AA1FW,gEAA0B","file":"vertical-split-pane.component.js","sourceRoot":""} \ No newline at end of file diff --git a/lib/vertical-split-pane.component.metadata.json b/lib/vertical-split-pane.component.metadata.json new file mode 100644 index 0000000..7302555 --- /dev/null +++ b/lib/vertical-split-pane.component.metadata.json @@ -0,0 +1 @@ +[{"__symbolic":"module","version":3,"metadata":{"VerticalSplitPaneComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./split-pane.component","name":"SplitPaneComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"vertical-split-pane","styles":["\n .v-outer {\n height: 100%;\n width: 100%;\n display: flex;\n }\n\n .left-component {\n width: calc(50% - 4px);\n }\n\n .right-component {\n width: calc(50% - 4px);\n }\n "],"template":"\n
\n \n \n
\n \n \n \n \n \n \n "}]}],"members":{"outerContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["outer"]}]}],"getTotalSize":[{"__symbolic":"method"}],"getPrimarySize":[{"__symbolic":"method"}],"getSecondarySize":[{"__symbolic":"method"}],"dividerPosition":[{"__symbolic":"method"}],"onMousemove":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["mousemove",["$event"]]}]}],"onTouchmove":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["touchmove",["$event"]]}]}]}}}},{"__symbolic":"module","version":1,"metadata":{"VerticalSplitPaneComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./split-pane.component","name":"SplitPaneComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"vertical-split-pane","styles":["\n .v-outer {\n height: 100%;\n width: 100%;\n display: flex;\n }\n\n .left-component {\n width: calc(50% - 4px);\n }\n\n .right-component {\n width: calc(50% - 4px);\n }\n "],"template":"\n
\n \n \n
\n \n \n \n \n \n \n "}]}],"members":{"outerContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["outer"]}]}],"getTotalSize":[{"__symbolic":"method"}],"getPrimarySize":[{"__symbolic":"method"}],"getSecondarySize":[{"__symbolic":"method"}],"dividerPosition":[{"__symbolic":"method"}],"onMousemove":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["mousemove",["$event"]]}]}],"onTouchmove":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["touchmove",["$event"]]}]}]}}}}] \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..debd53d --- /dev/null +++ b/package-lock.json @@ -0,0 +1,220 @@ +{ + "name": "ng2-split-pane", + "version": "1.3.1", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "@angular/animations": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.4.7.tgz", + "integrity": "sha512-clP1xZw3KCfdj5rGDies5L5iwLgXzVFQ/B66Yj9oc24mJyK9oZARmuXdHfu+y8YtlW2b3wNSK2JH3qygaxbNLA==", + "dev": true, + "requires": { + "tslib": "^1.7.1" + } + }, + "@angular/common": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-4.4.7.tgz", + "integrity": "sha512-5R0POjbT4CR+8vXS7P33SiozJpTEKDsHq07EMm90OCwoofU5DIKDLNyEqr362zsbpzGUTmhGbSiLZib5Qt4djA==", + "dev": true, + "requires": { + "tslib": "^1.7.1" + } + }, + "@angular/compiler": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.4.7.tgz", + "integrity": "sha512-aiRh86RqHMTgJ7xckQWzG2UTnq23+WuDVhYh/QL19R43areZLglqgtKSkfezg9aatO5CGzxDA3qL5WGhccQ5EQ==", + "dev": true, + "requires": { + "tslib": "^1.7.1" + } + }, + "@angular/compiler-cli": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.4.7.tgz", + "integrity": "sha512-vzphs9galtMV29CW+ihp6v0HwSQrjAFqs04swqt9o0jEJET6/mPi1EFjJRNZiFn6ghh6lxUPr3vThy7CrSNxHg==", + "dev": true, + "requires": { + "@angular/tsc-wrapped": "4.4.7", + "minimist": "^1.2.0", + "reflect-metadata": "^0.1.2" + } + }, + "@angular/core": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-4.4.7.tgz", + "integrity": "sha512-Jxs6gNTl5KjXflg5vi5rlnokq1johFccN94qSOgDv+Mg1iuGF2i9p7EHkw3Y8jBCVaSLw1qgHE+wMb6KTlJDLA==", + "dev": true, + "requires": { + "tslib": "^1.7.1" + } + }, + "@angular/forms": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.4.7.tgz", + "integrity": "sha512-EXGutI4GNBptpwkCQdCTxWAlJll8aCV7m3cA1FHZgFP7VNSgYF0pD+PscM5jSeajG30cRjaKxgL4cqj6yMMtww==", + "dev": true, + "requires": { + "tslib": "^1.7.1" + } + }, + "@angular/http": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/@angular/http/-/http-4.4.7.tgz", + "integrity": "sha512-9XrvXFVuHsAfVlIbM6Em2EouKiRyV2y4nPA+dAUd/9uB9i/i+FzZlmmeSIvP7ePnm6QyAC6nlvy9FMQYwvrtNA==", + "dev": true, + "requires": { + "tslib": "^1.7.1" + } + }, + "@angular/platform-browser": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.4.7.tgz", + "integrity": "sha512-5WGMhUbaepmNoE597N/6R4jDdSqe4wwJblfi6bOJI34QStmD6QRnmg3H7ujr8lLhRBo9P3zH+hn7bM3RxUIEJg==", + "dev": true, + "requires": { + "tslib": "^1.7.1" + } + }, + "@angular/platform-browser-dynamic": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.4.7.tgz", + "integrity": "sha512-or6CB+LzK8zYn7K4rif32UvVadnbdrqBiT+5Yai1szNUUKuseqx2h1dsEgJQamkajsOUM7zjLYq4LrKJEEcm8A==", + "dev": true, + "requires": { + "tslib": "^1.7.1" + } + }, + "@angular/platform-server": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/@angular/platform-server/-/platform-server-4.4.7.tgz", + "integrity": "sha512-csBsh+JCDQPMyC09bLS1rrHzTyBeSgZatJXZ7v3Im+x0tAkD2Sp4PnAmeNL08Pcz6c3Q5jrCillGJRQT1PNRsQ==", + "dev": true, + "requires": { + "parse5": "^3.0.1", + "tslib": "^1.7.1", + "xhr2": "^0.1.4" + } + }, + "@angular/tsc-wrapped": { + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.4.7.tgz", + "integrity": "sha512-R9w7sTU+HSTMPOa4NgvPL753qB6aqnPc1AVh2rwSl5FOpLS/AeeyzIhRnBsVXGrZrTcBQVLp/Cxg1oUSXE2k4Q==", + "dev": true, + "requires": { + "tsickle": "^0.21.0" + } + }, + "@types/node": { + "version": "9.6.7", + "resolved": "https://registry.npmjs.org/@types/node/-/node-9.6.7.tgz", + "integrity": "sha512-MuUfEDBrQ/hb7KOqMiDeItAuRxlilQUgNRthTSCU4HgilH8UBh7wiHxWrv/lcyHyFZcREaODVVRNrAunphVwlg==" + }, + "minimist": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", + "dev": true + }, + "mkdirp": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", + "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", + "dev": true, + "requires": { + "minimist": "0.0.8" + }, + "dependencies": { + "minimist": { + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", + "dev": true + } + } + }, + "parse5": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz", + "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==", + "dev": true, + "requires": { + "@types/node": "*" + } + }, + "reflect-metadata": { + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.12.tgz", + "integrity": "sha512-n+IyV+nGz3+0q3/Yf1ra12KpCyi001bi4XFxSjbiWWjfqb52iTTtpGXmCCAOWWIAn9KEuFZKGqBERHmrtScZ3A==", + "dev": true + }, + "rxjs": { + "version": "5.5.10", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.10.tgz", + "integrity": "sha512-SRjimIDUHJkon+2hFo7xnvNC4ZEHGzCRwh9P7nzX3zPkCGFEg/tuElrNR7L/rZMagnK2JeH2jQwPRpmyXyLB6A==", + "dev": true, + "requires": { + "symbol-observable": "1.0.1" + } + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "dev": true + }, + "source-map-support": { + "version": "0.4.18", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.18.tgz", + "integrity": "sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==", + "dev": true, + "requires": { + "source-map": "^0.5.6" + } + }, + "symbol-observable": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.1.tgz", + "integrity": "sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=", + "dev": true + }, + "tsickle": { + "version": "0.21.6", + "resolved": "https://registry.npmjs.org/tsickle/-/tsickle-0.21.6.tgz", + "integrity": "sha1-U7Abl5xcE/2xOvs/uVgXflmRWI0=", + "dev": true, + "requires": { + "minimist": "^1.2.0", + "mkdirp": "^0.5.1", + "source-map": "^0.5.6", + "source-map-support": "^0.4.2" + } + }, + "tslib": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.0.tgz", + "integrity": "sha512-f/qGG2tUkrISBlQZEjEqoZ3B2+npJjIf04H1wuAv9iA8i04Icp+61KRXxFdha22670NJopsZCIjhC3SnjPRKrQ==", + "dev": true + }, + "typescript": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.2.2.tgz", + "integrity": "sha1-YGAiUIR5tV/6NotY/uljoD39eww=", + "dev": true + }, + "xhr2": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/xhr2/-/xhr2-0.1.4.tgz", + "integrity": "sha1-f4dliEdxbbUCYyOBL4GMras4el8=", + "dev": true + }, + "zone.js": { + "version": "0.8.26", + "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.8.26.tgz", + "integrity": "sha512-W9Nj+UmBJG251wkCacIkETgra4QgBo/vgoEkb4a2uoLzpQG7qF9nzwoLXWU5xj3Fg2mxGvEDh47mg24vXccYjA==", + "dev": true + } + } +} diff --git a/package.json b/package.json index a36fbb7..4a53913 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,9 @@ "url": "https://github.com/wannabegeek/ng2-split-pane/issues" }, "homepage": "https://github.com/wannabegeek/ng2-split-pane/#readme", - "dependencies": {}, + "dependencies": { + "@types/node": "^9.6.7" + }, "devDependencies": { "typescript": "^2.2.2", "@angular/animations": "^4.0.1", diff --git a/src/horizontal-split-pane.component.ts b/src/horizontal-split-pane.component.ts index 953c284..7053ae0 100644 --- a/src/horizontal-split-pane.component.ts +++ b/src/horizontal-split-pane.component.ts @@ -76,4 +76,14 @@ export class HorizontalSplitPaneComponent extends SplitPaneComponent { return false; } } + + @HostListener('touchmove', ['$event']) + onTouchmove(event: TouchEvent) { + if (this.isResizing) { + let coords = PositionService.offset(this.primaryComponent); + this.applySizeChange(event.changedTouches[0].pageY - coords.top); + return false; + } + } + } diff --git a/src/split-pane-separator.component.ts b/src/split-pane-separator.component.ts index 92854c9..d0b5b37 100644 --- a/src/split-pane-separator.component.ts +++ b/src/split-pane-separator.component.ts @@ -20,4 +20,9 @@ export class SplitSeparatorComponent implements OnInit { this.notifyWillChangeSize.emit(true); return false; } + @HostListener('touchstart', ['$event']) + ontouchstart(event) { + this.notifyWillChangeSize.emit(true); + return false; + } } diff --git a/src/split-pane.component.ts b/src/split-pane.component.ts index 9318bc2..fc6bf97 100644 --- a/src/split-pane.component.ts +++ b/src/split-pane.component.ts @@ -142,4 +142,10 @@ export class SplitPaneComponent implements OnChanges { return false; } } + ontouchend(event) { + if (this.isResizing) { + this.stopResizing() + return false; + } + } } diff --git a/src/vertical-split-pane.component.ts b/src/vertical-split-pane.component.ts index 0d4df1c..bd579ee 100644 --- a/src/vertical-split-pane.component.ts +++ b/src/vertical-split-pane.component.ts @@ -74,4 +74,13 @@ export class VerticalSplitPaneComponent extends SplitPaneComponent { return false; } } + + @HostListener('touchmove', ['$event']) + onTouchmove(event: TouchEvent) { + if (this.isResizing) { + let coords = PositionService.offset(this.primaryComponent); + this.applySizeChange(event.changedTouches[0].pageX - coords.left); + return false; + } + } } diff --git a/tsconfig.json b/tsconfig.json index 51b955b..72a8773 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -22,4 +22,4 @@ "angularCompilerOptions": { "genDir": "compiled" } -} +} \ No newline at end of file