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.

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

fix matching for setting active navbar link #338

Merged
merged 1 commit into from
Jul 11, 2022

Conversation

RVRX
Copy link
Contributor

@RVRX RVRX commented Jul 1, 2022

Quick fix for a minor visual issue where any link with a name that is a subset of the current active link will also be set as active, as the previous regex statement was matching anything that contained said string.


Bug Example

When "developer_user" is the active link, any tabs with a name contained in that string will also be highlighted, i.e. "user"
image

Fix

Converts the navbar link into a full link path and compares against the current URL.

This should also work no-matter how the end-user defines their navbar link, be it:

<a href="users">Users</a>
<a href="/users">Users</a>
<a href="some/path/users">Users</a>
<a href="http://example.com/admin/users">Users</a>

Note: I am making the assumption in this PR that the URL in the Torch NavBar will always end in the same value as the current URL, i.e. .../admin/developer_user or .../admin/developer_user/ not .../admin/developer_user#anchor. It should however, handle query parameters fine if those were present for whatever reason.

@@ -55,9 +55,9 @@ window.onload = () => {
slice.call(document.querySelectorAll('.torch-nav a'), 0).forEach((field) => {
const url = window.location.href
const linkTarget = field.getAttribute('href')
const regex = RegExp(linkTarget)
const linkTargetFullPath = new URL(linkTarget, document.baseURI).href
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@RVRX can we just skip creating another temporary variable here and just use the getAttribute directly inside this new URL() call?

const linkTarget = new URL(field.getAttribute('href'), document.BaseURI).href

Also, what about using startsWith() for the comparison vs ===. Would that negate any issues with the string ending with/starting with specific string values (anchors, query string, etc...)?

Copy link
Contributor Author

@RVRX RVRX Jul 8, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup good call, that deals with query params and anchors concisely. Committed both changes as requested.

@cpjolicoeur cpjolicoeur merged commit d47efc1 into mojotech:master Jul 11, 2022
@cpjolicoeur
Copy link
Member

Thanks @RVRX

@cpjolicoeur
Copy link
Member

@RVRX Version 4.2.0 was released which includes this change.

@cpjolicoeur
Copy link
Member

@RVRX I was made aware we didnt compile the assets in the 4.2 release. I'm going to update that now, release 4.2.1 and then pull the 4.2.0 release when done. Standby

@cpjolicoeur
Copy link
Member

@RVRX version 4.2.1 released with the updated assets included

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants