From f92abc660a846ff557f85c9ff2c32320ff3e1c5f Mon Sep 17 00:00:00 2001 From: Owen Leonard 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 Signed-off-by: Lucas Gass --- .../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 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( - '

' - ); - } - $("#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( - '

' - ); - $("#biblionumber_entry").hide(); - $("#image").prop("checked", false ); - $("#zipfile").prop("checked", true ); - } else { - Output( - '
' + _("Error:") + ' ' + _("This tool only accepts ZIP files or GIF, JPEG, PNG, or XPM images.") + '
' - ); - valid = false; - resetForm(); - } - - Output( - "

" + _("File name:") + " " + file.name + "
" + - _("File type:") + " " + file.type + "
" + - _("File size:") + " " + convertSize( file.size ) + "" - ); - 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(""); - - $.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")); - } - }); - } + + [% Asset.js("js/upload-images.js") | $raw %] - function resetForm(){ - $("#uploadpanel,#upload_options,#process_images").hide(); - $("#click_to_select").show(); - } [% 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 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( + '

' + ); + }; + $("#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( + '

' + ); + $("#biblionumber_entry").hide(); + $("#image").prop("checked", false ); + $("#zipfile").prop("checked", true ); + } else { + Output( + '
' + __("Error:") + ' ' + __("This tool only accepts ZIP files or GIF, JPEG, PNG, or XPM images.") + '
' + ); + valid = false; + resetForm(); + } + + Output( + "

" + __("File name:") + " " + file.name + "
" + + __("File type:") + " " + file.type + "
" + + __("File size:") + " " + convertSize( file.size ) + "" + ); + 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(""); + + $.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