@cocreate/print 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.0.2](https://github.com/CoCreate-app/CoCreate-print/compare/v1.0.1...v1.0.2) (2024-12-14)
+
+
+### Bug Fixes
+
+* dispatch printed event ([1acdb66](https://github.com/CoCreate-app/CoCreate-print/commit/1acdb66d9f7988fd5494a0f035c5227e1ba7d831))
+
+## [1.0.1](https://github.com/CoCreate-app/CoCreate-print/compare/v1.0.0...v1.0.1) (2024-12-14)
+
+
+### Bug Fixes
+
+* use iframe to show print dialog only ([a6e3a6d](https://github.com/CoCreate-app/CoCreate-print/commit/a6e3a6d9526654ba64d0c5d89b76701dde352bec))
+
 # 1.0.0 (2024-12-14)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/print",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A simple print component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.",
   "keywords": [
     "print",

package/src/index.js

@@ -40,12 +40,12 @@ function initElement(element) {
 	element.addEventListener("click", () => {
 		let actions = element.getAttribute("actions");
 		if (actions && !actions.includes("print")) {
-			qeueryPrintElement(element);
+			queryPrintElement(element);
 		}
 	});
 }
 
-function qeueryPrintElement(element) {
+function queryPrintElement(element) {
 	let elements = queryElements({ element, prefix: "print" });
 	if (elements === false) {
 		elements = [element];
@@ -53,18 +53,18 @@ function qeueryPrintElement(element) {
 	print(elements);
 }
 
-function print(element) {
-	if (element) return;
+function print(elements) {
+	if (!elements) return;
 	if (
-		!(element instanceof HTMLCollection) &&
-		!(element instanceof NodeList) &&
-		!Array.isArray(element)
+		!(elements instanceof HTMLCollection) &&
+		!(elements instanceof NodeList) &&
+		!Array.isArray(elements)
 	) {
-		element = [element];
+		elements = [elements];
 	}
 
 	let content = "";
-	element.forEach((target) => {
+	elements.forEach((target) => {
 		content += target.outerHTML; // Combine all target elements' HTML
 	});
 
@@ -82,9 +82,17 @@ function print(element) {
 		})
 		.join("");
 
-	// Open a new window for printing
-	const printWindow = window.open("", "", "width=800,height=600");
-	printWindow.document.write(`
+	// 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>
@@ -93,11 +101,21 @@ function print(element) {
         <body>${content}</body>
         </html>
     `);
-	printWindow.document.close();
-	printWindow.print();
+	iframeDoc.close();
+
+	// Wait for iframe content to load before triggering print
+	iframe.onload = () => {
+		iframe.contentWindow.print();
 
-	// Trigger the "printed" event
-	// action.end();
+		// Remove iframe after printing
+		iframe.parentNode.removeChild(iframe);
+	};
+
+	document.dispatchEvent(
+		new CustomEvent("printed", {
+			detail: { content }
+		})
+	);
 }
 
 init();
@@ -107,7 +125,7 @@ Actions.init([
 		name: "print",
 		endEvent: "printed",
 		callback: (action) => {
-			print(action);
+			queryPrintElement(action.element);
 		}
 	}
 ]);