Bug #1543

Anchor Links Broken on Links Page

Added by Pavan Rikhi 4 months ago. Updated 12 days ago.

Status:ClosedStart date:
Priority:NormalDue date:
Assignee:Pavan Rikhi% Done:

100%

Category:PagesSpent time:-
Target version:v1.00.00 - Deployment
Easy Pickings:

Description

  1. Migrate zencart database
  2. Remove path from anchor links in "Links" StaticPage.
  3. Run dev server
  4. Navigate to https://localhost:7000/links/
  5. Try clicking one of the anchor links at top of page content

The page reloads instead of scrolling down to the given element.

Maybe we could do one of these?

  • Parse the content in the server when saving the content. Store the parse result in the DB and serve it to the client. Decode the parse tree and transform it into Elm HTML.
  • Store & serve the content as text instead of the result of parsing. Parse the HTML on the client and convert it into Elm HTML.

If that doesn't fix anchor links in SPAs, we'd probably have to do some routing changes. E.g., parse & store the hash content(in the route?), fetch the page data. When the page is loaded, fire a port to scroll to the element with the given name.

That would also fix cross-page anchor links.

Associated revisions

Revision 240ce137
Added by Pavan Rikhi 12 days ago

[#1543] Fix Scrolling to Anchor Links on StaticPages

Fix a bug causing anchor links to be ignored when included in links to a
StaticPage.

To fix this, we parse the hash fragment when parsing the PageDetails
route. Then, when page loading is complete & the page has a fragment, we
scroll to the element with a name attribute matching the fragment.

This requires us to only scroll to the top of the page when a
StaticPage's data has been loaded if there is no fragment in the URL.
Otherwise the page will bounce up and down.

We also modify the data fetching after authorization, re-fetching the
page's data if we are on a page requiring Authentication, or the Cart or
Checkout pages.

Add a homePage value to the Routing module, for easily constructing a
Route to the Home page.

Add a scrollToName function to the Ports module, wrapping the
scrollToSelector function for scrolling to elements with a specific
`name` attribute.

Modify the `scrollToSelector` javascript port code, making it also
scroll to the element if it is below the user's current viewport -
instead of only when the element is above the user's window position.

Closes #1543

History

#1 Updated by Pavan Rikhi 4 months ago

  • Description updated (diff)

#2 Updated by Pavan Rikhi 4 months ago

  • Target version changed from v0.7.0 - Misc Pages & UI to v1.00.00 - Deployment

#3 Updated by Pavan Rikhi 13 days ago

  • Target version changed from v1.00.00 - Deployment to v1.01.00 - Coupons Admin

#4 Updated by Pavan Rikhi 12 days ago

  • Target version changed from v1.01.00 - Coupons Admin to v1.00.00 - Deployment

#5 Updated by Pavan Rikhi 12 days ago

  • % Done changed from 0 to 100
  • Status changed from New to Closed

Also available in: Atom PDF