@rdkmaster/jigsaw-labs
Version:
Jigsaw, the next generation component set for RDK
232 lines (231 loc) • 9.24 kB
TypeScript
import { ComponentFactoryResolver, ComponentRef, ElementRef, EmbeddedViewRef, EventEmitter, NgZone, Renderer2, TemplateRef, Type, ViewContainerRef } from "@angular/core";
import { IDynamicInstantiatable } from "../component/common";
import { ActivatedRoute, Router } from "@angular/router";
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
export declare enum PopupEffect {
fadeIn = 0,
fadeOut = 1,
bubbleIn = 2,
bubbleOut = 3,
}
/**
* 用于控制弹出视图的各种参数，包括是否模态、弹出位置、视图尺寸、弹出动画等等，`PopupService`能够覆盖所有弹出场景，
* 很大程度上得益于这个参数的强大扩展性，熟悉这个参数的各个属性对是否能够用好`PopupService`有着决定性的影响。
*
* [这个demo](/components/dialog/demo#popup-option)详细的说明了如何使用这个对象。
*/
export declare class PopupOptions {
/**
* 控制弹出的视图是否模态。
*
* @type {boolean} 默认值是false
*/
modal?: boolean;
/**
* 弹出的动效，fadeIn/fadeOut，wipeIn/wipeOut
*
* @type {PopupEffect}
*/
showEffect?: PopupEffect;
/**
* 隐藏的动效，fadeIn/fadeOut，wipeIn/wipeOut
*
* @type {PopupEffect}
*/
hideEffect?: PopupEffect;
/**
* 控制弹出对象的相对位置，可以是相对一个点({@link PopupPoint})，也可以相对一个组件或者dom元素，支持如下类型：
* - {@link PopupPoint}类型：控制弹出视图的左上角位置，一般常常用于弹出上下文菜单，通过鼠标的事件（click/hover）等得到鼠标事件，
* 从事件对象中提取出位置信息传过来，从而让视图出现在鼠标的附近，配合`posOffset`属性可以进一步修正位置，避免遮挡到其他重要视图。
* - `ElementRef`和`HTMLElement`类型：相对某个已知UI元素的位置，不配置偏移的话，弹出视图的左上角会和给定的UI元素的左上角位置重合。
* Jigsaw会自动计算出给定元素的位置，并将弹出视图移动到该位置上。一般需要配合`posOffset`属性一起调整弹出位置，
* 避免遮挡到给定的UI元素。这个方式在实现一些下拉功能的时候会非常有用。
*
* 请参考[这个demo]($demo=dialog/popup-option)。
*
* @type {PopupPosition}
*/
pos?: PopupPosition;
/**
* 弹出位置的偏移量，注意left属性是以弹出组件的左侧为基准，top属性是以弹出组件的上方为基准，
* right属性是以弹出组件的右侧为基准，bottom是以弹出组件的下方为基准点。
*
* 请参考[这个demo]($demo=dialog/popup-option)。
*
* @type {PopupPositionOffset}
*/
posOffset?: PopupPositionOffset;
/**
* 弹出的组件的定位方式，和css的 absolute/fixed 含义类似。
*
* 请参考[这个demo]($demo=dialog/popup-option)。
*
* @type {PopupPositionType}
*/
posType?: PopupPositionType;
/**
* 弹出位置修正函数，在PopupService自动计算的位置无法满足需要的时候，可以通过它来修正，在一些需要精确定位的场景非常有用，函数的定义如下：
*
* ```
* (pos: PopupPositionValue, popupElement: HTMLElement) => PopupPositionValue
* ```
*/
posReviser?: (pos: PopupPositionValue, popupElement: HTMLElement) => PopupPositionValue;
/**
* 弹出组件的尺寸，多数组件在定义的时候，认为其尺寸是来自于父级元素，特别是组件的宽度更是如此，
* 这个组件在弹出来的时候，父级元素的宽度和高度都是100%，这会让自己占满整个屏幕，非常难看。
* 在这个场景下就可以通过这个属性设置组件在弹出状态下的尺寸。
* 如果你的组件在实现的时候就给定了尺寸或者最大尺寸，则无需设置这个属性。
*
* @type {PopupSize}
*/
size?: PopupSize;
/**
* 当应用页面的路由改变了的时候，自动销毁弹出的组件。当弹出的视图只归属于某个路由状态的时候，
* 这个功能会很有用，在路由变化之后，你无需手工销毁这些弹出的视图。
*
* 但凡事都有两面性，当你弹出的视图在全局下都有意义时，请注意务必关闭这个功能。
* 这样的场景比如通知类的对话框（alert或者notification），他们弹出后，就需要等待用户关闭，不应该自动关闭。
*
* @type {boolean}
*/
disposeOnRouterChanged?: boolean;
/**
* 是否要自动给弹出视图加上边框。默认`PopupService`会检测弹出的视图是否有边框，如果有则不加，如果没有则自动加上边框和阴影。
* 设置了true/false之后，则`PopupService`不再自动检测，而是根据这个属性的值决定是否要还是不加边框&阴影。
*
* @type {boolean}
*/
showBorder?: boolean;
}
export declare type PopupPosition = PopupPoint | ElementRef | HTMLElement;
export declare class PopupPositionValue {
left: number;
top: number;
}
export declare class PopupSize {
width?: string | number;
height?: string | number;
minWidth?: string | number;
}
export declare class PopupPoint {
x: number;
y: number;
}
export declare class PopupPositionOffset {
top?: number;
left?: number;
right?: number;
bottom?: number;
}
export declare enum PopupPositionType {
absolute = 0,
fixed = 1,
}
export declare type PopupRef = ComponentRef<IPopupable> | EmbeddedViewRef<any>;
export declare class ButtonInfo {
[index: string]: any;
label?: string;
clazz?: string;
type?: string;
disabled?: boolean;
preSize?: string;
}
export declare type PopupDisposer = () => void;
export interface IPopupable extends IDynamicInstantiatable {
answer: EventEmitter<ButtonInfo>;
[index: string]: any;
}
export declare class PopupInfo {
instance: IPopupable;
element: HTMLElement;
dispose: PopupDisposer;
answer: EventEmitter<ButtonInfo>;
}
export declare class PopupService {
private _cfr;
private _zone;
private _router;
private _activatedRoute;
private static _instance;
static readonly instance: PopupService;
private _popups;
readonly popups: PopupInfo[];
elements: HTMLElement[];
/**
* 全局插入点
* @internal
*/
static _viewContainerRef: ViewContainerRef;
/**
* @internal
*/
static _renderer: Renderer2;
private _eventHelper;
private _popupZIndex;
constructor(_cfr: ComponentFactoryResolver, _zone: NgZone, _router: Router, _activatedRoute: ActivatedRoute);
private _listenRouterChange(disposer);
/**
* 打开弹框
* @param what
* @param options
* @param initData
* @return PopupInfo
*/
popup(what: Type<IPopupable>, options?: PopupOptions, initData?: any): PopupInfo;
popup(what: TemplateRef<any>, options?: PopupOptions): PopupInfo;
private _popupBlocker(options);
private _beforePopup(options, element, disposer);
private _setStyle(options, element);
private _removeAnimation(options, element);
private _popupFactory(what, options);
private _createPopup(what);
private _getElement(ref);
private _getDisposer(options, popupRef, element);
/**
* 是否模态(popupService只提供全局模态)：
* 没配options
* 或options为空对象
* 或者modal为true
* @param options
* @returns {boolean}
*/
private _isModal(options);
/**
* 判断弹框是否居中显示:
* 没配options
* 或options为空对象
* 或没有配options.pos
* @param options
* @returns {boolean}
*/
private _isGlobalPopup(options);
private _setPopup(options, element);
private _setWindowListener(options, element);
private _setSize(options, element);
private _setBackground(options, element);
private _setShowAnimate(options, element);
private _setHideAnimate(options, element, cb);
private static _getPopupEffect(options);
private static _animateMap;
setPosition(options: PopupOptions, element: HTMLElement): void;
private _getPositionType(posType);
/**
* 获取位置具体的top和left
*
* options为{}或者null,或者options.pos没配时，默认相对屏幕居中显示
*
*
* */
private _getPositionValue(options, element);
/**
* 计算弹窗的位置，默认向下弹出，当下面的位置不足时，改成向上弹
* 默认靠左弹，当右边位置不足时，靠右弹
*/
positionReviser(pos: PopupPositionValue, popupElement: HTMLElement, options?: {
offsetWidth?: number;
offsetHeight?: number;
direction?: 'v' | 'h';
}): PopupPositionValue;
}