flux-router-component - npm Package Compare versions

Comparing version 0.6.2 to 0.6.3

lib/NavLink.js

@@ -103,8 +103,17 @@ /**
         e.stopPropagation();
-        context.executeAction(navigateAction, {
-            type: navType,
-            url: href,
-            preserveScrollPosition: this.props.preserveScrollPosition,
-            params: this.props.navParams
-        });
+
+        var onBeforeUnloadText = typeof window.onbeforeunload === 'function' ? window.onbeforeunload() : '';
+        var confirmResult = onBeforeUnloadText ? window.confirm(onBeforeUnloadText) : true;
+
+        if (confirmResult) {
+            // Removes the window.onbeforeunload method so that the next page will not be affected
+            window.onbeforeunload = null;
+
+            context.executeAction(navigateAction, {
+                type: navType,
+                url: href,
+                preserveScrollPosition: this.props.preserveScrollPosition,
+                params: this.props.navParams
+            });
+        }
     },
@@ -111,0 +120,0 @@ render: function() {

lib/RouterMixin.js

@@ -86,7 +86,33 @@ /**
         self._historyListener = function (e) {
+            debug('history listener invoked', e, url, self.state.route.url);
+
             if (context) {
+                var state = self.state || {};
                 var url = self._history.getUrl();
-                debug('history listener invoked', e, url, self.state.route.url);
-                if (url !== self.state.route.url) {
-                    context.executeAction(navigateAction, {type: TYPE_POPSTATE, url: url, params: (e.state && e.state.params)});
+                var currentUrl = state.route.url;
+                var route = state.route || {};
+                var onBeforeUnloadText = typeof window.onbeforeunload === 'function' ? window.onbeforeunload() : '';
+                var confirmResult = onBeforeUnloadText ? window.confirm(onBeforeUnloadText) : true;
+                var nav = route.navigate || {};
+                var navParams = nav.params || {};
+                var enableScroll = self._enableScroll && nav.preserveScrollPosition;
+                var historyState = {
+                    params: (nav.params || {}),
+                    scroll: {
+                        x: (enableScroll ? window.scrollX : 0),
+                        y: (enableScroll ? window.scrollY : 0)
+                    }
+                };
+                var pageTitle = navParams.pageTitle || null;
+
+                if (!confirmResult) {
+                    // Pushes the previous history state back on top to set the correct url
+                    self._history.pushState(historyState, pageTitle, currentUrl);
+                } else {
+                    if (url !== currentUrl) {
+                        // Removes the window.onbeforeunload method so that the next page will not be affected
+                        window.onbeforeunload = null;
+
+                        context.executeAction(navigateAction, {type: TYPE_POPSTATE, url: url, params: (e.state && e.state.params)});
+                    }
                 }
@@ -93,0 +119,0 @@ }

package.json

 {
   "name": "flux-router-component",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "Router-related React component and mixin for applications with Fluxible architecture",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # flux-router-component
 
+***Notice: This package will be deprecated in favor of [`fluxible-router`](https://github.com/yahoo/fluxible-router).***
+
 [![npm version](https://badge.fury.io/js/flux-router-component.svg)](http://badge.fury.io/js/flux-router-component)
@@ -172,3 +174,19 @@ [![Build Status](https://travis-ci.org/yahoo/flux-router-component.svg?branch=master)](https://travis-ci.org/yahoo/flux-router-component)
 
+## onbeforeunload Support
 
+The `History` API does not allow `popstate` events to be cancelled, which results in `window.onbeforeunload()` methods not being triggered.  This is problematic for users, since application state could be lost when they navigate to a certain page without knowing the consequences.
+
+Our solution is to check for a `window.onbeforeunload()` method, prompt the user with `window.confirm()`, and then navigate to the correct route based on the confirmation.  If a route is cancelled by the user, we reset the page URL back to the original URL by using  the `History` `pushState()` method.
+
+To implement the `window.onbeforeunload()` method, you need to set it within the components that need user verification before leaving a page.  Here is an example:
+
+```javascript
+componentDidMount: function() {
+  window.onbeforeunload = function () {
+    return 'Make sure to save your changes before leaving this page!';
+  }
+}
+```
+
+
 ## Polyfills
@@ -175,0 +193,0 @@ `addEventListener` and `removeEventListener` polyfills are provided by:

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

49132

increased by6.01%

Lines of code

650

increased by4.67%

Number of lines in readme file

219

increased by8.96%

No dependency changes