@xiee/utils 1.4.2 → 1.5.0

package/README.md

@@ -32,6 +32,11 @@ Then the image will have a tooltip on mouseover.
 Center `<img>`, `<video>`, and `<object>` on a page if they are the only child
 of their parent element.
 
+## copy-button.js
+
+Add a copy button to any element (by default, `<pre>` code blocks) on a page.
+See [this post](https://yihui.org/en/2023/09/copy-button/) for details.
+
 ## external-link.js
 
 If a link of `<a>` does not start with `http://` or `https://`, add the

package/css/copy-button.css

@@ -0,0 +1,21 @@
+.copy-button {
+  position: absolute;
+  display: none;
+  cursor: pointer;
+  inset: 5px 5px auto auto;
+  width: 1em;
+  height: 1em;
+  border: 1px solid;
+  box-shadow: -3px 3px #999;
+}
+:hover > .copy-button {
+  display: inline-block;
+}
+.copy-success {
+  box-shadow: none;
+  background-color: #999;
+  transition: box-shadow 300ms ease-out, background-color 300ms ease-out;
+}
+.copy-fail {
+  border-style: dotted;
+}

package/css/copy-button.min.css

@@ -0,0 +1 @@
+.copy-button{position:absolute;display:none;cursor:pointer;inset:5px 5px auto auto;width:1em;height:1em;border:1px solid;box-shadow:-3px 3px #999}:hover>.copy-button{display:inline-block}.copy-success{box-shadow:none;background-color:#999;transition:box-shadow .3s ease-out,background-color .3s ease-out}.copy-fail{border-style:dotted}

package/js/copy-button.js

@@ -0,0 +1,22 @@
+// add a button to elements to copy their content: https://yihui.org/en/2023/09/copy-button/
+(d => {
+  const cfg = d.currentScript?.dataset;
+  d.querySelectorAll(cfg?.selector || 'pre>code').forEach(el => {
+    const btn = d.createElement('span'), cls = btn.classList,
+      c1 = 'copy-success', c2 = 'copy-fail';
+    btn.className = 'copy-button';
+    // temporarily add a class to the button (as a feedback to copy action)
+    function feedback(c) {
+      cls.add(c); setTimeout(() => cls.remove(c), 1000);
+    }
+    btn.onclick = () => navigator.clipboard.writeText(el.innerText).then(
+      () => feedback(c1), () => feedback(c2)
+    );
+    // add the button to <pre> for <code> because <code>'s innerHTML' may be
+    // changed later, e.g., by syntax highlighting libraries
+    const p = (el.tagName === 'CODE' && el?.parentNode.tagName === 'PRE') ? el.parentNode : el;
+    // add the button only if it has not been added
+    p.querySelector('.copy-button') || p.append(btn);
+    getComputedStyle(p).position === 'static' && (p.style.position = 'relative');
+  });
+})(document);

package/js/copy-button.min.js

@@ -0,0 +1 @@
+(e=>{const t=e.currentScript?.dataset;e.querySelectorAll(t?.selector||"pre>code").forEach((t=>{const o=e.createElement("span"),c=o.classList;function a(e){c.add(e),setTimeout((()=>c.remove(e)),1e3)}o.className="copy-button",o.onclick=()=>navigator.clipboard.writeText(t.innerText).then((()=>a("copy-success")),(()=>a("copy-fail")));const n="CODE"===t.tagName&&"PRE"===t?.parentNode.tagName?t.parentNode:t;n.querySelector(".copy-button")||n.append(o),"static"===getComputedStyle(n).position&&(n.style.position="relative")}))})(document);

package/js/fold-details.js

@@ -1,9 +1,9 @@
 // fold elements with <details>: https://yihui.org/en/2023/09/code-folding/
 (d => {
-  const cfg = d.currentScript?.dataset, cls = 'folder';
+  const cfg = d.currentScript?.dataset, cls = 'folder'; let status = !!cfg?.open;
   d.querySelectorAll(cfg?.selector || 'pre>code[class],pre[class]').forEach(el => {
     const s1 = d.createElement('details'), s2 = d.createElement('summary');
-    s1.className = cls; s1.open = cfg?.open;
+    s1.className = cls; s1.open = status;
     s2.innerText = (cfg?.label || 'Details') + (cfg?.tagName ? ` <${el.tagName}>` : '');
     // special case: for <code>, put its parent <pre> inside <details>
     if (el.tagName === 'CODE' && el.parentNode.tagName === 'PRE') el = el.parentNode;
@@ -24,8 +24,9 @@
     p.insertAdjacentElement(cfg.position || 'afterbegin', btn);
   }
   btn.onclick = (e) => {
+    status = !status;
     d.querySelectorAll(`details.${cls}`).forEach(el => {
-      el.toggleAttribute('open');
+      el.open = status;
     });
   };
 })(document);

package/js/fold-details.min.js

@@ -1 +1 @@
-(e=>{const t=e.currentScript?.dataset,a="folder";if(e.querySelectorAll(t?.selector||"pre>code[class],pre[class]").forEach((r=>{const n=e.createElement("details"),l=e.createElement("summary");n.className=a,n.open=t?.open,l.innerText=(t?.label||"Details")+(t?.tagName?` <${r.tagName}>`:""),"CODE"===r.tagName&&"PRE"===r.parentNode.tagName&&(r=r.parentNode),n.append(l),r.before(n),n.append(r)})),!t?.hasOwnProperty("button"))return;const r=e.querySelector(t.parent);let n=e.querySelector(t.button);(n||r)&&(n||(n=e.createElement("button"),n.id="toggle-all",n.innerText=t.buttonLabel||"Toggle Details",r.insertAdjacentElement(t.position||"afterbegin",n)),n.onclick=t=>{e.querySelectorAll(`details.${a}`).forEach((e=>{e.toggleAttribute("open")}))})})(document);
+(e=>{const t=e.currentScript?.dataset,a="folder";let r=!!t?.open;if(e.querySelectorAll(t?.selector||"pre>code[class],pre[class]").forEach((n=>{const l=e.createElement("details"),o=e.createElement("summary");l.className=a,l.open=r,o.innerText=(t?.label||"Details")+(t?.tagName?` <${n.tagName}>`:""),"CODE"===n.tagName&&"PRE"===n.parentNode.tagName&&(n=n.parentNode),l.append(o),n.before(l),l.append(n)})),!t?.hasOwnProperty("button"))return;const n=e.querySelector(t.parent);let l=e.querySelector(t.button);(l||n)&&(l||(l=e.createElement("button"),l.id="toggle-all",l.innerText=t.buttonLabel||"Toggle Details",n.insertAdjacentElement(t.position||"afterbegin",l)),l.onclick=t=>{r=!r,e.querySelectorAll(`details.${a}`).forEach((e=>{e.open=r}))})})(document);

package/js/fullwidth.js

@@ -6,7 +6,7 @@ document.querySelectorAll('pre,table,#TableOfContents').forEach(node => {
   switch (node.tagName) {
     case 'PRE':
       const el = node.firstElementChild;
-      el?.tagName === 'CODE' && el.scrollWidth > el.offsetWidth && fullwidth(el);
+      el?.tagName === 'CODE' && el.scrollWidth > el.offsetWidth && fullwidth(el.parentNode);
       break;
     case 'TABLE':
       const p = node.parentElement;

package/js/fullwidth.min.js

@@ -1 +1 @@
-document.querySelectorAll("pre,table,#TableOfContents").forEach((t=>{function e(t){t.classList.add("fullwidth")}switch(t.tagName){case"PRE":const l=t.firstElementChild;"CODE"===l?.tagName&&l.scrollWidth>l.offsetWidth&&e(l);break;case"TABLE":const a=t.parentElement;a&&a.offsetWidth<t.offsetWidth&&e(t);break;default:t.querySelectorAll("a").forEach((l=>{!t.classList.contains("fullwidth")&&l.getClientRects().length>1&&e(t)}))}}));
+document.querySelectorAll("pre,table,#TableOfContents").forEach((t=>{function e(t){t.classList.add("fullwidth")}switch(t.tagName){case"PRE":const l=t.firstElementChild;"CODE"===l?.tagName&&l.scrollWidth>l.offsetWidth&&e(l.parentNode);break;case"TABLE":const a=t.parentElement;a&&a.offsetWidth<t.offsetWidth&&e(t);break;default:t.querySelectorAll("a").forEach((l=>{!t.classList.contains("fullwidth")&&l.getClientRects().length>1&&e(t)}))}}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xiee/utils",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "Miscellaneous tools and utilities to manipulate HTML pages",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"