module4-task1

src/presenter.js

@@ -4,7 +4,7 @@ import SortView from './view/sort-view.js';
 import EventsListView from './view/events-list-view.js';
 import EventsEditView from './view/events-edit-view.js';
 import EventsItemView from './view/events-item-view.js';
-import {render} from './framework/render.js';
+import {render, replace, remove} from './framework/render.js';
 
 export default class Presenter {
   sortContainer = null;
@@ -21,7 +21,6 @@ export default class Presenter {
     this.renderFilters();
     this.renderSort();
     this.renderEventsList();
-    this.renderEventsEdit();
     this.renderEventsItems();
   }
 
@@ -44,23 +43,49 @@ export default class Presenter {
     render(this.eventsContainer, this.sortContainer, 'beforeend');
   }
 
-  renderEventsEdit() {
-    const point = this.model.getPoints()[0];
-    const destination = this.model.getDestinationById(point.destination);
-    const offers = this.model.getOffersById(point.type, point.offers);
-    const allDestinations = this.model.getDestinations();
-
-    render(new EventsEditView(point, destination, offers, allDestinations), this.eventsContainer.element, 'beforeend');
-  }
-
   renderEventsItems() {
-    for (let i = 0; i < 3; i++) {
-      const point = this.model.getPoints().shift();
+    const points = this.model.getPoints().slice(0, 3);
+    points.forEach((point) => {
       const destination = this.model.getDestinationById(point.destination);
       const offers = this.model.getOffersById(point.type, point.offers);
       const eventItem = new EventsItemView(point, destination, offers);
+      const eventEdit = new EventsEditView(point, destination, offers, this.model.getDestinations());
+
+      eventItem.setRollupButtonClickHandler(() => {
+        replace(eventEdit, eventItem);
+        this.setEditModeHandlers(eventEdit, eventItem);
+      });
 
       render(eventItem, this.eventsContainer.element, 'beforeend');
-    }
+    });
   }
+
+  setEditModeHandlers(eventEdit, eventItem) {
+    this.eventEdit = eventEdit;
+    this.eventItem = eventItem;
+
+    eventEdit.setFormSubmitHandler(() => {
+      replace(eventItem, eventEdit);
+      remove(eventEdit);
+      document.removeEventListener('keydown', this.escKeyDownHandler);
+    });
+
+    eventEdit.setResetButtonClickHandler(() => {
+      replace(eventItem, eventEdit);
+      remove(eventEdit);
+      document.removeEventListener('keydown', this.escKeyDownHandler);
+    });
+
+    document.addEventListener('keydown', this.escKeyDownHandler);
+  }
+
+  escKeyDownHandler = (evt) => {
+    if (evt.key === 'Escape' || evt.key === 'Esc') {
+      evt.preventDefault();
+      replace(this.eventItem, this.eventEdit);
+      remove(this.eventEdit);
+      document.removeEventListener('keydown', this.escKeyDownHandler);
+    }
+  };
+
 }

src/view/events-edit-view.js

@@ -144,11 +144,11 @@ export default class EventsEditView extends AbstractView {
     return createEventsEditTemplate(this.point, this.destination, this.offers, this.allDestinations);
   }
 
-  set formSubmitHandler(callback){
-    this.element.querySelector('.form').addEventListener('submit', callback);
+  setFormSubmitHandler(callback) {
+    this.element.querySelector('.event--edit')?.addEventListener('submit', callback);
   }
 
-  set resetButtonClickHandler(callback){
-    this.element.querySelector('.event__reset-btn').addEventListener('click', callback);
+  setResetButtonClickHandler(callback) {
+    this.element.querySelector('.event__reset-btn')?.addEventListener('click', callback);
   }
 }

src/view/events-item-view.js

@@ -61,4 +61,8 @@ export default class EventsItemView extends AbstractView {
   get template() {
     return createEventsItemTemplate(this.point, this.destination, this.offers);
   }
+
+  setRollupButtonClickHandler(callback) {
+    this.element.querySelector('.event__rollup-btn')?.addEventListener('click', callback);
+  }
 }