This commit is contained in:
2021-11-19 21:57:16 +03:00
parent f9de2c0f2f
commit d5d20afa59
8 changed files with 139 additions and 50 deletions
+7
View File
@@ -28,6 +28,13 @@
margin-bottom: 0.75rem;
}
.toast-title {
margin-right: auto;
}
.toast-desc {}
.toast-icon {
}
.toast-header {
display: flex;
align-items: center;
+8
View File
@@ -0,0 +1,8 @@
.toast-container--default {
z-index: 10000;
position: fixed!important;
bottom: 0!important;
right: 0!important;
padding: 1rem !important;
}
+78
View File
@@ -0,0 +1,78 @@
/** @module bsToastService */
kit.PluginManager.register('bsToastService', function(module, exports, require, global){
var support = require('support');
var bsToast = require('bsToast');
var Collection = require('Collection');
function Service() {
this.close = true;
this.option = {
animation: true,
autohide: true,
delay: 4000,
};
this.closeTemplate = '<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"/>';
this.iconTemplate = '<svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"/></svg>';
/**
* @type {HTMLElement}
*/
this.container = null;
this.onShow = new Collection();
}
Service.prototype.setContainer = function (parentNode = document.body, opClass = 'default') {
parentNode = support.getNode(parentNode);
if(opClass) {
opClass = 'toast-container--'+opClass;
}
var opClassSelector = (opClass !== '')?('.'+opClass):'';
var container = parentNode.querySelector('.toast-container'+opClassSelector);
if(container) {
this.container = container;
return;
}
var toastContainerTemplate = '<div class="toast-container '+opClass+'"></div>';
this.container = support.makeNode(toastContainerTemplate);
if(support.isElement(parentNode)) {
parentNode.appendChild(this.container);
}
};
Service.prototype.getToastNode = function (title, message, desc = '') {
var closeTemplate = this.close?this.closeTemplate:'';
var toastTemplate = '<div class="toast fade hide" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><div class="toast-icon">'+this.iconTemplate+'</div><strong class="toast-title">'+title+'</strong><small class="toast-desc">' + desc+ '</small>'+closeTemplate+'</div><div class="toast-body">'+message+'</div></div>';
return support.makeNode(toastTemplate);
};
Service.prototype.info = function (title, message, desc = '') {
var toastNode = this.getToastNode(title, message, desc);
var toast = new bsToast(toastNode, this.option);
toast.data = {
title: title,
message: message,
desc: desc,
date: new Date()
};
support.setKit(toastNode, 'toast', toast);
this.container.appendChild(toastNode);
toast.show();
this.onShow.eachCall(this, toast, toastNode);
};
/**
* @memberOf kit.service
* @class toast
**/
var toast = new Service();
toast.setContainer();
global.service.toast = toast;
module.exports = toast;
});
+3
View File
@@ -3,6 +3,7 @@
* @extends kitCorePlugins
*/
window.kit = window.kit || {};
window.kit.service = window.kit.service || {};
(function(global){
var stateList = {
undefined: 0,
@@ -463,6 +464,8 @@ window.kit = window.kit || {};
return module.exports;
};
__proto.depsCorrection = function(deps){
if(!Array.isArray(deps) ) {
deps = [deps];
+9
View File
@@ -54,6 +54,15 @@ __PluginManager__.registerPlugins({
],
deps: ['bsCore'],
},
bsToastService: {
path: __pmConfig__.assetsPath + '/bsToastService',
module: '/bsToastService.js',
type: 'loader',
css: [
'/bsToastService.css'
],
deps: ['bsToast', 'support', 'Collection'],
},
Tooltip: {
path: __pmConfig__.assetsPath + '/tooltip',
module: '/tooltip.js',
-1
View File
@@ -12,7 +12,6 @@
* @property {kitPluginManagerRequire} require
* @property {kitToolkit} toolkit
* @property {kitModal} Modal
* @property {kitCookie} cookie
* @property {kitConfig} config
* @property {kitTooltip} tooltip
* @property {kitPopover} Popover
+24 -3
View File
@@ -89,7 +89,7 @@ __PluginManager__.register('support', function(module, exports, require, global)
* @return Element
*/
function getNode(selector) {
if(isString(selector)) {
if(isString(selector) && selector !== '') {
return document.querySelector(selector);
}
if(isNode(selector) || isElement(selector)) {
@@ -115,7 +115,25 @@ __PluginManager__.register('support', function(module, exports, require, global)
function isA(o,c){
return null!=c&&"undefined"!=typeof Symbol&&c[Symbol.hasInstance]?!!c[Symbol.hasInstance](o):o instanceof c
}
function makeNode(html = '') {
var nodeWrap = document.createElement('div');
nodeWrap.innerHTML = html;
var r = nodeWrap.firstElementChild;
r.remove();
return r;
}
function setKit(node, key, value) {
if(!isElement(node)) return false;
node.kit = node.kit || {};
node.kit[key] = value;
}
function getKit(node, key) {
if(!isElement(node)) return null;
if(node.hasOwnProperty('kit') && node.kit.hasOwnProperty(key)) {
return node.kit[key];
}
return null;
}
/**
* @memberOf kit
@@ -137,7 +155,10 @@ __PluginManager__.register('support', function(module, exports, require, global)
isElement,
getNode,
extend,
isA
isA,
makeNode,
setKit,
getKit
};
return module.exports = support;