scrollmarkers, scrollmarkers demo, unit tests, e2e tests

Author: Chris Hurlburt

examples/src/App.vue

@@ -1,6 +1,6 @@
 <template>
  <div id="app">
- <Navigation></Navigation>
+ <Navigation v-if="$route.name !== 'test'"></Navigation>
  <router-view></router-view>
  </div>
 </template>

examples/src/components/pages/Home.vue

@@ -12,7 +12,19 @@
 
 <script>
 export default {
-
+ data() {
+ return {
+ test: 'testing'
+ }
+ },
+ watch: {
+ test(val) {
+ console.log(val)
+ }
+ },
+ mounted() {
+ console.log(this)
+ }
 }
 </script>
 

examples/src/components/pages/scrollmarkers/ScrollMarkers.vue

@@ -3,41 +3,46 @@
  <div class="scroll-container">
 
  <Example-start
- v-if="!currentlyShowing"
+ v-if="currentlyShowing === 'first'"
  title="Scroll Markers Example"
  description="This is an example demonstrating the use of scrollmarkers as triggers for scroll positions."
  ></Example-start>
 
- <p v-if="currentlyShowing === 'first'" class="scroll-section">
- As the scroll markers enter visibility, the trigger the text
+ <p v-if="currentlyShowing === 'second'" class="scroll-section">
+ As the scroll markers enter visibility, they trigger the text
  to change.
  </p>
 
- <p v-if="currentlyShowing === 'second'" class="scroll-section">
+ <p v-if="currentlyShowing === 'third'" class="scroll-section">
  Instead of just changing text, you could attach different actions
  to each scroll marker trigger point.
  </p>
 
 
- <div v-if="currentlyShowing === 'third'" class="scroll-section">
+ <div v-if="currentlyShowing === 'fourth'" class="scroll-section">
  <p>
  Notice how the scroll markers are red lines... that is because the
  debug prop is set to 'true'.
  </p>
  </div>
 
 
- <p v-if="currentlyShowing === 'fourth'" class="scroll-section">
+ <p v-if="currentlyShowing === 'fifth'" class="scroll-section">
  You might also notice they markers dont trigger a change
  of text until they're well into the viewport -- that's because
  of the scroll-view component's default offset of 200px (can be changed
  via props).
  </p>
 
- <p v-if="currentlyShowing === 'fifth'" class="scroll-section">
+ <p v-if="currentlyShowing === 'sixth'" class="scroll-section">
  The end.
  </p>
 
+ <div class="debug-toggle">
+ <input type="checkbox" v-model="debug">
+ Toggle debug mode
+ </div>
+
  </div>
  <div class="markers">
  <scroll-view>
@@ -47,7 +52,7 @@
  :key="m"
  :visible="visible[m]"
  :name="m"
- :spacing="1500"
+ :spacing="700"
  :debug="debug"
  @isVisible="markerVisible"
  @isNotVisible="markerNotVisible"
@@ -59,6 +64,7 @@
 </template>
 
 <script>
+import { $scrollview } from '../../../../../src'
 import ExampleStart from '.././../ExampleStart'
 
 export default {
@@ -67,17 +73,18 @@ export default {
  },
  data() {
  return {
- markers: ['first', 'second', 'third', 'fourth', 'fifth'],
+ markers: ['first', 'second', 'third', 'fourth', 'fifth', 'sixth'],
  debug: true,
- currentlyShowing: '',
+ currentlyShowing: 'first',
  }
  },
  methods: {
  markerVisible(name) {
  this.currentlyShowing = name
  },
  markerNotVisible(name) {
- if (name === 'first') this.currentlyShowing = ''
+ const scrollDirection = $scrollview.getScrollDirection()
+ if (name === 'first' && scrollDirection === 'UP') this.currentlyShowing = name
  }
  }
 }
@@ -104,4 +111,11 @@ export default {
  width: 100%;
  padding-bottom: 300px;
 }
+
+.debug-toggle {
+ position: absolute;
+ bottom: 25px;
+ left: 50%;
+ transform: translateX(-50%);
+}
 </style>

examples/src/components/pages/test/Test.vue

@@ -1,19 +1,20 @@
 <template>
- <section class="test">
+ <section :class="['test', { scrollingUp: scrollDir === 'UP', scrollingDown: scrollDir === 'DOWN' }]">
  <div class="controls">
  <button class="async-add-components" @click="asyncAddComponents">Async Add Components</button>
  <button class="scroll-by-key" @click="scrollToComponent">Scroll to component with key of "c"</button>
  <button class="set-offset" @click="setOffset">Set offset to 349</button>
- <button class="duplicate-key" @click="setDuplicateKey">Add component with duplicate key of 'a'</button>
+ <button class="scroll-direction" @click="checkScrollDirection">Check scroll direction</button>
+ <button class="change-height" @click="changeHeight">Change height</button>
  </div>
  <Scroll-view :offset="offset">
  <template slot-scope="inView">
- <Visibility-marker v-if="duplicateKey" key="a" />
+ <visibility-marker :height="heightChange" key="h" :visible="inView.h" />
 
  <Visibility-marker key="a" :visible="inView.a" />
  <Visibility-marker key="b" :visible="inView.b" />
  <Visibility-marker key="c" :visible="inView.c" />
-
+ 
  <Visibility-marker v-for="k in componentsToAddKeys" :key="k" :visible="inView[k]" />
  </template>
  </Scroll-view>
@@ -26,7 +27,12 @@ import VisibilityMarker from './VisibilityMarker'
 
 export default {
  data() {
- return { componentsToAddKeys: [], offset: 200, duplicateKey: false, }
+ return {
+ componentsToAddKeys: [],
+ offset: 200,
+ scrollDir: '',
+ heightChange: 10
+ }
  },
  components: {
  VisibilityMarker
@@ -44,11 +50,13 @@ export default {
  setOffset() {
  this.offset = 349
  },
- setDuplicateKey() {
- this.duplicateKey = true
- $scrollview.refresh()
+ checkScrollDirection() {
+ this.scrollDir = $scrollview.getScrollDirection()
+ },
+ changeHeight() {
+ this.heightChange = 1000
  }
- },
+ }
 }
 </script>
 

examples/src/components/pages/test/VisibilityMarker.vue

@@ -1,5 +1,5 @@
 <template>
- <div :class="['visibility-marker', $vnode.key, { visible }]"></div>
+ <div :class="['visibility-marker', $vnode.key, { visible }]" :style="{ height: `${height}px` }"></div>
 </template>
 
 <script>
@@ -8,14 +8,17 @@ export default {
  visible: {
  type: Boolean,
  default: () => false
+ },
+ height: {
+ type: Number,
+ default: () => 350
  }
  }
 }
 </script>
 
 <style>
 .visibility-marker {
- height: 350px;
  width: 350px;
  margin-bottom: 1000px;
  background-color: red;

examples/src/router.js

@@ -17,7 +17,7 @@ const router = new VueRouter({
  { path: '/animation', component: Animation },
  { path: '/lazy-load', component: LazyLoad },
  { path: '/scrollspy', component: ScrollSpy },
- { path: '/test', component: Test }
+ { path: '/test', component: Test, name: 'test' }
  ]
 })
 

src/components/ScrollMarker.js

@@ -31,7 +31,7 @@ export default {
  width: '100%',
  height: '1px',
  marginTop: `${this.spacing}px`,
- backgroundColor: this.debug ? 'red' : 'none'
+ backgroundColor: this.debug ? 'red' : 'transparent'
  }
  },
  markerNameStyle () {

src/core/helpers.js

@@ -74,3 +74,21 @@ export const getElPosition = (el: any): ComponentPosition => { // eslint-disable
  * @returns {(Boolean)}
  */
 export const hasDuplicates = (array: Array<mixed>): boolean => (new Set(array)).size !== array.length
+
+/**
+ * Gets the height of the document.
+ *
+ * @returns {(Number)}
+ */
+export const getDocumentHeight = (): number => {
+ const body = document.body
+ const html = document.documentElement
+
+ if (body && html) {
+ return Math.max(
+ body.scrollHeight, body.offsetHeight,
+ html.clientHeight, html.scrollHeight, html.offsetHeight
+ )
+ }
+ return 0
+}

src/core/init.js

@@ -3,7 +3,7 @@ import type { State, ScrollviewComponent } from '../../types'
 
 import throttle from 'lodash.throttle'
 
-import { getElDistanceTop, getElPosition } from './helpers'
+import { getElPosition, getDocumentHeight } from './helpers'
 import {
  createScrollListener,
  checkInViewport,
@@ -57,9 +57,6 @@ export const attachScrollListener = (state: State): State => {
  * @returns {Object} ScrollView tracking state.
  */
 export const attachRecacheListener = (state: State): State => {
- state.recacheEl = document.createElement('span')
- state.recacheEl.setAttribute('id', 'scrollview-recache')
- if (document.body && state.recacheEl) document.body.appendChild(state.recacheEl)
  setInterval(() => checkIfRecache(state, () => resetScrollviews(state)), 1000)
  return state
 }
@@ -72,9 +69,7 @@ export const attachRecacheListener = (state: State): State => {
  * @returns null
  */
 const checkIfRecache = (state: State, resetFn) => {
- if (state.recacheEl) {
- const currentBottom = getElDistanceTop(state.recacheEl)
- if (currentBottom !== state.bottom) resetFn()
- state.bottom = currentBottom
- }
+ const currentHeight = getDocumentHeight()
+ if (currentHeight !== state.documentHeight) resetFn()
+ state.documentHeight = currentHeight
 }

src/index.js

@@ -17,7 +17,8 @@ function plugin (Vue: Function, options: Object = {}) {
  tracking: {},
  bottom: 0,
  scrollDirection: 'DOWN',
- previousScrollLocation: 0
+ previousScrollLocation: 0,
+ documentHeight: 0
  }
 
  $scrollview = {