Owen Leonard
d30c6dcb7f
This patch makes changes the button markup in label-creation templates -- including the barcode image generator -- so that all submit buttons and any buttons that should should be styled as primary buttons have the Bootstrap class "btn btn-primary." To test, apply the patch and view label-related pages to confirm that everything looks correct. In most cases there are no visible changes. Signed-off-by: David Nind <david@davidnind.com> Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com> Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
214 lines
9.4 KiB
Text
214 lines
9.4 KiB
Text
[% USE raw %]
|
|
[% USE Asset %]
|
|
[% SET footerjs = 1 %]
|
|
[% INCLUDE 'doc-head-open.inc' %]<title>Barcode image generator › Cataloging › Koha</title>
|
|
[% INCLUDE 'doc-head-close.inc' %]
|
|
[% Asset.css("css/humanmsg.css") | $raw %]
|
|
[% FILTER collapse %]
|
|
<style>
|
|
input[type='range'] {
|
|
display: inline-block;
|
|
width: auto;
|
|
}
|
|
#barcode_container {
|
|
background-color:#FFF;
|
|
min-height:200px;
|
|
overflow: scroll;
|
|
padding:2em;
|
|
text-align:center;
|
|
}
|
|
#barcode_image {
|
|
border:1px dashed #B9D8D9;
|
|
display: block;
|
|
margin: 1em auto;
|
|
padding: 1em;
|
|
}
|
|
#modulesize_text {
|
|
background-color: #FFF;
|
|
border: 1px solid #EEE;
|
|
border-radius: 2px;
|
|
padding: .2em .4em;
|
|
}
|
|
#urltext {
|
|
border:1px solid #B9D8D9;
|
|
border-radius:2px;
|
|
margin:1em 0;
|
|
padding:.5em;
|
|
}
|
|
</style>
|
|
[% END %]
|
|
</head>
|
|
|
|
<body id="labels_spinelabel-home" class="tools labels">
|
|
[% WRAPPER 'header.inc' %]
|
|
[% INCLUDE 'cat-search.inc' %]
|
|
[% END %]
|
|
|
|
[% WRAPPER 'sub-header.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/cataloguing/cataloging-home.pl">Cataloging</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" aria-current="page">
|
|
Barcode image generator
|
|
</a>
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
[% END %]
|
|
|
|
<div class="main container-fluid">
|
|
<div class="row">
|
|
<div class="col-sm-10 col-sm-push-2">
|
|
<main>
|
|
<h2>Barcode image generator</h2>
|
|
|
|
<form action="/cgi-bin/koha/svc/barcode" method="post" id="barcodegen">
|
|
<fieldset class="brief">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<ol>
|
|
<li>
|
|
<label for="type">Barcode type:</label>
|
|
<select name="type" id="type">
|
|
<option value="Code39">Code39</option>
|
|
<option value="COOP2of5">COOP2of5</option>
|
|
<option value="EAN13">EAN13</option>
|
|
<option value="EAN8">EAN8</option>
|
|
<option value="IATA2of5">IATA2of5</option>
|
|
<option value="Industrial2of5">Industrial2of5</option>
|
|
<option value="ITF">ITF</option>
|
|
<option value="Matrix2of5">Matrix2of5</option>
|
|
<option value="NW7">NW7</option>
|
|
<option value="QRcode">QRcode</option>
|
|
<option value="UPCA">UPCA</option>
|
|
<option value="UPCE">UPCE</option>
|
|
</select>
|
|
</li>
|
|
<li class="qrcode">
|
|
<label for="modulesize">QR Code module size:</label>
|
|
<input name="modulesize" id="modulesize" type="range" min="1" max="10" value="3" />
|
|
<span id="modulesize_text">3</span>
|
|
<div class="hint">Module size refers to the pixel dimensions of each black or white square in the generated QR code.</div>
|
|
</li>
|
|
<li class="bcode">
|
|
<label for="notext">Hide text <input type="checkbox" id="notext" name="notext" value="1" /></label>
|
|
</li>
|
|
<li class="bcode">
|
|
<label for="height">Barcode height:</label>
|
|
<input type="text" id="height" name="height" value="50" />
|
|
</li>
|
|
<li>
|
|
<label class="bcode" for="barcode">Barcode: </label>
|
|
<label class="qrcode" for="barcode">Text, URL, or barcode, etc: </label>
|
|
<input type="text" name="barcode" id="barcode" size="50" />
|
|
<div class="hint qrcode">Actual dimensions of the QR code depend on the amount of characters being encoded.</div>
|
|
<div class="hint bcode">Barcode text must be numeric (0-9)</div>
|
|
</li>
|
|
</ol>
|
|
<fieldset class="action">
|
|
<input type="submit" class="btn btn-primary" value="Show barcode" />
|
|
</fieldset>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div id="barcode_container">
|
|
<img id="barcode_image" />
|
|
<textarea readonly="readonly" rows="5" cols="40" id="urltext"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</main>
|
|
</div> <!-- /.col-sm-10.col-sm-push-2 -->
|
|
|
|
<div class="col-sm-2 col-sm-pull-10">
|
|
<aside>
|
|
[% INCLUDE 'cat-menu.inc' %]
|
|
</aside>
|
|
</div> <!-- /.col-sm-2.col-sm-pull-10 -->
|
|
</div> <!-- /.row -->
|
|
|
|
[% MACRO jsinclude BLOCK %]
|
|
[% Asset.js("lib/jquery/plugins/humanmsg.js") | $raw %]
|
|
<script>
|
|
var base_url = "[% Koha.Preference('staffClientBaseURL') | html %]";
|
|
|
|
function showBarcodeText( path, dimensions ){
|
|
var params = new URLSearchParams( path );
|
|
var tag = '<img src="' + path + '" alt="' + params.get("barcode") + '" width="' + dimensions.width + '" height="' + dimensions.height + '" />';
|
|
$("#urltext").show().text( tag );
|
|
if( Number( dimensions.width ) > 250 ){
|
|
$("#urltext").css("width", dimensions.width )
|
|
}
|
|
}
|
|
|
|
function showBarcode( barcodeform ){
|
|
if( $("#barcode").val() == "" ){
|
|
$("#barcode_container").hide();
|
|
} else {
|
|
var url = barcodeform.attr("action");
|
|
var params = barcodeform.serialize();
|
|
$("#barcode_container").show();
|
|
$("#barcode_image").attr("src", url + "?" + params );
|
|
}
|
|
}
|
|
|
|
function showQrcodeOptions( type ){
|
|
if( type.val() == "QRcode" ){
|
|
$(".qrcode").show().find("input,range").prop("disabled", false );
|
|
$(".bcode").hide().find("input").prop("disabled", true );
|
|
} else {
|
|
$(".qrcode").hide().find("input,range").prop("disabled", true );
|
|
$(".bcode").show().find("input").prop("disabled", false );
|
|
}
|
|
}
|
|
$(document).ready(function(){
|
|
showQrcodeOptions( $("#type") );
|
|
showBarcode( $("#barcodegen") );
|
|
$("#type").on("change", function(){
|
|
showQrcodeOptions( $(this) );
|
|
})
|
|
$("#barcodegen").on("change submit", function(e){
|
|
e.preventDefault();
|
|
showBarcode( $(this) );
|
|
});
|
|
$("#modulesize").on("input", function(){
|
|
$("#modulesize_text").text( $(this).val() );
|
|
});
|
|
$("#urltext").on("click", function(){
|
|
$(this).select();
|
|
var text = $(this).text();
|
|
navigator.clipboard.writeText( text ).then(function() {
|
|
/* clipboard successfully set */
|
|
humanMsg.displayAlert( _("HTML copied to the clipboard") );
|
|
}, function() {
|
|
/* clipboard write failed */
|
|
humanMsg.displayAlert( _("Could not copy HTML automatically to the clipboard") );
|
|
});
|
|
});
|
|
$("#barcode_image")[0].onload = function (){
|
|
showBarcodeText( this.src, { width: this.width, height: this.height } );
|
|
}
|
|
$("#barcode_image")[0].onerror = function(){
|
|
var barcodetype = $("#type").val();
|
|
if( barcodetype !== "QRcode" ){
|
|
if( Number.isNaN( Number( $("#barcode").val() ) ) ){
|
|
humanMsg.displayAlert( _("Barcodes of type %s must be numeric").format( barcodetype ) );
|
|
} else {
|
|
humanMsg.displayAlert( _("There was an unknown error generating the barcode image. Please check that your barcode is correct for the barcode type" ) );
|
|
}
|
|
} else {
|
|
humanMsg.displayAlert( _("There was an unknown error generating the barcode image") );
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
[% END %]
|
|
|
|
[% INCLUDE 'intranet-bottom.inc' %]
|