How should mock-url handle pathname?

[indifferentghost]

It was discussed in the morning standup on 10/26 to add pathname to mock-url or create a mock-url like example to work with can-route-pathname.

The purpose of mock-url is to provide an interactive navigation bar for CanJS demos.

This issue hopes to elucidate how mock-url should be implemented to handle can-route-pushstate:

Here's a demo of mock-url that shows basic navigation.

Proposal

• [x] remove refresh button / use alternative
  • codepen removes location.refresh
  • possible polyfill window.location.href = window.location.href;
• [x] render either location.hash or location.path (currently renders both).
• [x] Remove "URL:".
• [ ] instead of calling replaceState when entering text, add a temporary link and click it.

  var a = document.createElement("a");
  a.href ="/foo/bar";
  a.display = "none";
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);

Current Implementation mock-url@5.1.0

• [x] entering pushstate:raw="true" into the mock-url html element enables the ability to use pushstate.
• [x] redefine location.pushState, location.replaceState to resolve new values into a bound input in addition to their current behaviors.
• [x] entering text into path input calls replaceState with, and resolves, the text.

[indifferentghost]

5.1.0-beta doesn't handle RoutePushstate.replaceState methods.

[indifferentghost]

var a = document.createElement("a");
a.href ="/foo/bar";
a.display = "none";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

If pushstate isn't active, it won't capture the link which causes codepen to navigate to another page. The same is true if pushstate has a root property and you try and navigate to something that wouldn't be nested in that root. demo

The aforementioned input navigation was suggested as calling pushState or replaceState (which is how the current input handler [below] works) might not fire everything that CanJS needs to fire.

prop.listenTo(prop.lastSet, function(newVal){
  var newURL = newVal.replace("/", "");    
  window.history.replaceState( null, null, newURL );
});