Merge pull request #2 from stimulus-components/feature/removing-mouseout

Feature/removing mouseout

CHANGELOG.md

@@ -6,6 +6,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.0.0] - 2020-11-10
+### Added
+- Adding `tippyOptions` getter to simply override default options.
+- `tippy` instance is now a singleton.
+- Destroy `tippy` instance on disconnect.
+
+### Changed
+**Breaking** - Removing `mouseOut` action.
+**Breaking** - `popover` action does not return a new `tippy` instance.
+
 ## [1.0.0] - 2020-10-20
 
 ### Added

README.md

@@ -55,7 +55,7 @@ With server rendered content on the fly:
   <a
     href="/profile"
     data-controller="popover"
-    data-action="mouseover->popover#mouseOver mouseout->popover#mouseOut"
+    data-action="mouseover->popover#mouseOver"
     data-popover-url="<%= card_path %>"
   >
     profile card
@@ -69,7 +69,7 @@ With static html:
   This is my Github card available on
   <a
     href="/profile"
-    data-action="mouseover->popover#mouseOver mouseout->popover#mouseOut"
+    data-action="mouseover->popover#mouseOver"
   >
     Github
   </a>
@@ -86,7 +86,6 @@ With static html:
 | --------- | ------- | ----------- | -------- |
 | `data-popover-url` | `undefined` | URL to fetch the content. | ✅ |
 
-
 ## Extending Controller
 
 You can use inheritance to extend the functionality of any Stimulus components.
@@ -98,6 +97,9 @@ export default class extends Popover {
   connect() {
     super.connect()
     console.log("Do what you want here.")
+
+    // Get tippy options. Override this method if needed.
+    this.tippyOptions
   }
 }
 ```

index.html

@@ -105,10 +105,7 @@ <h2 class="text-xl mb-2 mt-8">With AJAX</h2>
         <h2 class="text-xl mb-2 mt-8">With static html</h2>
         <div data-controller="popover">
           This is my Github card available on
-          <a
-            href="https://github.com/stimulus-components/stimulus-popover"
-            data-action="mouseover->popover#mouseOver mouseout->popover#mouseOut"
-          >
+          <a href="https://github.com/stimulus-components/stimulus-popover" data-action="mouseover->popover#mouseOver">
             Github </a
           >.
 

src/index.js

@@ -8,6 +8,12 @@ export default class extends Controller {
     this.fetch = this.fetch.bind(this)
   }
 
+  disconnect () {
+    if (this.tippyInstance) {
+      this.tippyInstance.destroy()
+    }
+  }
+
   async mouseOver (event) {
     let element = null
     let content = null
@@ -22,12 +28,7 @@ export default class extends Controller {
       content = this.remoteContent
     }
 
-    this.tippyInstance = this.popover(element, content)
-  }
-
-  mouseOut () {
-    this.tippyInstance.destroy()
-    this.tippyInstance = undefined
+    this.popover(element, content)
   }
 
   async fetch () {
@@ -36,19 +37,21 @@ export default class extends Controller {
     }
 
     const response = await fetch(this.data.get('url'))
-    const html = await response.text()
-
-    this.remoteContent = html
+    this.remoteContent = await response.text()
   }
 
   popover (element, content) {
-    const instance = tippy(element, {
-      content: content,
-      allowHTML: true
-    })
+    if (!this.tippyInstance) {
+      this.tippyInstance = tippy(element, this.tippyOptions)
+      this.tippyInstance.show()
+    }
 
-    instance.show()
+    this.tippyInstance.setContent(content)
+  }
 
-    return instance
+  get tippyOptions () {
+    return {
+      allowHTML: true
+    }
   }
 }