Hello Reload Download 1.0

German Michael Zülsdorff 2 months ago

Hello Reload

(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:

  • first one - swipe distance below 50, no reload triggered
  • second one - final distance 110 on touch release, reload triggered

enter image description here

Comments
German Michael Zülsdorff Replied 1 month ago

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.

au Matias Moreira Replied 1 month ago

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!

German Michael Zülsdorff Replied 2 months ago

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

German Dominik L Replied 2 months ago

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;
        });
    }
});

Component

Developer: Michael
License ossnv4
Type: Tools
Requires Ossn Version : 7.0
Latest Version: 1.0
Last Updated 2 months ago
Repository Url View Repository

Versions