diff --git a/assets/js/admin-script.js b/assets/js/admin-script.js index 31f1fde8e..d0b6229b7 100644 --- a/assets/js/admin-script.js +++ b/assets/js/admin-script.js @@ -105,487 +105,4 @@ jQuery( function( $ ) { 'delay': 200 } ); - //----------> Preview <----------// - // objects - let $previewWrapper = $( '#wpo-wcpdf-preview-wrapper' ); - 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, previewOutputFormat, previewNonce, previewSettingsFormData, previewTimeout, previewSearchTimeout, previousWindowWidth; - - function loadPreviewData() { - previewOrderId = $previewOrderIdInput.val(); - previewDocumentType = $previewDocumentTypeInput.val(); - previewOutputFormat = $previewOutputFormatInput.val(); - previewNonce = $previewNonceInput.val(); - previewSettingsFormData = $previewSettingsForm.serialize(); - } - - function resetDocumentType() { - $previewDocumentTypeInput.val( $previewDocumentTypeInput.data( 'default' ) ).trigger( 'change' ); - } - - function resetOrderId() { - $previewOrderIdInput.val( '' ).trigger( 'change' ); - } - - resetDocumentType(); // force document type reset - resetOrderId(); // force order ID reset - loadPreviewData(); // load preview data - - previousWindowWidth = $( window ).width(); - determinePreviewStates(); // determine preview states based on screen size - - $( window ).on( 'resize', determinePreviewStates ); - - function determinePreviewStates() { - // Check if preview states are allowed to change based on screen size - if ( $previewWrapper.attr( 'data-preview-states-lock') == false ) { - - // On small screens: 2 preview states and close preview - if ( $(this).width() <= 1200 && ( previousWindowWidth > 1200 || $(this).width() == previousWindowWidth ) ) { - if ( $previewWrapper.attr( 'data-preview-state') == 'full' ) { - $previewWrapper.find( '.preview-document' ).show(); - $previewWrapper.find( '.sidebar' ).hide(); - $previewWrapper.find( '.slide-left' ).hide(); - $previewWrapper.find( '.slide-right' ).show(); - $previewWrapper.attr( 'data-preview-states', 2 ); - $previewWrapper.attr( 'data-preview-state', 'full' ); - $previewWrapper.attr( 'data-from-preview-state', '' ); - } else { - $previewWrapper.find( '.preview-document' ).hide(); - $previewWrapper.find( '.sidebar' ).show(); - $previewWrapper.find( '.slide-left' ).show(); - $previewWrapper.find( '.slide-right' ).hide(); - $previewWrapper.attr( 'data-preview-states', 2 ); - $previewWrapper.attr( 'data-preview-state', 'closed' ); - $previewWrapper.attr( 'data-from-preview-state', '' ); - } - - // On larger screens: 3 preview states and show settings as sidebar - } else if ( $(this).width() > 1200 && ( previousWindowWidth <= 1200 || $(this).width() == previousWindowWidth ) ) { - if ( $previewWrapper.attr( 'data-preview-state') == 'full' ) { - $previewWrapper.find( '.preview-document' ).show(); - $previewWrapper.find( '.sidebar' ).hide(); - $previewWrapper.find( '.slide-left' ).hide(); - $previewWrapper.find( '.slide-right' ).show(); - $previewWrapper.attr( 'data-preview-states', 3 ); - $previewWrapper.attr( 'data-preview-state', 'full' ); - $previewWrapper.attr( 'data-from-preview-state', 'sidebar' ); - $previewWrapper.addClass( 'static' ); - } else if ( $previewWrapper.attr( 'data-preview-state') == 'closed' && $(this).width() !== previousWindowWidth ) { - $previewWrapper.find( '.preview-document' ).hide(); - $previewWrapper.find( '.sidebar' ).show(); - $previewWrapper.find( '.slide-left' ).show(); - $previewWrapper.find( '.slide-right' ).hide(); - $previewWrapper.attr( 'data-preview-states', 3 ); - $previewWrapper.attr( 'data-preview-state', 'closed' ); - $previewWrapper.attr( 'data-from-preview-state', '' ); - $previewWrapper.removeClass( 'static' ); - } else { - $previewWrapper.find( '.preview-document, .sidebar' ).show(); - $previewWrapper.find( '.slide-left, .slide-right' ).show(); - $previewWrapper.attr( 'data-preview-states', 3 ); - $previewWrapper.attr( 'data-preview-state', 'sidebar' ); - $previewWrapper.attr( 'data-from-preview-state', '' ); - $previewWrapper.removeClass( 'static' ); - } - } - } - previousWindowWidth = $(this).width(); - } - - $( '.slide-left' ).on( 'click', function() { - let previewStates = $previewWrapper.attr( 'data-preview-states' ); - let previewState = $previewWrapper.attr( 'data-preview-state' ); - - $previewWrapper.find( '.preview-data-wrapper ul' ).removeClass( 'active' ); - - if ( previewStates == 3 ) { - if ( previewState == 'closed' ) { - $previewWrapper.find( '.preview-document' ).show(); - $previewWrapper.find( '.slide-right' ).show(); - $previewWrapper.attr( 'data-preview-state', 'sidebar' ); - $previewWrapper.attr( 'data-from-preview-state', 'closed' ); - } else { - $previewWrapper.find( '.slide-left' ).hide(); - $previewWrapper.find( '.sidebar' ).delay(300).hide(0); - $previewWrapper.attr( 'data-preview-state', 'full' ); - $previewWrapper.attr( 'data-from-preview-state', 'sidebar' ); - makePreviewScrollable( $previewWrapper ); - } - } else { - $previewWrapper.find( '.preview-document' ).show(); - $previewWrapper.find( '.slide-left' ).hide(); - $previewWrapper.find( '.slide-right' ).show(); - $previewWrapper.attr( 'data-preview-state', 'full' ); - $previewWrapper.attr( 'data-from-preview-state', 'closed' ); - makePreviewScrollable( $previewWrapper ); - } - } ); - - $( '.slide-right' ).on( 'click', function() { - let previewStates = $previewWrapper.attr( 'data-preview-states' ); - let previewState = $previewWrapper.attr( 'data-preview-state' ); - - $previewWrapper.find( '.preview-data-wrapper ul' ).removeClass( 'active' ); - - if ( previewStates == 3 ) { - if ( previewState == 'full' ) { - $previewWrapper.find( '.slide-left' ).delay(400).show(0); - $previewWrapper.find( '.sidebar' ).show(); - $previewWrapper.attr( 'data-preview-state', 'sidebar' ); - $previewWrapper.attr( 'data-from-preview-state', 'full' ); - } else { - $previewWrapper.find( '.preview-document' ).hide(300); - $previewWrapper.find( '.slide-right' ).hide(); - $previewWrapper.attr( 'data-preview-state', 'closed' ); - $previewWrapper.attr( 'data-from-preview-state', 'sidebar' ); - } - } else { - $previewWrapper.find( '.preview-document' ).hide(300); - $previewWrapper.find( '.slide-left' ).show(); - $previewWrapper.find( '.slide-right' ).hide(); - $previewWrapper.attr( 'data-preview-state', 'closed' ); - $previewWrapper.attr( 'data-from-preview-state', 'full' ); - } - $previewWrapper.removeClass( 'static' ); - } ); - - function makePreviewScrollable( wrapper ) { - window.scrollTo( 0, 0 ); - let $wrapper = wrapper; - // Make preview scrollable after panel animation is complete - setTimeout( function() { - $wrapper.addClass( 'static' ); - }, 300 ); - } - - $( '.preview-document .preview-data p' ).on( 'click', function() { - let $previewData = $( this ).closest( '.preview-data' ); - $previewData.siblings( '.preview-data' ).find( 'ul' ).removeClass( 'active' ); - $previewData.find( 'ul' ).toggleClass( 'active' ); - } ); - - $( '.preview-document .preview-data ul > li' ).on( 'click', function() { - let $previewData = $( this ).closest( '.preview-data' ); - $previewData.find( 'ul' ).toggleClass( 'active' ); - if ( $( this ).hasClass( 'order-search' ) ) { - $previewData.find( 'p.last-order' ).hide(); - $previewData.find( 'input[name="preview-order-search"]' ).addClass( 'active' ); - $previewData.find( 'p.order-search' ).show().find( '.order-search-label' ).text( $( this ).text() ); - } else { - $previewData.find( 'p.last-order' ).show(); - $previewData.find( 'p.order-search' ).hide(); - $previewData.find( 'input[name="preview-order-search"]' ).removeClass( 'active' ).val( '' ); - $previewData.find( '#preview-order-search-results' ).hide(); - $previewData.find( 'img.preview-order-search-clear' ).hide(); // remove the clear button - resetOrderId() // force order ID reset - triggerPreview(); // trigger preview - } - } ); - - // Preview on page load - triggerPreview(); - - // Custom trigger to signify settings have changed (will show save button and refresh preview) - $( document ).on( 'wpo-wcpdf-settings-changed', function( event, delay ) { - showSaveBtn(); - triggerPreview( delay ); - } ); - - // Custom trigger to refresh preview - $( document ).on( 'wpo-wcpdf-refresh-preview wpo_wcpdf_refresh_preview', function( event, delay ) { - triggerPreview( delay ); - } ); - - // Preview on user click in search result - $( document ).on( 'click', '#preview-order-search-results a', function( event ) { - event.preventDefault(); - $( '.preview-document .order-search-label').text( '#' + $( this ).data( 'order_id' ) ); - $previewOrderIdInput.val( $( this ).data( 'order_id' ) ).trigger( 'change' ); - $( this ).closest( 'div' ).hide(); // hide results div - $( this ).closest( 'div' ).children( 'a' ).remove(); // remove all results - triggerPreview(); - } ); - - // Check for settings change - $( document ).on( 'keyup paste', '#wpo-wcpdf-settings input, #wpo-wcpdf-settings textarea', settingsChanged ); - $( document ).on( 'change', '#wpo-wcpdf-settings input[type="checkbox"], #wpo-wcpdf-settings input[type="radio"], #wpo-wcpdf-settings select', function( event ) { - if ( ! event.isTrigger ) { // exclude programmatic triggers that aren't actually changing anything - settingsChanged( event ); - } - }); - $( document ).on( 'select2:select select2:unselect', '#wpo-wcpdf-settings select.wc-enhanced-select', settingsChanged ); - $( document.body ).on( 'wpo-wcpdf-media-upload-setting-updated', settingsChanged ); - $( document ).on( 'click', '.wpo_remove_image_button, #wpo-wcpdf-settings .remove-requirement', settingsChanged ); - - function settingsChanged( event, previewDelay ) { - - // Show secondary save button - showSaveBtn(); - - // Check if preview needs to reload and with what delay - let $element = $( event.target ); - - if ( ! settingIsExcludedForPreview( $element.attr('name') ) ) { - - if ( $element.hasClass( 'remove-requirement' ) || $element.attr('id') == 'disable_for' ) { - return; - } - - if ( jQuery.inArray( event.type, ['keyup', 'paste'] ) !== -1 ) { - if ( $element.is( 'input[type="checkbox"], select' ) ) { - return; - } else { - previewDelay = event.type == 'keyup' ? 1000 : 0; - } - } - - triggerPreview( previewDelay ); - } - } - - function showSaveBtn( event ) { - $('.preview-data-wrapper .save-settings p').css('margin-right', '0'); - } - - // Submit settings form when clicking on secondary save button - $( document.body ).on( 'click', '.preview-data-wrapper .save-settings p input', function( event ) { - $( '#wpo-wcpdf-settings input#submit' ).trigger( 'click' ); - } ); - - // Trigger the Preview - function triggerPreview( timeoutDuration ) { - timeoutDuration = typeof timeoutDuration == 'number' ? timeoutDuration : 0; - - loadPreviewData(); - clearTimeout( previewTimeout ); - previewTimeout = setTimeout( function() { ajaxLoadPreview() }, timeoutDuration ); - } - - // Settings excluded from trigger the Preview - function settingIsExcludedForPreview( settingName ) { - let excluded = false; - if ( ! settingName ) { - return excluded; - } - let nameKey = settingName.includes( '[' ) ? settingName.match(/\[(.*?)\]/)[1] : settingName; - if ( $.inArray( nameKey, wpo_wcpdf_admin.preview_excluded_settings ) !== -1 ) { - excluded = true; - } - return excluded; - } - - // Clear preview order search results/input - $( document ).on( 'click', 'img.preview-order-search-clear', function( event ) { - event.preventDefault(); - $( this ).closest( 'div' ).find( 'input#preview-order-search' ).val( '' ); - $( this ).closest( '.preview-data' ).find( '#preview-order-search-results' ).children( 'a' ).remove(); // remove previous results - $( this ).closest( '.preview-data' ).find( '#preview-order-search-results' ).children( '.error' ).remove(); // remove previous errors - $( this ).closest( '.preview-data' ).find( '#preview-order-search-results' ).hide(); - $( this ).hide(); - } ); - - // Trigger preview on document selection and change the document type input with the new value - $( '#wpo-wcpdf-preview-wrapper ul.preview-data-option-list li' ).on( 'click', function() { - let inputName = $( this ).closest( 'ul' ).data( 'input-name' ); - let $input = $( '#wpo-wcpdf-preview-wrapper :input[name='+inputName+']'); - $input.val( $( this ).data( 'value' ) ).trigger( 'change' ); - } ); - - // Detect document type input changes and apply the same document title to the document selector - $previewDocumentTypeInput.on( 'change', function() { - let inputValue = $( this ).val(); - if ( inputValue.length ) { - let inputName = $( this ).attr( 'name' ); - let $ul = $( '#wpo-wcpdf-preview-wrapper ul.preview-data-option-list[data-input-name='+inputName+']' ); - let $li = $ul.find( 'li[data-value='+inputValue+']' ); - $ul.parent().find( '.current-label' ).text( $li.text() ); - triggerPreview(); - } - } ).trigger( 'change' ); - - // Detect order ID input changes - $previewOrderIdInput.on( 'change', function() { - triggerPreview(); - } ).trigger( 'change' ); - - // Load the Preview with AJAX - function ajaxLoadPreview() { - let worker = wpo_wcpdf_admin.pdfjs_worker; - let canvasId = 'preview-canvas'; - let data = { - action: 'wpo_wcpdf_preview', - security: previewNonce, - order_id: previewOrderId, - document_type: previewDocumentType, - output_format: previewOutputFormat, - data: previewSettingsFormData, - }; - - // remove previous error notices - $preview.children( '.notice' ).remove(); - - // block ui - $preview.block( { - message: null, - overlayCSS: { - background: '#fff', - opacity: 0.6 - } - } ); - - previewXhr = $.ajax( { - type: 'POST', - url: wpo_wcpdf_admin.ajaxurl, - data: data, - beforeSend: function( jqXHR, settings ) { - if ( previewXhr != null ) { - previewXhr.abort(); - } - }, - success: function( response, textStatus, jqXHR ) { - if ( response.data.error ) { - $( '#'+canvasId ).remove(); - $preview.append( '

'+response.data.error+'

' ); - } else if ( response.data.preview_data && response.data.output_format ) { - $( '#'+canvasId ).remove(); - - switch ( response.data.output_format ) { - default: - case 'pdf': - $preview.append( '' ); - renderPdf( worker, canvasId, response.data.preview_data ); - break; - case 'ubl': - let xml = response.data.preview_data; - let xml_escaped = xml.replace( /&/g,'&' ).replace( //g,'>' ).replace( / /g, ' ' ).replace( /\n/g,'
' ); - $preview.html( '
'+xml_escaped+'
' ); - break; - } - } - - $preview.unblock(); - }, - error: function( jqXHR, textStatus, errorThrown ) { - if ( textStatus != 'abort' ) { - let errorMessage = jqXHR.status + ': ' + jqXHR.statusText - $( '#'+canvasId ).remove(); - $preview.append( '

'+errorMessage+'

' ); - $preview.unblock(); - } - }, - } ); - } - - // pdf_js (third party library code) - function renderPdf( worker, canvasId, pdfData ) { - // atob() is used to convert base64 encoded PDF to binary-like data. - // (See also https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding.) - pdfData = window.atob( pdfData ); - - // Loaded via