Owen Leonard
5e90c0cbb3
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> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de> Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
318 lines
15 KiB
Text
318 lines
15 KiB
Text
[% USE raw %]
|
|
[% USE Asset %]
|
|
[% SET footerjs = 1 %]
|
|
[% INCLUDE 'doc-head-open.inc' %]
|
|
<title>
|
|
Koha ›
|
|
Tools ›
|
|
Upload local cover image
|
|
[% IF ( biblio ) %]
|
|
› [% INCLUDE 'biblio-title-head.inc' %]
|
|
[% END %]
|
|
</title>
|
|
[% INCLUDE 'doc-head-close.inc' %]
|
|
[% FILTER collapse %]
|
|
<style>
|
|
#fileuploadstatus,
|
|
#fileuploadfailed,
|
|
#jobpanel,
|
|
#jobstatus,
|
|
#jobfailed,
|
|
#fileuploadform,
|
|
#upload_file_type,
|
|
#upload_options,
|
|
#process_images {
|
|
display: none;
|
|
}
|
|
#uploadpanel {
|
|
clear:both;
|
|
margin-top: .9em;
|
|
}
|
|
#filedrag {
|
|
background-color: #FFF;
|
|
outline: 2px dashed #92b0b3;
|
|
outline-offset: -10px;
|
|
font-weight: bold;
|
|
font-size: 130%;
|
|
text-align: center;
|
|
position: relative;
|
|
padding: 50px 20px;
|
|
margin: 1em;
|
|
|
|
cursor: default;
|
|
}
|
|
|
|
#click_to_select:hover {
|
|
color: #538200;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#filedrag.hover {
|
|
outline-offset: -20px;
|
|
outline-color: #c8dadf;
|
|
background-color: #fff;
|
|
}
|
|
|
|
#messages {
|
|
font-weight: normal;
|
|
}
|
|
.cover_preview {
|
|
margin:1em;
|
|
max-height:200px;
|
|
max-width:200px;
|
|
}
|
|
.progress_panel {
|
|
border: 0;
|
|
border-radius: 0;
|
|
margin: .9em;
|
|
background-color: #FFF;
|
|
}
|
|
.fa-file-archive-o {
|
|
color: #777;
|
|
font-size: 300%
|
|
}
|
|
</style>
|
|
[% END %]
|
|
</head>
|
|
|
|
<body id="tools_upload-images" class="tools">
|
|
[% INCLUDE 'header.inc' %]
|
|
[% INCLUDE 'cat-search.inc' %]
|
|
|
|
<nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumb">
|
|
<ol>
|
|
<li>
|
|
<a href="/cgi-bin/koha/mainpage.pl">Home</a>
|
|
</li>
|
|
<li>
|
|
<a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a>
|
|
</li>
|
|
<li>
|
|
<a href="/cgi-bin/koha/tools/upload-cover-image.pl">Upload local cover image</a>
|
|
</li>
|
|
|
|
[% IF ( uploadimage ) %]
|
|
<li>
|
|
<a href="#" aria-current="page">
|
|
Upload results
|
|
</a>
|
|
</li>
|
|
[% IF ( biblionumber ) %]
|
|
<li>
|
|
<a href="#" aria-current="page"><em>[% INCLUDE 'biblio-title.inc' %]</em></a>
|
|
</li>
|
|
[% END %]
|
|
[% ELSIF itemnumber %]
|
|
<li>
|
|
<a href="#" aria-current="page">
|
|
Upload cover for itemnumber: [% itemnumber | html %]
|
|
</a>
|
|
</li>
|
|
[% ELSIF biblionumber %]
|
|
<li>
|
|
<a href="#" aria-current="page">
|
|
Upload cover for biblionumber: [% biblionumber | html %]
|
|
</a>
|
|
</li>
|
|
[% ELSE %]
|
|
<li>
|
|
<a href="#" aria-current="page">
|
|
Upload local cover image
|
|
</a>
|
|
</li>
|
|
[% END %]
|
|
</ol>
|
|
</nav>
|
|
|
|
<div class="main container-fluid">
|
|
<div class="row">
|
|
<div class="col-sm-10 col-sm-push-2">
|
|
<main>
|
|
|
|
[% UNLESS itemnumber || biblionumber %]
|
|
<h1>Upload local cover image</h1>
|
|
[% ELSIF biblio %]
|
|
<h1>
|
|
Upload local cover image for <a href="/cgi-bin/koha/catalogue/detail.pl?biblionumber=[% biblionumber | uri %]"><em>[% INCLUDE 'biblio-title.inc' %]</em></a>
|
|
[% IF ( itemnumber ) %], Item number: [% itemnumber | html %][% END %]
|
|
</h1>
|
|
[% ELSIF itemnumber %]
|
|
<h1>Upload local cover image for item number: [% itemnumber | html %]</h1>
|
|
[% END %]
|
|
|
|
[% IF ( uploadimage ) %]
|
|
<h2>Image upload results :</h2>
|
|
<div id="upload_results">
|
|
[% IF ( error ) %]
|
|
<div class="dialog alert">
|
|
[% IF ( error == 'UZIPFAIL' ) %]
|
|
<p><strong>Failed to unzip archive.<br />Please ensure you are uploading a valid zip file and try again.</strong></p>
|
|
[% ELSIF ( error == 'OPNLINK' ) %]
|
|
<p><strong>Cannot open folder index (idlink.txt or datalink.txt) to read.<br />Please verify that it exists.</strong></p>
|
|
[% ELSIF ( error == 'OPNIMG' ) %]
|
|
<p><strong>Cannot process file as an image.<br />Please ensure you only upload GIF, JPEG, PNG, or XPM images.</strong></p>
|
|
[% ELSIF ( error == 'DELERR' ) %]
|
|
<p><strong>Unrecognized or missing field delimiter.<br />Please verify that you are using either a single quote or a tab.</strong></p>
|
|
[% ELSIF ( error == 'DBERR' ) %]
|
|
<p><strong>Unable to save image to database.</strong></p>
|
|
[% ELSE %]
|
|
<p><strong>An unknown error has occurred.<br />Please review the error log for more details.</strong></p>
|
|
[% END %]
|
|
</div>
|
|
[% END # /IF error %]
|
|
<h3>[% total | html %] images found</h3>
|
|
<ul>
|
|
[% FOREACH result IN results %]
|
|
<li><a href="/cgi-bin/koha/catalogue/detail.pl?biblionumber=[% result.biblionumber | uri %]">[% result.title | html %]</a></li>
|
|
[% END %]
|
|
</ul>
|
|
<hr />
|
|
</div> <!-- /#upload_results -->
|
|
[% END # /IF uploadimage %]
|
|
|
|
<ul>
|
|
[% UNLESS itemnumber || biblionumber %]
|
|
<li>Select an image file or ZIP file to upload. The tool will accept images in GIF, JPEG, PNG, and XPM formats.</li>
|
|
[% ELSE %]
|
|
<li>Select an image file to upload. The tool will accept images in GIF, JPEG, PNG, and XPM formats.</li>
|
|
[% END %]
|
|
</ul>
|
|
|
|
<div class="row">
|
|
[% IF ( cover_images ) %]
|
|
<div class="col-sm-9">
|
|
[% ELSE %]
|
|
<div class="col-sm-12">
|
|
[% END %]
|
|
|
|
<form method="post" action="/cgi-bin/koha/tools/upload-cover-image.pl" id="uploadfile" enctype="multipart/form-data">
|
|
<fieldset class="rows" >
|
|
<div id="fileuploadform">
|
|
<label for="fileToUpload">Select the file to upload: </label>
|
|
<input type="file" id="fileToUpload" name="fileToUpload" />
|
|
</div>
|
|
|
|
<div id="filedrag">
|
|
<a id="click_to_select" href="#">Drop files here or click to select a file</a>
|
|
<div id="messages"></div>
|
|
</div>
|
|
|
|
<div id="uploadpanel">
|
|
<div id="fileuploadstatus" class="progress_panel">Upload progress:
|
|
<progress max="100" value="0" id="fileuploadprogress">
|
|
</progress>
|
|
<span class="fileuploadpercent">0</span>%
|
|
</div>
|
|
<div id="fileuploadfailed"></div>
|
|
</div>
|
|
</fieldset>
|
|
</form> <!-- /#uploadfile -->
|
|
|
|
<form method="post" id="processfile" action="/cgi-bin/koha/tools/upload-cover-image.pl" enctype="multipart/form-data">
|
|
<input type="hidden" name="uploadedfileid" id="uploadedfileid" value="" />
|
|
<input type="hidden" name="runinbackground" id="runinbackground" value="" />
|
|
<input type="hidden" name="completedJobID" id="completedJobID" value="" />
|
|
|
|
[% IF itemnumber %]
|
|
<input type="hidden" id="itemnumber" name="itemnumber" value="[% itemnumber | html %]" />
|
|
<input type="hidden" name="filetype" value="image" />
|
|
[% ELSIF biblionumber %]
|
|
<input type="hidden" id="biblionumber" name="biblionumber" value="[% biblionumber | html %]" />
|
|
<input type="hidden" name="filetype" value="image" />
|
|
[% END %]
|
|
|
|
|
|
<fieldset id="upload_options" class="rows">
|
|
<ol>
|
|
[% UNLESS itemnumber || biblionumber %]
|
|
<li class="radio">
|
|
[% IF (filetype != 'image' ) %]
|
|
<input type="radio" id="zipfile" name="filetype" value="zip" checked="checked" />
|
|
[% ELSE %]
|
|
<input type="radio" id="zipfile" name="filetype" value="zip" />
|
|
[% END %]
|
|
<label for="zipfile">ZIP file</label>
|
|
</li>
|
|
<li class="radio">
|
|
[% IF (filetype == 'image' ) %]
|
|
<input type="radio" id="image" name="filetype" value="image" checked="checked" />
|
|
[% ELSE %]
|
|
<input type="radio" id="image" name="filetype" value="image" />
|
|
[% END %]
|
|
<label for="image">Image file</label>
|
|
</li>
|
|
<li id="biblionumber_entry">
|
|
<label for="biblionumber">Bibliographic record number: </label>
|
|
<input type="text" id="biblionumber" name="biblionumber" value="[% biblionumber | html %]" size="15" />
|
|
</li>
|
|
[% END %]
|
|
<li class="radio">
|
|
<label for="replace">
|
|
[% IF AllowMultipleCovers == 0 %]
|
|
<input type="checkbox" id="replace" name="replace" value="" disabled="disabled" checked="checked" />
|
|
Existing covers will be replaced
|
|
[% ELSE %]
|
|
<input type="checkbox" id="replace" name="replace" value="1" />
|
|
Replace existing covers
|
|
[% END %]
|
|
</li>
|
|
</ol>
|
|
</fieldset>
|
|
|
|
<fieldset id="process_images" class="action">
|
|
<button type="submit" class="btn btn-default btn-sm save_image">Process images</button>
|
|
[% IF ( biblionumber ) %]
|
|
<a class="cancel cancel_image" href="/cgi-bin/koha/catalogue/detail.pl?biblionumber=[% biblionumber | uri %]">Cancel</a>
|
|
[% ELSE %]
|
|
<a class="cancel cancel_image" href="/cgi-bin/koha/tools/upload-cover-image.pl">Cancel</a>
|
|
[% END %]
|
|
</fieldset>
|
|
</form> <!-- /#processfile -->
|
|
</div> <!-- /.col-sm-9/.col-sm-12 -->
|
|
|
|
[% IF ( cover_images.size ) %]
|
|
<div class="col-sm-3">
|
|
<h3>Existing images</h3>
|
|
<ul class="thumbnails">
|
|
[% FOREACH img IN cover_images %]
|
|
[% IF img %]
|
|
<li id="imagenumber-[% img.imagenumber | html %]" class="thumbnail">
|
|
<a class="show_cover" data-coverimg="[% img.imagenumber | html %]" href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=[% biblionumber | html %]&imagenumber=[% img.imagenumber | html %]">
|
|
[% IF ( imagenumber == img.imagenumber ) %]
|
|
<img class="selected" id="thumbnail_[% img.imagenumber | html %]" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% img.imagenumber | html %]&thumbnail=1" alt="Thumbnail" />
|
|
[% ELSE %]
|
|
<img id="thumbnail_[% img.imagenumber | html %]" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% img.imagenumber | html %]&thumbnail=1" alt="Thumbnail" />
|
|
[% END %]
|
|
</a>
|
|
<a href="#" class="remove" data-coverimg="[% img.imagenumber | html %]"><i class="fa fa-trash"></i> Delete image</a>
|
|
</li>
|
|
[% END # /IF img %]
|
|
[% END # /FOREACH img %]
|
|
</ul> <!-- /ul.thumbnails -->
|
|
</div> <!-- /.col-sm-3 -->
|
|
[% END # /IF images.size %]
|
|
|
|
</div> <!-- /.row -->
|
|
</main>
|
|
</div> <!-- /.col-sm-10.col-sm-push-2 -->
|
|
|
|
<div class="col-sm-2 col-sm-pull-10">
|
|
<aside>
|
|
[% INCLUDE 'tools-menu.inc' %]
|
|
</aside>
|
|
</div> <!-- /.col-sm-2.col-sm-pull-10 -->
|
|
</div> <!-- /.row -->
|
|
|
|
[% MACRO jsinclude BLOCK %]
|
|
[% Asset.js("js/tools-menu.js") | $raw %]
|
|
<script>
|
|
var interface = "[% interface | html %]";
|
|
var theme = "[% theme | html %]";
|
|
var biblionumber = "[% biblionumber | html %]";
|
|
</script>
|
|
[% Asset.js("js/upload-images.js") | $raw %]
|
|
|
|
</script>
|
|
[% END %]
|
|
|
|
[% INCLUDE 'intranet-bottom.inc' %]
|