External Direct link

[5e-Cleric]

I understand you can link to specific id attributes by doing the following:

<a href="http://www.external-website.com/page#some-id">Link</a>

but using that with a homebrewery share link just doesn't work, i get that is because the document is inside an iframe or because the page is not rendered before following the link, but is there a way around this?

[ericscheid]

There is a way in vanilla JS.

// Get the hash value from the URL
var hash = window.location.hash;

// Check if the hash value exists and is not empty
if (hash && hash !== '') {
   // Get the iframe element
   var iframe = document.getElementById('BrewRenderer');

   // Wait for the iframe to load
   iframe.onload = function() {
       // Get the element with the corresponding ID in the iframe
       var target = iframe.contentDocument.getElementById(hash.slice(1));

       // Scroll the iframe to the target element
       if (target) {
           iframe.contentWindow.scrollTo(0, target.offsetTop);
       }
   };
}

I don't know how to do this in React.

[G-Ambatte]

Just theorizing here... We could render the entire brew text to HTML, parse it for a matching ID, determine the immediately preceding <div class='page' id='pX'> and then, once the iFrame is loaded, scroll to page X.

It's not a perfect solution, but it should work, even if the brew is large enough to activate PPR.

[ericscheid]

See also https://github.com/naturalcrit/homebrewery/issues/2830 since we also want to support navigating by internal links.

[5e-Cleric]

Isn't this fixed by #3156?

[ericscheid]

Isn't this fixed by #3156?

No.

3156 will clear the blocker to a fix, but not effect a fix.

Specifically, the anchors in the preview would be rendered into an iframe, but the window.location only looks at the top level html document. Even if all the headings were rendered into the preview (via PPR etc), the iframe does not get targeted by window.location.hash.

[5e-Cleric]

3506 adds this functionality, grabbing the hash location, determining if it is a page or an element, if it is an element, it scrolls to the page of the element.

[mouse0270]

Just some feedback, the linking seems to be weird for example: https://homebrewery-pr-3506.herokuapp.com/share/5BLGepL_5gWo#WEAPON_MOD_PROP_POWERFUL

Seems to jump to the right page, however jumping using the specific page seems to jump to the next page: https://homebrewery-pr-3506.herokuapp.com/share/5BLGepL_5gWo#p82

goes to page 83 instead of 82

[5e-Cleric]

Simple, good catch, our first page is numbered #p0, will update this right now.