How to make a pull to refresh that detects internet Connection

1

Am new at Framework7 Great Api btw but i was wondering if there is anyway to create a pull-to-refresh that detects internet connection.

For example i want when the user refreshes the Home page to display a toast which checks for new content and when the user is not connected to the internet to display a offline a dialog which can tell the user to connect to the internet and direct them to there Internet Connection Settings but my code keeps on failing can someone help here is the JavaScript code:

    export default {
        data: function() {
            return {
                items: [],
            }
        },
        methods: {
            loadMore: function(e, done) {
            
                
                setTimeout(function() {
                    
                    function Connectionstatus() {
                        if (navigator.onLine) {
                            $.toast.create({
                                text: 'Checking For New Content...',
                                position: 'bottom',
                                cssclass: 'bg-color-darkgray',
                                destroyOnClose:true
                            }).open();
                        }
                        else {
                                app.dialog.create ({
                                   text: 'Please Connect to the Internet.',
                                   cssclass: 'custom-dialog',
                                   closeByBackdropClick: 'true',
                                    buttons: [
                                        {
                                            text: 'OK',
                                        },
                                        {
                                            text: 'SETTING',
                                            onclick: function () {
                                                window.location.href = "";
                                            }
                                        }
                                    ]
                                }).open();
                        }
                    }
                    
                    done();
                }, 2000);    
            }
        }
    }
2

Try window.navigator.onLine

3
  1. You have defined Connectionstatus function but you are not calling it
  2. I can’t see any loading logic

I think it can be simplified to this:

export default {
  data: function () {
    return {
      items: [],
    };
  },
  methods: {
    loadMore: function (e, done) {
      const app = this.$app;
      if (navigator.onLine) {
        app.toast
          .create({
            text: "Checking For New Content...",
            position: "bottom",
            cssclass: "bg-color-darkgray",
            destroyOnClose: true,
          })
          .open();
        // proceed with loading and then call done();

      } else {
        app.dialog
          .create({
            text: "Please Connect to the Internet.",
            cssclass: "custom-dialog",
            closeByBackdropClick: "true",
            buttons: [
              {
                text: "OK",
              },
              {
                text: "SETTING",
                onclick: function () {
                  window.location.href = "";
                },
              },
            ],
          })
          .open();
        done();
      }

    },
  },
};
4

Thank You I appreciate it I will try it immediately