framework7

Open full view…

Check if preloader or modal is showing (F7+Vue)

muhwid
Sat, 07 Oct 2017 11:01:37 GMT

Hi guys, how are you? i have some issues here. i want to check wheter there is modal or preloader showing, i've tried using self.$f7.modal.length but it always shown 1 no matter is showing or not. its always 1. is there anyone can help me? i using framework 7 with Vue JS. thanks btw.

abdulmuhit
Mon, 09 Oct 2017 19:57:42 GMT

Hello, for modal show or hide, I used vuex to store the state, I manualy change the state for every modal open or close, Maybe there's another more neat approach, but for now it's quite works for me. Not quite sure about the preloader but maybe the principle could also be the same. here some of my code example: --- javascript var store = new Vuex.Store({ state: { popUpOpen: false }, mutations: { updatePopUpState: function(state, content){ state.popUpOpen = content; } } }); //Then on the method section in some of the component I created this method: method: { openPopup: function(){ this.$f7.popup("#popupNo1"); store.commit('updatePopUpState', true); }, closePopup: function(){ this.$f7.closeModal("#popupNo1"); store.commit('updatePopUpState', false); } } //So I also can use that state for the back button, close the popup or history back. //Init App new Vue({ el: '#app', framework7: { root: '#app', routes: [ { path: '/about/', component: 'about' }, ], swipePanelOnlyClose:true, animatePages: true, preloadPreviousPage: true }, data: function(){ return { myRootData: 'helo vue framework7', }; }, methods: { quitApp: function(){ // I used framework7+vue on tizen device, so the syntax to the native api is quite different, but I think you can easy modify it to your need. tizen.application.getCurrentApplication().exit(); }, openModalQuit: function(){ this.$f7.popup("#confirmExitActions"); } }, created: function(){ var self = this; //also same in here, you can modify the document.addEventListener for your platform that you used. document.addEventListener('tizenhwkey', function(e) { if (e.keyName === "back") { try { //check if we at home/start pages if(self.$f7.mainView.url === '#null'){ self.$f7.popup("#confirmExitActions"); } else { if(store.state.popUpOpen) { self.$f7.closeModal(); store.commit('updatePopUpState', false); } else { self.$f7.mainView.back(); } } } catch (ignore) {} } }); } }); ... Hope it quite clear and also can help your project, if there's more neat approach, please also let me know, thanks.

muhwid
Wed, 11 Oct 2017 05:05:37 GMT

ok thanks dude, i'll try it