pulltorefresh.js
pulltorefresh.js copied to clipboard
destroyAll does not destroy all thus causing PullToRefresh misbehave when `styleEl` has been removed from DOM
Bug report
Calling destroyAll
keeps some state even though the word All
implies that it's clean slate. For example it does not care about _shared.styleEl
or _shared
object contents at all which might cause problems.
Fixes a problem reported previously in https://github.com/BoxFactura/pulltorefresh.js/issues/108
Current behavior:
Keeping global state between destroyAll
and init
might cause a problem where SPA type application is used and head
is modified in the DOM in a way that PullToRefresh styleEl
is removed from it, which is used internally by PullToRefresh.
For example, I'm using a library called morphdom to patch head
and body
after fetch
request and this also removes styleEl
. It should not be a problem in itself because I'm also calling PullToRefresh.destroyAll()
before patching and PullToRefresh.init()
after patching the DOM.
However, since PullToRefresh setupDOM
function only checks if _shared.styleEl
has a value, but does not care about the styleEl
being part of the DOM. It just assumes that it is part of the DOM.
A quick fix would be to change setupDOM
to this:
function setupDOM(handler) {
...
if (!_shared.styleEl) {
_shared.styleEl = document.createElement('style');
_shared.styleEl.setAttribute('id', 'pull-to-refresh-js-style');
}
if (!_shared.styleEl.parentNode) {
document.head.appendChild(_shared.styleEl);
}
_shared.styleEl.textContent = handler.getStyles().replace(/__PREFIX__/g, handler.classPrefix).replace(/\s+/g, ' ');
...
}
Basically we should check that styleEl
is part of the DOM and if not then put it there.
Expected behavior:
Should even work when PullToRefresh internally used element for styling is removed from DOM.
JSFiddle URL for demo with bug: N/A
Browsers affected: Every browser.