<template>
  <div class="preLoader">
    <div class="bgDIV"></div>
    <div class="bgDIV"></div>
    <div class="content relativePos">
      <p class="p1">غذای سالم</p>
      <p class="p2">انسان سالم</p>
      <p class="p3">جامعه سالم</p>
    </div>
    <div class="loading">
      <span>L</span>
      <span>O</span>
      <span>A</span>
      <span>D</span>
      <span>I</span>
      <span>N</span>
      <span>G</span>
    </div>
    <div class="progressBar"></div>
  </div>
</template>

<script>

  export default {
    mounted() {
      ///////////////////////////////////////////////////////////////////
      const preLoaderTl_step1 = this.$gsap.timeline({
        onComplete: () => {
          this.$store.commit('global_vars/preLoader_done')
        }
      })
        .to($('.p1'), {opacity: 1, duration: 0.3,})
        .to($('.p1'), {top: -40, duration: 0.7, ease: 'power4.inOut'}, '+=1')
        .to($('.p2'), {top: 0, duration: 0.7, ease: 'power4.inOut'})
        .to($('.p2'), {top: -40, duration: 0.7, ease: 'power4.inOut'}, '+=1')
        .to($('.p3'), {top: 0, duration: 0.7, ease: 'power4.inOut'})
        .to($('.p3'), {top: -40, duration: 0.7, ease: 'power4.inOut'}, '+=1')

        .to($('.bgDIV'), {
          y: this.$gsap.utils.wrap(['-100%', '100%']), duration: 1.5, onStart: () => {
            setTimeout(() => {
              preLoaderTl_step2.play()
            }, 950)
          }
        })
        .set($(".preLoader"), {display: 'none'})
        .timeScale(1.3)

      const progressbarTl = this.$gsap.timeline()
        .set($('.preLoader .progressBar'), {opacity: 1})
        .from($(".preLoader .progressBar"), {width: 0, duration: preLoaderTl_step1.totalDuration() / 1.5}, 0)
        .to($(".preLoader .progressBar"), {opacity: 0, duration: 0.3}, ((preLoaderTl_step1.totalDuration() / 1.5) - 0.5))


      const preLoaderTl_step2 = this.$gsap.timeline({paused: true})
        /// header
        .from($('.site--header'), {y: '-100%', duration: 0.4}, 0)
        .from($(".site--header .reservation svg"), {scale: 0.8, opacity: 0, duration: 0.3}, 0)
        .from($(".site--header .nav--links ul li"), {scale: 0.8, opacity: 0, duration: 0.2, stagger: 0.05}, 0.2)
        .from($(".site--header .logo svg"), {scale: 0.8, opacity: 0, duration: 0.2}, 0.6)

        /// footer
        .from($('.site--footer'), {y: '100%', duration: 0.4}, 0)
        .from($(".site--footer .goUp p"), {opacity: 0, duration: 0.3}, 0)
        .from($(".site--footer .nav--links ul li"), {scale: 0.8, opacity: 0, duration: 0.2, stagger: 0.05}, 0.2)
        .from($(".site--footer .copyRight h4"), {scale: 0.9, opacity: 0, duration: 0.2}, 0.4)
        .from($(".site--footer .copyRight p"), {scale: 0.9, opacity: 0, duration: 0.2}, 0.5)


      ///////////////////////////////////////////////////////////////////
    }
  }
</script>
