diff --git a/dist/public/js/bundle.js b/dist/public/js/bundle.js index 6b6bd78..d7e364a 100644 --- a/dist/public/js/bundle.js +++ b/dist/public/js/bundle.js @@ -3918,7 +3918,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__, \"HeaderComponent\", function() { return HeaderComponent; });\n/* harmony import */ var _core_component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core/component */ \"./src/js/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 HeaderComponent =\n/*#__PURE__*/\nfunction (_Component) {\n _inherits(HeaderComponent, _Component);\n\n function HeaderComponent(id) {\n _classCallCheck(this, HeaderComponent);\n\n return _possibleConstructorReturn(this, _getPrototypeOf(HeaderComponent).call(this, id));\n }\n\n _createClass(HeaderComponent, [{\n key: \"init\",\n value: function init() {\n var currentPage = this.$el.querySelector('#desktop-nav');\n var pages = Array.from(this.$el.querySelectorAll('#page'));\n pages.forEach(function (li) {\n return li.dataset.page === currentPage.dataset.current ? li.classList.add('active') : false;\n });\n }\n }]);\n\n return HeaderComponent;\n}(_core_component__WEBPACK_IMPORTED_MODULE_0__[\"Component\"]);\n\n//# sourceURL=webpack:///./src/js/components/header.component.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"HeaderComponent\", function() { return HeaderComponent; });\n/* harmony import */ var _core_component__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../core/component */ \"./src/js/core/component.js\");\n/* harmony import */ var _other_counter__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../other/counter */ \"./src/js/other/counter.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\nvar HeaderComponent =\n/*#__PURE__*/\nfunction (_Component) {\n _inherits(HeaderComponent, _Component);\n\n function HeaderComponent(id) {\n _classCallCheck(this, HeaderComponent);\n\n return _possibleConstructorReturn(this, _getPrototypeOf(HeaderComponent).call(this, id));\n }\n\n _createClass(HeaderComponent, [{\n key: \"init\",\n value: function init() {\n var currentPage = this.$el.querySelector('#desktop-nav');\n var pages = Array.from(this.$el.querySelectorAll('#page'));\n pages.forEach(function (li) {\n return li.dataset.page === currentPage.dataset.current ? li.classList.add('active') : false;\n });\n Object(_other_counter__WEBPACK_IMPORTED_MODULE_1__[\"insertCount\"])('counter', JSON.parse(localStorage.getItem('cart'))); // <- ф-я счетика товаров\n }\n }]);\n\n return HeaderComponent;\n}(_core_component__WEBPACK_IMPORTED_MODULE_0__[\"Component\"]);\n\n//# sourceURL=webpack:///./src/js/components/header.component.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/js/core/component.js\");\n/* harmony import */ var _services_api_service__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../services/api.service */ \"./src/js/services/api.service.js\");\n/* harmony import */ var _templates_items_template__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../templates/items.template */ \"./src/js/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\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 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 = 9;\n break;\n }\n\n localStorage.setItem('sortByAll', 'true'); // установка значения для компонента Filter\n\n if (localStorage.getItem('category')) {\n _context.next = 9;\n break;\n }\n\n _context.next = 5;\n return regeneratorRuntime.awrap(_services_api_service__WEBPACK_IMPORTED_MODULE_1__[\"apiService\"].getItems());\n\n case 5:\n fData = _context.sent;\n categories = Object.keys(fData);\n\n if (categories.length) {\n html = Object(_templates_items_template__WEBPACK_IMPORTED_MODULE_2__[\"renderItems\"])(categories, fData);\n this.insertItems(html);\n } else {\n this.roster.innerHTML = 'Товаров на сайте пока что нету';\n }\n\n this.loader.hide();\n\n case 9:\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: \"insertItems\",\n value: function insertItems(html) {\n this.roster.insertAdjacentHTML('afterbegin', html);\n }\n }]);\n\n return ItemsComponent;\n}(_core_component__WEBPACK_IMPORTED_MODULE_0__[\"Component\"]);\n\n//# sourceURL=webpack:///./src/js/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/js/core/component.js\");\n/* harmony import */ var _services_api_service__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../services/api.service */ \"./src/js/services/api.service.js\");\n/* harmony import */ var _templates_items_template__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../templates/items.template */ \"./src/js/templates/items.template.js\");\n/* harmony import */ var _other_counter__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../other/counter */ \"./src/js/other/counter.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 = 10;\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 = 10;\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 categories = Object.keys(fData);\n\n if (categories.length) {\n html = Object(_templates_items_template__WEBPACK_IMPORTED_MODULE_2__[\"renderItems\"])(categories, fData);\n this.insertItems(html);\n this.btnColor();\n } else {\n this.roster.innerHTML = 'Товаров на сайте пока что нету';\n }\n\n this.loader.hide();\n\n case 10:\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(\"#addItem[data-id=\\\"\".concat(item.id, \"\\\"]\"))) {\n _this2.$el.querySelector(\"#addItem[data-id=\\\"\".concat(item.id, \"\\\"]\")).classList.add('orange');\n\n _this2.$el.querySelector(\"#addItem[data-id=\\\"\".concat(item.id, \"\\\"] 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 renderObj(e.target.dataset, this, target);\n } else if (e.target.localName === 'i') {\n var _target = e.target.parentNode;\n renderObj(e.target.parentNode.dataset, this, _target);\n }\n\n function 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_3__[\"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_3__[\"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_3__[\"insertCount\"])('counter', context.cart);\n }\n }\n\n ;\n}\n\n//# sourceURL=webpack:///./src/js/components/items.component.js?"); /***/ }), @@ -4006,6 +4006,18 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) * /***/ }), +/***/ "./src/js/other/counter.js": +/*!*********************************!*\ + !*** ./src/js/other/counter.js ***! + \*********************************/ +/*! exports provided: insertCount */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"insertCount\", function() { return insertCount; });\nfunction insertCount(id, array) {\n var counter = document.getElementById(id);\n counter.innerHTML = array.length;\n}\n\n//# sourceURL=webpack:///./src/js/other/counter.js?"); + +/***/ }), + /***/ "./src/js/services/api.service.js": /*!****************************************!*\ !*** ./src/js/services/api.service.js ***! @@ -4026,7 +4038,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__, \"renderItems\", function() { return renderItems; });\nfunction renderItems(categories, items) {\n var html = '';\n categories.forEach(function (category) {\n html += \"
\\n

\".concat(category, \"

\\n
\");\n items[category].forEach(function (item) {\n if (item) {\n html += \"\\n
\\n
\\n
\\n \\\"#\\\"\\n
\\n
\\n \").concat(item.title, \"\\n
\\n
\\n
\\n
\\n \").concat(item.date, \"\\n
\\n
\\n \").concat(item.count, \" \\u0448\\u0442.\\n
\\n
\\n \\u0426\\u0435\\u043D\\u0430 \\u0437\\u0430 1 \\u0448\\u0442.\\n
\\n
\\n \").concat(item.price, \"\\u20BD\\n
\\n
\\n \\n \\n
\\n
\\n
\\n \");\n } else {\n html += \"\\n
\\n
\\n
\\n \\u0412 \\u044D\\u0442\\u043E\\u0439 \\u043A\\u0430\\u0442\\u0435\\u0433\\u043E\\u0440\\u0438\\u0438 \\u043F\\u043E\\u043A\\u0430 \\u0447\\u0442\\u043E \\u043D\\u0435\\u0442\\u0443 \\u0442\\u043E\\u0432\\u0430\\u0440\\u043E\\u0432\\n
\\n
\\n
\\n \";\n }\n });\n });\n return html;\n}\n\n//# sourceURL=webpack:///./src/js/templates/items.template.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"renderItems\", function() { return renderItems; });\nfunction renderItems(categories, items) {\n var html = '';\n categories.forEach(function (category) {\n html += \"
\\n

\".concat(category, \"

\\n
\");\n items[category].forEach(function (item) {\n if (item) {\n html += \"\\n
\\n
\\n
\\n \\\"#\\\"\\n
\\n
\\n \").concat(item.title, \"\\n
\\n
\\n
\\n
\\n \").concat(item.date, \"\\n
\\n
\\n \").concat(item.count, \" \\u0448\\u0442.\\n
\\n
\\n \\u0426\\u0435\\u043D\\u0430 \\u0437\\u0430 1 \\u0448\\u0442.\\n
\\n
\\n \").concat(item.price, \"\\u20BD\\n
\\n
\\n \\n \\n
\\n
\\n
\\n \");\n } else {\n html += \"\\n
\\n
\\n
\\n \\u0412 \\u044D\\u0442\\u043E\\u0439 \\u043A\\u0430\\u0442\\u0435\\u0433\\u043E\\u0440\\u0438\\u0438 \\u043F\\u043E\\u043A\\u0430 \\u0447\\u0442\\u043E \\u043D\\u0435\\u0442\\u0443 \\u0442\\u043E\\u0432\\u0430\\u0440\\u043E\\u0432\\n
\\n
\\n
\\n \";\n }\n });\n });\n return html;\n}\n\n//# sourceURL=webpack:///./src/js/templates/items.template.js?"); /***/ }), @@ -4038,7 +4050,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__, \"renderItemsOne\", function() { return renderItemsOne; });\nfunction renderItemsOne(category, items) {\n var html = '';\n html += \"
\\n

\".concat(category, \"

\\n
\");\n items.forEach(function (item) {\n if (item) {\n html += \"\\n
\\n
\\n
\\n \\\"#\\\"\\n
\\n
\\n \").concat(item.title, \"\\n
\\n
\\n
\\n
\\n \").concat(item.date, \"\\n
\\n
\\n \").concat(item.count, \" \\u0448\\u0442.\\n
\\n
\\n \\u0426\\u0435\\u043D\\u0430 \\u0437\\u0430 1 \\u0448\\u0442.\\n
\\n
\\n \").concat(item.price, \"\\u20BD\\n
\\n
\\n \\n \\n
\\n
\\n
\\n \");\n } else {\n html += \"\\n
\\n
\\n
\\n \\u0412 \\u044D\\u0442\\u043E\\u0439 \\u043A\\u0430\\u0442\\u0435\\u0433\\u043E\\u0440\\u0438\\u0438 \\u043F\\u043E\\u043A\\u0430 \\u0447\\u0442\\u043E \\u043D\\u0435\\u0442\\u0443 \\u0442\\u043E\\u0432\\u0430\\u0440\\u043E\\u0432\\n
\\n
\\n
\";\n }\n });\n return html;\n}\n\n//# sourceURL=webpack:///./src/js/templates/itemsOne.template.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"renderItemsOne\", function() { return renderItemsOne; });\nfunction renderItemsOne(category, items) {\n var html = '';\n html += \"
\\n

\".concat(category, \"

\\n
\");\n items.forEach(function (item) {\n if (item) {\n html += \"\\n
\\n
\\n
\\n \\\"#\\\"\\n
\\n
\\n \").concat(item.title, \"\\n
\\n
\\n
\\n
\\n \").concat(item.date, \"\\n
\\n
\\n \").concat(item.count, \" \\u0448\\u0442.\\n
\\n
\\n \\u0426\\u0435\\u043D\\u0430 \\u0437\\u0430 1 \\u0448\\u0442.\\n
\\n
\\n \").concat(item.price, \"\\u20BD\\n
\\n
\\n \\n \\n
\\n
\\n
\\n \");\n } else {\n html += \"\\n
\\n
\\n
\\n \\u0412 \\u044D\\u0442\\u043E\\u0439 \\u043A\\u0430\\u0442\\u0435\\u0433\\u043E\\u0440\\u0438\\u0438 \\u043F\\u043E\\u043A\\u0430 \\u0447\\u0442\\u043E \\u043D\\u0435\\u0442\\u0443 \\u0442\\u043E\\u0432\\u0430\\u0440\\u043E\\u0432\\n
\\n
\\n
\";\n }\n });\n return html;\n}\n\n//# sourceURL=webpack:///./src/js/templates/itemsOne.template.js?"); /***/ }), diff --git a/dist/views/assets/templates/footer.pug b/dist/views/assets/templates/footer.pug index 0aa68f1..0bfeba9 100644 --- a/dist/views/assets/templates/footer.pug +++ b/dist/views/assets/templates/footer.pug @@ -2,7 +2,7 @@ footer span © 2019 Digital Store | Все права защищены. .waves-effect.waves-light.pulse.cart-btn(id="cartOpen") i.material-icons shopping_cart - span.counter 0 + span#counter.counter 0 // Maretialize JS script(src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js') // Script JS diff --git a/src/js/components/header.component.js b/src/js/components/header.component.js index 223f2c9..1d91dcf 100644 --- a/src/js/components/header.component.js +++ b/src/js/components/header.component.js @@ -1,4 +1,5 @@ import { Component } from "../core/component"; +import { insertCount } from "../other/counter"; export class HeaderComponent extends Component { constructor(id) { @@ -9,5 +10,6 @@ export class HeaderComponent extends Component { const currentPage = this.$el.querySelector('#desktop-nav'); const pages = Array.from(this.$el.querySelectorAll('#page')); pages.forEach(li => li.dataset.page === currentPage.dataset.current ? li.classList.add('active') : false); + insertCount('counter', JSON.parse(localStorage.getItem('cart'))); // <- ф-я счетика товаров } } \ No newline at end of file diff --git a/src/js/components/items.component.js b/src/js/components/items.component.js index 282c494..24ce081 100644 --- a/src/js/components/items.component.js +++ b/src/js/components/items.component.js @@ -1,17 +1,24 @@ import { Component } from "../core/component"; import { apiService } from "../services/api.service"; import { renderItems } from "../templates/items.template"; +import { insertCount } from "../other/counter"; export class ItemsComponent extends Component { constructor(id, {loader}) { super(id); this.loader = loader; this.$el ? this.roster = this.$el.querySelector('#roster') : false; + if (localStorage.getItem('cart')) { + this.cart = JSON.parse(localStorage.getItem('cart')); + } else { + this.cart = []; + } } async init() { if (this.$el) { localStorage.setItem('sortByAll', 'true'); // установка значения для компонента Filter + this.$el.addEventListener('click', addItem.bind(this)); if (!localStorage.getItem('category')) { // Получаем все товары и выводим их если нету ключа category в ls const fData = await apiService.getItems(), categories = Object.keys(fData); @@ -19,6 +26,7 @@ export class ItemsComponent extends Component { if (categories.length) { const html = renderItems(categories, fData); this.insertItems(html); + this.btnColor(); } else { this.roster.innerHTML = 'Товаров на сайте пока что нету'; } @@ -37,7 +45,67 @@ export class ItemsComponent extends Component { this.loader.show(); } + btnColor() { + if (localStorage.getItem('cart')) { + // Окраска кнопок айтемов которые находятся в корзине + const obj = JSON.parse(localStorage.getItem('cart')); + + obj.forEach(item => { + if (this.$el.querySelector(`#addItem[data-id="${item.id}"]`)) { + this.$el.querySelector(`#addItem[data-id="${item.id}"]`).classList.add('orange'); + this.$el.querySelector(`#addItem[data-id="${item.id}"] i`).innerHTML = 'close'; + } + }); + } + + } + insertItems(html) { this.roster.insertAdjacentHTML('afterbegin', html); + this.btnColor(); } +} + +function addItem(e) { + + if (e.target.localName === 'button' && e.target.id === 'addItem') { + const target = e.target; + renderObj(e.target.dataset, this, target); + } else if (e.target.localName === 'i') { + const target = e.target.parentNode; + renderObj(e.target.parentNode.dataset, this, target); + } + + function renderObj(obj, context, target) { + if (context.cart.length > 0) { + let insterted = false; + let index; + // Проверка на существующий айтем в корзине + context.cart.forEach((item, i) => { + if (item.id === obj.id) { + insterted = true; + index = i; + } + }); + if (insterted === false) { + context.cart.push(obj) + localStorage.setItem('cart', JSON.stringify(context.cart)); + target.classList.add('orange'); + target.querySelector('i').innerHTML = 'close'; + insertCount('counter', context.cart) + } 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) + } + } 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) + } + }; } \ No newline at end of file diff --git a/src/js/index.js b/src/js/index.js index 6786441..4eaed3e 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -7,6 +7,7 @@ import { BreadcrumbComponent } from "./components/breadcrumb.component.js"; import { FilterComponent } from "./components/filter.component.js"; import { CartModal } from "./modals/cart.modal.js"; + const header = new HeaderComponent('header'); const loader = new LoaderComponent('loader'); const information = new InformationComponent('information'); diff --git a/src/js/modals/cart.modal.js b/src/js/modals/cart.modal.js index e475320..e597134 100644 --- a/src/js/modals/cart.modal.js +++ b/src/js/modals/cart.modal.js @@ -4,4 +4,8 @@ export class CartModal extends Modal { constructor(id, open, close) { super(id, open, close); } + + init () { + + } } \ No newline at end of file diff --git a/src/js/other/counter.js b/src/js/other/counter.js new file mode 100644 index 0000000..3ffb035 --- /dev/null +++ b/src/js/other/counter.js @@ -0,0 +1,4 @@ +export function insertCount(id, array) { + const counter = document.getElementById(id); + counter.innerHTML = array.length; +} \ No newline at end of file diff --git a/src/js/templates/items.template.js b/src/js/templates/items.template.js index a349851..1ad1fcb 100644 --- a/src/js/templates/items.template.js +++ b/src/js/templates/items.template.js @@ -33,7 +33,7 @@ export function renderItems(categories, items) {
-
diff --git a/src/js/templates/itemsOne.template.js b/src/js/templates/itemsOne.template.js index 3bdddbe..fb3691a 100644 --- a/src/js/templates/itemsOne.template.js +++ b/src/js/templates/itemsOne.template.js @@ -32,7 +32,7 @@ export function renderItemsOne(category, items) {
-