docs(useIntersection): Adding advanced demo

Author: microcipcip

src/components/useIntersection/stories/UseIntersectionAdvancedDemo.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="section">
+    <div class="intersection-adv" v-for="el in divElements">
+      <use-intersection-element-demo
+        class="intersection-adv__el"
+        :options="intersectionOpts"
+        @change="handleIntersectionChange"
+      >
+        <video controls loop>
+          <source src=http://techslides.com/demos/sample-videos/small.mp4
+          type=video/mp4>
+        </video>
+      </use-intersection-element-demo>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import UseIntersectionElementDemo from './UseIntersectionElementDemo.vue'
+
+export default Vue.extend({
+  name: 'UseIntersectionDemo',
+  components: { UseIntersectionElementDemo },
+  setup() {
+    const intersectionOpts = {
+      root: null,
+      threshold: 1
+    }
+
+    const divElements = new Array(100)
+
+    const handleIntersectionChange = ({
+      target,
+      intersectionRatio
+    }: IntersectionObserverEntry) => {
+      const isVisible = intersectionRatio === 1
+      const $video = target.querySelector('video')
+      if (!$video) return
+
+      if (!isVisible) {
+        if (!$video.paused) $video.pause()
+      } else {
+        if ($video.paused) $video.play()
+      }
+    }
+
+    return { divElements, intersectionOpts, handleIntersectionChange }
+  }
+})
+</script>
+
+<style>
+.section {
+  padding: 20px 0;
+}
+
+.intersection-adv {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 920px;
+}
+
+/* El */
+.intersection-adv__el {
+  position: relative;
+}
+</style>

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

@@ -2,6 +2,7 @@ import { storiesOf } from '@storybook/vue'
 import path from 'path'
 import StoryTitle from '@src/helpers/StoryTitle.vue'
 import UseIntersectionDemo from './UseIntersectionDemo.vue'
+import UseIntersectionAdvancedDemo from './UseIntersectionAdvancedDemo.vue'
 
 const functionName = 'useIntersection'
 const functionPath = path.resolve(__dirname, '..')
@@ -23,6 +24,23 @@ const basicDemo = () => ({
     </div>`
 })
 
+const advancedDemo = () => ({
+  components: { StoryTitle, demo: UseIntersectionAdvancedDemo },
+  template: `
+    <div class="container">
+      <story-title 
+        function-path="${functionPath}" 
+        source-name="${functionName}" 
+        demo-name="UseIntersectionAdvancedDemo.vue"
+      >
+        <template v-slot:title>Advanced Demo</template>
+        <template v-slot:intro></template>
+      </story-title>
+      <demo />
+    </div>`
+})
+
 storiesOf('sensors|useIntersection', module)
   .addParameters({ notes })
   .add('Demo', basicDemo)
+  .add('Advanced Demo', advancedDemo)