onLastEntered callback added

Author: Chris Hurlburt

.flowconfig

@@ -3,4 +3,7 @@
 .*/examples/.*
 
 [libs]
-flow
+flow
+
+[options]
+unsafe.enable_getters_and_setters=true

CONTRIBUTING.md

@@ -29,7 +29,7 @@ We accept contributions via Pull Requests on [Github](https://github.com/chrishu
 Launch visual tests and watch the components at the same time
 
 ``` bash
-$ npm run dev
+$ npm run example
 ```
 
 

examples/src/components/pages/Home.vue

@@ -11,20 +11,10 @@
 </template>
 
 <script>
+import { $scrollview } from '../../../../src'
+
 export default {
- data() {
- return {
- test: 'testing'
- }
- },
- watch: {
- test(val) {
- console.log(val)
- }
- },
- mounted() {
- console.log(this)
- }
+
 }
 </script>
 

examples/src/components/pages/lazyload/LazyLoad.vue

@@ -23,14 +23,16 @@
 </template>
 
 <script>
+import { $scrollview } from '../../../../../src'
+
 import ExampleStart from '.././../ExampleStart'
 import LazyImage from './LazyImage'
 
 export default {
  components: {
  LazyImage,
  ExampleStart
- }
+ },
 }
 </script>
 

flow/state.flow.js

@@ -1,5 +1,5 @@
 // @flow
-declare type State = { // eslint-disable-line no-undef
+declare type State = {| // eslint-disable-line no-undef
  callbacks: Array<?(State) => void>,
  throttle: number,
  scrollviews: {
@@ -13,5 +13,7 @@ declare type State = { // eslint-disable-line no-undef
  previousScrollLocation: number,
  scrollDirection: ScrollDirection,
  scrollListener?: () => void,
- recacheEl?: HTMLSpanElement // eslint-disable-line
-}
+ recacheEl?: HTMLSpanElement, // eslint-disable-line
+ lastComponent: { key?: ComponentKey, position?: ComponentPosition },
+ onLastEntered: Function
+|}

src/core/api.js

@@ -20,7 +20,7 @@ export const _private = (state: State): ScrollviewPrivateAPI => ({
  _track: (scrollview) => {
  if (keysAreUnique(state, scrollview.$children)) {
  state.scrollviews[scrollview._uid] = scrollview
- const { tracking, locations } = initializeScrollview(scrollview)
+ const { tracking, locations } = initializeScrollview(state, scrollview)
  state.locations = state.locations.concat(locations)
  state.tracking[scrollview._uid] = tracking
  checkInViewport(state)

src/core/init.js

@@ -13,10 +13,11 @@ import {
 /**
  * Initializes a ScrollView $vm into tracking.
  *
+ * @param {Object} state - ScrollView tracking state.
  * @param {Object} ScrollView - The ScrollView $vm
  * @returns {Object} Component locations and ScrollViews being tracked.
  */
-export const initializeScrollview = ({ _uid, $children }: ScrollviewComponent) => {
+export const initializeScrollview = (state: State, { _uid, $children }: ScrollviewComponent) => {
  return $children.reduce((data, { $el, $vnode: { key: child }}) => {
  const position = getElPosition($el)
  data.locations.push({
@@ -25,10 +26,26 @@ export const initializeScrollview = ({ _uid, $children }: ScrollviewComponent) =
  component: child
  })
  data.tracking[child] = false
+ setLastComponent(state, { key: child, position })
  return data
  }, { locations: [], tracking: {}})
 }
 
+/**
+ * Stores data for the last component on the page.
+ *
+ * @param {Object} State - ScrollView tracking state.
+ * @param {Object} ComponentData - An object containing the key and position of a component.
+ * @returns {Object} null
+ */
+export const setLastComponent = (state: State, { key, position }: { key: ComponentKey, position: ComponentPosition }) => {
+ if (!state.lastComponent.key || !state.lastComponent.position) {
+ state.lastComponent = { key, position }
+ } else if (state.lastComponent.position.top < position.top) {
+ state.lastComponent = { key, position }
+ }
+}
+
 /**
  * Attaches the scroll listener.
  *

src/core/scroll.js

@@ -26,7 +26,12 @@ export const checkInViewport = (state: State) => {
  const { offset } = state.scrollviews[scrollview]
  const withinTopBounds = (position.bottom - offset) - window.pageYOffset > 0
  const withinBottomBounds = (position.top + offset) - window.pageYOffset <= window.innerHeight
- state.tracking[scrollview][component] = (withinTopBounds && withinBottomBounds)
+ const visible = (withinTopBounds && withinBottomBounds)
+ state.tracking[scrollview][component] = visible
+ if (visible && component === state.lastComponent.key && state.lastComponent.key) {
+ state.onLastEntered(component)
+ state.onLastEntered = () => {}
+ }
  })
 }
 

src/index.js

@@ -14,14 +14,26 @@ function plugin (Vue: Function, options: Object = {}) {
  scrollviews: {},
  locations: [],
  tracking: {},
- bottom: 0,
  scrollDirection: 'DOWN',
  previousScrollLocation: 0,
- documentHeight: 0
+ documentHeight: 0,
+ lastComponent: {},
+ onLastEntered: () => {}
  }
 
  $scrollview = {
  state: initialState,
+ set onLastEntered (fn) {
+ if (typeof fn !== 'function') {
+ console.error('[vue-scrollview]: onLastEntered expects a function.')
+ } else {
+ initialState.onLastEntered = fn
+ this._onLastEntered = fn
+ }
+ },
+ get onLastEntered () {
+ return this._onLastEntered
+ },
  ..._private(initialState),
  ..._public(initialState)
  }