diff --git a/dist/public/css/media.css b/dist/public/css/media.css index dab0ed6..12349b7 100644 --- a/dist/public/css/media.css +++ b/dist/public/css/media.css @@ -97,6 +97,9 @@ nav .nav-wrapper .brand-logo { font-size: 17px; } + #notification { + right: 10px; + } } @media (max-width: 380px) { diff --git a/dist/public/css/style.css b/dist/public/css/style.css index 42f99e8..ba94fd6 100644 --- a/dist/public/css/style.css +++ b/dist/public/css/style.css @@ -45,6 +45,13 @@ hr { /* Custom Styles */ +#notification { + width: 300px; + position: fixed; + right: 30px; + z-index: 1; +} + .block-title { display: flex; align-items: center; diff --git a/dist/public/js/bundle.js b/dist/public/js/bundle.js index 9da11c5..c3b8ef0 100644 --- a/dist/public/js/bundle.js +++ b/dist/public/js/bundle.js @@ -3942,7 +3942,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) * /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ItemsComponent\", function() { return ItemsComponent; });\n/* harmony import */ var _core_component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core/component */ \"./src/core/component.js\");\n/* harmony import */ var _services_api_service__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../services/api.service */ \"./src/services/api.service.js\");\n/* harmony import */ var _other_counter__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../other/counter */ \"./src/other/counter.js\");\n/* harmony import */ var _templates_items_template__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../templates/items.template */ \"./src/templates/items.template.js\");\nfunction _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\n\n\n\n\nvar ItemsComponent =\n/*#__PURE__*/\nfunction (_Component) {\n _inherits(ItemsComponent, _Component);\n\n function ItemsComponent(id, _ref) {\n var _this;\n\n var loader = _ref.loader;\n\n _classCallCheck(this, ItemsComponent);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(ItemsComponent).call(this, id));\n _this.loader = loader;\n _this.$el ? _this.roster = _this.$el.querySelector('#roster') : false;\n\n if (localStorage.getItem('cart')) {\n _this.cart = JSON.parse(localStorage.getItem('cart'));\n } else {\n _this.cart = [];\n }\n\n return _this;\n }\n\n _createClass(ItemsComponent, [{\n key: \"init\",\n value: function init() {\n var fData, categories, html;\n return regeneratorRuntime.async(function init$(_context) {\n while (1) {\n switch (_context.prev = _context.next) {\n case 0:\n if (!this.$el) {\n _context.next = 14;\n break;\n }\n\n localStorage.setItem('sortByAll', 'true'); // установка значения для компонента Filter\n\n this.$el.addEventListener('click', addItem.bind(this));\n\n if (localStorage.getItem('category')) {\n _context.next = 14;\n break;\n }\n\n _context.next = 6;\n return regeneratorRuntime.awrap(_services_api_service__WEBPACK_IMPORTED_MODULE_1__[\"apiService\"].getItems());\n\n case 6:\n fData = _context.sent;\n _context.next = 9;\n return regeneratorRuntime.awrap(_services_api_service__WEBPACK_IMPORTED_MODULE_1__[\"apiService\"].getCategories());\n\n case 9:\n categories = _context.sent;\n html = Object(_templates_items_template__WEBPACK_IMPORTED_MODULE_3__[\"renderItems\"])(categories, fData);\n this.insertItems(html);\n this.btnColor();\n this.loader.hide();\n\n case 14:\n case \"end\":\n return _context.stop();\n }\n }\n }, null, this);\n }\n }, {\n key: \"onHide\",\n value: function onHide() {\n this.$el.querySelector('#roster').innerHTML = '';\n this.loader.hide();\n }\n }, {\n key: \"onShow\",\n value: function onShow() {\n this.$el.querySelector('#roster').innerHTML = '';\n this.loader.show();\n }\n }, {\n key: \"btnColor\",\n value: function btnColor() {\n var _this2 = this;\n\n if (localStorage.getItem('cart')) {\n // Окраска кнопок айтемов которые находятся в корзине\n var obj = JSON.parse(localStorage.getItem('cart'));\n obj.forEach(function (item) {\n if (_this2.$el.querySelector(\"#rosterButtons[data-id=\\\"\".concat(item.id, \"\\\"] #addItem\"))) {\n _this2.$el.querySelector(\"#rosterButtons[data-id=\\\"\".concat(item.id, \"\\\"] #addItem\")).classList.add('orange');\n\n _this2.$el.querySelector(\"#rosterButtons[data-id=\\\"\".concat(item.id, \"\\\"] #addItem i\")).innerHTML = 'close';\n }\n });\n }\n }\n }, {\n key: \"insertItems\",\n value: function insertItems(html) {\n this.roster.insertAdjacentHTML('afterbegin', html);\n this.btnColor();\n }\n }]);\n\n return ItemsComponent;\n}(_core_component__WEBPACK_IMPORTED_MODULE_0__[\"Component\"]);\n\nfunction addItem(e) {\n if (e.target.localName === 'button' && e.target.id === 'addItem') {\n var target = e.target;\n var item = {\n id: e.target.parentNode.dataset.id,\n title: e.target.parentNode.dataset.title,\n count: e.target.parentNode.dataset.count,\n price: e.target.parentNode.dataset.price\n };\n renderObj(item, this, target);\n } else if (e.target.localName === 'i') {\n var _target = e.target.parentNode;\n var _item = {\n id: e.target.parentNode.parentNode.dataset.id,\n title: e.target.parentNode.parentNode.dataset.title,\n count: e.target.parentNode.parentNode.dataset.count,\n price: e.target.parentNode.parentNode.dataset.price\n };\n renderObj(_item, this, _target);\n }\n}\n\nfunction renderObj(obj, context, target) {\n if (context.cart.length > 0) {\n var insterted = false;\n var index; // Проверка на существующий айтем в корзине\n\n context.cart.forEach(function (item, i) {\n if (item.id === obj.id) {\n insterted = true;\n index = i;\n }\n });\n\n if (insterted === false) {\n context.cart.push(obj);\n localStorage.setItem('cart', JSON.stringify(context.cart));\n target.classList.add('orange');\n target.querySelector('i').innerHTML = 'close';\n Object(_other_counter__WEBPACK_IMPORTED_MODULE_2__[\"insertCount\"])('counter', context.cart);\n } else {\n context.cart.splice(index, 1);\n localStorage.setItem('cart', JSON.stringify(context.cart));\n target.classList.remove('orange');\n target.querySelector('i').innerHTML = 'shopping_cart';\n Object(_other_counter__WEBPACK_IMPORTED_MODULE_2__[\"insertCount\"])('counter', context.cart);\n }\n } else {\n context.cart.push(obj);\n localStorage.setItem('cart', JSON.stringify(context.cart));\n target.classList.add('orange');\n target.querySelector('i').innerHTML = 'close';\n Object(_other_counter__WEBPACK_IMPORTED_MODULE_2__[\"insertCount\"])('counter', context.cart);\n }\n}\n\n;\n\n//# sourceURL=webpack:///./src/components/items.component.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ItemsComponent\", function() { return ItemsComponent; });\n/* harmony import */ var _core_component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core/component */ \"./src/core/component.js\");\n/* harmony import */ var _services_api_service__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../services/api.service */ \"./src/services/api.service.js\");\n/* harmony import */ var _other_counter__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../other/counter */ \"./src/other/counter.js\");\n/* harmony import */ var _templates_items_template__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../templates/items.template */ \"./src/templates/items.template.js\");\nfunction _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\n\n\n\n\nvar ItemsComponent =\n/*#__PURE__*/\nfunction (_Component) {\n _inherits(ItemsComponent, _Component);\n\n function ItemsComponent(id, _ref, _ref2) {\n var _this;\n\n var loader = _ref.loader;\n var notification = _ref2.notification;\n\n _classCallCheck(this, ItemsComponent);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(ItemsComponent).call(this, id));\n _this.loader = loader;\n _this.notification = notification;\n _this.$el ? _this.roster = _this.$el.querySelector('#roster') : false;\n\n if (localStorage.getItem('cart')) {\n _this.cart = JSON.parse(localStorage.getItem('cart'));\n } else {\n _this.cart = [];\n }\n\n return _this;\n }\n\n _createClass(ItemsComponent, [{\n key: \"init\",\n value: function init() {\n var fData, categories, html;\n return regeneratorRuntime.async(function init$(_context) {\n while (1) {\n switch (_context.prev = _context.next) {\n case 0:\n if (!this.$el) {\n _context.next = 14;\n break;\n }\n\n localStorage.setItem('sortByAll', 'true'); // установка значения для компонента Filter\n\n this.$el.addEventListener('click', addItem.bind(this));\n\n if (localStorage.getItem('category')) {\n _context.next = 14;\n break;\n }\n\n _context.next = 6;\n return regeneratorRuntime.awrap(_services_api_service__WEBPACK_IMPORTED_MODULE_1__[\"apiService\"].getItems());\n\n case 6:\n fData = _context.sent;\n _context.next = 9;\n return regeneratorRuntime.awrap(_services_api_service__WEBPACK_IMPORTED_MODULE_1__[\"apiService\"].getCategories());\n\n case 9:\n categories = _context.sent;\n html = Object(_templates_items_template__WEBPACK_IMPORTED_MODULE_3__[\"renderItems\"])(categories, fData);\n this.insertItems(html);\n this.btnColor();\n this.loader.hide();\n\n case 14:\n case \"end\":\n return _context.stop();\n }\n }\n }, null, this);\n }\n }, {\n key: \"onHide\",\n value: function onHide() {\n this.$el.querySelector('#roster').innerHTML = '';\n this.loader.hide();\n }\n }, {\n key: \"onShow\",\n value: function onShow() {\n this.$el.querySelector('#roster').innerHTML = '';\n this.loader.show();\n }\n }, {\n key: \"btnColor\",\n value: function btnColor() {\n var _this2 = this;\n\n if (localStorage.getItem('cart')) {\n // Окраска кнопок айтемов которые находятся в корзине\n var obj = JSON.parse(localStorage.getItem('cart'));\n obj.forEach(function (item) {\n if (_this2.$el.querySelector(\"#rosterButtons[data-id=\\\"\".concat(item.id, \"\\\"] #addItem\"))) {\n _this2.$el.querySelector(\"#rosterButtons[data-id=\\\"\".concat(item.id, \"\\\"] #addItem\")).classList.add('orange');\n\n _this2.$el.querySelector(\"#rosterButtons[data-id=\\\"\".concat(item.id, \"\\\"] #addItem i\")).innerHTML = 'close';\n }\n });\n }\n }\n }, {\n key: \"insertItems\",\n value: function insertItems(html) {\n this.roster.insertAdjacentHTML('afterbegin', html);\n this.btnColor();\n }\n }]);\n\n return ItemsComponent;\n}(_core_component__WEBPACK_IMPORTED_MODULE_0__[\"Component\"]);\n\nfunction addItem(e) {\n if (e.target.localName === 'button' && e.target.id === 'addItem') {\n var target = e.target;\n var item = {\n id: e.target.parentNode.dataset.id,\n title: e.target.parentNode.dataset.title,\n count: e.target.parentNode.dataset.count,\n price: e.target.parentNode.dataset.price\n };\n renderObj(item, this, target);\n } else if (e.target.localName === 'i') {\n var _target = e.target.parentNode;\n var _item = {\n id: e.target.parentNode.parentNode.dataset.id,\n title: e.target.parentNode.parentNode.dataset.title,\n count: e.target.parentNode.parentNode.dataset.count,\n price: e.target.parentNode.parentNode.dataset.price\n };\n renderObj(_item, this, _target);\n }\n}\n\nfunction renderObj(obj, context, target) {\n if (context.cart.length > 0) {\n var insterted = false;\n var index; // Проверка на существующий айтем в корзине\n\n context.cart.forEach(function (item, i) {\n if (item.id === obj.id) {\n insterted = true;\n index = i;\n }\n });\n\n if (insterted === false) {\n context.cart.push(obj);\n localStorage.setItem('cart', JSON.stringify(context.cart));\n target.classList.add('orange');\n target.querySelector('i').innerHTML = 'close';\n Object(_other_counter__WEBPACK_IMPORTED_MODULE_2__[\"insertCount\"])('counter', context.cart);\n context.notification.notificate('Товар был успешно добавлен в корзину.', '#26A69A');\n } else {\n context.cart.splice(index, 1);\n localStorage.setItem('cart', JSON.stringify(context.cart));\n target.classList.remove('orange');\n target.querySelector('i').innerHTML = 'shopping_cart';\n Object(_other_counter__WEBPACK_IMPORTED_MODULE_2__[\"insertCount\"])('counter', context.cart);\n }\n } else {\n context.cart.push(obj);\n localStorage.setItem('cart', JSON.stringify(context.cart));\n target.classList.add('orange');\n target.querySelector('i').innerHTML = 'close';\n Object(_other_counter__WEBPACK_IMPORTED_MODULE_2__[\"insertCount\"])('counter', context.cart);\n context.notification.notificate('Товар был успешно добавлен в корзину.', '#26A69A');\n }\n}\n\n;\n\n//# sourceURL=webpack:///./src/components/items.component.js?"); /***/ }), @@ -3958,6 +3958,18 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) * /***/ }), +/***/ "./src/components/notification.component.js": +/*!**************************************************!*\ + !*** ./src/components/notification.component.js ***! + \**************************************************/ +/*! exports provided: NotificationComponent */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"NotificationComponent\", function() { return NotificationComponent; });\n/* harmony import */ var _core_component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core/component */ \"./src/core/component.js\");\nfunction _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\n\nvar NotificationComponent =\n/*#__PURE__*/\nfunction (_Component) {\n _inherits(NotificationComponent, _Component);\n\n function NotificationComponent(id) {\n _classCallCheck(this, NotificationComponent);\n\n return _possibleConstructorReturn(this, _getPrototypeOf(NotificationComponent).call(this, id));\n }\n\n _createClass(NotificationComponent, [{\n key: \"notificate\",\n value: function notificate(text, color) {\n var card = document.createElement('div');\n card.classList.add('card-panel');\n card.style.backgroundColor = color;\n card.innerHTML = \"\".concat(text, \"\");\n this.$el.innerHTML += card.outerHTML;\n this.removeNotificate();\n }\n }, {\n key: \"removeNotificate\",\n value: function removeNotificate() {\n var _this = this;\n\n // Полифилл для IE ^9\n (function () {\n var arr = [window.Element, window.CharacterData, window.DocumentType];\n var args = [];\n arr.forEach(function (item) {\n if (item) {\n args.push(item.prototype);\n }\n });\n\n (function (arr) {\n arr.forEach(function (item) {\n if (item.hasOwnProperty('remove')) {\n return;\n }\n\n Object.defineProperty(item, 'remove', {\n configurable: true,\n enumerable: true,\n writable: true,\n value: function remove() {\n this.parentNode.removeChild(this);\n }\n });\n });\n })(args);\n })();\n\n setTimeout(function () {\n _this.$el.querySelector('.card-panel').remove();\n }, 2000);\n }\n }]);\n\n return NotificationComponent;\n}(_core_component__WEBPACK_IMPORTED_MODULE_0__[\"Component\"]);\n\n//# sourceURL=webpack:///./src/components/notification.component.js?"); + +/***/ }), + /***/ "./src/core/component.js": /*!*******************************!*\ !*** ./src/core/component.js ***! @@ -3990,7 +4002,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) * /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _components_header_component_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./components/header.component.js */ \"./src/components/header.component.js\");\n/* harmony import */ var _components_information_component_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/information.component.js */ \"./src/components/information.component.js\");\n/* harmony import */ var _components_loader_component_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/loader.component.js */ \"./src/components/loader.component.js\");\n/* harmony import */ var _components_items_component_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/items.component.js */ \"./src/components/items.component.js\");\n/* harmony import */ var _components_category_component_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/category.component.js */ \"./src/components/category.component.js\");\n/* harmony import */ var _components_breadcrumb_component_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/breadcrumb.component.js */ \"./src/components/breadcrumb.component.js\");\n/* harmony import */ var _components_filter_component_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/filter.component.js */ \"./src/components/filter.component.js\");\n/* harmony import */ var _modals_cart_modal_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./modals/cart.modal.js */ \"./src/modals/cart.modal.js\");\n/* harmony import */ var _modals_pay_modal_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./modals/pay.modal.js */ \"./src/modals/pay.modal.js\");\n\n\n\n\n\n\n\n\n\nvar header = new _components_header_component_js__WEBPACK_IMPORTED_MODULE_0__[\"HeaderComponent\"]('header');\nvar loader = new _components_loader_component_js__WEBPACK_IMPORTED_MODULE_2__[\"LoaderComponent\"]('loader');\nvar information = new _components_information_component_js__WEBPACK_IMPORTED_MODULE_1__[\"InformationComponent\"]('information');\nvar items = new _components_items_component_js__WEBPACK_IMPORTED_MODULE_3__[\"ItemsComponent\"]('items', {\n loader: loader\n});\nvar filter = new _components_filter_component_js__WEBPACK_IMPORTED_MODULE_6__[\"FilterComponent\"]('filter', {\n items: items\n});\nvar category = new _components_category_component_js__WEBPACK_IMPORTED_MODULE_4__[\"CategoryComponent\"]('category', {\n items: items\n}, {\n filter: filter\n});\nvar breadcumb = new _components_breadcrumb_component_js__WEBPACK_IMPORTED_MODULE_5__[\"BreadcrumbComponent\"]('breadcrumb');\nvar cart = new _modals_cart_modal_js__WEBPACK_IMPORTED_MODULE_7__[\"CartModal\"]('cart', 'cartOpen', 'cartClose', {\n items: items\n});\nvar pay = new _modals_pay_modal_js__WEBPACK_IMPORTED_MODULE_8__[\"PayModal\"]('pay', 'pay-js', 'payClose');\n\n//# sourceURL=webpack:///./src/index.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _components_header_component_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./components/header.component.js */ \"./src/components/header.component.js\");\n/* harmony import */ var _components_information_component_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/information.component.js */ \"./src/components/information.component.js\");\n/* harmony import */ var _components_loader_component_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/loader.component.js */ \"./src/components/loader.component.js\");\n/* harmony import */ var _components_items_component_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/items.component.js */ \"./src/components/items.component.js\");\n/* harmony import */ var _components_category_component_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/category.component.js */ \"./src/components/category.component.js\");\n/* harmony import */ var _components_breadcrumb_component_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/breadcrumb.component.js */ \"./src/components/breadcrumb.component.js\");\n/* harmony import */ var _components_filter_component_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/filter.component.js */ \"./src/components/filter.component.js\");\n/* harmony import */ var _modals_cart_modal_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./modals/cart.modal.js */ \"./src/modals/cart.modal.js\");\n/* harmony import */ var _modals_pay_modal_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./modals/pay.modal.js */ \"./src/modals/pay.modal.js\");\n/* harmony import */ var _components_notification_component_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./components/notification.component.js */ \"./src/components/notification.component.js\");\n\n\n\n\n\n\n\n\n\n\nvar header = new _components_header_component_js__WEBPACK_IMPORTED_MODULE_0__[\"HeaderComponent\"]('header');\nvar loader = new _components_loader_component_js__WEBPACK_IMPORTED_MODULE_2__[\"LoaderComponent\"]('loader');\nvar information = new _components_information_component_js__WEBPACK_IMPORTED_MODULE_1__[\"InformationComponent\"]('information');\nvar notification = new _components_notification_component_js__WEBPACK_IMPORTED_MODULE_9__[\"NotificationComponent\"]('notification');\nvar items = new _components_items_component_js__WEBPACK_IMPORTED_MODULE_3__[\"ItemsComponent\"]('items', {\n loader: loader\n}, {\n notification: notification\n});\nvar filter = new _components_filter_component_js__WEBPACK_IMPORTED_MODULE_6__[\"FilterComponent\"]('filter', {\n items: items\n});\nvar category = new _components_category_component_js__WEBPACK_IMPORTED_MODULE_4__[\"CategoryComponent\"]('category', {\n items: items\n}, {\n filter: filter\n});\nvar breadcumb = new _components_breadcrumb_component_js__WEBPACK_IMPORTED_MODULE_5__[\"BreadcrumbComponent\"]('breadcrumb');\nvar cart = new _modals_cart_modal_js__WEBPACK_IMPORTED_MODULE_7__[\"CartModal\"]('cart', 'cartOpen', 'cartClose', {\n items: items\n});\nvar pay = new _modals_pay_modal_js__WEBPACK_IMPORTED_MODULE_8__[\"PayModal\"]('pay', 'pay-js', 'payClose');\n\n//# sourceURL=webpack:///./src/index.js?"); /***/ }), diff --git a/dist/views/index.pug b/dist/views/index.pug index a1beaa2..0c7fca0 100644 --- a/dist/views/index.pug +++ b/dist/views/index.pug @@ -6,6 +6,7 @@ include ./assets/templates/header.pug main.main-section include ./assets/templates/modals/cart.pug include ./assets/templates/modals/pay.pug + #notification .container .row // Information Block diff --git a/src/components/items.component.js b/src/components/items.component.js index b4dc9a8..8d3e51b 100644 --- a/src/components/items.component.js +++ b/src/components/items.component.js @@ -4,9 +4,10 @@ import { insertCount } from "../other/counter"; import { renderItems } from "../templates/items.template"; export class ItemsComponent extends Component { - constructor(id, {loader}) { + constructor(id, {loader}, {notification}) { super(id); this.loader = loader; + this.notification = notification; this.$el ? this.roster = this.$el.querySelector('#roster') : false; if (localStorage.getItem('cart')) { this.cart = JSON.parse(localStorage.getItem('cart')); @@ -99,19 +100,21 @@ function renderObj(obj, context, target) { localStorage.setItem('cart', JSON.stringify(context.cart)); target.classList.add('orange'); target.querySelector('i').innerHTML = 'close'; - insertCount('counter', context.cart) + insertCount('counter', context.cart); + context.notification.notificate('Товар был успешно добавлен в корзину.', '#26A69A'); } else { context.cart.splice(index, 1); localStorage.setItem('cart', JSON.stringify(context.cart)); target.classList.remove('orange'); target.querySelector('i').innerHTML = 'shopping_cart'; - insertCount('counter', context.cart) + insertCount('counter', context.cart); } } else { context.cart.push(obj); localStorage.setItem('cart', JSON.stringify(context.cart)); target.classList.add('orange'); target.querySelector('i').innerHTML = 'close'; - insertCount('counter', context.cart) + insertCount('counter', context.cart); + context.notification.notificate('Товар был успешно добавлен в корзину.', '#26A69A'); } }; \ No newline at end of file diff --git a/src/components/notification.component.js b/src/components/notification.component.js new file mode 100644 index 0000000..7ee9746 --- /dev/null +++ b/src/components/notification.component.js @@ -0,0 +1,50 @@ +import { Component } from "../core/component"; + +export class NotificationComponent extends Component { + constructor(id) { + super(id); + } + + notificate(text, color) { + const card = document.createElement('div'); + card.classList.add('card-panel'); + card.style.backgroundColor = color; + card.innerHTML = `${text}`; + this.$el.innerHTML += card.outerHTML; + this.removeNotificate(); + } + + removeNotificate() { + // Полифилл для IE ^9 + (function() { + var arr = [window.Element, window.CharacterData, window.DocumentType]; + var args = []; + + arr.forEach(function (item) { + if (item) { + args.push(item.prototype); + } + }); + + (function (arr) { + arr.forEach(function (item) { + if (item.hasOwnProperty('remove')) { + return; + } + Object.defineProperty(item, 'remove', { + configurable: true, + enumerable: true, + writable: true, + value: function remove() { + this.parentNode.removeChild(this); + } + }); + }); + })(args); + })(); + + setTimeout(() => { + this.$el.querySelector('.card-panel').remove(); + }, 2000) + } +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index fde528f..4525baf 100644 --- a/src/index.js +++ b/src/index.js @@ -7,12 +7,14 @@ import { BreadcrumbComponent } from "./components/breadcrumb.component.js"; import { FilterComponent } from "./components/filter.component.js"; import { CartModal } from "./modals/cart.modal.js"; import { PayModal } from "./modals/pay.modal.js"; +import { NotificationComponent } from "./components/notification.component.js"; const header = new HeaderComponent('header'); const loader = new LoaderComponent('loader'); const information = new InformationComponent('information'); -const items = new ItemsComponent('items', {loader}); +const notification = new NotificationComponent('notification'); +const items = new ItemsComponent('items', {loader}, {notification}); const filter = new FilterComponent('filter', {items}); const category = new CategoryComponent('category', {items}, {filter}); const breadcumb = new BreadcrumbComponent('breadcrumb');