Merge pull request #7 from phegman/add-events

Add custom events

README.md

@@ -132,6 +132,77 @@ Your custom easing can then be used like so (make sure to convert easing name to
 
 `v-show-slide:400:example-easing`
 
+### Events
+
+Events are fired on the same element the directive was defined on. Below are the available events:
+
+| Event              | Description                                    |
+| ------------------ | ---------------------------------------------- |
+| @slide-open-start  | Fired when the element starts sliding open     |
+| @slide-open-end    | Fired when the element finishes sliding open   |
+| @slide-close-start | Fired when the element starts sliding closed   |
+| @slide-close-end   | Fired when the element finishes sliding closed |
+
+Example:
+
+```vue
+<template>
+  <div id="app" class="app">
+    <ul
+      id="features"
+      v-show-slide="featuresOpen"
+      class="features"
+      @slide-open-start="slideOpenStart"
+      @slide-open-end="slideOpenEnd"
+      @slide-close-start="slideCloseStart"
+      @slide-close-end="slideCloseEnd"
+    >
+      <li>Aliquam lorem</li>
+      <li>Praesent porttitor nulla vitae posuere</li>
+      <li>Suspendisse nisl elit rhoncus</li>
+      <li>Donec mi odio faucibus</li>
+      <li>Curabitur suscipit suscipit</li>
+    </ul>
+    <button
+      @click="toggleFeatures"
+      class="toggle-features"
+      aria-controls="features"
+      :aria-expanded="featuresOpen ? 'true' : 'false'"
+    >
+      {{ featuresOpen ? 'Hide Features' : 'View Features' }}
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App',
+  data() {
+    return {
+      featuresOpen: false,
+    }
+  },
+  methods: {
+    toggleFeatures() {
+      this.featuresOpen = !this.featuresOpen
+    },
+    slideOpenStart() {
+      console.log('Slide Open Start')
+    },
+    slideOpenEnd() {
+      console.log('Slide Open End')
+    },
+    slideCloseStart() {
+      console.log('Slide Close Start')
+    },
+    slideCloseEnd() {
+      console.log('Slide Close End')
+    },
+  },
+}
+</script>
+```
+
 ## Accessibility (A11y)
 
 This directive will prevent child elements of the sliding element from being focusable when closed. Other than that it does not handle any other aspects of a11y such as adding or removing of `aria` attributes. Check out the [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/) for more information. The most basic setup is to use `aria-expanded` and `aria-controls` as shown in the above [example](#usage).

src/components/Card.vue

@@ -8,7 +8,15 @@
       <!-- /.card-header -->
       <div class="card-content">
         <p>{{ description }}</p>
-        <ul :id="id" v-show-slide:[directiveArg]="open" class="features">
+        <ul
+          :id="id"
+          v-show-slide:[directiveArg]="open"
+          class="features"
+          @slide-open-start="slideOpenStart"
+          @slide-open-end="slideOpenEnd"
+          @slide-close-start="slideCloseStart"
+          @slide-close-end="slideCloseEnd"
+        >
           <li>Aliquam lorem</li>
           <li>Praesent porttitor nulla vitae posuere</li>
           <li>Suspendisse nisl elit rhoncus</li>
@@ -61,6 +69,22 @@ export default class CardDefault extends Vue {
   toggleFeatures() {
     this.open = !this.open
   }
+
+  slideOpenStart() {
+    console.log('Slide Open Start')
+  }
+
+  slideOpenEnd() {
+    console.log('Slide Open End')
+  }
+
+  slideCloseStart() {
+    console.log('Slide Close Start')
+  }
+
+  slideCloseEnd() {
+    console.log('Slide Close End')
+  }
 }
 </script>
 

src/index.ts

@@ -94,6 +94,21 @@ const VShowSlide: VShowSlideInterface = {
     })
   },
 
+  /**
+   * Fire a custom event
+   */
+  fireEvent(el, eventName) {
+    // CustomEvent is supported
+    if (typeof window.CustomEvent === 'function') {
+      el.dispatchEvent(new CustomEvent(eventName))
+    } else {
+      // CustomEvent is not supported, fire the event the old fashioned way
+      const event = document.createEvent('CustomEvent')
+      event.initCustomEvent(eventName, false, false, null)
+      el.dispatchEvent(event)
+    }
+  },
+
   /**
    * Parse directive arguments
    */
@@ -186,6 +201,8 @@ const VShowSlide: VShowSlideInterface = {
    * Slide element open
    */
   slideOpen(el) {
+    this.fireEvent(el, 'slide-open-start')
+
     const { isAnimating, timeout, duration } = this.getTargetByEl(el)
 
     // Check if element is animating
@@ -207,6 +224,8 @@ const VShowSlide: VShowSlideInterface = {
     const newTimeout = setTimeout(() => {
       el.style.height = 'auto'
       this.setTargetPropertyByEl(el, 'isAnimating', false)
+
+      this.fireEvent(el, 'slide-open-end')
     }, duration)
 
     this.setTargetPropertyByEl(el, 'timeout', newTimeout)
@@ -216,7 +235,10 @@ const VShowSlide: VShowSlideInterface = {
    * Slide element closed
    */
   slideClosed(el) {
+    this.fireEvent(el, 'slide-close-start')
+
     const { isAnimating, timeout, duration } = this.getTargetByEl(el)
+
     // Check if element is animating
     if (isAnimating) {
       clearTimeout(timeout)
@@ -237,6 +259,8 @@ const VShowSlide: VShowSlideInterface = {
     const newTimeout = setTimeout(() => {
       this.setTargetPropertyByEl(el, 'isAnimating', false)
       el.style.visibility = 'hidden'
+
+      this.fireEvent(el, 'slide-close-end')
     }, duration)
 
     this.setTargetPropertyByEl(el, 'timeout', newTimeout)

src/interfaces/v-show-slide.interface.ts

@@ -20,6 +20,7 @@ export default interface VShowSlide {
   validateOptions: (options?: PluginOptions) => void
   kebabToCamel: (string: string) => string
   parseArgs: (el: HTMLElement, binding: DirectiveBinding) => void
+  fireEvent: (el: HTMLElement, eventName: string) => void
   validateEasing: (argsArray: string[]) => string
   validateDuration: (argsArray: string[]) => number
   initializeTarget: (el: HTMLElement, open: boolean) => void