Merge pull request #12 from suntira/module12-task1

Author: keksobot

index.html

@@ -35,7 +35,7 @@ <h2 class="img-upload__title  visually-hidden">Загрузка фотограф
 
             <!-- Изначальное состояние поля для загрузки изображения -->
             <fieldset class="img-upload__start">
-              <input type="file" id="upload-file" class="img-upload__input  visually-hidden" name="filename" required>
+              <input type="file" id="upload-file" class="img-upload__input  visually-hidden" name="filename" required accept=".jpg,.jpeg,.png">
               <label for="upload-file" class="img-upload__label  img-upload__control">Загрузить</label>
             </fieldset>
 

js/filters.js

@@ -0,0 +1,62 @@
+import { renderGallery } from './gallery.js';
+import { debounce } from './util.js';
+
+const filtersContainer = document.querySelector('.img-filters');
+const filtersForm = filtersContainer.querySelector('.img-filters__form');
+
+const RANDOM_PHOTOS_COUNT = 10;
+
+let photos = [];
+
+const clearGallery = () => {
+  document.querySelectorAll('.picture').forEach((picture) => {
+    picture.remove();
+  });
+};
+
+const getDefaultPhotos = () => photos.slice();
+
+const getRandomPhotos = () => {
+  const shuffled = photos.slice().sort(() => Math.random() - 0.5);
+  return shuffled.slice(0, RANDOM_PHOTOS_COUNT);
+};
+
+const getDiscussedPhotos = () =>
+  photos
+    .slice()
+    .sort((a, b) => b.comments.length - a.comments.length);
+
+const filterHandlers = {
+  default: getDefaultPhotos,
+  random: getRandomPhotos,
+  discussed: getDiscussedPhotos,
+};
+
+const applyFilter = (filter) => {
+  clearGallery();
+  renderGallery((filterHandlers[filter] || filterHandlers.default)());
+};
+
+const debouncedApplyFilter = debounce(applyFilter);
+
+const onFilterClick = (evt) => {
+  if (!evt.target.matches('button')) {
+    return;
+  }
+
+  const activeButton = filtersForm.querySelector('.img-filters__button--active');
+  activeButton.classList.remove('img-filters__button--active');
+  evt.target.classList.add('img-filters__button--active');
+
+  const filter = evt.target.id.replace('filter-', '');
+  debouncedApplyFilter(filter);
+};
+
+const initFilters = (loadedPhotos) => {
+  photos = loadedPhotos.slice();
+
+  filtersContainer.classList.remove('img-filters--inactive');
+  filtersForm.addEventListener('click', onFilterClick);
+};
+
+export { initFilters };

js/main.js

@@ -1,14 +1,19 @@
 import { renderGallery } from './gallery.js';
 import { initPhotoUploadForm } from './photo-upload-form.js';
 import { getData } from './api.js';
+import { initFilters } from './filters.js';
 import { showDataError } from './messages.js';
+import { initPhotoPreview } from './view-the-uploaded-photo.js';
 
 getData()
   .then((photos) => {
     renderGallery(photos);
+    initFilters(photos);
   })
   .catch(() => {
     showDataError();
   });
 
 initPhotoUploadForm();
+initPhotoPreview();
+

js/util.js

@@ -1,3 +1,4 @@
+const TIMEOUT_DELAY = 500;
 const body = document.body;
 
 const isEscapeKey = (evt) => evt.key === 'Escape';
@@ -13,4 +14,12 @@ const showModal = (modal, isShown = true) => {
   body.classList.remove('modal-open');
 };
 
-export { isEscapeKey, showModal};
+const debounce = (callback, timeoutDelay = TIMEOUT_DELAY) => {
+  let timeoutId;
+  return (...rest) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => callback.apply(this, rest), timeoutDelay);
+  };
+};
+
+export { isEscapeKey, showModal, debounce};

js/view-the-uploaded-photo.js

@@ -0,0 +1,33 @@
+const FILE_TYPES = ['jpg', 'jpeg', 'png'];
+
+const fileChooser = document.querySelector('.img-upload__input');
+const preview = document.querySelector('.img-upload__preview img');
+
+const effectPreviews = document.querySelectorAll('.effects__preview');
+
+const initPhotoPreview = () => {
+  fileChooser.addEventListener('change', () => {
+    const file = fileChooser.files[0];
+
+    if (!file) {
+      return;
+    }
+
+    const fileName = file.name.toLowerCase();
+    const matches = FILE_TYPES.some((type) => fileName.endsWith(type));
+
+    if (!matches) {
+      return;
+    }
+
+    const imageUrl = URL.createObjectURL(file);
+
+    preview.src = imageUrl;
+
+    effectPreviews.forEach((effectPreview) => {
+      effectPreview.style.backgroundImage = `url(${imageUrl})`;
+    });
+  });
+};
+
+export { initPhotoPreview };