@cocreate/print 1.4.0 → 1.6.0

package/CONTRIBUTING.md

@@ -13,7 +13,7 @@ Fork the [project on Github](https://github.com/CoCreate-app/CoCreate-print) and
 ```
 git clone https://github.com/contributor/CoCreate-print.git
 cd CoCreate-print
-git remote add upstream https://github.com/CoCreate-app/CoCreate-print.git
+git remote add upstream https://gitlab.com/cocreatejs/CoCreate-print.git
 ```
 
 ## Create a Topic Branch

package/README.md

@@ -78,6 +78,20 @@ We want this library to be community-driven, and CoCreate led. We need your help
 
 We appreciate your continued support, thank you!
 
+## Print actions
+
+Use `actions="print"` with `print-query` to print selected elements. Without an
+`actions` attribute, `print-query` also works as a standalone click control.
+Repeated initialization does not attach duplicate click handlers.
+
+Printing copies current input, checkbox, textarea, and select values into an
+isolated iframe, loads the page styles and images, and expands scroll containers
+without changing the live view. The `printed` event is emitted from the trigger
+and bubbles after the browser's print dialog closes (`afterprint`); it does not
+indicate that the user actually printed rather than cancelled. Action chains
+continue at that point. Failures emit `printError` and abort the chain. The print
+iframe is removed on completion or failure.
+
 # License
 
 [The MIT License (MIT)](https://github.com/CoCreate-app/CoCreate-print/blob/master/LICENSE)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/print",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "A simple print component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.",
   "keywords": [
     "print",
@@ -22,7 +22,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/CoCreate-app/CoCreate-print.git"
+    "url": "git+https://gitlab.com/cocreatejs/CoCreate-print.git"
   },
   "author": "CoCreate LLC",
   "license": "MIT",
@@ -38,11 +38,11 @@
   "dependencies": {
     "@cocreate/actions": "^1.24.0",
     "@cocreate/element-prototype": "^1.35.0",
-    "@cocreate/observer": "^1.22.0",
-    "@cocreate/utils": "^1.52.0"
+    "@cocreate/observer": "^1.23.0",
+    "@cocreate/utils": "^1.54.0"
   },
   "devDependencies": {
-    "@cocreate/webpack": "^1.8.0"
+    "@cocreate/webpack": "^1.9.0"
   },
   "allowScripts": {
     "@cocreate/actions@1.21.4": true,

package/src/index.js

@@ -1,153 +1,150 @@
-/********************************************************************************
- * Copyright (C) 2020 CoCreate LLC and others.
- *
- *
- * SPDX-License-Identifier: MIT
- ********************************************************************************/
-
-import "@cocreate/element-prototype";
-import { queryElements } from "@cocreate/utils";
-import Actions from "@cocreate/actions";
-import Observer from "@cocreate/observer";
-
-const selector = "[print-query]";
-
-function init(element) {
-	if (!element) {
-		element = document.querySelectorAll(selector);
-		for (let i = 0; i < element.length; i++) {
-			initElement(element[i]);
-		}
-	} else {
-		if (
-			!(element instanceof HTMLCollection) &&
-			!(element instanceof NodeList) &&
-			!Array.isArray(element)
-		) {
-			element = [element];
-		}
-		for (let i = 0; i < element.length; i++) {
-			if (element[i].matches(selector)) {
-				initElement(element[i]);
-			}
-		}
-	}
-}
-
-function initElement(element) {
-	// Add a click event listener to trigger the print action
-	element.addEventListener("click", () => {
-		let actions = element.getAttribute("actions");
-		if (actions && !actions.includes("print")) {
-			queryPrintElement(element);
-		}
-	});
-}
-
-function queryPrintElement(element) {
-	let elements = [];
-	if (element.hasAttribute("print-query")) {
-		elements = queryElements({ element, prefix: "print" });
-	} else {
-		elements = [element];
-	}
-	print(elements);
-}
-
-function print(elements) {
-	if (!elements) return;
-	if (
-		!(elements instanceof HTMLCollection) &&
-		!(elements instanceof NodeList) &&
-		!Array.isArray(elements)
-	) {
-		elements = [elements];
-	}
-
-	let content = "";
-	elements.forEach((target) => {
-		content += target.outerHTML; // Combine all target elements' HTML
-	});
-
-	// Include CSS styles from the current window
-	const styles = Array.from(document.styleSheets)
-		.map((styleSheet) => {
-			try {
-				return Array.from(styleSheet.cssRules)
-					.map((rule) => rule.cssText)
-					.join("");
-			} catch (e) {
-				console.warn("Could not read stylesheet:", styleSheet.href);
-				return ""; // Handle CORS issues
-			}
-		})
-		.join("");
-
-	// Create a hidden iframe for printing
-	const iframe = document.createElement("iframe");
-	iframe.style.position = "absolute";
-	iframe.style.top = "-9999px";
-	iframe.style.left = "-9999px";
-	document.body.appendChild(iframe);
-
-	// Write content to the iframe
-	const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
-	iframeDoc.open();
-	iframeDoc.write(`
-        <html>
-        <head>
-            <title>Print</title>
-            <style>${styles}</style>
-        </head>
-        <body>${content}</body>
-        </html>
-    `);
-	iframeDoc.close();
-
-	// Wait for iframe content to load before triggering print
-	iframe.onload = () => {
-		iframe.contentWindow.print();
-
-		// Remove iframe after printing
-		iframe.parentNode.removeChild(iframe);
-	};
-
-	document.dispatchEvent(
-		new CustomEvent("printed", {
-			detail: { content }
-		})
-	);
-}
-
-init();
-
-Actions.init([
-	{
-		name: "print",
-		endEvent: "printed",
-		callback: (action) => {
-			queryPrintElement(action.element);
-		}
-	}
-]);
-
-Observer.init({
-	name: "CoCreatePrintAddedNodes",
-	types: ["addedNodes"],
-	selector,
-	callback(mutation) {
-		initElement(mutation.target);
-	}
-});
-
-Observer.init({
-	name: "CoCreatePrintObserver",
-	types: ["attributes"],
-	attributeFilter: ["print-query"],
-	selector,
-	callback: function (mutation) {
-		initElement(mutation.target);
-	}
-});
-
-export default { init, print };
+/********************************************************************************
+ * Copyright (C) 2020 CoCreate LLC and others.
+ *
+ *
+ * SPDX-License-Identifier: MIT
+ ********************************************************************************/
+
+import "@cocreate/element-prototype";
+import { queryElements } from "@cocreate/utils";
+import Actions from "@cocreate/actions";
+import Observer from "@cocreate/observer";
+
+const selector = "[print-query]";
+const initialized = new WeakSet();
+
+function init(element) {
+    const elements = !element ? document.querySelectorAll(selector)
+        : element instanceof Element ? [element] : element;
+    for (const target of elements) {
+        if (!target.matches(selector) || initialized.has(target)) continue;
+        initialized.add(target);
+        target.addEventListener("click", () => {
+            if (target.hasAttribute("actions")) return;
+            runPrint({ element: target });
+        });
+    }
+}
+
+function cloneForPrint(target) {
+    const clone = target.cloneNode(true);
+    const originals = [target, ...target.querySelectorAll("*")];
+    const copies = [clone, ...clone.querySelectorAll("*")];
+    originals.forEach((original, index) => {
+        const copy = copies[index];
+        const style = getComputedStyle(original);
+        // Unclip scrollable layouts without showing intentionally hidden content.
+        if (/(auto|scroll|hidden|clip)/.test(`${style.overflowX} ${style.overflowY}`)) {
+            for (const [name, value] of Object.entries({ overflow: "visible", height: "auto", "max-height": "none", "min-height": "0" }))
+                copy.style.setProperty(name, value, "important");
+        }
+        if (style.position === "sticky") copy.style.setProperty("position", "static", "important");
+        if (original.matches("input")) {
+            if (original.type !== "file") copy.setAttribute("value", original.value);
+            copy.toggleAttribute("checked", original.checked);
+            copy.indeterminate = original.indeterminate;
+        } else if (original.matches("textarea")) copy.textContent = original.value;
+        else if (original.matches("option")) copy.toggleAttribute("selected", original.selected);
+        for (const attribute of [...copy.attributes]) {
+            if (attribute.name.startsWith("on")) copy.removeAttribute(attribute.name);
+        }
+    });
+    const style = getComputedStyle(target);
+    for (const property of style) {
+        if (property.startsWith("--")) clone.style.setProperty(property, style.getPropertyValue(property));
+    }
+    clone.querySelectorAll("script, iframe, object, embed, .simplebar-track, .simplebar-placeholder").forEach(node => node.remove());
+    return clone;
+}
+
+async function print(elements) {
+    if (!elements) return;
+    const targets = elements instanceof Element ? [elements] : Array.from(elements);
+    if (!targets.length) return;
+    const iframe = document.createElement("iframe");
+    iframe.title = "Print preview";
+    iframe.setAttribute("aria-hidden", "true");
+    iframe.style.cssText = "position:fixed;left:-10000px;top:0;width:1000px;height:800px;border:0";
+    document.body.appendChild(iframe);
+    const frame = iframe.contentWindow;
+    const doc = iframe.contentDocument;
+    try {
+        doc.open();
+        doc.write("<!doctype html><html><head><title>Print</title></head><body></body></html>");
+        doc.close();
+        for (const attribute of document.documentElement.attributes)
+            doc.documentElement.setAttribute(attribute.name, attribute.value);
+        for (const attribute of document.body.attributes)
+            doc.body.setAttribute(attribute.name, attribute.value);
+        const base = doc.createElement("base");
+        base.href = document.baseURI;
+        doc.head.appendChild(base);
+        const loading = [];
+        for (const sheet of document.querySelectorAll('style, link[rel="stylesheet"]')) {
+            const copy = sheet.cloneNode(true);
+            if (copy.tagName === "LINK") {
+                loading.push(new Promise(resolve => {
+                    copy.addEventListener("load", resolve, { once: true });
+                    copy.addEventListener("error", resolve, { once: true });
+                }));
+            }
+            doc.head.appendChild(copy);
+        }
+        const styles = doc.createElement("style");
+        styles.textContent = `
+            html, body { height: auto !important; overflow: visible !important; }
+            .simplebar-wrapper, .simplebar-mask, .simplebar-offset,
+            .simplebar-content-wrapper, .simplebar-content {
+                position: static !important; overflow: visible !important;
+                height: auto !important; max-height: none !important;
+                width: auto !important; margin: 0 !important; transform: none !important;
+            }
+            thead { display: table-header-group; }
+            tr, img { break-inside: avoid; }
+        `;
+        doc.head.appendChild(styles);
+        for (const target of targets) doc.body.appendChild(doc.adoptNode(cloneForPrint(target)));
+        for (const img of doc.images) {
+            img.loading = "eager";
+            if (!img.complete) loading.push(new Promise(resolve => {
+                img.addEventListener("load", resolve, { once: true });
+                img.addEventListener("error", resolve, { once: true });
+            }));
+        }
+        await Promise.all(loading);
+        if (doc.fonts?.ready) await doc.fonts.ready;
+        await new Promise(resolve => frame.requestAnimationFrame(() => frame.requestAnimationFrame(resolve)));
+        await new Promise((resolve, reject) => {
+            frame.addEventListener("afterprint", resolve, { once: true });
+            try { frame.focus(); frame.print(); } catch (error) { reject(error); }
+        });
+    } finally {
+        iframe.remove();
+    }
+}
+
+async function runPrint(action) {
+    try {
+        const elements = action.element.hasAttribute("print-query")
+            ? queryElements({ element: action.element, prefix: "print" }) : [action.element];
+        await print(elements);
+        if (action.end) action.end();
+        else action.element.dispatchEvent(new CustomEvent("printed", { bubbles: true }));
+    } catch (error) {
+        action.abort?.();
+        action.element.dispatchEvent(new CustomEvent("printError", { bubbles: true, detail: { error } }));
+    }
+}
+
+init();
+Actions.init([{ name: "print", endEvent: "printed", callback: runPrint }]);
+Observer.init({
+    name: "CoCreatePrintAddedNodes", types: ["addedNodes"], selector,
+    callback: mutation => init(mutation.target)
+});
+Observer.init({
+    name: "CoCreatePrintObserver", types: ["attributes"], attributeFilter: ["print-query"], selector,
+    callback: mutation => init(mutation.target)
+});
+
+export default { init, print };