') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); [4.x] Fix nav item active status on user modified navs by jesseleite · Pull Request #8685 · statamic/cms · GitHub
Skip to content

[4.x] Fix nav item active status on user modified navs - #8685

Merged
jasonvarga merged 12 commits into
4.xfrom
fix/cp-nav-active-children-part-two
Sep 18, 2023
Merged

[4.x] Fix nav item active status on user modified navs#8685
jasonvarga merged 12 commits into
4.xfrom
fix/cp-nav-active-children-part-two

Conversation

@jesseleite

@jesseleitejesseleite commented Sep 10, 2023

Copy link
Copy Markdown
Contributor

A continuation / refactor of what @jacksleight started in #8273 ❤️

This PR ensures active status is properly evaluated when child nav items don't match URL hierarchy with their parent nav items.

It also preserves the performance benefits of children closures, to only get evaluated / rendered when absolutely necessary.

For example, if we move and nest these two items into a completely different nav section...

- Top Level
- Dashboard
- Articles <- This should be active
- Topics <- When on this taxonomy url
- Content
- Taxonomies <- But this should not be active

Which results in...

CleanShot 2023-09-10 at 17 47 40

@jesseleitejesseleite mentioned this pull request Sep 10, 2023
Closed
@jesseleitejesseleite changed the title [4.x] Fix nav item active status when URL hierarchy isn't consistent between parent and child[4.x] Fix nav item active status on user modified navsSep 10, 2023
@ryanmitchellryanmitchell mentioned this pull request Sep 17, 2023
Closed
@jackmcdadejackmcdade mentioned this pull request Sep 18, 2023
Closed
@jackmcdade

jackmcdade commented Sep 18, 2023

Copy link
Copy Markdown
Member

Is this ready to merge?

@jesseleite

jesseleite commented Sep 18, 2023

Copy link
Copy Markdown
ContributorAuthor

Is this ready to merge?

Was before, and is now again yep! (Sorry! 🇨🇦)

@jasonvarga
jasonvarga merged commit 532c032 into 4.xSep 18, 2023
@jasonvarga
jasonvarga deleted the fix/cp-nav-active-children-part-two branch September 18, 2023 20:57
@ryanmitchell

ryanmitchell commented Sep 19, 2023

Copy link
Copy Markdown
Contributor

I've got a branch over on the Shopify add-on: https://github.com/statamic-rad-pack/shopify/tree/feature%2Fcp-navigation-changes

It creates a "Shopify" sub-nav that brings all the collections, taxonomies etc in under it:
Screenshot 2023-09-19 at 08 19 30

However when I click into any of the subnavs (other than products), it closes the "Shopify" nav.

Maybe I'm misunderstanding the intention of this PR, but should this not now remain open?

@jesseleite

jesseleite commented Sep 20, 2023

Copy link
Copy Markdown
ContributorAuthor

^ Worked this out with @ryanmitchell in a DM. The solution was to define more explicit active() pattern(s) on the parent shopify nav item, or to avoid using a closure within children(). I think the latter suits his case better, since there's no real performance hit with how he's generating his child items.

@jasonvargajasonvarga mentioned this pull request Sep 25, 2023
Closed
@jesseleitejesseleite mentioned this pull request Oct 25, 2023
Merged
4 tasks
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@jasonvargajasonvargaAwaiting requested review from jasonvarga

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@jesseleite@jackmcdade@ryanmitchell@jasonvarga@jacksleight