<script>

export default {
  props: ['offset', 'trigger'],

  methods: {
    checkPos() {
      let current_top = this.$el.getBoundingClientRect().top;

      if (current_top <= this.reveal_point) {
        this.activate();
      }

    },

    activate(){
      this.$el.classList.add('s--revealed');

      if (this.trigger) {
        this.$root.$emit(this.trigger)
      }

      window.removeEventListener('scroll', this.checkPos);
    }
  },

  mounted(){
    this.reveal_point = window.innerHeight * (parseFloat(this.offset) || 0.75),

    window.addEventListener('scroll', this.checkPos);
    this.checkPos();
  },

  render(){
    return this.$slots.default[0];
  }
}
</script>

<script>
import { TweenMax, ScrollToPlugin } from 'gsap/all';

export default {
  props: ['offset'],

  name: 'ScrollTo',

  mounted(){
    this.$el.addEventListener('click', this.scroll);
  },

  render(){
    return this.$slots.default[0];
  },

  methods: {
    scroll(e){
      let hash = e.currentTarget.hash;

      if (!hash) return;

      let target = document.querySelector(hash);

      if (!target) return;

      e.preventDefault();

      TweenMax.to(window, 0.6, {
        scrollTo: {
          y: hash,
          offsetY: this.offset || 100
        },
        ease: Power4.easeOut
      })
    }
  }
}
</script>