https://trackjs.com/assets/js/blog.js?1775673539976874651

1onPageReady(() => {
2
3  /**
4   * Replaces <h*> headers in the main-content body with anchor permalinks
5   * to the hash.
6   */
7  (function configTitleAnchors() {
8    const content = document.querySelector(".content");
9    if (!content) { return; }
10
11    for (const el of [...content.querySelectorAll("h2[id],h3[id],h4[id],h5[id]")]) {
12      const anchorLink = document.createElement("a");
13      anchorLink.setAttribute("href", `${location.pathname}#${el.id}`);
14      anchorLink.innerHTML = el.innerHTML;
15      el.innerHTML = "";
16      el.appendChild(anchorLink);
17      el.classList.add("linked");
18    }
19  })();
20
21  /**
22   * Enable big images to be enlarged
23   */
24  (function enlargedImages() {
25    const content = document.querySelector(".content");
26    if (!content) { return; }
27
28    const enlargeable = [...content.querySelectorAll("picture[data-enlargeable]")];
29    console.info(`[EnlargeableImages] found ${enlargeable.length} pictures`);
30    for (const picture of enlargeable) {
31
32      // wrap up the picture in a new div for us to work in.
33      const root = document.createElement("div");
34      root.classList.add("enlargeable-image");
35      picture.parentElement.insertBefore(root, picture);
36      root.appendChild(picture);
37
38      // Create the enlarge button
39      const enlargeButton = document.createElement("button");
40      enlargeButton.type = "button";
41      enlargeButton.classList.add("enlarge", "enlargeable-control");
42      enlargeButton.title = "Enlarge Image";
43      enlargeButton.innerHTML = `<i class="flaticon-expand"></i>`;
44      root.appendChild(enlargeButton);
45
46      enlargeButton.addEventListener("click", () => {
47        enlargeImage(root);
48      })
49    }
50
51    const enlargeImage = (root) => {
52      const img = root.querySelector("img");
53      const intrinsicHeight = Number.parseInt(img.getAttribute("height"));
54      const intrinsicWidth = Number.parseInt(img.getAttribute("width"));
55      const imageUrl = URL.parse(img.src);
56      imageUrl.searchParams.delete("width")
57
58      const enlargedImgWrap = document.createElement("div");
59      enlargedImgWrap.classList.add("enlarged-image");
60      enlargedImgWrap.innerHTML = `
61        <div class="image-inner-wrap">
62          <img src="${imageUrl}" loading="eager"
63            width="${intrinsicWidth}" height="${intrinsicHeight}"
64            alt="${img.alt}" />
65          <button type="button" class="enlargeable-control reduce" title="Reduce Image">
66            <i class="flaticon-collapse"></i>
67          </button>
68        </div>
69      `;
70      enlargedImgWrap.style.width = `${intrinsicWidth}px`;
71      enlargedImgWrap.style.top = `${img.getBoundingClientRect().top + window.scrollY}px`;
72
73      document.body.appendChild(enlargedImgWrap);
74      root.classList.add("enlarged");
75
76      // Adjust the size of the original picture to make room in content
77      img.style.height = `${enlargedImgWrap.clientHeight}px`;
78      img.style.opacity = 0;
79
80      // attach reducer
81      enlargedImgWrap.querySelector("button.reduce").addEventListener("click", () => {
82        document.body.removeChild(enlargedImgWrap);
83        img.style.height = "auto";
84        img.style.opacity = 1;
85        root.classList.remove("enlarged");
86      });
87
88      sendEvent("enlarged_image");
89    }
90  })();
91
92  /**
93   * Enable code blocks to be copied
94   */
95  (function copyCode() {
96    const content = document.querySelector(".content");
97    if (!content) { return; }
98
99    const copyable = [...content.querySelectorAll("button[data-copy]")];
100    console.info(`[CopyButtons] found ${copyable.length} copy buttons`);
101    for (const button of copyable) {
102      const targetId = button.getAttribute("data-copy");
103      button.addEventListener("click", () => {
104        const target = document.getElementById(targetId);
105        if (!target) { return; }
106
107        const text = target.textContent;
108        navigator.clipboard.writeText(text);
109
110        sendEvent("copied_text");
111      });
112    }
113
114  })();
115
116  /**
117   * Enable big code blocks to be enlarged
118   */
119  (function expandCode() {
120    const content = document.querySelector(".content");
121    if (!content) { return; }
122
123    const expandable = [...content.querySelectorAll("button[data-expand]")];
124    console.info(`[CodeExpand] found ${expandable.length} expand buttons`);
125    for (const button of expandable) {
126      const targetId = button.getAttribute("data-expand");
127      button.addEventListener("click", () => {
128        const target = document.getElementById(targetId);
129        if (!target) { return; }
130        const height = target.offsetHeight;
131
132        target.classList.add("expanded");
133        button.style.display = "none";
134
135        const spacer = document.createElement("div");
136        spacer.classList.add("expand-spacer");
137        spacer.style.height = `${height}px`;
138        target.insertAdjacentElement("afterend", spacer);
139
140        const shrinkButton = document.createElement("button");

141        shrinkButton.type = "button";
142        shrinkButton.title = "Shrink";
143        shrinkButton.innerHTML = "<i class='flaticon-collapse'></i>"
144        button.insertAdjacentElement("afterend", shrinkButton);
145
146        shrinkButton.addEventListener("click", () => {
147          target.classList.remove("expanded");
148          button.style.display = "flex";
149          spacer.remove();
150          shrinkButton.remove();
151        });
152
153        sendEvent("enlarged_code");
154      });
155    }
156  })();
157
158});