Bugzilla – Attachment 131387 Details for
Bug 30223
Move book cover image upload JS to a separate file
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 30223: Move book cover image upload JS to a separate file
Bug-30223-Move-book-cover-image-upload-JS-to-a-sep.patch (text/plain), 18.72 KB, created by
Lucas Gass (lukeg)
on 2022-03-04 18:48:45 UTC
(
hide
)
Description:
Bug 30223: Move book cover image upload JS to a separate file
Filename:
MIME Type:
Creator:
Lucas Gass (lukeg)
Created:
2022-03-04 18:48:45 UTC
Size:
18.72 KB
patch
obsolete
>From f92abc660a846ff557f85c9ff2c32320ff3e1c5f 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 > >Signed-off-by: Lucas Gass <lucas@bywatersolutions.com> >--- > .../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
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 30223
:
131346
|
131387
|
132906