daid / EmptyEpsilon

Open source bridge simulator. Build with the SeriousProton engine.
https://daid.github.io/EmptyEpsilon/
GNU General Public License v2.0
520 stars 173 forks source link

Fix broken links to other tabs #2038

Closed parracodea closed 5 months ago

parracodea commented 5 months ago

Fixes links to other tabs. However, clicking the link scrolls the window to the tab's contents, hiding the Empty Epsilon logo and tab-buttons.

daid commented 5 months ago

Not sure what this is trying to fix? As I'm not noticing any problems (not saying there are none, just wanting to make sure that whatever the issue is, that we have a proper fix)

parracodea commented 5 months ago

Sorry, I should have described the problem a little more clearly.

Expected Behavior

On the website, there's a few links that refer to other tabs on the site. These links are at the following places:

  1. Button: Running A Game > Button: Standard Setup > Paragraph Text: The other officers each operate one of the ship's stations, which are described in the **Stations tab**.
    1. This should link to the Stations > Science tab
  2. Button: Running A Game > Button: Game Master > Paragraph Text: Scripting commands are covered in depth on the **Mission Scripting tab**.
    1. This should link to the Mission Scripting tab
  3. Button: Stations > Button: Weapons > Paragraph Header: Beam Weapons > Paragraph Text: The officer can use the frequency selectors at the bottom right, along with data about a target's shield frequencies provided by the **Science officer**, ...
    1. This should link to the Stations > Science tab

However, clicking on these 3 links didn't actually show the contents of the referenced tab. It did add #tabs-stations, #tabs-scripting, and #tabs-science, respectively, to the URL bar, though. I've tested this on Firefox and Edge, both of which had the problem.

Code Changes

I initially tried changing the <a>-tag to use the "#tag-NUMBERHERE", like what appears in the URL, but that didn't work.

    <!-- This doesn't work -->
    <p>The other officers each operate one of the ship's stations, which are described in the <a href="#tabs=3,station-tabs=0">Stations tab</a>.</p>

So instead, I used JavaScript. A defect with the proposed solution is that the page moves down after clicking the link, no longer showing the Empty Epsilon logo and the page-navigation tabs.

image What the window looks like after clicking on the Mission Scripting link on the Running a Game > Game Master tab. Ideally we should still be able to see the top of the page.

I tried adding window.scrollTo(0,0); to the bottom of the updateHashFromTab function definition, but that didn't seem to do anything.

// index.html, line 904
function updateHashFromTab(event, ui)
{
    var target_id = event.target.id;
    var target_index = $(event.target).tabs("option", "active");

    var data = mapHash();
    data[target_id] = target_index;
    var hash = [];
    for(var key in data)
    {
        hash.push(key + "=" + data[key])
    }
    location.hash = hash.join(",");

    // this doesn't actually scroll us back to the top of the page
    window.scrollTo(0,0);
}

There might be a more elegant solution, but I thought I'd at least attempt to solve the issue and bring attention to it!

Testing Plan

Click on the following links and ensure they take you to the proper tab:

  1. Button: Running A Game > Button: Standard Setup > Paragraph Text: The other officers each operate one of the ship's stations, which are described in the **Stations tab**.
    1. This should link to the Stations > Science tab
  2. Button: Running A Game > Button: Game Master > Paragraph Text: Scripting commands are covered in depth on the **Mission Scripting tab**.
    1. This should link to the Mission Scripting tab
  3. Button: Stations > Button: Weapons > Paragraph Header: Beam Weapons > Paragraph Text: The officer can use the frequency selectors at the bottom right, along with data about a target's shield frequencies provided by the **Science officer**, ...
    1. This should link to the Stations > Science tab

Tested on:

daid commented 5 months ago

ah, I see the issue, I have no idea on a better fix, so I'll take it. (JS and HTML/CSS are not my area of expertise)