pulltorefresh.js - Disable temporarily

Asked 31/7, 2017 at 23:43 Answered 8/8, 2017 at 23:48

I am using this PullToRefresh plugin:

https://github.com/BoxFactura/pulltorefresh.js#api

It works well but I have a popup on my page with div inline scroll. The problem is that when I want to scroll up (in the div) the PullToRefresh is triggered. Is it possible to "delete" or to temporarily disable the PullToRefresh when my popup is opened?

PullToRefresh.init({
    mainElement: 'body',
    onRefresh: function(){
        refreshAll();
    }
});

edit: delete PullToRefresh; // does not work

edit2: https://github.com/BoxFactura/pulltorefresh.js/blob/master/dist/pulltorefresh.js

Brasca answered 31/7, 2017 at 23:43 Comment(0)

PullToRefresh.init() will return an object with a destroy() function as callback: https://github.com/BoxFactura/pulltorefresh.js/blob/master/dist/pulltorefresh.js#L326

var refresher = PullToRefresh.init({
    mainElement: 'body',
    onRefresh: function(){
        refreshAll();
    }
});

// destroy the PullToRefresh EventListeners when you open your popup
refresher.destroy()

There's also an open Github issue about improving the way to destroy this library after initialization: https://github.com/BoxFactura/pulltorefresh.js/issues/22

Dismiss answered 3/8, 2017 at 2:57 Comment(0)

IMO there are two reasonable ways to do this.

You can define a triggerElement and put your overlay outside of this triggerElement:

PullToRefresh.init({
    mainElement: 'body',
    triggerElement: '#mainContent',
    onRefresh: refreshAll
});

with a markup somewhat like this

<body>
    <div id="containerForOverlays"></div>
    <div id="mainContent"></div>
</body>

that way, everything inside of #containerForOverlays won't trigger a refresh.

Or you could use the new hook shouldPullToRefresh() if your version already supports it.

An example where PullToRefresh depends on a checkbox to be checked

<label><input id="refresh" type="checkbox"> Pull to Refresh?</label>

using it like

PullToRefresh.init({
    mainElement: 'body',
    shouldPullToRefresh: function(){
        return document.getElementById('pullToRefresh').checked
    },
    onRefresh: refreshAll
});

Of course I'm not suggesting that you use a checkbox in your production code. I just wanted to show how you could dynamically "turn PullToRefresh on and off". In this example, depending on the checkbox to be checked.

It's up to you to implement the correct shouldPullToRefresh() for your application to determine wether PullToRefresh should be active or not.

Hanover answered 8/8, 2017 at 23:48 Comment(0)

Recommended topics

Hot tags