рендер модалки

Author: daria-z

src/js/main.js

@@ -4,7 +4,6 @@ import {
   addRssFeed,
   validateInput,
   setActivePost,
-  // checkRssFeed,
   feedsChecking,
 } from "./model.js";
 
@@ -15,6 +14,7 @@ export const initApp = () => {
   const input = document.querySelector("#url-input");
   const form = document.querySelector("#rss-form");
   const postsContainer = document.querySelector(".posts");
+  const closeModalBtns = document.querySelectorAll('[data-bs-dismiss="modal"]');
 
   input.addEventListener("input", (e) => {
     updateInputValue(e.target.value);
@@ -35,6 +35,10 @@ export const initApp = () => {
       setActivePost(button.dataset.id);
     }
   });
-};
-
 
+  closeModalBtns.forEach((btn) => {
+    btn.addEventListener('click', () => {
+      setActivePost(null);
+    });
+  });
+};

src/js/model.js

@@ -109,6 +109,9 @@ export const checkRssFeed = () => {
 };
 
 export const setActivePost = (id) => {
+  if (id === null) {
+    state.activeItem = null;
+    return;
+  };
   state.activeItem = state.posts.find((post) => post.id === id);
-  console.log(state.activeItem);
 };

src/js/renderModal.js

@@ -0,0 +1,32 @@
+export const showModal = (item) => {
+  const modal = document.querySelector("#modal");
+  modal.classList.add("d-block", "show");
+  modal.setAttribute('aria-hidden', true)
+
+  const modalTitle = modal.querySelector('.modal-title');
+  const modalText = modal.querySelector('.modal-body');
+
+  modalTitle.textContent = item.title;
+  modalText.textContent = item.description;
+  modal.querySelector("a").href = item.link;
+
+  const backdrop = document.createElement('div');
+  backdrop.classList.add('modal-backdrop', 'fade', 'show');
+  modal.before(backdrop);
+
+};
+
+export const closeModal = () => {
+  const modal = document.querySelector("#modal");
+  modal.classList.remove("d-block", "show");
+  modal.setAttribute("aria-hidden", false);
+
+  const modalTitle = modal.querySelector(".modal-title");
+  const modalText = modal.querySelector(".modal-body");
+
+  modalTitle.textContent = '';
+  modalText.textContent = '';
+  modal.querySelector("a").href = '#';
+
+  document.querySelector(".modal-backdrop").remove();
+};

src/js/state.js

@@ -1,6 +1,7 @@
 import onChange from "on-change";
 import { renderFeeds, renderPosts } from "./renderRssFeed.js";
-import { renderErrors, renderInputValue, showModal } from "./view.js";
+import { closeModal, showModal } from "./renderModal.js";
+import { renderErrors, renderInputValue } from "./view.js";
 import { feedsChecking } from "./model.js";
 
 const createState = () => {
@@ -24,7 +25,7 @@ const createState = () => {
       renderPosts(state.posts);
     }
     if (path === "activeItem") {
-      showModal(state.activeItem);
+      (state.activeItem !== null) ? showModal(state.activeItem) : closeModal();
     }
     if (path === "form.inputValue") {
       renderInputValue(value);
@@ -41,3 +42,4 @@ export default createState;
 
 
 
+

src/js/view.js

@@ -33,7 +33,3 @@ export const renderErrors = (errors) => {
 export const renderInputValue = (value) => {
   input.value = value;
 };
-
-export const showModal = (activeItem) => {
-  console.log("Активный пост:", activeItem);
-};