erikringsmuth / app-router

Router for Web Components
https://erikringsmuth.github.io/app-router/
MIT License
610 stars 83 forks source link

Attribute request: only rewrite the hash #72

Closed adamschnaare closed 9 years ago

adamschnaare commented 9 years ago

I have found a use case where I need the whole url to stay in tact, and simply look at and rewrite the hash of the url only, not the entire location path. For instance:

Consider: http://some/sub/dir/index.html:

<app-router core-animated-pages>
  <app-route path="#home" element="my-custom-element"></app-route>
</app-router>

It'd be sweet if on route change and the url location to be: http://some/sub/dir/index.html#home".

My use case stems from wanting to use app-router on hybrid apps that support browsers and can be exported using cordova. This relates to: Issue #59, but that solution doesn't support using the same app in both Cordova and Web (at least as I see it). I thought I could jump into the script and figure it out myself, but after digging, I have concluded that it would be best to ask first.

erikringsmuth commented 9 years ago

Ah, I didn't think about that in the router.go(path) code.

The path here needs to take into account the existing path since it should only change the hash. https://github.com/erikringsmuth/app-router/blob/master/src/app-router.js#L114

It should probably look like this.

var anchor = document.createElement('a');
anchor.href = location;
path = anchor.pathname + '#' + path;

You can test it out and submit a PR if you want. Otherwise I'll get to this around the weekend.

adamschnaare commented 9 years ago

I might be missing something. I have been testing it, and it seems to keep duplicating the path. I think what I'm really thinking about is something like:

if (this.autoHash) {
  window.location.hash = this.route;
}

where it would just change the hash value with the route, and that's it.

erikringsmuth commented 9 years ago

Oh wait, I think I misunderstood the first problem. I don't think there's an issue in router.go(path) anymore.

FYI, this route will match http://some/sub/dir/index.html#/home.

<app-router>
  <app-route path="/home" element="my-custom-element"></app-route>
</app-router>

They key is using the leading / in the URL and path.

I forget if this works but you could try mode="hash" on the router.

<app-router mode="hash">
  <app-route path="home" element="my-custom-element"></app-route>
</app-router>

Then this URL might work http://some/sub/dir/index.html#home.

adamschnaare commented 9 years ago

I literally just realized the same thing about 5 minutes ago. Thanks for following up. I don't think there is a bug in the code, nope. I was just not using the hash mode correctly.

Thanks!

On Wed, Feb 4, 2015 at 4:14 PM, Erik Ringsmuth notifications@github.com wrote:

Oh wait, I think I misunderstood the first problem. I don't think there's an issue in router.go(path) anymore.

FYI, this route will match http://some/sub/dir/index.html#/home.

They key is using the leading / in the URL and path.

I forget if this works but you could try mode="hash" on the router.

Then this URL might work http://some/sub/dir/index.html#home.

— Reply to this email directly or view it on GitHub https://github.com/erikringsmuth/app-router/issues/72#issuecomment-72951433 .

Sincerely,

*Adam Schnaare*
UX Designer/Engineer
Worship Director
715.615.2832
erikringsmuth commented 9 years ago

Awesome! Glad to help!