ng2-split-pane-patch/lib/horizontal-split-pane.component.js

A simple resizable split pane Angular 2 library

import { Component, ViewChild, ElementRef, HostListener, Input } from '@angular/core';
import { SplitPaneComponent } from './split-pane.component';
import { PositionService } from './position.service';
import * as i0 from "@angular/core";
import * as i1 from "./horizontal-split-pane-separator.component";
const _c0 = ["outer"];
const _c1 = [[["", 8, "split-pane-content-primary"]], [["", 8, "split-pane-content-secondary"]]];
const _c2 = [".split-pane-content-primary", ".split-pane-content-secondary"];
export class HorizontalSplitPaneComponent extends SplitPaneComponent {
    getTotalSize() {
        return this.outerContainer.nativeElement.offsetHeight;
    }
    getPrimarySize() {
        return this.primaryComponent.nativeElement.offsetHeight;
    }
    getSecondarySize() {
        return this.secondaryComponent.nativeElement.offsetHeight;
    }
    dividerPosition(size) {
        const 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)";
    }
    onMousemove(event) {
        if (this.isResizing) {
            let coords = PositionService.offset(this.primaryComponent);
            this.applySizeChange(event.pageY - coords.top);
            return false;
        }
    }
}
HorizontalSplitPaneComponent.ɵfac = function () { let ɵHorizontalSplitPaneComponent_BaseFactory; return function HorizontalSplitPaneComponent_Factory(t) { return (ɵHorizontalSplitPaneComponent_BaseFactory || (ɵHorizontalSplitPaneComponent_BaseFactory = i0.ɵɵgetInheritedFactory(HorizontalSplitPaneComponent)))(t || HorizontalSplitPaneComponent); }; }();
HorizontalSplitPaneComponent.ɵcmp = i0.ɵɵdefineComponent({ type: HorizontalSplitPaneComponent, selectors: [["horizontal-split-pane"]], viewQuery: function HorizontalSplitPaneComponent_Query(rf, ctx) { if (rf & 1) {
        i0.ɵɵviewQuery(_c0, 5);
    } if (rf & 2) {
        let _t;
        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.outerContainer = _t.first);
    } }, hostBindings: function HorizontalSplitPaneComponent_HostBindings(rf, ctx) { if (rf & 1) {
        i0.ɵɵlistener("mousemove", function HorizontalSplitPaneComponent_mousemove_HostBindingHandler($event) { return ctx.onMousemove($event); });
    } }, inputs: { test: "test" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c2, decls: 10, vars: 4, consts: [[1, "h-outer"], ["outer", ""], [1, "upper-component", 3, "hidden"], ["primaryComponent", ""], [3, "hidden", "thickness", "notifyWillChangeSize"], ["separator", ""], [1, "lower-component", 3, "hidden"], ["secondaryComponent", ""]], template: function HorizontalSplitPaneComponent_Template(rf, ctx) { if (rf & 1) {
        i0.ɵɵprojectionDef(_c1);
        i0.ɵɵelementStart(0, "div", 0, 1);
        i0.ɵɵelementStart(2, "div", 2, 3);
        i0.ɵɵprojection(4);
        i0.ɵɵelementEnd();
        i0.ɵɵelementStart(5, "horizontal-split-separator", 4, 5);
        i0.ɵɵlistener("notifyWillChangeSize", function HorizontalSplitPaneComponent_Template_horizontal_split_separator_notifyWillChangeSize_5_listener($event) { return ctx.notifyWillChangeSize($event); });
        i0.ɵɵelementEnd();
        i0.ɵɵelementStart(7, "div", 6, 7);
        i0.ɵɵprojection(9, 1);
        i0.ɵɵelementEnd();
        i0.ɵɵelementEnd();
    } if (rf & 2) {
        i0.ɵɵadvance(2);
        i0.ɵɵproperty("hidden", ctx.primaryToggledOff);
        i0.ɵɵadvance(3);
        i0.ɵɵproperty("hidden", ctx.primaryToggledOff || ctx.secondaryToggledOff)("thickness", ctx.separatorThickness);
        i0.ɵɵadvance(2);
        i0.ɵɵproperty("hidden", ctx.secondaryToggledOff);
    } }, directives: [i1.HorizontalSplitSeparatorComponent], styles: [".h-outer[_ngcontent-%COMP%] {\n      height: 100%;\n      width: 100%;\n      display: flex;\n      flex-flow: column;\n    }\n\n    .upper-component[_ngcontent-%COMP%] {\n      height: calc(50% - 4px);\n    }\n\n    .lower-component[_ngcontent-%COMP%] {\n      height: calc(50% - 4px);\n    }"] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HorizontalSplitPaneComponent, [{
        type: Component,
        args: [{
                selector: 'horizontal-split-pane',
                styles: [`
    .h-outer {
      height: 100%;
      width: 100%;
      display: flex;
      flex-flow: column;
    }

    .upper-component {
      height: calc(50% - 4px);
    }

    .lower-component {
      height: calc(50% - 4px);
    }
  `],
                template: `
  <div #outer class="h-outer">
    <div
      #primaryComponent
      [hidden]="primaryToggledOff"
      class="upper-component">
      <ng-content select=".split-pane-content-primary"></ng-content>
    </div>
    <horizontal-split-separator
      #separator
      [hidden]="primaryToggledOff || secondaryToggledOff"
      [thickness]="separatorThickness"
      (notifyWillChangeSize)="notifyWillChangeSize($event)">
    </horizontal-split-separator>
    <div
      #secondaryComponent
      [hidden]="secondaryToggledOff"
      class="lower-component">
      <ng-content select=".split-pane-content-secondary"></ng-content>
    </div>
  </div>
  `,
            }]
    }], null, { outerContainer: [{
            type: ViewChild,
            args: ['outer']
        }], test: [{
            type: Input
        }], onMousemove: [{
            type: HostListener,
            args: ['mousemove', ['$event']]
        }] }); })();
//# sourceMappingURL=horizontal-split-pane.component.js.map