[SOLVED] F7 Vue Offline, BackButton Events

1

Hello,
I am confused abit… I am using F7vue but I am a little. I am supposed to Listen to online and offline events globally and do something with the Framework7 instance (this.$f7) forexample do an alert

this.$f7.dialog.alert('Hey, Youre Offline...')

Previously I have done so using framework7 core like this:

app.js

var app = new framework7({
...
})

//networkevents
$$(document).on(‘online’, function () {
app.dialog.alert(‘Yo… We Are Back…’);
});

//backbutton

$$(document).on("backbutton",function (e) {
  e.preventDefault();

       var page_name = app.views.main.router.currentPageEl.dataset.name;
 
       var leftpanel = app.panel.left && app.panel.left.opened;

           if ( leftpanel ) {
            app.panel.close();
              return false;
            }
            else if(app.views.main.router.url == '/'){
                app.dialog.confirm("Are You Sure You Want To Exit?","Exiting App", function () {
                     navigator.app.exitApp();
                });
            }  
            else if(page_name=="welcome"){
                app.dialog.confirm("Are You Sure You Want To Exit?","Exiting App", function () {
                     navigator.app.exitApp();
                });
            }  
            ...
});

I don’t know how to go about these now…in a vue environment since $f7 is not accessible in app.js

2 
var app = new Vue({
  ...
  mounted() {
    this.$f7ready((f7) => {
      // attach event handlers here, f7 - is the app F7 app instance
    });
  }
})
1 Like
3

Thanks so much @nolimits4web. This worked but I noticed that

f7.views.main.router.currentPageEl.dataset.name; keeps bringing an error… I use this to detect which page through the data-name property so I know what to do with the backbutton. Is there a different way to know this page detail?

I have:

<f7-page data-name="home"><f7-page>

How how do I access the name property with value = home?

4

@Max if it is a new project, i recommend you to create it with Framework7 CLI, it already have what you are asking for

1 Like
5

@nolimits4web, I have an issue trying to install the F7-CLI globally… I run node v10.x and I am seriously landing in this issue continuously… Here is npm log

➜  ~  npm install -g framework7-cli
/Users/maxadl/.npm-packages/bin/framework7 -> /Users/maxadl/.npm-packages/lib/node_modules/framework7-cli/index.js

> [email protected] install /Users/maxadl/.npm-packages/lib/node_modules/framework7-cli/node_modules/sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

ERR! sharp EACCES: permission denied, mkdir '/Users/maxadl/.npm/_libvips'
info sharp Attempting to build from source via node-gyp but this may fail due to the above error
info sharp Please see https://sharp.pixelplumbing.com/page/install for required dependencies
gyp ERR! configure error
gyp ERR! stack Error: EACCES: permission denied, mkdir '/Users/maxadl/.npm-packages/lib/node_modules/framework7-cli/node_modules/sharp/build'
gyp ERR! System Darwin 18.2.0
gyp ERR! command "/usr/local/bin/node" "/Users/maxadl/.npm-packages/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/maxadl/.npm-packages/lib/node_modules/framework7-cli/node_modules/sharp
gyp ERR! node -v v10.15.1
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `(node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/maxadl/.npm/_logs/2019-03-06T21_03_45_678Z-debug.log
➜  ~
6

Did you try with sudo?

1 Like
7

Yes bro @pvtallulah, I am actually running in as sudo via the sudo -s command. Cordova works well… I have fought with this issue for sometime now…

Mac OSX Mac Mojave

I have no idea why…

8 
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

This probably is the issue… Damn frustrating…:grin:

9

Try with nolimit solution

1 Like
10

sudo npm i framework7-cli -g --unsafe-perm=true --allow-root…

adding the two flags really did magic…

@pvtallulah… You solve most of my problems bro, I can never ever thank you enough! I truly appreciate your kindness! Once again, am grateful… thanks

1 Like
11

Thanks max. I really like F7. In the future i want to become a patron. But my economic situation is not ideal. So the way i can thanks nolimit for his work is by trying to help others users to use his awesom framework.

1 Like
12

Awesome, this is exactly my situation. I had promised myself to become a patron by Jan, this year but my income couldn’t afford me the chance. I am however hopeful that my situation will improve soon and I will not wait for anyone to even remind me. For now, I can only help new comers in the same way! Admittedly however, the world needs people like you, YOU ARE A GOOD PERSON, NO DOUBT. Blessings for what you are doing! We shall make it through, compadre!
Thanks so much!

1 Like