From 42d13cf7c5fbf7538e20d9cff6c261a50746659e Mon Sep 17 00:00:00 2001 From: Sergei Pozdeev Date: Mon, 23 Sep 2024 12:09:02 -0400 Subject: [PATCH] 4.16. Divide and conquer --- package-lock.json | 276 +++++++++++++++++++++++++++--- package.json | 6 +- src/model/point-model.js | 28 +-- src/presenter/presenter.js | 84 ++++++--- src/render.js | 19 -- src/view/event-add-button-view.js | 18 +- src/view/event-editor-view.js | 46 +++-- src/view/events-item-view.js | 38 ++-- src/view/events-list-view.js | 18 +- src/view/events-message-view.js | 18 +- src/view/filters-view.js | 22 +-- src/view/sort-view.js | 18 +- src/view/trip-info-view.js | 18 +- webpack.config.js | 4 + 14 files changed, 410 insertions(+), 203 deletions(-) delete mode 100644 src/render.js diff --git a/package-lock.json b/package-lock.json index 971fbea..0629cd7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,11 +13,13 @@ "devDependencies": { "@babel/core": "7.25.2", "@babel/preset-env": "7.25.4", - "babel-loader": "9.1.3", + "babel-loader": "9.2.1", "copy-webpack-plugin": "12.0.2", - "eslint": "8.57.0", + "css-loader": "7.1.2", + "eslint": "8.57.1", "eslint-config-htmlacademy": "10.0.1", "html-webpack-plugin": "5.6.0", + "style-loader": "^4.0.0", "webpack": "5.94.0", "webpack-cli": "5.1.4", "webpack-dev-server": "5.1.0" @@ -1974,9 +1976,9 @@ } }, "node_modules/@eslint/js": { - "version": "8.57.0", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz", - "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==", + "version": "8.57.1", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz", + "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==", "dev": true, "license": "MIT", "engines": { @@ -1984,14 +1986,14 @@ } }, "node_modules/@humanwhocodes/config-array": { - "version": "0.11.14", - "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", - "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==", + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz", + "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==", "deprecated": "Use @eslint/config-array instead", "dev": true, "license": "Apache-2.0", "dependencies": { - "@humanwhocodes/object-schema": "^2.0.2", + "@humanwhocodes/object-schema": "^2.0.3", "debug": "^4.3.1", "minimatch": "^3.0.5" }, @@ -2896,9 +2898,9 @@ } }, "node_modules/babel-loader": { - "version": "9.1.3", - "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.1.3.tgz", - "integrity": "sha512-xG3ST4DglodGf8qSwv0MdeWLhrDsw/32QMdTO5T1ZIp9gQur0HkCyFs7Awskr10JKXFXwpAhiCuYX5oGXnRGbw==", + "version": "9.2.1", + "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.2.1.tgz", + "integrity": "sha512-fqe8naHt46e0yIdkjUZYqddSXfej3AHajX+CSO5X7oy0EmPc6o5Xh+RClNoHjnieWz9AW4kZxW9yyFMhVB1QLA==", "dev": true, "license": "MIT", "dependencies": { @@ -3671,6 +3673,55 @@ "node": ">= 8" } }, + "node_modules/css-loader": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-7.1.2.tgz", + "integrity": "sha512-6WvYYn7l/XEGN8Xu2vWFt9nVzrCn39vKyTEFf/ExEyoksJjjSZV/0/35XPlMbpnr6VGhZIUg5yJrL8tGfes/FA==", + "dev": true, + "license": "MIT", + "dependencies": { + "icss-utils": "^5.1.0", + "postcss": "^8.4.33", + "postcss-modules-extract-imports": "^3.1.0", + "postcss-modules-local-by-default": "^4.0.5", + "postcss-modules-scope": "^3.2.0", + "postcss-modules-values": "^4.0.0", + "postcss-value-parser": "^4.2.0", + "semver": "^7.5.4" + }, + "engines": { + "node": ">= 18.12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "@rspack/core": "0.x || 1.x", + "webpack": "^5.27.0" + }, + "peerDependenciesMeta": { + "@rspack/core": { + "optional": true + }, + "webpack": { + "optional": true + } + } + }, + "node_modules/css-loader/node_modules/semver": { + "version": "7.6.3", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", + "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/css-select": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz", @@ -3701,6 +3752,19 @@ "url": "https://github.com/sponsors/fb55" } }, + "node_modules/cssesc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true, + "license": "MIT", + "bin": { + "cssesc": "bin/cssesc" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/dayjs": { "version": "1.11.13", "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz", @@ -4120,17 +4184,17 @@ } }, "node_modules/eslint": { - "version": "8.57.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz", - "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==", + "version": "8.57.1", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz", + "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==", "dev": true, "license": "MIT", "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", "@eslint/eslintrc": "^2.1.4", - "@eslint/js": "8.57.0", - "@humanwhocodes/config-array": "^0.11.14", + "@eslint/js": "8.57.1", + "@humanwhocodes/config-array": "^0.13.0", "@humanwhocodes/module-importer": "^1.0.1", "@nodelib/fs.walk": "^1.2.8", "@ungap/structured-clone": "^1.2.0", @@ -5483,6 +5547,19 @@ "node": ">=0.10.0" } }, + "node_modules/icss-utils": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", + "dev": true, + "license": "ISC", + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, "node_modules/ignore": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", @@ -6376,6 +6453,25 @@ "multicast-dns": "cli.js" } }, + "node_modules/nanoid": { + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, "node_modules/natural-compare": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", @@ -6831,9 +6927,9 @@ } }, "node_modules/picocolors": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", - "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz", + "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==", "dev": true, "license": "ISC" }, @@ -6929,6 +7025,119 @@ "node": ">=4" } }, + "node_modules/postcss": { + "version": "8.4.47", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz", + "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.7", + "picocolors": "^1.1.0", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/postcss-modules-extract-imports": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz", + "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==", + "dev": true, + "license": "ISC", + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/postcss-modules-local-by-default": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.5.tgz", + "integrity": "sha512-6MieY7sIfTK0hYfafw1OMEG+2bg8Q1ocHCpoWLqOKj3JXlKu4G7btkmM/B7lFubYkYWmRSPLZi5chid63ZaZYw==", + "dev": true, + "license": "MIT", + "dependencies": { + "icss-utils": "^5.0.0", + "postcss-selector-parser": "^6.0.2", + "postcss-value-parser": "^4.1.0" + }, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/postcss-modules-scope": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.0.tgz", + "integrity": "sha512-oq+g1ssrsZOsx9M96c5w8laRmvEu9C3adDSjI8oTcbfkrTE8hx/zfyobUoWIxaKPO8bt6S62kxpw5GqypEw1QQ==", + "dev": true, + "license": "ISC", + "dependencies": { + "postcss-selector-parser": "^6.0.4" + }, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/postcss-modules-values": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz", + "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==", + "dev": true, + "license": "ISC", + "dependencies": { + "icss-utils": "^5.0.0" + }, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/postcss-selector-parser": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", + "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", + "dev": true, + "license": "MIT", + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "dev": true, + "license": "MIT" + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -7882,6 +8091,16 @@ "node": ">=0.10.0" } }, + "node_modules/source-map-js": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/source-map-support": { "version": "0.5.21", "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", @@ -8083,6 +8302,23 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/style-loader": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-4.0.0.tgz", + "integrity": "sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 18.12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.27.0" + } + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", diff --git a/package.json b/package.json index cfc830d..754e0c4 100644 --- a/package.json +++ b/package.json @@ -18,11 +18,13 @@ "devDependencies": { "@babel/core": "7.25.2", "@babel/preset-env": "7.25.4", - "babel-loader": "9.1.3", + "babel-loader": "9.2.1", "copy-webpack-plugin": "12.0.2", - "eslint": "8.57.0", + "css-loader": "7.1.2", + "eslint": "8.57.1", "eslint-config-htmlacademy": "10.0.1", "html-webpack-plugin": "5.6.0", + "style-loader": "4.0.0", "webpack": "5.94.0", "webpack-cli": "5.1.4", "webpack-dev-server": "5.1.0" diff --git a/src/model/point-model.js b/src/model/point-model.js index a473cfd..9a0aaf7 100644 --- a/src/model/point-model.js +++ b/src/model/point-model.js @@ -4,27 +4,31 @@ import { offers } from '../mocks/offers.js'; export default class PointModel { + #points = null; + #destinations = null; + #offers = null; + constructor() { - this.points = []; - this.destinations = []; - this.offers = []; + this.#points = []; + this.#destinations = []; + this.#offers = []; } init() { - this.points = points; - this.destinations = destinations; - this.offers = offers; + this.#points = points; + this.#destinations = destinations; + this.#offers = offers; } - getPoints() { - return this.points; + get points() { + return this.#points; } - getDestinations() { - return this.destinations; + get destinations() { + return this.#destinations; } - getOffers() { - return this.offers; + get offers() { + return this.#offers; } } diff --git a/src/presenter/presenter.js b/src/presenter/presenter.js index 7dc74e9..23f35d2 100644 --- a/src/presenter/presenter.js +++ b/src/presenter/presenter.js @@ -1,4 +1,4 @@ -import { render, RenderPosition } from '../render.js'; +import { render, RenderPosition, replace } from '../framework/render.js'; import TripInfoView from '../view/trip-info-view.js'; import EventsListView from '../view/events-list-view.js'; import EventsItemView from '../view/events-item-view.js'; @@ -6,37 +6,77 @@ import EventEditorView from '../view/event-editor-view.js'; import FiltersView from '../view/filters-view.js'; import SortView from '../view/sort-view.js'; import EventAddButtonView from '../view/event-add-button-view.js'; -import { getDefaultPoint } from '../utils.js'; export default class Presenter { - tripInfoComponent = new TripInfoView(); - filtersComponent = new FiltersView(); - addButtonComponent = new EventAddButtonView(); - sortComponent = new SortView(); - listComponent = new EventsListView(); + #tripInfoComponent = new TripInfoView(); + #filtersComponent = new FiltersView(); + #addButtonComponent = new EventAddButtonView(); + #sortComponent = new SortView(); + #listComponent = new EventsListView(); + #pointModel = null; constructor({infoContainer, contentContainer, filtersContainer, pointModel}) { this.infoContainer = infoContainer; this.contentContainer = contentContainer; this.filtersContainer = filtersContainer; - this.pointModel = pointModel; + this.#pointModel = pointModel; } init() { - const points = this.pointModel.getPoints(); - const destinations = this.pointModel.getDestinations(); - const offers = this.pointModel.getOffers(); - - render(this.tripInfoComponent, this.infoContainer, RenderPosition.AFTERBEGIN); - render(this.filtersComponent, this.filtersContainer); - render(this.addButtonComponent, this.infoContainer); - render(this.sortComponent, this.contentContainer); - render(this.listComponent, this.contentContainer); - render(new EventEditorView(getDefaultPoint(), destinations, offers), this.listComponent.getElement()); - render(new EventEditorView(points[4], destinations, offers), this.listComponent.getElement()); - - for (const point of points) { - render(new EventsItemView(point, destinations, offers), this.listComponent.getElement()); + const points = this.#pointModel.points; + const destinations = this.#pointModel.destinations; + const offers = this.#pointModel.offers; + + render(this.#tripInfoComponent, this.infoContainer, RenderPosition.AFTERBEGIN); + render(this.#filtersComponent, this.filtersContainer); + render(this.#addButtonComponent, this.infoContainer); + render(this.#sortComponent, this.contentContainer); + render(this.#listComponent, this.contentContainer); + + points.forEach((point) => this.#renderPoint(point, destinations, offers)); + } + + #renderPoint(point, destinations, offers) { + const escKeyDownHandler = (event) => { + if (event.key === 'Escape') { + event.preventDefault(); + replaceFormToPoint(); + document.removeEventListener('keydown', escKeyDownHandler); + } + }; + + const pointComponent = new EventsItemView({ + point, + destinations, + offers, + onEditClick: () => { + replacePointToForm(); + document.addEventListener('keydown', escKeyDownHandler); + } + }); + + const pointEditorComponent = new EventEditorView({ + point, + destinations, + offers, + onEditClick: () => { + replaceFormToPoint(); + document.removeEventListener('keydown', escKeyDownHandler); + }, + onFormSubmit: () => { + replaceFormToPoint(); + document.removeEventListener('keydown', escKeyDownHandler); + } + }); + + function replacePointToForm() { + replace(pointEditorComponent, pointComponent); } + + function replaceFormToPoint() { + replace(pointComponent, pointEditorComponent); + } + + render(pointComponent, this.#listComponent.element); } } diff --git a/src/render.js b/src/render.js deleted file mode 100644 index 8c22c92..0000000 --- a/src/render.js +++ /dev/null @@ -1,19 +0,0 @@ -const RenderPosition = { - BEFOREBEGIN: 'beforebegin', - AFTERBEGIN: 'afterbegin', - BEFOREEND: 'beforeend', - AFTEREND: 'afterend', -}; - -function createElement(template) { - const newElement = document.createElement('div'); - newElement.innerHTML = template; - - return newElement.firstElementChild; -} - -function render(component, container, place = RenderPosition.BEFOREEND) { - container.insertAdjacentElement(place, component.getElement()); -} - -export {RenderPosition, createElement, render}; diff --git a/src/view/event-add-button-view.js b/src/view/event-add-button-view.js index 9ce059f..cd90e85 100644 --- a/src/view/event-add-button-view.js +++ b/src/view/event-add-button-view.js @@ -1,4 +1,4 @@ -import { createElement } from '../render.js'; +import AbstractView from '../framework/view/abstract-view.js'; function createEventAddButtonTemplate() { return ` @@ -6,20 +6,8 @@ function createEventAddButtonTemplate() { `; } -export default class EventAddButtonView { - getTemplate() { +export default class EventAddButtonView extends AbstractView { + get template() { return createEventAddButtonTemplate(); } - - getElement() { - if (!this.element) { - this.element = createElement(this.getTemplate()); - } - - return this.element; - } - - removeElement() { - this.element = null; - } } diff --git a/src/view/event-editor-view.js b/src/view/event-editor-view.js index 63669a6..a137af9 100644 --- a/src/view/event-editor-view.js +++ b/src/view/event-editor-view.js @@ -1,4 +1,4 @@ -import { createElement } from '../render.js'; +import AbstractView from '../framework/view/abstract-view.js'; import { convertDate, getCapitalized } from '../utils.js'; import { DATE_TIME_FORMAT, EVENT_TYPES } from '../constants.js'; @@ -136,26 +136,36 @@ const createEventEditorTemplate = (point, destinations, offers)=> { `; }; -export default class EventEditorView { - constructor(point, destinations, offers) { - this.point = point; - this.destinations = destinations; - this.offers = offers; +export default class EventEditorView extends AbstractView { + #point = null; + #destinations = null; + #offers = null; + #handleFormSubmit = null; + #handleEditClick = null; + + constructor({point, destinations, offers, onFormSubmit, onEditClick}) { + super(); + this.#point = point; + this.#destinations = destinations; + this.#offers = offers; + this.#handleFormSubmit = onFormSubmit; + this.#handleEditClick = onEditClick; + + this.element.querySelector('form').addEventListener('submit', this.#formSubmitHandler); + this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#editClickHandler); } - getTemplate() { - return createEventEditorTemplate(this.point, this.destinations, this.offers); + get template() { + return createEventEditorTemplate(this.#point, this.#destinations, this.#offers); } - getElement() { - if (!this.element) { - this.element = createElement(this.getTemplate()); - } + #formSubmitHandler = (event) => { + event.preventDefault(); + this.#handleFormSubmit(); + }; - return this.element; - } - - removeElement() { - this.element = null; - } + #editClickHandler = (event) => { + event.preventDefault(); + this.#handleEditClick(); + }; } diff --git a/src/view/events-item-view.js b/src/view/events-item-view.js index 920149b..1a72bae 100644 --- a/src/view/events-item-view.js +++ b/src/view/events-item-view.js @@ -1,4 +1,4 @@ -import { createElement } from '../render.js'; +import AbstractView from '../framework/view/abstract-view.js'; import { calculateDuration, convertDate, convertDuration, getCapitalized } from '../utils.js'; import { DATE_TIME_FORMAT } from '../constants.js'; @@ -65,26 +65,28 @@ const createEventItemTemplate = (point, destinations, offers) => { `; }; -export default class EventsItemView { - constructor(point, destinations, offers) { - this.point = point; - this.destinations = destinations; - this.offers = offers; - } - - getTemplate() { - return createEventItemTemplate(this.point, this.destinations, this.offers); - } +export default class EventsItemView extends AbstractView { + #point = null; + #destinations = null; + #offers = null; + #handleEditClick = null; - getElement() { - if (!this.element) { - this.element = createElement(this.getTemplate()); - } + constructor({point, destinations, offers, onEditClick}) { + super(); + this.#point = point; + this.#destinations = destinations; + this.#offers = offers; + this.#handleEditClick = onEditClick; - return this.element; + this.element.querySelector('.event__rollup-btn').addEventListener('click', this.#editClickHandler); } - removeElement() { - this.element = null; + get template() { + return createEventItemTemplate(this.#point, this.#destinations, this.#offers); } + + #editClickHandler = (event) => { + event.preventDefault(); + this.#handleEditClick(); + }; } diff --git a/src/view/events-list-view.js b/src/view/events-list-view.js index 26ceb8f..d25c336 100644 --- a/src/view/events-list-view.js +++ b/src/view/events-list-view.js @@ -1,22 +1,10 @@ -import { createElement } from '../render.js'; +import AbstractView from '../framework/view/abstract-view.js'; const createEventsListTemplate = () => ` `; -export default class EventsListView { - getTemplate() { +export default class EventsListView extends AbstractView { + get template() { return createEventsListTemplate(); } - - getElement() { - if (!this.element) { - this.element = createElement(this.getTemplate()); - } - - return this.element; - } - - removeElement() { - this.element = null; - } } diff --git a/src/view/events-message-view.js b/src/view/events-message-view.js index db78068..65a77a4 100644 --- a/src/view/events-message-view.js +++ b/src/view/events-message-view.js @@ -1,22 +1,10 @@ -import { createElement } from '../render.js'; +import AbstractView from '../framework/view/abstract-view.js'; const createEventsMessageTemplate = () => `

`; -export default class EventsMessageView { - getTemplate() { +export default class EventsMessageView extends AbstractView { + get template() { return createEventsMessageTemplate(); } - - getElement() { - if (!this.element) { - this.element = createElement(this.getTemplate()); - } - - return this.element; - } - - removeElement() { - this.element = null; - } } diff --git a/src/view/filters-view.js b/src/view/filters-view.js index 0d24f2f..67c749d 100644 --- a/src/view/filters-view.js +++ b/src/view/filters-view.js @@ -1,6 +1,6 @@ -import { createElement } from '../render.js'; -import {getCapitalized} from '../utils'; -import {FILTER_TYPES} from '../constants'; +import AbstractView from '../framework/view/abstract-view.js'; +import { getCapitalized } from '../utils.js'; +import { FILTER_TYPES } from '../constants.js'; const createTripFilterTypeTemplate = (filter) => `
@@ -20,20 +20,8 @@ const createFiltersTemplate = () => `
`; -export default class FiltersView { - getTemplate() { +export default class FiltersView extends AbstractView { + get template() { return createFiltersTemplate(); } - - getElement() { - if (!this.element) { - this.element = createElement(this.getTemplate()); - } - - return this.element; - } - - removeElement() { - this.element = null; - } } diff --git a/src/view/sort-view.js b/src/view/sort-view.js index 233fc5a..d2deffb 100644 --- a/src/view/sort-view.js +++ b/src/view/sort-view.js @@ -1,4 +1,4 @@ -import { createElement } from '../render.js'; +import AbstractView from '../framework/view/abstract-view.js'; import { TRIP_SORT_ITEMS } from '../constants.js'; const createTripSortItemTemplate = (item) => ` @@ -12,20 +12,8 @@ const createSortTemplate = () => ` ${TRIP_SORT_ITEMS.map((item) => createTripSortItemTemplate(item)).join('')} `; -export default class SortView { - getTemplate() { +export default class SortView extends AbstractView { + get template() { return createSortTemplate(); } - - getElement() { - if (!this.element) { - this.element = createElement(this.getTemplate()); - } - - return this.element; - } - - removeElement() { - this.element = null; - } } diff --git a/src/view/trip-info-view.js b/src/view/trip-info-view.js index 2b97255..bd8449b 100644 --- a/src/view/trip-info-view.js +++ b/src/view/trip-info-view.js @@ -1,4 +1,4 @@ -import { createElement } from '../render.js'; +import AbstractView from '../framework/view/abstract-view.js'; const createTripInfoTemplate = () => `
@@ -13,20 +13,8 @@ const createTripInfoTemplate = () => `

`; -export default class TripInfoView { - getTemplate() { +export default class TripInfoView extends AbstractView { + get template() { return createTripInfoTemplate(); } - - getElement() { - if (!this.element) { - this.element = createElement(this.getTemplate()); - } - - return this.element; - } - - removeElement() { - this.element = null; - } } diff --git a/webpack.config.js b/webpack.config.js index 4282ef5..e917a26 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -37,6 +37,10 @@ module.exports = { }, }, }, + { + test: /\.css$/i, + use: ['style-loader', 'css-loader'] + }, ], }, };