Обработчики событий на поинте, открывается форма

htmlacademy-ecmascript · Sep 30, 2024 · cc7cf25 · cc7cf25
1 parent 84f0521
commit cc7cf25
Showing 1 changed file with 47 additions and 14 deletions.
diff --git a/src/presenter/board-presenter.js b/src/presenter/board-presenter.js
@@ -1,7 +1,7 @@
 import TripInfoView from '../view/trip-info-view.js'; //Инфо в шапке про маршрут
 import PointView from '../view/trip-point-view.js'; //Точка маршрута
 import OffersView from '../view/trip-edit-point-view.js';//Форма редактирования
-import {render} from '../framework/render.js';
+import { render, replace } from '../framework/render.js';
 const siteMainElement = document.querySelector('.page-body');
 const siteTripInfo = siteMainElement.querySelector('.trip-info'); // Инфо в шапке про маршрут
 export default class BoardPresenter {
@@ -18,22 +18,55 @@ export default class BoardPresenter {
     this.boardPoints = [...this.#pointsModel.points];
 
     this.boardOffers = [...this.#pointsModel.offers];
-    const offersView = new OffersView({
-      point: this.boardPoints[0],
-      allOffers: this.#pointsModel.getOffersByType(this.boardPoints[0].type),
-      pointDestination: this.#pointsModel.getDestinationsById(this.boardPoints[0].destination),
-      allDestination: this.#pointsModel.destinations
+    for (let i = 0; i < this.boardPoints.length; i++) {
+      this.#renderPoints(this.boardPoints[i]);
+    }
+  }
+
+  #renderPoints(point) { //Отображение точки маршрута с обработчиками, форма редактирования внутри!!!
+    const escKeyDownHandler = (evt) => {
+      if(evt.key === 'Escape') {
+        evt.preventDefault();
+        replaceFormToPoint();
+        document.removeEventListener('keydown', escKeyDownHandler);
+      }
+    };
+    const onOpenEditButtonClick = () => {
+      replacePointToForm();
+      document.addEventListener('keydown', escKeyDownHandler);
+    };
+    const onCloseEditButtonClick = () => {
+      replaceFormToPoint();
+      document.removeEventListener('keydown', escKeyDownHandler);
+    };
+    const onSubmitButtonClick = () => {
+      replaceFormToPoint();
+      document.removeEventListener('keydown', escKeyDownHandler);
+    };
+    const pointComponent = new PointView({ //Точка маршрута
+      point,
+      offers: [...this.#pointsModel.getOffersById(point.type, point.offers)],
+      destination: this.#pointsModel.getDestinationsById(this.boardPoints[0].destination),
+      onOpenEditButtonClick
     });
-    render(offersView, this.#container); //Отображение формы редактирования
 
-    for (let i = 0; i < this.boardPoints.length; i++) {
-      const point = new PointView({
-        point: this.boardPoints[i],
-        offers: [...this.#pointsModel.getOffersById(this.boardPoints[i].type, this.boardPoints[i].offers)],
-        destination: this.#pointsModel.getDestinationsById(this.boardPoints[i].destination)
-      });
-      render(point, this.#container); //Отображение поинтов
+    const editPointComponent = new OffersView({ //Форма редактирования
+      point,
+      allOffers: this.#pointsModel.getOffersByType(point.type),
+      pointDestination: this.#pointsModel.getDestinationsById(point.destination),
+      allDestination: this.#pointsModel.destinations,
+      onCloseEditButtonClick,
+      onSubmitButtonClick
+    });
+
+    function replacePointToForm() {
+      replace(editPointComponent, pointComponent);
+    }
+
+    function replaceFormToPoint() {
+      replace(pointComponent, editPointComponent);
     }
+    render(pointComponent, this.#container);
   }
 }