Catch quickview:ready, quickview:show, quickview:hide

[l-astro]

Thanks for the great extension! I'd like to run some code on quickview:ready (and similarly on show/hide), is this possible? Basically as soon as the quickview:ready is fired I'd like to click the button (i.e. before window.onload, which is where I'm currently calling showButton.click())

I've not yet managed to figure out how (I've tried attaching the event listener to the show/hide buttons and the quickview itself but to no avail)

showButton.addEventListener('quickview:ready', () => { console.log('quickview:ready') })

Am I missing something obvious or can't this currently be done?

Thank you!

[ClintDavis]

Same here. Events are not getting emitted into vue event console.

[ClintDavis]

So, quickview src/index.js:42 has a setTimeout, so no promise or handler is available. I had to copy the waiting time for the timeout to exceed before registering my listeners. I am unclear why the setTimeout is needed, as the use case would be to trigger the attach after the mount (or DOM loaded)

mounted() {
   var quickviews = bulmaQuickview.attach();

   setTimeout(() => {
    // Loop on each initialised
    quickviews.forEach(quickview => {
      console.log(quickview)
      // Add listener to quickview:show event
      quickview.on('quickview:show', x => {
        console.log('quickview show', x)
      })
      // Add listener to quickview:hide event
      quickview.on('quickview:hide', x => {
        console.log('quickview hide', x)
      })
    })
   }, 105)
}

[ClintDavis]

Or use a mutation observer: https://caniuse.com/#feat=mutationobserver

npm install --save vue-mutation-observer

<template>
    <div>
        <div
            id="support-quickview"
            class="quickview"
            v-observer:attributes="changeActive"
        >
        .....
        </div>
    </div>
</template>

<script>
import observer from 'vue-mutation-observer'

export default {
  methods: {
    changeActive: function(e) {
      
      if (e[0].target.className == "quickview is-active") {
        console.log('shown')
      } else {
        console.log('hidden')
      }
        
    }
  }
}
</script>