(Developers only!)
This is a stripped down Hello World component with some Javacript provided by Dominik.
See https://www.opensource-socialnetwork.org/discussion/view/7168/add-pull-to-refresh-feature
The goal is triggering a page reload on mobile devices on swiping down.
It's working for me both on Chrome and Firefox, switched to mobile view on the developer console.
I added console logs for debugging as the screenshot shows:
We see two swipe attempts:
Feel free to share your ideas for enhancements in the comments. Let's brainstorm together and make this project even better! #slopegame
No.
Opensource means open conversation - there's no need to open any private channels.
If you have some enhancements of interest, just post them here.
Hello, could you contact me? Here is my email: [email protected]. I want to modify a few things, and it will be compensated. Thank you!
Fine!
And a good idea not to use these extra handlers on every page.
Although not quite foolproof: Think of people who are running Ossn in a subdirectory like https://somesite.com/somesubdir/... Your condition would fail then. ;)
Thus, let's recall what you are interested in: Newsfeeds. And nice enough, all newsfeed pages have one thing in common, the ossn-wall-container
class. That's why I would replace your condition by
if (document.getElementsByClassName('ossn-wall-container').length) { ....
Just one condition, working not only one /home, but also on group and profile pages
Works fine, thank you!
Made a few adjustments to the code so it only works on /home and it doesn't show the alert
document.addEventListener('DOMContentLoaded', function () {
if (window.location.pathname === '/home' {
let refreshDiv = document.createElement('div');
refreshDiv.className = 'refresh';
// some add-ons for cleaner placement on Goblue's topbar
refreshDiv.style.position = 'absolute';
refreshDiv.style.zIndex = '10';
refreshDiv.style.top = '-50px';
//
document.body.prepend(refreshDiv);
let startY = 0;
let isPulling = false;
document.addEventListener('touchstart', function (e) {
if (window.scrollY === 0) {
startY = e.touches[0].clientY;
}
});
document.addEventListener('touchmove', function (e) {
if (window.scrollY === 0 && e.touches[0].clientY > startY) {
let diff = e.touches[0].clientY - startY;
if (diff > 50) {
isPulling = true;
refreshDiv.style.top = '0';
} else {
refreshDiv.style.top = '-50px';
isPulling = false;
}
}
});
document.addEventListener('touchend', function (e) {
if (isPulling) {
setTimeout(function () {
refreshDiv.style.top = '-50px';
location.reload(); // Trigger a reload
}, 1000);
}
isPulling = false;
});
}
});