From e365db6aed983a8b62149ae3d3cad2ec5b15f688 Mon Sep 17 00:00:00 2001
From: Marinela Levak <marinela_levak@hotmail.com>
Date: Wed, 6 May 2020 10:54:03 +0200
Subject: [PATCH] Ensure that JavaScript functions are defined before they are
 used

when plugin was installed on several web-shops, on some of them sometimes the image wasn't properly displayed (empty parts of image weren't cropped) and the button for downloading payment slip image was not working. That was caused since image-cropping function definition was defined after the event handler that triggers it.
---
 src/Wooplatnica.php | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/Wooplatnica.php b/src/Wooplatnica.php
index c404a6f..f345b5c 100644
--- a/src/Wooplatnica.php
+++ b/src/Wooplatnica.php
@@ -88,16 +88,8 @@ private function display_payment_slip($order, $is_for_sending) {
 
             $payment_slip_image_data_uri = "data:image/$image_type;base64," . base64_encode($payment_slip_blob);
             echo <<< EOS
-            <div id="payment-slip-image" style="overflow: hidden">
-                <div style="height: 100%">
-                    <div>
-                        <img src="$payment_slip_image_data_uri" alt="$img_element_alt" onload="cropPaymentSlipImage(this)"/>
-                    </div>
-                </div>
-            </div>
-            <button type="button" id="download-payment-slip" style="margin-top: 5px;">$download_button_text</button>
-            <script type="text/javascript">
-                function cropPaymentSlipImage(imgElem) {
+			<script type="text/javascript">
+			    function cropPaymentSlipImage(imgElem) {
                     if (imgElem.src !== '$payment_slip_image_data_uri') {     // instructions within 'else' block should be executed when the image of the payment slip is loaded and as this method is called on the load event of 'img' element, it seems that image should be loaded at the point when this method is performed. However, that's not the case when the images are loaded lazily (e.g. by WP Rocket's LazyLoad plugin) in Microsoft Edge (not in any Internet Explorer nor in Chromium-based Microsoft Edge), therefore it is checked whether the image source of 'img' HTML element is equal to the data URI of the image with the generated payment slip
                         setTimeout(function() {
                             cropPaymentSlipImage(imgElem);
@@ -115,7 +107,16 @@ function cropPaymentSlipImage(imgElem) {
                         divParent.style.right = '$payment_slip_image_crop_right_length';
                     }
                 }
-
+			</script>
+            <div id="payment-slip-image" style="overflow: hidden">
+                <div style="height: 100%">
+                    <div>
+                        <img src="$payment_slip_image_data_uri" alt="$img_element_alt" onload="cropPaymentSlipImage(this)"/>
+                    </div>
+                </div>
+            </div>
+            <button type="button" id="download-payment-slip" style="margin-top: 5px;">$download_button_text</button>
+            <script type="text/javascript">
                 var fileName = '$file_name';
                 var imageType = '$image_type';