Unable to get prevent function working for accordion

Questions
1

I have an app where I am trying to use the accordionBeforeOpen event to stop firing on a swipe.

  1. I created a fiddle to try and illustrate how I can not get the prevent function to stop the accordion opening?
    https://jsfiddle.net/789aw1xk/

  2. this led to a second problem that the following code is not getting hit in the jsfiddle example, as it does in my local app

app.on(‘accordionBeforeOpen’, function (el, prevent) {
console.log(‘The following element opened:’);
prevent; // does not seem to be working ??
});

  1. also curious if there any way to get the event in the above function so that I could track the last drag time and compare with the time of the current event, and such
2

you are using f7 v3.5.1

or at least thats the v in your fiddle

https://unpkg.com/[email protected]/js/framework7.js

i dont know since when accordionBeforeOpen its supported. but v3 its pretty old. Try updating to v5

edit:

just read the changelog

its available for v 3.6.0, so try by updating f7 to that version.

v3.6.0 - December 7, 2018

  • Core
    …
    • Accordion
      • New accordion:beforeopen event that is triggered right before accordion will be opened. event.detail.prevent contains function that will prevent it from opening if called;
      • New accordion:beforeclose event that is triggered right before accordion will be closed. event.detail.prevent contains function that will prevent it from closing if called;
3

Thanks so much for your answer. I am using a later copy on my app but copied edited this from another example. I have now changed so it is using latest version here :

https://jsfiddle.net/pworthing/1p62os78/45/

I have added swipeout for the accordion in my example, to show where I am trying to get to. Swiping left has no effect (normal accordion which is great) but swiping right causes it to open, probably because of the swipeout right.

I don’t see the prevent working even if I take out the swipeout classes.

I am hoping to prevent the accordion behaviour in both cases.

4

you reciving passing prevent as a param on the swiper, it is a function.
eg

// this will prevent accordion if swipeout is opened
if ($('.swipeout-actions-opened').length) prevent()

note he the parenthesis ()

change the code to your needs

5

Thankyou so much for the effort. This is almost perfect. The only thing missing is the left swipe when the swipeout is open. I tried “swipeout-actions-deleted” and “swipeout-close” after searching code for similar classes.

Alternative I was thinking of over the weekend was something like the following… but looks messy.

var swipeOrClick = “click”;
app.on(‘swipeout’, function (el) {
console.log(“mouse Dragged”);
swipeOrClick = “swipeout”;
});
Dom7(’.swipeout’).on(‘mousemove’, function (e) {
console.log(‘swipeout mousemove’);
swipeOrClick = “move”;
});

6

Dont understand what you need with
The only thing missing is the left swipe when the swipeout is open

7

If I swipe right, the swipe buttons show and that is great.
Once they are shown, there is an option to swipe left , to remove the swipe options and return where you were. If I do that, the list opens as the buttons disappear.

Saved, with your addition:
https://jsfiddle.net/pworthing/1p62os78/83/

8

this is what you need?

if ($$('.swipeout-actions-opened').length || $$('.swipeout-transitioning').length) prevent();
1 Like
9

thankyou so much
peter

10

small hiccup
If you don’t swipe enough, the swipe transition seems to start but the buttons are not displayed.
At that point, I can no longer click because the transition is set.

Is there a way to check the visibility of the button?
Something like : Dom7(’.swipeout-actions-left’).is(’:visible’) ?