-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #10 from OlegSulitskii/module9-task2
Module9-task2 (Помощь друга)
- Loading branch information
Showing
8 changed files
with
346 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,141 @@ | ||
| const imgUploadElement = document.querySelector('.img-upload__preview img'); | ||
| const effectLevelElement = document.querySelector('.img-upload__effect-level'); | ||
| const effectLevelValueElement = effectLevelElement.querySelector('.effect-level__value'); | ||
| const effectLevelSliderElement = effectLevelElement.querySelector('.effect-level__slider'); | ||
| const effectNoneElement = document.querySelector('#effect-none'); | ||
| const effectChromeElement = document.querySelector('#effect-chrome'); | ||
| const effectSepiaElement = document.querySelector('#effect-sepia'); | ||
| const effectMarvinElement = document.querySelector('#effect-marvin'); | ||
| const effectPhobosElement = document.querySelector('#effect-phobos'); | ||
| const effectHeatElement = document.querySelector('#effect-heat'); | ||
|
|
||
| noUiSlider.create(effectLevelSliderElement, { | ||
| range: { | ||
| min: 0, | ||
| max: 1, | ||
| }, | ||
| start: 1, | ||
| step: 0.1, | ||
| connect: 'lower', | ||
| format: { | ||
| to: function (value) { | ||
| if (Number.isInteger(value)) { | ||
| return value.toFixed(0); | ||
| } | ||
| return value.toFixed(1); | ||
| }, | ||
| from: function (value) { | ||
| return parseFloat(value); | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| const filterChange = (filter, unit) => { | ||
| effectLevelSliderElement.noUiSlider.on('update', () => { | ||
| effectLevelValueElement.setAttribute('value', effectLevelSliderElement.noUiSlider.get() + unit); | ||
| imgUploadElement.style.filter = `${ filter }(${ effectLevelValueElement.getAttribute('value') })`; | ||
| }); | ||
| }; | ||
|
|
||
| const resetEffects = () => { | ||
| effectLevelValueElement.removeAttribute('value'); | ||
| imgUploadElement.style.filter = ''; | ||
| effectLevelElement.classList.add('hidden'); | ||
| }; | ||
|
|
||
| const getSettingsEffectGrayscalSepia = () => { | ||
| effectLevelSliderElement.noUiSlider.updateOptions({ | ||
| range: { | ||
| min: 0, | ||
| max: 1, | ||
| }, | ||
| start: 1, | ||
| step: 0.1, | ||
| }); | ||
| }; | ||
|
|
||
| const getSettingsEffectMarvin = () => { | ||
| effectLevelSliderElement.noUiSlider.updateOptions({ | ||
| range: { | ||
| min: 0, | ||
| max: 100, | ||
| }, | ||
| start: 100, | ||
| step: 1, | ||
| }); | ||
| }; | ||
|
|
||
| const getSettingsEffectPhobos = () => { | ||
| effectLevelSliderElement.noUiSlider.updateOptions({ | ||
| range: { | ||
| min: 0, | ||
| max: 3, | ||
| }, | ||
| start: 3, | ||
| step: 0.1, | ||
| }); | ||
| }; | ||
|
|
||
| const getSettingsEffectHeat = () => { | ||
| effectLevelSliderElement.noUiSlider.updateOptions({ | ||
| range: { | ||
| min: 1, | ||
| max: 3, | ||
| }, | ||
| start: 3, | ||
| step: 0.1, | ||
| }); | ||
| }; | ||
|
|
||
| const effectsEventListener = () => { | ||
| effectNoneElement.addEventListener('change', (evt) => { | ||
| if (evt.target.checked) { | ||
| resetEffects(); | ||
| } | ||
| }); | ||
|
|
||
| effectChromeElement.addEventListener('change', (evt) => { | ||
| if (evt.target.checked) { | ||
| effectLevelElement.classList.remove('hidden'); | ||
| filterChange('grayscale',''); | ||
| getSettingsEffectGrayscalSepia(); | ||
| } | ||
| }); | ||
|
|
||
| effectSepiaElement.addEventListener('change', (evt) => { | ||
| if (evt.target.checked) { | ||
| effectLevelElement.classList.remove('hidden'); | ||
| filterChange('sepia',''); | ||
| getSettingsEffectGrayscalSepia(); | ||
| } | ||
| }); | ||
|
|
||
| effectMarvinElement.addEventListener('change', (evt) => { | ||
| if (evt.target.checked) { | ||
| effectLevelElement.classList.remove('hidden'); | ||
| filterChange('invert','%'); | ||
| getSettingsEffectMarvin(); | ||
| } | ||
| }); | ||
|
|
||
| effectPhobosElement.addEventListener('change', (evt) => { | ||
| if (evt.target.checked) { | ||
| effectLevelElement.classList.remove('hidden'); | ||
| filterChange('blur','px'); | ||
| getSettingsEffectPhobos(); | ||
| } | ||
| }); | ||
|
|
||
| effectHeatElement.addEventListener('change', (evt) => { | ||
| if (evt.target.checked) { | ||
| effectLevelElement.classList.remove('hidden'); | ||
| filterChange('brightness',''); | ||
| getSettingsEffectHeat(); | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| export { | ||
| effectsEventListener, | ||
| resetEffects | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| const imgUploadPreviewContainerElement = document.querySelector('.img-upload__preview-container'); | ||
| const imgUploadPreviewElement = imgUploadPreviewContainerElement.querySelector('.img-upload__preview'); | ||
| const imgUploadElement = imgUploadPreviewElement.querySelector('img'); | ||
| const scaleElement = imgUploadPreviewContainerElement.querySelector('.scale'); | ||
| const scaleControlValueElement = scaleElement.querySelector('.scale__control--value'); | ||
| const scaleControlSmallerElement = scaleElement.querySelector('.scale__control--smaller'); | ||
| const scaleControlBiggerElement = scaleElement.querySelector('.scale__control--bigger'); | ||
|
|
||
| const SCALE_STEP = 25; | ||
| const SCALE_MIN_VALUE = 25; | ||
| const SCALE_MAX_VALUE = 100; | ||
| const SCALE_NORMAL_VALUE = 100; | ||
|
|
||
| let currentScaleValue = SCALE_NORMAL_VALUE; | ||
|
|
||
| const scaleActions = () => { | ||
| scaleControlValueElement.setAttribute('value', `${currentScaleValue }%`); | ||
| const clearPersentValue = scaleControlValueElement.value.replace('%', '') * 0.01; | ||
| imgUploadElement.style.scale = clearPersentValue; | ||
| }; | ||
|
|
||
| const scaleControlSmallerElementClick = () => { | ||
| currentScaleValue = Math.max(currentScaleValue - SCALE_STEP, SCALE_MIN_VALUE); | ||
| scaleActions(); | ||
| }; | ||
|
|
||
| const scaleControlBiggerElementClick = () => { | ||
| currentScaleValue = Math.min(currentScaleValue + SCALE_STEP, SCALE_MAX_VALUE); | ||
| scaleActions(); | ||
| }; | ||
|
|
||
| const scaleControlEventListener = () => { | ||
| scaleControlSmallerElement.addEventListener(('click'), scaleControlSmallerElementClick); | ||
| scaleControlBiggerElement.addEventListener(('click'), scaleControlBiggerElementClick); | ||
| scaleActions(); | ||
| }; | ||
|
|
||
| const normalizeScale = () => { | ||
| scaleControlSmallerElement.removeEventListener(('click'), scaleControlSmallerElementClick); | ||
| scaleControlBiggerElement.removeEventListener(('click'), scaleControlBiggerElementClick); | ||
| currentScaleValue = SCALE_NORMAL_VALUE; | ||
| scaleActions(); | ||
| }; | ||
|
|
||
| export { | ||
| scaleControlEventListener, | ||
| normalizeScale | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,12 @@ | ||
| import { getArrayPosts } from './create-array-posts.js'; | ||
| import { renderTumbnails } from './render-tumbnails.js'; | ||
| import { onOffBigPicture } from './on-off-big-picture.js'; | ||
| import { registerEventsOpenImgUpload } from './on-off-img-upload.js'; | ||
| import { initValidation } from './validation-hashtags-and-comments.js'; | ||
|
|
||
| const getArrayPostsClone = structuredClone(getArrayPosts); | ||
|
|
||
| renderTumbnails(getArrayPostsClone); | ||
|
|
||
| onOffBigPicture(getArrayPostsClone); | ||
| registerEventsOpenImgUpload(); | ||
| initValidation(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import { scaleControlEventListener, normalizeScale } from './img-scale-change.js'; | ||
| import { resetEffects, effectsEventListener } from './effects.js'; | ||
|
|
||
| const bodyElement = document.querySelector('body'); | ||
| const imgUploadElement = bodyElement.querySelector('.img-upload'); | ||
| const imgUploadInputElement = imgUploadElement.querySelector('.img-upload__input'); | ||
| const imgUploadOverlayElement = imgUploadElement.querySelector('.img-upload__overlay'); | ||
| const imgUploadCancelElement = imgUploadElement.querySelector('.img-upload__cancel'); | ||
| const hashtagInputElement = imgUploadOverlayElement.querySelector('.text__hashtags'); | ||
| const commentInputElement = imgUploadOverlayElement.querySelector('.text__description'); | ||
| const imgUploadFormElement = imgUploadElement.querySelector('.img-upload__form'); | ||
|
|
||
| const resetErrorClass = () => { | ||
| const imgUploadFieldWrapperList = imgUploadOverlayElement.querySelectorAll('.img-upload__field-wrapper'); | ||
| imgUploadFieldWrapperList.forEach((item) => { | ||
| item.classList.remove('img-upload__field-wrapper--error'); | ||
| }); | ||
| }; | ||
|
|
||
| const resetErrorText = () => { | ||
| const pristineErrorList = imgUploadOverlayElement.querySelectorAll('.pristine-error'); | ||
| pristineErrorList.forEach((item) => { | ||
| item.textContent = ''; | ||
| }); | ||
| }; | ||
|
|
||
| const imgCloseActions = () => { | ||
| imgUploadOverlayElement.classList.add('hidden'); | ||
| bodyElement.classList.remove('modal-open'); | ||
| imgUploadInputElement.value = ''; | ||
| hashtagInputElement.value = ''; | ||
| commentInputElement.value = ''; | ||
| resetErrorClass(); | ||
| resetErrorText(); | ||
| normalizeScale(); | ||
| }; | ||
|
|
||
| const imgUploadCancelElementClick = () => { | ||
| removeEventsCloseImgUpload(); | ||
| imgCloseActions(); | ||
| }; | ||
|
|
||
| const onDocumentKeydown = (evt) => { | ||
| if (evt.key === 'Escape'){ | ||
| evt.preventDefault(); | ||
| if(document.activeElement === hashtagInputElement || document.activeElement === commentInputElement){ | ||
| evt.stopPropagation(); | ||
| bodyElement.classList.add('modal-open'); | ||
| } else { | ||
| removeEventsCloseImgUpload(); | ||
| imgCloseActions(); | ||
| imgUploadFormElement.reset(); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| function removeEventsCloseImgUpload () { | ||
| document.removeEventListener('keydown', onDocumentKeydown); | ||
| imgUploadCancelElement.removeEventListener('click', imgUploadCancelElementClick); | ||
| } | ||
|
|
||
| const registerEventsOpenImgUpload = () => { | ||
| imgUploadInputElement.addEventListener('change', () => { | ||
| imgUploadOverlayElement.classList.remove('hidden'); | ||
| bodyElement.classList.add('modal-open'); | ||
| imgUploadCancelElement.addEventListener('click', imgUploadCancelElementClick); | ||
| document.addEventListener('keydown', onDocumentKeydown); | ||
| scaleControlEventListener(); | ||
| resetEffects(); | ||
| effectsEventListener(); | ||
| }); | ||
| }; | ||
|
|
||
| export { | ||
| registerEventsOpenImgUpload | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.