s94-web
Version:
常用的web工具方法封装---牧人与鱼
316 lines (300 loc) • 15.1 kB
JavaScript
import s94_web from "./s94_web.js";
import s94_Touch from "./s94_Touch.js";
var s94_msg = (function (global){
let document = global?.document;
if (!document) return console.error('缺少 document 对象！');
function s94_msg(config, type){
type = type in s94_msg ? type : 'tips';
s94_msg[type](config);
}
/**指定挂载的父节点，组件的字体大小会继承父节点的字体大小，默认为body。
* @type {HTMLElement}
*/
s94_msg.parent_node;
s94_msg.class_name = 's94-msg'+(new Date()).getTime();
let style = document.createElement('style');
style.innerHTML = `.${s94_msg.class_name} {--msg_bg: #fcfcfc;--msg_sm_bg: #f5f5f5;--msg_alpha_bg: rgba(245,245,245,.5);--msg_main: #050505;--msg_sm_main: #333333;--msg_alpha_main: rgba(5,5,5,.5);--msg_ok: #30c448;--msg_fail: #f56c6c;}
.${s94_msg.class_name} {position: fixed;left: 0;width: 100%;z-index:9990;}
.${s94_msg.class_name} *{font-size: inherit;margin: 0;padding: 0;}
.${s94_msg.class_name}-tips{z-index:9999;display: flex;justify-content: center;bottom: -20em;transition: bottom 0.4s;}
.${s94_msg.class_name}-tips>p{box-sizing: border-box;font-size: 1.1em;max-width: 80%;background-color: var(--msg_alpha_main);color: var(--msg_bg);padding: 0.5em 1.5em;line-height: 1.3em;border-radius: 0.35em;}
.${s94_msg.class_name}-loading{z-index: 9998;left: 0;top: 0;right: 0;bottom: 0;background: var(--msg_alpha_main);display: flex;justify-content: center;align-items: center;}
@keyframes rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.${s94_msg.class_name}-loading>img{width: 3.5em;height: 3.5em;animation:rotate 1s linear 0s infinite;}
.${s94_msg.class_name}-window{box-sizing: content-box;background: var(--msg_bg);color: var(--msg_main);display: flex;flex-direction: column;padding: 0.36em;padding-top: 2em;border-radius: 0.2em;box-shadow: 0 0 0.07em;}
.${s94_msg.class_name}-window.invisible{opacity: 0 !important;}
.${s94_msg.class_name}-window *{box-sizing: border-box;}
.${s94_msg.class_name}-window>h4{position:absolute;left:0;top: 0;width:100%;z-index: 2;font-size:1.4em;padding:0 0.18em;display:flex;height:1.8;align-items:center;justify-content: space-between;cursor: move;}
.${s94_msg.class_name}-window>h4>p{padding: 0 0.2em;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;}
.${s94_msg.class_name}-window>h4>span{flex-shrink: 0;cursor: pointer;}
.${s94_msg.class_name}-window>h4>span:hover{color: var(--msg_fail);}
.${s94_msg.class_name}-window-mask{position:absolute;left:0;top: 0;width:100%;height: 100%;z-index: 1;cursor: move;display: none;}
.${s94_msg.class_name}-window-content{position: relative;height: 100%;background: var(--msg_bg);border-radius: 0.2em;overflow: auto;}
.${s94_msg.class_name}-window-btns{font-size: 1.1em;text-align: right;}
.${s94_msg.class_name}-window-btns>span{display: inline-block;background: var(--msg_sm_bg);border-radius: 0.18em;padding: 0 0.5em;margin: 0 0.2em;margin-top: 0.3em;line-height: 1.4em;cursor: pointer;white-space: nowrap;box-shadow: 0 0 0.07em;}
.${s94_msg.class_name}-window-btns>span.ok{background: var(--msg_ok);color:#fff;}
.${s94_msg.class_name}-window-btns>span.fail{background: var(--msg_fail);color:#fff;}
`;
document.querySelector('head').appendChild(style);
function tips(config){
if (!config) return ;
config = typeof(config)=='string' ? {content:config} : config;
config.timeout = config.timeout || 2000;
if(!config.content) return;
if(!tips.dom){
tips.dom = document.createElement('div');
tips.dom.className = s94_msg.class_name+' '+s94_msg.class_name+'-tips';
tips.content_dom = document.createElement('p');
tips.dom.appendChild(tips.content_dom);
tips.content_dom.addEventListener('mouseover',function(){
if (tips.timeout_id) clearTimeout(tips.timeout_id);
})
tips.content_dom.addEventListener('mouseout',function(){
if (tips.timeout_id) clearTimeout(tips.timeout_id);
tips.timeout_id = setTimeout(function(){
tips.hide();
tips.timeout_id = undefined;
}, config.timeout)
})
document.documentElement.appendChild(tips.dom);
}
if (tips.timeout_id) clearTimeout(tips.timeout_id);
if (!tips.is_show) tips.show();
tips.content_dom.innerHTML = config.content;
tips.timeout_id = setTimeout(function(){
tips.hide();
tips.timeout_id = undefined;
}, config.timeout)
return tips.dom;
}
tips.show = function (){
tips.is_show = true;
tips.dom.style.height = 'auto';
tips.dom.style.bottom = '10%';
}
tips.hide = function (){
tips.is_show = false;
tips.dom.style.height = '2.3em';
tips.dom.style.bottom = '-20em';
}
function loading(open){
if(!loading.dom){
loading.dom = document.createElement('div');
loading.dom.className = s94_msg.class_name+' '+s94_msg.class_name+'-loading';
loading.dom.innerHTML = '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABLUExURUxpcf///////////////////////////////////////////////////////////////////////////////////////////////1SsvH4AAAAYdFJOUwBV339ZDiCpjEAsTl9qR59zv60Sr9TH6pEAIxIAAAB+SURBVHja1dC5DsJAEANQJ3sf2ZBw+f+/lAIJ7YjNVAjEa9zYjfFpLkO1zLxBcyFZoYgkPQbSabXPDPZoeXeQJnQCyQwpoFNmrtB5/JQNwUKzkztGwvR6KUKSV7nWHP5BrQmaRi4QokEvvxXmK4RUIPkzhgwLVOQGldkSvu4BvZIEqfPA0Q0AAAAASUVORK5CYII="/>';
loading.dom.onclick = function(){s94_web(this).hide();}
document.documentElement.appendChild(loading.dom);
}
s94_web(loading.dom)[open?'show':'hide']();
}
loading.hide = function (){
s94_web(loading.dom).hide();
}
function window_msg(config){
if (typeof(config) === 'string') config = {content:config};
if (!config || typeof(config) !== 'object') return ;
if(!window_msg.init) {
style.innerHTML += ``;
window_msg.init = true;
}
//默认参数
let name = config.name || 'window';
let dom = window_msg.list[name] || (function(){
let dom = document.createElement('div');
dom.className = s94_msg.class_name+' '+s94_msg.class_name+'-window invisible';
dom.style.width = config.width || 'auto';
dom.style.height = config.height || 'auto';
dom.innerHTML = `<h4><p>标题</p><span>×</span></h4>`;
dom.child_title = dom.querySelector('h4>p');
dom.child_mask = document.createElement('div');
dom.child_mask.className = s94_msg.class_name+'-window-mask';
dom.appendChild(dom.child_mask);
dom.child_content = document.createElement('div');
dom.child_content.className = s94_msg.class_name+'-window-content';
dom.appendChild(dom.child_content);
dom.child_btns = document.createElement('div');
dom.child_btns.className = s94_msg.class_name+'-window-btns';
dom.appendChild(dom.child_btns);
//移动控件
var touch_start=false;
s94_Touch.on(dom.querySelector('h4'),'change', function(res){
switch (res.type){
case 'start':{
touch_start = res;
touch_start.left = dom.offsetLeft;
touch_start.top = dom.offsetTop;
s94_web(dom.child_mask).show();
}break;
case 'move':{
if(!touch_start) return false;
var dt = {
x: res.x-touch_start.x,
y: res.y-touch_start.y,
}
dom.style.left = touch_start.left+dt.x+'px';
dom.style.top = touch_start.top+dt.y+'px';
}break;
case 'end':{
touch_start = false;
s94_web(dom.child_mask).hide();
}break;
}
})
document.documentElement.appendChild(dom);
//把窗口居中
setTimeout(function (){
dom.style.left = (document.documentElement.clientWidth - dom.offsetWidth)/2 + 'px';
dom.style.top = (document.documentElement.clientHeight - dom.offsetHeight)/2 + 'px';
s94_web(dom).removeClass('invisible');
typeof(config.oncreate)=='function' && config.oncreate.call(dom,dom);
},10)
window_msg.list[name] = dom;
return dom;
})();
dom.name = name;
//样式
if (typeof(config.width) != 'undefined') dom.style.width = config.width;
if (typeof(config.height) != 'undefined') dom.style.height = config.height;
if (typeof(config.title) != 'undefined') dom.child_title.innerHTML = config.title;
if (typeof(config.content) != 'undefined') {
if (config.content instanceof HTMLElement){
dom.child_content.innerHTML = '';
dom.child_content.appendChild(config.content);
}else if(typeof(config.content)=='string') {
dom.child_content.innerHTML = config.content;
}
}
if (typeof(config.btns) == 'object') {
dom.child_btns.innerHTML = '';
Object.keys(config.btns).forEach(function (k){
if (typeof(config.btns[k]) != 'function') return;
let btn = document.createElement('span');
let arr = k.split('.');
btn.innerText = arr[0];
btn.className = arr[1] || '';
btn.onclick = function(){config.btns[k].call(dom,dom);}
dom.child_btns.appendChild(btn);
})
}
dom.querySelector('h4>span').onclick = function (){
let res = typeof(config.onclose) === 'function' ? config.onclose() : '';
let action = config.destroy_oncolse ? 'remove' : 'hide';
if (res === false) return;
if (s94_web.isPromise(res)){
res.then(function (res){
if (res === false) return;
window_msg[action](dom);
})
}else {
window_msg[action](dom);
}
};
window_msg.show(name);
return dom;
}
window_msg.on = function (event_name, callback, first){
s94_web.on(s94_msg.class_name+'-window-hide:'+k);
}
window_msg.off = function (event_name, callback){
s94_web.off(s94_msg.class_name+'-window-hide:'+k);
}
window_msg.on = function (event_name, callback){
s94_web.emit(s94_msg.class_name+'-window-hide:'+k);
}
window_msg.ks = function (dom){
let ks = [];
if (typeof dom === 'undefined'){
ks = Object.keys(window_msg.list);
}else if(typeof(dom) === 'string' ){
if (dom in window_msg.list) ks.push(dom);
}else if (dom instanceof Element) {
let i = Object.values(window_msg.list).indexOf(dom);
if (i !== -1) ks.push(Object.keys(window_msg.list)[i]);
}
return ks;
}
window_msg.show = function(dom){
let ks = window_msg.ks(dom);
if (!ks.length) return;
Object.keys(window_msg.list).forEach(function (k){
s94_web(window_msg.list[k]).css({'z-index': 9996})
})
ks.forEach(function (k){
s94_web(window_msg.list[k]).css({'z-index': 9997}).show();
})
}
window_msg.hide = function(dom){
let ks = window_msg.ks(dom);
if (!ks.length) return;
ks.forEach(function (k){
s94_web(window_msg.list[k]).hide();
})
}
window_msg.remove = function(dom){
let ks = window_msg.ks(dom);
if (!ks.length) return;
ks.forEach(function (k){
s94_web(window_msg.list[k]).remove();
delete window_msg.list[k];
})
}
window_msg.list = {};
s94_msg.tips = tips;
s94_msg.loading = loading;
s94_msg.window = window_msg;
s94_msg.alert = function (config, ok){
let callback_resolve, callback_reject;
if (typeof config === 'string') config = {content: config};
config.destroy_oncolse = true;
config.name = config.name || 's94_msg_alert-'+(new Date()).getTime();
config.content = `<div style="padding: 3em 0.8em;">${config.content}</div>`;
let ok_text = config.ok_text || '确定.ok';
config.btns = {
[ok_text]: function (){
window_msg.remove(this);
callback_resolve();
typeof ok === 'function' && ok();
}
};
let dom = window_msg(config);
return new Promise(function (resolve, reject){
callback_resolve = resolve;
callback_reject = reject;
})
}
s94_msg.confirm = function (config, ok, fail){
let callback_resolve, callback_reject;
if (typeof config === 'string') config = {content: config};
config.destroy_oncolse = true;
config.name = config.name || 's94_msg_confirm-'+(new Date()).getTime();
config.content = `<div style="padding: 3em 0.8em;">${config.content}</div>`;
let ok_text = config.ok_text || '确定.ok';
let fail_text = config.fail_text || '取消';
function cancel(){
callback_reject();
typeof fail === 'function' && fail();
}
config.onclose = cancel;
config.btns = {
[fail_text]: function (){
cancel();
window_msg.remove(this);
},
[ok_text]: function (){
callback_resolve();
typeof ok === 'function' && ok();
window_msg.remove(this);
},
};
let dom = window_msg(config);
return new Promise(function (resolve, reject){
callback_resolve = resolve;
callback_reject = reject;
})
}
return s94_msg;
})(typeof globalThis !== 'undefined' ? globalThis :
typeof self !== "undefined" ? self :
typeof window !== "undefined" ? window :
typeof global !== "undefined" ? global : {});
export default s94_msg;