Merge pull request #5 from Klinarr/module4-task1

htmlacademy-ecmascript · Dec 26, 2024 · 2bf2b49 · 2bf2b49
2 parents dd8d9ac + 71d3e01
commit 2bf2b49
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 76 deletions.
diff --git a/src/presenter.js b/src/presenter.js
@@ -4,17 +4,15 @@ 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 './render.js';
+import {render, replace, remove} from './framework/render.js';
 
 export default class Presenter {
-  filtersContainer = null;
   sortContainer = null;
   eventsContainer = new EventsListView();
 
   constructor(container, model) {
     this.container = container;
     this.model = model;
-    this.filtersContainer = this.container.querySelector('.trip-controls');
     this.sortContainer = document.querySelector('.trip-events');
   }
 
@@ -23,7 +21,6 @@ export default class Presenter {
     this.renderFilters();
     this.renderSort();
     this.renderEventsList();
-    this.renderEventsEdit();
     this.renderEventsItems();
   }
 
@@ -35,7 +32,7 @@ export default class Presenter {
   }
 
   renderFilters() {
-    render(new FiltersView(), this.filtersContainer);
+    render(new FiltersView(), this.container);
   }
 
   renderSort() {
@@ -46,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.getElement(), '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());
 
-      render(eventItem, this.eventsContainer.getElement(), 'beforeend');
-    }
+      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.setRollupButtonClickHandler(() => {
+      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);
+    }
+  };
+
 }
diff --git a/src/view/events-edit-view.js b/src/view/events-edit-view.js
@@ -1,4 +1,4 @@
-import { createElement } from '../render.js';
+import AbstractView from '../framework/view/abstract-view.js';
 import { dateModule } from '../utils.js';
 
 function createEventsEditTemplate(point, destination, offers , allDestinations) {
@@ -47,7 +47,7 @@ function createEventsEditTemplate(point, destination, offers , allDestinations)
                         </div>
 
                         <div class="event__type-item">
-                          <input id="event-type-flight-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="flight" checked>
+                          <input id="event-type-flight-1" class="event__type-input  visually-hidden" type="radio" name="event-type" value="flight">
                           <label class="event__type-label  event__type-label--flight" for="event-type-flight-1">Flight</label>
                         </div>
 
@@ -96,7 +96,10 @@ function createEventsEditTemplate(point, destination, offers , allDestinations)
                   </div>
 
                   <button class="event__save-btn  btn  btn--blue" type="submit">Save</button>
-                  <button class="event__reset-btn" type="reset">Cancel</button>
+                  <button class="event__reset-btn" type="reset">Delete</button>
+                  <button class="event__rollup-btn" type="button">
+                    <span class="visually-hidden">Open event</span>
+                  </button>
                 </header>
                 <section class="event__details">
                   <section class="event__section  event__section--offers">
@@ -131,22 +134,24 @@ function createEventsEditTemplate(point, destination, offers , allDestinations)
   );
 }
 
-export default class EventsEditView {
+export default class EventsEditView extends AbstractView {
   constructor(point, destination, offers, allDestinations) {
+    super();
     this.point = point;
     this.destination = destination;
     this.offers = offers;
     this.allDestinations = allDestinations;
   }
 
-  getTemplate() {
+  get template() {
     return createEventsEditTemplate(this.point, this.destination, this.offers, this.allDestinations);
   }
 
-  getElement() {
-    if (!this.element) {
-      this.element = createElement(this.getTemplate());
-    }
-    return this.element;
+  setFormSubmitHandler(callback) {
+    this.element.querySelector('.event--edit')?.addEventListener('submit', callback);
+  }
+
+  setRollupButtonClickHandler(callback) {
+    this.element.querySelector('.event__rollup-btn')?.addEventListener('click', callback);
   }
 }
diff --git 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 { dateModule } from '../utils.js';
 
 function createEventsItemTemplate(point, destination , offers){
@@ -50,21 +50,19 @@ function createEventsItemTemplate(point, destination , offers){
   );
 }
 
-export default class EventsItemView {
+export default class EventsItemView extends AbstractView {
   constructor(point, destination , offers) {
+    super();
     this.point = point;
     this.destination = destination;
     this.offers = offers;
   }
 
-  getTemplate() {
+  get template() {
     return createEventsItemTemplate(this.point, this.destination, this.offers);
   }
 
-  getElement() {
-    if (!this.element) {
-      this.element = createElement(this.getTemplate());
-    }
-    return this.element;
+  setRollupButtonClickHandler(callback) {
+    this.element.querySelector('.event__rollup-btn')?.addEventListener('click', callback);
   }
 }
diff --git a/src/view/events-list-view.js b/src/view/events-list-view.js
@@ -1,4 +1,4 @@
-import { createElement } from '../render.js';
+import AbstractView from '../framework/view/abstract-view.js';
 
 function createTripEventsListTemplate(){
 
@@ -9,15 +9,8 @@ function createTripEventsListTemplate(){
   );
 }
 
-export default class EventsListView {
-  getTemplate() {
+export default class EventsListView extends AbstractView {
+  get template() {
     return createTripEventsListTemplate();
   }
-
-  getElement() {
-    if (!this.element) {
-      this.element = createElement(this.getTemplate());
-    }
-    return this.element;
-  }
 }
diff --git a/src/view/filters-view.js b/src/view/filters-view.js
@@ -1,4 +1,4 @@
-import { createElement } from '../render.js';
+import AbstractView from '../framework/view/abstract-view.js';
 
 function createFiltersTemplate(){
 
@@ -30,15 +30,8 @@ function 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;
-  }
 }
diff --git a/src/view/main-info-view.js b/src/view/main-info-view.js
@@ -1,4 +1,4 @@
-import { createElement } from '../render.js';
+import AbstractView from '../framework/view/abstract-view.js';
 import { dateModule } from '../utils.js';
 
 function createMainInfoTemplate(point, destination) {
@@ -21,22 +21,16 @@ function createMainInfoTemplate(point, destination) {
   );
 }
 
-export default class MainInfoView {
+export default class MainInfoView extends AbstractView {
   constructor(point, destination) {
+    super();
     this.point = point;
     this.destination = destination;
   }
 
-  getTemplate() {
+  get template() {
     return createMainInfoTemplate(this.point, this.destination);
   }
-
-  getElement() {
-    if (!this.element) {
-      this.element = createElement(this.getTemplate());
-    }
-    return this.element;
-  }
 }
 
 
diff --git 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';
 
 function createSortTemplate(){
 
@@ -33,15 +33,8 @@ function createSortTemplate(){
   );
 }
 
-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;
-  }
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -39,6 +39,10 @@ module.exports = {
                     },
                 },
             },
+            {
+            test: /\.css$/i,
+            use: ['style-loader', 'css-loader']
+            },
         ],
     }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -39,6 +39,10 @@ module.exports = { @@
                         },
                     },
                 },
+                {
+                test: /\.css$/i,
+                use: ['style-loader', 'css-loader']
+                },
             ],
         }
     }