From 60226d0636c32c0bf52c6d3048f6536bef968384 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Wed, 2 Mar 2022 16:12:05 +0000
Subject: [PATCH] Bug 30223: Move book cover image upload JS to a separate file

This patch moves most of the JavaScript from upload-images.tt into a
separate file, upload-images.js. Functionality should be unchanged.

To test, apply the patch and go to Tools  -> Upload local cover image.

Test all the things:
 - Drag-and-drop upload
 - Click-to-browse upload;
 - Deleting existing images
 - Uploading a zip file
---
 .../prog/en/modules/tools/upload-images.tt    | 227 +----------------
 .../intranet-tmpl/prog/js/upload-images.js    | 228 ++++++++++++++++++
 2 files changed, 230 insertions(+), 225 deletions(-)
 create mode 100644 koha-tmpl/intranet-tmpl/prog/js/upload-images.js

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/upload-images.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/upload-images.tt
index 14bba1240b..1f9e697009 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/upload-images.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/upload-images.tt
@@ -309,232 +309,9 @@
         var interface = "[% interface | html %]";
         var theme = "[% theme | html %]";
         var biblionumber = "[% biblionumber | html %]";
-        $(document).ready(function(){
-            $("html").on("drop", function(e) {
-                e.preventDefault();
-                e.stopPropagation();
-            });
-
-            $("#zipfile").click(function(){
-                $("biblionumber_entry").hide();
-            });
-
-            $("#image").click(function(){
-                $("#biblionumber_entry").show();
-            });
-
-            $("#uploadfile").validate({
-                submitHandler: function(form) {
-                    StartUpload();
-                    return false;
-                }
-            });
-
-            $()
-
-            $("#filedrag").on("click", ".cancel_image", function(){
-                $("#click_to_select").show();
-                $("#messages").html("");
-                $("#fileToUpload").prop( "disabled", false );
-                $("#process_images, #fileuploadstatus").hide();
-                return false;
-            }).on("click", ".save_image", function(e){
-                e.preventDefault();
-                $("#processfile").submit();
-            });
-
-            $("html").on("drop", function(e) {
-                /* Prevent the default browser action when image is dropped */
-                /* i.e. don't navigate to a view of the local image */
-                e.preventDefault();
-                e.stopPropagation();
-            });
-
-            $('#filedrag').on('dragenter dragover dragleave', function (e) {
-                /* Handle various drag and drop events in "Drop files" area */
-                /* If event type is "dragover," add the "hover" class */
-                /* otherwise set no class name */
-                e.stopPropagation();
-                e.preventDefault();
-                e.target.className = (e.type == "dragover" ? "hover" : "");
-            });
-
-            $("#filedrag").click(function(){
-                /* Capture a click inside the drag and drop area */
-                /* Trigger the <input type="file"> action */
-                $("#fileToUpload").click();
-            });
-
-            // Drop
-            $('#filedrag').on('drop', function (e) {
-                e.stopPropagation();
-                e.preventDefault();
-                prepUpLoad(e);
-            });
-
-            // file selected
-            $("#fileToUpload").change(function(){
-                prepUpLoad();
-            });
-
-            $('.thumbnails .remove').on("click", function(e) {
-                e.preventDefault();
-                var result = confirm(_("Are you sure you want to delete this cover image?"));
-                var imagenumber = $(this).data("coverimg");
-                if ( result == true ) {
-                    removeLocalImage(imagenumber);
-                }
-            });
-        });
-
-        function prepUpLoad( event ){
-            $("#click_to_select,#upload_results").hide();
-            $("#messages").html("");
-            if( event ){
-                var file = event.originalEvent.dataTransfer.files[0];
-            } else {
-                var file = $('#fileToUpload')[0].files[0];
-            }
-
-            $("#fileuploadstatus, #upload_options").show();
-            var fd = new FormData();
-            fd.append('file', file);
-            if( ParseFile( file ) ){
-                StartUpload( fd );
-            }
-        }
-
-        function StartUpload( fd ) {
-            $('#uploadform button.submit').prop('disabled',true);
-            $("#uploadedfileid").val('');
-            xhr= AjaxUpload( fd, $('#fileuploadprogress'), 'temp=1', cbUpload );
-        }
-        function cbUpload( status, fileid, errors ) {
-            if( status=='done' ) {
-                $("#uploadedfileid").val( fileid );
-                $('#fileToUpload').prop('disabled',true);
-                $("#process_images").show();
-            } else {
-                var errMsgs = [ _("Error code 0 not used"), _("File already exists"), _("Directory is not writeable"), _("Root directory for uploads not defined"), _("Temporary directory for uploads not defined") ];
-                var errCode = errors[$('#fileToUpload').prop('files')[0].name].code;
-                $("#fileuploadstatus").hide();
-                $("#fileuploadfailed").show();
-                $("#fileuploadfailed").text( _("Upload status: ") +
-                    ( status=='failed'? _("Failed") + " - (" + errCode + ") " + errMsgs[errCode]:
-                    ( status=='denied'? _("Denied"): status ))
-                );
-                $("#processfile").hide();
-            }
-        }
-
-        function AjaxUpload ( formData, progressbar, xtra, callback ) {
-            var xhr= new XMLHttpRequest();
-            var url= '/cgi-bin/koha/tools/upload-file.pl?' + xtra;
-            progressbar.val( 0 );
-            progressbar.next('.fileuploadpercent').text( '0' );
-            xhr.open('POST', url, true);
-            xhr.upload.onprogress = function (e) {
-                var p = Math.round( (e.loaded/e.total) * 100 );
-                progressbar.val( p );
-                progressbar.next('.fileuploadpercent').text( p );
-            }
-            xhr.onload = function (e) {
-                var data = JSON.parse( xhr.responseText );
-                if( data.status == 'done' ) {
-                    progressbar.val( 100 );
-                    progressbar.next('.fileuploadpercent').text( '100' );
-                }
-                callback( data.status, data.fileid, data.errors );
-            }
-            xhr.onerror = function (e) {
-                // Probably only fires for network failure
-                alert(_("An error occurred while uploading.") );
-            }
-            xhr.send( formData );
-            return xhr;
-        }
-
-        // output file information
-        function ParseFile(file) {
-            var valid = true;
-            if (file.type.indexOf("image") == 0) {
-                /* If the uploaded file is an image, show it */
-                var reader = new FileReader();
-                reader.onload = function(e) {
-                    Output(
-                        '<p><img class="cover_preview" src="' + e.target.result + '" /></p>'
-                    );
-                }
-                $("#biblionumber_entry").show().find("input,label").addClass("required").prop("required", true );
-                $("#image").prop("checked", true ).change();
-                $("#zipfile").prop("checked", false );
-                reader.readAsDataURL(file);
-            } else if( file.type.indexOf("zip") > 0) {
-                Output(
-                    '<p><i class="fa fa-file-archive-o" aria-hidden="true"></i></p>'
-                );
-                $("#biblionumber_entry").hide();
-                $("#image").prop("checked", false );
-                $("#zipfile").prop("checked", true );
-            } else {
-                Output(
-                    '<div class="dialog alert"><strong>' + _("Error:") + ' </strong> ' + _("This tool only accepts ZIP files or GIF, JPEG, PNG, or XPM images.") + '</div>'
-                );
-                valid = false;
-                resetForm();
-            }
-
-            Output(
-                    "<p>" + _("File name:") + " <strong>" + file.name + "</strong><br />" +
-                    _("File type:") + " <strong>" + file.type + "</strong><br />" +
-                    _("File size:") + " <strong>" + convertSize( file.size ) + "</strong>"
-            );
-            return valid;
-        }
-
-        // output information
-        function Output(msg) {
-            var m = document.getElementById("messages");
-            m.innerHTML = msg + m.innerHTML;
-        }
-
-        // Bytes conversion
-        function convertSize(size) {
-            var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-            if (size == 0) return '0 Byte';
-            var i = parseInt(Math.floor(Math.log(size) / Math.log(1024)));
-            return Math.round(size / Math.pow(1024, i), 2) + ' ' + sizes[i];
-        }
-
-        function removeLocalImage(imagenumber) {
-            var thumbnail = $("#imagenumber-" + imagenumber );
-            var copy = thumbnail.html();
-            thumbnail.find("img").css("opacity", ".2");
-            thumbnail.find("a.remove").html("<img style='display:inline-block' src='" + interface + "/" + theme + "/img/spinner-small.gif' alt='' />");
-
-            $.ajax({
-                url: "/cgi-bin/koha/svc/cover_images?action=delete&biblionumber=" + biblionumber + "&imagenumber=" + imagenumber,
-                success: function(data) {
-                    $(data).each( function() {
-                        if ( this.deleted == 1 ) {
-                            location.href="/cgi-bin/koha/tools/upload-cover-image.pl?biblionumber=" + biblionumber;
-                        } else {
-                            thumbnail.html( copy );
-                            alert(_("An error occurred on deleting this image"));
-                        }
-                    });
-                },
-                error: function(data) {
-                    thumbnail.html( copy );
-                    alert(_("An error occurred on deleting this image"));
-                }
-            });
-        }
+    </script>
+    [% Asset.js("js/upload-images.js") | $raw %]
 
-        function resetForm(){
-            $("#uploadpanel,#upload_options,#process_images").hide();
-            $("#click_to_select").show();
-        }
     </script>
 [% END %]
 
diff --git a/koha-tmpl/intranet-tmpl/prog/js/upload-images.js b/koha-tmpl/intranet-tmpl/prog/js/upload-images.js
new file mode 100644
index 0000000000..1d7b0a4d21
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/prog/js/upload-images.js
@@ -0,0 +1,228 @@
+/* global __ interface theme biblionumber */
+
+$(document).ready(function(){
+    $("html").on("drop", function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+    });
+
+    $("#zipfile").on("click", function(){
+        $("biblionumber_entry").hide();
+    });
+
+    $("#image").on("click", function(){
+        $("#biblionumber_entry").show();
+    });
+
+    $("#uploadfile").validate({
+        submitHandler: function() {
+            StartUpload();
+            return false;
+        }
+    });
+
+    $("#filedrag").on("click", ".cancel_image", function(){
+        $("#click_to_select").show();
+        $("#messages").html("");
+        $("#fileToUpload").prop( "disabled", false );
+        $("#process_images, #fileuploadstatus").hide();
+        return false;
+    }).on("click", ".save_image", function(e){
+        e.preventDefault();
+        $("#processfile").submit();
+    });
+
+    $("html").on("drop", function(e) {
+        /* Prevent the default browser action when image is dropped */
+        /* i.e. don't navigate to a view of the local image */
+        e.preventDefault();
+        e.stopPropagation();
+    });
+
+    $('#filedrag').on('dragenter dragover dragleave', function (e) {
+        /* Handle various drag and drop events in "Drop files" area */
+        /* If event type is "dragover," add the "hover" class */
+        /* otherwise set no class name */
+        e.stopPropagation();
+        e.preventDefault();
+        e.target.className = (e.type == "dragover" ? "hover" : "");
+    });
+
+    $("#filedrag").on("click", function(){
+        /* Capture a click inside the drag and drop area */
+        /* Trigger the <input type="file"> action */
+        $("#fileToUpload").click();
+    });
+
+    // Drop
+    $('#filedrag').on('drop', function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+        prepUpLoad(e);
+    });
+
+    // file selected
+    $("#fileToUpload").on("change", function(){
+        prepUpLoad();
+    });
+
+    $('.thumbnails .remove').on("click", function(e) {
+        e.preventDefault();
+        var result = confirm(__("Are you sure you want to delete this cover image?"));
+        var imagenumber = $(this).data("coverimg");
+        if ( result == true ) {
+            removeLocalImage(imagenumber);
+        }
+    });
+});
+
+function prepUpLoad( event ){
+    $("#click_to_select,#upload_results").hide();
+    $("#messages").html("");
+    var file;
+    if( event ){
+        file = event.originalEvent.dataTransfer.files[0];
+    } else {
+        file = $('#fileToUpload')[0].files[0];
+    }
+
+    $("#fileuploadstatus, #upload_options").show();
+    var fd = new FormData();
+    fd.append('file', file);
+    if( ParseFile( file ) ){
+        StartUpload( fd );
+    }
+}
+
+function StartUpload( fd ) {
+    $('#uploadform button.submit').prop('disabled',true);
+    $("#uploadedfileid").val('');
+    AjaxUpload( fd, $('#fileuploadprogress'), 'temp=1', cbUpload );
+}
+
+function cbUpload( status, fileid, errors ) {
+    if( status=='done' ) {
+        $("#uploadedfileid").val( fileid );
+        $('#fileToUpload').prop('disabled',true);
+        $("#process_images").show();
+    } else {
+        var errMsgs = [ __("Error code 0 not used"), __("File already exists"), __("Directory is not writeable"), __("Root directory for uploads not defined"), __("Temporary directory for uploads not defined") ];
+        var errCode = errors[$('#fileToUpload').prop('files')[0].name].code;
+        $("#fileuploadstatus").hide();
+        $("#fileuploadfailed").show();
+        $("#fileuploadfailed").text( __("Upload status: ") +
+            ( status=='failed'? __("Failed") + " - (" + errCode + ") " + errMsgs[errCode]:
+                ( status=='denied'? __("Denied"): status ))
+        );
+        $("#processfile").hide();
+    }
+}
+
+function AjaxUpload ( formData, progressbar, xtra, callback ) {
+    var xhr= new XMLHttpRequest();
+    var url= '/cgi-bin/koha/tools/upload-file.pl?' + xtra;
+    progressbar.val( 0 );
+    progressbar.next('.fileuploadpercent').text( '0' );
+    xhr.open('POST', url, true);
+    xhr.upload.onprogress = function (e) {
+        var p = Math.round( (e.loaded/e.total) * 100 );
+        progressbar.val( p );
+        progressbar.next('.fileuploadpercent').text( p );
+    };
+    xhr.onload = function () {
+        var data = JSON.parse( xhr.responseText );
+        if( data.status == 'done' ) {
+            progressbar.val( 100 );
+            progressbar.next('.fileuploadpercent').text( '100' );
+        }
+        callback( data.status, data.fileid, data.errors );
+    };
+    xhr.onerror = function () {
+        // Probably only fires for network failure
+        alert(__("An error occurred while uploading.") );
+    };
+    xhr.send( formData );
+    return xhr;
+}
+
+// output file information
+function ParseFile(file) {
+    var valid = true;
+    if (file.type.indexOf("image") == 0) {
+        /* If the uploaded file is an image, show it */
+        var reader = new FileReader();
+        reader.onload = function(e) {
+            Output(
+                '<p><img class="cover_preview" src="' + e.target.result + '" /></p>'
+            );
+        };
+        $("#biblionumber_entry").show().find("input,label").addClass("required").prop("required", true );
+        $("#image").prop("checked", true ).change();
+        $("#zipfile").prop("checked", false );
+        reader.readAsDataURL(file);
+    } else if( file.type.indexOf("zip") > 0) {
+        Output(
+            '<p><i class="fa fa-file-archive-o" aria-hidden="true"></i></p>'
+        );
+        $("#biblionumber_entry").hide();
+        $("#image").prop("checked", false );
+        $("#zipfile").prop("checked", true );
+    } else {
+        Output(
+            '<div class="dialog alert"><strong>' + __("Error:") + ' </strong> ' + __("This tool only accepts ZIP files or GIF, JPEG, PNG, or XPM images.") + '</div>'
+        );
+        valid = false;
+        resetForm();
+    }
+
+    Output(
+        "<p>" + __("File name:") + " <strong>" + file.name + "</strong><br />" +
+            __("File type:") + " <strong>" + file.type + "</strong><br />" +
+            __("File size:") + " <strong>" + convertSize( file.size ) + "</strong>"
+    );
+    return valid;
+}
+
+// output information
+function Output(msg) {
+    var m = document.getElementById("messages");
+    m.innerHTML = msg + m.innerHTML;
+}
+
+// Bytes conversion
+function convertSize(size) {
+    var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    if (size == 0) return '0 Byte';
+    var i = parseInt(Math.floor(Math.log(size) / Math.log(1024)));
+    return Math.round(size / Math.pow(1024, i), 2) + ' ' + sizes[i];
+}
+
+function removeLocalImage(imagenumber) {
+    var thumbnail = $("#imagenumber-" + imagenumber );
+    var copy = thumbnail.html();
+    thumbnail.find("img").css("opacity", ".2");
+    thumbnail.find("a.remove").html("<img style='display:inline-block' src='" + interface + "/" + theme + "/img/spinner-small.gif' alt='' />");
+
+    $.ajax({
+        url: "/cgi-bin/koha/svc/cover_images?action=delete&biblionumber=" + biblionumber + "&imagenumber=" + imagenumber,
+        success: function(data) {
+            $(data).each( function() {
+                if ( this.deleted == 1 ) {
+                    location.href="/cgi-bin/koha/tools/upload-cover-image.pl?biblionumber=" + biblionumber;
+                } else {
+                    thumbnail.html( copy );
+                    alert(__("An error occurred on deleting this image"));
+                }
+            });
+        },
+        error: function() {
+            thumbnail.html( copy );
+            alert(__("An error occurred on deleting this image"));
+        }
+    });
+}
+
+function resetForm(){
+    $("#uploadpanel,#upload_options,#process_images").hide();
+    $("#click_to_select").show();
+}
-- 
2.20.1