привязать именнованную функцию с параметрами

Object.prototype.fancy=function(options){
    if(this instanceof Node){
        makeFancy(this)
    }
    else if(this instanceof NodeList){
        this.forEach(el=>makeFancy(el))
    }
    let galleryContainer="#galleryContainer"

    function f(item,index,items,e){
        e.preventDefault()
        e.stopPropagation()
        document.body.classList.add("noscroll")
        if(get(galleryContainer)==null){
            //создание окна
            document.body.insertAdjacentHTML("beforeend",`<div id='galleryContainer'>
                    <div id='overlay'></div>
                    <div id='title'>
                        <div id='close'></div>
                    </div>
                    <div id='view'>
                        <div id='img'><img src=''></div>
                        <div id='controls'>
                        <div id='arrows'>
                            <div id='left'></div>
                            <div id='right'></div>
                        </div>
                    </div>
                    </div>
                    <div id='thumbs'><div id='thumbs_container'></div></div>
                </div>`)
        }

        //очистка превью
        get(galleryContainer+" #thumbs #thumbs_container").empty()
        //создание новых превью
        items.forEach((it,ind)=>{
            let src=it.tagName=="A"?it.href:(it.tagName=="IMG"?it.src:it.src)
            get(galleryContainer+" #thumbs #thumbs_container").insertAdjacentHTML("beforeend","<div class='thumb' data-idx='"+ind+"'><img src='"+src+"' data-src='"+it.dataset.src+"'/></div>")
        })

        //событие клика на превью, показ изображения
        getAll(galleryContainer+" #thumbs .thumb").forEach(thumb=>thumb.addEventListener("click",function(){
            showImage(items,thumb.dataset.idx)
        }))

        //кнопки в окне
        get(galleryContainer+" #left").addEventListener("click",function(){
            prevImage(items)
        })
        get(galleryContainer+" #right").addEventListener("click",function(){
            nextImage(items)
        })

        //прокрутка колесом
        get(galleryContainer).addEventListener("wheel",function(ev){
            if(ev.deltaY>0)//вниз
                nextImage(items)
            else if(ev.deltaY<0)//вверх
                prevImage(items)
        })

        //клавиши
        document.body.addEventListener("keydown",keysEvents)
        get(galleryContainer+" #close").addEventListener("click",closeImage)
        showImage(items,index)
    }


    function makeFancy(el){
        el.getAll("[data-src]").forEach((item,index,items)=>{
            item.addEventListener("click",(e)=>{
                e.preventDefault()
                e.stopPropagation()
                //window.items=items
                document.body.classList.add("noscroll")
                if(get(galleryContainer)==null){
                    //создание окна
                    document.body.insertAdjacentHTML("beforeend",`<div id='galleryContainer'>
                            <div id='overlay'></div>
                            <div id='title'>
                                <div id='close'></div>
                            </div>
                            <div id='view'>
                                <div id='img'><img src=''></div>
                                <div id='controls'>
                                <div id='arrows'>
                                    <div id='left'></div>
                                    <div id='right'></div>
                                </div>
                            </div>
                            </div>
                            <div id='thumbs'><div id='thumbs_container'></div></div>
                        </div>`)
                }

                //очистка превью
                get(galleryContainer+" #thumbs #thumbs_container").empty()
                //создание новых превью
                items.forEach((it,ind)=>{
                    let src=it.tagName=="A"?it.href:(it.tagName=="IMG"?it.src:it.src)
                    get(galleryContainer+" #thumbs #thumbs_container").insertAdjacentHTML("beforeend","<div class='thumb' data-idx='"+ind+"'><img src='"+src+"' data-src='"+it.dataset.src+"'/></div>")
                })

                //событие клика на превью, показ изображения
                getAll(galleryContainer+" #thumbs .thumb").forEach(thumb=>thumb.addEventListener("click",function(){
                    showImage(items,thumb.dataset.idx)
                }))

                //кнопки в окне
                get(galleryContainer+" #left").addEventListener("click",function(){
                    prevImage(items)
                })
                get(galleryContainer+" #right").addEventListener("click",function(){
                    nextImage(items)
                })

                //прокрутка колесом
                get(galleryContainer).addEventListener("wheel",function(ev){
                    if(ev.deltaY>0)//вниз
                        nextImage(items)
                    else if(ev.deltaY<0)//вверх
                        prevImage(items)
                })

                //клавиши
                document.body.addEventListener("keydown",keysEvents)
                get(galleryContainer+" #close").addEventListener("click",closeImage)
                showImage(items,index)
            })
        })
    }

    function keysEvents(e){
        var k=e.keyCode
        if(k==37) prevImage(get(galleryContainer).getAll("[data-src]"))
        else if(k==39) nextImage(get(galleryContainer).getAll("[data-src]"))
        else if(k==27) closeImage()
    }

    function showImage(items,idx){
        console.log(idx)
        get(galleryContainer+" #view img").setAttribute("src",items[idx].dataset.src)
        get(galleryContainer+" #thumbs .thumb.selected")?.classList.remove("selected")
        getAll(galleryContainer+" #thumbs .thumb")[idx].classList.add("selected")

        thumbW=getAll(galleryContainer+" #thumbs_container .thumb")[0].offsetWidth
        thumbWCmp=getComputedStyle(getAll("#thumbs_container .thumb")[0])
        let marginLeft = parseInt(thumbWCmp.marginLeft);
        let marginRight = parseInt(thumbWCmp.marginRight);

        ind=0
        getAll(galleryContainer+" #thumbs_container .thumb").forEach((el,idx)=>{if(el.classList.contains("selected")) ind=idx})
        sumThumbW=thumbW+marginLeft+marginRight
        get(galleryContainer+" #thumbs_container").style.left=window.innerWidth/2-sumThumbW*ind-sumThumbW/2+"px"
    }

    function prevImage(items){
        //установка индексов всем превью
        getAll(galleryContainer+" #thumbs #thumbs_container .thumb").forEach((el,idx)=>el.dataset.idx=idx)
        //индекс выделенного превью
        let idx=+get(galleryContainer+" #thumbs #thumbs_container .thumb.selected").dataset.idx
        if(idx>0) idx--
        else idx=items.length-1

        showImage(items,idx)
    }

    function nextImage(items){
        getAll(galleryContainer+" #thumbs #thumbs_container .thumb").forEach((el,idx)=>el.dataset.idx=idx)
        let idx=+get(galleryContainer+" #thumbs #thumbs_container .thumb.selected").dataset.idx
        if(idx<items.length-1) idx++
        else idx=0

        showImage(items,idx)
    }

    function closeImage(){
        get(galleryContainer)?.remove()
        document.body.classList.remove("noscroll")
        document.body.removeEventListener("keydown",keysEvents)
    }
}

Скрипт lightbox а-ля fancybox без jquery. Привел полный код. Как выделить эту функцию item.addEventListener("click",()=>{}),в отдельную? Как передать в нее параметры item,index,items? Проблема в том что если добавлять/удалять картинки из набора то нужно опять вызывать .elem.fancy(), а для этого нужно удалить ранее добавленный обработчик click.

item.removeEventListener("click",funcName)
item.addEventListener("click",funcName)

Ответы (0 шт):