Merge pull request #16 from PavelUd/master

index.html

@@ -231,7 +231,6 @@ <h2 class="success__title">Изображение успешно загруже
   <template id="messages">
     <div class="img-upload__message  img-upload__message--loading">Загружаем...</div>
   </template>
-  <script type="text/javascript" src="js/functions.js"></script>
   <script src="nouislider/nouislider.js"></script>
   <script src="pristine/Pristine-master/dist/pristine.min.js"></script>
   <script type="module" src="js/main.js"></script>

js/filters.js

@@ -1,5 +1,6 @@
 import {thumbnailsRender, destroyThumbnails} from './thumbnails.js';
 import{shuffle, sortByCommentCountDescending, debounce} from './util.js';
+import { renderBigPicture } from './fullsize-images-render.js';
 
 const HIDDEN_CLASS = 'img-filters--inactive';
 const ACTIVE_FILTER_CLASS = 'img-filters__button--active';
@@ -30,15 +31,17 @@ const onFiltersFormClick = (evt) =>{
     filtersForm.querySelector(`#${activeFilter}`).classList.remove(ACTIVE_FILTER_CLASS);
     evt.target.classList.add(ACTIVE_FILTER_CLASS);
     activeFilter = id;
+    const pictures = filterFinction[id]();
     destroyThumbnails();
-    thumbnailsRender(filterFinction[id]());
+    thumbnailsRender(pictures);
+    renderBigPicture(pictures);
   }
 };
 
 export const initFilters = (data) =>{
   photos = data.slice();
   filtersContainer.classList.remove(HIDDEN_CLASS);
   filtersForm.addEventListener('click', debounce(onFiltersFormClick));
-
   thumbnailsRender(photos);
+  renderBigPicture(photos);
 };

js/form.js

@@ -51,16 +51,18 @@ const onFocusPreventClose = (evt) => {
   }
 };
 
-const onComentsKeydown = (evt) => () => onFocusPreventClose(evt);
-const onHashtagsKeydown = (evt) => () => onFocusPreventClose(evt);
+const onComentsKeydown = (evt) => onFocusPreventClose(evt);
+const onHashtagsKeydown = (evt) => onFocusPreventClose(evt);
 
 const onEscapeKeydown = (evt) => {
   if(isEscapeKey(evt)){
+    form.reset();
     closeOverlay();
   }
 };
 
 const onCancelButtonClick = () => {
+  form.reset();
   closeOverlay();
 };
 
@@ -87,17 +89,22 @@ const validateForm = () => {
   return pristine.validate();
 };
 
+
 const onFormSubmit = (evt) => {
   evt.preventDefault();
   if (validateForm()) {
     blockSubmitButton();
     sendData(new FormData(evt.target))
       .then(() =>{
-        closeOverlay();
         showSuccessMessage();
+        form.reset();
       })
       .catch(showErrorMessage)
-      .finally(unblockSubmitButton);
+      .finally(() => {
+        unblockSubmitButton();
+        closeOverlay();
+      }
+      );
   }
 };
 
@@ -110,7 +117,6 @@ function closeOverlay () {
   document.removeEventListener('keydown', onEscapeKeydown);
   destroyScaleButtons();
   resetFilters();
-  form.reset();
 }
 
 const uploadFile = () => {
@@ -135,6 +141,7 @@ const onUploadButtonChange = () => {
 };
 
 export const renderUploadForm = () => {
+
   uploadButton.addEventListener('change', onUploadButtonChange);
   createEffectSlider();
 };

js/fullsize-images-render.js

@@ -1,3 +1,5 @@
+import { isEscapeKey } from './util.js';
+
 const LIMIT = 5;
 const bigPicture = document.querySelector('.big-picture');
 const commentsCount = bigPicture.querySelector('.comments-count');
@@ -51,7 +53,7 @@ const createCommentsBlock = () =>{
 };
 
 const onDocumentKeydown = (evt) => {
-  if (evt.key === 'Escape') {
+  if (isEscapeKey(evt)) {
     hideModal();
   }
 };
@@ -92,6 +94,7 @@ const showBigPicture = (picture, photoInfo, image) => {
   document.addEventListener('keydown', onDocumentKeydown);
 };
 
+
 export const renderBigPicture = (photoInfos) => {
   const pictures = document.querySelectorAll('.picture');
   photos = photoInfos.slice();

js/image-effects.js

@@ -18,9 +18,6 @@ const Effect = {
     options: {range: {min: 1, max: 4}, step: 0.1, start: 4},
   }
 };
-const DefaultSliderParam = {
-  range: {min: 0, max: 100}, start: 100, step: 0.1
-};
 
 const DEFAULT_FILTER = 'NONE';
 const image = document.querySelector('.img-upload__preview').querySelector('img');
@@ -31,7 +28,7 @@ const slider = document.querySelector('.effect-level__slider');
 
 export const createEffectSlider = () =>{
   sliderWrapper.classList.add('hidden');
-  noUiSlider.create(slider,  DefaultSliderParam);
+  noUiSlider.create(slider,  Effect[DEFAULT_FILTER].options);
 };
 
 export const resetFilters = () => {

js/util.js

@@ -1,4 +1,4 @@
-const TIMEOUT_DELAY = 250;
+const TIMEOUT_DELAY = 500;
 const ALERT_SHOW_TIME = 5000;
 
 const shuffle = (arr) => arr.map((element) => [Math.random(), element])