From f9de2c0f2f51cf569c2fea673066db2783350874 Mon Sep 17 00:00:00 2001 From: bellord13 Date: Thu, 18 Nov 2021 23:20:12 +0300 Subject: [PATCH] fix --- assets/bsCore/bsCore.css | 35 +++++ assets/bsCore/bsCore.js | 47 +++++- assets/bsToast/bsToast.css | 50 +++++++ assets/bsToast/bsToast.js | 270 +++++++++++++++++++++++++++++++++++ assets/core/core.register.js | 9 ++ assets/core/doc.js | 1 - assets/modal/modal.js | 4 +- tests/bsToastsTest.php | 103 +++++++++++++ 8 files changed, 515 insertions(+), 4 deletions(-) create mode 100644 assets/bsToast/bsToast.css create mode 100644 assets/bsToast/bsToast.js create mode 100644 tests/bsToastsTest.php diff --git a/assets/bsCore/bsCore.css b/assets/bsCore/bsCore.css index 9fa6eea..fdb93ce 100644 --- a/assets/bsCore/bsCore.css +++ b/assets/bsCore/bsCore.css @@ -10,4 +10,39 @@ } .collapse:not(.show) { display: none; +} + + + +.btn-close { + box-sizing: content-box; + width: 1em; + height: 1em; + padding: 0.25em 0.25em; + color: #000; + background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; + border: 0; + border-radius: 0.25rem; + opacity: 0.5; +} +.btn-close:hover { + color: #000; + text-decoration: none; + opacity: 0.75; +} +.btn-close:focus { + outline: 0; + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); + opacity: 1; +} +.btn-close:disabled, .btn-close.disabled { + pointer-events: none; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + opacity: 0.25; +} + +.btn-close-white { + filter: invert(1) grayscale(100%) brightness(200%); } \ No newline at end of file diff --git a/assets/bsCore/bsCore.js b/assets/bsCore/bsCore.js index e6fb48d..f6af871 100644 --- a/assets/bsCore/bsCore.js +++ b/assets/bsCore/bsCore.js @@ -1,7 +1,12 @@ +/** @module bsCore */ kit.PluginManager.register('bsCore', function(module, exports, require, global){ - /** @class kitBsCore */ + /** + * @memberOf kit + * @class bsCore + **/ var bsCore = {}; + var dom = {}; var util = {}; @@ -288,7 +293,6 @@ kit.PluginManager.register('bsCore', function(module, exports, require, global){ const getElementFromSelector = element => { const selector = getSelector(element) - return selector ? document.querySelector(selector) : null } @@ -520,6 +524,7 @@ kit.PluginManager.register('bsCore', function(module, exports, require, global){ return { getElement, getUID, + getSelector, getSelectorFromElement, getElementFromSelector, getTransitionDurationFromElement, @@ -1263,6 +1268,44 @@ kit.PluginManager.register('bsCore', function(module, exports, require, global){ util.index.isElement ); + /** + * -------------------------------------------------------------------------- + * Bootstrap (v5.1.3): util/component-functions.js + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) + * -------------------------------------------------------------------------- + */ + + util.componentFunctions = function(EventHandler, getElementFromSelector, isDisabled){ + const enableDismissTrigger = (component, method = 'hide') => { + const clickEvent = `click.dismiss${component.EVENT_KEY}` + const name = component.NAME + + EventHandler.on(document, clickEvent, `[data-bs-dismiss="${name}"]`, function (event) { + if (['A', 'AREA'].includes(this.tagName)) { + event.preventDefault() + } + + if (isDisabled(this)) { + return + } + + const target = getElementFromSelector(this) || this.closest(`.${name}`) + const instance = component.getOrCreateInstance(target) + + // Method argument is left, for Alert and only, as it doesn't implement the 'hide' method + instance[method]() + }) + }; + + return { + enableDismissTrigger + }; + }( + dom.EventHandler, + util.index.getElementFromSelector, + util.index.isDisabled + ); + /** * -------------------------------------------------------------------------- * Bootstrap (v5.0.2): base-component.js diff --git a/assets/bsToast/bsToast.css b/assets/bsToast/bsToast.css new file mode 100644 index 0000000..dff6550 --- /dev/null +++ b/assets/bsToast/bsToast.css @@ -0,0 +1,50 @@ + +.toast { + width: 350px; + max-width: 100%; + font-size: 0.875rem; + pointer-events: auto; + background-color: rgba(255, 255, 255, 0.85); + background-clip: padding-box; + border: 1px solid rgba(0, 0, 0, 0.1); + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); + border-radius: 0.25rem; +} +.toast.showing { + opacity: 0; +} +.toast:not(.show) { + display: none; +} + +.toast-container { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + max-width: 100%; + pointer-events: none; +} +.toast-container > :not(:last-child) { + margin-bottom: 0.75rem; +} + +.toast-header { + display: flex; + align-items: center; + padding: 0.5rem 0.75rem; + color: #6c757d; + background-color: rgba(255, 255, 255, 0.85); + background-clip: padding-box; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); + border-top-left-radius: calc(0.25rem - 1px); + border-top-right-radius: calc(0.25rem - 1px); +} +.toast-header .btn-close { + margin-right: -0.375rem; + margin-left: 0.75rem; +} + +.toast-body { + padding: 0.75rem; + word-wrap: break-word; +} \ No newline at end of file diff --git a/assets/bsToast/bsToast.js b/assets/bsToast/bsToast.js new file mode 100644 index 0000000..acb4229 --- /dev/null +++ b/assets/bsToast/bsToast.js @@ -0,0 +1,270 @@ +/** @module bsToast */ +kit.PluginManager.register('bsToast', function(module, exports, require){ + var bsCore = require('bsCore'); + + var + defineJQueryPlugin = bsCore.util.index.defineJQueryPlugin, + getElementFromSelector = bsCore.util.index.getElementFromSelector, + isRTL = bsCore.util.index.isRTL, + isVisible = bsCore.util.index.isVisible, + reflow = bsCore.util.index.reflow, + typeCheckConfig = bsCore.util.index.typeCheckConfig, + EventHandler = bsCore.dom.EventHandler, + Manipulator = bsCore.dom.Manipulator, + SelectorEngine = bsCore.dom.SelectorEngine, + getSelector = bsCore.util.index.getSelector, + isDisabled = bsCore.util.index.isDisabled, + enableDismissTrigger = bsCore.util.componentFunctions.enableDismissTrigger, + ScrollBarHelper = bsCore.util.ScrollBarHelper, + BaseComponent = bsCore.BaseComponent, + Backdrop = bsCore.util.Backdrop; + + + const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e }; + + const EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler); + const Manipulator__default = /*#__PURE__*/_interopDefaultLegacy(Manipulator); + const BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent); + + + /** + * -------------------------------------------------------------------------- + * Bootstrap (v5.1.3): toast.js + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) + * -------------------------------------------------------------------------- + */ + /** + * ------------------------------------------------------------------------ + * Constants + * ------------------------------------------------------------------------ + */ + + const NAME = 'toast'; + const DATA_KEY = 'bs.toast'; + const EVENT_KEY = `.${DATA_KEY}`; + const EVENT_MOUSEOVER = `mouseover${EVENT_KEY}`; + const EVENT_MOUSEOUT = `mouseout${EVENT_KEY}`; + const EVENT_FOCUSIN = `focusin${EVENT_KEY}`; + const EVENT_FOCUSOUT = `focusout${EVENT_KEY}`; + const EVENT_HIDE = `hide${EVENT_KEY}`; + const EVENT_HIDDEN = `hidden${EVENT_KEY}`; + const EVENT_SHOW = `show${EVENT_KEY}`; + const EVENT_SHOWN = `shown${EVENT_KEY}`; + const CLASS_NAME_FADE = 'fade'; + const CLASS_NAME_HIDE = 'hide'; // @deprecated - kept here only for backwards compatibility + + const CLASS_NAME_SHOW = 'show'; + const CLASS_NAME_SHOWING = 'showing'; + const DefaultType = { + animation: 'boolean', + autohide: 'boolean', + delay: 'number' + }; + const Default = { + animation: true, + autohide: true, + delay: 5000 + }; + /** + * ------------------------------------------------------------------------ + * Class Definition + * ------------------------------------------------------------------------ + */ + + class Toast extends BaseComponent__default.default { + constructor(element, config) { + super(element); + this._config = this._getConfig(config); + this._timeout = null; + this._hasMouseInteraction = false; + this._hasKeyboardInteraction = false; + + this._setListeners(); + } // Getters + + + static get DefaultType() { + return DefaultType; + } + + static get Default() { + return Default; + } + + static get NAME() { + return NAME; + } // Public + + + show() { + const showEvent = EventHandler__default.default.trigger(this._element, EVENT_SHOW); + + if (showEvent.defaultPrevented) { + return; + } + + this._clearTimeout(); + + if (this._config.animation) { + this._element.classList.add(CLASS_NAME_FADE); + } + + const complete = () => { + this._element.classList.remove(CLASS_NAME_SHOWING); + + EventHandler__default.default.trigger(this._element, EVENT_SHOWN); + + this._maybeScheduleHide(); + }; + + this._element.classList.remove(CLASS_NAME_HIDE); // @deprecated + + + reflow(this._element); + + this._element.classList.add(CLASS_NAME_SHOW); + + this._element.classList.add(CLASS_NAME_SHOWING); + + this._queueCallback(complete, this._element, this._config.animation); + } + + hide() { + if (!this._element.classList.contains(CLASS_NAME_SHOW)) { + return; + } + + const hideEvent = EventHandler__default.default.trigger(this._element, EVENT_HIDE); + + if (hideEvent.defaultPrevented) { + return; + } + + const complete = () => { + this._element.classList.add(CLASS_NAME_HIDE); // @deprecated + + + this._element.classList.remove(CLASS_NAME_SHOWING); + + this._element.classList.remove(CLASS_NAME_SHOW); + + EventHandler__default.default.trigger(this._element, EVENT_HIDDEN); + }; + + this._element.classList.add(CLASS_NAME_SHOWING); + + this._queueCallback(complete, this._element, this._config.animation); + } + + dispose() { + this._clearTimeout(); + + if (this._element.classList.contains(CLASS_NAME_SHOW)) { + this._element.classList.remove(CLASS_NAME_SHOW); + } + + super.dispose(); + } // Private + + + _getConfig(config) { + config = { ...Default, + ...Manipulator__default.default.getDataAttributes(this._element), + ...(typeof config === 'object' && config ? config : {}) + }; + typeCheckConfig(NAME, config, this.constructor.DefaultType); + return config; + } + + _maybeScheduleHide() { + if (!this._config.autohide) { + return; + } + + if (this._hasMouseInteraction || this._hasKeyboardInteraction) { + return; + } + + this._timeout = setTimeout(() => { + this.hide(); + }, this._config.delay); + } + + _onInteraction(event, isInteracting) { + switch (event.type) { + case 'mouseover': + case 'mouseout': + this._hasMouseInteraction = isInteracting; + break; + + case 'focusin': + case 'focusout': + this._hasKeyboardInteraction = isInteracting; + break; + } + + if (isInteracting) { + this._clearTimeout(); + + return; + } + + const nextElement = event.relatedTarget; + + if (this._element === nextElement || this._element.contains(nextElement)) { + return; + } + + this._maybeScheduleHide(); + } + + _setListeners() { + EventHandler__default.default.on(this._element, EVENT_MOUSEOVER, event => this._onInteraction(event, true)); + EventHandler__default.default.on(this._element, EVENT_MOUSEOUT, event => this._onInteraction(event, false)); + EventHandler__default.default.on(this._element, EVENT_FOCUSIN, event => this._onInteraction(event, true)); + EventHandler__default.default.on(this._element, EVENT_FOCUSOUT, event => this._onInteraction(event, false)); + } + + _clearTimeout() { + clearTimeout(this._timeout); + this._timeout = null; + } // Static + + + static jQueryInterface(config) { + return this.each(function () { + const data = Toast.getOrCreateInstance(this, config); + + if (typeof config === 'string') { + if (typeof data[config] === 'undefined') { + throw new TypeError(`No method named "${config}"`); + } + + data[config](this); + } + }); + } + + } + + enableDismissTrigger(Toast); + /** + * ------------------------------------------------------------------------ + * jQuery + * ------------------------------------------------------------------------ + * add .Toast to jQuery only if jQuery is present + */ + + defineJQueryPlugin(Toast); + + + /** + * @memberOf kit + * @class bsToast + **/ + var bsToast = Toast; + + module.exports = Toast; + + return module.exports; +}); diff --git a/assets/core/core.register.js b/assets/core/core.register.js index d57e623..98916f8 100644 --- a/assets/core/core.register.js +++ b/assets/core/core.register.js @@ -45,6 +45,15 @@ __PluginManager__.registerPlugins({ '/bsCore.css' ] }, + bsToast: { + path: __pmConfig__.assetsPath + '/bsToast', + module: '/bsToast.js', + type: 'loader', + css: [ + '/bsToast.css' + ], + deps: ['bsCore'], + }, Tooltip: { path: __pmConfig__.assetsPath + '/tooltip', module: '/tooltip.js', diff --git a/assets/core/doc.js b/assets/core/doc.js index de2389a..8e6c0ba 100644 --- a/assets/core/doc.js +++ b/assets/core/doc.js @@ -10,7 +10,6 @@ * @typedef {Object} kitCorePlugins * @property {PluginManager} pm * @property {kitPluginManagerRequire} require - * @property {kitBsCore} bsCore * @property {kitToolkit} toolkit * @property {kitModal} Modal * @property {kitCookie} cookie diff --git a/assets/modal/modal.js b/assets/modal/modal.js index abef8b2..1466283 100644 --- a/assets/modal/modal.js +++ b/assets/modal/modal.js @@ -1,3 +1,4 @@ +/** @module modal */ kit.PluginManager.register('modal', function(module, exports, require){ var bsCore = require('bsCore'); var @@ -448,8 +449,9 @@ kit.PluginManager.register('modal', function(module, exports, require){ defineJQueryPlugin(Modal) - return Modal; + module.exports = Modal; + return module.exports; }); diff --git a/tests/bsToastsTest.php b/tests/bsToastsTest.php new file mode 100644 index 0000000..ab72b6e --- /dev/null +++ b/tests/bsToastsTest.php @@ -0,0 +1,103 @@ + +service()->assets()->setPlugins([ + 'kit:config', + 'kit:flex-kit', + 'kit:core', + 'kit:bsCore', + 'kit:collapse', + 'kit:site', + 'kit:toolkit', + 'kit:theme', + ])->render(); +} +$APPLICATION->ShowHead(); + +?> + + +
+
+
+ + \ No newline at end of file