Pull To Refresh can collide with Expandable Cards

I’m having some problems using expandable cards within a pull-to-refresh container. It’s not a consistant problem, just occasional. Here’s a JS Fiddle to demonstrate:
https://jsfiddle.net/kerrydp/per6f395/

Sometimes, in the process of pulling-to-refresh, the card will launch and render half-way on the screen. But it doesn’t happy every time… I guess it depends where the touch/cursor is.

I know there are ptr-watch-scrollable and ptr-ignore but I’m unsure which is best to use on card-expandable… I’ve run into the card not allowing pull-down-to-close when these classes are used.

Maybe this is a bit Hacky, dont know if its the correct way. but it works for me

var allowExpand = true

Dom7(document).on('ptr:pullstart', () => {
	console.log('ptr:pullstart')
	allowExpand = false
})
Dom7(document).on('ptr:done', () => { 
	console.log('ptr:done')
	allowExpand = true
})
Dom7(document).on('card:beforeopen', (e, p) => {
  if (!allowExpand) {
    p.prevent()
  }
})

jsfiddle

1 Like

Thanks, I’ll give it a shot and see how my testing goes.

Your code worked great, but I ended up expanding it a little bit, as the card could get tripped up if the view was only pulled down slightly and not enough to trigger a refresh.

var allowExpand = true
Dom7(document).on('ptr:pullstart', () => {
	console.log('ptr:pullstart')
	allowExpand = false
})
Dom7(document).on('ptr:pullend', () => {
    console.log('ptr:pullend - timer start')
    setTimeout(function(){
        console.log('ptr:pullend - timer end');
        allowExpand = true;
      }, 200);
})
Dom7(document).on('ptr:done', () => { 
	console.log('ptr:done')
	allowExpand = true
})
Dom7(document).on('card:beforeopen', (e, p) => {
  if (!allowExpand) {
    p.prevent()
  }
})

Thanks for your help!

2 Likes