Merge pull request #12 from aLesya66/module8-task1

index.html

@@ -231,9 +231,9 @@ <h2 class="success__title">Изображение успешно загруже
     <template id="data-error">
       <section class="data-error">
         <h2 class="data-error__title">Не удалось загрузить данные</h2>
-        <script src="js\main.js"></script>
+
       </section>
     </template>
-    <script src="./js/functions.js"></script>
+    <script type="module" src="./js/main.js"></script>
 </body>
 </html>

js/create-miniature.js

@@ -0,0 +1,19 @@
+const template = document.querySelector('#picture').content.querySelector('.picture');
+const container = document.querySelector('.pictures');
+
+const fragment = document.createDocumentFragment();
+const renderThumbs = (dataThumbs) => {
+  dataThumbs.forEach(({id, url, description, comments, likes}) => {
+    const copy = template.cloneNode(true);
+    copy.querySelector('.picture__img').src = url;
+    copy.querySelector('.picture__img').alt = description;
+    copy.querySelector('.picture__comments').textContent = comments.length;
+    copy.querySelector('.picture__likes').textContent = likes;
+    copy.dataset.id = id;
+    container.append(copy);
+  });
+};
+
+container.appendChild(fragment);
+
+export{renderThumbs};

js/full-picture.js

@@ -0,0 +1,62 @@
+import {isEscapeKey, isEnterKey} from './rand.js';
+import {dataThumbs} from './main.js';
+import {createSocialComment} from './mas.js';
+
+const bigPicture = document.querySelector('.big-picture');
+const closePicture = document.querySelector('.big-picture__cancel');
+const container = document.querySelector('.pictures');
+const bigPictureImg = document.querySelector('.big-picture__img').querySelector('img');
+const likesCount = document.querySelector('.likes-count');
+const commentsContainer = bigPicture.querySelector('.social__comments');
+const socialCommentTotalCount = document.querySelector('.social__comment-total-count');
+const photoCaption = bigPicture.querySelector('.social__caption');
+const loadCommentsButton = bigPicture.querySelector('.comments-loader');
+
+const onDocumentKeydown = (evt) => {
+  if (isEscapeKey(evt)) {
+    evt.preventDefault();
+    closePictureModal();
+    loadCommentsButton.classList.add('hidden');
+  }
+};
+
+function openPictureModal() {
+  bigPicture.classList.remove('hidden');
+  document.addEventListener('keydown', onDocumentKeydown);
+}
+
+container.addEventListener('click', (evt) => {
+  if (evt.target.closest('.picture')) {
+    const actualDescription = dataThumbs.find((element) => element.id === parseInt(evt.target.closest('.picture').dataset.id, 10));
+    openPictureModal();
+    bigPictureImg.src = actualDescription.url;
+    likesCount.textContent = actualDescription.likes;
+    socialCommentTotalCount.textContent = actualDescription.comments.length;
+    photoCaption.textContent = actualDescription.description;
+    document.body.classList.add('modal-open');
+    createSocialComment(actualDescription.comments, commentsContainer);
+  }
+});
+
+container.addEventListener('keydown', (evt) => {
+  if (isEnterKey(evt)) {
+    openPictureModal();
+  }
+});
+
+
+function closePictureModal() {
+  bigPicture.classList.add('hidden');
+  document.removeEventListener('keydown', onDocumentKeydown);
+}
+
+closePicture.addEventListener('click', () => {
+  closePictureModal();
+});
+
+closePicture.addEventListener('keydown', (evt) => {
+  if (isEnterKey(evt)) {
+    closePictureModal();
+  }
+});
+

js/main.js

@@ -1,2 +1,7 @@
-import {similarFinalMas} from './createMiniature.js';
-similarFinalMas();
+import './full-picture.js';
+import {renderThumbs} from './create-miniature.js';
+import { finalMas } from './mas.js';
+
+const dataThumbs = finalMas();renderThumbs(dataThumbs);
+export {dataThumbs};
+

js/mas.js

@@ -3,7 +3,7 @@ import {description, messageCommentator, nameCommentator, count} from './data.js
 
 const createComment = (indexx) => ({
   id: indexx + 1,
-  avatar: `img/avatar-${ getRandomInteger(1, 6) } .svg`,
+  avatar: `img/avatar-${getRandomInteger(1, 6)}.svg`,
   message: `${getRandomArrayElement(messageCommentator)}`,
   name: `${getRandomArrayElement(nameCommentator)}`,
 });
@@ -17,4 +17,27 @@ const createUsers = (index) => ({
 });
 const finalMas = () => Array.from({length:count}, (__, index) => createUsers(index));
 
-export {finalMas};
+const makeElement = (name, className, message) => {
+  const element = document.createElement(name);
+  element.classList.add(className);
+  if (message) {
+    element.textContent = message;
+  }
+  return element;
+};
+
+const createSocialComment = (mas, container) => {
+  mas.forEach((element) => {
+    const listElement = makeElement('li', 'social__comment');
+    const picture = makeElement('img', 'social__picture');
+    picture.src = element.avatar;
+    picture.alt = element.name;
+    listElement.appendChild(picture);
+    const commentText = makeElement('p', 'social__text', element.message);
+    listElement.appendChild(commentText);
+    container.appendChild(listElement);
+  });
+};
+
+export {finalMas, createUsers, createComment, createSocialComment};
+

js/rand.js

@@ -6,4 +6,7 @@ const getRandomInteger = (a, b) => {
 };
 const getRandomArrayElement = (elements) => elements[getRandomInteger(0, elements.length - 1)];
 
-export {getRandomArrayElement, getRandomInteger };
+const isEscapeKey = (evt) => evt.key === 'Escape';
+const isEnterKey = (evt) => evt.key === 'Enter';
+
+export {getRandomArrayElement, getRandomInteger, isEscapeKey, isEnterKey};