feat(useFullscreen): Add useFullscreen function

Author: microcipcip

README.md

@@ -89,6 +89,8 @@ Vue.use(VueCompositionAPI);
 - UI
   - [`useClickAway`](./src/components/useClickAway/stories/useClickAway.md) — triggers callback when user clicks outside target area.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/ui-useclickaway--demo)
+  - [`useFullscreen`](./src/components/useFullscreen/stories/useFullscreen.md) — display an element in full-screen mode
+    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/ui-usefullscreen--demo)
 - Utils
   - [`getQuery`](./src/components/getQuery/stories/getQuery.md) — get a CSS media query string.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/utils-getquery--demo)

src/components/getQuery/stories/GetQueryDemo.vue

@@ -9,21 +9,15 @@
     <tbody>
       <tr>
         <td>getQuery(0, 300)</td>
-        <td>
-          <span>{{ mobileQuery }}</span>
-        </td>
+        <td>{{ mobileQuery }}</td>
       </tr>
       <tr>
         <td>getQuery(300, 1024)</td>
-        <td>
-          <span>{{ tabletQuery }}</span>
-        </td>
+        <td>{{ tabletQuery }}</td>
       </tr>
       <tr>
         <td>getQuery(1024)</td>
-        <td>
-          <span>{{ desktopQuery }}</span>
-        </td>
+        <td>{{ desktopQuery }}</td>
       </tr>
     </tbody>
   </table>

src/components/useClickAway/stories/useClickAway.md

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

src/components/useClickAway/useClickAway.ts

@@ -3,7 +3,7 @@ import { onMounted, onUnmounted, Ref } from '@src/api'
 const defaultEvents = ['mousedown', 'touchstart']
 
 export function useClickAway(
-  elRef: Ref<null | Element>,
+  elRef: Ref<null | HTMLElement>,
   callback: (e: Event) => void,
   events = defaultEvents
 ) {

src/components/useFullscreen/index.ts

@@ -0,0 +1 @@
+export * from './useFullscreen'

src/components/useFullscreen/stories/UseFullscreenDemo.vue

@@ -0,0 +1,65 @@
+<template>
+  <div
+    ref="divRef"
+    class="fullscreen-wrap"
+    :class="{ '-is-active': isFullscreen }"
+  >
+    <table class="table is-fullwidth">
+      <thead>
+        <tr>
+          <th>Prop</th>
+          <th>Value</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>isFullscreen</td>
+          <td>{{ isFullscreen }}</td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            <button
+              class="button is-primary"
+              @click="start"
+              v-if="!isFullscreen"
+            >
+              Launch fullscreen
+            </button>
+            <button class="button is-danger" @click="stop" v-else>
+              Stop fullscreen
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { ref } from '@src/api'
+import { useFullscreen } from '@src/vue-use-kit'
+
+export default Vue.extend({
+  name: 'UseFullscreenDemo',
+  setup() {
+    const divRef = ref(null)
+    const { isFullscreen, start, stop } = useFullscreen(divRef)
+    return { isFullscreen, start, stop, divRef }
+  }
+})
+</script>
+
+<style scoped>
+.fullscreen-wrap.-is-active {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: #f1f1f1;
+}
+
+.fullscreen-wrap.-is-active table {
+  max-width: 500px;
+}
+</style>

src/components/useFullscreen/stories/useFullscreen.md

@@ -0,0 +1,52 @@
+# useFullscreen
+
+Vue function used for displaying an element in fullscreen mode.
+
+## Reference
+
+```typescript
+useFullscreen(
+    elRef: Ref<null | HTMLElement>
+): {
+    isFullscreen: Ref<boolean>;
+    start: () => void;
+    stop: () => void;
+}
+```
+
+### Parameters
+
+- `elRef: Ref<null | HTMLElement>` the element to display fullscreen
+
+### Returns
+
+- `isFullscreen: Ref<boolean>` it is `true` when the element is fullscreen, `false` otherwise
+- `start: Function` the function used for starting the fullscreen mode
+- `stop: Function` the function used for stopping the fullscreen mode
+
+## Usage
+
+```html
+<template>
+  <div ref="divRef">
+    <p>isFullscreen: {{ isFullscreen }}</p>
+    <button @click="start" v-if="!isFullscreen">Launch fullscreen</button>
+    <button @click="stop" v-else>Stop fullscreen</button>
+  </div>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue'
+  import { ref } from '@src/api'
+  import { useFullscreen } from 'vue-use-kit'
+
+  export default Vue.extend({
+    name: 'UseFullscreenDemo',
+    setup() {
+      const divRef = ref(null)
+      const { isFullscreen, start, stop } = useFullscreen(divRef)
+      return { isFullscreen, start, stop, divRef }
+    }
+  })
+</script>
+```

src/components/useFullscreen/stories/useFullscreen.story.ts

@@ -0,0 +1,28 @@
+import { storiesOf } from '@storybook/vue'
+import path from 'path'
+import StoryTitle from '@src/helpers/StoryTitle.vue'
+import UseFullscreenDemo from './UseFullscreenDemo.vue'
+
+const functionName = 'useFullscreen'
+const functionPath = path.resolve(__dirname, '..')
+const notes = require(`./${functionName}.md`).default
+
+const basicDemo = () => ({
+  components: { StoryTitle, demo: UseFullscreenDemo },
+  template: `
+    <div class="container">
+      <story-title 
+        function-path="${functionPath}" 
+        source-name="${functionName}" 
+        demo-name="UseFullscreenDemo.vue"
+      >
+        <template v-slot:title></template>
+        <template v-slot:intro></template>
+      </story-title>
+      <demo />
+    </div>`
+})
+
+storiesOf('ui|useFullscreen', module)
+  .addParameters({ notes })
+  .add('Demo', basicDemo)

src/components/useFullscreen/useFullscreen.spec.ts

@@ -0,0 +1,28 @@
+import { mount } from '@src/helpers/test'
+import { ref } from '@src/api'
+import { useFullscreen } from '@src/vue-use-kit'
+
+// This feature is difficult to test therefore
+// I've only written a simple test
+
+const testComponent = () => ({
+  template: `
+    <div id="divRef" ref="divRef">
+      <div id="isFullscreen" v-if="isFullscreen"></div>
+      <button id="start" @click="start"></button>
+      <button id="stop" @click="stop"></button>
+    </div>
+  `,
+  setup() {
+    const divRef = ref(null)
+    const { isFullscreen, start, stop } = useFullscreen(divRef)
+    return { isFullscreen, start, stop, divRef }
+  }
+})
+
+describe('useFullscreen', () => {
+  it('should not be fullscreen when initialized', () => {
+    const wrapper = mount(testComponent())
+    expect(wrapper.find('#isFullscreen').exists()).toBe(false)
+  })
+})

src/components/useFullscreen/useFullscreen.ts

@@ -0,0 +1,40 @@
+import { ref, Ref, onUnmounted } from '@src/api'
+
+export function useFullscreen(elRef: Ref<null | HTMLElement>) {
+  const isFullscreen = ref(false)
+
+  const handleFullscreenChange = () => {
+    if (!isFullscreen.value) return
+    const isCurrentlyFullscreen = !!document.fullscreenElement
+    isFullscreen.value = isCurrentlyFullscreen
+  }
+
+  const startTracking = () => {
+    document.addEventListener('fullscreenchange', handleFullscreenChange)
+  }
+
+  const stopTracking = () => {
+    document.removeEventListener('fullscreenchange', handleFullscreenChange)
+  }
+
+  const start = () => {
+    if (!elRef.value) return
+    if (isFullscreen.value) return
+    elRef.value.requestFullscreen().then(() => {
+      isFullscreen.value = true
+      startTracking()
+    })
+  }
+
+  const stop = () => {
+    if (!isFullscreen.value) return
+    document.exitFullscreen().then(() => {
+      isFullscreen.value = false
+      stopTracking()
+    })
+  }
+
+  onUnmounted(stopTracking)
+
+  return { isFullscreen, start, stop }
+}