Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added unload function execution capabilities #16

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

andreas-trad
Copy link

With the proposed addition the user can add an extra parameter when initializing routie so that an unload function is been executed when the user leaves a specific hash page.
The unload function is also been executed when the user leaves page or closes his browser (window.onbeforeunload event).
The way it operates is simple. Let's suppose the following example:
routie({
'apage/:id': function(id) {
/* handles the load part /
}
}, // here the classic routie operation ends and the new starts
{ // we define unload functions in exact the same way
'apage/:id': function(id) {
/
here we can write any code. This code will be executed when the user leaves the hash or actual page.
if the function returns a string then this string will be used for exit page confirmation either when the user goes to another hash or another physical page. If the function returns anything else but string (or nothing at all) no confirmation message will appear. Only the code will be executed */
}
} // the unload functions part ends. We don't have to declare functions for all of our hashes. Only for those for which we want an unload function to be executed.
); // routie ends

With the proposed addition the user can add an extra parameter when initializing routie so that an unload function is been executed when the user leaves a specific hash page.
The unload function is also been executed when the user leaves page or closes his browser (window.onbeforeunload event).
The way it operates is simple. Let's suppose the following example:
routie({
  'apage/:id': function(id) {	
      /* handles the load part */						
    }
  }, // here the classic routie operation ends and the new starts
  { // we define unload functions in exact the same way
    'apage/:id': function(id) {	
      /* here we can write any code. This code will be executed when the user leaves the hash or actual page.
     if the function returns a string then this string will be used for exit page confirmation either when the user goes to another hash or another physical page. If the function returns anything else but string (or nothing at all) no confirmation message will appear. Only the code will be executed */						
    }
  } // the unload functions part ends. We don't have to declare functions for all of our hashes. Only for those for which we want an unload function to be executed.
); // routie ends
@jgallen23
Copy link
Owner

What is the use case for this? Couldn't you just bind the unload function when the route is hit?

@andreas-trad
Copy link
Author

Currently I build an online courses website which is an one page application and I use routie. The site consists of 30 pages (30 routes). One of these routes is the final exams page.
By the time that the user enters that page and starts the test he can't leave without completing it. If he leaves this page then he fails to the exams. What I wanted to do is to inform the user and ask for confirmation if the user tries to leave this page.
In technical terms, there are 2 distinct ways of leaving the test page:

  1. By going to a different route (change the hash of the url), without leaving or reloading the app
  2. By reloading, closing or leaving the one-page-application page

For (1), I had to monitor the changes on the hash of the url in order to catch the route unload event. I thought..., isn't that exactly what routie does? Wouldn't it be very helpful if routie provided a way to run code on before unloading a route?
By this way not only I can illustrate a confirmation dialog on the test's route unload but also I can send back to the server the exact time that the user left the final test route (which is important for my app).

For (2), yes I could just bind a window.onbeforeunload event when the route is hit. Though I would also have to unbind it 29 times in 29 different lines of my code in all of the other routes of my app!

So, I ended up with this suggestion: The support of an unload function for any of the routes. In my specific case I added just one unload function which:

  • runs an asynchronous ajax call in order to log the exact time that the user left the test page
  • displays a confirmation dialog with a custom text which informs user and asks for confirmation before leaving the page. This confirmation runs either when the user presses the back button, goes to another route (hash change), leaves the application, reloads the page or tries to close the tab.

I hope I made myself clear enough.
I can provide a demonstration page if you would like.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants