Merge pull request #7 from MaksimRozov/module9-task1

index.html

@@ -5,6 +5,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" href="css/normalize.css">
+  <link rel="stylesheet" href="vendor/nouislider/nouislider.css">
   <link rel="stylesheet" href="css/style.css">
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
   <title>Кекстаграм</title>
@@ -31,7 +32,7 @@ <h2 class="pictures__title  visually-hidden">Фотографии других 
       <section class="img-upload">
         <div class="img-upload__wrapper">
           <h2 class="img-upload__title  visually-hidden">Загрузка фотографии</h2>
-          <form class="img-upload__form" id="upload-select-image" autocomplete="off">
+          <form class="img-upload__form" id="upload-select-image" method="post" action=" https://31.javascript.htmlacademy.pro/kekstagram" enctype='multipart/form-data' autocomplete="off">
 
             <!-- Изначальное состояние поля для загрузки изображения -->
             <fieldset class="img-upload__start">
@@ -235,6 +236,8 @@ <h2 class="data-error__title">Не удалось загрузить данны
     </section>
   </template>
 
+  <script src="vendor/pristine/pristine.min.js"></script>
+  <script src="vendor/nouislider/nouislider.js"></script>
   <script src="js/main.js" type="module"></script>
 </body>
 

js/add-effects/index.js

@@ -0,0 +1,31 @@
+const scaleControlSmaller = document.querySelector('.scale__control--smaller');
+const scaleControlBigger = document.querySelector('.scale__control--bigger');
+const scaleControlValue = document.querySelector('.scale__control--value');
+const uploaPreviewImage = document.querySelector('.img-upload__preview img');
+
+const STEP_SCALE = 25;
+const MIN_SCALE = 25;
+const MAX_SCALE = 100;
+
+const onIncreaseScale = () => {
+  const scaleValue = parseInt(scaleControlValue.value, 10);
+  const scaleCount = scaleValue + STEP_SCALE;
+  const scaleLimited = scaleValue >= MAX_SCALE ? MAX_SCALE : scaleCount;
+  scaleControlValue.value = `${scaleLimited}%`;
+  uploaPreviewImage.style.transform = `scale(${scaleLimited / 100})`;
+};
+
+const onDecreaseScale = () => {
+  const scaleValue = parseInt(scaleControlValue.value, 10);
+  const scaleCount = scaleValue - STEP_SCALE;
+  const scaleLimited = scaleValue <= MIN_SCALE ? MIN_SCALE : scaleCount;
+  scaleControlValue.value = `${scaleLimited}%`;
+  uploaPreviewImage.style.transform = `scale(${scaleLimited / 100})`;
+};
+
+const scaleListener = () => {
+  scaleControlBigger.addEventListener('click', onIncreaseScale);
+  scaleControlSmaller.addEventListener('click', onDecreaseScale);
+};
+
+export {scaleListener};

js/create-thumbnails/index.js

@@ -1,13 +1,12 @@
 import {photoItems} from '../generate-data';
-import {onOpenBigPicture } from '../showLargePicture';
+import {onOpenBigPicture } from '../show-large-picture';
 
 const pictureTemplate = document.querySelector('#picture').content.querySelector('.picture');
 const pictureList = document.querySelector('.pictures');
 const createPhotoUsers = photoItems();
 
 const addPhotoThumbnailsUsers = () => {
   const listFragmentPhoto = document.createDocumentFragment();
-
   createPhotoUsers.forEach((element) => {
     const pictureItem = pictureTemplate.cloneNode(true);
     const pictureImage = pictureItem.querySelector('.picture__img');
@@ -18,9 +17,7 @@ const addPhotoThumbnailsUsers = () => {
     pictureItem.querySelector('.picture__comments').textContent = element.comments.length;
     listFragmentPhoto.appendChild(pictureItem);
   });
-
   return pictureList.appendChild(listFragmentPhoto);
-
 };
 
 pictureList.addEventListener('click', (evt) => {

js/generate-data/createComments.js

@@ -1,7 +1,6 @@
 import {getRandomInteger, createId, getRandomArrayElement} from '../util';
 import {NAMES, MESSAGES} from '../data';
 
-
 const AVATAR_MIN = 1;
 const AVATAR_MAX = 6;
 const COMMENTS_MIN = 0;

js/main.js

@@ -1,3 +1,11 @@
 import {addPhotoThumbnailsUsers} from './create-thumbnails';
+import {onOpenChangePhotoListener} from './upload-photo';
+import {validateListener} from './validation-form';
+import {scaleListener} from './add-effects';
+import {effectCheckedListener} from './slider-effects';
 
+effectCheckedListener();
+scaleListener();
+validateListener();
+onOpenChangePhotoListener();
 addPhotoThumbnailsUsers();

js/showLargePicture/createComments.js → js/show-large-picture/createComments.js

@@ -1,8 +1,8 @@
 import {buttonShowMore, socialCommentsList, commentShownCount, socialCommentChild} from './elementVariables';
+
 const LIMITED_DISPLAY_COMMENTS = 5;
 const arrayComments = [];
 
-
 const createComment = (comments) => {
   const socialComment = document.createElement('li');
   socialComment.classList.add('social__comment');
@@ -42,15 +42,12 @@ const onShowMoreComments = () =>{
   }
 };
 
-
 const renderComments = (element) => {
   arrayComments.splice(0, arrayComments.length) ;
   arrayComments.push(...element);
   socialCommentsList.innerHTML = '';
-
   buttonShowMore.addEventListener('click', onShowMoreComments);
   onShowMoreComments();
 };
 
-
 export {renderComments, onShowMoreComments};

js/showLargePicture/index.js → js/show-large-picture/index.js

@@ -1,23 +1,16 @@
 import { bigPictureBlock, bigPictureCancel, bigPictureImg, likesCount, commentTotalCount, socialCaption, socialCommentsList, buttonShowMore} from './elementVariables';
 import {renderComments, onShowMoreComments} from './createComments';
-
-
-const toggleClass = (isOpened = true) =>{
-  document.body.classList.toggle('modal-open');
-  bigPictureBlock.classList.toggle('hidden', !isOpened);
-};
+import {toggleClass} from '../util';
 
 const onCloseBigPicture = () => {
-  toggleClass(false);
+  toggleClass(bigPictureBlock, false);
   socialCommentsList.innerHTML = '';
   buttonShowMore.classList.remove('hidden');
-
   buttonShowMore.removeEventListener('click', onShowMoreComments);
   bigPictureCancel.removeEventListener('click', onCloseBigPicture);
   document.removeEventListener('keydown', onCloseBigPictureEsc);
 };
 
-
 const addInformation = ({url, description, likes, comments}) =>{
   bigPictureImg.src = url;
   bigPictureImg.alt = description;
@@ -28,9 +21,8 @@ const addInformation = ({url, description, likes, comments}) =>{
 
 const onOpenBigPicture = (element) => {
   addInformation(element);
-  toggleClass();
+  toggleClass(bigPictureBlock);
   renderComments(element.comments);
-
   document.addEventListener('keydown', onCloseBigPictureEsc);
   bigPictureCancel.addEventListener('click', onCloseBigPicture);
 };
@@ -42,6 +34,5 @@ function onCloseBigPictureEsc(evt){
   }
 }
 
-
 export {onOpenBigPicture};
 

js/slider-effects/effect-data.js

@@ -0,0 +1,51 @@
+export const DEFAULT_MIN = 0;
+export const DEFAULT_MAX = 100;
+export const DEFAULT_START = 0;
+
+export const EFFECTS = [
+  {
+    name: 'chrome',
+    style: 'grayscale',
+    min: 0,
+    max: 1,
+    step: 0.1,
+    start: 1,
+    unit: ' ',
+  },
+  {
+    name: 'sepia',
+    style: 'sepia',
+    min: 0,
+    max: 1,
+    step: 0.1,
+    start: 1,
+    unit: ' ',
+  },
+  {
+    name: 'marvin',
+    style: 'invert',
+    min: 0,
+    max: 100,
+    step: 1,
+    start: 100,
+    unit: '%',
+  },
+  {
+    name: 'phobos',
+    style: 'blur',
+    min: 0,
+    max: 3,
+    step: 0.1,
+    start: 3,
+    unit: 'px',
+  },
+  {
+    name: 'heat',
+    style: 'brightness',
+    min: 1,
+    max: 3,
+    step: 0.1,
+    start: 3,
+    unit: ' ',
+  },
+];

js/slider-effects/index.js

@@ -0,0 +1,49 @@
+import {effectLevelSliderParrent, effectLevelSlider, effectLevelInput, effectChecked, uploaPreviewImage} from './slider-variables';
+import {EFFECTS, DEFAULT_MIN, DEFAULT_MAX, DEFAULT_START } from './effect-data';
+
+const sliderVisableToggle = (isShown = true) => {
+  effectLevelSliderParrent.classList.toggle('hidden', isShown);
+};
+
+const searhEffect = (value, array) => array.find((element) => element.name === value);
+
+noUiSlider.create(effectLevelSlider, {
+  range: {
+    min: DEFAULT_MIN,
+    max: DEFAULT_MAX,
+  },
+  start: DEFAULT_START,
+  connect: 'lower'
+});
+
+const sliderUpdateOptions = (value) => {
+  const effect = searhEffect(value, EFFECTS);
+  if(!effect){
+    sliderVisableToggle();
+    uploaPreviewImage.style.removeProperty('filter');
+    return;
+  }
+  const {min, max, start, step, unit} = effect;
+  sliderVisableToggle(false);
+  effectLevelSlider.noUiSlider.updateOptions({
+    range: {
+      min: min,
+      max: max,
+    },
+    start: start,
+    step: step
+  });
+  effectLevelSlider.noUiSlider.on('update', () => {
+    const effectLevelInputValue = effectLevelSlider.noUiSlider.get();
+    effectLevelInput.value = effectLevelInputValue;
+    uploaPreviewImage.style.filter = `${effect.style}(${effectLevelInputValue}${unit})`;
+  });
+};
+
+export const effectCheckedListener = () => {
+  effectChecked.addEventListener('change', (evt) => {
+    if (evt.target.checked) {
+      sliderUpdateOptions(evt.target.value);
+    }
+  });
+};

js/slider-effects/slider-variables.js

@@ -0,0 +1,5 @@
+export const effectLevelSliderParrent = document.querySelector('.img-upload__effect-level');
+export const effectLevelSlider = effectLevelSliderParrent.querySelector('.effect-level__slider');
+export const effectLevelInput = document.querySelector('.effect-level__value');
+export const effectChecked = document.querySelector('.effects');
+export const uploaPreviewImage = document.querySelector('.img-upload__preview img');

js/upload-photo/index.js

@@ -0,0 +1,64 @@
+import {toggleClass} from '../util';
+import {imgUploadInput, imgUpoadOverlay, imgUploadancel} from './uploadPhotoVariables';
+import {inputTextHashtag, commentForm} from '../validation-form';
+const effectsPreview = document.querySelectorAll('.effects__preview');
+
+const effectLevelSliderParrent = document.querySelector('.img-upload__effect-level');
+const uploaPreviewImage = document.querySelector('.img-upload__preview img');
+
+const onCloseChangePhoto = () => {
+  toggleClass(imgUpoadOverlay, false);
+  imgUploadInput.value = '';
+  uploaPreviewImage.style.removeProperty('filter');
+  uploaPreviewImage.style.removeProperty('transform');
+  document.removeEventListener('keydown', onCloseChangePhotoEsc);
+  imgUploadancel.removeEventListener('click', onCloseChangePhoto);
+
+};
+
+function onCloseChangePhotoEsc(evt){
+  if (evt.key === 'Escape' && !(document.activeElement === inputTextHashtag || document.activeElement === commentForm)) {
+    onCloseChangePhoto();
+  } else {
+    evt.stopPropagation();
+  }
+}
+
+const selectImage = (evt) => {
+  const files = evt.target.files;
+  const countFiles = files.length;
+  const selectedFile = files[0];
+  const reader = new FileReader();
+
+  if (!countFiles) {
+    return;
+  }
+
+  if (!/^image/.test(selectedFile.type)) {
+    return;
+  }
+
+  reader.readAsDataURL(selectedFile);
+
+  reader.addEventListener('load', (e) => {
+    uploaPreviewImage.src = e.target.result;
+    effectsPreview.forEach((element) => {
+      element.style.backgroundImage = `url(${e.target.result})`;
+    });
+  });
+};
+
+const onOpenChangePhoto = (evt) => {
+  toggleClass(imgUpoadOverlay);
+  selectImage(evt);
+  effectLevelSliderParrent.classList.add('hidden');
+  document.addEventListener('keydown', onCloseChangePhotoEsc);
+  imgUploadancel.addEventListener('click', onCloseChangePhoto);
+
+};
+
+const onOpenChangePhotoListener = () => {
+  imgUploadInput.addEventListener('change', onOpenChangePhoto);
+};
+
+export {onOpenChangePhotoListener};

js/upload-photo/uploadPhotoVariables.js

@@ -0,0 +1,3 @@
+export const imgUploadInput = document.querySelector('.img-upload__input');
+export const imgUpoadOverlay = document.querySelector('.img-upload__overlay');
+export const imgUploadancel = imgUpoadOverlay.querySelector('.img-upload__cancel');

js/util/index.js

@@ -1,4 +1,3 @@
-
 const getRandomInteger = (a, b) => {
   const lower = Math.ceil(Math.min(a, b));
   const upper = Math.floor(Math.max(a, b));
@@ -16,5 +15,9 @@ const createId = () => {
 
 const getRandomArrayElement = (elements) => elements[getRandomInteger(0, elements.length - 1)];
 
+const toggleClass = (className, isOpened = true) =>{
+  className.classList.toggle('hidden', !isOpened);
+  document.body.classList.toggle('modal-open');
+};
 
-export {getRandomInteger, createId, getRandomArrayElement};
+export {getRandomInteger, createId, getRandomArrayElement, toggleClass};