') + ')', '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] Open CP nav item when it has any active child by jacksleight · Pull Request #8273 · statamic/cms · GitHub
Skip to content

[4.x] Open CP nav item when it has any active child - #8273

Closed
jacksleight wants to merge 1 commit into
statamic:4.xfrom
jacksleight:cp-nav-active-children
Closed

[4.x] Open CP nav item when it has any active child#8273
jacksleight wants to merge 1 commit into
statamic:4.xfrom
jacksleight:cp-nav-active-children

Conversation

@jacksleight

@jacksleightjacksleight commented Jun 6, 2023•
edited
Loading

Copy link
Copy Markdown
Contributor

Now that the CP nav can be customised I would like to group collections/taxonomies by subject rather than type, so instead of this:

- Collections
- Blog
- Taxonomies
- Blog Categories

I can just have this:

- Blog
- Categories

Which is totally possible!

The only problem is the nav hierarchy no longer matches the URL hierarchy, so when you click on Blog > Categories the Blog section closes and Categories is no longer visible.

This PR aims to resolve that by adding a NavItem::hasActiveChild() method, so that items can remain open when they have active children but aren't active themselves.

I see NavItem::children() can sometimes return a closure. I didn't want to mess with resolving children if it's not necessary, so I'm checking if it's a collection first. That may not be the best approach, I'm not sure, but it seems to work for this use-case.

@edalzell

edalzell commented Jun 6, 2023

Copy link
Copy Markdown
Contributor

Oh I like this one, thanks @jacksleight!

@jasonvarga

jasonvarga commented Jun 28, 2023

Copy link
Copy Markdown
Member

Thanks for this.

@jesseleite has a different approach in mind. He'll either push to this or close and open his own thing. I'll leave this open for now though.

@jesseleite

jesseleite commented Jun 28, 2023

Copy link
Copy Markdown
Contributor

@jesseleite has a different approach in mind

Well maybe... This is pretty clean too, just want to hack on this a bit more before we commit either way. Thanks for PR! ❤️

@jesseleitejesseleite mentioned this pull request Sep 10, 2023
Merged
@jesseleite

jesseleite commented Sep 10, 2023

Copy link
Copy Markdown
Contributor

So I ended up going with @jacksleight's approach, as it ended up being cleaner than my original idea. However, I noticed that this PR as it stands still resulted in issues with active status on the original section where the nav item was moved out of...

CleanShot 2023-09-10 at 17 59 22

^ For example, in this example when on the 'Topics' page, the 'Taxonomies' parent item would still get flagged as active, and render its children, even if 'Topics' was intentionally moved out of this parent item.

Had to do a bit of a refactor around how we handle our isActive() checks, but got it figured out in #8685.

Anyway, just wanted to say thank you for the PR @jacksleight! This one was a bit of a doozie, and we always appreciate your efforts on this stuff! ❤️

@jacksleight
jacksleight deleted the cp-nav-active-children branch September 11, 2023 07:17
@jesseleitejesseleite mentioned this pull request Nov 1, 2023
Merged
4 tasks
jesseleite added a commit that referenced this pull request Nov 1, 2023
@jesseleite
Add better test coverage for the use case mentioned by the original f…
948e7f5
…ix in #8273.
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@jesseleitejesseleite

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@jacksleight@edalzell@jasonvarga@jesseleite