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

A simple resizable split pane Angular 2 library

import { Component, ViewChild, ElementRef, HostListener } from '@angular/core';
import { SplitPaneComponent } from './split-pane.component';
import { PositionService } from './position.service';
import * as i0 from "@angular/core";
import * as i1 from "./vertical-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 VerticalSplitPaneComponent extends SplitPaneComponent {
    getTotalSize() {
        return this.outerContainer.nativeElement.offsetWidth;
    }
    getPrimarySize() {
        return this.primaryComponent.nativeElement.offsetWidth;
    }
    getSecondarySize() {
        return this.secondaryComponent.nativeElement.offsetWidth;
    }
    dividerPosition(size) {
        const 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)";
    }
    onMousemove(event) {
        if (this.isResizing) {
            let coords = PositionService.offset(this.primaryComponent);
            this.applySizeChange(event.pageX - coords.left);
            return false;
        }
    }
}
VerticalSplitPaneComponent.ɵfac = function () { let ɵVerticalSplitPaneComponent_BaseFactory; return function VerticalSplitPaneComponent_Factory(t) { return (ɵVerticalSplitPaneComponent_BaseFactory || (ɵVerticalSplitPaneComponent_BaseFactory = i0.ɵɵgetInheritedFactory(VerticalSplitPaneComponent)))(t || VerticalSplitPaneComponent); }; }();
VerticalSplitPaneComponent.ɵcmp = i0.ɵɵdefineComponent({ type: VerticalSplitPaneComponent, selectors: [["vertical-split-pane"]], viewQuery: function VerticalSplitPaneComponent_Query(rf, ctx) { if (rf & 1) {
        i0.ɵɵviewQuery(_c0, 7);
    } if (rf & 2) {
        let _t;
        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.outerContainer = _t.first);
    } }, hostBindings: function VerticalSplitPaneComponent_HostBindings(rf, ctx) { if (rf & 1) {
        i0.ɵɵlistener("mousemove", function VerticalSplitPaneComponent_mousemove_HostBindingHandler($event) { return ctx.onMousemove($event); });
    } }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c2, decls: 10, vars: 4, consts: [[1, "v-outer"], ["outer", ""], [1, "left-component", 3, "hidden"], ["primaryComponent", ""], [3, "hidden", "thickness", "notifyWillChangeSize"], ["separator", ""], [1, "right-component", 3, "hidden"], ["secondaryComponent", ""]], template: function VerticalSplitPaneComponent_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, "vertical-split-separator", 4, 5);
        i0.ɵɵlistener("notifyWillChangeSize", function VerticalSplitPaneComponent_Template_vertical_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.VerticalSplitSeparatorComponent], styles: [".v-outer[_ngcontent-%COMP%] {\n      height: 100%;\n      width: 100%;\n      display: flex;\n    }\n\n    .left-component[_ngcontent-%COMP%] {\n      width: calc(50% - 4px);\n    }\n\n    .right-component[_ngcontent-%COMP%] {\n      width: calc(50% - 4px);\n    }"] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(VerticalSplitPaneComponent, [{
        type: Component,
        args: [{
                selector: 'vertical-split-pane',
                styles: [`
    .v-outer {
      height: 100%;
      width: 100%;
      display: flex;
    }

    .left-component {
      width: calc(50% - 4px);
    }

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