[persi005]

Привет всем!

Я только начинаю работать с JS, хотел попросить совета по доработке логики и улучшению кода в целом.

Коротко:
Есть скрытый div с областями кнопок (закрытие, след. и пред. изображение), пустыми картинкой и описанием.
При нажатии на любую картинку галереи - div отображается и туда вставляются: url изображения, текстовое описание.
При нажатие на кнопки след. и пред. изображения - меняется url картинки и описание.

Собственно, всё. Несколько вопросов:

1. Правильно ли я объявил переменные в начале и нужно ли их вообще объявлять? Если нет, то почему и как сделать лучше?

2. В методах nextImg и previousImg код практически одинаковый, но не знаю, как его грамотно объединить, чтобы всё работало. Можно ли это сделать и как? Или в какую сторону двигаться, чтобы решить эту задачу?

3. Можно ли как-то упростить или улучшить код? Скорее всего, я не знаю каких-то вещей, которые надо изучить, чтобы сделать код проще и компактнее. Какие именно материалы изучить?

Спасибо за внимание,
Вадим

(function() {

////// Переменные для работы //////

var HIDDEN_CLASS = "hidden";
var OVERFLOW_BLOCK = "overflow-block";
var MODAL = document.body.querySelector(".modal");
var MODAL_IMAGE = MODAL.querySelector("img");
var MODAL_CAPTION = MODAL.querySelector("p");
var MODAL_BUTTON_CLOSE = MODAL.querySelector(".modal-close");
var MODAL_BUTTON_BACK = MODAL.querySelector(".modal-previous");
var GALLERY = document.body.querySelector(".photos")
.getElementsByTagName("img");

////// Объект для работы с функциями //////

var actionImgModal = {

////// Открытие окна

openImg(modalWindow, modalImg, modalCaption, imagesArray) {
    for (var i = 0;i<imagesArray.length; i++) {
        imagesArray[i].onclick = function () {
            document.body.classList.add(OVERFLOW_BLOCK);
            modalWindow.classList.remove(HIDDEN_CLASS);
            modalImg.src = this.src;
            modalCaption.innerHTML = this.alt;
        };
    }
},

////// Закрытие окна

closeImg(modalWindow) {
    document.body.classList.remove(OVERFLOW_BLOCK);
    modalWindow.classList.add(HIDDEN_CLASS);
},

////// Следующее изображение

nextImg(modalImg, modalCaption, imagesArray) {
    for (var i = 0;i<imagesArray.length; i++) {
        if (modalImg.src === imagesArray[imagesArray.length-1].src) {
            modalImg.src = imagesArray[0].src;
            modalImg.alt = imagesArray[0].alt;
            modalCaption.innerHTML = modalImg.alt;
            break;   
        } else if (modalImg.src === imagesArray[i].src) {
            i++;
            modalImg.src = imagesArray[i].src;
            modalImg.alt = imagesArray[i].alt;
            modalCaption.innerHTML = modalImg.alt;
            break;
        }
    }
},

////// Предыдущее изображение

previousImg(modalImg, modalCaption, imagesArray) {
    for (var i = 0;i<imagesArray.length; i++) {
        if (modalImg.src === imagesArray[0].src) {
            modalImg.src = imagesArray[imagesArray.length-1].src;
            modalImg.alt = imagesArray[imagesArray.length-1].alt;
            modalCaption.innerHTML = modalImg.alt;
            break;   
        } else if (modalImg.src === imagesArray[i].src) {
            i--;
            modalImg.src = imagesArray[i].src;
            modalImg.alt = imagesArray[i].alt;
            modalCaption.innerHTML = modalImg.alt;
            break;
        }
    }
}
};

////// Запуск функций на странице //////

////// Открытие окна

actionImgModal.openImg(MODAL, MODAL_IMAGE, MODAL_CAPTION, GALLERY);

////// Закрытие окна

MODAL_BUTTON_CLOSE.onclick = function () {
    actionImgModal.closeImg(MODAL);
};

////// Следующее изображение

MODAL_IMAGE.onclick = function () {
    actionImgModal.nextImg(MODAL_IMAGE, MODAL_CAPTION, GALLERY);
};

////// Предыдущее изображение

MODAL_BUTTON_BACK.onclick = function () {
    actionImgModal.previousImg(MODAL_IMAGE, MODAL_CAPTION, GALLERY);
};

////// Работа с изображениями клавиатурой

document.onkeydown = function (evt) {
    if (evt.key == "Escape") {
        actionImgModal.closeImg(MODAL);
    } else if (evt.key == "ArrowRight") {
        actionImgModal.nextImg(MODAL_IMAGE, MODAL_CAPTION, GALLERY);
    } else if (evt.key == "ArrowLeft") {
        actionImgModal.previousImg(MODAL_IMAGE, MODAL_CAPTION, GALLERY);
    }
};

})();