router.push electron-vue doesn't work if mainwindow is hidden - javascript

I've an app built with Electron and Vuejs / Vue-router.
In my electron's index.js I have this function, for hide the window once time I've opened the app.
mainWindow.hide();
I have also a Splash-Page built with Vuejs that make a redirect if user is Logged, some like:
if(this.isLogged()){
this.$router.push({name: 'logged-view'})
}else{
this.$router.push({name: 'login-view'})
}
My problem is that if I hide my window with mainWindow.hide() the Splash-Page make a push of route but it will never create a component (login-view or logged-view).
Instead if I remove mainwindow.hide() the app redict towards my component correctly.
Yes I can hide window once time I am in the new component after redirect, it isn't the behavior that I would have.
So is there a way for redirect if mainwindow is hidden?

For others Developers:
I've solved.
I don't call a mainwindow.hide() anymore, but I have put in my browserwindow creation:
mainWindow = new BrowserWindow({
height: 563,
useContentSize: true,
width: 1000,
show:false // this for solve the problem of router.push() avoid mainwindow.hide()
})

Related

Vuejs iframe interfering with router

I have an iframe embedded in my component. When I use
this.$router.go(-1);
To go back to the previous page, it makes the iframe go back to the previous page instead of the current window.
It doesn't go back until it finishes going back on all the pages I visited within the iframe.
How can I make vue return to the previous route/page without including the iframe's navigation?
you can try some like:
//
# main component:
//
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes: [
// ...
]
});
Window.vueRouter = router;
//
# iframe component:
//
window.parent.vueRouter.go(-1);
I had a similar problem where changing the content of an iframe pushed state to history. Not adding content the first time around, just when I changed it.
<iframe :key="activeMedia.id" :src="getYoutubeLink(activeMedia.id)" scrolling="no" frameBorder="0" />
Adding a key forced the element to unmount and mount again and the problem was gone.

Electron ApplicationMenu only works for last window when you have multiple windows

I'm tying to have Multiple windows in my Electron app and each window should have its own applicationMenu. But when I open a new window, the functionalities in application menu such as reload and openDevTools only works for last window that just opened.
Why this is happening?
Code example:
app.on('ready',() => {
createWindow();
});
ipcMain.on('open-new-window',() => {
createWindow();
});
function createWindow() {
const window = new BrowserWindow({
width:900,
height:700,
webPreferences: {
nodeIntegration: true
}
});
window.loadUrl('index.html');
const menu = Menu.buildFromTemplate([{
label: "dev",
submenu: [{
label: "Refresh HTML",
click: () => {
window.reload();
}
}]
}]);
Menu.setApplicationMenu(menu);
}
When i open a new window from ipcMain, the reload() function only works in last opened window. Whether i click "Refresh HTML" in the first window or the second.
You have only one piece of application menu, which (from docs)
will be set as each window's top menu
So, when you overwrite it, this is the expected behavior. Let's say
You create window #1. window variable will refer to #1, thus your application menu will reload that.
You create window #2. window refer to #2 and you overwrite application menu to reload #2 upon click
Clicking on #1's menu will reload #2 anyway
To resolve this, you can reload the current window with BrowserWindow.getFocusedWindow(), this way your MenuItem's function won't depend on the reference of window.
Try
click: () => {
BrowserWindow.getFocusedWindow().reload();
}

Electron opening every link in browser instead of electron itself

I wanted to open an external link not in electron but in the browser. Therefore I implemented this code:
document.addEventListener('click', function(event) {
if (event.target.tagName === 'A' && event.target.href.startsWith('http')) {
event.preventDefault();
shell.openExternal(event.target.href);
}
});
My problem is now that every link that I create, opens in the browser.
e.g.
foo <-wanted behaviour to open in browser
bar <- not wanted behaviour to open in browser
How can I get it to just open the external link in the browser?
is actually href="http://localhost:X000/#"
so the if condition is always true.
Replace your code with this and it should work:
const { app, shell, BrowserWindow } = require("electron");
// Create the browser window.
mainWindow = new BrowserWindow({
width: 1300,
height: 800,
});
// Load your React app or any other HTML which creates your Electron app content
mainWindow.loadFile("./build/index.html");
mainWindow.webContents.on("new-window", function(event, url) {
event.preventDefault();
// This will open a new Electron window to load the url.
shell.openExternal(url);
});

How to create app with electron like steam-overlay

I want to create electron application that will be game helper and it will show some cheats top on the any game while user plays. You can imagine like "Steam" application overlay in the game. I tried to open my application to the top and also try to show native dialogs & alerts to get app to top but os always hide game app (minimized) before show my app. My question is; is it possible to run or should i stop to try?
I added example code that i tried below.
import { app, BrowserWindow, globalShortcut, shell, dialog } from 'electron';
import Positioner from 'electron-positioner';
app.on('ready', function () {
mainWindow = new BrowserWindow({
x: mainWindowState.x,
y: mainWindowState.y,
width: mainWindowState.width,
height: mainWindowState.height,
alwaysOnTop: true
});
//...some codes
var ret = globalShortcut.register('shift+ctrl+x', function() {
console.log('shift+ctrl+x is pressed');
shell.beep();
positioner.move('bottomRight');
mainWindow.show();
});
});
It should be working, depend on the game engine and os, i tried the code here on osx and it work as expected.
But want do you mean with "but os always hide game app (minimized) before show my app"
At all you start the app and then the game, and the app should overlay the game

Export button on highcharts to open new tab

I have a rendered chart on a page and I am overwriting the high charts export link to a custom link to be used with a Zend view.
I am new to javascript and I'm not sure how to export to the new tab:
data.chartOptions.exporting.buttons.printButton = {
onclick : function() {
var win=window.open('','','location=0,titlebar=0,status=0,width=780,height=350');
win.focus();
this.exportChart({
url: ***.zendLink({
param1:***,
param2:***,
controller:"spm",
id:data.id,
action:"view",
format:"print"
})
});
}
}
This does not seem to work, The window is opened and the link is followed on the first window, eg not in the new window. How do I do this?
Do I need to load the javascript into the new window?
If you would like any more information please ask. I'm not sure how much of the code you require.
Thanks
You are doing those as two different things.
1) Opening an window.
2) Calling exportChart.
You should open a some page in you site and render the chart there. So should load export chart source also for that.
You can open a window in new tab like this
window.open('http://www.google.com', '_blank', 'toolbar=0,location=0,menubar=0');
But, it opens an URL in a new tab.
You should have a chart script in that page, and on load of that page you should call this method
this.exportChart

Categories