-
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.
Resolve the tasks from module11-task1
- Loading branch information
1 parent
0a0eb4b
commit ec1e011
Showing
15 changed files
with
361 additions
and
362 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,71 @@ | ||
| import {isEscKeyDown} from './util.js'; | ||
|
|
||
| const successUploadContainer = document.querySelector('#success').content.querySelector('.success').cloneNode(true); | ||
| const errorUploadContainer = document.querySelector('#error').content.querySelector('.error').cloneNode(true); | ||
| const dataAlertContainer = document.querySelector('#data-error').content.querySelector('.data-error').cloneNode(true); | ||
| const successButton = successUploadContainer.querySelector('.success__button'); | ||
| const errorButton = errorUploadContainer.querySelector('.error__button'); | ||
|
|
||
| successUploadContainer.addEventListener('keydown', (evt) => | ||
| onKeyDownEsc(evt, successUploadContainer)); | ||
|
|
||
| successUploadContainer.addEventListener('click', (evt) => | ||
| onClick(evt, successUploadContainer, 'success')); | ||
|
|
||
| successButton.addEventListener('click', () => { | ||
| successUploadContainer.remove(); | ||
| }); | ||
|
|
||
| successButton.addEventListener('blur', () => { | ||
| successButton.focus(); | ||
| }); | ||
|
|
||
| errorUploadContainer.addEventListener('keydown', (evt) => | ||
| onKeyDownEsc(evt, errorUploadContainer)); | ||
|
|
||
| errorUploadContainer.addEventListener('click', (evt) => | ||
| onClick(evt, errorUploadContainer, 'error')); | ||
|
|
||
| errorButton.addEventListener('click', () => { | ||
| errorUploadContainer.remove(); | ||
| }); | ||
|
|
||
| errorButton.addEventListener('blur', () => { | ||
| errorButton.focus(); | ||
| }); | ||
|
|
||
| function onKeyDownEsc(evt, container) { | ||
| if (isEscKeyDown(evt)) { | ||
| evt.stopPropagation(); | ||
| container.remove(); | ||
| } | ||
| } | ||
|
|
||
| function onClick(evt, container, evtClass) { | ||
| if (evt.target.classList.contains(evtClass)) { | ||
| container.remove(); | ||
| } | ||
| } | ||
|
|
||
| function showSuccessAlert() { | ||
| addAlertElement(successUploadContainer, successButton); | ||
| } | ||
|
|
||
| function showErrorAlert(cb) { | ||
| return function () { | ||
| addAlertElement(errorUploadContainer, errorButton); | ||
| cb(); | ||
| }; | ||
| } | ||
|
|
||
| function showDataAlert() { | ||
| document.body.appendChild(dataAlertContainer); | ||
| setTimeout(() => dataAlertContainer.remove(), 5000); | ||
| } | ||
|
|
||
| function addAlertElement(element, elementButton) { | ||
| document.body.appendChild(element); | ||
| elementButton.focus(); | ||
| } | ||
|
|
||
| export {showSuccessAlert, showErrorAlert, showDataAlert}; |
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,37 @@ | ||
| import {showDataAlert} from './alerts.js'; | ||
|
|
||
| function getData() { | ||
| return fetch('https://31.javascript.htmlacademy.pro/kekstagram/data') | ||
| .then((response) => { | ||
| if (response.ok) { | ||
| return response.json(); | ||
| } else { | ||
| throw new Error('Неуспешный ответ от сервера'); | ||
| } | ||
| }) | ||
| .catch(() => { | ||
| showDataAlert(); | ||
| }); | ||
| } | ||
|
|
||
| function sendData(onSuccess, onFail, body) { | ||
| fetch('https://31.javascript.htmlacademy.pro/kekstagram', { | ||
| method: 'POST', | ||
| body: body | ||
| }).then((response) => { | ||
| if (response.ok) { | ||
| onSuccess(); | ||
| } else { | ||
| throw new Error('Неуспешный ответ от сервера'); | ||
| } | ||
| }).catch(() => onFail()); | ||
| } | ||
|
|
||
| function showData(onSuccess) { | ||
| getData().then((data) => { | ||
| onSuccess(data); | ||
| }); | ||
| } | ||
|
|
||
| export {getData, sendData, showData}; | ||
|
|
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 was deleted.
Oops, something went wrong.
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,78 @@ | ||
| import {createSlider, resetSlider, updateSlider, onUpdateSlider} from './slider-bar.js'; | ||
|
|
||
| const effectLevelValue = document.querySelector('.effect-level__value'); | ||
| const imgUploadEffects = document.querySelector('.img-upload__effects'); | ||
| const imgUploadPreview = document.querySelector('.img-upload__preview'); | ||
| const sliderBar = document.querySelector('.effect-level__slider'); | ||
| const sliderContainer = document.querySelector('.img-upload__effect-level'); | ||
|
|
||
| const effects = { | ||
| none: {filter: 'none', start: 1, minSliderValue: 0, maxSliderValue: 1, step: 0.1}, | ||
| chrome: {filter: 'grayscale', start: 1, minSliderValue: 0, maxSliderValue: 1, step: 0.1}, | ||
| sepia: {filter: 'sepia', start: 1, minSliderValue: 0, maxSliderValue: 1, step: 0.1}, | ||
| marvin: {filter: 'invert', start: 100, minSliderValue: 0, maxSliderValue: 100, step: 1}, | ||
| phobos: {filter: 'blur', start: 3, minSliderValue: 0, maxSliderValue: 3, step: 0.1}, | ||
| heat: {filter: 'brightness', start: 3, minSliderValue: 0, maxSliderValue: 3, step: 0.1}, | ||
| }; | ||
|
|
||
| createSlider(sliderBar, | ||
| effects.none.start, | ||
| effects.none.minSliderValue, | ||
| effects.none.maxSliderValue, | ||
| effects.none.step); | ||
|
|
||
| onUpdateSlider(sliderBar, () => { | ||
| effectLevelValue.value = sliderBar.noUiSlider.get(); | ||
| }); | ||
|
|
||
| sliderContainer.style.visibility = 'hidden'; | ||
|
|
||
| imgUploadEffects.addEventListener('change', (evt) => { | ||
| if (evt.target.value === 'none') { | ||
| sliderContainer.style.visibility = 'hidden'; | ||
| } else { | ||
| sliderContainer.style.visibility = 'visible'; | ||
| } | ||
| resetSlider(sliderBar); | ||
| applyEffectLevel(imgUploadPreview, evt.target.value); | ||
| }); | ||
|
|
||
| function applyEffectLevel(image, effectName) { | ||
| updateSliderOptions(effectName); | ||
| if (effectName === 'none') { | ||
| image.style.filter = effects[effectName].filter; | ||
| } else { | ||
| onUpdateSlider(sliderBar, () => { | ||
| image.style.filter = `${effects[effectName].filter}(${getFilterValue(effectName)})`; | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| function updateSliderOptions(effectName) { | ||
| const {filter, ...sliderParameters} = effects[effectName]; | ||
| switch (effectName) { | ||
| case 'marvin': { | ||
| updateSlider(sliderBar, ...Object.values(sliderParameters)); | ||
| } | ||
| break; | ||
| case 'phobos': | ||
| case 'heat': { | ||
| updateSlider(sliderBar, ...Object.values(sliderParameters)); | ||
| } | ||
| break; | ||
| default: { | ||
| updateSlider(sliderBar, ...Object.values(sliderParameters)); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| function getFilterValue(effectName) { | ||
| let value = effectLevelValue.value; | ||
| if (effectName === 'marvin') { | ||
| value += '%'; | ||
| } else if (effectName === 'phobos') { | ||
| value += 'px'; | ||
| } | ||
| return value; | ||
| } | ||
|
|
Oops, something went wrong.