I've been playing with WinJS a bit lately, specifically the React-WinJS and wanted the native WinJS Navigation to play a little nicer with a web browser. The original/default environment for WinJS app is within a WinRT/Metro application where there is no "url/address" bar to be seen.
My uneducated guess is that the WinJS team decided not to worry about how
WinJS.Navigationwould integrate with a normal browser's history as there doesn't appear to be native integration or documentation about how to do it so far.
I asked the team if they had plans to work on any integration options, but only asked that last night so don't expect to hear back from over the weekend.
UPDATE: I got tired of updating this blog post with my bug fixes/iterations of the idea - so I've moved it over to GitHub: github.com/staxmanade/WinJSBrowserHistory.
So I spent a moment and prototyped one possible solution which works for this simple test using the browser's history api since I'm not looking to support browsers older than IE 10.
Ideally we could leverage WinJS controls without worrying about how to "integrate" the WinJS.Navigation with anything, but sadly some of the WinJS controls take a dependency on WinJS.Navigation (like the BackButton) so finding a way to play nice with this can be challenging.
If you want to get this prototype running yourself, you can:
- save both files below to a folder
- start up a simple web server. (I like to use nws)
This prototype is 2 files:
index.html<-- basic JSPM bootstrapping and configurationapp.jsx<-- my whole navigation app in here...
index.html
Couple mentions on this bootstrapping code:
- I set the background style to black (since in
app.jsxI'm using the WinJS dark css) - this avoids a flash from white to black when the page loads - This is using SystemJS which makes it really easy to prototype and bootstrap dependencies like WinJS and React. Please don't deploy something like this to production - follow proper JSPM production workflow procedures...
- The
mapsection in theSystem.configdefines a pointer to a fork ofreact-winjsI have that supportsReact 0.14(so if you find this in the future and need it, try to use the nativereact-winjsif they've merged in my pull request instead.)
<!DOCTYPE html>
<html>
<head>
<style media="screen"> body{ background-color: black; } </style>
<script src="https://jspm.io/[email protected]"></script>
<script type="text/javascript">
System.config({
transpiler: 'babel',
packages: {
'./': {
defaultExtension: false
}
},
map: {
'react': 'npm:[email protected]',
'react-winjs': 'github:staxmanade/[email protected]',
}
});
System.import('./app.jsx');
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>
app.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import WinJS from 'npm:winjs';
import 'npm:winjs/css/ui-dark.css!';
import { BackButton } from 'react-winjs';
class WinJSBrowserHistory {
isNavigationBeingHandled;
isWinJSNavigationBackBeingHandled;
isNavigationTriggeredByPopStateEvent;
constructor(onApplyNavigaitonChange) {
if(typeof onApplyNavigaitonChange !== "function") {
throw new Error("Expecting first argumet to be a function that can take 2 parametes (location, state) => {}");
}
this.onApplyNavigaitonChange = onApplyNavigaitonChange;
WinJS.Navigation.addEventListener("beforenavigate", this.handleBeforeNavigate.bind(this));
WinJS.Navigation.addEventListener("navigating", this.handleNavigating.bind(this));
WinJS.Navigation.addEventListener("navigated", this.handleNavigated.bind(this));
window.addEventListener('popstate', (eventObject) => {
console.log('popstate', this.isNavigationBeingHandled, eventObject);
if(!this.isNavigationBeingHandled && !this.isWinJSNavigationBackBeingHandled) {
this.handlePopState(eventObject);
}
this.isWinJSNavigationBackBeingHandled = false;
})
}
cleanup() {
WinJS.Navigation.removeEventListener("navigated", this.handleNavigated);
}
handlePopState(eventObject) {
console.log("handlePopState", eventObject, location.hash);
this.isNavigationTriggeredByPopStateEvent = true;
WinJS.Navigation.navigate(location.hash, location.state);
}
handleBeforeNavigate(eventObject) {
this.isNavigationBeingHandled = true;
console.log("handleBeforeNavigate:", eventObject);
}
handleNavigating(eventObject) {
console.log("handleNavigating:", eventObject);
console.log("handleNavigating delta:", eventObject.detail.delta);
var location = eventObject.detail.location;
var state = eventObject.detail.state;
var delta = eventObject.detail.delta;
this.onApplyNavigaitonChange(location, state);
if(delta < 0) {
this.isWinJSNavigationBackBeingHandled = true;
window.history.go(delta);
} else {
//router.setRoute(location);
window.history.pushState(state, "", "#" + location);
}
}
handleNavigated(eventObject) {
this.isNavigationBeingHandled = false;
this.isNavigationTriggeredByPopStateEvent = false;
console.log("handleNavigated", eventObject);
}
}
export default class App extends React.Component {
constructor(props) {
super(props);
this.winJSBrowserHistory = new WinJSBrowserHistory(this.onApplyNavigaitonChange.bind(this));
this.state = {
nav: {
state: WinJS.Navigation.state,
location: WinJS.Navigation.location
}
}
}
componentWillMount () {
console.log("componentWillMount");
WinJS.Navigation.navigate(this.state.nav.location, this.state.nav.state);
}
componentWillUnmount () {
console.log("componentWillUnmount");
}
onApplyNavigaitonChange(location, state) {
this.setState({
nav: {
location: location,
state: state
}
});
}
gotoPage1Nested() {
WinJS.Navigation.navigate("/page1/nested");
}
gotoPage1() {
WinJS.Navigation.navigate("/page1");
}
render() {
console.log("render() location:", this.state.nav.location);
var componentWithBackButton = component => {
return (
<div>
<BackButton />
<div>
{component}
</div>
</div>
);
};
var page;
switch(this.state.nav.location) {
case "/page1":
page = componentWithBackButton(<div>page 1<br/> <button type="button" onClick={this.gotoPage1Nested.bind(this)}>Goto Page 1 Nested</button></div>);
break;
case "/page1/nested":
page = componentWithBackButton(<div>page 1 nested</div>);
break;
case "/page2":
page = componentWithBackButton(<div>page 1</div>);
break;
default:
page = (
<div>
<button type="button" onClick={this.gotoPage1.bind(this)}>Goto Page 1</button>
</div>
);
}
return page;
}
}
ReactDOM.render(<App />, document.getElementById('main'));
Next I'd like to see if I could leverage something like flatiron/director for routing and get it to play nice with WinJS.Navigation and if I do, I'll post it as well...
Hope this helps.
