I have a vue component for video upload, where I am warning a user when he tries to navigate away during the video upload that he will lose the file if he does so, like this:
ready() {
window.onbeforeunload = () => {
if (this.uploading && !this.uploadingComplete && !this.failed) {
this.confirm('Are you sure you want to navigate away? Your video won't be uploaded if you do so!');
}
}
}
I am using sweetalert to alert the user about it. But how can I then make it stay on the same page, and prevent the navigation away before he confirms that he wants to navigate away?
This is the whole component:
<script>
function initialState (){
return {
uid: null,
uploading: false,
uploadingComplete: false,
failed: false,
title: null,
link: null,
description: null,
visibility: 'private',
saveStatus: null,
fileProgress: 0
}
}
export default {
data: function (){
return initialState();
},
methods: {
fileInputChange() {
this.uploading = true;
this.failed = false;
this.file = document.getElementById('video').files[0];
this.store().then(() => {
var form = new FormData();
form.append('video', this.file);
form.append('uid', this.uid);
this.$http.post('/upload', form, {
progress: (e) => {
if (e.lengthComputable) {
this.updateProgress(e)
}
}
}).then(() => {
this.uploadingComplete = true
}, () => {
this.failed = true
});
}, () => {
this.failed = true
})
},
store() {
return this.$http.post('/videos', {
title: this.title,
description: this.description,
visibility: this.visibility,
extension: this.file.name.split('.').pop()
}).then((response) => {
this.uid = response.json().data.uid;
});
},
update() {
this.saveStatus = 'Saving changes.';
return this.$http.put('/videos/' + this.uid, {
link: this.link,
title: this.title,
description: this.description,
visibility: this.visibility
}).then((response) => {
this.saveStatus = 'Changes saved.';
setTimeout(() => {
this.saveStatus = null
}, 3000)
}, () => {
this.saveStatus = 'Failed to save changes.';
});
},
updateProgress(e) {
e.percent = (e.loaded / e.total) * 100;
this.fileProgress = e.percent;
},
confirm(message) {
swal({
title: message,
text: null,
type: "warning",
showCancelButton: true,
cancelButtonText: "Cancel",
cancelButtonColor: '#FFF',
confirmButtonColor: "#2E112D",
confirmButtonText: "Yes, delete"
}).then(function(){
this.$data = initialState();
}.bind(this), function(dismiss) {
// dismiss can be 'overlay', 'cancel', 'close', 'esc', 'timer'
if (dismiss === 'cancel') { // you might also handle 'close' or 'timer' if you used those
// ignore
} else {
throw dismiss;
}
})
}
},
ready() {
window.onbeforeunload = () => {
if (this.uploading && !this.uploadingComplete && !this.failed) {
this.confirm('Are you sure you want to navigate away? Your video won't be uploaded if you do so!');
}
}
}
}
</script>
Mozilla documentation suggests
window.onbeforeunload = function(e) {
var dialogText = 'Dialog text here';
e.returnValue = dialogText;
return dialogText;
};
and also states that:
Since 25 May 2011, the HTML5 specification states that calls to window.alert(), window.confirm(), and window.prompt() methods may be ignored during this event. See the HTML5 specification for more details.
Source contains many other details regarding reasons and what to expect from modern browsers.
This question seems to be a duplicate of yours.
This answer suggests that to avoid weird browser behaviour you should set handler only when it's to prevent something (that is while navigating away should trigger a confirmation dialog)
But how can I then make it stay on the same page, and prevent the navigation away before he confirms that he wants to navigate away?
Add return false; to stop the event.
if (this.uploading && !this.uploadingComplete && !this.failed) {
this.confirm("Are you sure you want to navigate away? Your video won't be uploaded if you do so!");
return false; // <==== add this
}
return false; does 3 separate things when you call it :
event.preventDefault(); – It stops the browsers default behaviour.
event.stopPropagation(); – It prevents the event from propagating (or “bubbling up”) the DOM.
Stops callback execution and returns immediately when called.
Related
I am writing a chrome extension that makes requests to an API and I have noticed that after I create a notification from background script using chrome's notification API, the listeners on the buttons from the notification are executed multiple times. on the first run only once and then increasing. I figured that the listeners just add up on the page but I couldn't find a way to sort of refresh the background page.
This is the function that creates the notification and it's listeners.
var myNotificationID
const displayNotification=(userEmail, password, website,username) =>{
chrome.notifications.create("", {
type: "basic",
iconUrl: "./icon128.png",
title: "PERMISSION",
requireInteraction: true,
message: "question",
buttons: [{
title: "YES",
}, {
title: "NO",
}]
}, function(id) {
myNotificationID = id;
})
chrome.notifications.onButtonClicked.addListener(function(notifId, btnIdx) {
if (notifId === myNotificationID) {
if (btnIdx === 0) {
console.log('inserting')
try{
fetch (`http://localhost:8080/users/${userEmail}/accounts`,{
})
}catch(err){
}
} else if (btnIdx === 1) {
console.log('clearing')
chrome.notifications.clear(myNotificationID)
}
}
});
}
And this is where the function is called
chrome.runtime.onMessage.addListener((message, sender, response)=>{
if(message.message === 'showNotification'){
console.log('received insert')
displayNotification(message.userEmail,message.password, message.currentSite,message.username)
response({status:"received"})
}
})
the fetch within the listener is executed multiple times but the log from the onMessage listener is only displayed once, so the listener is the problem here.
I tried chrome.notifications.onButtonClicked.removeListener(), but as i mentioned there was no success.
Are there any other ways in which i could clean the listeners from the background script once they are used?
Using a notification store:
const notificationsByID = {};
chrome.notifications.onButtonClicked.addListener((notifId, btnIdx) => {
// Avoid access to the notification if not registered by displayNotification
if (!notificationsByID[ notifId ]) { return null; }
if (btnIdx === 0) {
console.log('inserting')
try{
fetch (`http://localhost:8080/users/${ notificationsByID[ notifId ].userEmail }/accounts`,{ /**/ });
}catch(err){
console.log(err);
}
delete notificationsByID[ notifId ]; // Cleanup
} else if (btnIdx === 1) {
console.log('clearing')
chrome.notifications.clear(myNotificationID);
delete notificationsByID[ notifId ]; // Cleanup
}
});
chrome.notifications.onClosed.addListener((notifId) => {
if (notificationsByID[ notifId ]) { delete notificationsByID[ notifId ]; }
});
const displayNotification=(userEmail, password, website,username) =>{
chrome.notifications.create("", {
type: "basic",
iconUrl: "./icon128.png",
title: "PERMISSION",
requireInteraction: true,
message: "question",
buttons: [{ title: "YES", }, { title: "NO", }]
}, function(id) {
// Insertion
notificationsByID[ id ] = { userEmail, password, website,username };
})
}
I am sending a notification web. I want to display up to ten minutes if the user does not click on the notification.
I used setTimeout, but it is displayed for about 15 seconds and then hidden.
please guide me.
This is my code:
function notify(title, message, link) {
var option = {
body: message,
dir: 'rtl',
title: title,
icon: '/Images/notification.png',
}
var notify = new Notification(title, option);
notify.onclick = function () {
window.open(link, '_blank');
notify.close();
};
notification.onshow = function () {
setTimeout(notification.close, 600000);
}
}
i have update your code. May this helps you !
var options = {
body: "My notification message",
dir : "ltr",
requireInteraction: true
};
var notify = new Notification('Hello User', options);
notify.onclick = function () {
notify.close();
};
notify.onshow = function () {
setTimeout(()=>{
notify.close();
}, 15000);
}
Just add the property requireInteraction.
var option = {
body: message,
dir: 'rtl',
title: title,
icon: '/Images/notification.png',
requireInteraction: true,
}
The requireInteraction read-only property of the Notification
interface returns a Boolean indicating that a notification should
remain active until the user clicks or dismisses it, rather than
closing automatically.
See here: https://developer.mozilla.org/en-US/docs/Web/API/notification/requireInteraction
I want to show a popUp in ionic, which does not allow the user to exit when he hasn't entered some input. Right now I'm using this here:
public showOwnIdentifierPrompt() {
// Prompt popup code
var promptPopup = this.$ionicPopup.prompt({
title: this.floor_name,
template: `<input ng-model="$ctrl.customFloorName"></input>`,
scope: this.$scope,
buttons: [
{
text: this.cancel,
type: 'button-clear button-balanced',
onTap: function(e) {
// Cancel creation
return false;
}
},
{
text: this.save,
type: 'button-clear button-balanced',
onTap: () => {
// Create new floor
return true;
}
}
]
});
promptPopup.then((res) => {
if (res) {
this.addNewFloor(this.customFloorName);
}
})
}
In the save onTap() event handler, I would like to access this.customFloorName from my class, to decide whether the user entered input. But it is always undefined. What can I do?
You can get value on Save with below code :
var value = this.scope.$ctrl.customFloorName;
I am new to angularjs I have to show confirmation dialog on browser back,I am trying to do so but not able to achieve the required functionality.
Here is my code:
var previousUrl,backPress = false;
$rootScope.$on('$locationChangeStart', function( event, newUrl, oldUrl ) {
if (previousUrl && previousUrl === newUrl) {
BootstrapDialog.show({
title: "title",
message: "message",
closable: true,
buttons: [{
label: "ok",
action: function (dialogRef) {
backPress=true;
event.preventDefault();
dialogRef.close();
}
}, {
label: "cancel",
action: function (dialogRef) {
backPress=false;
dialogRef.close();
}
}]
});
console.log("backPress"+backPress);
if (!backPress) {
console.log("backPress in condition"+backPress);
event.preventDefault();
}
} else {
previousUrl = oldUrl;
}
});
Kindly Suggest how to proceed next.
I am trying to display a dialog/confirm when a user browses away from a page/component.
I have the following dialog component which currently fires using a listener:
emptyBasket: function () {
basketChannel.publish({
channel: "basket",
topic: "emptyBasket",
data: {
}
});
},
OnClick which fires publish:
onTabLinkClick: function(e) {
var url = window.location.href;
var currentRoute = url.substr(url.length - 6)
if(this.state.BasketTotal > 0 && currentRoute != 'basket' ){
basketChannel.publish({
channel: "basket",
topic: "openDialog",
data: {
dialogTitle: 'Warning',
dialogContent: 'You have contacts in your basket, are you sure you want to leave?'
}
});
}
}
The listener in my dialog component then changes the state and displays the dialog:
_listenerForDialog: function(data) {
this.setState({
title: data.dialogTitle,
content: data.dialogContent,
visible:true
});
},
This works, but I would like to add an ok and cancel button, if the cancel button is clicked I would like stop the event.
How could I attach my component to e.preventDefault()?
Can I make this work like the native browser confirm()?
var confirmDialog = confirm("You have contacts in your basket, are you sure you want to leave?");
if(confirmDialog == false ){
e.preventDefault();
} else{
this.emptyBasket();
}
I am using the npm package https://www.npmjs.com/package/rc-dialog
UPDATED
onClose in current component:
onClose(){
this.setState({
visible:false
});
basketChannel.publish({
channel: "basket",
topic: "emptyBasket",
data: {
}
});
},
Thanks in advance