diff --git a/docs/plugins/sidebyside.js b/docs/plugins/sidebyside.js
index ea71f15..2d45b9c 100644
--- a/docs/plugins/sidebyside.js
+++ b/docs/plugins/sidebyside.js
@@ -1,40 +1,50 @@
-import { DOM, style, inline } from "./html.js";
-
-let div = DOM("div");
-
-export class SideBySide {
- constructor() {
- this.body = document.querySelector("body");
- this.sideCont = div`class="${css.container}"`;
- this.pre = document.querySelectorAll("pre");
- this.main = document.querySelector("main");
- this.lineLocked = false;
- }
-
- init() {
- this.main.classList.add(css.main);
- this.body.classList.add(css.body);
- this.body.appendChild(this.sideCont);
- let markedItems = [...document.querySelectorAll("blockquote > p")];
- this.markedItems = markedItems;
- let documents = [...this.pre].map(getText);
- this.highlights = [];
- this.current = 0;
-
- for (let i = 0; i < markedItems.length; i++) {
- const text = markedItems[i].innerText;
- let found = find(text, documents);
- if (found[0] == 0 && found[1] == Infinity && found[0] == 0) {
- markedItems.splice(i, 1);
- i--;
- } else {
- this.highlights.push(found);
- this.sideCont.appendChild(this.pre[found[2]]);
- inline(this.pre[found[2]], { display: "none" });
- markedItems[i].dataset.index = this.highlights.length - 1;
- inline(markedItems[i], {
- color: "transparent",
- height: "0px",
- overflow: "hidden",
- });
- }
+(() => {
+ let body = document.querySelector("body");
+ let sideCont = document.createElement("div");
+ sideCont.id = "sidebyside";
+ let pre = document.querySelectorAll("pre");
+ let main = document.querySelector("main");
+
+ style(main, {
+ width: "50%",
+ overflowY: "auto",
+ height: "calc(100vh - 156px)",
+ margin: "0",
+ paddingBottom: "100px",
+ });
+
+ style(body, { overflowY: "hidden" });
+
+ style(sideCont, {
+ width: "50%",
+ position: "fixed",
+ right: "0",
+ top: "0",
+ height: "100vh",
+ overflowY: "auto",
+ });
+
+ body.appendChild(sideCont);
+
+ let markedItems = [...document.querySelectorAll("blockquote > p")];
+ let documents = [...pre].map(getText);
+
+ window.highlights = [];
+ window.current = 0;
+
+ for (let i = 0; i < markedItems.length; i++) {
+ const text = markedItems[i].innerText;
+ let found = find(text, documents);
+ if (found[0] == 0 && found[1] == Infinity && found[0] == 0) {
+ markedItems.splice(i, 1);
+ i--;
+ } else {
+ window.highlights.push(found);
+ sideCont.appendChild(pre[found[2]]);
+ style(pre[found[2]], { display: "none" });
+ markedItems[i].dataset.index = window.highlights.length - 1;
+ style(markedItems[i], {
+ color: "transparent",
+ height: "0px",
+ overflow: "hidden",
+ });
@@ -42,38 +51,0 @@ export class SideBySide {
- inline(this.pre[this.highlights[0][2]], { display: "block" });
-
- let currentItem = -1;
- this.main.onscroll = (e) => {
- if (!this.lineLocked) {
- let closestItem;
- let minDistance = Infinity;
-
- markedItems.forEach((item, i) => {
- if (isInViewport(item) || i == markedItems.length - 1) {
- const distance = Math.abs(
- item.getBoundingClientRect().top
- );
- if (distance < minDistance) {
- minDistance = distance;
- closestItem = item;
- }
- }
- });
-
- let found =
- this.highlights[parseInt(closestItem.dataset.index)];
- if (currentItem != parseInt(closestItem.dataset.index)) {
- for (let i = 0; i < this.highlights.length; i++) {
- const element = this.highlights[i];
- unHighlight(this.pre[element[2]], element);
- inline(this.pre[element[2]], { display: "none" });
- }
-
- inline(this.pre[found[2]], { display: "block" });
- highlight(this.pre[found[2]], found);
- view(this.sideCont, this.pre[found[2]], found);
- currentItem = parseInt(closestItem.dataset.index);
- }
- }
- };
-
- this.main.appendChild(div`style="padding: 100vh;"`);
@@ -82,7 +54,3 @@ export class SideBySide {
- error(start, end = false) {
- if (end == false) {
- end = start;
- }
-
- // this.lineLocked = true;
-
+ style(pre[window.highlights[0][2]], { display: "block" });
+ let currentItem = -1;
+ main.onscroll = (e) => {
@@ -92,2 +60,2 @@ export class SideBySide {
- this.markedItems.forEach((item, i) => {
- if (isInViewport(item) || i == this.markedItems.length - 1) {
+ markedItems.forEach((item, i) => {
+ if (isInViewport(item) || i == markedItems.length - 1) {
@@ -101,7 +68,0 @@ export class SideBySide {
- let found = this.highlights[parseInt(closestItem.dataset.index)];
- found[0] = start;
- found[1] = end;
- highlight(this.pre[found[2]], found, "#754242");
- view(this.sideCont, this.pre[found[2]], found);
- }
-}
@@ -109,18 +70,26 @@ export class SideBySide {
-let css = style(/*css*/ `
- .main {
- width: 50%;
- overflow-y: auto;
- height: calc(100vh - 156px);
- margin: 0;
- padding-bottom: 100px;
- }
- .body {
- overflow-y: hidden;
- }
- .container {
- width: 50%;
- position: fixed;
- right: 0;
- top: 0;
- height: 100vh;
- overflow-y: auto;
+ let found = window.highlights[parseInt(closestItem.dataset.index)];
+ if (currentItem != parseInt(closestItem.dataset.index)) {
+ for (let i = 0; i < window.highlights.length; i++) {
+ const element = window.highlights[i];
+ unHighlight(pre[element[2]], element);
+ style(pre[element[2]], { display: "none" });
+ }
+
+ style(pre[found[2]], { display: "block" });
+ highlight(pre[found[2]], found);
+ view(sideCont, pre[found[2]], found);
+ currentItem = parseInt(closestItem.dataset.index);
+ }
+ };
+ let padding = document.createElement("div");
+
+ style(padding, {
+ height: "100vh",
+ });
+
+ main.appendChild(padding);
+})();
+
+function style(el, styles) {
+ for (const key in styles) {
+ el.style[key] = styles[key];
@@ -128 +97 @@ let css = style(/*css*/ `
-`);
+}
@@ -184 +153 @@ function find(text, documents) {
-function highlight(el, lines, color = "#d2dc0024") {
+function highlight(el, lines) {
@@ -189,2 +158,2 @@ function highlight(el, lines, color = "#d2dc0024") {
- inline(element, {
- background: color,
+ style(element, {
+ background: "#d2dc0024",
@@ -200 +169 @@ function unHighlight(el, lines) {
- inline(element, {
+ style(element, {
import { DOM, style, inline } from "./html.js";
let div = DOM("div");
export class SideBySide {
constructor() {
this.body = document.querySelector("body");
this.sideCont = div`class="${css.container}"`;
this.pre = document.querySelectorAll("pre");
this.main = document.querySelector("main");
this.lineLocked = false;
}
init() {
this.main.classList.add(css.main);
this.body.classList.add(css.body);
this.body.appendChild(this.sideCont);
let markedItems = [...document.querySelectorAll("blockquote > p")];
this.markedItems = markedItems;
let documents = [...this.pre].map(getText);
this.highlights = [];
this.current = 0;
for (let i = 0; i < markedItems.length; i++) {
const text = markedItems[i].innerText;
let found = find(text, documents);
if (found[0] == 0 && found[1] == Infinity && found[0] == 0) {
markedItems.splice(i, 1);
i--;
} else {
this.highlights.push(found);
this.sideCont.appendChild(this.pre[found[2]]);
inline(this.pre[found[2]], { display: "none" });
markedItems[i].dataset.index = this.highlights.length - 1;
inline(markedItems[i], {
color: "transparent",
height: "0px",
overflow: "hidden",
});
}
}
inline(this.pre[this.highlights[0][2]], { display: "block" });
let currentItem = -1;
this.main.onscroll = (e) => {
if (!this.lineLocked) {
let closestItem;
let minDistance = Infinity;
markedItems.forEach((item, i) => {
if (isInViewport(item) || i == markedItems.length - 1) {
const distance = Math.abs(
item.getBoundingClientRect().top
);
if (distance < minDistance) {
minDistance = distance;
closestItem = item;
}
}
});
let found =
this.highlights[parseInt(closestItem.dataset.index)];
if (currentItem != parseInt(closestItem.dataset.index)) {
for (let i = 0; i < this.highlights.length; i++) {
const element = this.highlights[i];
unHighlight(this.pre[element[2]], element);
inline(this.pre[element[2]], { display: "none" });
}
inline(this.pre[found[2]], { display: "block" });
highlight(this.pre[found[2]], found);
view(this.sideCont, this.pre[found[2]], found);
currentItem = parseInt(closestItem.dataset.index);
}
}
};
this.main.appendChild(div`style="padding: 100vh;"`);
}
error(start, end = false) {
if (end == false) {
end = start;
}
// this.lineLocked = true;
let closestItem;
let minDistance = Infinity;
this.markedItems.forEach((item, i) => {
if (isInViewport(item) || i == this.markedItems.length - 1) {
const distance = Math.abs(item.getBoundingClientRect().top);
if (distance < minDistance) {
minDistance = distance;
closestItem = item;
}
}
});
let found = this.highlights[parseInt(closestItem.dataset.index)];
found[0] = start;
found[1] = end;
highlight(this.pre[found[2]], found, "#754242");
view(this.sideCont, this.pre[found[2]], found);
}
}
let css = style(/*css*/ `
.main {
width: 50%;
overflow-y: auto;
height: calc(100vh - 156px);
margin: 0;
padding-bottom: 100px;
}
.body {
overflow-y: hidden;
}
.container {
width: 50%;
position: fixed;
right: 0;
top: 0;
height: 100vh;
overflow-y: auto;
}
`);
function getText(el) {
let t = "";
let code = el.querySelector("code");
if (code) {
for (let a = 0; a < code.children.length; a++) {
const element = code.children[a];
t += element.children[1].innerText;
}
}
return t;
}
function find(text, documents) {
let q = text.replace(/\s/g, "");
let index = 0;
let start = 0;
let end = Infinity;
for (let i = 0; i < documents.length; i++) {
const d = documents[i].replace(/\s/g, "");
if (d.indexOf(q) != -1) {
let lines = documents[i].split("\n");
for (let a = 0; a < lines.length; a++) {
if (
lines
.slice(0, a)
.join("\n")
.replace(/\s/g, "")
.indexOf(q) != -1
) {
end = a;
for (let b = 0; b < a + 1; b++) {
if (
lines
.slice(b, a)
.join("\n")
.replace(/\s/g, "")
.indexOf(q) == -1
) {
start = b;
index = i;
break;
}
}
break;
}
}
}
}
return [start, end, index];
}
function highlight(el, lines, color = "#d2dc0024") {
let code = el.querySelector("code");
for (let a = lines[0] - 1; a < lines[1]; a++) {
const element = code.children[a];
inline(element, {
background: color,
});
}
}
function unHighlight(el, lines) {
let code = el.querySelector("code");
for (let a = lines[0] - 1; a < lines[1]; a++) {
const element = code.children[a];
inline(element, {
background: "",
});
}
}
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <=
(window.innerHeight || document.documentElement.clientHeight) &&
rect.right <=
(window.innerWidth || document.documentElement.clientWidth)
);
}
function view(parentElement, el, lines) {
let code = el.querySelector("code");
let childElement = code.children[lines[0] - 1];
const parentRect = parentElement.getBoundingClientRect();
const childRect = childElement.getBoundingClientRect();
const parentScrollTop = parentElement.scrollTop;
// Calculate the vertical position to scroll to center the child element
const targetScrollTop =
childRect.top -
parentRect.top -
(parentRect.height - childRect.height) / 2;
// Scroll the parent element to the calculated position
parentElement.scrollTo({
top: parentScrollTop + targetScrollTop,
behavior: "smooth", // Optional: for smooth scrolling
});
}