<template>
<div>
  <slot
    :isIncludedScroll = "isIncludedScroll"
  />
</div>
</template>

<script>
export default {
  data() {
    return {
      updateClientRectIterate: 0,
      top: 0,
      bottom: 0,
      isIncludedScroll: false
    };
  },
  watch: {
    "$store.state.resolution"() {
      this.updateClientRectIterate = 0;
      this.updateClientRect();
    },
    "$store.state.scrollTop"() {
      this.judgeBeIncludedScroll();
    }
  },
  mounted() {
    this.updateClientRect();
  },
  methods: {
    updateClientRect() {
      const rect = this.$el.getBoundingClientRect();
      const top = this.$store.state.scrollTop + rect.top;

      // ページロード直後はスクロールイベントが多発することがあるため、
      // 正常に要素の位置を取得できない。
      // なので数回位置情報取得の処理を実行して、
      // 位置のズレがなくなったのを見越して要素の位置情報を確定とする。
      if (this.updateClientRectIterate < 10) {
        if (this.top === top) {
          this.updateClientRectIterate++;
        }
        this.top = top;
        requestAnimationFrame(this.updateClientRect);
      } else {
        this.bottom = top + rect.height;
        this.judgeBeIncludedScroll();
      }
    },
    judgeBeIncludedScroll() {
      const { state } = this.$store;
      if (
        state.visibleAreaTop >= this.top &&
        state.visibleAreaBottom <= this.bottom
      ) {
        this.isIncludedScroll = true;
      }
    }
  }
};
</script>

<style></style>
