Source

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

Modified ago
import Swiper from 'swiper'
import createGallery from './gallery'
import {$id, $class, $query, $queryAll, easeInOutQuad, hexToRgb} from './utils'
import {startLoading, endLoading} from './loader'

# BEM slider classes
sliderClasses =
    containerModifierClass: 'slider_'

    slideClass: 'slider__slide'
    slideActiveClass: 'slider__slide_active'
    slidePrevClass: 'slider__slide_position_prev'
    slideNextClass: 'slider__slide_position_next'
    slideVisibleClass: 'slider__slide_visible'

    slideDuplicateClass: 'slider__slide-duplicate'
    slideDuplicateActiveClass: 'slider__slide-duplicate_active'
    slideDuplicatePrevClass: 'slider__slide-duplicate_position_prev'
    slideDuplicatNextClass: 'slider__slide-duplicate_position_next'

    wrapperClass: 'slider__wrapper'

disallowSlider = (slider1, slider2, buttons) ->
    if (do slider1.isVertical and slider1.activeIndex is 1) or (do slider1.isHorizontal and slider1.activeIndex is Math.floor slider1.slides.length / 2)
        slider2.allowSlidePrev = true
        slider2.allowSlideNext = true
        for button in buttons
            button.classList.remove 'slider__button_disalllow'
    else
        slider2.allowSlidePrev = false
        slider2.allowSlideNext = false
        for button in buttons
            button.classList.add 'slider__button_disalllow'

handleClick = (e) ->
    # If clicked on link and not just anywhere in the slider
    if e.target.classList.contains 'frame_page'

        # Hide everything
        document.body.classList.add 'body_hidden'

        # Current gradient (also initial value to start chaning)
        gradChange = gradFrom =
            # Inner color
            start: hexToRgb document.body.dataset.start
            # Outer color
            end: hexToRgb document.body.dataset.end

        # Target gradient
        gradTo =
            start: hexToRgb e.target.dataset.start
            end: hexToRgb e.target.dataset.end

        # Start changing gradient
        for pos in ['start', 'end']
            for c in ['r', 'g', 'b']
                do (pos, c) ->
                    start = gradFrom[pos][c]
                    change = gradTo[pos][c] - start

                    currentTime = 0
                    increment = 10
                    duration = 1000

                    animateScroll = ->
                        currentTime += increment
                        # val = easeInOutQuad currentTime, start, change, duration
                        gradChange[pos][c] = Math.floor easeInOutQuad currentTime, start, change, duration

                        document.body.style.backgroundImage = "radial-gradient(ellipse at center, rgb(#{gradChange.start.r}, #{gradChange.start.g}, #{gradChange.start.b}) 0%, rgb(#{gradChange.end.r}, #{gradChange.end.g}, #{gradChange.end.b}) 100%)"
                        if currentTime < duration
                            setTimeout animateScroll, increment
                        else
                            location.href = e.target.href
                        return

                    do animateScroll

export createSliders = ->

    dragIcon = $id('drag')

    hor = $queryAll '.slider_type_horizontal > .slider__wrapper > .slider__slide'

    # Create horizontal slider
    horizontalSlider = new Swiper '.slider_type_horizontal', Object.assign
        direction: 'horizontal'
        initialSlide: Math.floor hor.length / 2
        simulateTouch: false
        speed: 1000

        preventInteractionOnTransition: true
        allowSlidePrev: false
        allowSlideNext: false

        keyboard: true
        navigation:
            prevEl: '.slider__button_direction_left'
            nextEl: '.slider__button_direction_right'
            disabledClass: 'slider__button_disabled'
        on:
            slideChangeTransitionStart: ->
                if verticalSlider
                    # Don't allow to go up and down if its not in the center slider
                    disallowSlider this, verticalSlider, $class 'slider__button_type_vertical'
                return

            slideChangeTransitionEnd: ->
                # If its changed to the right slide and it hasnt done so before
                if gallery = $id('gallery')
                    if @activeIndex is 2 and not gallery.classList.contains 'gallery_initiated'
                        createGallery
                            horizontalSlider: @
                            gallerySlider: gallerySlider
                return
    ,
        sliderClasses

    # Create vertical slider
    fakeSlider = new Swiper '.slider_type_fake', Object.assign
        direction: 'vertical'
        speed: 1000
    ,
        sliderClasses

    # Create vertical slider
    verticalSlider = new Swiper '.slider_type_vertical', Object.assign
        direction: 'vertical'
        simulateTouch: false
        speed: 1000

        preventInteractionOnTransition: true

        mousewheel: true
        keyboard: true
        navigation:
            prevEl: '.slider__button_direction_up'
            nextEl: '.slider__button_direction_down'
            disabledClass: 'slider__button_disabled'
        on:
            slideChangeTransitionStart: ->
                # Don't allow to go up and down if its not in the bottom slider
                disallowSlider this, horizontalSlider, $class 'slider__button_type_horizontal'
                if fakeSlider.el
                    fakeSlider.slideTo @activeIndex
    ,
        sliderClasses

    # Create menu slider
    if menuButton = $query '.menu__button'
        menuHamburger = $query '.menu__hamburger'
        menuSlider = new Swiper '.slider_type_menu', Object.assign
            allowTouchMove: false
            simulateTouch: false
            initialSlide: 1
            resistanceRatio: 0
            speed: 300
            slideToClickedSlide: true
            slidesPerView: 'auto'

            on:
                slideChangeTransitionStart: ->
                    slider = this
                    if slider.activeIndex is 0
                        menuHamburger.classList.add 'hamburger_open'
                        # required because of slideToClickedSlide
                        menuButton.removeEventListener 'click', openMenu, true
                    else
                        menuHamburger.classList.add 'hamburger_close'
                        menuHamburger.classList.remove 'hamburger_open'

                        setTimeout ->
                            menuHamburger.classList.remove 'hamburger_close'
                            return
                        , 400
                    return
                slideChangeTransitionEnd: ->
                    if @activeIndex is 1
                        menuButton.addEventListener 'click', openMenu, true
                    return
        ,
            sliderClasses

        openMenu = (e) ->
            do menuSlider.slidePrev
        closeMenu = (e) ->
            do menuSlider.slideNext

        menuButton.addEventListener 'click', openMenu, true
        menuSlider.slides[1].addEventListener 'click', closeMenu, true


    #Create vertical lists
    verticalLists = new Swiper '.slider_type_vertical-list', Object.assign
        direction: 'vertical'
        freeMode: true
        grabCursor: true
        speed: 1000
        spaceBetween: 50

        # freeModeSticky: true
        freeModeMomentumBounceRatio: 3

        slidesPerView: 'auto'

        mousewheel: true
        keyboard: true

        on:
            click: handleClick
    ,
        sliderClasses

    #Create horizontal lists
    horizontalLists = new Swiper '.slider_type_horizontal-list', Object.assign
        direction: 'horizontal'
        freeMode: true
        grabCursor: true
        speed: 1000
        spaceBetween: 125

        # freeModeSticky: true
        freeModeMomentumBounceRatio: 3

        slidesPerView: 'auto'

        mousewheel: true
        keyboard: true

        on:
            click: handleClick
            sliderMove: ->
                dragIcon.classList.add 'drag_hidden' if dragIcon
    ,
        sliderClasses

    #Create gallery modal slider
    gallerySlider = new Swiper '.slider_type_gallery', Object.assign
        direction: 'horizontal'
        speed: 1000

        loop: true

        keyboard: true

        navigation:
            prevEl: '.slider__button_direction_left'
            nextEl: '.slider__button_direction_right'
            disabledClass: 'slider__button_disabled'
        on:
            slideChangeTransitionEnd: (self, ext = false) ->
                if $id('gallery').classList.contains 'gallery_initiated'
                    # use "self" instead of "this" if called externally
                    unless ext
                        self = @

                    slide = self.slides[self.activeIndex]
                    spinner = slide.querySelector '.loader__spinner'
                    # Start spinning loader
                    startLoading spinner

                    slide.classList.add 'modal__item_loaded'

                    img = slide.querySelector 'img'

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

                    img.src = "/public/images/galleries/#{slide.dataset.src}"

                return

    ,
        sliderClasses

    sliders = {
        horizontalSlider
        verticalSlider
        fakeSlider
        menuSlider
        verticalLists
        horizontalLists
        gallerySlider
    }

    # Update slide sizes
    window.addEventListener 'resize', ->
        for name, slider of sliders
            if Array.isArray slider
                for cur in slider
                    if cur.el
                        do cur.update
            else
                if slider and slider.el
                    do slider.update
    # Return all sliders to be used in other functions
    sliders