flux-router-component - npm Package Compare versions

Comparing version 0.5.17 to 0.5.18

lib/NavLink.js

@@ -100,7 +100,16 @@ /**
         e.stopPropagation();
-        context.executeAction(navigateAction, {
-            type: 'click',
-            url: href,
-            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: 'click',
+                url: href,
+                params: this.props.navParams
+            });
+        }
     },
@@ -107,0 +116,0 @@ render: function() {

lib/RouterMixin.js

@@ -85,7 +85,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)});
+                    }
                 }
@@ -92,0 +118,0 @@ }

package.json

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

README.md

@@ -168,3 +168,19 @@ # 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
@@ -171,0 +187,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

81327

increased by92%

Number of package files

27

increased by58.82%

Lines of code

636

increased by4.78%

Number of lines in readme file

213

increased by8.12%

No dependency changes