scaccogatto / vue-waypoint Goto Github PK

data () {
  return {
    wayPointOptions: {
      root: null,
      rootMargin: '0px 0px 0px 0px',
      threshold: Array(101).join(0).split(0).map((n, i) => (i) / 100) // [0.00, 0.01, ...0.99, 1]
    }
  }
}

<section v-waypoint="{ active: true, callback: onWaypoint, options: { wayPointOptions } }">
  ...
</section>

<section
  v-waypoint="{
    active: true,
    callback: onWaypoint,
    options: {
      threshold: Array(101).join(0).split(0).map((n, i) => (i) / 100)
    }
  }"
>
  ...
</section>

<template>
  <div
    v-waypoint="{
      active: true,
      callback: onComponentInViewport,
      options: intersectionOptions,
    }"
    class="mask-displayer"
    :class="{
      fixed: isFixed,
    }"
  > 
  ...
</template>

<script>
data() {
  return{
     displayFilter: false,
     intersectionOptions: {
        root: null,
        rootMargin: '0px 0px 0px 0px',
        threshold: [0.1, 0.75],
      },
  },
},
methods: {
  onComponentInViewport({ going, direction }) {
      // going: in, out
      // direction: top, right, bottom, left
      //  && direction === this.$waypointMap.DIRECTION_TOP
      if (going === this.$waypointMap.GOING_IN) {
        // Going From Top
        this.displayFilter = true
      }

      if (going === this.$waypointMap.GOING_OUT) {
        // Going From Top
        this.displayFilter = false
      }
    },
}
</script>

[Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement. runtime-core.esm-bundler.js:6584
[Vue warn]: onBeforeUpdate is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement. runtime-core.esm-bundler.js:6584
[Vue warn]: onUpdated is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement. runtime-core.esm-bundler.js:6584
[Vue warn]: onBeforeUnmount is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement. runtime-core.esm-bundler.js:6584
[Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function.

intersectionOptions: {
      root: null,
      rootMargin: '0px 0px 0px 0px',
      thresholds: [0, 100]
    } // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

this.$el //returns everything.

section.hero-slide(v-for="(slide, index) in slides" :id="'hero-slide-' + (index + 1)")
  v-waypoint#wp-1(@waypoint-in="heroIn(index)")
  v-waypoint#wp-2(@waypoint-out="heroOut(index)")
  article.hero-articles(@click="clickReport" :id="'hero-article-' + (index + 1)")
    h2.waypoint-text {{slide.title}}

 methods: {
    heroIn (index, e) {
      console.log('hero ' + index + ' in')
      console.log(e.currentTarget)
      console.log(this.$el)
    },
    heroOut (index) {
      console.log('hero ' + index + ' out')
    }
  }

<template>
  <div class="waypoint-test">
    <v-waypoint @waypoint-in="inHandler"
                @waypoint-out="outHandler"></v-waypoint>
    <div class="waypoint-text">
      {{ text }}
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import VueWaypoint from 'vue-waypoint'

Vue.use(VueWaypoint)
export default {
  data: () => {
    return {
      text: 'not-trigger-yet'
    }
  },
  methods: {
    inHandler () {
      this.text = 'going in'
    },
    outHandler () {
      this.text = 'going out'
    }
  }
}
</script>

<ClientOnly>
            <div class="hiw-card" id="hiw-deliver"
                 v-waypoint="{active: true, callback: mobScroll, options: intersectionOptions }">
              <h4>Deliver</h4>
              <p>A customers’ data is available via conventional REST API, as well as via a digital wallet, as
                frequently
                as energy is read and CO2e offset/liability calculated (continuously), and as frequently as RECs are
                accumulated in mWh bundles.
              </p>
              <b-row class="justify-content-center">
                <b-col cols="3">
                  <i class="fas fa-database fa-3x hiw-icon"></i>
                </b-col>
                <b-col cols="3">
                  <i class="far fa-long-arrow-alt-right fa-3x hiw-icon"></i>
                </b-col>
                <b-col cols="3">
                  <i class="far fa-user fa-3x hiw-icon"></i>
                </b-col>
              </b-row>
            </div>
          </ClientOnly>

mounted () {
            window.waypoint = require('vue-waypoint')
    }

WARNING: JavaScript error while prerendering: /home
ReferenceError: Can't find variable: Symbol

  phantomjs://code/phantom-page-render.js:26 in onError

<template>
  <div>
    <header>
      <nav :class="{sticky:stickyActive}">
        <div class="container">
          <div class="row">
            <img
              v-if="!stickyActive"
              src="../assets/logo-white.png"
              alt="Omnifood Logo"
              class="logo"
            >
            <img v-else src="../assets/logo.png" alt="Omnifood Logo" class="logo-black">
            <ul class="main-nav">
              <li>
                <a href="#">Food Delivery</a>
              </li>
              <li>
                <a href="#">How It Works</a>
              </li>
              <li>
                <a href="#">Our Cities</a>
              </li>
              <li>
                <a href="#">Sign Up</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>

      <div class="hero-text">
        <h1>Goodbye junk food
          <br>Hello super healthy meals
        </h1>
        <a href="#" class="bttn bttn-full">I'm hungry</a>
        <a href="#" class="bttn bttn-ghost">Show me more</a>
      </div>
    </header>

    <section
      class="section-features"
      v-waypoint="{active: true, callback: onWaypoint, options: intersectionOptions}"
    >
      <div class="container">
        <div class="row">
          <h2>get food fast &mdash; not fast food</h2>
          <p
            class="long-copy"
          >Hello, we're Omnifood, your new premium food delivery service. We know you're always busy. No time for cooking. So let us take care of that, we're really good at it, we promise!</p>
        </div>

        <div class="row">
          <div class="col-md-3 box">
            <i class="ion-ios-infinite-outline icon-big"></i>
            <h3>Up to 365 days/year</h3>
            <p>Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.</p>
          </div>
          <div class="col-md-3 box">
            <i class="ion-ios-stopwatch-outline icon-big"></i>
            <h3>Ready in 20 minutes</h3>
            <p>You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.</p>
          </div>
          <div class="col-md-3 box">
            <i class="ion-ios-nutrition-outline icon-big"></i>
            <h3>100% organic</h3>
            <p>All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!</p>
          </div>
          <div class="col-md-3 box">
            <i class="ion-ios-cart-outline icon-big"></i>
            <h3>Order anything</h3>
            <p>We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!</p>
          </div>
        </div>
      </div>
    </section>

    <section class="section-meals">
      <ul class="meals-showcase clearfix">
        <li>
          <figure class="meal-photo">
            <img src="../assets/1.jpg" alt="1">
          </figure>
        </li>

        <li>
          <figure class="meal-photo">
            <img src="../assets/2.jpg" alt="2">
          </figure>
        </li>

        <li>
          <figure class="meal-photo">
            <img src="../assets/3.jpg" alt="3">
          </figure>
        </li>

        <li>
          <figure class="meal-photo">
            <img src="../assets/4.jpg" alt="4">
          </figure>
        </li>
      </ul>

      <ul class="meals-showcase clearfix">
        <li>
          <figure class="meal-photo">
            <img src="../assets/5.jpg" alt="5">
          </figure>
        </li>

        <li>
          <figure class="meal-photo">
            <img src="../assets/6.jpg" alt="6">
          </figure>
        </li>

        <li>
          <figure class="meal-photo">
            <img src="../assets/7.jpg" alt="7">
          </figure>
        </li>

        <li>
          <figure class="meal-photo">
            <img src="../assets/8.jpg" alt="8">
          </figure>
        </li>
      </ul>
    </section>
      .......
</template>



<script>
export default {
  data: function() {
    return {
      intersectionOptions: {
        root: null,
        rootMargin: "0px 0px 0px 0px",
        threshold: 0 // [0.25, 0.75] if you want a 25% offset!
      }, // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
      stickyActive: false,
      mobileAppActive: false
    };
  },
  methods: {
    onWaypoint({ going, direction }) {
      if (direction === this.$waypointMap.DIRECTION_TOP) {
        this.stickyActive = true;
      } else if (direction === this.$waypointMap.DIRECTION_BOTTOM) {
        this.stickyActive = false;
      }
    },
    onMobileAppLogo({ going, direction }) {
      if (direction === this.$waypointMap.DIRECTION_TOP)
        this.mobileAppActive = true;
    }
  }
};
</script>

500
window is not defined
at callWithErrorHandling (C:\Users\USER\sites\nuxt3_test\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:156:18)
at setupStatefulComponent (C:\Users\USER\sites\nuxt3_test\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7190:25)
at setupComponent (C:\Users\USER\sites\nuxt3_test\node_modules\@vue\runtime-core\dist\runtime-core.cjs.js:7151:36)
at renderComponentVNode (C:\Users\USER\sites\nuxt3_test\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:614:15)
at Module.ssrRenderComponent (C:\Users\USER\sites\nuxt3_test\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:86:10)
at _sfc_ssrRender (C:\Users\USER\sites\nuxt3_test\app.js:26:31)
at renderComponentSubTree (C:\Users\USER\sites\nuxt3_test\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:683:9)
at renderComponentVNode (C:\Users\USER\sites\nuxt3_test\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:631:12)
at Module.ssrRenderComponent (C:\Users\USER\sites\nuxt3_test\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:86:10)

{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@types/node": "^18.17.3",
    "nuxt": "^3.6.5"
  },
  "dependencies": {
    "vue-waypoint": "^4.2.5"
  }
}

import { Waypoint } from "vue-waypoint";

export default defineNuxtPlugin((nuxtApp) => {
  if (process.client) {
    nuxtApp.vueApp.use(Waypoint);
  }
});

<template>
  <Waypoint @change="onChange">
    <!-- anything you want here -->
  </Waypoint>
</template>

<script lang="ts">
import { Waypoint } from "vue-waypoint";

export default defineComponent({
  name: "SomeComponent",
  components: {
    Waypoint,
  },
  setup() {
    const onChange = (waypointState) => {
      // Going can be:
      // IN
      // OUT
      console.log(waypointState.going);

      // Direction can be:
      // UP
      // DOWN
      // LEFT
      // RIGHT
      console.log(waypointState.direction);
    };

    return { onChange };
  },
});
</script>

    <template v-for="(event,index) in getEventsList">
       <div class="ctn-message" 
            v-waypoint="{ active: true, callback: onScreen(event) }"
            >{{event.content}}</div>
</template>

<template v-for="(event,index) in getEventsList">
   <div class="ctn-message" 
        v-waypoint="{ active: true, callback: onScreen, data:event}"
        >{{event.content}}</div>

isInViewport: function(event) {
  // this is where I do stuff
  VueWaypoint.removeObserver(event.el);
}