anchor links

[ghost]

because everything is evaluated client side some things are different

in the data-binding-page.html page if i add an in page anchor it self evaluates incorrectly by the browser engine to : http://127.0.0.1:49399/pages/data-binding-page.html#anchor1
Here is the html in the page.

Anchor link

---

Anchor text

How to tell polymer to evaluate the path at runtime properly ???

[erikringsmuth]

I think this is related to HTML imports and the way they wrote the spec. Every relative path (src and href) is relative to the directory that the imported file is inside. This includes anchor tag hrefs that start with #.

These are example links from a page imported from /pages/data-binding-page.html.

<a href="/"></a> -> / non-relative paths work fine
<a href="/home"></a> -> /home non-relative paths work fine
<a href="#/home"></a> -> /pages/data-binding-page.html#/home * the weird looking one
<a href="/#/home"></a> -> /#/home making all hash paths off of the root / makes it work
<a href="other-page.html"></a> -> /pages/other-page.html (not a great example since this is probably a custom element)
<link rel="import" href="/elements/example-element.html"></a> -> /elements/example-element.html
<link rel="import" href="../elements/example-element.html"></a> -> /elements/example-element.html

I think <a href="/#/home"></a> -> /#/home is the format you need for hash paths.

Alternatively, if you can get your static content server to always return index.html, then you can use regular paths like /home.

I hope this helps get you in the right direction. I should probably write up some documentation with a good set of examples and put it on the gh-pages.

[ghost]

Look at this though:

All i did was extend the data binding page with 2 links.
The link inside the page fails
the link outside the page works

    <a href="#anchor1" target="_self">Anchor link to a bookmark anchor linked of name="anchor1" in this same page</a> NOT WORKING !!
    <br>
    <a href="/#/api" target="_self">Link to the outside page called API</a> WORKS !

  <div class="title">Data Binding Demo</div>

[ghost]

here are some simple tests showing something is wrong i think.

a href="#/anchor1" target="_self" resolves to:
http://127.0.0.1:49399/pages/data-binding-page.html#/anchor1

---

a href="#anchor1" target="_self" resolves to:
http://127.0.0.1:49399/pages/data-binding-page.html#anchor1

Which should load, but does not because of the other issue where it tries to load but gets a platform.js.
#11

Something is not right in terms of full page loading maybe

[erikringsmuth]

I think I see what's happening. This is going to be a tricky situation for all custom elements, not just this router.

It's actually linking the browser to directly load the custom element. For example, load http://127.0.0.1:49399/pages/data-binding-page.html, then view the source. The browser is loading a custom element, not a displayable HTML page.

I think this means hash anchors like <a href="#anchor1" target="_self"> are broken for custom elements in general because it will always direct the browser to a custom element which by itself doesn't display anything. I'm going to have to look into this more...

[ghost]

I thought something was fishy.

if you can work on that, i will work on the hugo integration.

Contact details:
+49 15 23 18 94 553 (germany)
skype: gedw99

On 1 August 2014 16:32, Erik Ringsmuth notifications@github.com wrote:

I think I see what's happening. This is going to be a tricky situation for
all custom elements, not just this router.

It's actually linking the browser to directly load the custom element. For
example, load http://127.0.0.1:49399/pages/data-binding-page.html, then
view the source. The browser is loading a custom element, not a displayable
HTML page.

I think this means hash anchors like
are broken for custom elements in general because it will always direct the
browser to a custom element which by itself doesn't display anything. I'm
going to have to look into this more...

—
Reply to this email directly or view it on GitHub
#10 (comment)
.

[ghost]

It would be great if you add more examples of all these corner cases to the
gh-pages.

Sub pages that load up everything.
Links to Anchors in the same page.
On 1 Aug 2014 15:47, "Erik Ringsmuth" notifications@github.com wrote:

I think this is related to HTML imports and the way they wrote the spec.
Every relative path (src and href) is relative to the directory that the
imported file is inside. This includes anchor tag hrefs that start with #.

These are example links from a page imported from
/pages/data-binding-page.html.

-> / non-relative paths work fine
-> /home non-relative paths work fine
-> /pages/data-binding-page.html#/home * the weird
looking one
-> /#/home making all hash paths off of the root /
makes it work
-> /pages/other-page.html (not a great
example since this is probably a custom element)

-> /elements/example-element.html -> /elements/example-element.html

I think -> /#/home is the format you need for hash
paths.

Alternatively, if you can get your static content server to always return
index.html, then you can use regular paths like /home.

I hope this helps get you in the right direction. I should probably write
up some documentation with a good set of examples and put it on the
gh-pages.

—
Reply to this email directly or view it on GitHub
#10 (comment)
.

[erikringsmuth]

Yeah, I'll work on a write-up this weekend. I should probably also make a small demo site that can be downloaded as a ZIP. I could make it simpler than the gh-pages site since I wouldn't have to worry about relative paths and that /app-route/ prefix.

[ghost]

Thanks. I will try it on monday
On 1 Aug 2014 19:39, "Erik Ringsmuth" notifications@github.com wrote:

Yeah, I'll work on a write-up this weekend. I should probably also make a
small demo site that can be downloaded as a ZIP. I could make it simpler
than the gh-pages site since I wouldn't have to worry about relative paths
and that /app-route/ prefix.

—
Reply to this email directly or view it on GitHub
#10 (comment)
.

[erikringsmuth]

I started a document here http://erikringsmuth.github.io/app-router/#/notes.

I also started an repo for app-router examples https://github.com/erikringsmuth/app-router-examples. I'm planning on adding multiple examples in here. The current one shows routing with hash paths /#/path but I want to add an example where the server always returns index.html so that the paths can all be regular paths like /path. This will also help me figure out if /path#exampleAnchor would work or if that's a problem with HTML Imports. Let me know if this help!

[erikringsmuth]

I added a second example with full page load routing. https://github.com/erikringsmuth/app-router-examples

There's definitely an issue, because a link like /path#exampleAnchor won't go to the anchor. I'm going to leave this issue open until I figure this out.

[erikringsmuth]

Found some more info, it looks like this might be a bug with Polymer of the platform polyfill.

https://groups.google.com/forum/#!topic/polymer-dev/JcBQZCPamcY

Polymer/polymer#651

http://erikringsmuth.github.io/app-router/#/notes

[ghost]

I would not be surprised !!

I had allot of polymer cross browser issues today.

Its kind of scary moving target still.

I ended up now
T using your component for now just to get the website done. Had no
choice.it uses polymer in a simple way.

Will start using core elements and more advanced polymer next time after
google get their polyfil shit together :)
On 4 Aug 2014 20:36, "Erik Ringsmuth" notifications@github.com wrote:

Found some more info, it looks like this might be a bug with Polymer of
the platform polyfill.

https://groups.google.com/forum/#!topic/polymer-dev/JcBQZCPamcY

Polymer/polymer#651 Polymer/polymer#651

http://erikringsmuth.github.io/app-router/#/notes

—
Reply to this email directly or view it on GitHub
#10 (comment)
.