jsdk-offical
Version:
JSDK is the most comprehensive TypeScript framework, like JDK.
236 lines (202 loc) • 8.46 kB
text/typescript
/**
* @project JSDK
* @license MIT
* @website https://github.com/fengboyue/jsdk
*
* @version 2.0.0
* @author Frank.Feng
*/
/// <reference path="../../libs/slidereveal/1.1.2/jquery.slidereveal.d.ts"/>
/// <reference path="Widget.ts"/>
/// <reference path="../util/Bom.ts"/>
module JS {
export namespace fx {
export type SiderEvents = WidgetEvents | 'opening' | 'opened' | 'closing' | 'closed' | 'loaded';
export interface SiderListeners extends WidgetListeners<Sider> {
opening?: EventHandler<Sider>
opened?: EventHandler<Sider>
closing?: EventHandler<Sider>
closed?: EventHandler<Sider>
loaded?: EventHandler1<Sider, Window> //frame
}
export enum SiderFaceMode {
/**
* over to the main content.
*/
over = 'over',
/**
* overlay to the main content.
*/
overlay = 'overlay',
/**
* push the main content.
*/
push = 'push'
}
export class SiderConfig extends WidgetConfig<Sider> {
title?: string;
titleCls?: string;
titleStyle?: string;
hidden?: boolean = true;
/**
* Width of a side panel. Integer value will be evaluated as px. String value will be assigned directly e.g. '100px', '50%'
*/
width?: string | number;
/**
* @default SiderFaceMode.over
*/
faceMode?: SiderFaceMode = SiderFaceMode.over;
/**
* Where you want to show a side panel from. You can only set it to either left or right.
* @default 'left'
*/
place?: 'left' | 'right';
/**
* Whether you want to enable users to use ESC to hide a panel.
* @default true
*/
escKey?: boolean;
/**
* Animating time for showing a side panel. The unit is millisecond.
*/
speed?: number;
url?: string;
html?: string | Element | JQuery;
/**
* DOM element that you want to use as a trigger to show and hide a panel.
*/
trigger?: string | Element | JQuery;
listeners?: SiderListeners;
}
export class Sider extends Widget {
private _overlay: JQuery;
constructor(cfg: SiderConfig) {
if (cfg.hidden === undefined) cfg.hidden = true;
cfg.appendTo = 'body';
if (!cfg.faceMode) cfg.faceMode = SiderFaceMode.over;
super(cfg);
}
public toggle() {
this.widgetEl.slideReveal('toggle');
}
public show() {
this.widgetEl.slideReveal('show');
return this
}
public hide() {
this.widgetEl.slideReveal('hide');
return this
}
public loadHtml(html: string | Element | JQuery) {
let cfg = <SiderConfig>this._config;
if (html) cfg.html = html;
if (!cfg.html) return;
let h = Types.isString(cfg.html) ? <string>cfg.html : $(cfg.html).html();
this._mainEl.off().empty().html(h);
this._fire<SiderEvents>('loaded');
return this
}
public loadUrl(url: string) {
let cfg = <SiderConfig>this._config;
if (url) cfg.url = url;
if (!cfg.url) return;
this._mainEl.off().empty();
let iframe = document.createElement('iframe'), fn = () => {
let ifr = $(`#${this.id}_iframe`)[0], fWin = Bom.iframeWindow(ifr);
(<any>fWin).Page.onEvent(<PageEvents>'close', (e, ...args: any[]) => {
this._fire<SiderEvents>('closing', args);
this.widgetEl.slideReveal('hide', false);
this._fire<SiderEvents>('closed', args);
})
this._fire<SiderEvents>('loaded', [fWin]);
};
iframe.id = this.id + '_iframe';
iframe.src = cfg.url;
if (iframe['attachEvent']) {
iframe['attachEvent']('onload', fn)
} else {
iframe.onload = fn
}
this._mainEl.append(iframe);
return this
}
public reload() {
let cfg = <SiderConfig>this._config;
cfg.html ? this.loadHtml(null) : this.loadUrl(null);
return this
}
public getFrame(){
return $(`#${this.id}_iframe`)[0]
}
/**
* 在父类构造函数中的初始化之后，由子类重载实现
*/
protected _onAfterInit() {
let cfg = <SiderConfig>this._config;
this.reload();
if (!cfg.hidden) this.show();
}
protected _mainEl: JQuery<HTMLElement>;/** 组件内部主DOM对象 */
protected _render() {
let cfg = <SiderConfig>this._config,
html = `
<div class="jsfx-sider-head ${cfg.titleCls || ''}" style="${cfg.titleStyle || ''}">
<div jsfx-role="title" class="text-truncate">${cfg.title || ''}</div>
<button type="button" class="close" aria-label="Close"><i class="la la-arrow-${cfg.place || 'left'}"></i></button>
</div>
<div class="jsfx-sider-body" jsfx-role="main"></div>
`;
this.widgetEl.addClass(`jsfx-sider ${cfg.place || 'left'}`).html(html);
let isPush = cfg.faceMode == SiderFaceMode.push;
this.widgetEl = $('#' + this.id).slideReveal({
width: cfg.width || undefined,
trigger: cfg.trigger ? $(cfg.trigger) : undefined,
push: isPush,
overlay: !isPush,
overlayColor: 'rgba(0, 0, 0, 0.25)',
position: cfg.place,
speed: cfg.speed,
autoEscape: cfg.escKey == false ? false : true,
show: () => {
this.widgetEl.addClass((cfg.faceMode == SiderFaceMode.overlay ? 'overlay-' : '') + 'sider-shadow');
this._fire<SiderEvents>('opening');
},
shown: () => { this._fire<SiderEvents>('opened') },
hide: () => {
this.widgetEl.removeClass((cfg.faceMode == SiderFaceMode.overlay ? 'overlay-' : '') + 'sider-shadow');
this._fire<SiderEvents>('closing');
},
hidden: () => { this._fire<SiderEvents>('closed') }
})
let overs = $('.slide-reveal-overlay');
if (overs.length > 0) {
this._overlay = $(overs[0]);
if (cfg.faceMode == SiderFaceMode.over) this._overlay.remove();
}
this.widgetEl.find('button.close').click(() => {
this.hide()
})
this._mainEl = this.widgetEl.find('[jsfx-role=main]');
}
protected _destroy() {
if (this._overlay) this._overlay.remove();
super._destroy();
}
public title(): string
public title(text: string): this
public title(text?: string): any {
let cfg = <SiderConfig>this._config;
if (arguments.length == 0) return cfg.title;
this.widgetEl.find('div[jsfx-role="title"]').html(text);
cfg.title = text;
return this
}
}
}
}
import SiderFaceMode = JS.fx.SiderFaceMode;
import SiderConfig = JS.fx.SiderConfig;
import SiderEvents = JS.fx.SiderEvents;
import SiderListeners = JS.fx.SiderListeners;
import Sider = JS.fx.Sider;