bellord/kit
1
0
Fork 0
mirror of https://bitbucket.org/bellord13/kit.git synced 2026-11-13 19:06:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
bellord
2021-11-19 21:57:16 +03:00
parent f9de2c0f2f
commit d5d20afa59
8 changed files with 139 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/bsToast/bsToast.css
+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;
assets/bsToastService/bsToastService.css
+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;
}
assets/bsToastService/bsToastService.js
+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;
});
assets/core/core.js
+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];
assets/core/core.register.js
+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',
assets/core/doc.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
assets/support/support.js
+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;
tests/bsToastsTest.php
+10 -46
View File
@@ -16,44 +16,23 @@ $APPLICATION->ShowHead();
?>
<script>
kit.ready(['bsToast', 'testing', 'date'], function () {
kit.ready(['bsToastService', 'testing', 'date', ], function () {
var unit = new kit.testing.Unit();
unit.logger.info('Тест bootstrap.Toast 5.1.3');
unit.logger.info('Тест service.toast');
unit.logger.notice(' ');
var audio = new Audio('https://issue.megapolis-it.ru/local/media/new_message_tone.mp3');
function makeNode(html = '') {
var nodeWrap = document.createElement('div');
nodeWrap.innerHTML = html;
return nodeWrap.firstElementChild;
}
var toastContainerTemplate = '<div class="toast-container position-fixed p-3 bottom-0 end-0" style="z-index: 10000;"></div>';
function getToastNode(title, message, time){
unit.logger.info(time + ' ' + title, message);
var toastTemplate = '<div class="toast fade hide" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><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><strong class="me-auto">'+title+'</strong><small>' + time+ '</small><button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Закрыть"/></div><div class="toast-body">'+message+'</div></div>';
return makeNode(toastTemplate);
}
var toastContainer = makeNode(toastContainerTemplate);
document.body.appendChild(toastContainer);
var audio = new Audio('https://issue.megapolis-it.ru/local/media/new_message-4.mp3');
kit.service.toast.onShow.push(function (toast, node) {
unit.logger.info(toast.data.title, toast.data);
audio.play();
});
var intervalId = setInterval(function(){
var toastEl = getToastNode('Новая заявка', 'Заявка от Пупкина на дальний склад. Очень срочно! Нужно еще вчера...', kit.date('H:i:s'));
toastContainer.appendChild(toastEl);
var toast = new kit.bsToast(toastEl, option = {
animation: true,
autohide: true,
delay: 33000,
});
toast.show();
audio.play();
kit.service.toast.info('Новая заявка', 'Заявка от Пупкина на дальний склад. Очень срочно! Нужно еще вчера...', kit.date('H:i:s'));
}, 5000);
@@ -67,18 +46,6 @@ $APPLICATION->ShowHead();
<div class="kit-logger"></div>
</div>
<style>
.position-fixed {
position: fixed!important;
}
.bottom-0 {
bottom: 0!important;
}
.end-0 {
right: 0!important;
}
.p-3 {
padding: 1rem !important;
}
img, svg {
vertical-align: middle;
}
@@ -95,9 +62,6 @@ $APPLICATION->ShowHead();
-moz-user-select: none;
user-select: none;
}
.me-auto {
margin-right: auto!important;
}
</style>
<?
?>