I am using Ionic 2.
Page 1 (SearchPage) -> popover -> Page 2 (MapPage) -> Page 1 (SearchPage) (menuToggle not working)
I have a root page (SearchPage):
html
<ion-header>
<ion-navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
</ion-header>
ts
presentPopover(event: Event): void {
let popover: Popover = this.popoverController.create(SearchPopOverPage, {
ev: event,
employeeModel: this.employeeModel
});
popover.present();
}
Popover
presentFilterMap(event: Event) {
this.viewCtrl.dismiss().then(() => {
this.nav.push(MapPage, {
ev: event,
employeeModel: this.employeeModel,
fromSearch: true
})
});
}
But when I try return to the root page (with a parameter), it displays the menu toggle button (3 lines), but when I click it it does not work (i.e. does nothing, where it should display the side menu).
ts (MapPage) file which returns to root:
this.nav.insert(0, SearchPage, {
employeeModel: this.employeeModel
});
If I try popToRoot(options), this works and the menu toggle button is working. However, it does not reload the page with the new parameter.
Any ideas how I should navigate back to the root page with a parameter please?
Thanks
UPDATE:
I have tried the following, but it does not go back to the root:
let options = {
employeeModel: this.employeeModel
};
this.nav.popToRoot(options);
UPDATE:
I have also tried changing the popovers call to the next page, but with little success. Now the back button on the MapPage works, but when I go to the root page, the menuToggle is still not responding to clicks.
presentFilterMap(event: Event) {
this.nav.push(MapPage, {
employeeModel: this.employeeModel,
fromSearch: true
}).then(() => {
this.viewCtrl.dismiss();
});
}
If I don't dismiss the popover,
this.nav.push(MapPage, {
employeeModel: this.employeeModel,
fromSearch: true
});
then when I use the back button on the MapPage back to root, the popover is still there, and the menuToggle works as expected. But if I rather navigate back to the root page (which I need to do) then the popover is not there and the menuToggle is not responsive.
This means the issue is to do with the popover.
import { App } from 'ionic-angular';
constuctor(public app: App) {};
pushSignupPage() {
this.viewCtrl.dismiss().then(() => {
this.app.getRootNav().push(SignupPage);
});
}
this work for me. good luck
SOLUTION: Use events to handle the parameters and pop to root
let data = {
eModel: this.eModel
};
events.publish('employee:update', data);
this.nav.popToRoot();
In your SearchPage constructor:
events.subscribe('employee:update', (data) => {
//do whatever you need to do with your data:
let EModel = data[0].eModel;
});
when you navigate back from map page to search page
use :
this.navCtrl.push(SearchPage, { employeeModel: this.employeeModel });
Related
I have a page: customers, where I have a list of customers.
There I have a button to edit the informations'customers.
When I click on this edit button I open a modal in another page: CustomerDetail.
So clicking in editing button I can modify the data in the modal, and when I save date I have a problem. Basically the info in the page customers are not update until I refresh the page.
So in my customerDetail.page.ts, when I click on save:
onUpdateCustomer(customer){
//...code...
updateCustomer.pipe(untilDestroyed(this)).subscribe(
(data) => {
this.loading = false;
this.showingUpdateMessage = true
this.goToCustomers();
},
(error) => {
console.log("error - update customer ", error);
}
);
}
I have tried using goToCustomers but it doesn't work properly
goToCustomers(){
this.router.navigate(["/customers"])
}
I Would not use window.location.reload() but I don't know how to do to have updated data without reload the page.
Imagine to have a page with a table (customers page), when click on edit button I call the other page CustomerDetail as:
openCreateCustomerPage() {
this.router.navigate(["/customerDetails"], {
queryParams: { customerCreate: true },
});
So I open the modal.
I have been looking for Electron app events for when the application is shown or hidden. I see in the docs that there is 'browser-window-blur' and 'browser-window-focus' but those do not do what I want.
I would like to know when the user has switched to another application or switched back to my app. The above events get triggered if the user switches between browser windows – including the "developer's tools" window.
The code in main.js
app.on('browser-window-focus', () => {
if (mainWindow) {
console.log('browser-window-focus');
mainWindow.webContents.send('projectMsg', { "event": "focus" });
}
});
app.on('browser-window-blur', () => {
console.log('browser-window-blur');
if (mainWindow) {
mainWindow.webContents.send('projectMsg', { "event": "blur" });
}
});
It seems to me that it works exactly as you described, so maybe the requirements are different.
This code
const {app, BrowserWindow} = require('electron')
app.on('browser-window-focus', (event, win) => {
console.log('browser-window-focus', win.webContents.id)
})
app.on('browser-window-blur', (event, win) => {
if (win.webContents.isDevToolsFocused()) {
console.log('Ignore this case')
} else {
console.log('browser-window-blur', win.webContents.id)
}
})
app.once('ready', () => {
new BrowserWindow()
new BrowserWindow().webContents.openDevTools({detach: true})
})
works the following way (in 3.0.3) given that nothing is focused initially:
Clicking on window 1 prints browser-window-focus 1
Clicking on window 2 prints browser-window-blur 1 browser-window-focus 2
Clicking on devtools window prints browser-window-blur 2 Ignore this case
So as far as I see devtool is not included in these events, windows are getting blurred for any other window focused (including devtool)
There is also show and hide, though you have to explicitly show/hide the app with win.show() and win.hide() to trigger these events.
Check out of these BrowserWindow's events:
Event: 'blur': Emitted when the window loses focus.
Event: 'show': Emitted when the window is shown.
For example:
app.once('ready', () => {
let mainWindow = new BrowserWindow({show: false}) //Create main window
mainWindow.on('show', () => {
//Do something
})
})
Hope this help.
I want to add a row in database, after that, reload current page to update new data, but when I use $state.reload(), all page becomes dark and I cannot interact with this page.
DeviceService.addDevice($scope.newDevice).then(function (result) {
if (result.data.success) {
flash.success = result.data.message;
// current state is 'profile' and I want to reload to update data
$state.go('profile', {}, { reload: true });
} else {
flash.error = result.data.message;
}
});
After reload, from this:
becomes this:
UPDATE:
I think maybe it's because I use a modal to add device. Are there anyway to fix it ? How can I close the modal before reload the state. I am using bootstrap modal inside file profile.html
try following:
$state.reload();
and if will not work try this:
$state.transitionTo($state.current, $stateParams, {
reload: true,
inherit: false,
notify: true
});
I have two forms, one is called profile, the other is settings. I'm using introjs to have a guided tour through these two forms. If I only move forward through the tour using the introjs 'Next Step' button there are no issues (first image). But, if I use the browser back or forward button, my forms look like the second image.
Code on profile page that utilize introjs:
runTour() {
if (this.state.showTour === true) {
const tourObj = {
userId: Meteor.userId(),
page: 'profile',
};
introJs.introJs().setOption('doneLabel', 'Next step').start().oncomplete(()
=> {
changeIntroTour.call(tourObj);
browserHistory.push('/user/settings');
})
.onexit(() => {
changeIntroTour.call(tourObj);
});
}
}
componentWillReceiveProps(nextProps) {
this.existingSettings(nextProps);
if (nextProps.intro.length > 0) {
this.setState({
showTour: nextProps.intro[0].profileTour,
}, () => {
this.runTour();
});
}
}
The issue was I was not calling introJs.exit() on componentWillUnmount. This was keeping my instance of introJs running from one component to the next which caused the bug.
I am trying to add a global shortcut to my Electron app that will toggle showing/hiding it. My app is a menubar app built using maxogden/menubar and React.
I have the following code. I've left a couple of bits out just for brevity but this is how I have setup the global shortcuts.
I think it's important to note one of the tips on the maxogden/menubar Readme too:
Use mb.on('after-create-window', callback) to run things after your
app has loaded
const { globalShortcut } = require('electron');
const keyboardShortcuts = {
open: 'CommandOrControl+Shift+g',
close: 'CommandOrControl+Shift+g'
}
menu.on('after-create-window', () => {
globalShortcut.register(keyboardShortcuts.open, () => {
menu.window.show();
});
});
menu.on('after-show', () => {
globalShortcut.unregister(keyboardShortcuts.open);
globalShortcut.register(keyboardShortcuts.close, () => {
menu.window.hide();
});
});
menu.on('focus-lost', () => {
globalShortcut.unregister(keyboardShortcuts.close);
globalShortcut.register(keyboardShortcuts.open, () => {
menu.window.show();
});
});
Once the menubar has first been opened, my shortcut is registered and will work to show the app. However, the code I've implemented to unregister the shortcut, and re-register it to hide the app (when showing), doesn't seem to work.
I'm not sure if my code to reregister the shortcut is setup within the right event handler i.e after-show and focus-lost. I have a feeling that these event handlers I'm working within are related directly to my menu rather than menu.window. This would explain why the reregistration of the shortcut isn't happening, but I'm not sure.
Does anyone have any idea how I would sensibly set up a global shortcut toggle to open/close my menubar app?
From the menubar docs (https://github.com/maxogden/menubar) the menubar instance exposes the following methods:
{
app: the electron require('app') instance,
window: the electron require('browser-window') instance,
tray: the electron require('tray') instance,
positioner: the electron-positioner instance,
setOption(option, value): change an option after menubar is created,
getOption(option): get an menubar option,
showWindow(): show the menubar window,
hideWindow(): hide the menubar window
}
Using menu.showWindow() & menu.hideWindow() instead of menu.window.show() & menu.window.hide() will work.
I would further suggest that you use the built in events to manage your state, simplifying your code and implementation:
const { globalShortcut } = require('electron');
let isShown = false;
menu
.on('after-show', () => { isShown = true })
.on('after-hide', () => { isShown = false })
.on('focus-lost', () => { isShown = false });
globalShortcut.register('CommandOrControl+Shift+g', () => {
isShown ? menu.hideWindow() : menu.showWindow()
});