New: adds UBL as additional output format for documents

assets/css/order-styles.css

@@ -26,14 +26,22 @@
 	fill: #2aad2a;
 }
 
+.type-shop_order .column-wc_actions a.button.wpo_wcpdf.ubl > svg.icon-ubl,
+.woocommerce_page_wc-orders .column-wc_actions a.button.wpo_wcpdf.ubl > svg.icon-ubl {
+	left: auto;
+	right: 2px;
+	fill: black;
+}
+
 .type-shop_order .column-wc_actions a.button.wpo_wcpdf.printed > svg.icon-printed,
 .woocommerce_page_wc-orders .column-wc_actions a.button.wpo_wcpdf.printed > svg.icon-printed {
 	left: 2px;
 	right: auto;
 	fill: #51266b;
 }
 
-.wpo_wcpdf-actions a.button.exists > svg {
+.wpo_wcpdf-actions a.button.exists > svg,
+.wpo_wcpdf-ubl-actions a.button.exists > svg {
 	width: 14px;
 	height: 14px;
 	line-height: 30px;

assets/css/settings-styles.css

@@ -150,7 +150,6 @@ table.wcpdf_documents_settings_list td.title {
 }
 
 .wcpdf_document_settings_sections {
-	margin-bottom: 40px;
 	position: relative;
 }
 
@@ -221,6 +220,10 @@ table.wcpdf_documents_settings_list td.title {
 	color: #222;
 }
 
+.wcpdf_document_settings_document_output_formats {
+	margin-bottom: 30px;
+}
+
 .edit-next-number {
 	opacity:0.5;
 }
@@ -309,18 +312,18 @@ body.woocommerce_page_wpo_wcpdf_options_page {
 	max-width: none;
 }
 
-	#wpo-wcpdf-preview-wrapper .sidebar .form-table,
-	#wpo-wcpdf-preview-wrapper .sidebar .form-table > tr,
-	#wpo-wcpdf-preview-wrapper .sidebar .form-table > tr > th,
-	#wpo-wcpdf-preview-wrapper .sidebar .form-table > tr > td,
-	#wpo-wcpdf-preview-wrapper .sidebar .form-table > tbody,
-	#wpo-wcpdf-preview-wrapper .sidebar .form-table > tbody > tr,
-	#wpo-wcpdf-preview-wrapper .sidebar .form-table > tbody > tr > th,
-	#wpo-wcpdf-preview-wrapper .sidebar .form-table > tbody > tr > td {
-		display: block;
-		width: 100%;
-		padding: 0;
-	}
+#wpo-wcpdf-preview-wrapper .sidebar .form-table,
+#wpo-wcpdf-preview-wrapper .sidebar .form-table > tr,
+#wpo-wcpdf-preview-wrapper .sidebar .form-table > tr > th,
+#wpo-wcpdf-preview-wrapper .sidebar .form-table > tr > td,
+#wpo-wcpdf-preview-wrapper .sidebar .form-table > tbody,
+#wpo-wcpdf-preview-wrapper .sidebar .form-table > tbody > tr,
+#wpo-wcpdf-preview-wrapper .sidebar .form-table > tbody > tr > th,
+#wpo-wcpdf-preview-wrapper .sidebar .form-table > tbody > tr > td {
+	display: block;
+	width: 100%;
+	padding: 0;
+}
 
 #wpo-wcpdf-preview-wrapper .sidebar .form-table > tr > th,
 #wpo-wcpdf-preview-wrapper .sidebar .form-table > tbody > tr > th {
@@ -504,6 +507,15 @@ body.woocommerce_page_wpo_wcpdf_options_page {
 	padding-right: 5%;
 }
 
+.preview-document .preview > #preview-ubl {
+	width: 100%;
+	height: 100%;
+	overflow-wrap: anywhere;
+	background-color: #222;
+	color: white;
+	padding: 2em;
+}
+
 .preview-document .preview > #preview-canvas {
 	display: block;
 	max-width: 800px;
@@ -691,6 +703,7 @@ body.woocommerce_page_wpo_wcpdf_options_page {
 	-webkit-box-shadow: 0 0 25px -10px rgba(0,0,0,0.2);
 	padding: 20px 0;
 	background-color: white;
+	z-index: 99;
 }
 
 .preview-document .preview-data #preview-order-search-results a {
@@ -867,6 +880,18 @@ body.woocommerce_page_wpo_wcpdf_options_page {
 	width: 100%!important;
 }
 
+.wcpdf_ubl_settings_sections {
+	margin-bottom: 4em;
+}
+
+sup.wcpdf_beta {
+	background-color: #51266b;
+	color: white;
+	font-size: 7pt;
+	padding: 1px 2px;
+	border-radius: 2px;
+}
+
 @media screen and (min-width: 1920px) {
 	.preview-document .preview > #preview-canvas {
 		max-width: 900px;

assets/js/admin-script.js

@@ -109,16 +109,18 @@ jQuery( function( $ ) {
 	let $preview                  = $( '#wpo-wcpdf-preview-wrapper .preview' );
 	let $previewOrderIdInput      = $( '#wpo-wcpdf-preview-wrapper input[name="order_id"]' );
 	let $previewDocumentTypeInput = $( '#wpo-wcpdf-preview-wrapper input[name="document_type"]' );
+	let $previewOutputFormatInput = $( '#wpo-wcpdf-preview-wrapper input[name="output_format"]' );
 	let $previewNonceInput        = $( '#wpo-wcpdf-preview-wrapper input[name="nonce"]' );
 	let $previewSettingsForm      = $( '#wpo-wcpdf-settings' );
 	let previewXhr                = null;
 
 	// variables
-	let previewOrderId, previewDocumentType, previewNonce, previewSettingsFormData, previewTimeout, previewSearchTimeout, previousWindowWidth;
+	let previewOrderId, previewDocumentType, previewOutputFormat, previewNonce, previewSettingsFormData, previewTimeout, previewSearchTimeout, previousWindowWidth;
 
 	function loadPreviewData() {
 		previewOrderId          = $previewOrderIdInput.val();
 		previewDocumentType     = $previewDocumentTypeInput.val();
+		previewOutputFormat     = $previewOutputFormatInput.val();
 		previewNonce            = $previewNonceInput.val();
 		previewSettingsFormData = $previewSettingsForm.serialize();
 	}
@@ -424,6 +426,7 @@ jQuery( function( $ ) {
 			security:      previewNonce,
 			order_id:      previewOrderId,
 			document_type: previewDocumentType,
+			output_format: previewOutputFormat,
 			data:          previewSettingsFormData,
 		};
 
@@ -452,10 +455,21 @@ jQuery( function( $ ) {
 				if ( response.data.error ) {
 					$( '#'+canvasId ).remove();
 					$preview.append( '<div class="notice notice-error inline"><p>'+response.data.error+'</p></div>' );
-				} else if ( response.data.pdf_data ) {
+				} else if ( response.data.preview_data && response.data.output_format ) {
 					$( '#'+canvasId ).remove();
-					$preview.append( '<canvas id="'+canvasId+'" style="width:100%;"></canvas>' );
-					renderPdf( worker, canvasId, response.data.pdf_data );
+
+					switch ( response.data.output_format ) {
+						default:
+						case 'pdf':
+							$preview.append( '<canvas id="'+canvasId+'" style="width:100%;"></canvas>' );
+							renderPdf( worker, canvasId, response.data.preview_data );
+							break;
+						case 'ubl':
+							let xml         = response.data.preview_data;
+							let xml_escaped = xml.replace( /&/g,'&amp;' ).replace( /</g,'&lt;' ).replace( />/g,'&gt;' ).replace( / /g, '&nbsp;' ).replace( /\n/g,'<br />' );
+							$preview.html( '<div id="preview-ubl">'+xml_escaped+'</div>' );
+							break;
+					}
 				}
 
 				$preview.unblock();