From 0ea29fac82b4cb2097f89955c609b8a375791aa7 Mon Sep 17 00:00:00 2001 From: Ayronhayd <128861928+Ayronhayd@users.noreply.github.com> Date: Tue, 2 Apr 2024 20:10:00 +0300 Subject: [PATCH 1/9] =?UTF-8?q?+13=20=D0=BE=D1=82=D0=BF=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=BA=D0=B0=20=D0=B4=D0=B0=D0=BD=D1=8B=D1=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/components/123.js | 66 ++++++++++++++++++++++++++++++++++++++++++++ js/components/api.js | 2 +- 2 files changed, 67 insertions(+), 1 deletion(-) create mode 100644 js/components/123.js diff --git a/js/components/123.js b/js/components/123.js new file mode 100644 index 0000000..05d51ef --- /dev/null +++ b/js/components/123.js @@ -0,0 +1,66 @@ +const SERVER_URL = 'https://30.javascript.pages.academy/kekstagram'; + +const ServerRoute = { + GET_DATA: '/data', + SEND_DATA: '/', +}; + +const Method = { + GET: 'GET', + POST: 'POST', +}; + +const ErrorText = { + [Method.GET]: 'Не удалось загрузить данные', + [Method.POST]: 'Ошибка загрузки файла' +}; + +const request = async (url, method = Method.GET, body = null) => { + const response = await fetch(url, { method, body }); + if (!response.ok) { + throw new Error(ErrorText[method]); + } + + return response.json(); +}; + +const loadPictures = async () => request(SERVER_URL + ServerRoute.GET_DATA); + +const sendPicture = async (pictureData) => + request( + SERVER_URL + ServerRoute.SEND_DATA, + Method.POST, + pictureData + ); + +export { sendPicture }; +export { loadPictures }; + +const BASE_URL = 'https://31.javascript.htmlacademy.pro/kekstagram'; +const Route = { + GET_DATA: '/data', + SEND_DATA: '/', +}; +const Method = { + GET: 'GET', + POST: 'POST', +}; + +const load = (route, method = Method.GET, body = null) => + fetch(`${BASE_URL}${route}`, { method, body }) + .then((response) => { + if (!response.ok) { + throw new Error(); + } + return response.json(); + }) + .catch(() => { + throw new Error(); + }); + +const getData = () => load(Route.GET_DATA); + +const sendData = (body) => load(Route.SEND_DATA, Method.POST, body); + +export { getData, sendData }; + diff --git a/js/components/api.js b/js/components/api.js index d4ec14c..f051430 100644 --- a/js/components/api.js +++ b/js/components/api.js @@ -18,7 +18,7 @@ const getData = async (onSuccess, onFail) => { const sendData = async (onSuccess, onFail, body) => { try { const response = await fetch( - 'https://31.javascript.htmlacademy.pro/kekstagram', + 'https://31.javascript.htmlacademy.pro/kekstagram/', { method: 'POST', body, From 894fa2b419eabc2115536d1c679b321eac66a145 Mon Sep 17 00:00:00 2001 From: Ayronhayd <128861928+Ayronhayd@users.noreply.github.com> Date: Tue, 2 Apr 2024 20:46:14 +0300 Subject: [PATCH 2/9] =?UTF-8?q?=20=D0=9E=D1=81=D1=82=D0=B0=D0=BB=D0=BE?= =?UTF-8?q?=D1=81=D1=8C=20=D0=9F=D1=80=D0=B8=20=D0=BE=D1=82=D0=BC=D0=B5?= =?UTF-8?q?=D0=BD=D0=B5=20=D1=84=D0=BE=D1=80=D0=BC=D0=B0=20=D0=B7=D0=B0?= =?UTF-8?q?=D0=BA=D1=80=D1=8B=D0=B2=D0=B0=D0=B5=D1=82=D1=81=D1=8F=20=D0=B8?= =?UTF-8?q?=20=D0=BE=D1=87=D0=B8=D1=89=D0=B0=D0=B5=D1=82=D1=81=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/components/123.js | 66 ---------------------------------------- js/components/message.js | 15 +++------ 2 files changed, 5 insertions(+), 76 deletions(-) delete mode 100644 js/components/123.js diff --git a/js/components/123.js b/js/components/123.js deleted file mode 100644 index 05d51ef..0000000 --- a/js/components/123.js +++ /dev/null @@ -1,66 +0,0 @@ -const SERVER_URL = 'https://30.javascript.pages.academy/kekstagram'; - -const ServerRoute = { - GET_DATA: '/data', - SEND_DATA: '/', -}; - -const Method = { - GET: 'GET', - POST: 'POST', -}; - -const ErrorText = { - [Method.GET]: 'Не удалось загрузить данные', - [Method.POST]: 'Ошибка загрузки файла' -}; - -const request = async (url, method = Method.GET, body = null) => { - const response = await fetch(url, { method, body }); - if (!response.ok) { - throw new Error(ErrorText[method]); - } - - return response.json(); -}; - -const loadPictures = async () => request(SERVER_URL + ServerRoute.GET_DATA); - -const sendPicture = async (pictureData) => - request( - SERVER_URL + ServerRoute.SEND_DATA, - Method.POST, - pictureData - ); - -export { sendPicture }; -export { loadPictures }; - -const BASE_URL = 'https://31.javascript.htmlacademy.pro/kekstagram'; -const Route = { - GET_DATA: '/data', - SEND_DATA: '/', -}; -const Method = { - GET: 'GET', - POST: 'POST', -}; - -const load = (route, method = Method.GET, body = null) => - fetch(`${BASE_URL}${route}`, { method, body }) - .then((response) => { - if (!response.ok) { - throw new Error(); - } - return response.json(); - }) - .catch(() => { - throw new Error(); - }); - -const getData = () => load(Route.GET_DATA); - -const sendData = (body) => load(Route.SEND_DATA, Method.POST, body); - -export { getData, sendData }; - diff --git a/js/components/message.js b/js/components/message.js index 413c8ed..df81bf7 100644 --- a/js/components/message.js +++ b/js/components/message.js @@ -6,22 +6,18 @@ const showSuccessMessage = () => { body.append(successMessage); body.addEventListener('keydown', onEscDown); body.addEventListener('click', onBodyClick); - successMessage - .querySelector('.success__button') - .addEventListener('click', hideMessage); + successMessage.querySelector('.success__button').addEventListener('click', hideMessage); }; const showErrorMessage = () => { body.append(errorMessage); body.addEventListener('keydown', onEscDown); - errorMessage - .querySelector('.error__button') - .addEventListener('click', hideMessage); + body.addEventListener('click', onBodyClick); + errorMessage.querySelector('.error__button').addEventListener('click', hideMessage); }; function hideMessage() { - const messageElement = - document.querySelector('.success') || document.querySelector('.error'); + const messageElement = document.querySelector('.success') || document.querySelector('.error'); messageElement.remove(); body.removeEventListener('keydown', onEscDown); body.removeEventListener('click', onBodyClick); @@ -29,8 +25,7 @@ function hideMessage() { function onBodyClick(evt) { if ( - evt.target.closest('.success__inner') || - evt.target.closest('.error__inner') + evt.target.closest('.success__inner') || evt.target.closest('.error__inner') ) { return; } From 4a2cb1246d24971e0b5e1470835fef5b85da9628 Mon Sep 17 00:00:00 2001 From: Ayronhayd <128861928+Ayronhayd@users.noreply.github.com> Date: Tue, 2 Apr 2024 21:14:24 +0300 Subject: [PATCH 3/9] =?UTF-8?q?=D0=9E=D1=82=D0=BF=D1=80=D0=B0=D0=B2=D0=BA?= =?UTF-8?q?=D0=B0=20=D0=B4=D0=B0=D0=BD=D0=BD=D1=8B=D1=85=20=D0=B3=D0=BE?= =?UTF-8?q?=D1=82=D0=BE=D0=B2=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/components/form.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/form.js b/js/components/form.js index 00a60f7..ff22937 100644 --- a/js/components/form.js +++ b/js/components/form.js @@ -103,7 +103,7 @@ const hideModal = () => { form.reset(); resetScale(); resetEffects(); - + pristine.reset(); document.removeEventListener('keydown', onEscapeKeydown); }; From 71e601dadbec61626d41359d65a5910702949c53 Mon Sep 17 00:00:00 2001 From: Ayronhayd <128861928+Ayronhayd@users.noreply.github.com> Date: Wed, 3 Apr 2024 20:05:46 +0300 Subject: [PATCH 4/9] =?UTF-8?q?4.8=20=D0=B3=D0=BE=D1=82=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/data/render-comments.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/js/data/render-comments.js b/js/data/render-comments.js index 53c2d15..cc8bbdc 100644 --- a/js/data/render-comments.js +++ b/js/data/render-comments.js @@ -30,6 +30,7 @@ const renderComments = (comments, bigPicture) => { const shownComments = () => { const startIndex = commentsShown * COMMENTS_PORTION; commentsShown++; + const endIndex = Math.min( startIndex + COMMENTS_PORTION, comments.length @@ -37,16 +38,12 @@ const renderComments = (comments, bigPicture) => { const slicedComments = comments.slice(startIndex, endIndex); + commentsLoader.classList.toggle('hidden', endIndex === comments.length); + slicedComments.forEach((comment) => { commentList.append(createComment(comment, template)); }); - if (startIndex >= comments.length) { - commentsLoader.classList.add('hidden'); - commentsShown = comments.length; - } else { - commentsLoader.classList.remove('hidden'); - } commentShowCount.textContent = endIndex; }; From 77b0f29bc10c22d957f184d432a61c6e31d3e25e Mon Sep 17 00:00:00 2001 From: Ayronhayd <128861928+Ayronhayd@users.noreply.github.com> Date: Sat, 6 Apr 2024 11:37:21 +0300 Subject: [PATCH 5/9] 2.2 --- js/components/photo-filters.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/js/components/photo-filters.js b/js/components/photo-filters.js index 21cdfd9..c52ecee 100644 --- a/js/components/photo-filters.js +++ b/js/components/photo-filters.js @@ -1,7 +1,8 @@ const form = document.querySelector('.img-upload__form'); -const image = document.querySelector('.img-upload__preview img'); -const sliderElement = document.querySelector('.effect-level__slider'); -const effectLevel = document.querySelector('.effect-level__value'); +const image = form.querySelector('.img-upload__preview img'); +const sliderUpload = form.querySelector('.img-upload__effect-level'); +const sliderElement = form.querySelector('.effect-level__slider'); +const effectLevel = form.querySelector('.effect-level__value'); const EFFECTS = [ { @@ -57,6 +58,7 @@ let chosenEffect = DEFAULT_EFFECT; const isDefault = () => chosenEffect === DEFAULT_EFFECT; const updateSlider = () => { + sliderUpload.classList.remove('hidden'); sliderElement.classList.remove('hidden'); sliderElement.noUiSlider.updateOptions({ range: { @@ -68,6 +70,7 @@ const updateSlider = () => { }); if (isDefault()) { + sliderUpload.classList.add('hidden'); sliderElement.classList.add('hidden'); } }; @@ -87,7 +90,7 @@ const onSliderUpdate = () => { if (isDefault()) { return; } - const sliderValue = sliderElement.noUiSlider.get(); + const sliderValue = Number(sliderElement.noUiSlider.get()); image.style.filter = `${chosenEffect.style}(${sliderValue}${chosenEffect.unit})`; image.classList.add(`effects__preview--${chosenEffect.name}`); effectLevel.value = sliderValue; From d155e7a283cd41d2f4b29035ff0fef30405ef9d8 Mon Sep 17 00:00:00 2001 From: Ayronhayd <128861928+Ayronhayd@users.noreply.github.com> Date: Sat, 6 Apr 2024 11:42:44 +0300 Subject: [PATCH 6/9] 4.2 --- js/utils/show-alert.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/utils/show-alert.js b/js/utils/show-alert.js index 55a169f..8e73155 100644 --- a/js/utils/show-alert.js +++ b/js/utils/show-alert.js @@ -2,6 +2,7 @@ const ALERT_SHOW_TIME = 5000; const showAlert = (message) => { const alert = document.createElement('div'); + alert.classList.add('data-error'); alert.style.position = 'absolute'; alert.style.zIndex = '100'; alert.style.left = '0'; From be8ac4cd359b7d267f745464a62865f7bffc4cd6 Mon Sep 17 00:00:00 2001 From: Ayronhayd <128861928+Ayronhayd@users.noreply.github.com> Date: Sat, 6 Apr 2024 12:37:56 +0300 Subject: [PATCH 7/9] 4.4 + id --- js/components/show-big-picture.js | 2 +- js/data/render-pictures.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/js/components/show-big-picture.js b/js/components/show-big-picture.js index bfb412d..f6c6cdf 100644 --- a/js/components/show-big-picture.js +++ b/js/components/show-big-picture.js @@ -40,7 +40,7 @@ const showBigPicture = ({ const likesCount = bigPicture.querySelector('.likes-count'); img.src = url; - socialCaption.alt = description; + socialCaption.textContent = description; socialComment.textContent = comments.length; likesCount.textContent = likes; diff --git a/js/data/render-pictures.js b/js/data/render-pictures.js index 0529e3d..c0fa116 100644 --- a/js/data/render-pictures.js +++ b/js/data/render-pictures.js @@ -5,13 +5,14 @@ const pictureTemplate = document.querySelector('#picture') const container = document.querySelector('.pictures'); const createPicture = (data) => { - const {url , description, comments, likes, } = data; + const { id, url , description, comments, likes, } = data; const picture = pictureTemplate.cloneNode(true); const img = picture.querySelector('.picture__img'); const pictureComment = picture.querySelector('.picture__comments'); const pictureLikes = picture.querySelector('.picture__likes'); + picture.setAttribute('id', id); img.src = url; img.alt = description; pictureComment.textContent = comments.length; From 215ab50487b1025f1d4e41bc3a01ac664d930c6a Mon Sep 17 00:00:00 2001 From: Ayronhayd <128861928+Ayronhayd@users.noreply.github.com> Date: Sat, 6 Apr 2024 12:52:29 +0300 Subject: [PATCH 8/9] =?UTF-8?q?=D0=B0=D1=80=D1=85=D0=B8=D1=82=D0=B5=D0=BA?= =?UTF-8?q?=D1=82=D1=83=D1=80=D0=BD=D0=B0=D1=8F=20=D0=BF=D1=80=D0=BE=D0=B1?= =?UTF-8?q?=D0=BB=D0=B5=D0=BC=D0=B0=D0=B1=20zIndex=3D=203=20alert?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/{data => components}/render-comments.js | 0 js/{data => components}/render-pictures.js | 4 +++- js/components/show-big-picture.js | 2 +- js/{components => data}/api.js | 0 js/main.js | 4 ++-- js/utils/show-alert.js | 2 +- 6 files changed, 7 insertions(+), 5 deletions(-) rename js/{data => components}/render-comments.js (100%) rename js/{data => components}/render-pictures.js (93%) rename js/{components => data}/api.js (100%) diff --git a/js/data/render-comments.js b/js/components/render-comments.js similarity index 100% rename from js/data/render-comments.js rename to js/components/render-comments.js diff --git a/js/data/render-pictures.js b/js/components/render-pictures.js similarity index 93% rename from js/data/render-pictures.js rename to js/components/render-pictures.js index c0fa116..4670feb 100644 --- a/js/data/render-pictures.js +++ b/js/components/render-pictures.js @@ -1,9 +1,10 @@ -import { showBigPicture} from '../components/show-big-picture.js'; +import { showBigPicture} from './show-big-picture.js'; const pictureTemplate = document.querySelector('#picture') .content.querySelector('.picture'); const container = document.querySelector('.pictures'); + const createPicture = (data) => { const { id, url , description, comments, likes, } = data; @@ -25,6 +26,7 @@ const createPicture = (data) => { return picture; }; + const renderPictures = (pictures) => { const fragment = document.createDocumentFragment(); pictures.forEach((picture) => { diff --git a/js/components/show-big-picture.js b/js/components/show-big-picture.js index f6c6cdf..b5cd0b6 100644 --- a/js/components/show-big-picture.js +++ b/js/components/show-big-picture.js @@ -1,4 +1,4 @@ -import { renderComments} from '../data/render-comments.js'; +import { renderComments} from './render-comments.js'; import { isEscKeyDown } from '../utils/is-esc-key-down.js'; diff --git a/js/components/api.js b/js/data/api.js similarity index 100% rename from js/components/api.js rename to js/data/api.js diff --git a/js/main.js b/js/main.js index 89a1fb1..7d0b80a 100644 --- a/js/main.js +++ b/js/main.js @@ -1,10 +1,10 @@ import { renderPictures -} from './data/render-pictures.js'; +} from './components/render-pictures.js'; import { getData, sendData -} from './components/api.js'; +} from './data/api.js'; import { showAlert } from './utils/show-alert'; diff --git a/js/utils/show-alert.js b/js/utils/show-alert.js index 8e73155..15d306b 100644 --- a/js/utils/show-alert.js +++ b/js/utils/show-alert.js @@ -4,7 +4,7 @@ const showAlert = (message) => { const alert = document.createElement('div'); alert.classList.add('data-error'); alert.style.position = 'absolute'; - alert.style.zIndex = '100'; + alert.style.zIndex = '3'; alert.style.left = '0'; alert.style.top = '0'; alert.style.right = '0'; From c2fde6c94952f4d3461fe0ff007b036a022a3f64 Mon Sep 17 00:00:00 2001 From: Ayronhayd <128861928+Ayronhayd@users.noreply.github.com> Date: Sat, 6 Apr 2024 13:40:34 +0300 Subject: [PATCH 9/9] =?UTF-8?q?5.3=20=20=D0=BD=D0=B5=D1=82=D1=83=20=D0=BE?= =?UTF-8?q?=D1=88=D0=B8=D0=B1=D0=BE=D0=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/components/filter.js | 5 +---- js/components/render-pictures.js | 1 + 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/js/components/filter.js b/js/components/filter.js index 7cb8465..c978005 100644 --- a/js/components/filter.js +++ b/js/components/filter.js @@ -8,8 +8,7 @@ const Filter = { }; const filtersElement = document.querySelector('.img-filters'); -const picturesContainer = document.querySelector('.pictures'); -const picturesUploadForm = document.querySelector('.img-upload'); + let currentFilter = ''; let pictures = []; @@ -48,8 +47,6 @@ const setOnFilterClick = (cb) => { if (clickedButton.id === currentFilter) { return; } - picturesContainer.innerHTML = ''; - picturesContainer.append(picturesUploadForm); filtersElement .querySelector('.img-filters__button--active') .classList.remove('img-filters__button--active'); diff --git a/js/components/render-pictures.js b/js/components/render-pictures.js index 4670feb..94ac5cc 100644 --- a/js/components/render-pictures.js +++ b/js/components/render-pictures.js @@ -28,6 +28,7 @@ const createPicture = (data) => { const renderPictures = (pictures) => { + container.querySelectorAll('.picture').forEach((picture) => picture.remove()); const fragment = document.createDocumentFragment(); pictures.forEach((picture) => { const pictureElement = createPicture(picture);