Koha/koha-tmpl/intranet-tmpl/prog/en/modules/patroncards/edit-layout.tt
Marc Véron 45aea7ae1d Bug 18541 - Patron card creator: Add a grid to support layout design
Add a layout grid to patron card creator to figure out the positions of text
fields, barcode and images.

To test:
- Apply on top of patch 18465
- Go to Home > Tools > Patron card creator
- Edit or create a layout
- Turn on new choice 'Guide grid' in section 'General settings'
- Leave 'Units' unchanged
- Crate a PDF using 'Card batches'
- Notice that card is printed with a layout grid that reflects selected unit
  with each 5th and 10th line in different color, unit description displayed
  bottom left, card dimensions displayed top right in small print inside the
  layout grid
- Print PDF. Set printer settings in Adobe Reader or other PDF printing
  software to 'Actual size' to prevent scaling to printer's printable
  region
- Mesure out printed PDF and verify that grid corresponds to selecte unit.
- Go back to layout definition and choose an other unit, repeat steps
  to verify that grid respects selected unit.
- Go back to layout definition, turn grid off, create PDF, verify that grid
  does not display in PDF

Note for testers / QAers: Position of card elements (text, image...) do not
respect the unit, this will be fixed in Bug 18550

Followed test plan and it worked as intended
Signed-off-by: Alex Buckley <alexbuckley@catalyst.net.nz>

Signed-off-by: Marcel de Rooy <m.de.rooy@rijksmuseum.nl>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
2017-09-19 11:47:32 -03:00

571 lines
37 KiB
Text

[% INCLUDE 'doc-head-open.inc' %]
<title>Koha &rsaquo; Tools &rsaquo; Patron card creator &rsaquo; Layout &rsaquo; [% IF ( layout_id ) %]Edit ([% layout_id %])[% ELSE %]New[% END %]</title>
[% INCLUDE 'doc-head-close.inc' %]
<script type="text/JavaScript" language="JavaScript">
//<![CDATA[
$(document).ready(function() {
var selectedUnit = $("#units option:selected").attr("value");
var unitfields = $("#font_size,#field_1_llx,#field_1_lly,#field_2_llx,#field_2_lly,#field_3_llx,#field_3_lly,#barcode_Tx,#barcode_Ty,#image_1_Dx,#image_1_Tx,#image_1_Ty,#image_2_Dx,#image_2_Tx,#image_2_Ty");
$(unitfields).after("<span class=\"unit\">"+getUnit(selectedUnit)+"</span>");
$("#units").change(function(){
$(".unit").html(getUnit($(this).val()));
});
Go($("#image_1_image_source").val(), 'image_1_image_name');
Go($("#image_1_image_source").val(), 'image_1_image_metrics');
$("#image_1_image_source").change(function(){
$(".image_1_image_source").html(Go($(this).val(), 'image_1_image_name'));
$(".image_1_image_source").html(Go($(this).val(), 'image_1_image_metrics'));
});
Go($("#image_2_image_source").val(), 'image_2_image_name');
Go($("#image_2_image_source").val(), 'image_2_image_metrics');
$("#image_2_image_source").change(function(){
$(".image_2_image_source").html(Go($(this).val(), 'image_2_image_name'));
$(".image_2_image_source").html(Go($(this).val(), 'image_2_image_metrics'));
});
var selectFieldNames = ["field_1","field_2","field_3"];
for (var i=0; i < selectFieldNames.length; i++) {
Go($("#"+selectFieldNames[i]+"_enable").prop("checked"), selectFieldNames[i]+"_select");
}
$("#field_1_enable").change(function(){
$(".field_1_enable").html(Go($(this).prop("checked"), 'field_1_select'));
});
$("#field_2_enable").change(function(){
$(".field_2_enable").html(Go($(this).prop("checked"), 'field_2_select'));
});
$("#field_3_enable").change(function(){
$(".field_3_enable").html(Go($(this).prop("checked"), 'field_3_select'));
});
$("#barcode_print").load(barcode_text('barcode_param'));
$("#barcode_print").change(function(){
barcode_text('barcode_param');
});
function barcode_text(division) {
var eBarcode = document.getElementById(division);
if( $("input[name=barcode_print]:checked").prop("checked") ) {
eBarcode.style.display = 'block';
} else {
eBarcode.style.display = 'none';
$('input[name=barcode_text_print]').prop('checked', false);
}
}
function getUnit(unit){
switch(unit){
case "POINT":
var unit = " pt";
break;
case "AGATE":
var unit = " ag";
break;
case "INCH":
var unit = " in";
break;
case "MM":
var unit = " mm";
break;
case "CM":
var unit = " cm";
break;
default:
var unit = " pt";
}
return unit;
}
function Go(oSelect, oElement){
var element = document.getElementById(oElement);
switch(true) {
case /^.*_name/.test(oElement):
if ((oSelect == 'patronimages') || (oSelect == 'none')) {
element.style.display = 'none';
}
else {
element.style.display = 'block';
}
break;
case /^.*_metrics/.test(oElement):
if ((oSelect == 'none') || (oSelect == '')) {
element.style.display = 'none';
}
else {
element.style.display = 'block';
}
break;
case /^.*_select/.test(oElement):
if (!oSelect) {
element.style.display = 'none';
}
else {
element.style.display = 'block';
}
break;
default:
return;
}
return;
}
});
//]]>
</script>
</head>
<body id="pcard_edit-layout" class="tools pcard">
[% INCLUDE 'header.inc' %]
[% INCLUDE 'cat-search.inc' %]
<div id="breadcrumbs">
<a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo;
<a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a> &rsaquo;
<a href="/cgi-bin/koha/patroncards/home.pl">Patron card creator</a> &rsaquo;
<a href="/cgi-bin/koha/patroncards/manage.pl?card_element=layout">Layouts</a> &rsaquo;
[% IF ( layout_id ) %]Edit ([% layout_id %])[% ELSE %]New[% END %]
</div>
<div id="doc3" class="yui-t2">
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-g">
[% INCLUDE 'patroncards-toolbar.inc' %]
<div class="yui-u first">
</div>
</div>
<!-- NOTE: The order of the elements on this form is crictical to correct processing. You've been warned... -->
<form name="input" action="/cgi-bin/koha/patroncards/edit-layout.pl" method="get">
<div class="yui-g">
<div class="yui-g first">
<fieldset class="rows">
<legend>[% IF ( layout_id ) %]Edit[% ELSE %]Create[% END %] patron card text layout</legend>
<ol>
<li>
<fieldset>
<legend>General settings</legend>
<ol>
<li>
<label for="layout_name">Layout name: </label>
<input type="text" name="layout_name" id="layout_name" size="20" value="[% layout_name %]" />
</li>
<li>
<label for="units">Units: </label>
<select id="units" name="units">
[% FOREACH unit IN units %]
[% IF ( unit.selected ) %]
<option value="[% unit.type %]" selected="selected">
[% ELSE %]
<option value="[% unit.type %]">
[% END %]
[% unit.desc %]
</option>
[% END %]
</select>
</li>
<li>
<label for="page_side">Page side: </label>
[% IF ( page_side ) %]
<input type="radio" name="page_side" id="page_side" value="F" />Front
<input type="radio" name="page_side" id="page_side" value="B" checked="checked" />Back
[% ELSE %]
<input type="radio" name="page_side" id="page_side" value="F" checked="checked" />Front
<input type="radio" name="page_side" id="page_side" value="B" />Back
[% END %]
</li>
<li>
<label for="guide_box">Guide box:</label>
[% IF ( guide_box ) %]
<input type="radio" name="guide_box" id="guide_box" value="1" checked="checked" />On
<input type="radio" name="guide_box" id="guide_box" value="0" />Off
[% ELSE %]
<input type="radio" name="guide_box" id="guide_box" value="1" />On
<input type="radio" name="guide_box" id="guide_box" value="0" checked="checked" />Off
[% END %]
</li>
<li>
<label for="guide_grid">Guide grid:</label>
[% IF ( guide_grid ) %]
<input type="radio" name="guide_grid" id="guide_grid" value="1" checked="checked" />On
<input type="radio" name="guide_grid" id="guide_grid" value="0" />Off
[% ELSE %]
<input type="radio" name="guide_grid" id="guide_grid" value="1" />On
<input type="radio" name="guide_grid" id="guide_grid" value="0" checked="checked" />Off
[% END %]
</li>
</ol>
</fieldset>
</li>
<li>
<fieldset>
<legend>Text fields</legend>
<ol>
<li>
<fieldset>
[% IF ( field_1 ) %]
<legend><input type="checkbox" name="field_1_enable" id="field_1_enable" value="1" checked="checked" /> Field 1</legend>
[% ELSE %]
<legend><input type="checkbox" name="field_1_enable" id="field_1_enable" value="1" /> Field 1</legend>
[% END %]
<div id="field_1_select" style="display: none;">
<ol>
<li>
<label for="field_1_text">Text: </label>
<input type="text" name="field_1_text" id="field_1_text" size="60" value="[% field_1_text |html %]" />
</li>
<li>
<label for="field_1_font">Font: </label>
<select name="field_1_font" id="field_1_font">
[% FOREACH field_1_fon IN field_1_font %]
[% IF ( field_1_fon.selected ) %]
<option value="[% field_1_fon.type %]" selected="selected">[% field_1_fon.name %]</option>
[% ELSE %]
<option value="[% field_1_fon.type %]">[% field_1_fon.name %]</option>
[% END %]
[% END %]
</select>
</li>
<li>
<label for="field_1_font_size">Font size: </label>
<input type="text" name="field_1_font_size" id="field_1_font_size" size="2" value="[% field_1_font_size |html %]" />
<span class="font_unit"> pt</span>
</li>
<li>
<label for="field_1_text_alignment">Text alignment: </label>
<select name="field_1_text_alignment" id="field_1_text_alignment">
[% FOREACH field_1_text_alignmen IN field_1_text_alignment %]
[% IF ( field_1_text_alignmen.selected ) %]
<option value="[% field_1_text_alignmen.type %]" selected="selected">[% field_1_text_alignmen.name %]</option>
[% ELSE %]
<option value="[% field_1_text_alignmen.type %]">[% field_1_text_alignmen.name %]</option>
[% END %]
[% END %]
</select>
</li>
<li>
<label for="field_1_llx">Lower left X coordinate: </label>
<input type="text" name="field_1_llx" id="field_1_llx" size="2" value="[% field_1_llx |html %]" />
</li>
<li>
<label for="field_1_lly">Lower left Y coordinate: </label>
<input type="text" name="field_1_lly" id="field_1_lly" size="2" value="[% field_1_lly |html %]" />
</li>
</ol>
</div>
</fieldset>
</li>
<li>
<fieldset>
[% IF ( field_2 ) %]
<legend><input type="checkbox" name="field_2_enable" id="field_2_enable" value="1" checked="checked"/> Field 2</legend>
[% ELSE %]
<legend><input type="checkbox" name="field_2_enable" id="field_2_enable" value="1" /> Field 2</legend>
[% END %]
<div id="field_2_select" style="display: none;">
<ol>
<li>
<label for="field_2_text">Text: </label>
<input type="text" name="field_2_text" id="field_2_text" size="60" value="[% field_2_text |html %]" />
</li>
<li>
<label for="field_2_font">Font: </label>
<select name="field_2_font" id="field_2_font">
[% FOREACH field_2_fon IN field_2_font %]
[% IF ( field_2_fon.selected ) %]
<option value="[% field_2_fon.type %]" selected="selected">[% field_2_fon.name %]</option>
[% ELSE %]
<option value="[% field_2_fon.type %]">[% field_2_fon.name %]</option>
[% END %]
[% END %]
</select>
</li>
<li>
<label for="field_2_font_size">Font size: </label>
<input type="text" name="field_2_font_size" id="field_2_font_size" size="2" value="[% field_2_font_size |html %]" />
<span class="font_unit"> pt</span>
</li>
<li>
<label for="field_2_text_alignment">Text alignment: </label>
<select name="field_2_text_alignment" id="field_2_text_alignment">
[% FOREACH field_2_text_alignmen IN field_2_text_alignment %]
[% IF ( field_2_text_alignmen.selected ) %]
<option value="[% field_2_text_alignmen.type %]" selected="selected">[% field_2_text_alignmen.name %]</option>
[% ELSE %]
<option value="[% field_2_text_alignmen.type %]">[% field_2_text_alignmen.name %]</option>
[% END %]
[% END %]
</select>
</li>
<li>
<label for="field_2_llx">Lower left X coordinate: </label>
<input type="text" name="field_2_llx" id="field_2_llx" size="2" value="[% field_2_llx |html %]" />
</li>
<li>
<label for="field_2_lly">Lower left Y coordinate: </label>
<input type="text" name="field_2_lly" id="field_2_lly" size="2" value="[% field_2_lly |html %]" />
</li>
</ol>
</div>
</fieldset>
</li>
<li>
<fieldset>
[% IF ( field_3 ) %]
<legend><input type="checkbox" name="field_3_enable" id="field_3_enable" value="1" checked="checked"/> Field 3</legend>
[% ELSE %]
<legend><input type="checkbox" name="field_3_enable" id="field_3_enable" value="0" /> Field 3</legend>
[% END %]
<div id="field_3_select" style="display: none;">
<ol>
<li>
<label for="field_3_text">Text: </label>
<input type="text" name="field_3_text" id="field_3_text" size="60" value="[% field_3_text |html %]" />
</li>
<li>
<label for="field_3_font">Font: </label>
<select name="field_3_font" id="field_3_font">
[% FOREACH field_3_fon IN field_3_font %]
[% IF ( field_3_fon.selected ) %]
<option value="[% field_3_fon.type %]" selected="selected">[% field_3_fon.name %]</option>
[% ELSE %]
<option value="[% field_3_fon.type %]">[% field_3_fon.name %]</option>
[% END %]
[% END %]
</select>
</li>
<li>
<label for="field_3_font_size">Font size: </label>
<input type="text" name="field_3_font_size" id="field_3_font_size" size="2" value="[% field_3_font_size |html %]" />
<span class="font_unit"> pt</span>
</li>
<li>
<label for="field_3_text_alignment">Text alignment: </label>
<select name="field_3_text_alignment" id="field_3_text_alignment">
[% FOREACH field_3_text_alignmen IN field_3_text_alignment %]
[% IF ( field_3_text_alignmen.selected ) %]
<option value="[% field_3_text_alignmen.type %]" selected="selected">[% field_3_text_alignmen.name %]</option>
[% ELSE %]
<option value="[% field_3_text_alignmen.type %]">[% field_3_text_alignmen.name %]</option>
[% END %]
[% END %]
</select>
</li>
<li>
<label for="field_3_llx">Lower left X coordinate: </label>
<input type="text" name="field_3_llx" id="field_3_llx" size="2" value="[% field_3_llx |html %]" />
</li>
<li>
<label for="field_3_lly">Lower left Y coordinate: </label>
<input type="text" name="field_3_lly" id="field_3_lly" size="2" value="[% field_3_lly |html %]" />
</li>
</ol>
</div>
</fieldset>
</li>
</ol>
</fieldset>
</li>
</ol>
</fieldset>
</div>
<div class="yui-g">
<fieldset class="rows">
<legend>[% IF ( layout_id ) %]Edit[% ELSE %]Create[% END %] patron card graphic layout</legend>
<ol>
<!--
<li>
<fieldset>
<label for="guidebox">Draw guide boxes: </label>
[% IF ( guidebox ) %]
<input type="checkbox" name="guidebox" id="guidebox" value="1" checked="checked" />
[% ELSE %]
<input type="checkbox" name="guidebox" id="guidebox" value="1" />
[% END %]
</fieldset>
</li>
-->
<li>
<fieldset>
<legend>Barcode</legend>
<ol>
<li>
<label for="barcode_print">Print card number as barcode: </label>
[% IF ( barcode_print ) %]
<input type="checkbox" name="barcode_print" id="barcode_print" value="1" checked="checked" />
[% ELSE %]
<input type="checkbox" name="barcode_print" id="barcode_print" value="1" />
[% END %]
</li>
</ol>
<div id="barcode_param" style="display: none;">
<ol>
<li>
<label for="barcode_llx">Lower left X coordinate: </label>
<input type="text" name="barcode_llx" id="barcode_llx" size="2" value="[% barcode_llx |html %]" />
</li>
<li>
<label for="barcode_lly">Lower left Y coordinate: </label>
<input type="text" name="barcode_lly" id="barcode_lly" size="2" value="[% barcode_lly |html %]" />
</li>
<li>
<label for="barcode_height_scale">Scale height (relative to card): </label>
<input type="text" name="barcode_height_scale" id="barcode_height_scale" size="2" value="[% barcode_height_scale |html %]" />
</li>
<li>
<label for="barcode_width_scale">Scale width (relative to card): </label>
<input type="text" name="barcode_width_scale" id="barcode_width_scale" size="2" value="[% barcode_width_scale |html %]" />
</li>
<li>
<label for="barcode_type">Barcode type: </label>
<select name="barcode_type" id="barcode_type">
[% FOREACH barcode_typ IN barcode_type %]
[% IF ( barcode_typ.selected ) %]
<option value="[% barcode_typ.type %]" selected="selected">[% barcode_typ.name %]</option>
[% ELSE %]
<option value="[% barcode_typ.type %]">[% barcode_typ.name %]</option>
[% END %]
[% END %]
</select>
</li>
<li>
<label for="barcode_text_print">Print card number as text under barcode: </label>
[% IF ( barcode_text_print ) %]
<input type="checkbox" name="barcode_text_print" id="barcode_text_print" value="1" checked="checked" />
[% ELSE %]
<input type="checkbox" name="barcode_text_print" id="barcode_text_print" value="1" />
[% END %]
</li>
</ol>
</div>
</fieldset>
</li>
<li>
<fieldset>
<legend>Images</legend>
<ol>
<li>
<fieldset>
<legend>Image 1</legend>
<ol>
<li>
<label for="image_1_image_source">Image source: </label>
<select name="image_1_image_source" id="image_1_image_source">
[% FOREACH image_1_image_sourc IN image_1_image_source %]
[% IF ( image_1_image_sourc.selected ) %]
<option value="[% image_1_image_sourc.type %]" selected="selected">[% image_1_image_sourc.name %]</option>
[% ELSE %]
<option value="[% image_1_image_sourc.type %]">[% image_1_image_sourc.name %]</option>
[% END %]
[% END %]
</select>
</li>
</ol>
<div id="image_1_image_name" style="display: none;">
<ol>
<li>
<label for="image_1_image_name">Image: </label>
<select name="image_1_image_name" id="image_1_image_name">
[% FOREACH image_1_image_nam IN image_1_image_name %]
[% IF ( image_1_image_nam.selected ) %]
<option value="[% image_1_image_nam.type %]" selected="selected">[% image_1_image_nam.name %]</option>
[% ELSE %]
<option value="[% image_1_image_nam.type %]">[% image_1_image_nam.name %]</option>
[% END %]
[% END %]
</select>
</li>
</ol>
</div>
<div id="image_1_image_metrics" style="display: none;">
<ol>
<li>
<label for="image_1_Dx">Display height: </label>
<input type="text" name="image_1_Dx" id="image_1_Dx" size="2" value="[% image_1_Dx |html %]" />
</li>
<li>
<label for="image_1_Tx">Lower left X coordinate: </label>
<input type="text" name="image_1_Tx" id="image_1_Tx" size="2" value="[% image_1_Tx |html %]" />
</li>
<li>
<label for="image_1_Ty">Lower left Y coordinate: </label>
<input type="text" name="image_1_Ty" id="image_1_Ty" size="2" value="[% image_1_Ty |html %]" />
</li>
</ol>
</div>
<!-- These pdf image parameters are currently unused, but implemented and need to default to zero -->
<input type="hidden" name="image_1_Ox" value="0" /><!-- Ox,Oy should be set to 0 unless you want special effects see http://www.adobe.com/devnet/pdf/pdf_reference.html ISO 32000-1 -->
<input type="hidden" name="image_1_Oy" value="0" />
<input type="hidden" name="image_1_Sx" value="0" /><!-- Sx,Sy allow scaling of the image -->
<input type="hidden" name="image_1_Sy" value="0" />
</fieldset>
</li>
<li>
<fieldset>
<legend>Image 2</legend>
<ol>
<li>
<label for="image_2_image_source">Image source: </label>
<select name="image_2_image_source" id="image_2_image_source">
[% FOREACH image_2_image_sourc IN image_2_image_source %]
[% IF ( image_2_image_sourc.selected ) %]
<option value="[% image_2_image_sourc.type %]" selected="selected">[% image_2_image_sourc.name %]</option>
[% ELSE %]
<option value="[% image_2_image_sourc.type %]">[% image_2_image_sourc.name %]</option>
[% END %]
[% END %]
</select>
</li>
</ol>
<div id="image_2_image_name" style="display: none;">
<ol>
<li>
<label for="image_2_image_name">Image: </label>
<select name="image_2_image_name" id="image_2_image_name">
[% FOREACH image_2_image_nam IN image_2_image_name %]
[% IF ( image_2_image_nam.selected ) %]
<option value="[% image_2_image_nam.type %]" selected="selected">[% image_2_image_nam.name %]</option>
[% ELSE %]
<option value="[% image_2_image_nam.type %]">[% image_2_image_nam.name %]</option>
[% END %]
[% END %]
</select>
</li>
</ol>
</div>
<div id="image_2_image_metrics" style="display: none;">
<ol>
<li>
<label for="image_2_Dx">Display height: </label>
<input type="text" name="image_2_Dx" id="image_2_Dx" size="2" value="[% image_2_Dx |html %]" />
</li>
<li>
<label for="image_2_Tx">Lower left X coordinate: </label>
<input type="text" name="image_2_Tx" id="image_2_Tx" size="2" value="[% image_2_Tx |html %]" />
</li>
<li>
<label for="image_2_Ty">Lower left Y coordinate: </label>
<input type="text" name="image_2_Ty" id="image_2_Ty" size="2" value="[% image_2_Ty |html %]" />
</li>
</ol>
</div>
<!-- These pdf image parameters are currently unused, but implemented and need to default to zero -->
<input type="hidden" name="image_2_Ox" value="0" /><!-- Ox,Oy should be set to 0 unless you want special effects see http://www.adobe.com/devnet/pdf/pdf_reference.html ISO 32000-1 -->
<input type="hidden" name="image_2_Oy" value="0" /><!-- Sx,Sy allow scaling of the image -->
<input type="hidden" name="image_2_Sx" value="0" />
<input type="hidden" name="image_2_Sy" value="0" />
</fieldset>
</li>
</ol>
</fieldset>
</li>
</ol>
</fieldset>
</div>
</div>
<fieldset class="action">
<input class="btn btn-default btn-default" type="submit" value="Save" />
<a class="cancel" href="/cgi-bin/koha/patroncards/manage.pl?card_element=layout">Cancel</a>
<input type="hidden" name="op" value="save" />
<input type="hidden" name="layout_id" value="[% layout_id %]" />
</fieldset>
</form>
</div>
</div>
<div class="yui-b">
[% INCLUDE 'tools-menu.inc' %]
</div>
</div>
[% INCLUDE 'intranet-bottom.inc' %]