From 71ef66f83022837a5cf9667d44293df85ec95fcc Mon Sep 17 00:00:00 2001
From: Salvatore Tedde <microcipcip@gmail.com>
Date: Sun, 16 Feb 2020 02:16:10 +0000
Subject: [PATCH 1/5] feat(useIntersection): Adding useIntersection function

---
 README.md                                     |   4 +-
 src/components/useIntersection/index.ts       |   1 +
 .../stories/UseIntersectionDemo.vue           |  86 +++++++++++++
 .../stories/UseIntersectionElementDemo.vue    |  36 ++++++
 .../stories/useIntersection.md                | 113 ++++++++++++++++++
 .../stories/useIntersection.story.ts          |  28 +++++
 .../useIntersection/useIntersection.spec.ts   |   8 ++
 .../useIntersection/useIntersection.ts        |  38 ++++++
 src/vue-use-kit.ts                            |   1 +
 9 files changed, 314 insertions(+), 1 deletion(-)
 create mode 100755 src/components/useIntersection/index.ts
 create mode 100755 src/components/useIntersection/stories/UseIntersectionDemo.vue
 create mode 100755 src/components/useIntersection/stories/UseIntersectionElementDemo.vue
 create mode 100755 src/components/useIntersection/stories/useIntersection.md
 create mode 100755 src/components/useIntersection/stories/useIntersection.story.ts
 create mode 100755 src/components/useIntersection/useIntersection.spec.ts
 create mode 100755 src/components/useIntersection/useIntersection.ts

diff --git a/README.md b/README.md
index 321620d..361a6aa 100755
--- a/README.md
+++ b/README.md
@@ -61,6 +61,8 @@ Vue.use(VueCompositionAPI);
 - Sensors
   - [`useHover`](./src/components/useHover/stories/useHover.md) &mdash; tracks mouse hover state of a given element.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usehover--demo)
+   - [`useIntersection`](./src/components/useIntersection/stories/useIntersection.md) &mdash; tracks intersection of target element with an ancestor element.
+    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-useintersection--demo)
   - [`useMedia`](./src/components/useMedia/stories/useMedia.md) &mdash; tracks state of a CSS media query.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemedia--demo)
     [![Demo](https://img.shields.io/badge/advanced_demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemedia--advanced-demo)
@@ -70,7 +72,7 @@ Vue.use(VueCompositionAPI);
   - [`useMouseElement`](./src/components/useMouseElement/stories/useMouseElement.md) &mdash; tracks the mouse position relative to given element.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemouseelement--demo)
 - Animations
-  - [`useInterval`](./src/components/useInterval/stories/useInterval.md) &mdash; updates the `counter` value repeatedly on a fixed time delay.
+  - [`useInterval`](./src/components/useInterval/stories/useInterval.md) &mdash; updates `counter` value repeatedly on a fixed time delay.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useinterval--demo)
   - [`useIntervalFn`](./src/components/useIntervalFn/stories/useIntervalFn.md) &mdash; calls function repeatedly on a fixed time delay.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useintervalfn--demo)
diff --git a/src/components/useIntersection/index.ts b/src/components/useIntersection/index.ts
new file mode 100755
index 0000000..9f8af68
--- /dev/null
+++ b/src/components/useIntersection/index.ts
@@ -0,0 +1 @@
+export * from './useIntersection'
diff --git a/src/components/useIntersection/stories/UseIntersectionDemo.vue b/src/components/useIntersection/stories/UseIntersectionDemo.vue
new file mode 100755
index 0000000..2dbb774
--- /dev/null
+++ b/src/components/useIntersection/stories/UseIntersectionDemo.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="section">
+    <div class="intersection" v-for="el in divElements">
+      <use-intersection-element-demo
+        class="intersection__el"
+        :options="intersectionOpts"
+        @change="handleIntersectionChange"
+      />
+    </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,
+      rootMargin: '-40px 0px -40px',
+      threshold: 1
+    }
+
+    const divElements = new Array(100)
+
+    const handleIntersectionChange = ({
+      target,
+      intersectionRatio
+    }: IntersectionObserverEntry) => {
+      const isVisible = intersectionRatio === 1
+      target.classList.toggle('-is-active', isVisible)
+    }
+
+    return { divElements, intersectionOpts, handleIntersectionChange }
+  }
+})
+</script>
+
+<style>
+.section {
+  padding: 20px 0;
+}
+
+.intersection {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 120px;
+}
+
+/* El */
+.intersection__el {
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+
+/* Circle */
+.intersection__el:after {
+  content: 'OFF';
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  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';
+  background: green;
+  transform: translate(-50%, -50%) scale(1.4);
+}
+</style>
diff --git a/src/components/useIntersection/stories/UseIntersectionElementDemo.vue b/src/components/useIntersection/stories/UseIntersectionElementDemo.vue
new file mode 100755
index 0000000..166d107
--- /dev/null
+++ b/src/components/useIntersection/stories/UseIntersectionElementDemo.vue
@@ -0,0 +1,36 @@
+<template>
+  <div ref="elRef">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { ref, watch } from '@src/api'
+import { useIntersection } from '@src/vue-use-kit'
+export default Vue.extend({
+  name: 'UseIntersectionElementDemo',
+  props: {
+    options: {
+      default: {
+        root: null,
+        rootMargin: '0px',
+        threshold: 0
+      }
+    }
+  },
+  setup({ options }, { emit }) {
+    const elRef = ref(null)
+    const { observedEntry } = useIntersection(
+      elRef,
+      options as IntersectionObserverInit
+    )
+    watch(() => {
+      if (!observedEntry.value) return
+      emit('change', observedEntry.value)
+    })
+
+    return { elRef }
+  }
+})
+</script>
diff --git a/src/components/useIntersection/stories/useIntersection.md b/src/components/useIntersection/stories/useIntersection.md
new file mode 100755
index 0000000..266a9e5
--- /dev/null
+++ b/src/components/useIntersection/stories/useIntersection.md
@@ -0,0 +1,113 @@
+# useIntersection
+
+Vue function that tracks the changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
+
+It is based on the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
+
+## Reference
+
+```typescript
+useIntersection(
+    elRef: Ref<null | Element>,
+    options?: IntersectionObserverInit,
+    runOnMount?: boolean
+): {
+    observedEntry: Ref<IntersectionObserverEntry | null>;
+    start: () => void;
+    stop: () => void;
+};
+```
+
+### Parameters
+
+- `elRef: Ref<null | Element>` the element to observe
+- `options: IntersectionObserverInit` the [IntersectionObserver options](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver#Properties)
+- `runOnMount: boolean` whether to observe the element on mount, `true` by default
+
+### Returns
+
+- `observedEntry: Ref<IntersectionObserverEntry | null>` the [observed entry](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)
+- `start: Function` the function used for starting observing
+- `stop: Function` the function used for stopping observing
+
+## Usage
+
+```html
+<template>
+  <div>
+    <div class="el-wrap">
+      <div ref="el1Ref" :class="el1Class" class="el"></div>
+    </div>
+    <div class="el-wrap">
+      <div ref="el2Ref" :class="el2Class" class="el"></div>
+    </div>
+    <div class="el-wrap">
+      <div ref="el3Ref" :class="el3Class" class="el"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue'
+  import { ref, watch } from '@src/api'
+  import { useIntersection } from 'vue-use-kit'
+
+  export default Vue.extend({
+    name: 'UseIntersectionDemo',
+    setup() {
+      const options = {
+        root: null,
+        rootMargin: '0px 0px -30px',
+        threshold: 1.0
+      }
+
+      const watchClass = (className, observedEntry, isEnabled) => {
+        if (!isEnabled) return
+        const isVisible = observedEntry.value.intersectionRatio === 1
+        className.value = isVisible ? '-is-visible' : ''
+      }
+
+      const el1Ref = ref(null)
+      const el1Class = ref('')
+      const { observedEntry: el1Ob } = useIntersection(el1Ref, options)
+      watch(() => watchClass(el1Class, el1Ob, el1Ob.value))
+
+      const el2Ref = ref(null)
+      const el2Class = ref('')
+      const { observedEntry: el2Ob } = useIntersection(el2Ref, options)
+      watch(() => watchClass(el2Class, el2Ob, el2Ob.value))
+
+      const el3Ref = ref(null)
+      const el3Class = ref('')
+      const { observedEntry: el3Ob } = useIntersection(el3Ref, options)
+      watch(() => watchClass(el3Class, el3Ob, el3Ob.value))
+
+      return {
+        el1Ref,
+        el1Class,
+        el2Ref,
+        el2Class,
+        el3Ref,
+        el3Class
+      }
+    }
+  })
+</script>
+
+<style>
+  .el-wrap {
+    margin: 500px 0;
+  }
+
+  .el {
+    width: 40px;
+    height: 40px;
+    background: red;
+    transition: 0.3s ease-in-out;
+  }
+
+  .el.-is-visible {
+    background: green;
+  }
+</style>
+```
diff --git a/src/components/useIntersection/stories/useIntersection.story.ts b/src/components/useIntersection/stories/useIntersection.story.ts
new file mode 100755
index 0000000..ffd654f
--- /dev/null
+++ b/src/components/useIntersection/stories/useIntersection.story.ts
@@ -0,0 +1,28 @@
+import { storiesOf } from '@storybook/vue'
+import path from 'path'
+import StoryTitle from '@src/helpers/StoryTitle.vue'
+import UseIntersectionDemo from './UseIntersectionDemo.vue'
+
+const functionName = 'useIntersection'
+const functionPath = path.resolve(__dirname, '..')
+const notes = require(`./${functionName}.md`).default
+
+const basicDemo = () => ({
+  components: { StoryTitle, demo: UseIntersectionDemo },
+  template: `
+    <div class="container">
+      <story-title 
+        function-path="${functionPath}" 
+        source-name="${functionName}" 
+        demo-name="UseIntersectionDemo.vue"
+      >
+        <template v-slot:title></template>
+        <template v-slot:intro></template>
+      </story-title>
+      <demo />
+    </div>`
+})
+
+storiesOf('sensors|useIntersection', module)
+  .addParameters({ notes })
+  .add('Demo', basicDemo)
diff --git a/src/components/useIntersection/useIntersection.spec.ts b/src/components/useIntersection/useIntersection.spec.ts
new file mode 100755
index 0000000..b0c98b0
--- /dev/null
+++ b/src/components/useIntersection/useIntersection.spec.ts
@@ -0,0 +1,8 @@
+// import { mount } from '@src/helpers/test'
+// import { useIntersection } from '@src/vue-use-kit'
+
+describe('useIntersection', () => {
+  it('should do something', () => {
+    // Add test here
+  })
+})
diff --git a/src/components/useIntersection/useIntersection.ts b/src/components/useIntersection/useIntersection.ts
new file mode 100755
index 0000000..b23e065
--- /dev/null
+++ b/src/components/useIntersection/useIntersection.ts
@@ -0,0 +1,38 @@
+import { ref, onMounted, onUnmounted, Ref } from '@src/api'
+
+const errorMsg =
+  'IntersectionObserver is not supported, please install a polyfill'
+
+export function useIntersection(
+  elRef: Ref<null | Element>,
+  options: IntersectionObserverInit = {},
+  runOnMount = true
+) {
+  const observedEntry: Ref<IntersectionObserverEntry | null> = ref(null)
+
+  const handleObserver = (entries: IntersectionObserverEntry[]) => {
+    observedEntry.value = entries[0]
+  }
+
+  let observer: IntersectionObserver | null = null
+
+  const start = () => {
+    if (!('IntersectionObserver' in window)) throw new Error(errorMsg)
+
+    // Do not start if the observer is already initialized
+    if (observer || !elRef.value) return
+    observer = new IntersectionObserver(handleObserver, options)
+    observer.observe(elRef.value)
+  }
+
+  const stop = () => {
+    if (!observer) return
+    observer.disconnect()
+    observer = null
+  }
+
+  onMounted(() => runOnMount && start())
+  onUnmounted(stop)
+
+  return { observedEntry, start, stop }
+}
diff --git a/src/vue-use-kit.ts b/src/vue-use-kit.ts
index 4ede07a..f15005b 100755
--- a/src/vue-use-kit.ts
+++ b/src/vue-use-kit.ts
@@ -1,5 +1,6 @@
 export * from './components/getQuery'
 export * from './components/useClickAway'
+export * from './components/useIntersection'
 export * from './components/useIntervalFn'
 export * from './components/useInterval'
 export * from './components/useMedia'

From fd9de76928f1ccfc7599f87a0c09df615061c5be Mon Sep 17 00:00:00 2001
From: Salvatore Tedde <microcipcip@gmail.com>
Date: Sun, 16 Feb 2020 03:00:09 +0000
Subject: [PATCH 2/5] docs(useIntersection): Adding demo in the docs for
 useIntersection

---
 .../stories/useIntersection.md                | 74 ++++++++++---------
 1 file changed, 39 insertions(+), 35 deletions(-)

diff --git a/src/components/useIntersection/stories/useIntersection.md b/src/components/useIntersection/stories/useIntersection.md
index 266a9e5..3dfd57f 100755
--- a/src/components/useIntersection/stories/useIntersection.md
+++ b/src/components/useIntersection/stories/useIntersection.md
@@ -32,18 +32,12 @@ useIntersection(
 
 ## Usage
 
+First we have to define the intersection component, named `UseIntersectionElDemo.vue`.
+
 ```html
 <template>
-  <div>
-    <div class="el-wrap">
-      <div ref="el1Ref" :class="el1Class" class="el"></div>
-    </div>
-    <div class="el-wrap">
-      <div ref="el2Ref" :class="el2Class" class="el"></div>
-    </div>
-    <div class="el-wrap">
-      <div ref="el3Ref" :class="el3Class" class="el"></div>
-    </div>
+  <div ref="elRef" class="el" :class="elClass">
+    <slot></slot>
   </div>
 </template>
 
@@ -53,7 +47,7 @@ useIntersection(
   import { useIntersection } from 'vue-use-kit'
 
   export default Vue.extend({
-    name: 'UseIntersectionDemo',
+    name: 'UseIntersectionElDemo',
     setup() {
       const options = {
         root: null,
@@ -61,42 +55,52 @@ useIntersection(
         threshold: 1.0
       }
 
-      const watchClass = (className, observedEntry, isEnabled) => {
-        if (!isEnabled) return
+      const elRef = ref(null)
+      const elClass = ref('')
+      const { observedEntry } = useIntersection(elRef, options)
+      watch(() => {
+        if (!observedEntry.value) return
         const isVisible = observedEntry.value.intersectionRatio === 1
-        className.value = isVisible ? '-is-visible' : ''
+        elClass.value = isVisible ? '-is-visible' : ''
+      })
+
+      return {
+        elRef,
+        elClass
       }
+    }
+  })
+</script>
+```
 
-      const el1Ref = ref(null)
-      const el1Class = ref('')
-      const { observedEntry: el1Ob } = useIntersection(el1Ref, options)
-      watch(() => watchClass(el1Class, el1Ob, el1Ob.value))
+Then we can call it in a loop in the parent component `UseIntersectionDemo.vue`.
 
-      const el2Ref = ref(null)
-      const el2Class = ref('')
-      const { observedEntry: el2Ob } = useIntersection(el2Ref, options)
-      watch(() => watchClass(el2Class, el2Ob, el2Ob.value))
+```html
+<template>
+  <div>
+    <div class="el-wrap" v-for="n in tot">
+      <use-intersection-el-demo />
+    </div>
+  </div>
+</template>
 
-      const el3Ref = ref(null)
-      const el3Class = ref('')
-      const { observedEntry: el3Ob } = useIntersection(el3Ref, options)
-      watch(() => watchClass(el3Class, el3Ob, el3Ob.value))
+<script lang="ts">
+  import Vue from 'vue'
+  import UseIntersectionElDemo from './UseIntersectionElDemo.vue'
 
-      return {
-        el1Ref,
-        el1Class,
-        el2Ref,
-        el2Class,
-        el3Ref,
-        el3Class
-      }
+  export default Vue.extend({
+    name: 'UseIntersectionDemo',
+    components: { UseIntersectionElDemo },
+    setup() {
+      const tot = new Array(100)
+      return { tot }
     }
   })
 </script>
 
 <style>
   .el-wrap {
-    margin: 500px 0;
+    margin: 200px 0;
   }
 
   .el {

From 78b84c00fc4e8597370e25475bf79c4687041cd1 Mon Sep 17 00:00:00 2001
From: Salvatore Tedde <microcipcip@gmail.com>
Date: Sun, 16 Feb 2020 10:15:12 +0000
Subject: [PATCH 3/5] docs(useIntersection): Adding advanced demo

---
 .../stories/UseIntersectionAdvancedDemo.vue   | 69 +++++++++++++++++++
 .../stories/useIntersection.story.ts          | 18 +++++
 2 files changed, 87 insertions(+)
 create mode 100755 src/components/useIntersection/stories/UseIntersectionAdvancedDemo.vue

diff --git a/src/components/useIntersection/stories/UseIntersectionAdvancedDemo.vue b/src/components/useIntersection/stories/UseIntersectionAdvancedDemo.vue
new file mode 100755
index 0000000..07ce98a
--- /dev/null
+++ b/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>
diff --git a/src/components/useIntersection/stories/useIntersection.story.ts b/src/components/useIntersection/stories/useIntersection.story.ts
index ffd654f..f1a0217 100755
--- a/src/components/useIntersection/stories/useIntersection.story.ts
+++ b/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)

From 1d410bceaa410739ec7f1a544f60e94b878a9279 Mon Sep 17 00:00:00 2001
From: Salvatore Tedde <microcipcip@gmail.com>
Date: Sun, 16 Feb 2020 13:22:35 +0000
Subject: [PATCH 4/5] docs(useIntersection): Add useIntersection demo

---
 .../useClickAway/stories/useClickAway.md      |  4 +-
 src/components/useClickAway/useClickAway.ts   |  4 +-
 .../useHover/stories/UseHoverDemo.vue         |  2 +-
 .../stories/UseIntersectionAdvancedDemo.vue   | 48 +++++++++++++------
 .../stories/UseIntersectionDemo.vue           | 36 +++++++++++---
 .../stories/UseIntersectionElementDemo.vue    | 36 +++++++++++++-
 .../stories/useIntersection.story.ts          | 20 +++++++-
 .../useMedia/stories/UseMediaAdvancedDemo.vue |  2 +-
 .../useMedia/stories/UseMediaDemo.vue         |  2 +-
 .../useMedia/stories/useMedia.story.ts        |  4 +-
 .../useMouse/stories/UseMouseAdvancedDemo.vue |  2 +-
 .../stories/UseMouseElementDemo.vue           |  2 +-
 src/components/useRaf/stories/UseRafDemo.vue  |  2 +-
 .../useRafFn/stories/UseRafFnAdvancedDemo.vue |  4 +-
 .../useRafFn/stories/UseRafFnDemo.vue         |  2 +-
 src/helpers/StoryTitle.vue                    |  8 ++++
 16 files changed, 137 insertions(+), 41 deletions(-)

diff --git a/src/components/useClickAway/stories/useClickAway.md b/src/components/useClickAway/stories/useClickAway.md
index 2eedc4e..b980963 100755
--- a/src/components/useClickAway/stories/useClickAway.md
+++ b/src/components/useClickAway/stories/useClickAway.md
@@ -7,7 +7,7 @@ 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;
 ```
@@ -15,7 +15,7 @@ useClickAway(
 ### 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
diff --git a/src/components/useClickAway/useClickAway.ts b/src/components/useClickAway/useClickAway.ts
index 2474479..d67611e 100755
--- a/src/components/useClickAway/useClickAway.ts
+++ b/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)
     }
   }
 
diff --git a/src/components/useHover/stories/UseHoverDemo.vue b/src/components/useHover/stories/UseHoverDemo.vue
index ee0254b..e9b3594 100755
--- a/src/components/useHover/stories/UseHoverDemo.vue
+++ b/src/components/useHover/stories/UseHoverDemo.vue
@@ -22,7 +22,7 @@ export default Vue.extend({
 })
 </script>
 
-<style>
+<style scoped>
 .use-hover {
   cursor: default;
   display: flex;
diff --git a/src/components/useIntersection/stories/UseIntersectionAdvancedDemo.vue b/src/components/useIntersection/stories/UseIntersectionAdvancedDemo.vue
index 07ce98a..acc4f27 100755
--- a/src/components/useIntersection/stories/UseIntersectionAdvancedDemo.vue
+++ b/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>
diff --git a/src/components/useIntersection/stories/UseIntersectionDemo.vue b/src/components/useIntersection/stories/UseIntersectionDemo.vue
index 2dbb774..c3292ac 100755
--- a/src/components/useIntersection/stories/UseIntersectionDemo.vue
+++ b/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>
diff --git a/src/components/useIntersection/stories/UseIntersectionElementDemo.vue b/src/components/useIntersection/stories/UseIntersectionElementDemo.vue
index 166d107..fad3ebd 100755
--- a/src/components/useIntersection/stories/UseIntersectionElementDemo.vue
+++ b/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>
diff --git a/src/components/useIntersection/stories/useIntersection.story.ts b/src/components/useIntersection/stories/useIntersection.story.ts
index f1a0217..2346518 100755
--- a/src/components/useIntersection/stories/useIntersection.story.ts
+++ b/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>`
diff --git a/src/components/useMedia/stories/UseMediaAdvancedDemo.vue b/src/components/useMedia/stories/UseMediaAdvancedDemo.vue
index ebdec12..3576645 100755
--- a/src/components/useMedia/stories/UseMediaAdvancedDemo.vue
+++ b/src/components/useMedia/stories/UseMediaAdvancedDemo.vue
@@ -78,7 +78,7 @@ export default Vue.extend({
 })
 </script>
 
-<style>
+<style scoped>
 .query-valid {
   color: #fff;
   background: #209817;
diff --git a/src/components/useMedia/stories/UseMediaDemo.vue b/src/components/useMedia/stories/UseMediaDemo.vue
index 1b190f5..caac138 100755
--- a/src/components/useMedia/stories/UseMediaDemo.vue
+++ b/src/components/useMedia/stories/UseMediaDemo.vue
@@ -33,7 +33,7 @@ export default Vue.extend({
 })
 </script>
 
-<style>
+<style scoped>
 .query-valid {
   color: #fff;
   background: #209817;
diff --git a/src/components/useMedia/stories/useMedia.story.ts b/src/components/useMedia/stories/useMedia.story.ts
index da671e3..30c8ab8 100755
--- a/src/components/useMedia/stories/useMedia.story.ts
+++ b/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>
diff --git a/src/components/useMouse/stories/UseMouseAdvancedDemo.vue b/src/components/useMouse/stories/UseMouseAdvancedDemo.vue
index 010f851..299100c 100755
--- a/src/components/useMouse/stories/UseMouseAdvancedDemo.vue
+++ b/src/components/useMouse/stories/UseMouseAdvancedDemo.vue
@@ -83,7 +83,7 @@ export default Vue.extend({
 })
 </script>
 
-<style>
+<style scoped>
 .emoji {
   font-size: 40px;
 }
diff --git a/src/components/useMouseElement/stories/UseMouseElementDemo.vue b/src/components/useMouseElement/stories/UseMouseElementDemo.vue
index 4bc001a..8aba4d1 100755
--- a/src/components/useMouseElement/stories/UseMouseElementDemo.vue
+++ b/src/components/useMouseElement/stories/UseMouseElementDemo.vue
@@ -132,7 +132,7 @@ export default Vue.extend({
 })
 </script>
 
-<style>
+<style scoped>
 .emoji {
   font-size: 40px;
 }
diff --git a/src/components/useRaf/stories/UseRafDemo.vue b/src/components/useRaf/stories/UseRafDemo.vue
index af5b144..3c0d50b 100755
--- a/src/components/useRaf/stories/UseRafDemo.vue
+++ b/src/components/useRaf/stories/UseRafDemo.vue
@@ -69,7 +69,7 @@ export default Vue.extend({
 })
 </script>
 
-<style>
+<style scoped>
 .form {
   max-width: 400px;
 }
diff --git a/src/components/useRafFn/stories/UseRafFnAdvancedDemo.vue b/src/components/useRafFn/stories/UseRafFnAdvancedDemo.vue
index b6ba40c..d3fadce 100755
--- a/src/components/useRafFn/stories/UseRafFnAdvancedDemo.vue
+++ b/src/components/useRafFn/stories/UseRafFnAdvancedDemo.vue
@@ -73,7 +73,7 @@ export default Vue.extend({
 })
 </script>
 
-<style>
+<style scoped>
 .sprite {
   width: 175px;
   height: 130px;
@@ -84,7 +84,7 @@ export default Vue.extend({
   .sprite {
     transform-origin: 0% 0%;
     transform: scale(2);
-    margin-bottom: 175px;
+    margin-bottom: 135px;
   }
 }
 </style>
diff --git a/src/components/useRafFn/stories/UseRafFnDemo.vue b/src/components/useRafFn/stories/UseRafFnDemo.vue
index 1ac5cf0..3c0c532 100755
--- a/src/components/useRafFn/stories/UseRafFnDemo.vue
+++ b/src/components/useRafFn/stories/UseRafFnDemo.vue
@@ -91,7 +91,7 @@ export default Vue.extend({
 })
 </script>
 
-<style>
+<style scoped>
 .form {
   max-width: 400px;
 }
diff --git a/src/helpers/StoryTitle.vue b/src/helpers/StoryTitle.vue
index cdd8ed5..78fc2c9 100755
--- a/src/helpers/StoryTitle.vue
+++ b/src/helpers/StoryTitle.vue
@@ -67,6 +67,14 @@ export default Vue.extend({
   font-size: 12px;
 }
 
+.story-intro *:last-child {
+  margin-bottom: 0;
+}
+
+.story-intro p {
+  margin-bottom: 10px;
+}
+
 .story-intro a {
   text-decoration: underline;
 }

From 7a93ff1bf0a3d02223c69bf4bbadd1cb8511ef49 Mon Sep 17 00:00:00 2001
From: Salvatore Tedde <microcipcip@gmail.com>
Date: Sun, 16 Feb 2020 17:05:27 +0000
Subject: [PATCH 5/5] improvement(useIntersection): Adding tests

---
 .../stories/UseIntersectionAdvancedDemo.vue   |  2 +-
 .../stories/UseIntersectionDemo.vue           |  2 +-
 .../stories/UseIntersectionElementDemo.vue    | 29 +++++------
 .../useIntersection/useIntersection.spec.ts   | 49 +++++++++++++++++--
 .../useIntersection/useIntersection.ts        |  1 +
 5 files changed, 63 insertions(+), 20 deletions(-)

diff --git a/src/components/useIntersection/stories/UseIntersectionAdvancedDemo.vue b/src/components/useIntersection/stories/UseIntersectionAdvancedDemo.vue
index acc4f27..cffef73 100755
--- a/src/components/useIntersection/stories/UseIntersectionAdvancedDemo.vue
+++ b/src/components/useIntersection/stories/UseIntersectionAdvancedDemo.vue
@@ -4,7 +4,7 @@
       <use-intersection-element-demo
         class="intersection__el"
         :options="intersectionOpts"
-        @change="handleIntersectionChange"
+        @changed="handleIntersectionChange"
       >
         <video controls loop>
           <source :src="getAlternateVideoUrl(index)" type="video/mp4" />
diff --git a/src/components/useIntersection/stories/UseIntersectionDemo.vue b/src/components/useIntersection/stories/UseIntersectionDemo.vue
index c3292ac..fce6fbf 100755
--- a/src/components/useIntersection/stories/UseIntersectionDemo.vue
+++ b/src/components/useIntersection/stories/UseIntersectionDemo.vue
@@ -4,7 +4,7 @@
       <use-intersection-element-demo
         class="intersection__el"
         :options="intersectionOpts"
-        @change="handleIntersectionChange"
+        @changed="handleIntersectionChange"
         @paused="handleIntersectionPaused"
       />
     </div>
diff --git a/src/components/useIntersection/stories/UseIntersectionElementDemo.vue b/src/components/useIntersection/stories/UseIntersectionElementDemo.vue
index fad3ebd..eb29336 100755
--- a/src/components/useIntersection/stories/UseIntersectionElementDemo.vue
+++ b/src/components/useIntersection/stories/UseIntersectionElementDemo.vue
@@ -3,7 +3,7 @@
     <slot></slot>
     <button
       class="button is-primary"
-      @click="handleObserverState"
+      @click="handleStart"
       v-if="!isObserving"
       title="Start observing"
     >
@@ -11,7 +11,7 @@
     </button>
     <button
       class="button is-warning"
-      @click="handleObserverState"
+      @click="handleStop"
       v-else
       title="Stop observing"
     >
@@ -45,24 +45,25 @@ export default Vue.extend({
 
     watch(() => {
       if (!observedEntry.value) return
-      emit('change', observedEntry.value)
+      emit('changed', observedEntry.value)
     })
 
     let isObserving = ref(true)
-    const handleObserverState = () => {
+    const handleStart = () => {
       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
-      }
+      start()
+      emit('paused', observedEntry.value.target, false)
+      isObserving.value = true
+    }
+
+    const handleStop = () => {
+      if (!observedEntry.value) return
+      stop()
+      emit('paused', observedEntry.value.target, true)
+      isObserving.value = false
     }
 
-    return { handleObserverState, isObserving, elRef }
+    return { handleStart, handleStop, isObserving, elRef }
   }
 })
 </script>
diff --git a/src/components/useIntersection/useIntersection.spec.ts b/src/components/useIntersection/useIntersection.spec.ts
index b0c98b0..1ab2fda 100755
--- a/src/components/useIntersection/useIntersection.spec.ts
+++ b/src/components/useIntersection/useIntersection.spec.ts
@@ -1,8 +1,49 @@
-// import { mount } from '@src/helpers/test'
-// import { useIntersection } from '@src/vue-use-kit'
+import { mount } from '@src/helpers/test'
+import { ref } from '@src/api'
+import { useIntersection } from '@src/vue-use-kit'
+
+let observe: any
+let unobserve: any
+let disconnect: any
+beforeEach(() => {
+  observe = jest.fn()
+  unobserve = jest.fn()
+  disconnect = jest.fn()
+  ;(window as any).IntersectionObserver = jest.fn(() => ({
+    observe,
+    unobserve,
+    disconnect
+  }))
+})
+
+const testComponent = (onMount = true) => ({
+  template: `
+    <div ref="elRef">
+      <button id="stop" @click="stop"></button>
+      <button id="start" @click="start"></button>
+    </div>
+  `,
+  setup() {
+    const elRef = ref(null)
+    const { start, stop } = useIntersection(elRef, {}, onMount)
+    return { start, stop, elRef }
+  }
+})
 
 describe('useIntersection', () => {
-  it('should do something', () => {
-    // Add test here
+  it('should call IntersectionObserver when initialized', () => {
+    expect(observe).toHaveBeenCalledTimes(0)
+    mount(testComponent())
+    expect(observe).toHaveBeenCalledTimes(1)
+  })
+
+  it('should call IntersectionObserver again when start is called', async () => {
+    expect(observe).toHaveBeenCalledTimes(0)
+    const wrapper = mount(testComponent())
+    expect(observe).toHaveBeenCalledTimes(1)
+    wrapper.find('#stop').trigger('click')
+    wrapper.find('#start').trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(observe).toHaveBeenCalledTimes(2)
   })
 })
diff --git a/src/components/useIntersection/useIntersection.ts b/src/components/useIntersection/useIntersection.ts
index b23e065..d008337 100755
--- a/src/components/useIntersection/useIntersection.ts
+++ b/src/components/useIntersection/useIntersection.ts
@@ -20,6 +20,7 @@ export function useIntersection(
     if (!('IntersectionObserver' in window)) throw new Error(errorMsg)
 
     // Do not start if the observer is already initialized
+    // or the elRef does not exist
     if (observer || !elRef.value) return
     observer = new IntersectionObserver(handleObserver, options)
     observer.observe(elRef.value)