htmlacademy-univer-javascript-1 · keksobot · Jan 16, 2025 · Jan 16, 2025
diff --git a/index.html b/index.html
@@ -6,16 +6,10 @@
   <link rel="stylesheet" href="css/normalize.css">
   <link rel="stylesheet" href="css/style.css">
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
-  <link rel="script" href="js/main.js"></link>
-
   <title>Кекстаграм</title>
 </head>
 
 <body>
-  <link rel="module" href="render.js"></link>
-  <section class="pictures">
-
-  </section>
   <main>
 
     <!-- Фильтрация изображений от других пользователей -->

diff --git a/js/big-picture.js b/js/big-picture.js
@@ -0,0 +1,102 @@
+import { isEscapeKey } from './util.js';
+
+const bigPictureForm = document.querySelector('.big-picture');
+const bigPictureComments = bigPictureForm.querySelector('.social__comments');
+const loadCommentButton = bigPictureForm.querySelector('.comments-loader');
+const COMMENTS_TO_SHOW = 5;
+
+function onStartCreateBigPicture(photosData) {
+  const bigPictureOpenForm = document.querySelector('.pictures');
+  bigPictureOpenForm.addEventListener('click', (evt) => {
+    const idPicture = onFindIdPhoto(evt);
+    const photo = onFindPhoto(photosData, idPicture);
+    onOpenBigPicture(photo);
+    evt.preventDefault();
+  });
+}
+
+function onFindIdPhoto(evt) {
+  const pictureElement = evt.target.closest('[data-id-picture]');
+  if (!pictureElement) {
+    return;
+  }
+  return pictureElement.dataset.idPicture;
+}
+
+function onFindPhoto(photosData, idPicture) {
+  return photosData.find((item) => item.id === Number(idPicture));
+}
+
+function onAddCommentsForBigPicture(commentsArray) {
+  bigPictureComments.innerHTML = '';
+  commentsArray.forEach((comment) => {
+    const commentElement = document.createElement('li');
+    commentElement.classList.add('social__comment');
+    commentElement.innerHTML = `<img class="social__picture" src="${comment.avatar}" alt="${comment.name}" width="35" height="35">
+    <p class="social__text">${comment.message}</p>`;
+    bigPictureComments.appendChild(commentElement);
+  });
+
+  const commentsItems = bigPictureComments.children;
+  bigPictureForm.querySelector('.loaded-comments').textContent = commentsItems.length > COMMENTS_TO_SHOW ? COMMENTS_TO_SHOW : commentsItems.length;
+  for (let i = COMMENTS_TO_SHOW; i < commentsItems.length; i++) {
+    commentsItems[i].classList.add('hidden');
+  }
+
+  if (commentsItems.length > COMMENTS_TO_SHOW) {
+    loadCommentButton.classList.remove('hidden');
+    loadCommentButton.addEventListener('click', onLoadComments);
+  } else {
+    loadCommentButton.classList.add('hidden');
+  }
+}
+
+function onLoadComments() {
+  const commentsItems = bigPictureComments.children;
+  const loadedCommentsCountElement = bigPictureForm.querySelector('.loaded-comments');
+  const loadedCommentsCount = parseInt(loadedCommentsCountElement.textContent, 10);
+  const currentComments = loadedCommentsCount + COMMENTS_TO_SHOW > commentsItems.length ? commentsItems.length - loadedCommentsCount : COMMENTS_TO_SHOW;
+  for (let i = 0; i < currentComments; i++) {
+    document.querySelector('.social__comment.hidden').classList.remove('hidden');
+  }
+  loadedCommentsCountElement.textContent = loadedCommentsCount + currentComments;
+  if (loadedCommentsCount + currentComments === commentsItems.length) {
+    loadCommentButton.classList.add('hidden');
+  }
+}
+
+function onOpenBigPicture(photo) {
+  const bigPictureImg = bigPictureForm.querySelector('.big-picture__img img');
+  const bigPictureLikesCount = bigPictureForm.querySelector('.likes-count');
+  const bigPictureCommentCount = bigPictureForm.querySelector('.comments-count');
+  const bigPictureDesc = bigPictureForm.querySelector('.social__caption');
+
+  bigPictureImg.src = photo.url;
+  bigPictureImg.alt = photo.alt;
+  bigPictureLikesCount.textContent = photo.likes;
+  bigPictureCommentCount.textContent = photo.comments.length;
+  onAddCommentsForBigPicture(photo.comments);
+  bigPictureDesc.textContent = photo.description;
+
+  bigPictureForm.classList.remove('hidden');
+  document.body.classList.add('modal-open');
+
+  const bigPictureCloseForm = bigPictureForm.querySelector('.big-picture__cancel');
+  bigPictureCloseForm.addEventListener('click', onCloseBigPicture);
+
+  document.addEventListener('keydown', onDocumentEscKeyDown);
+}
+
+function onDocumentEscKeyDown(evt) {
+  if (isEscapeKey(evt)) {
+    onCloseBigPicture();
+  }
+}
+
+function onCloseBigPicture() {
+  bigPictureForm.classList.add('hidden');
+  document.body.classList.remove('modal-open');
+  document.removeEventListener('keydown', onDocumentEscKeyDown);
+}
+
+export { onStartCreateBigPicture };
diff --git a/js/data.js b/js/data.js
@@ -1,14 +1,13 @@
-import { getRandomInt, getRandomElement } from './util.js';
-
-const descriptions = [
-  'Прекрасный вид!',
-  'Невероятная красота природы.',
-  'Лучший момент дня.',
-  'Воспоминания на всю жизнь.',
-  'Удивительное приключение.'
-];
+import { createIdGenerator, getRandomInteger, getRandomArrayElement } from './util.js';
+
+const MAX_ID_FOR_PHOTOS = 25;
+
+const MAX_SCALE = 100;
+const MIN_SCALE = 0;
+const STEP_SCALE = 25;
+
 
-const messages = [
+const COMMENT_MESSAGES = [
   'Всё отлично!',
   'В целом всё неплохо. Но не всё.',
   'Когда вы делаете фотографию, хорошо бы убирать палец из кадра. В конце концов это просто непрофессионально.',
@@ -17,39 +16,48 @@ const messages = [
   'Лица у людей на фотке перекошены, как будто их избивают. Как можно было поймать такой неудачный момент?!'
 ];
 
-const names = ['Артём', 'Иван', 'Ольга', 'Мария', 'Дмитрий', 'Елена'];
-
-function generateComments() {
-  const comments = [];
-  const commentCount = getRandomInt(0, 30);
-  for (let i = 0; i < commentCount; i++) {
-    comments.push({
-      id: getRandomInt(1, 1000),
-      avatar: `img/avatar-${getRandomInt(1, 6)}.svg`,
-      message: getRandomElement(messages),
-      name: getRandomElement(names)
-    });
+const NAMES = ['Артём', 'Иван', 'Ольга', 'Мария', 'Дмитрий', 'Елена'];
+
+function createArrayComments(count) {
+  const commentsArray = [];
+  const generateCommentId = createIdGenerator();
+  while (commentsArray.length < count) {
+    const comment = {
+      id: generateCommentId(),
+      avatar: `img/avatar-${getRandomInteger(1, 6)}.svg`,
+      message: getRandomArrayElement(COMMENT_MESSAGES),
+      name: getRandomArrayElement(NAMES)
+    };
+
+    if (getRandomInteger(1, 2) === 2) {
+      let secondMessage = getRandomArrayElement(COMMENT_MESSAGES);
+      while (comment.message === secondMessage) {
+        secondMessage = getRandomArrayElement(COMMENT_MESSAGES);
+      }
+      comment.message += ` ${secondMessage}`;
+    }
+
+    commentsArray.push(comment);
   }
-  return comments;
+
+  return commentsArray;
 }
 
-export function generatePhotos() {
-  const photos = [];
-  for (let i = 1; i <= 25; i++) {
-    photos.push({
-      id: i,
-      url: `photos/${i}.jpg`,
-      description: getRandomElement(descriptions),
-      likes: getRandomInt(15, 200),
-      comments: generateComments()
-    });
+function createArrayPhotos() {
+  const generatePhotoId = createIdGenerator();
+  const photoIdForUrl = createIdGenerator();
+  const photosArray = [];
+  while (photosArray.length < MAX_ID_FOR_PHOTOS) {
+    const photo = {
+      id: generatePhotoId(),
+      url: `photos/${photoIdForUrl()}.jpg`,
+      description: 'Еще не придумал что здесь написать',
+      likes: getRandomInteger(15, 200),
+      comments: createArrayComments(getRandomInteger(0, 30))
+    };
+    photosArray.push(photo);
   }
-  return photos;
+  return photosArray;
 }
 
-
-const MAX_SCALE = 100;
-const MIN_SCALE = 0;
-const STEP_SCALE = 25;
-
-export { MAX_SCALE, MIN_SCALE, STEP_SCALE };
+export { createArrayPhotos, MAX_SCALE, MIN_SCALE, STEP_SCALE };
diff --git a/js/filter.js b/js/filter.js
@@ -0,0 +1,126 @@
+const sliderOptions = {
+  chrome: {
+    MIN: 0,
+    MAX: 1,
+    STEP: 0.1
+  },
+  sepia: {
+    MIN: 0,
+    MAX: 1,
+    STEP: 0.1
+  },
+  marvin: {
+    MIN: 0,
+    MAX: 100,
+    STEP: 1
+  },
+  phobos: {
+    MIN: 0,
+    MAX: 3,
+    STEP: 0.1
+  },
+  heat: {
+    MIN: 1,
+    MAX: 3,
+    STEP: 0.1
+  }
+};
+
+const filtersList = document.querySelector('.effects__list');
+const imageElement = document.querySelector('.img-upload__preview').children[0];
+const sliderField = document.querySelector('.img-upload__effect-level');
+const sliderElement = document.querySelector('.effect-level__slider');
+const effectLevel = document.querySelector('.effect-level__value');
+
+const effects = {
+  none: () => {
+    sliderField.classList.add('visually-hidden');
+    return '';
+  },
+  chrome: () => {
+    sliderField.classList.remove('visually-hidden');
+    return `grayscale(${effectLevel.value})`;
+  },
+  sepia: () => {
+    sliderField.classList.remove('visually-hidden');
+    return `sepia(${effectLevel.value})`;
+  },
+  marvin: () => {
+    sliderField.classList.remove('visually-hidden');
+    return `invert(${effectLevel.value}%)`;
+  },
+  phobos: () => {
+    sliderField.classList.remove('visually-hidden');
+    return `blur(${effectLevel.value}px)`;
+  },
+  heat: () => {
+    sliderField.classList.remove('visually-hidden');
+    return `brightness(${effectLevel.value})`;
+  }
+};
+
+noUiSlider.create(sliderElement, {
+  range: {
+    min: 0,
+    max: 1
+  },
+  start: 1,
+  step: 1,
+  connect: 'lower'
+});
+
+sliderField.classList.add('visually-hidden');
+let currentEffect = '';
+
+const setSliderOptions = (effect) => {
+  const options = sliderOptions[effect];
+  sliderElement.noUiSlider.updateOptions({range: {min: options.MIN, max: options.MAX}, start: options.MAX, step: options.STEP});
+  effectLevel.value = options.MAX;
+};
+
+const setDefaultFilter = () => {
+  const defaultRadio = filtersList.querySelector('#effect-none');
+  defaultRadio.checked = true;
+
+  if (currentEffect !== '') {
+    imageElement.classList.remove(currentEffect);
+  }
+
+  currentEffect = '';
+
+  imageElement.style.filter = effects['none']();
+};
+
+const onFilterListClick = (evt) => {
+  let target = evt.target;
+
+  if (target.classList.contains('effects__radio')) {
+    return;
+  }
+
+  if (target.classList.contains('effects__label')) {
+    target = target.querySelector('span');
+  }
+
+  if (target.classList.contains('effects__preview')) {
+    if (currentEffect !== '') {
+      imageElement.classList.remove(currentEffect);
+    }
+  }
+
+  currentEffect = target.classList[1];
+  imageElement.classList.add(currentEffect);
+
+  setSliderOptions(currentEffect.replace('effects__preview--', ''));
+  imageElement.style.filter = effects[currentEffect.replace('effects__preview--', '')]();
+};
+
+const onSliderChange = () => {
+  effectLevel.value = sliderElement.noUiSlider.get();
+  imageElement.style.filter = effects[currentEffect.replace('effects__preview--', '')]();
+};
+
+filtersList.addEventListener('click', onFilterListClick);
+sliderElement.noUiSlider.on('change', onSliderChange);
+
+export {setDefaultFilter};