pureline.coffee

#= require ../vendor/vue.min.js
#= require ../vendor/jquery.transit.min
#= require ../vendor/jquery.mousewheel
#= require ../vendor/jquery.ui.touch-punch
#= require ../vendor/jquery.swipe
#= require ../vendor/vague
#= require ./data
#= require ./transitions
#= require ./directives
#= require ./video

$ ->
  vm = new Vue
    el: '.promo-page'
    data: window.promodata
    watch:
      currentAge: (current, old) ->
        vm.oldAge = old
        vm.currentAge = current
        vm.changeWomenImage(vm.currentAge)
        vm.setSlide('main')

      currentSlide: (currentSlide) ->
        vm.setSlide(currentSlide)
        vm.resize()

    methods:
      initSlider: ->
        $('.age-slider').slider
          range: 'min'
          animate: 'slow'
          min: 25
          max: 65
          step: 10
          slide: (event, ui) ->
            vm.currentAge = ui.value

      initEraser: ->
        $('.women.erasable').eraser_promo
          progressFunction: (p) ->
            percent = Math.round(p * 100)
            if vm.isMobile
              vm.currentSlide = 'mobile-hexagons' if percent > 35
            else
              if vm.isRetina()
                x = @touchX / 2
                y = @touchY / 2
              else if vm.isHighDensity()
                x = @touchX / 1.3
                y = @touchY / 1.3
              else
                x = @touchX
                y = @touchY

              headPercent = vm.polygonProgress(x, y, 'head')
              mouthPercent = vm.polygonProgress(x, y, 'mouth')
              breastPercent = vm.polygonProgress(x, y, 'breast')

              headAndBreast =->
                vm.women[vm.currentAge].showHexTop = true
                vm.showHexWithDelay = setTimeout(->
                  vm.women[vm.currentAge].showHexRight = true
                , 1000)
                vm.touchHead = true
                vm.touchBreast = true

              if headPercent.length && !vm.touchHead
                vm.checkedGA(['send', 'event', 'user', 'interact_with_the_face'])
                vm.checkedYA('interact_with_the_face')
                headAndBreast()

              if mouthPercent.length && !vm.touchMouth
                vm.checkedGA(['send', 'event', 'user', 'interact_with_the_neck'])
                vm.checkedYA('interact_with_the_neck')
                vm.women[vm.currentAge].showHexBottom = true
                vm.touchMouth = true

              if breastPercent.length && !vm.touchBreast
                headAndBreast()

              if vm.women[vm.currentAge].showHexBottom && vm.women[vm.currentAge].showHexRight && vm.women[vm.currentAge].showHexTop
                vm.currentSlide = 'hexagons'

      changeWomenImage: (current) ->
        template = "<img class='women' src=#{vm.women[current].after} /> <img class='women erasable' src=#{vm.women[current].before} />"
        $('.women-wrap').html('').append(template)

      nextSlide: (slides) ->
        slideNumber = slides.indexOf(vm.currentSlide)
        unless slideNumber == slides.length - 1
          vm.currentSlide = slides[slideNumber + 1]

      prevSlide: (slides) ->
        slideNumber = slides.indexOf(vm.currentSlide)
        unless slideNumber == 0
          vm.currentSlide = slides[slideNumber - 1]

      swipeEvents: ->
        $(window).on 'swipedown', ->
          if vm.currentSlide != 'on-start' && vm.isMobile
            vm.prevSlide(vm.mobileSlides)

        $(window).on 'swipeup', ->
          if vm.currentSlide != 'on-start' && vm.isMobile
            vm.nextSlide(vm.mobileSlides)

      scrollEvents: ->
        executed = true
        $('.promo-page').on 'mousewheel', (event) ->
          if executed && !vm.isMobile
            vm.nextSlide(vm.slides) if event.deltaY < 0
            vm.prevSlide(vm.slides) if event.deltaY > 0 && vm.currentSlide != 'on-start'
            executed = false

            setTimeout(->
              executed = true
            , 500)

      resetAreaPoints: ->
        vm.rectHeadAreaPoints   = []
        vm.rectMouthAreaPoints  = []
        vm.rectBreastAreaPoints = []

      resetTouches: ->
        vm.touchHead   = false
        vm.touchBreast = false
        vm.touchMouth  = false

      resetHexagons: ->
        vm.women[vm.currentAge].showHexTop    = false
        vm.women[vm.currentAge].showHexBottom = false
        vm.women[vm.currentAge].showHexRight  = false
        $('.promo-page').removeClass('stopper-head')

      setSlide: (current) ->
        switch current
#          when 'on-start'
          when 'main'
            vm.checkedGA(['send', 'event', 'user', 'read_screen', '3'])
            vm.checkedYA('read_screen_3')

            clearTimeout(vm.showHexWithDelay)
            vm.resetAreaPoints()
            vm.showMobileFooter = true
            vm.showMobileCreamPot = false
            vm.showHintAge = false
            vm.showCreamHand = false
            vm.showSkinArrows = false
            vm.showHintUseCream = false
            vm.women[vm.currentAge].showHint = true
            vm.women[vm.currentAge].showCreamPot = true
            vm.women[vm.currentAge].showImages = true
            vm.resetHexagons()
            $('.women.erasable').eraser_promo('clear')
            $('.women.erasable').eraser_promo('reset')
            vm.touchOnStart()

          when 'getcream'
            vm.checkedGA(['send', 'event', 'user', 'read_screen', '4'])
            vm.checkedYA('read_screen_4')

            vm.resetTouches()
            vm.women[vm.currentAge].showCreamPot = true
            $('.women.erasable').eraser_promo('clear')
            $('.women.erasable').eraser_promo('reset')
            vm.getCream()
            vm.resetHexagons()

          when 'mobile-hexagons'
            vm.checkedGA(['send', 'event', 'user', 'read_screen', '5'])
            vm.checkedYA('read_screen_5')

            vm.showMobileFooter = false
            vm.showMobileCreamPot = true
            vm.showSkinArrows = false
            vm.women[vm.currentAge].showHexTop = true
            vm.women[vm.currentAge].showHexBottom = true
            vm.women[vm.currentAge].showHexRight = true
            vm.women[vm.currentAge].showCreamPot = false
            vm.women[vm.currentAge].showImages = false

          when 'hexagons'
            vm.checkedGA(['send', 'event', 'user', 'read_screen', '5'])
            vm.checkedYA('read_screen_5')

            vm.showHintAge = false
            vm.showSkinArrows = false
            vm.women[vm.currentAge].showCreamPot = true
            vm.women[vm.currentAge].showHexTop = true
            vm.women[vm.currentAge].showHexBottom = true
            vm.women[vm.currentAge].showHexRight = true

          when 'superiority'
            vm.resetHexagons()
            $('.women.erasable').eraser_promo('reset')
            vm.women[vm.currentAge].showCreamPot = false

            vague = $('.cream-pot-chip-left').Vague
              intensity: 0
              forceSVGUrl: false
            vague.animate(11,
              duration: 5000
              easing: 'linear')
            vague.blur()

            vague = $('.cream-pot-chip-right').Vague
              intensity: 0
              forceSVGUrl: false
            vague.animate(11,
              duration: 5000
              easing: 'linear')
            vague.blur()

          when 'product'
            vm.checkedGA(['send', 'event', 'user', 'read_screen', '6'])
            vm.checkedYA('read_screen_6')

            vm.resetHexagons()
            vm.women[vm.currentAge].showCreamPot = false
            $('.women.erasable').eraser_promo('reset')

      inPath: (slide) ->
        checkedSlideNumber = vm.slides.indexOf(slide)
        currentSlideNumber = vm.slides.indexOf(vm.currentSlide)
        true if checkedSlideNumber <= currentSlideNumber

      touchOnStart: ->
        vm.currentSlide = 'main'
        vm.showMobileFooter = true
        vm.women['25'].showCreamPot = true
        vm.women['25'].showHint = true
        vm.image_day = vm.women['25'].product_image_day
        vm.image_night = vm.women['25'].product_image_night
        vm.resetAreaPoints()
        vm.resize()

      getCream: ->
        @initEraser()
        vm.women[vm.currentAge].showHint = false
        vm.showHintUseCream = true
        vm.showCreamHand = true
        vm.showSkinArrows = true
        vm.currentSlide = 'getcream'
        $('.women.erasable').eraser_promo('enable')

      setBodyHeight: ->
        windowHeight      = $(window).height()
        headHeight        = $('.promo-page__head').innerHeight()
        superTextHeight   = $('.promo-page__super-text').innerHeight()
        offsetMenuHeight  = if $(window).width() <= 1004 then 46 else 48
        $('.promo-page__body').height(windowHeight - (offsetMenuHeight + headHeight + superTextHeight))

      resize: ->
        drop = setInterval(->
          vm.setBodyHeight()
        , 1)

        setTimeout(->
          clearInterval(drop)
        , 1000)

        $(window).on 'resize', ->
          vm.setBodyHeight()

      pointInRect: (pt, rect, precision) ->
        p = precision or 6
        rectArea = 0.5 * Math.abs((rect[0][1] - (rect[2][1])) * (rect[3][0] - (rect[1][0])) + (rect[1][1] - (rect[3][1])) * (rect[0][0] - (rect[2][0])))
        triangleArea = rect.reduce(((prev, cur, i, arr) ->
          j = if i == arr.length - 1 then 0 else i + 1
          prev + 0.5 * Math.abs(pt[0] * (arr[i][1] - (arr[j][1])) + arr[i][0] * (arr[j][1] - (pt[1])) + arr[j][0] * (pt[1] - (arr[i][1])))
        ), 0)
        @fix(triangleArea, p) == @fix(rectArea, p)

      fix: (n, p) ->
        parseInt n * 10 ** p

      polygonProgress: (touchX, touchY, bodySection) ->
        pt = [touchX, touchY]
        switch bodySection
          when 'head'
            rect = vm.rectHeadArea
            points = vm.rectHeadAreaPoints
          when 'mouth'
            rect = vm.rectMouthArea
            points = vm.rectMouthAreaPoints
          when 'breast'
            rect = vm.rectBreastArea
            points = vm.rectBreastAreaPoints

        points if points.length > 0
        points.push(pt) if vm.pointInRect(pt, rect)
        return points

      mobileVersionDetect: ->
        if $(window).width() < 768
          @$data.isMobile = true
        else
          @$data.isMobile = false

      isHighDensity: ->
        window.matchMedia and (window.matchMedia('only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)').matches or window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)').matches) or window.devicePixelRatio and window.devicePixelRatio > 1.3

      isRetina: ->
        (window.matchMedia and (window.matchMedia('only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 75.6dpcm)').matches or window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)').matches) or window.devicePixelRatio and window.devicePixelRatio >= 2) and /(iPad|iPhone|iPod)/g.test(navigator.userAgent)

      checkedGA: (data) ->
        window.ga.apply(this, data) if window.ga

      checkedYA: (ya) ->
        window.yaCounter38052050.reachGoal(ya) if window.yaCounter38052050

    created: ->
      @initSlider()
      @initEraser()
      @resize()
      @swipeEvents()
      @scrollEvents()
      @mobileVersionDetect()
      $(window).on 'resize', =>
        @mobileVersionDetect()
      @checkedGA(['send', 'event', 'user', 'enter_the_promo_page'])
      @checkedYA('enter_the_promo_page')