Source

/aya.waifu.ist/public/scripts/lib/gallery.coffee

Modified ago
import scrollTo from './scroll'
import {$id, $create, ajax, capitalize , sliderClasses, paginationClasses} from './utils'
import {startLoading, endLoading} from './loader'

# Gallery element
gallery = $id 'gallery'
overlay = $id('overlay')
modal = $id('gallery-modal')
createGallery = (sliders) ->

    gallery.classList.add 'gallery_initiated'

    frames = gallery.getElementsByClassName 'frame'
    # Immediately load all frames in view
    loadFrames frames, sliders
    # Galleries should always be in a scroller element
    scroller = gallery.parentNode.parentNode

    sections = gallery.getElementsByClassName 'gallery__title'
    bullets = scroller.getElementsByClassName 'pagination__bullet'
    # Immediately add active to first bullet
    bullets[0].classList.add 'pagination__bullet_active'

    gallery.parentNode.addEventListener 'scroll', (e) ->

        scroller.querySelector('.mouse').classList.add 'mouse_hidden'

        for i in [0...sections.length]
            section = sections[i]
            # If scrolled past the section title or if reached the bottom
            if e.target.scrollTop > section.offsetTop or (i is sections.length - 1 and e.target.scrollTop + e.target.clientHeight is e.target.scrollHeight)
                for bullet in bullets
                    bullet.classList.remove 'pagination__bullet_active'
                    if section.id is do "gallery-#{bullet.dataset.section}".toLowerCase
                        bullet.classList.add 'pagination__bullet_active'

        # Load frames as the scroll into view
        loadFrames frames, sliders

    # Assign each pagination bullet to a section
    for bullet in bullets
        do (bullet) ->
            bullet.addEventListener 'click', ->
                # Smooth scroll to section title
                scrollTo scroller.querySelector('.scroller__wrapper'), $id(do "gallery-#{bullet.dataset.section}".toLowerCase).offsetTop, 500

    # Hide modal when clicked "Close" or outside of it
    overlay.addEventListener 'click', ->
        hideModal sliders.horizontalSlider

    modal.querySelector('.modal__close').addEventListener 'click', ->
        hideModal sliders.horizontalSlider

    modal.addEventListener 'click', (e) ->
        do e.stopPropagation
        false
    # Load frames if they get into view when the window is resized
    window.addEventListener 'resize', ->
        loadFrames frames, sliders

    return


loadFrames = (frames, sliders) ->
    for frame in frames

        do (frame, sliders) ->
            frame.addEventListener 'click', (e) ->
                # Disable horizontal slider
                sliders.horizontalSlider.allowSlidePrev = false
                sliders.horizontalSlider.allowSlideNext = false

                slider = sliders.gallerySlider
                # Show modal
                overlay.classList.remove 'overlay_hidden'
                modal.classList.remove 'modal_hidden'

                # Slide index
                index = parseInt frame.dataset.index
                # Target slide
                slide = slider.slides[index]

                # Force load if slide doesn't transition
                if index is slider.realIndex and not slide.classList.contains 'modal__item_loaded'
                    slider.eventsListeners.slideChangeTransitionEnd[0] slider, true

                slider.slideToLoop index, 0



        # If frame is in view and hasnt started loading yet
        if frame.getBoundingClientRect().top < window.innerHeight and not frame.classList.contains 'frame_loaded'
            spinner = frame.querySelector '.loader__spinner'
            # Start spinning loader
            startLoading spinner

            # Add loaded class so that it doesnt try to load the frame again
            frame.classList.add 'frame_loaded'

            img = frame.querySelector 'img'

            do (spinner) ->
                img.onload = ->
                    # Stop spinning loader
                    endLoading spinner
                    # Show image
                    @classList.remove 'frame__image_loading'
                    return
                return

            # Every frame has the image source in the data-src attribute
            img.src = "/public/images/galleries/thumbnails/#{frame.dataset.src.replace /\.\w+$/, '.jpg'}"
    return

hideModal = (slider) ->
    overlay.classList.add 'overlay_hidden'
    modal.classList.add 'modal_hidden'

    # Enable horizontal slider
    slider.allowSlidePrev = true
    slider.allowSlideNext = true
    return
# Export main function
export default createGallery