I am currently using window.onbeforeunload function on my vue to detect browser's closing or reloading tab to show a like below.
mounted: function () {
window.addEventListener('beforeunload', this.confirmSave)
},
methods: {
confirmSave(event) {
if (this.onChangeMode) {
event.returnValue = 'You have some unsaved changes'
return 'You have some unsaved changes'
}
},
},
It's working perfectly on PC Chrome but not working on iPad (both Safari and Chrome). My iPad version is 14.0.1.
I also tried something else like pagehide but not working either.
Related
I'm developing authentication with firebase for a add-in for MS Powerpoint. In order to add authentication with Google I created a button which opens a dialog box:
`function openGoogleAuthDialog() {
Office.context.ui.displayDialogAsync(hostURLofDialogComponent,
{ width: 50, height: 50 }, (result) => {
if (result.status === Office.AsyncResultStatus.Succeeded) {
dialog = result.value;
dialog.addEventHandler(Office.EventType.DialogMessageReceived, processMessage);
} else {
console.log("Unable to open dialog box");
}
});
}`
The dialog opens successfully. Within the Dialog component i have another button that should redirect to google as well as a useEffect that is supposed to send back the result of the authentication to the parent.
`export function AuthDialog() {
const authFirebase = getAuth(firebaseApp);
const handleAuth = () => {
const provider = new GoogleAuthProvider();
signInWithRedirect(authFirebase, provider);
};
useEffect(() => {
getRedirectResult(authFirebase).then((result) => {
Office.context.ui.messageParent(JSON.stringify(result));
});
}, []);
return <button onClick={handleAuth}>Authenticate With Google</button>;
}`
The problem is, that if I click on the button it will leave the page and it seems like it's gonna redirect but then stops and comes back to the dialog component without showing me the google sign-in interface.
I tried this functionality within google chrome and brave browser and it shows the Google Sign-In Interface as expected. As MS Office Plugins are using Safari under the hood, and the functionality was behaving in the same faulty way in the Safari browser, I can imagine it's a problem with Safari. Has anyone experienced a similar issue? Your help would be much appreciated!
I'm trying to create a Windows applications using Electron and Vue. I want to send the application to the Tray and show an icon to maximize it again when clicked. It works fine in DEV but when I build the app, the Tray icon is not working.
The app it's executing, but when minimized the tray is not showing and there is not option to open it again (need to kill the process).
This is the code I'm trying to use:
app.on("ready", async () => {
if (isDevelopment && !process.env.IS_TEST) {
try {
await installExtension(VUEJS_DEVTOOLS);
} catch (e) {
console.error("Vue Devtools failed to install:", e.toString());
}
}
createWindow();
createTray()
});
const createTray = () => {
const tray = new Tray(resolve(process.resourcesPath, '\\resources\\homeico.ico'))
const contextMenu = Menu.buildFromTemplate([
{
label: 'Show App', click: function () {
app.show()
}
},
{
label: 'Quit', click: function () {
app.isQuiting = true
app.quit()
}
}
])
tray.setToolTip('This is my application.')
tray.setContextMenu(contextMenu)
tray.on('click', () => {
console.log('clicked')
})
}
And in my vue.config.js:
pluginOptions: {
electronBuilder: {
nodeIntegration: true,
builderOptions: {
"extraResources": [
{
"from": "extraResources",
"to": "resources",
"filter": [
"**/*"
]
}
]
}
},
},
The resolve(process.resourcesPath, '\resources\homeico.ico') line is pointing to a existing file, I'm printing this route in the App and I can open it in my Windows Explorer, but when I want to show the Image in the app, I can see next error in the DevTools:
Not allowed to load local resource: file:///C:/Users/mysUser/AppData/Local/Programs/business-config-tool/resources/resources/homeico.ico
The path is accesible, but not in the App.
What's the correct way to configure the path to the icon? there is another path I can configure for assets? I also tried with __dirname and other icon formats (ico, png..)
Thank you.
I ran into the same issue. I searched for a solution for hours, and I finally found one.
This solution is made for app using electron-vue (I personally used this Vue Cli electron plugin). And I tested it on Windows only.
The Tray must be initialised with an icon Path, wich needs be different wether you are running a built version of your app (yarn electron:build), or serving your app (yarn electron:serve).
I am using a function that I called isServeMode, wich basically tells me if I am using the serve mode or the buid mode. Here is what the function looks like :
// utils.js file
const isServeMode = () => {
return process.env.WEBPACK_DEV_SERVER_URL
}
You don't need to create this function, but it might be usefull somewhere else in your app so I suggest you to put it in a file that you can import from anywhere in your app. In my case, I created a utils.js file where I write those functions.
Then, put your tray icon in the public folder, it can not work if you put the icon in the src/assets folder, since we have to access it from the Node environnement and not from Vue. In my case, I put my icon in public/tray/icon.png.
Finally, we can use the electron Tray with Electron vue like this
import { Tray } from "electron"
import path from "path"
import { isServeMode } from "./utils" // Path depends on where you wrote your function
// Some Electron code...
let tray
createTray = () => {
const iconPath = isServeMode()
? path.join(__dirname, "/bundled/tray/icon.png")
: path.join(__dirname, "/tray/icon.png")
tray = new Tray(iconPath)
}
I will soon release a new version of my Unlighter app, wich is an electron-vue app that will include a Tray example. Feel free to take a look at this "real world app example" if you're interested.
I have a Vue application that runs in a iframe of a document. When the user tries to close a iframe, I want to prompt for saving changes. The below code is in my Vue application. The problem is that my parent window starts reacting to these events. Any ideas how this can work only within the iframe?
mounted(){
window.addEventListener('beforeunload', (event) => {
if (this.isDirty() === false)
event.returnValue = `Changes may not be saved. Are you sure you want to leave?`;
});
},
beforeDestroy() {
window.removeEventListener('beforeunload')
},
This is started happening recently on my project, so I created a fresh project using vue cli 2.
I have not added any this else
In App.vue I have added 3 event listeners in mounted function.
window.addEventListener("keydown", () => {
console.log("Key down");
})
window.addEventListener('keyup', () => {
console.log("Key up");
})
window.addEventListener("keypress", () => {
console.log("Key press");
})
This above code prints all the events on Firefox and Safari, but not in chrome.
It also works in chrome incognito but not in normal mode.
Also this is only happening on mac machine.
Also this only occurs when I am using vue
If i create a standalone html file the code return all the 3 events.
Any debugging idea is also appreciated.
using
aurelia-cli - 0.30.1
sweetalert2 - 6.6.5
typescript - 2.3.3
latest browsers (FF, Chrome, IE, Opera)
ts code
public showHelp() {
swal('Test').then((out) => {
console.log(out);
}).catch((error) => console.log(error));
}
alert displays with no problems, but clicking on confirm button does not dismis the alert. alert also won't dismiss on outside click. pressing ESC or ENTER works fine.
no errors throw ...
any idea why this will not accept click?
I have put breakpoints on these
// Mouse interactions
var onButtonEvent = function onButtonEvent(event) {
// Closing modal by close button
getCloseButton().onclick = function () {
// Closing modal by overlay click
container.onclick = function (e) {
in swal source, but they never get hit...
also tried setting target to something else than body, with the same result.
I had the exact same issue and apparently this is what was giving me the problem:
.swal2-container:not(.swal2-in) {
pointer-events: none;
}
Just comment that line or change none to all (Although I don't know yet if it breaks anything else)
I'm using:
paper-dashboard (free angular2 version) - 1.0.0
angular.cli - 1.1.1
sweetalert2 - 6.6.6
typescript - 2.3.3
latest browsers (same)
I'm unable to reproduce what you're experiencing. Using sweetalert2 v6.6.6 (oh dear), the alert displays and hides properly on all scenarios you mention: the [OK] button, clicking outside the alert dialog and the keyboard modifiers.
I'm using the configuration below. You're probably already aware, but please do note that I'm explicitly including the css file in the aurelia.json and referencing it in the app.html view.
Here is the full app:
aurelia.json
{
"name": "sweetalert2",
"path": "../node_modules/sweetalert2/dist",
"main": "sweetalert2",
"resources": [
"sweetalert2.css"
]
}
app.ts
import swal from 'sweetalert2';
export class App {
attached() {
this.showHelp();
}
public showHelp() {
swal('Test').then((out) => {
console.log(out);
}).catch((error) => console.log(error));
}
}
app.html
<template>
<require from="sweetalert2/sweetalert2.css"></require>
</template>