jsdk-offical
Version:
JSDK is the most comprehensive TypeScript framework, like JDK.
457 lines (400 loc) • 15.1 kB
text/typescript
/**
* @project JSDK
* @license MIT
* @website https://github.com/fengboyue/jsdk
*
* @version 2.0.0
* @author Frank.Feng
*/
/// <reference path="../../libs/sweetalert2/7.26.9/sweetalert2.d.ts" />
module JS {
export namespace fx {
export interface MessageBoxResult {
value?: undefined | true | any;
dismiss?: 'cancel' | 'backdrop' | 'close' | 'esc' | 'timer';
}
export class MessageBoxConfig {
/**
* The title of the modal, as HTML.
* It can either be added to the object under the key "title" or passed as the first parameter of the function.
*
* @default null
*/
title?: string;
/**
* The title of the modal, as text. Useful to avoid HTML injection.
*
* @default null
*/
titleText?: string;
/**
* A description for the modal.
* It can either be added to the object under the key "text" or passed as the second parameter of the function.
*
* @default null
*/
text?: string;
/**
* A HTML description for the modal.
* If "text" and "html" parameters are provided in the same time, "text" will be used.
*
* @default null
*/
html?: string | JQuery;
/**
* The footer of the modal, as HTML.
*
* @default null
*/
footer?: string | JQuery;
/**
* The type of the modal.
* 5 built-in types which will show a corresponding icon animation: 'warning', 'error',
* 'success', 'info' and 'question'.
*
* @default null
*/
type?: 'success' | 'error' | 'warning' | 'info' | 'question' | 'custom' = 'custom';
/**
* Whether or not SweetAlert2 should show a full screen click-to-dismiss backdrop.
* Either a boolean value or a css background value (hex, rgb, rgba, url, etc.)
*
* @default true
*/
backdrop?: boolean | string;
/**
* Whether or not an alert should be treated as a toast notification.
* This option is normally coupled with the `position` parameter and a timer.
* Toasts are NEVER autofocused.
*
* @default false
*/
toast?: boolean;
/**
* The container element for adding modal into (query selector only).
*
* @default 'body'
*/
target?: string;
/**
* Input field type, can be text, email, password, number, tel, range, textarea, select, radio, checkbox, file
* and url.
*
* @default null
*/
input?:
'text' | 'email' | 'password' | 'number' | 'tel' | 'range' | 'textarea' | 'select' | 'radio' | 'checkbox' |
'file' | 'url';
/**
* Modal window width, including paddings (box-sizing: border-box). Can be in px or %.
*
* @default null
*/
width?: number | string;
/**
* Modal window background (CSS background property).
*
* @default '#fff'
*/
background?: string;
/**
* Modal window position
*
* @default 'center'
*/
position?:
'top' | 'top-start' | 'top-end' | 'top-left' | 'top-right' |
'center' | 'center-start' | 'center-end' | 'center-left' | 'center-right' |
'bottom' | 'bottom-start' | 'bottom-end' | 'bottom-left' | 'bottom-right';
/**
* Modal window grow direction
*
* @default false
*/
grow?: 'row' | 'column' | 'fullscreen' | false;
/**
* A custom CSS class for the modal.
*
* @default null
*/
customClass?: string;
/**
* Auto close timer of the modal. Set in ms (milliseconds).
*
* @default null
*/
timer?: number;
/**
* If set to false, modal CSS animation will be disabled.
*
* @default true
*/
animation?: boolean;
/**
* By default, SweetAlert2 sets html's and body's CSS height to auto !important.
* If this behavior isn't compatible with your project's layout, set heightAuto to false.
*
* @default true
*/
heightAuto?: boolean;
/**
* If set to false, the user can't dismiss the modal by clicking outside it.
* You can also pass a custom function returning a boolean value, e.g. if you want
* to disable outside clicks for the loading state of a modal.
*
* @default true
*/
allowOutsideClick?: boolean;
/**
* If set to false, the user can't dismiss the modal by pressing the Escape key.
* You can also pass a custom function returning a boolean value, e.g. if you want
* to disable the escape key for the loading state of a modal.
*
* @default true
*/
allowEscapeKey?: boolean;
/**
* If set to false, the user can't confirm the modal by pressing the Enter or Space keys,
* unless they manually focus the confirm button.
* You can also pass a custom function returning a boolean value.
*
* @default true
*/
allowEnterKey?: boolean;
/**
* If set to false, SweetAlert2 will allow keydown events propagation to the document.
*
* @default true
*/
stopKeydownPropagation?: boolean;
/**
* Useful for those who are using SweetAlert2 along with Bootstrap modals.
* By default keydownListenerCapture is false which means when a user hits Esc,
* both SweetAlert2 and Bootstrap modals will be closed.
* Set keydownListenerCapture to true to fix that behavior.
*
* @default false
*/
keydownListenerCapture?: boolean;
/**
* If set to false, a "Confirm"-button will not be shown.
* It can be useful when you're using custom HTML description.
*
* @default true
*/
showConfirmButton?: boolean;
/**
* If set to true, a "Cancel"-button will be shown, which the user can click on to dismiss the modal.
*
* @default false
*/
showCancelButton?: boolean;
/**
* Use this to change the text on the "Confirm"-button.
*
* @default 'OK'
*/
confirmButtonText?: string;
/**
* Use this to change the text on the "Cancel"-button.
*
* @default 'Cancel'
*/
cancelButtonText?: string;
/**
* Use this to change the background color of the "Confirm"-button (must be a HEX value).
*
* @default '#3085d6'
*/
confirmButtonColor?: string;
/**
* Use this to change the background color of the "Cancel"-button (must be a HEX value).
*
* @default '#aaa'
*/
cancelButtonColor?: string;
/**
* A custom CSS class for the "Confirm"-button.
*
* @default null
*/
confirmButtonClass?: string = 'jsfx-btn-confirm';
/**
* A custom CSS class for the "Cancel"-button.
*
* @default null
*/
cancelButtonClass?: string = 'jsfx-btn-cancel';
/**
* Set to true if you want to invert default buttons positions.
*
* @default false
*/
reverseButtons?: boolean;
/**
* Set to false if you want to focus the first element in tab order instead of "Confirm"-button by default.
*
* @default true
*/
focusConfirm?: boolean;
/**
* Set to true if you want to focus the "Cancel"-button by default.
*
* @default false
*/
focusCancel?: boolean;
/**
* Set to true to show close button in top right corner of the modal.
*
* @default false
*/
showCloseButton?: boolean;
/**
* Add a customized icon for the modal. Should contain a string with the path or URL to the image.
*
* @default null
*/
imageUrl?: string;
/**
* If imageUrl is set, you can specify imageWidth to describes image width in px.
*
* @default null
*/
imageWidth?: number;
/**
* If imageUrl is set, you can specify imageHeight to describes image height in px.
*
* @default null
*/
imageHeight?: number;
/**
* An alternative text for the custom image icon.
*
* @default ''
*/
imageAlt?: string;
/**
* A custom CSS class for the customized icon.
*
* @default null
*/
imageClass?: string;
/**
* Input field placeholder.
*
* @default ''
*/
inputPlaceholder?: string;
/**
* Input field initial value.
*
* @default ''
*/
inputValue?: string;
/**
* If input parameter is set to "select" or "radio", you can provide options.
* Object keys will represent options values, object values will represent options text values.
*/
inputOptions?: JsonObject<string>;
/**
* Automatically remove whitespaces from both ends of a result string.
* Set this parameter to false to disable auto-trimming.
*
* @default true
*/
inputAutoTrim?: boolean;
/**
* HTML input attributes (e.g. min, max, step, accept...), that are added to the input field.
* @default null
*/
inputAttributes?: { [attribute: string]: string; };
/**
* Validator for input field, may be async (Promise-returning) or sync.
* @default null
*/
inputValidator?: (inputValue: string) => Promise<string | null>;
/**
* A custom CSS class for the input field.
*
* @default null
*/
inputClass?: string;
listeners?: {
confirming?: (e: Event, inputValue: any) => Promise<any | void>;
opening?: (e: Event, modal: HTMLElement) => void;
opened?: (e: Event, modal: HTMLElement) => void;
closing?: (e: Event, modal: HTMLElement) => void;
closed?: (e: Event) => void;
};
}
('JS.fx.MessageBox')
export class MessageBox {
public static show(config: MessageBoxConfig): Promise<MessageBoxResult> {
let c = new MessageBoxConfig();
c = Jsons.union(c, config);
let cfg = <swalOptions>c, lts = c.listeners;
if (lts) {
if (lts.confirming) cfg.preConfirm = (inputVal: any) => {
lts.confirming.apply(null, [new CustomEvent('confirming'), inputVal])
}
if (lts.opening) cfg.onBeforeOpen = (el) => {
lts.opening.apply(null, [new CustomEvent('opening'), el])
}
if (lts.opened) cfg.onOpen = (el) => {
lts.opened.apply(null, [new CustomEvent('opened'), el])
}
if (lts.closing) cfg.onClose = (el) => {
lts.closing.apply(null, [new CustomEvent('closing'), el])
}
if (lts.closed) cfg.onAfterClose = () => {
lts.closed.apply(null, [new CustomEvent('closed')])
}
}
let colorMode;
if (c.type == 'custom') {
colorMode = 'btn-' + ColorMode.info;
} else if (c.type == 'question') {
colorMode = 'btn-' + ColorMode.dark;
} else if (c.type == 'error') {
colorMode = 'btn-' + ColorMode.danger;
} else {
colorMode = 'btn-' + cfg.type;
}
cfg.confirmButtonClass = colorMode + ' jsfx-messagebox-btn ' + (cfg.confirmButtonClass || '');
cfg.cancelButtonClass = 'jsfx-messagebox-btn ' + (cfg.cancelButtonClass || '');
cfg.buttonsStyling = false;
if (<any>cfg.type == 'custom') delete cfg.type;
return <any>swal(cfg);
}
public static clickConfirm() {
swal.clickConfirm();
}
public static clickCancel() {
swal.clickCancel();
}
public static disableConfirmButton() {
swal.disableConfirmButton();
}
public static enableConfirmButton() {
swal.enableConfirmButton();
}
public static disableButtons() {
swal.disableButtons();
}
public static getTitle() {
return $(swal.getTitle()).html();
}
public static getContent() {
return $(swal.getContent()).html();
}
public static close() {
swal.close();
}
public static isShown() {
return swal.isVisible();
}
}
}
}
import MessageBox = JS.fx.MessageBox;
import MessageBoxResult = JS.fx.MessageBoxResult;