Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

<quick-link> navigate a page without refresh #12

Open
DrSensor opened this issue Sep 9, 2022 · 4 comments
Open

<quick-link> navigate a page without refresh #12

DrSensor opened this issue Sep 9, 2022 · 4 comments
Labels
enhancement New feature or request navigation Everything about SPA navigation priority: high Although it's not part of the milestone, it's urgent and must be resolved

Comments

@DrSensor
Copy link
Owner

DrSensor commented Sep 9, 2022 •
edited
Loading

Inspired from flamethrower but rather than intercepting the default click event handler in HTMLAnchorElement (<a>), you must be explicit which link that cause SPA navigation.

<a-page href="about.html">About</a-page>
<!-- or -->
<a href="about.html" is="a-page">About</a>

No <render-scope> is necessary

Note
Using attribute is="a-page" is recommended than using custom tag <a-page> because it provide fallback when the script not yet executed

<script src="wiles/a-page.js" async></script>
...very short content
<a href="about.html" is="a-page">About</a>
<!-- 👆 will load as normal anchor link then upgrade into <a-page> when a-page.js is ready -->
@DrSensor DrSensor added enhancement New feature or request priority: high Although it's not part of the milestone, it's urgent and must be resolved navigation Everything about SPA navigation labels Sep 9, 2022
@DrSensor DrSensor changed the title SPA navigation: anchor link that navigate into static html with no refresh Anchor link that navigate into static html with no refresh Sep 11, 2022
@DrSensor
Copy link
Owner Author

DrSensor commented Sep 28, 2022 •
edited
Loading

Apparently rather than patching <head> and replacing <body>, I just need to add is="{tag}-scope" attribute on each tag then swap all childNodes with the next page. This mean slot attribute/element can be used to prevent script being executed as well as an identifier for styling specific elements that are came from custom page transition. That styling can be done via ::slotted() selector.

@DrSensor DrSensor changed the title Anchor link that navigate into static html with no refresh Anchor link that navigate into a page without refresh Oct 18, 2022
@DrSensor
Copy link
Owner Author

DrSensor commented Oct 18, 2022 •
edited
Loading

Surprise...! Safari/WebKit didn't support is= attribute 🥲
Maybe I should use .firstChildElement as fallback

<quick-link><a href="next.html">next</a></quick-link>

which transform into

<quick-link href=next.html>next</quick-link>

before applying the main logic

💡 Tip: just move Attr and Text node from .firstChildElememt into parent/host

Edit

Finally found a better name 😅
I'm thinking for <quick-link> to:

  1. support multiple <a href="">
  2. make it dynamic which return instance of HTMLAnchorElement if it has href="", else just return HTMLElement

@DrSensor
Copy link
Owner Author

DrSensor commented Feb 2, 2023

others yet same:

@DrSensor DrSensor changed the title Anchor link that navigate into a page without refresh <quick-link> navigate a page without refresh Feb 2, 2023
@DrSensor DrSensor mentioned this issue Feb 9, 2023
Open
2 tasks
@DrSensor
Copy link
Owner Author

DrSensor commented Mar 11, 2023 •
edited
Loading

No need to keep and track the scroll position since it can be solved by re-structuring the page to utilize #29

@DrSensor DrSensor mentioned this issue Jun 7, 2023
Open
5 tasks
@DrSensor DrSensor mentioned this issue Jul 14, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request navigation Everything about SPA navigation priority: high Although it's not part of the milestone, it's urgent and must be resolved
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@DrSensor