151 lines
4.2 KiB
Plaintext
151 lines
4.2 KiB
Plaintext
export { XTIPS_TYPE, XTIPS_TYPE_PRIVATE } from "../interface.uts"
|
|
import { defaultConfig, configCover } from "../libs/config.uts"
|
|
import { LoadFontFace } from "./loadFont.uts"
|
|
let maskerDom : null | HTMLDivElement = null;
|
|
let tid:number|null = 0
|
|
let currentOpts:XTIPS_TYPE | null = null;
|
|
export const hideTips = () => {
|
|
if (maskerDom != null) {
|
|
maskerDom.remove()
|
|
}
|
|
if(tid!=null){
|
|
clearTimeout(tid!)
|
|
}
|
|
currentOpts?.close?.()
|
|
}
|
|
// @ts-ignore
|
|
export const showTips = (opts : XTIPS_TYPE | null) => {
|
|
LoadFontFace()
|
|
currentOpts = opts;
|
|
if(tid!=null){
|
|
clearTimeout(tid!)
|
|
tid=null;
|
|
}
|
|
if (maskerDom != null) {
|
|
maskerDom.remove()
|
|
}
|
|
// @ts-ignore
|
|
let realopts = opts == null ? ({} as XTIPS_TYPE) : (opts!)
|
|
let config = configCover(realopts)
|
|
|
|
maskerDom = document.createElement("div")
|
|
if (maskerDom == null) return;
|
|
maskerDom.style.setProperty("background-color", config.maskBgColor)
|
|
maskerDom.style.setProperty("position", "fixed")
|
|
maskerDom.style.setProperty("left", "0px")
|
|
maskerDom.style.setProperty("top", "0px")
|
|
maskerDom.style.setProperty("width", "100%")
|
|
maskerDom.style.setProperty("height", "100%")
|
|
maskerDom.style.display = "flex"
|
|
maskerDom.style.flexDirection = "row"
|
|
maskerDom.style.justifyContent = "center"
|
|
maskerDom.style.alignItems = config.position=='top'?'flex-start': "flex-end"
|
|
maskerDom.style.zIndex = "10000"
|
|
maskerDom.style.pointerEvents = config.maskDisableClik?'auto':"none"
|
|
|
|
let contentWrapDiv = document.createElement("div")
|
|
contentWrapDiv.style.padding = "8px 16px"
|
|
contentWrapDiv.style.minWidth = config.size+"px"
|
|
contentWrapDiv.style.maxWidth = "414px"
|
|
if(config.position=='top'){
|
|
contentWrapDiv.style.marginTop = config.offset+'px'
|
|
}else if(config.position=='bottom'){
|
|
contentWrapDiv.style.marginBottom = config.offset+'px'
|
|
}
|
|
|
|
// contentWrapDiv.style.height = "100px"
|
|
if((config.iconCode!=''&&config.title!='')||(config.iconCode!=''&&config.title=='')){
|
|
contentWrapDiv.style.minHeight = (Math.max(config.iconSize,config.titleSize))+"px"
|
|
}
|
|
contentWrapDiv.style.backgroundColor = config.contentBgColor
|
|
contentWrapDiv.style.borderRadius = "8px"
|
|
contentWrapDiv.style.boxSizing = "border-box"
|
|
contentWrapDiv.style.display = "flex"
|
|
contentWrapDiv.style.flexDirection = "row"
|
|
contentWrapDiv.style.justifyContent = "center"
|
|
contentWrapDiv.style.alignItems = "center"
|
|
contentWrapDiv.style.lineHeight = "1"
|
|
contentWrapDiv.className = 'xShowToasScaleAnimation'
|
|
let textDiv = document.createElement("span")
|
|
if(config.iconCode!=''){
|
|
textDiv.innerText = String.fromCharCode(parseInt(config.iconCode, 16));
|
|
textDiv.style.fontFamily = "remixicon"
|
|
textDiv.style.fontSize = config.iconSize + "px"
|
|
textDiv.style.color = config.iconColor
|
|
textDiv.className = 'xShowToasAnimation'
|
|
}
|
|
|
|
|
|
var anistr = `
|
|
.xShowToasAnimation{
|
|
animation-name: xUiToastIconAni;
|
|
animation-duration: 1s;
|
|
animation-timing-function: cubic-bezier(.42,.38,.15,.93);
|
|
}
|
|
.xShowToasScaleAnimation{
|
|
animation-name: xUiToastIconAniScale;
|
|
animation-duration: 0.3s;
|
|
animation-timing-function: cubic-bezier(.42,.38,.15,.93);
|
|
}
|
|
@keyframes xUiToastIconAni {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.2);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@keyframes xUiToastIconAniScale {
|
|
0% {
|
|
transform: scale(0);
|
|
opacity:0;
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
opacity:1;
|
|
}
|
|
}
|
|
`
|
|
var styleDIv = document.getElementById('xUiToastIcon');
|
|
if (!styleDIv) {
|
|
let style = document.createElement("style");
|
|
style.id = 'xUiLoadWeingIcon'
|
|
document.head.appendChild(style)
|
|
styleDIv = style;
|
|
}
|
|
let sheet = styleDIv.sheet;
|
|
if (sheet.cssRules.length == 0) {
|
|
styleDIv.append(anistr)
|
|
}
|
|
|
|
contentWrapDiv.appendChild(textDiv)
|
|
|
|
|
|
if (config.title != '') {
|
|
let titleDiv = document.createElement("span")
|
|
titleDiv.innerText = config.title;
|
|
titleDiv.style.paddingLeft = '10px'
|
|
titleDiv.style.fontSize = config.titleSize + "px"
|
|
titleDiv.style.color = config.titleColor
|
|
contentWrapDiv.appendChild(titleDiv)
|
|
titleDiv.style.textAlign = "center"
|
|
titleDiv.style.wordBreak = "break-all"
|
|
|
|
}
|
|
|
|
maskerDom!.appendChild(contentWrapDiv)
|
|
window.document.body.appendChild(maskerDom!)
|
|
|
|
if(config.duration==0) return;
|
|
tid = setTimeout(function() {
|
|
tid = null;
|
|
hideTips()
|
|
}, (config.duration));
|
|
}
|
|
|