|
|
|
|
@ -17,258 +17,268 @@ import {
|
|
|
|
|
i18nText, |
|
|
|
|
KeyCode, |
|
|
|
|
isPlainObject, |
|
|
|
|
SIZE_CONSANTS |
|
|
|
|
SIZE_CONSANTS, |
|
|
|
|
CenterAdaptLayout, |
|
|
|
|
VerticalLayout, |
|
|
|
|
HTapeLayout, |
|
|
|
|
RightVerticalAdaptLayout |
|
|
|
|
} from "../../core"; |
|
|
|
|
import { Toast } from "../single"; |
|
|
|
|
import { Button, IconLabel, Label, Toast } from "../single"; |
|
|
|
|
|
|
|
|
|
export const Msg = (() => { |
|
|
|
|
let $mask, $pop; |
|
|
|
|
let $mask, $pop; |
|
|
|
|
|
|
|
|
|
const messageShows = []; |
|
|
|
|
const messageShows = []; |
|
|
|
|
|
|
|
|
|
const toastStack = []; |
|
|
|
|
const toastStack = []; |
|
|
|
|
|
|
|
|
|
const defaultConfig = { |
|
|
|
|
buttonHeight: 24, |
|
|
|
|
}; |
|
|
|
|
const AlertLevel = { |
|
|
|
|
WARNING: 'warning', |
|
|
|
|
INFO: 'info', |
|
|
|
|
ERROR: 'error', |
|
|
|
|
SUCCESS: 'success', |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return { |
|
|
|
|
alert(title, message, callback, config = defaultConfig) { |
|
|
|
|
this._show(false, title, message, callback, config); |
|
|
|
|
}, |
|
|
|
|
confirm(title, message, callback, config = defaultConfig) { |
|
|
|
|
this._show(true, title, message, callback, config); |
|
|
|
|
}, |
|
|
|
|
prompt(title, message, value, callback, min_width) { |
|
|
|
|
// Msg.prompt(title, message, value, callback, min_width);
|
|
|
|
|
}, |
|
|
|
|
toast(message, options, context) { |
|
|
|
|
isString(options) && (options = { level: options }); |
|
|
|
|
options = options || {}; |
|
|
|
|
context = context || Widget._renderEngine.createElement("body"); |
|
|
|
|
const level = options.level || "common"; |
|
|
|
|
const autoClose = isNull(options.autoClose) ? true : options.autoClose; |
|
|
|
|
const callback = isFunction(options.callback) ? options.callback : emptyFn; |
|
|
|
|
const toast = createWidget({ |
|
|
|
|
type: "bi.toast", |
|
|
|
|
cls: "bi-message-animate bi-message-leave", |
|
|
|
|
level, |
|
|
|
|
autoClose, |
|
|
|
|
closable: options.closable, |
|
|
|
|
text: message, |
|
|
|
|
listeners: [ |
|
|
|
|
{ |
|
|
|
|
eventName: Toast.EVENT_DESTORY, |
|
|
|
|
action() { |
|
|
|
|
remove(toastStack, toast.element); |
|
|
|
|
let _height = SIZE_CONSANTS.TOAST_TOP; |
|
|
|
|
each(toastStack, (i, element) => { |
|
|
|
|
element.css({ top: _height }); |
|
|
|
|
_height += element.outerHeight() + 10; |
|
|
|
|
}); |
|
|
|
|
callback(); |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
}); |
|
|
|
|
let height = SIZE_CONSANTS.TOAST_TOP; |
|
|
|
|
each(toastStack, (i, element) => { |
|
|
|
|
height += element.outerHeight() + 10; |
|
|
|
|
}); |
|
|
|
|
createWidget({ |
|
|
|
|
type: "bi.absolute", |
|
|
|
|
element: context, |
|
|
|
|
items: [ |
|
|
|
|
{ |
|
|
|
|
el: toast, |
|
|
|
|
left: "50%", |
|
|
|
|
top: height, |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
}); |
|
|
|
|
toastStack.push(toast.element); |
|
|
|
|
toast.element.css({ "margin-left": (-1 * toast.element.outerWidth()) / 2 }); |
|
|
|
|
toast.element.removeClass("bi-message-leave").addClass("bi-message-enter"); |
|
|
|
|
function getIconCls(level) { |
|
|
|
|
switch (level) { |
|
|
|
|
case AlertLevel.ERROR: |
|
|
|
|
return 'alert-error-font'; |
|
|
|
|
case AlertLevel.SUCCESS: |
|
|
|
|
return 'alert-success-font'; |
|
|
|
|
case AlertLevel.INFO: |
|
|
|
|
return 'alert-info-font'; |
|
|
|
|
case AlertLevel.WARNING: |
|
|
|
|
default: |
|
|
|
|
return 'alert-warning-font'; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
autoClose && |
|
|
|
|
delay(() => { |
|
|
|
|
toast.element.removeClass("bi-message-enter").addClass("bi-message-leave"); |
|
|
|
|
toast.destroy?.(); |
|
|
|
|
}, 5000); |
|
|
|
|
|
|
|
|
|
return function() { |
|
|
|
|
toast.element.removeClass("bi-message-enter").addClass("bi-message-leave"); |
|
|
|
|
toast.destroy?.(); |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
_show(hasCancel, title, message, callback, config) { |
|
|
|
|
isNull($mask) && |
|
|
|
|
($mask = Widget._renderEngine |
|
|
|
|
.createElement("<div class=\"bi-z-index-mask\">") |
|
|
|
|
.css({ |
|
|
|
|
position: "absolute", |
|
|
|
|
zIndex: zIndex_tip - 2, |
|
|
|
|
top: 0, |
|
|
|
|
left: 0, |
|
|
|
|
right: 0, |
|
|
|
|
bottom: 0, |
|
|
|
|
opacity: 0.5, |
|
|
|
|
}) |
|
|
|
|
.appendTo("body")); |
|
|
|
|
$pop = Widget._renderEngine |
|
|
|
|
.createElement("<div class=\"bi-message-depend\">") |
|
|
|
|
.css({ |
|
|
|
|
position: "absolute", |
|
|
|
|
zIndex: zIndex_tip - 1, |
|
|
|
|
top: 0, |
|
|
|
|
left: 0, |
|
|
|
|
right: 0, |
|
|
|
|
bottom: 0, |
|
|
|
|
}) |
|
|
|
|
.appendTo("body"); |
|
|
|
|
|
|
|
|
|
function close() { |
|
|
|
|
messageShows[messageShows.length - 1].destroy(); |
|
|
|
|
messageShows.pop(); |
|
|
|
|
if (messageShows.length === 0) { |
|
|
|
|
$mask.remove(); |
|
|
|
|
$mask = null; |
|
|
|
|
export const Msg = { |
|
|
|
|
alert(title, message, callback, config) { |
|
|
|
|
_show(false, title, message, callback, config); |
|
|
|
|
}, |
|
|
|
|
confirm(title, message, callback, config) { |
|
|
|
|
_show(true, title, message, callback, config); |
|
|
|
|
}, |
|
|
|
|
toast(message, options, context) { |
|
|
|
|
isString(options) && (options = { level: options }); |
|
|
|
|
options = options || {}; |
|
|
|
|
context = context || Widget._renderEngine.createElement("body"); |
|
|
|
|
const level = options.level || "common"; |
|
|
|
|
const autoClose = isNull(options.autoClose) ? true : options.autoClose; |
|
|
|
|
const callback = isFunction(options.callback) ? options.callback : emptyFn; |
|
|
|
|
const toast = createWidget({ |
|
|
|
|
type: "bi.toast", |
|
|
|
|
cls: "bi-message-animate bi-message-leave", |
|
|
|
|
level, |
|
|
|
|
autoClose, |
|
|
|
|
closable: options.closable, |
|
|
|
|
text: message, |
|
|
|
|
listeners: [ |
|
|
|
|
{ |
|
|
|
|
eventName: Toast.EVENT_DESTORY, |
|
|
|
|
action() { |
|
|
|
|
remove(toastStack, toast.element); |
|
|
|
|
let _height = SIZE_CONSANTS.TOAST_TOP; |
|
|
|
|
each(toastStack, (i, element) => { |
|
|
|
|
element.css({ top: _height }); |
|
|
|
|
_height += element.outerHeight() + 10; |
|
|
|
|
}); |
|
|
|
|
callback(); |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
}); |
|
|
|
|
let height = SIZE_CONSANTS.TOAST_TOP; |
|
|
|
|
each(toastStack, (i, element) => { |
|
|
|
|
height += element.outerHeight() + 10; |
|
|
|
|
}); |
|
|
|
|
createWidget({ |
|
|
|
|
type: "bi.absolute", |
|
|
|
|
element: context, |
|
|
|
|
items: [ |
|
|
|
|
{ |
|
|
|
|
el: toast, |
|
|
|
|
left: "50%", |
|
|
|
|
top: height, |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
}); |
|
|
|
|
toastStack.push(toast.element); |
|
|
|
|
toast.element.css({ "margin-left": (-1 * toast.element.outerWidth()) / 2 }); |
|
|
|
|
toast.element.removeClass("bi-message-leave").addClass("bi-message-enter"); |
|
|
|
|
|
|
|
|
|
autoClose && |
|
|
|
|
delay(() => { |
|
|
|
|
toast.element.removeClass("bi-message-enter").addClass("bi-message-leave"); |
|
|
|
|
toast.destroy?.(); |
|
|
|
|
}, 5000); |
|
|
|
|
|
|
|
|
|
return function() { |
|
|
|
|
toast.element.removeClass("bi-message-enter").addClass("bi-message-leave"); |
|
|
|
|
toast.destroy?.(); |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const controlItems = []; |
|
|
|
|
if (hasCancel === true) { |
|
|
|
|
controlItems.push({ |
|
|
|
|
el: { |
|
|
|
|
type: "bi.button", |
|
|
|
|
height: config.buttonHeight, |
|
|
|
|
text: i18nText("BI-Basic_Cancel"), |
|
|
|
|
light: true, |
|
|
|
|
handler() { |
|
|
|
|
function _show(hasCancel, title, message, callback, config = {}) { |
|
|
|
|
config = { |
|
|
|
|
buttonHeight: 24, |
|
|
|
|
cancelText: i18nText("BI-Basic_Cancel"), |
|
|
|
|
sureText: i18nText("BI-Basic_OK"), |
|
|
|
|
level: AlertLevel.WARNING, |
|
|
|
|
...config, |
|
|
|
|
} |
|
|
|
|
isNull($mask) && |
|
|
|
|
($mask = Widget._renderEngine |
|
|
|
|
.createElement("<div class=\"bi-z-index-mask\">") |
|
|
|
|
.css({ |
|
|
|
|
position: "absolute", |
|
|
|
|
zIndex: zIndex_tip - 2, |
|
|
|
|
top: 0, |
|
|
|
|
left: 0, |
|
|
|
|
right: 0, |
|
|
|
|
bottom: 0, |
|
|
|
|
opacity: 0.5, |
|
|
|
|
}) |
|
|
|
|
.appendTo("body")); |
|
|
|
|
$pop = Widget._renderEngine |
|
|
|
|
.createElement("<div class=\"bi-message-depend\">") |
|
|
|
|
.css({ |
|
|
|
|
position: "absolute", |
|
|
|
|
zIndex: zIndex_tip - 1, |
|
|
|
|
top: 0, |
|
|
|
|
left: 0, |
|
|
|
|
right: 0, |
|
|
|
|
bottom: 0, |
|
|
|
|
}) |
|
|
|
|
.appendTo("body"); |
|
|
|
|
|
|
|
|
|
function close() { |
|
|
|
|
messageShows[messageShows.length - 1].destroy(); |
|
|
|
|
messageShows.pop(); |
|
|
|
|
if (messageShows.length === 0) { |
|
|
|
|
$mask.remove(); |
|
|
|
|
$mask = null; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const controlItems = []; |
|
|
|
|
if (hasCancel === true) { |
|
|
|
|
controlItems.push({ |
|
|
|
|
el: { |
|
|
|
|
type: Button.xtype, |
|
|
|
|
height: config.buttonHeight, |
|
|
|
|
text: config.cancelText, |
|
|
|
|
light: true, |
|
|
|
|
handler() { |
|
|
|
|
close(); |
|
|
|
|
if (isFunction(callback)) { |
|
|
|
|
callback.apply(null, [false]); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
controlItems.push({ |
|
|
|
|
el: { |
|
|
|
|
type: Button.xtype, |
|
|
|
|
height: config.buttonHeight, |
|
|
|
|
text: config.sureText, |
|
|
|
|
handler() { |
|
|
|
|
close(); |
|
|
|
|
if (isFunction(callback)) { |
|
|
|
|
callback.apply(null, [true]); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
const conf = { |
|
|
|
|
element: $pop, |
|
|
|
|
type: CenterAdaptLayout.xtype, |
|
|
|
|
items: [ |
|
|
|
|
{ |
|
|
|
|
type: VerticalLayout.xtype, |
|
|
|
|
cls: "bi-card bi-border-radius", |
|
|
|
|
width: 450, |
|
|
|
|
hgap: 32, |
|
|
|
|
attributes: { |
|
|
|
|
tabIndex: 1, |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
this.element.keyup(e => { |
|
|
|
|
if (e.keyCode === KeyCode.ENTER) { |
|
|
|
|
close(); |
|
|
|
|
if (isFunction(callback)) { |
|
|
|
|
callback.apply(null, [false]); |
|
|
|
|
callback.apply(null, [true]); |
|
|
|
|
} |
|
|
|
|
} else if (e.keyCode === KeyCode.ESCAPE) { |
|
|
|
|
close(); |
|
|
|
|
if (hasCancel === true) { |
|
|
|
|
if (isFunction(callback)) { |
|
|
|
|
callback.apply(null, [false]); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
controlItems.push({ |
|
|
|
|
el: { |
|
|
|
|
type: "bi.button", |
|
|
|
|
height: config.buttonHeight, |
|
|
|
|
text: i18nText("BI-Basic_OK"), |
|
|
|
|
handler() { |
|
|
|
|
close(); |
|
|
|
|
if (isFunction(callback)) { |
|
|
|
|
callback.apply(null, [true]); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
try { |
|
|
|
|
this.element.focus(); |
|
|
|
|
} catch (e) { |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
const conf = { |
|
|
|
|
element: $pop, |
|
|
|
|
type: "bi.center_adapt", |
|
|
|
|
items: [ |
|
|
|
|
{ |
|
|
|
|
type: "bi.border", |
|
|
|
|
attributes: { |
|
|
|
|
tabIndex: 1, |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
this.element.keyup(e => { |
|
|
|
|
if (e.keyCode === KeyCode.ENTER) { |
|
|
|
|
close(); |
|
|
|
|
if (isFunction(callback)) { |
|
|
|
|
callback.apply(null, [true]); |
|
|
|
|
} |
|
|
|
|
} else if (e.keyCode === KeyCode.ESCAPE) { |
|
|
|
|
close(); |
|
|
|
|
if (hasCancel === true) { |
|
|
|
|
if (isFunction(callback)) { |
|
|
|
|
callback.apply(null, [false]); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
try { |
|
|
|
|
this.element.focus(); |
|
|
|
|
} catch (e) { |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
cls: "bi-card", |
|
|
|
|
items: { |
|
|
|
|
north: { |
|
|
|
|
el: { |
|
|
|
|
type: "bi.border", |
|
|
|
|
cls: "bi-message-title bi-background", |
|
|
|
|
items: { |
|
|
|
|
center: { |
|
|
|
|
el: { |
|
|
|
|
type: "bi.label", |
|
|
|
|
cls: "bi-font-bold", |
|
|
|
|
text: title || i18nText("BI-Basic_Prompt"), |
|
|
|
|
textAlign: "left", |
|
|
|
|
hgap: 20, |
|
|
|
|
height: 40, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
east: { |
|
|
|
|
el: { |
|
|
|
|
type: "bi.icon_button", |
|
|
|
|
cls: "bi-message-close close-font", |
|
|
|
|
// height: 50,
|
|
|
|
|
handler() { |
|
|
|
|
close(); |
|
|
|
|
if (isFunction(callback)) { |
|
|
|
|
callback.apply(null, [false]); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
width: 56, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
el: { |
|
|
|
|
type: HTapeLayout.xtype, |
|
|
|
|
height: 24, |
|
|
|
|
items: [ |
|
|
|
|
{ |
|
|
|
|
type: IconLabel.xtype, |
|
|
|
|
cls: `${getIconCls(config.level)} icon-size-20`, |
|
|
|
|
width: 24, |
|
|
|
|
height: 24, |
|
|
|
|
}, |
|
|
|
|
height: 40, |
|
|
|
|
}, |
|
|
|
|
center: { |
|
|
|
|
el: isPlainObject(message) |
|
|
|
|
? message |
|
|
|
|
: { |
|
|
|
|
type: "bi.label", |
|
|
|
|
vgap: 10, |
|
|
|
|
hgap: 20, |
|
|
|
|
whiteSpace: "normal", |
|
|
|
|
text: message, |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
south: { |
|
|
|
|
el: { |
|
|
|
|
type: "bi.absolute", |
|
|
|
|
items: [ |
|
|
|
|
{ |
|
|
|
|
el: { |
|
|
|
|
type: "bi.right_vertical_adapt", |
|
|
|
|
lgap: 10, |
|
|
|
|
items: controlItems, |
|
|
|
|
}, |
|
|
|
|
top: 0, |
|
|
|
|
left: 20, |
|
|
|
|
right: 20, |
|
|
|
|
bottom: 0, |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
{ |
|
|
|
|
type: Label.xtype, |
|
|
|
|
css: { "font-size": 16 }, |
|
|
|
|
cls: 'bi-font-bold', // 16px
|
|
|
|
|
textAlign: 'left', |
|
|
|
|
width: 'fill', |
|
|
|
|
text: title || i18nText('BI-Basic_Prompt'), |
|
|
|
|
lgap: 16, |
|
|
|
|
}, |
|
|
|
|
height: 44, |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
tgap: 32, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
el: isPlainObject(message) |
|
|
|
|
? message |
|
|
|
|
: { |
|
|
|
|
type: Label.xtype, |
|
|
|
|
css: { "font-size": 14 }, |
|
|
|
|
cls: 'alert-content', |
|
|
|
|
textAlign: 'left', |
|
|
|
|
text: message, |
|
|
|
|
whiteSpace: 'normal', |
|
|
|
|
}, |
|
|
|
|
height: 'fill', |
|
|
|
|
tgap: 12, |
|
|
|
|
lgap: 40, |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
el: config.footer && isFunction(config.footer) ? config.footer(close) : { |
|
|
|
|
type: RightVerticalAdaptLayout.xtype, |
|
|
|
|
lgap: 12, |
|
|
|
|
items: controlItems, |
|
|
|
|
}, |
|
|
|
|
width: 450, |
|
|
|
|
height: 200, |
|
|
|
|
} |
|
|
|
|
tgap: 32, |
|
|
|
|
bgap: 24, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
messageShows[messageShows.length] = createWidget(conf); |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
}; |
|
|
|
|
})(); |
|
|
|
|
|
|
|
|
|
messageShows[messageShows.length] = createWidget(conf); |
|
|
|
|
} |
|
|
|
|
|
