PhotoBrowser: Swiper:on events not bound except "on:init"

cepm-nate commented 5 years ago

Framework7 version: 4.1.0
Vue.js version: 2.5.13
Platform and Target: Web app for Chrome/Safari
Live Link or JSFiddle: https://jsfiddle.net/4Lm3eh2w/

Describe the bug

Other than the 'init' event, no events are bound within the 'on' property inside the swiper parameters specified.

To Reproduce

Visit JSFiddle, tap browser one, notice lack of alerts.

Expected behavior

I expect the swiper API events to fire when they are supplied in the swiper object property for the F7 Photo Browser.

Actual Behavior

Other than 'init', the events are not fired.

Additional context

The only way I can work around it is WITHIN the "init" event, use the reference to add the other listeners to the "swiper". And this must be done in a timeout so it happens AFTER the swiper is initialized. This smells of bad design.

nolimits4web commented 4 years ago

1) Your JSFiddle doesn't contain anything related to Photo Browser 2) Events that are not possible to pass via swiper.on are available as PB events (like transitionStart and others) https://framework7.io/docs/photo-browser.html#photo-browser-events 3) F7 v4.x is not maintained anymore

cepm-nate commented 4 years ago

1) That was may fault. I thought "Save" would save it to the url. 2) ... and are all these accessible from the framework7-vue side too? If so, how do I tie into them? (see the JSFiddle link below for my attempts) 3) Understood, updated linked libraries to v51.1, still seeing the same issue.

Here is an updated JSFiddle: https://jsfiddle.net/nathansutherland/zxbw02fm/45/

In the linked JSFiddle, I have tried multiple ways to use the slideChange event (clearly documented in the photo-browser-events page), to get an alert to pop up. The alert does not show up in Chrome or Firefox for me on slideChange. (and no "this page has hidden an alert" warnings)

Am I missing something obvious?

Watching the vue-tools console plugin, there do not seem to be any emitted events for the F7PhotoBrowser (when initialized with the vue component) for anything other than "opened" and "closed".

This is why I was trying to add the 'on: slideChange' event into the initial swiper parameters, which led me to post about this issue.

cepm-nate commented 4 years ago

In case anyone stumbles on this in the future: The answer to this is to bind the events to like so:

  <f7-photo-browser
      ref="photoBrowser"
      :params="{
        photos: photos,
        on: { slideChange: methodToFire },
      }"
    ></f7-photo-browser>

framework7io / framework7