ano-mr-site/front/page/info-page.js

/**
 * @typedef {import ('/lib/ref-manager.js').RefManager} RefManager
 * @typedef {import('/lib/single-layer-manager.js').SingleLayerManager} SingleLayerManager
 * @typedef {import ('/lib/popup-manager.js').PopupManager} PopupManager
 * @typedef {import ('/lib/page-manager.js').PageManager} PageManager
 * 
 * @typedef {Object} RefContent
 * @property {string} background
 * @property {Array<string>} images
 * @property {Array<string>} slider
 *
 * @typedef {Object} RefData 
 * @property {RefContent} refs - ссылки
 * @property {RefManager} refs_manager - менеджер ссылок (устаревший, теперь null)
 */

/** Вствка изображений в панель */
const add_img = (div, img_ref, onclick = () => {}) => {
    /** Создание dom-изображения */
    const img = document.createElement('img')

    /** Инъекция ссылки */
    img.src = img_ref

    /** Инъекция поведения */
    img.onclick = onclick

    /** Вставка */
    div.appendChild(img)
}

/** 
 * Функция инициализации инфо. страницы
 * @param {PageManager} page_manager
 * @function
 */
const info_page_init = async ({page_manager, icon_refs_manager = null, properties}) => {

    /**
     * Инициалиазция изображений и их помещение в колонку
     * @function
     * @param {Array<string>} images_refs - изображения маркера
     * @param {HTMLElement} modal
     * @param {HTMLElement} modal_img
     */
    const images_init = async (images_refs, modal, modal_img) => {
        /** Панель изображений из info-page */
        const images = document.getElementById('info-page-images')

        /** Вставка изображений в панель */
        images_refs.forEach(
            img_ref => add_img(
                images, 
                img_ref, 
                () => {
                    modal.style.display = 'flex'
                    modal_img.src = img_ref
                }
            )
        )
    }

    /** 
     * Инициалиазирует фон
     * @function
     * @param {string} background - ссылка на фон
     */
    const background_init = (background) => {
        const info_page = document.getElementById('info-page')

        if (typeof background === 'string') {
            // Заменяем \ на /
            background = background.replace(/\\/g, '/')

            // Убеждаемся, что путь начинается с /
            if (!background.startsWith('/')) {
                background = '/' + background
            }

            info_page.style.backgroundImage = `url(${background})`
        } else {
            info_page.style.backgroundImage = ''
        }
    }


    /**
     * Функция очистки после инита страницы
     * @function
     */
    const clear = () => {
        /** Очистка картинок */
        const images = document.getElementById('info-page-images')

        /** Видео элемент */
        const video = document.getElementById('info-page-video')

        /** Очистка внутренностей элементов */
        images.innerHTML = ''
        if (video) {
            video.pause()
            video.removeAttribute('src')
            video.load()
            video.innerHTML = ''
            video.style.display = 'none'
        }
    }
    
    /** 
     * Инициализация модальной функциональности
     * @function
     * @returns {{modal: HTMLElement, modal_img: HTMLElement}}
     */
    const modal_init = () => {
        const close = document.querySelector('.close')
        const modal = document.getElementById('myModal')
        const modal_img = document.getElementById('modalImg')

        /** Условия закрытия модального окна */ 
        close.onclick = function () {
            modal.style.display = 'none'
        }

        /** Тоже условие закрытия */
        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = 'none'
            }
        }
        
        return {modal, modal_img}
    }

    /**
     * Инициализация видео 
     * @function
     * @param {string} ref - прямая ссылка на видеофайл
     */
    const video_init = async (ref) => {
        const video = document.getElementById('info-page-video')
        video.style.display = 'block'

        // Очистка предыдущих источников
        video.innerHTML = ''

        const source = document.createElement('source')
        source.src = ref
        source.type = 'video/mp4'

        video.appendChild(source)
        video.load()
    }

    /** 
     * Создание функциональных кнопок (назад, к слайдеру)
     * @function
     * @param {string} to_map - ссылка на иконку кнопки к карте (назад)
     * @param {string} to_slider - ссылка на иконку кнопки слайдер
     * @param {PageManager} page_manager - менеджер страниц
     */
    const func_btn_init = (to_map, to_slider, page_manager, icon_refs_manager, properties) => {
        const images = document.getElementById('info-page-images')

        if (to_slider && typeof to_slider === 'string') {
            add_img(images, to_slider, () => {
                clear()
                page_manager.set_page('slider-page', {
                    page_manager,
                    icon_refs_manager,
                    properties
                })
            })
        }

        if (to_map && typeof to_map === 'string') {
            add_img(images, to_map, () => {
                clear()
                page_manager.set_page('main-page', {page_manager})
            })
        }
    }

    /** Защищенный вызов */
    recovery(
        async () => {
            // /** Получение информации маркера (ссылки напрямую) */
            // const data = await get_for_info_page(properties)

            // /** Инициализация ref-менеджер и создание ссылок */
            // const {refs} = await refs_data_init(data)

            /** Элементы modal */
            const {modal, modal_img} = modal_init()
            
            background_init(properties.background)

            images_init(properties.images, modal, modal_img)

            if (properties.video && typeof properties.video === 'string') {
                video_init(properties.video)
            }

            func_btn_init(
                icon_refs_manager.get("map"),
                properties.slider.length <= 0 ? null : icon_refs_manager.get("slider"),
                page_manager,
                icon_refs_manager,
                properties
            )
        },
        (...e) => {
            console.log("Ошибка при инициалиазции main-page")
            e.forEach(er => {throw er})
        }
    ) ()
}