Show HN: PullToRefresh.js
boxfactura.com
boxfactura.com
I'm entering something. I need to reference something else off the screen. I drag down to see the thing off the screen. I pull too hard and ... the page is refreshed and I've lost my work
Please do not use pull to refresh on your site. And, if you're a browser ux designer please remove it. It's arguably as bad as using backspace for "previous". Possibly worse since most people have no need to refresh and those that do have other ways to do it.
That's not an anti-feature, that's poor UX. If you're entering data into a form that might get lost, the UX team should add an event that checks if you're trying to go somewhere else (or reload), to confirm whether that's the action you want to do.
Your argument against pull to refresh could be the same for the reload, back and forward buttons in your web browser. Also, against the URL/search bar, because it might lose your progress.
And all is fixed with a confirm() on the unload event, and it has nothing to do with the pull to reload feature.
In a reverse chronological listing, 'new' stuff is always at the top. Pull-to-refresh refreshes the listing, grabbing whatever could be placed 'above' the page, when you scroll past the top of what's currently loaded. it's just the other end of 'infinite scrolling'.
Triggering `location.reload()` when you scroll past the top is a bad idea -- about as appropriate as triggering `location = nextPage`, when you get to the bottom. But most pull-to-refreshes don't do that.
For HTML/JS apps though it's a whole different story and might help giving it much more native look and feel.
Also, what I said in a previous comment: maybe you want consistency across browsers/platforms or branding, customizing how it looks. And maybe you don't want to refresh the whole page, maybe just one section calling a JSON API, or perhaps you have a heavy job that requires a worker.
The focus on PullToRefresh.js is to manipulate the DOM and add the elements programatically, and allow its own proportions to push down the content.
EDIT: point taken. Non-touch device
Pull to refresh on mobile chrome or safari is really terrible ux for web apps. It's ok for content sites but if you have an app that you want to behave like a native app it's really terrible. A good example is maps.google.com. Even if you install it as a home screen app it still has the stupid pull to refresh gesture in chrome.
I wish there was some way to disable it in browsers. I have tried many things like position: fixed or overflow-y:hidden but these have other side effects like preventing the keyboard from repositioning the window in chrome or safari.
In general if a web browser overrides any touch gestures they should be able to be disabled by the page without having to handle every touchmove yourself.
I'd suggest you to download the library and delete some of the lines for the callbacks on the touch events, maybe you can isolate it and figure out what is achieving that result.
Or, you could try something like this:
PullToRefresh.init({
mainElement: '#main',
distMax: 0,
onRefresh: function(){}
});Specifically, Ionic uses AngularJS as part of it's framework. So, implementing this would be a little more work than drop-in but I'm interested in trying, when I have some free time.
Thanks for creating it.
Very well done, looking forward for more products from you two.
Edit: typo
The use case we're aiming with this library is that not always you want to refresh the whole page; sometimes you want to update just one section of the app (think Gmail), do something deferred with a worker, or set a timeout.
Also, you want to be consistent across all browsers/platforms, and maybe add a little touch of personality or branding [1].
So, while I agree with you it should be standard, and maybe it should have an API, it has to be flexible enough for every and each thing you want to achieve... so you'll need a library, and we're full circle.
What does that mean?
Because of the touch events, the browser decides to not use those features, as it might affect it. Since there's no standard way to do it (like a meta tag), the browser has to decide with the events it has.
http://www.ipwatchdog.com/2015/02/25/the-road-forward-for-so...