gentics-ui-core
Version:
This is the common core framework for the Gentics CMS and Mesh UI, and other Angular applications.
191 lines (190 loc) • 7.82 kB
TypeScript
import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnDestroy, Renderer2, SimpleChanges } from '@angular/core';
import * as i0 from "@angular/core";
export declare type FocusType = 'left' | 'right';
export declare const CURSOR_STYLE_CLASS = "gtx-split-view-container-resizing";
/**
* A container that provides a ["master-detail" interface](https://en.wikipedia.org/wiki/Master%E2%80%93detail_interface)
* with two resizable panels denoted by the `left` and `right` attributes on its children.
*
* There should only be a single instance of SplitViewContainer used at a time, and it is intended to be the
* main structural container of the "master/detail" part of the app - i.e. the content listing and editing view.
*
* ```html
* <gtx-split-view-container
* [rightPanelVisible]="hasContent"
* [(focusedPanel)]="splitFocus">
*
* <div class="list-pane" left>
* <!-- Left panel contents -->
* </div>
*
* <div class="content-pane" right>
* <!-- Right panel contents -->
* </div>
*
* </gtx-split-view-container>
* ```
*
* ## Setting Scroll Positions
*
* The SplitViewContainer instance exposes two public methods which can be used to manually set the `scrollTop`
* property of either the right or left panels: `.scrollLeftPanelTo()` and `.scrollRightPanelTo()`.
*
* This can be used, for example, to scroll the contents pane (right panel) back to the top when the route changes.
* An example usage follows:
*
* ```typescript
* export class App {
* @ViewChild(SplitViewContainer)
* private splitViewContainer: SplitViewContainer;
*
* constructor(private router: Router) {
* this.subscription = router.subscribe(() => {
* // scroll the right panel to the top whenever
* // the route changes.
* this.splitViewContainer.scrollRightPanelTo(0);
* });
* }
* }
* ```
*/
export declare class SplitViewContainer implements AfterViewInit, OnChanges, OnDestroy {
private ownElement;
private changeDetector;
private renderer;
/**
* Tells if a panel is opened on the right side in the split view.
* Setting to false will also change {@link focusedPanel}.
*/
rightPanelVisible: boolean;
/**
* Tells the SplitViewContainer which side should be focused.
* Can be used to double-bind the property:
* `<split-view-container [(focusedPanel)]="property">`
*/
focusedPanel: 'left' | 'right';
/**
* Width of the left panel in "large" layout in percent of the container width.
* Use to control split percentage from the parent by double-binding with {@link splitChange}:
* `<gtx-split-view-container [(split)]="leftWidthPercent">...</gtx-split-view-container>`
*/
split: number;
/** Initial width of the left panel in "large" layout in percent of the container width. */
initialSplit: number;
/**
* Emits when the split between the panels is changed. Allows double-binding:
* `<split-view-container [(split)]="leftWidth">...</split-view-container>`
*/
splitChange: EventEmitter<number>;
/**
* The smallest panel size in percent the left
* and right panels will shrink to when resizing.
*/
minPanelSizePercent: number;
/**
* The smallest panel size in pixels the left
* and right panels will shrink to when resizing.
*/
minPanelSizePixels: number;
/**
* Disable touch swipe gestures when used.
*/
set noswipe(val: any);
/**
* Triggers when the right panel is closed.
*/
rightPanelClosed: EventEmitter<void>;
/**
* Triggers when the right panel is opened.
*/
rightPanelOpened: EventEmitter<void>;
/**
* Triggers when the left panel is focused.
*/
leftPanelFocused: EventEmitter<void>;
/**
* Triggers when the right panel is focused.
*/
rightPanelFocused: EventEmitter<void>;
/**
* Triggers when the focused panel changes.
* Can be used to double-bind the property:
* `<split-view-container [(focusedPanel)]="property">`
*/
focusedPanelChange: EventEmitter<"left" | "right">;
/**
* Triggers when the user starts resizing the split amount between the panels.
* Receives the size of the left panel in % of the container width as argument.
*/
splitDragStart: EventEmitter<number>;
/**
* Triggers when the user resizes the split amount between the panels.
* Receives the size of the left panel in % of the container width as argument.
*/
splitDragEnd: EventEmitter<number>;
/** @internal EventTarget for tracking when the mouse leaves the page. */
globalEventTarget: any;
/** @internal The Element to which cursor styles are applied. */
globalCursorStyleTarget: any;
resizeContainer: ElementRef;
leftPanel: ElementRef;
rightPanel: ElementRef;
resizer: ElementRef;
visibleResizer: ElementRef;
resizing: boolean;
rightPanelActuallyFocused: boolean;
/**
* When split is passed by the parent component, only emit events on resize.
* Otherwise, the width is managed by the SplitViewContainer.
*/
private widthHandledExternally;
/**
* To prevent race conditions by click events, do not emit a focusedPanelChange
* when the last change detection changed the focus. Example:
* 1. element in left panel is clicked, sets focus to "right"
* 2. click event bubbles to the SplitViewContainer, leftPanelClicked
* 3. focus would be set to the left panel again, but should be ignored
*/
private focusJustChanged;
private focusJustChangedTimeout;
private isSwipeable;
private resizeMouseOffset;
private hammerManager;
private cleanups;
constructor(ownElement: ElementRef, changeDetector: ChangeDetectorRef, renderer: Renderer2);
ngOnInit(): void;
ngAfterViewInit(): void;
ngOnChanges(changes: SimpleChanges): void;
ngOnDestroy(): void;
/**
* Set the scrollTop of the left panel
*/
scrollLeftPanelTo(scrollTop: number): void;
/**
* Set the scrollTop of the right panel
*/
scrollRightPanelTo(scrollTop: number): void;
leftPanelClicked(): void;
rightPanelClicked(): void;
startResizer(event: MouseEvent): void;
/**
* (hacky) After initializing the view, make this component fill the height of the viewport.
* Only applied if the split-view-container element is not styled in the consuming application.
*/
private fitContainerToViewport;
/**
* Set up a Hammerjs-based swipe gesture handler to allow swiping between two panes.
*/
private initSwipeHandler;
private destroySwipeHandler;
private moveResizer;
private endResizing;
/**
* Helper function to keep the resize functionality
* within its limits (minPanelSizePixels & minPanelSizePercent).
* @return Returns the adjusted X position in % of the container width.
*/
private getAdjustedPosition;
static ɵfac: i0.ɵɵFactoryDeclaration<SplitViewContainer, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<SplitViewContainer, "gtx-split-view-container", never, { "rightPanelVisible": "rightPanelVisible"; "focusedPanel": "focusedPanel"; "split": "split"; "initialSplit": "initialSplit"; "minPanelSizePercent": "minPanelSizePercent"; "minPanelSizePixels": "minPanelSizePixels"; "noswipe": "noswipe"; }, { "splitChange": "splitChange"; "rightPanelClosed": "rightPanelClosed"; "rightPanelOpened": "rightPanelOpened"; "leftPanelFocused": "leftPanelFocused"; "rightPanelFocused": "rightPanelFocused"; "focusedPanelChange": "focusedPanelChange"; "splitDragStart": "splitDragStart"; "splitDragEnd": "splitDragEnd"; }, never, ["[left]", "[right]"]>;
}