') + ')', '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); } })(); })(); [v2] Fix anchor navigation in panel headers by le0tan · Pull Request #1191 · MarkBind/markbind · GitHub
Skip to content

[v2] Fix anchor navigation in panel headers - #1191

Merged
le0tan merged 6 commits into
MarkBind:masterfrom
le0tan:issue-1104-v4
Apr 15, 2020
Merged

[v2] Fix anchor navigation in panel headers#1191
le0tan merged 6 commits into
MarkBind:masterfrom
le0tan:issue-1104-v4

Conversation

@le0tan

@le0tanle0tan commented Apr 11, 2020

Copy link
Copy Markdown
Contributor

What is the purpose of this pull request? (put "X" next to an item, remove the rest)

• [X] Documentation update
• [X] Bug fix

Replaces #1145#1187
Fixes#1104Fixes#1071

What changes did you make? (Give an overview)

Move span generation to a plugin during build time. Add ::before to panel card containers to make navigation work properly on panel headers.

Provide some example code that this change will affect:

na

Is there anything you'd like reviewers to focus on?

Test if the panel functions are broken in any way.

Testing instructions:

na

Proposed commit message: (wrap lines at 72 characters)

To avoid dynamically injecting lots of dummy spans in a document with
many headings, let's generate these spans at build time.

To make anchor navigation function properly on panel headers, let's
introduce ::before element to card-container to make space for the
fixed top nav.

ang-zeyu
ang-zeyu reviewed Apr 11, 2020
View reviewed changes

@ang-zeyuang-zeyu left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Just some nits:

Comment threadsrc/lib/markbind/src/parser.js Outdated
Comment threadsrc/Page.js Outdated
@ang-zeyu

ang-zeyu commented Apr 11, 2020

Copy link
Copy Markdown
Contributor

Some conflicts @le0tan

@le0tan
le0tan requested a review from ang-zeyuApril 12, 2020 03:37
@le0tan

le0tan commented Apr 12, 2020

Copy link
Copy Markdown
ContributorAuthor

@ang-zeyu looks like you removed some pointer events from setupAnchors. This function is necessary in all cases as it injects the events where hovering over the heading or anchor will make the anchor icon visible. Do tell me if I misunderstood anything.

@ang-zeyu

ang-zeyu commented Apr 12, 2020

Copy link
Copy Markdown
Contributor

@ang-zeyu looks like you removed some pointer events from setupAnchors. This function is necessary in all cases as it injects the events where hovering over the heading or anchor will make the anchor icon visible. Do tell me if I misunderstood anything.

Refer to the second commit in #1129. It's moved to plugin css ( new feature )

@le0tan

le0tan commented Apr 12, 2020

Copy link
Copy Markdown
ContributorAuthor

@ang-zeyu got it and I changed my code accordingly, can you take a look?

@ang-zeyu

ang-zeyu commented Apr 12, 2020

Copy link
Copy Markdown
Contributor

@le0tan there's still a large amount of conflicts, mostly from previous versions

ang-zeyu
ang-zeyu reviewed Apr 12, 2020
View reviewed changes
Comment threaddocs/userGuide/syntax/headers.mbdf
Comment threadasset/js/setup.js
@@ -32,20 +32,18 @@ function setupAnchorsForFixedNavbar() {
jQuery('#content-wrapper').css('padding-top', `calc(${headerHeight}px)`);

@ang-zeyuang-zeyuApr 12, 2020

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

would it be possible to just insert the padding for the main container and not its 3 sub containers?
fixedheader

@le0tanle0tanApr 14, 2020

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

As far as I'm concerned it doesn't work...

@ang-zeyuang-zeyuApr 14, 2020

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

ok, might be better to leave it this way as well: .css('nav-inner') needs to be offsetted with the original padding

navbarpadding

@le0tanle0tanApr 15, 2020

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

just did that, wondering if we need to add 1rem to content-wrapper as well, but probably better leave it as a future first timer issue?

@ang-zeyuang-zeyuApr 15, 2020

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Good idea, would make it seem less squeezed to the top. Let's leave it as a first timer issue then, though if you want to include it here it'd be nice as well

@le0tan
le0tan requested review from ang-zeyu and damithcApril 14, 2020 08:26
damithc
damithc approved these changes Apr 14, 2020
View reviewed changes

@damithcdamithc left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Looks good, but my review is from the author POV only.

ang-zeyu
ang-zeyu approved these changes Apr 15, 2020
View reviewed changes
Comment threadasset/js/setup.js
@@ -32,20 +32,18 @@ function setupAnchorsForFixedNavbar() {
jQuery('#content-wrapper').css('padding-top', `calc(${headerHeight}px)`);

@ang-zeyuang-zeyuApr 15, 2020

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Good idea, would make it seem less squeezed to the top. Let's leave it as a first timer issue then, though if you want to include it here it'd be nice as well

@le0tanle0tan added this to the v2.15.0 milestone Apr 15, 2020
@le0tan
le0tan merged commit 5db6351 into MarkBind:masterApr 15, 2020
@ang-zeyuang-zeyu mentioned this pull request Jun 12, 2020
Closed
@ang-zeyuang-zeyu mentioned this pull request Jun 27, 2021
Closed
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@damithcdamithcdamithc approved these changes
@ang-zeyuang-zeyuang-zeyu approved these changes
@alyip98alyip98Awaiting requested review from alyip98
@openorcloseopenorcloseAwaiting requested review from openorclose

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

v2.15.0

Development

Successfully merging this pull request may close these issues.

Heading hidden when clicking pageNav Anchor navigation in panel not working properly with fixed header

3 participants

@le0tan@ang-zeyu@damithc