docs(useIntersection): Add useIntersection demo

Author: microcipcip

src/components/useClickAway/stories/useClickAway.md

@@ -7,15 +7,15 @@ Vue function that triggers a callback when the user clicks outside of the target
 ```typescript
 useClickAway(
   elRef: Ref<null | Element>,
-  onClickAway: (e: Event) => void,
+  callback: (e: Event) => void,
   events?: string[]
 ): void;
 ```
 
 ### Parameters
 
 - `elRef: Ref<null | Element>` the element to check for click away events
-- `onClickAway: Function` the callback to run when triggering a click away
+- `callback: Function` the callback to run when triggering a click away
 - `events: string[]` list of events to listen to, defaults to `['mousedown', 'touchstart']`
 
 ## Usage

src/components/useClickAway/useClickAway.ts

@@ -4,12 +4,12 @@ const defaultEvents = ['mousedown', 'touchstart']
 
 export function useClickAway(
   elRef: Ref<null | Element>,
-  onClickAway: (e: Event) => void,
+  callback: (e: Event) => void,
   events = defaultEvents
 ) {
   const handler = (e: Event) => {
     if (elRef.value && !elRef.value.contains(e.target as Node)) {
-      onClickAway(e)
+      callback(e)
     }
   }
 

src/components/useHover/stories/UseHoverDemo.vue

@@ -22,7 +22,7 @@ export default Vue.extend({
 })
 </script>
 
-<style>
+<style scoped>
 .use-hover {
   cursor: default;
   display: flex;

src/components/useIntersection/stories/UseIntersectionAdvancedDemo.vue

@@ -1,14 +1,13 @@
 <template>
   <div class="section">
-    <div class="intersection-adv" v-for="el in divElements">
+    <div class="intersection" v-for="(item, index) in divElements">
       <use-intersection-element-demo
-        class="intersection-adv__el"
+        class="intersection__el"
         :options="intersectionOpts"
         @change="handleIntersectionChange"
       >
         <video controls loop>
-          <source src=http://techslides.com/demos/sample-videos/small.mp4
-          type=video/mp4>
+          <source :src="getAlternateVideoUrl(index)" type="video/mp4" />
         </video>
       </use-intersection-element-demo>
     </div>
@@ -19,6 +18,16 @@
 import Vue from 'vue'
 import UseIntersectionElementDemo from './UseIntersectionElementDemo.vue'
 
+const getAlternateVideoUrl = (n: number) => {
+  const videoNumber = n % 2 === 0 ? 1 : 2
+  return `/demo/video${videoNumber}.mp4`
+}
+
+const setVideoPausedValue = ($el: Element, val: string) =>
+  $el.setAttribute('data-is-paused', val)
+
+const divElements = new Array(10)
+
 export default Vue.extend({
   name: 'UseIntersectionDemo',
   components: { UseIntersectionElementDemo },
@@ -28,8 +37,6 @@ export default Vue.extend({
       threshold: 1
     }
 
-    const divElements = new Array(100)
-
     const handleIntersectionChange = ({
       target,
       intersectionRatio
@@ -38,32 +45,43 @@ export default Vue.extend({
       const $video = target.querySelector('video')
       if (!$video) return
 
+      // Video pause logic
       if (!isVisible) {
-        if (!$video.paused) $video.pause()
-      } else {
-        if ($video.paused) $video.play()
+        if ($video.paused) return
+        $video.pause()
+        setVideoPausedValue($video, '1')
+      }
+
+      // Video play logic
+      if (isVisible && $video.dataset.isPaused === '1'){
+        $video.play()
+        setVideoPausedValue($video, '0')
       }
     }
 
-    return { divElements, intersectionOpts, handleIntersectionChange }
+    return {
+      divElements,
+      intersectionOpts,
+      getAlternateVideoUrl,
+      handleIntersectionChange
+    }
   }
 })
 </script>
 
-<style>
+<style scoped>
 .section {
   padding: 20px 0;
 }
 
-.intersection-adv {
+.intersection {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
   height: 920px;
 }
 
-/* El */
-.intersection-adv__el {
+.intersection__el {
   position: relative;
 }
 </style>

src/components/useIntersection/stories/UseIntersectionDemo.vue

@@ -5,6 +5,7 @@
         class="intersection__el"
         :options="intersectionOpts"
         @change="handleIntersectionChange"
+        @paused="handleIntersectionPaused"
       />
     </div>
   </div>
@@ -34,12 +35,21 @@ export default Vue.extend({
       target.classList.toggle('-is-active', isVisible)
     }
 
-    return { divElements, intersectionOpts, handleIntersectionChange }
+    const handleIntersectionPaused = (target: Element, isPaused: boolean) => {
+      target.classList.toggle('-is-paused', isPaused)
+    }
+
+    return {
+      divElements,
+      intersectionOpts,
+      handleIntersectionChange,
+      handleIntersectionPaused
+    }
   }
 })
 </script>
 
-<style>
+<style scoped>
 .section {
   padding: 20px 0;
 }
@@ -58,29 +68,41 @@ export default Vue.extend({
   height: 80px;
 }
 
+/* Action buttons */
+/deep/ .intersection__el .button {
+  position: absolute;
+  top: 50%;
+  left: 130px;
+  transform: translateY(-50%);
+}
+
 /* Circle */
 .intersection__el:after {
-  content: 'OFF';
+  content: 'Not intersecting';
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 40px;
+  width: 100px;
   height: 40px;
-  border-radius: 50%;
+  border-radius: 8px;
   background: red;
   color: white;
-  text-transform: uppercase;
   font-size: 12px;
   transition: all 0.7s ease-in-out;
   transform: translate(-50%, -50%) scale(1);
 }
 
 .intersection__el.-is-active:after {
-  content: 'ON';
+  content: 'Intersecting';
   background: green;
   transform: translate(-50%, -50%) scale(1.4);
 }
+
+.intersection__el.-is-paused:after {
+  content: 'Disabled';
+  background: orange;
+}
 </style>

src/components/useIntersection/stories/UseIntersectionElementDemo.vue

@@ -1,6 +1,22 @@
 <template>
   <div ref="elRef">
     <slot></slot>
+    <button
+      class="button is-primary"
+      @click="handleObserverState"
+      v-if="!isObserving"
+      title="Start observing"
+    >
+      <span class="icon"><i class="fas fa-play"></i></span>
+    </button>
+    <button
+      class="button is-warning"
+      @click="handleObserverState"
+      v-else
+      title="Stop observing"
+    >
+      <span class="icon"><i class="fas fa-pause"></i></span>
+    </button>
   </div>
 </template>
 
@@ -21,16 +37,32 @@ export default Vue.extend({
   },
   setup({ options }, { emit }) {
     const elRef = ref(null)
-    const { observedEntry } = useIntersection(
+
+    const { observedEntry, start, stop } = useIntersection(
       elRef,
       options as IntersectionObserverInit
     )
+
     watch(() => {
       if (!observedEntry.value) return
       emit('change', observedEntry.value)
     })
 
-    return { elRef }
+    let isObserving = ref(true)
+    const handleObserverState = () => {
+      if (!observedEntry.value) return
+      if (isObserving.value) {
+        stop()
+        emit('paused', observedEntry.value.target, true)
+        isObserving.value = false
+      } else {
+        start()
+        emit('paused', observedEntry.value.target, false)
+        isObserving.value = true
+      }
+    }
+
+    return { handleObserverState, isObserving, elRef }
   }
 })
 </script>

src/components/useIntersection/stories/useIntersection.story.ts

@@ -18,7 +18,15 @@ const basicDemo = () => ({
         demo-name="UseIntersectionDemo.vue"
       >
         <template v-slot:title></template>
-        <template v-slot:intro></template>
+        <template v-slot:intro>
+          <p>
+              <strong>Try to scroll down</strong> in this page to see the intersection observer 
+              changing the element's state when they are intersecting.
+          </p>
+          <p>
+            <strong>Try pressing the pause toggler</strong> to enable/disable the intersection observer. 
+          </p>
+        </template>
       </story-title>
       <demo />
     </div>`
@@ -34,7 +42,15 @@ const advancedDemo = () => ({
         demo-name="UseIntersectionAdvancedDemo.vue"
       >
         <template v-slot:title>Advanced Demo</template>
-        <template v-slot:intro></template>
+        <template v-slot:intro>
+          <p>
+              <strong>Start playing a video</strong> then try to scroll up/down. Whenever the video 
+              is not 100% visible, it will pause automatically.
+          </p>
+          <p>
+            <strong>Try pressing the pause toggler</strong> to enable/disable the intersection observer. 
+          </p>        
+        </template>
       </story-title>
       <demo />
     </div>`

src/components/useMedia/stories/UseMediaAdvancedDemo.vue

@@ -78,7 +78,7 @@ export default Vue.extend({
 })
 </script>
 
-<style>
+<style scoped>
 .query-valid {
   color: #fff;
   background: #209817;

src/components/useMedia/stories/UseMediaDemo.vue

@@ -33,7 +33,7 @@ export default Vue.extend({
 })
 </script>
 
-<style>
+<style scoped>
 .query-valid {
   color: #fff;
   background: #209817;

src/components/useMedia/stories/useMedia.story.ts

@@ -16,7 +16,7 @@ const basicDemo = () => ({
         <template v-slot:title></template>
         <template v-slot:intro>
           <p>
-            Try to resize the browser's window to see how the value below changes.
+            <strong>Try to resize the browser's window</strong> to see how the value below changes.
           </p>
         </template>
       </story-title>
@@ -32,7 +32,7 @@ const advancedDemo = () => ({
         <template v-slot:title>Advanced demo</template>
         <template v-slot:intro>
           <p>
-            Try to resize the browser's window to see how the values below change.
+            <strong>Try to resize the browser's window</strong> to see how the values below change.
           </p>
         </template>
       </story-title>