DEV: Initial tweaks

This commit is contained in:
Jarek Radosz 2022-10-02 15:14:55 +02:00
parent 157496c452
commit 651acb075c
No known key found for this signature in database
GPG Key ID: 62D0FBAE5BF9B953
4 changed files with 159 additions and 87 deletions

View File

@ -11,23 +11,20 @@ export default {
initialize() { initialize() {
withPluginApi("1.0.0", (api) => { withPluginApi("1.0.0", (api) => {
const autoTocTags = settings.auto_TOC_tags.split("|");
const autoTocCategoryIds = settings.auto_TOC_categories const autoTocCategoryIds = settings.auto_TOC_categories
.split("|") .split("|")
.map((id) => parseInt(id, 10)); .map((id) => parseInt(id, 10));
const autoTocTags = settings.auto_TOC_tags.split("|");
api.decorateCookedElement( api.decorateCookedElement(
(el, helper) => { (el, helper) => {
if (helper) {
const post = helper.getModel(); const post = helper.getModel();
if (post?.post_number !== 1) { if (post?.post_number !== 1) {
return; return;
} }
const topicCategory = helper.getModel().topic.category_id; const topicCategory = post.topic.category_id;
const topicTags = helper.getModel().topic.tags; const topicTags = post.topic.tags;
const hasTOCmarkup = el?.querySelector(`[data-theme-toc="true"]`); const hasTOCmarkup = el?.querySelector(`[data-theme-toc="true"]`);
const tocCategory = autoTocCategoryIds?.includes(topicCategory); const tocCategory = autoTocCategoryIds?.includes(topicCategory);
const tocTag = topicTags?.some((tag) => autoTocTags?.includes(tag)); const tocTag = topicTags?.some((tag) => autoTocTags?.includes(tag));
@ -70,7 +67,6 @@ export default {
} }
}, 300); }, 300);
} }
}
}, },
{ {
id: "disco-toc", id: "disco-toc",
@ -83,11 +79,11 @@ export default {
if (!document.querySelector(".d-toc-cooked")) { if (!document.querySelector(".d-toc-cooked")) {
return; return;
} }
if (args.post.post_number === 1) {
document.body.classList.add("d-toc-timeline-visible"); document.body.classList.toggle(
} else { "d-toc-timeline-visible",
document.body.classList.remove("d-toc-timeline-visible"); args.post.post_number === 1
} );
}); });
api.onAppEvent("docs-topic:current-post-scrolled", () => { api.onAppEvent("docs-topic:current-post-scrolled", () => {
@ -122,6 +118,7 @@ export default {
const distance = Math.abs( const distance = Math.abs(
domUtils.offset(heading).top - headerOffset() - window.scrollY domUtils.offset(heading).top - headerOffset() - window.scrollY
); );
if (closestHeadingDistance == null || distance < closestHeadingDistance) { if (closestHeadingDistance == null || distance < closestHeadingDistance) {
closestHeadingDistance = distance; closestHeadingDistance = distance;
closestHeading = heading; closestHeading = heading;
@ -143,7 +140,9 @@ export default {
if (!anchor) { if (!anchor) {
return; return;
} }
anchor.parentElement.classList.add("direct-active"); anchor.parentElement.classList.add("direct-active");
parentsUntil(anchor, "#d-toc", ".d-toc-item").forEach((liParent) => { parentsUntil(anchor, "#d-toc", ".d-toc-item").forEach((liParent) => {
liParent.classList.add("active"); liParent.classList.add("active");
}); });
@ -153,11 +152,14 @@ export default {
insertTOC(headings) { insertTOC(headings) {
const dToc = document.createElement("div"); const dToc = document.createElement("div");
dToc.classList.add("d-toc-main"); dToc.classList.add("d-toc-main");
dToc.innerHTML = `<div class="d-toc-icons"> dToc.innerHTML = `
<div class="d-toc-icons">
<a href="#" class="scroll-to-bottom" title="${I18n.t( <a href="#" class="scroll-to-bottom" title="${I18n.t(
themePrefix("post_bottom_tooltip") themePrefix("post_bottom_tooltip")
)}">${iconHTML("downward")}</a> )}">${iconHTML("downward")}</a>
<a href="#" class="d-toc-close">${iconHTML("times")}</a></div>`; <a href="#" class="d-toc-close">${iconHTML("times")}</a>
</div>
`;
const existing = document.querySelector(".d-toc-wrapper .d-toc-main"); const existing = document.querySelector(".d-toc-wrapper .d-toc-main");
if (existing) { if (existing) {
@ -187,15 +189,17 @@ export default {
e.target.closest(".d-toc-item") && e.target.closest(".d-toc-item") &&
e.target.hasAttribute("data-d-toc") e.target.hasAttribute("data-d-toc")
) { ) {
const target = `#${e.target.getAttribute("data-d-toc")}`; const target = e.target.getAttribute("data-d-toc");
const scrollTo = domUtils.offset( const scrollTo = domUtils.offset(
document.querySelector(`.d-toc-cooked ${target}`) document.querySelector(`.d-toc-cooked #${target}`)
).top; ).top;
window.scrollTo({ window.scrollTo({
top: scrollTo - headerOffset() - 10, top: scrollTo - headerOffset() - 10,
behavior: "smooth", behavior: "smooth",
}); });
document.querySelector(".d-toc-wrapper").classList.remove("overlay"); document.querySelector(".d-toc-wrapper").classList.remove("overlay");
e.preventDefault(); e.preventDefault();
return false; return false;
} }
@ -207,7 +211,6 @@ export default {
.querySelector(".d-toc-cooked") .querySelector(".d-toc-cooked")
.getBoundingClientRect(); .getBoundingClientRect();
if (rect) {
window.scrollTo({ window.scrollTo({
top: rect.bottom + window.scrollY - headerOffset() - 10, top: rect.bottom + window.scrollY - headerOffset() - 10,
behavior: "smooth", behavior: "smooth",
@ -216,7 +219,6 @@ export default {
e.preventDefault(); e.preventDefault();
return false; return false;
} }
}
// close overlay // close overlay
if (e.target.closest("a").classList.contains("d-toc-close")) { if (e.target.closest("a").classList.contains("d-toc-close")) {
@ -297,23 +299,17 @@ export default {
function parentsUntil(el, selector, filter) { function parentsUntil(el, selector, filter) {
const result = []; const result = [];
const matchesSelector =
el.matches ||
el.webkitMatchesSelector ||
el.mozMatchesSelector ||
el.msMatchesSelector;
// match start from parent // match start from parent
el = el.parentElement; el = el.parentElement;
while (el && !matchesSelector.call(el, selector)) {
if (!filter) { while (el && !el.matches(selector)) {
result.push(el); if (!filter || el.matches(filter)) {
} else {
if (matchesSelector.call(el, filter)) {
result.push(el); result.push(el);
} }
}
el = el.parentElement; el = el.parentElement;
} }
return result; return result;
} }

View File

@ -5,5 +5,5 @@ en:
theme_metadata: theme_metadata:
settings: settings:
minimum_trust_level_to_create_TOC: The minimum trust level a user must have in order to see the TOC button in the composer minimum_trust_level_to_create_TOC: The minimum trust level a user must have in order to see the TOC button in the composer
auto_TOC_categories: automaticlly enable TOC on topics in these categories auto_TOC_categories: automatically enable TOC on topics in these categories
auto_TOC_tags: automaticlly enable TOC on topics with these tags auto_TOC_tags: automatically enable TOC on topics with these tags

File diff suppressed because one or more lines are too long

79
test/fixtures.js Normal file
View File

@ -0,0 +1,79 @@
export const COOKED_WITH_HEADINGS = `
<h1>
<a name="h1-first-test-edited-1" class="anchor" href="#h1-first-test-edited-1"></a></h1>
<h2>
<a name="measure-h2-2" class="anchor" href="#measure-h2-2"></a>Measure h2</h2>
<p>Jaracaca Swamp we gazed round the very evening light in some. HTML version of science far too late. Wait a snake and nearly half-past two terrible carnivorous dinosaur and distribute. Employers Liability Act you! Each of me see that the crudest pleasantry. Sonny my own special brain. Advancing in front of them and there?</p>
<div class="md-table">
<table>
<thead>
<tr>
<th>questions</th>
<th>vanish</th>
<th>contention</th>
</tr>
</thead>
<tbody>
<tr>
<td>nearer</td>
<td>depressed</td>
<td>francisca</td>
</tr>
<tr>
<td>rooms</td>
<td>kennel</td>
<td>genesis</td>
</tr>
</tbody>
</table>
</div><h2>
<a name="undeveloped-h2-3" class="anchor" href="#undeveloped-h2-3"></a>Undeveloped h2</h2>
<p>Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. Youll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. Youll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.<br>
Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. Youll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.<br>
Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. Youll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.</p>
<h1>
<a name="h1-second-section-4" class="anchor" href="#h1-second-section-4"></a>H1 second section</h1>
<h2>
<a name="undeveloped-2-h2-5" class="anchor" href="#undeveloped-2-h2-5"></a>Undeveloped 2 h2</h2>
<p>Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through.<br>
Youll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.</p>
<p>Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. Youll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.</p>
<h3>
<a name="subheading-3-h3-6" class="anchor" href="#subheading-3-h3-6"></a>Subheading 3 h3</h3>
<p>Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. Youll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.</p>
<h3>
<a name="subheading-3-long-ass-wire-h3-7" class="anchor" href="#subheading-3-long-ass-wire-h3-7"></a>Subheading 3 long ass wire h3</h3>
<p>Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. Youll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.</p>
<h2>
<a name="another-section-h2-8" class="anchor" href="#another-section-h2-8"></a>Another section h2</h2>
<p>Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. Youll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.</p>
<h3>
<a name="subheading-again-then-h3-9" class="anchor" href="#subheading-again-then-h3-9"></a>Subheading again then h3</h3>
<p>Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. Youll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.</p>
<h4>
<a name="su-subbheading-h4-10" class="anchor" href="#su-subbheading-h4-10"></a>Su-subbheading h4</h4>
<p>Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. Youll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.</p>
<p>Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. Youll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.</p>
<h4>
<a name="su-subalicions-heading-h4-11" class="anchor" href="#su-subalicions-heading-h4-11"></a>Su-subalicions heading h4</h4>
<p>Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. Youll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.</p>
<p>Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. Youll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.</p>
<h4>
<a name="su-subalicions-heading-h4-quite-long-to-test-a-real-life-kind-of-scenario-here-then-12" class="anchor" href="#su-subalicions-heading-h4-quite-long-to-test-a-real-life-kind-of-scenario-here-then-12"></a>Su-subalicions heading h4 quite long to test a real-life kind of scenario here then</h4>
<p>Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. Youll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.</p>
<p>Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. Youll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.</p>
<h4>
<a name="su-subalicions-heading-h4-also-quite-long-to-test-a-real-life-kind-of-scenario-here-then-13" class="anchor" href="#su-subalicions-heading-h4-also-quite-long-to-test-a-real-life-kind-of-scenario-here-then-13"></a>Su-subalicions heading h4 also quite long to test a real-life kind of scenario here then</h4>
<p>Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. Youll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.</p>
<p>Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. Youll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.</p>
<aside class="quote no-group" data-username="kathey.zemlak" data-post="2" data-topic="71">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="20" height="20" src="//127.0.0.1:4200/user_avatar/127.0.0.1/kathey.zemlak/40/14_2.png" class="avatar"><a href="//127.0.0.1:4200/t/modernizing-the-antiquated-boxing-scoring-system/71/2">Modernizing the antiquated boxing scoring system</a>
</div>
<blockquote>
<h2>Undeveloped</h2>
<p>Cried leaning upon the tangle of the full of the same. Behind us upon the luxurious. Tarp Henry of the moment that similar upon his lecture. Devil got there came well with him fifteen dollars a whisper We slunk through. Youll find its palm. Other ones and east of Shakespeare could his seat there by. McArdle looked round and I have thrown open and his people have seen the tangled.</p>
</blockquote>
</aside>
`;