- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
// В одном файле
// Getting gif by url
const getGifUrl = (searchQuery, gifRating) => {
const fullUrl = `${giphyUrl}${giphyApiKey}&tag=${searchQuery}&rating=${gifRating}`;
let gifSource;
let girSourceOriginal;
fetch(fullUrl).then(response => {
return response.json();
}, networkError => {
console.log(networkError);
}).then(jsonResponse => {
if (!jsonResponse)
gifSource = '';
else {
gifSource = jsonResponse.data.images.preview_gif.url;
gifSoucreOriginal = jsonResponse.data.image_original_url;
}
renderGif(gifSource, gifSoucreOriginal);
});
};
// Где-то в другом файле
// incapsulating image
const incapsulateImage = (gifUrl, gifUrlOriginal) => {
// creating gif preview tile
const image = document.createElement('img');
image.src = gifUrl;
// create link to the original gif
const linkOriginal = document.createElement('a');
linkOriginal.href = gifUrlOriginal;
// incapsulating gif tile into link
linkOriginal.appendChild(image);
// create container-tile
const tile = document.createElement('div');
tile.className = "container-tile";
// incapsulating linked gif into tile
tile.appendChild(linkOriginal);
return tile;
}
// Rendering one gif image
const renderGif = (gifUrl, gifUrlOriginal) => {
if (gifUrl) {
const imageTile = incapsulateImage(gifUrl, gifUrlOriginal);
$gifContainer.append(imageTile);
} else if (!$gifContainer.html()) {
const notFoundHeading = document.createElement('h1');
notFoundHeading.innerHTML = NOT_FOUND_TEXT;
$gifContainer.append(notFoundHeading);
}
};
const render = () => {
// Rendering whole block of gifs
const renderContainer = (searchQuery, gifCount, gifRating) => {
for (let i = 0; i < gifCount; i++) {
getGifUrl(searchQuery, gifRating);
const heading = $gifContainer.find('h1');
if (heading && heading.text() == NOT_FOUND_TEXT) {
break;
}
}
}
// ...Сетап всяких обработчиков событий на элементы...
}
Когда толком не знал про промисы (а уж тем более про модули), городил такую дичь.
JloJle4Ka 03.05.2021 16:56 # 0