diff --git a/src/app.html b/src/app.html index 3dccd63..ed56907 100644 --- a/src/app.html +++ b/src/app.html @@ -369,6 +369,25 @@ + + + + + + \ No newline at end of file diff --git a/src/components/notify-container/NotifyContainer.css b/src/components/notify-container/NotifyContainer.css new file mode 100644 index 0000000..82236f2 --- /dev/null +++ b/src/components/notify-container/NotifyContainer.css @@ -0,0 +1,5 @@ +.NotifyContainer { + position: absolute; + bottom: 24px; + right: 24px; +} diff --git a/src/components/notify-container/NotifyContainer.js b/src/components/notify-container/NotifyContainer.js new file mode 100644 index 0000000..b1d3e29 --- /dev/null +++ b/src/components/notify-container/NotifyContainer.js @@ -0,0 +1,12 @@ +import Component from '../component'; +import './NotifyContainer.css'; + +class NotifyContainer extends Component { + constructor () { + super('#notify-container', document.body); + } +} + +const notifyContainer = new NotifyContainer(); + +export default notifyContainer; diff --git a/src/components/notify-container/index.js b/src/components/notify-container/index.js new file mode 100644 index 0000000..0052ed0 --- /dev/null +++ b/src/components/notify-container/index.js @@ -0,0 +1,3 @@ +import NotifyContainer from './NotifyContainer'; + +export default NotifyContainer; diff --git a/src/components/notify-message/NotifyMessage.css b/src/components/notify-message/NotifyMessage.css new file mode 100644 index 0000000..0546d6b --- /dev/null +++ b/src/components/notify-message/NotifyMessage.css @@ -0,0 +1,3 @@ +.Notify__element { + min-width: 240px; +} diff --git a/src/components/notify-message/NotifyMessage.js b/src/components/notify-message/NotifyMessage.js new file mode 100644 index 0000000..86d2c3f --- /dev/null +++ b/src/components/notify-message/NotifyMessage.js @@ -0,0 +1,39 @@ +import Component from '../component'; +import notifyContainer from '../notify-container'; +import './NotifyMessage.css'; + +class NotifyMessage extends Component { + constructor ({ + title, + message, + icon, + autohide, + } = {}) { + super('#notify-message', notifyContainer.mainNode); + + this.title = this.mainNode.querySelector('.Notify__title'); + this.message = this.mainNode.querySelector('.Notify__message'); + + this.iconImage = this.mainNode.querySelector('.Notify__icon'); + this.closeButton = this.mainNode.querySelector('.Notify__closeButton'); + + this.title.textContent = title; + this.message.textContent = message; + + if (icon) { + this.iconImage.src = icon; + } else { + this.iconImage.remove(); + } + + if (autohide) { + this.closeButton.remove(); + } else { + this.addEventListener(this.closeButton, 'click', () => { + this.mainNode.remove(); + }); + } + } +} + +export default NotifyMessage; diff --git a/src/components/notify-message/index.js b/src/components/notify-message/index.js new file mode 100644 index 0000000..93978ce --- /dev/null +++ b/src/components/notify-message/index.js @@ -0,0 +1,3 @@ +import NotifyMessage from './NotifyMessage'; + +export default NotifyMessage; diff --git a/src/img/notify_icon_info.svg b/src/img/notify_icon_info.svg new file mode 100644 index 0000000..f7b10d2 --- /dev/null +++ b/src/img/notify_icon_info.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/img/notify_icon_success.svg b/src/img/notify_icon_success.svg new file mode 100644 index 0000000..4e0bfad --- /dev/null +++ b/src/img/notify_icon_success.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/src/img/notify_icon_warn.svg b/src/img/notify_icon_warn.svg new file mode 100644 index 0000000..517c138 --- /dev/null +++ b/src/img/notify_icon_warn.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/services/EmitService.js b/src/services/EmitService.js index 011a2b6..526a0e1 100644 --- a/src/services/EmitService.js +++ b/src/services/EmitService.js @@ -1,5 +1,6 @@ /** * Класс для создвания объектов с генерацией событий + * @class EmitService */ class EmitService { /** diff --git a/src/services/NotifyService.js b/src/services/NotifyService.js new file mode 100644 index 0000000..f7f55f9 --- /dev/null +++ b/src/services/NotifyService.js @@ -0,0 +1,94 @@ +import * as bootstrap from 'bootstrap'; +import NotifyMessage from '../components/notify-message'; +import InfoIcon from '../img/notify_icon_info.svg'; +import WarnIcon from '../img/notify_icon_warn.svg'; +import SuccessIcon from '../img/notify_icon_success.svg'; + +/** + * @interface NotifyConfig + * @type {Object} + * @property {string} title - если надо установить свой заголовок + * @property {boolean} notHide - установить true, чтобы сообщение не закрывалось автоматически + * @property {number} delay - стандартно 3000 мс, можно установить свое значение + */ + +/** + * Класс для работы с уведомлениями + * @class NotifyService + */ +class NotifyService { + /** + * Общий метод для отображения уведомлений + * @private + */ + _show = ({icon, title, message, autohide = false, delay = 3000}) => { + const messageElement = new NotifyMessage({ + title, + message, + icon, + autohide, + }); + const toast = new bootstrap.Toast(messageElement.mainNode, { + autohide, + delay, + }); + if (autohide) { + setTimeout(() => { + messageElement.mainNode.remove(); + }, delay + 500); + } + toast.show(); + } + + /** + * Сообщение со значкем Warning и заголовком "Внимание!", использовать для ошибок и предупреждений + * @param {string} message - сообщение уведомления + * @param {NotifyConfig} config - дополнительные настройки + */ + warn = (message, config = {}) => { + const {notHide, delay, title} = config; + this._show({ + icon: WarnIcon, + title: title || 'Внимание!', + message, + autohide: !notHide, + delay, + }); + } + + /** + * Сообщение со значкем Info и заголовком "Сообщение", использовать для информационных сообщений + * @param {string} message - сообщение уведомления + * @param {NotifyConfig} config - дополнительные настройки + */ + info = (message, config = {}) => { + const {notHide, delay, title} = config; + this._show({ + icon: InfoIcon, + title: title || 'Сообщение', + message, + autohide: !notHide, + delay, + }); + } + + /** + * Сообщение со значкем Success и заголовком "Выполнено!", использовать для сообщений об успешном действии + * @param {string} message - сообщение уведомления + * @param {NotifyConfig} config - дополнительные настройки + */ + success = (message, config = {}) => { + const {notHide, delay, title} = config; + this._show({ + icon: SuccessIcon, + title: title || 'Выполнено!', + message, + autohide: !notHide, + delay, + }); + } +} + +const notify = new NotifyService(); + +export default notify;