3 [% INCLUDE 'doc-head-open.inc' %]
4 <title>[% IF ( layout_id ) %]Edit ([% layout_id | html %])[% ELSE %]New[% END %] › Layout › Patron card creator › Tools › Koha</title>
5 [% INCLUDE 'doc-head-close.inc' %]
8 <body id="pcard_edit-layout" class="tools pcard">
9 [% WRAPPER 'header.inc' %]
10 [% INCLUDE 'cat-search.inc' %]
13 [% WRAPPER 'sub-header.inc' %]
14 [% WRAPPER breadcrumbs %]
15 [% WRAPPER breadcrumb_item %]
16 <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a>
18 [% WRAPPER breadcrumb_item %]
19 <a href="/cgi-bin/koha/patroncards/home.pl">Patron card creator</a>
21 [% WRAPPER breadcrumb_item %]
22 <a href="/cgi-bin/koha/patroncards/manage.pl?card_element=layout">Layouts</a>
24 [% WRAPPER breadcrumb_item bc_active= 1 %]
25 [% IF ( layout_id ) %]
26 <span>Edit ([% layout_id | html %])</span>
31 [% END #/ WRAPPER breadcrumbs %]
32 [% END #/ WRAPPER sub-header.inc %]
34 <div class="main container-fluid">
36 <div class="col-sm-10 col-sm-push-2">
39 [% INCLUDE 'patroncards-toolbar.inc' %]
41 <h1>[% IF ( layout_id ) %]<span>Edit patron card layout</span> [% layout_id | html %]
42 [% ELSE %]<span>Create patron card layout</span>[% END %]
45 <!-- NOTE: The order of the elements on this form is crictical to correct processing. You've been warned... -->
46 <form name="input" action="/cgi-bin/koha/patroncards/edit-layout.pl" method="get">
48 <div class="col-sm-6">
49 <fieldset class="rows">
50 <legend>[% IF ( layout_id ) %]Edit[% ELSE %]Create[% END %] patron card text layout</legend>
54 <legend>General settings</legend>
57 <label for="layout_name">Layout name: </label>
58 <input type="text" name="layout_name" id="layout_name" size="20" value="[% layout_name | html %]" />
61 <label for="units">Units: </label>
62 <select id="units" name="units">
63 [% FOREACH unit IN units %]
64 [% IF ( unit.selected ) %]
65 <option value="[% unit.type | html %]" selected="selected">
67 <option value="[% unit.type | html %]">
69 [% unit.desc | html %]
75 <label for="page_side">Page side: </label>
76 [% IF ( page_side ) %]
77 <input type="radio" name="page_side" id="page_side" value="F" />Front
78 <input type="radio" name="page_side" id="page_side" value="B" checked="checked" />Back
80 <input type="radio" name="page_side" id="page_side" value="F" checked="checked" />Front
81 <input type="radio" name="page_side" id="page_side" value="B" />Back
85 <label for="guide_box">Guide box:</label>
86 [% IF ( guide_box ) %]
87 <input type="radio" name="guide_box" id="guide_box" value="1" checked="checked" />On
88 <input type="radio" name="guide_box" id="guide_box" value="0" />Off
90 <input type="radio" name="guide_box" id="guide_box" value="1" />On
91 <input type="radio" name="guide_box" id="guide_box" value="0" checked="checked" />Off
95 <label for="guide_grid">Guide grid:</label>
96 [% IF ( guide_grid ) %]
97 <input type="radio" name="guide_grid" id="guide_grid" value="1" checked="checked" />On
98 <input type="radio" name="guide_grid" id="guide_grid" value="0" />Off
100 <input type="radio" name="guide_grid" id="guide_grid" value="1" />On
101 <input type="radio" name="guide_grid" id="guide_grid" value="0" checked="checked" />Off
109 <legend>Text fields</legend>
114 <legend><input type="checkbox" name="field_1_enable" id="field_1_enable" value="1" checked="checked" /> Field 1</legend>
116 <legend><input type="checkbox" name="field_1_enable" id="field_1_enable" value="1" /> Field 1</legend>
118 <div id="field_1_select" style="display: none;">
121 <label for="field_1_text">Text: </label>
122 <input type="text" name="field_1_text" id="field_1_text" size="60" value="[% field_1_text | html %]" />
125 <label for="field_1_font">Font: </label>
126 <select name="field_1_font" id="field_1_font">
127 [% FOREACH field_1_fon IN field_1_font %]
128 [% IF ( field_1_fon.selected ) %]
129 <option value="[% field_1_fon.type | html %]" selected="selected">[% field_1_fon.name | html %]</option>
131 <option value="[% field_1_fon.type | html %]">[% field_1_fon.name | html %]</option>
137 <label for="field_1_font_size">Font size: </label>
138 <input type="text" name="field_1_font_size" id="field_1_font_size" size="2" value="[% field_1_font_size | html %]" />
139 <span class="font_unit"> pt</span>
142 <label for="field_1_text_alignment">Text alignment: </label>
143 <select name="field_1_text_alignment" id="field_1_text_alignment">
144 [% FOREACH field_1_text_alignmen IN field_1_text_alignment %]
145 [% IF ( field_1_text_alignmen.selected ) %]
146 <option value="[% field_1_text_alignmen.type | html %]" selected="selected">[% field_1_text_alignmen.name | html %]</option>
148 <option value="[% field_1_text_alignmen.type | html %]">[% field_1_text_alignmen.name | html %]</option>
154 <label for="field_1_llx">Lower left X coordinate: </label>
155 <input type="text" name="field_1_llx" id="field_1_llx" size="2" value="[% field_1_llx | html %]" />
158 <label for="field_1_lly">Lower left Y coordinate: </label>
159 <input type="text" name="field_1_lly" id="field_1_lly" size="2" value="[% field_1_lly | html %]" />
168 <legend><input type="checkbox" name="field_2_enable" id="field_2_enable" value="1" checked="checked"/> Field 2</legend>
170 <legend><input type="checkbox" name="field_2_enable" id="field_2_enable" value="1" /> Field 2</legend>
172 <div id="field_2_select" style="display: none;">
175 <label for="field_2_text">Text: </label>
176 <input type="text" name="field_2_text" id="field_2_text" size="60" value="[% field_2_text | html %]" />
179 <label for="field_2_font">Font: </label>
180 <select name="field_2_font" id="field_2_font">
181 [% FOREACH field_2_fon IN field_2_font %]
182 [% IF ( field_2_fon.selected ) %]
183 <option value="[% field_2_fon.type | html %]" selected="selected">[% field_2_fon.name | html %]</option>
185 <option value="[% field_2_fon.type | html %]">[% field_2_fon.name | html %]</option>
191 <label for="field_2_font_size">Font size: </label>
192 <input type="text" name="field_2_font_size" id="field_2_font_size" size="2" value="[% field_2_font_size | html %]" />
193 <span class="font_unit"> pt</span>
196 <label for="field_2_text_alignment">Text alignment: </label>
197 <select name="field_2_text_alignment" id="field_2_text_alignment">
198 [% FOREACH field_2_text_alignmen IN field_2_text_alignment %]
199 [% IF ( field_2_text_alignmen.selected ) %]
200 <option value="[% field_2_text_alignmen.type | html %]" selected="selected">[% field_2_text_alignmen.name | html %]</option>
202 <option value="[% field_2_text_alignmen.type | html %]">[% field_2_text_alignmen.name | html %]</option>
208 <label for="field_2_llx">Lower left X coordinate: </label>
209 <input type="text" name="field_2_llx" id="field_2_llx" size="2" value="[% field_2_llx | html %]" />
212 <label for="field_2_lly">Lower left Y coordinate: </label>
213 <input type="text" name="field_2_lly" id="field_2_lly" size="2" value="[% field_2_lly | html %]" />
222 <legend><input type="checkbox" name="field_3_enable" id="field_3_enable" value="1" checked="checked"/> Field 3</legend>
224 <legend><input type="checkbox" name="field_3_enable" id="field_3_enable" value="0" /> Field 3</legend>
226 <div id="field_3_select" style="display: none;">
229 <label for="field_3_text">Text: </label>
230 <input type="text" name="field_3_text" id="field_3_text" size="60" value="[% field_3_text | html %]" />
233 <label for="field_3_font">Font: </label>
234 <select name="field_3_font" id="field_3_font">
235 [% FOREACH field_3_fon IN field_3_font %]
236 [% IF ( field_3_fon.selected ) %]
237 <option value="[% field_3_fon.type | html %]" selected="selected">[% field_3_fon.name | html %]</option>
239 <option value="[% field_3_fon.type | html %]">[% field_3_fon.name | html %]</option>
245 <label for="field_3_font_size">Font size: </label>
246 <input type="text" name="field_3_font_size" id="field_3_font_size" size="2" value="[% field_3_font_size | html %]" />
247 <span class="font_unit"> pt</span>
250 <label for="field_3_text_alignment">Text alignment: </label>
251 <select name="field_3_text_alignment" id="field_3_text_alignment">
252 [% FOREACH field_3_text_alignmen IN field_3_text_alignment %]
253 [% IF ( field_3_text_alignmen.selected ) %]
254 <option value="[% field_3_text_alignmen.type | html %]" selected="selected">[% field_3_text_alignmen.name | html %]</option>
256 <option value="[% field_3_text_alignmen.type | html %]">[% field_3_text_alignmen.name | html %]</option>
262 <label for="field_3_llx">Lower left X coordinate: </label>
263 <input type="text" name="field_3_llx" id="field_3_llx" size="2" value="[% field_3_llx | html %]" />
266 <label for="field_3_lly">Lower left Y coordinate: </label>
267 <input type="text" name="field_3_lly" id="field_3_lly" size="2" value="[% field_3_lly | html %]" />
279 <div class="col-sm-6">
280 <fieldset class="rows">
281 <legend>[% IF ( layout_id ) %]<span>Edit patron card graphic layout</span>
282 [% ELSE %]<span>Create patron card graphic layout</span>[% END %]
288 <label for="guidebox">Draw guide boxes: </label>
289 [% IF ( guidebox ) %]
290 <input type="checkbox" name="guidebox" id="guidebox" value="1" checked="checked" />
292 <input type="checkbox" name="guidebox" id="guidebox" value="1" />
299 <legend>Barcode</legend>
302 <label for="barcode_print">Print card number as barcode: </label>
303 [% IF ( barcode_print ) %]
304 <input type="checkbox" name="barcode_print" id="barcode_print" value="1" checked="checked" />
306 <input type="checkbox" name="barcode_print" id="barcode_print" value="1" />
310 <div id="barcode_param" style="display: none;">
313 <label for="barcode_llx">Lower left X coordinate: </label>
314 <input type="text" name="barcode_llx" id="barcode_llx" size="2" value="[% barcode_llx | html %]" />
317 <label for="barcode_lly">Lower left Y coordinate: </label>
318 <input type="text" name="barcode_lly" id="barcode_lly" size="2" value="[% barcode_lly | html %]" />
321 <label for="barcode_height_scale">Scale height (relative to card): </label>
322 <input type="text" name="barcode_height_scale" id="barcode_height_scale" size="2" value="[% barcode_height_scale | html %]" />
325 <label for="barcode_width_scale">Scale width (relative to card): </label>
326 <input type="text" name="barcode_width_scale" id="barcode_width_scale" size="2" value="[% barcode_width_scale | html %]" />
329 <label for="barcode_type">Barcode type: </label>
330 <select name="barcode_type" id="barcode_type">
331 [% FOREACH barcode_typ IN barcode_type %]
332 [% IF ( barcode_typ.selected ) %]
333 <option value="[% barcode_typ.type | html %]" selected="selected">[% barcode_typ.name | html %]</option>
335 <option value="[% barcode_typ.type | html %]">[% barcode_typ.name | html %]</option>
341 <label for="barcode_text_print">Print card number as text under barcode: </label>
342 [% IF ( barcode_text_print ) %]
343 <input type="checkbox" name="barcode_text_print" id="barcode_text_print" value="1" checked="checked" />
345 <input type="checkbox" name="barcode_text_print" id="barcode_text_print" value="1" />
354 <legend>Images</legend>
358 <legend>Image 1</legend>
361 <label for="image_1_image_source">Image source: </label>
362 <select name="image_1_image_source" id="image_1_image_source">
363 [% FOREACH image_1_image_sourc IN image_1_image_source %]
364 [% IF ( image_1_image_sourc.selected ) %]
365 <option value="[% image_1_image_sourc.type | html %]" selected="selected">[% image_1_image_sourc.name | html %]</option>
367 <option value="[% image_1_image_sourc.type | html %]">[% image_1_image_sourc.name | html %]</option>
373 <div id="image_1_image_name" style="display: none;">
376 <label for="image_1_image_name">Image: </label>
377 <select name="image_1_image_name" id="image_1_image_name">
378 [% FOREACH image_1_image_nam IN image_1_image_name %]
379 [% IF ( image_1_image_nam.selected ) %]
380 <option value="[% image_1_image_nam.type | html %]" selected="selected">[% image_1_image_nam.name | html %]</option>
382 <option value="[% image_1_image_nam.type | html %]">[% image_1_image_nam.name | html %]</option>
389 <div id="image_1_image_metrics" style="display: none;">
392 <label for="image_1_Dx">Display height: </label>
393 <input type="text" name="image_1_Dx" id="image_1_Dx" size="2" value="[% image_1_Dx | html %]" />
396 <label for="image_1_Tx">Lower left X coordinate: </label>
397 <input type="text" name="image_1_Tx" id="image_1_Tx" size="2" value="[% image_1_Tx | html %]" />
400 <label for="image_1_Ty">Lower left Y coordinate: </label>
401 <input type="text" name="image_1_Ty" id="image_1_Ty" size="2" value="[% image_1_Ty | html %]" />
405 <!-- These pdf image parameters are currently unused, but implemented and need to default to zero -->
406 <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 -->
407 <input type="hidden" name="image_1_Oy" value="0" />
408 <input type="hidden" name="image_1_Sx" value="0" /><!-- Sx,Sy allow scaling of the image -->
409 <input type="hidden" name="image_1_Sy" value="0" />
414 <legend>Image 2</legend>
417 <label for="image_2_image_source">Image source: </label>
418 <select name="image_2_image_source" id="image_2_image_source">
419 [% FOREACH image_2_image_sourc IN image_2_image_source %]
420 [% IF ( image_2_image_sourc.selected ) %]
421 <option value="[% image_2_image_sourc.type | html %]" selected="selected">[% image_2_image_sourc.name | html %]</option>
423 <option value="[% image_2_image_sourc.type | html %]">[% image_2_image_sourc.name | html %]</option>
429 <div id="image_2_image_name" style="display: none;">
432 <label for="image_2_image_name">Image: </label>
433 <select name="image_2_image_name" id="image_2_image_name">
434 [% FOREACH image_2_image_nam IN image_2_image_name %]
435 [% IF ( image_2_image_nam.selected ) %]
436 <option value="[% image_2_image_nam.type | html %]" selected="selected">[% image_2_image_nam.name | html %]</option>
438 <option value="[% image_2_image_nam.type | html %]">[% image_2_image_nam.name | html %]</option>
445 <div id="image_2_image_metrics" style="display: none;">
448 <label for="image_2_Dx">Display height: </label>
449 <input type="text" name="image_2_Dx" id="image_2_Dx" size="2" value="[% image_2_Dx | html %]" />
452 <label for="image_2_Tx">Lower left X coordinate: </label>
453 <input type="text" name="image_2_Tx" id="image_2_Tx" size="2" value="[% image_2_Tx | html %]" />
456 <label for="image_2_Ty">Lower left Y coordinate: </label>
457 <input type="text" name="image_2_Ty" id="image_2_Ty" size="2" value="[% image_2_Ty | html %]" />
461 <!-- These pdf image parameters are currently unused, but implemented and need to default to zero -->
462 <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 -->
463 <input type="hidden" name="image_2_Oy" value="0" /><!-- Sx,Sy allow scaling of the image -->
464 <input type="hidden" name="image_2_Sx" value="0" />
465 <input type="hidden" name="image_2_Sy" value="0" />
475 <fieldset class="action">
476 <input class="btn btn-primary" type="submit" value="Save" />
477 <a class="cancel" href="/cgi-bin/koha/patroncards/manage.pl?card_element=layout">Cancel</a>
478 <input type="hidden" name="op" value="save" />
479 <input type="hidden" name="layout_id" value="[% layout_id | html %]" />
484 </div> <!-- /.col-sm-10.col-sm-push-2 -->
486 <div class="col-sm-2 col-sm-pull-10">
488 [% INCLUDE 'tools-menu.inc' %]
490 </div> <!-- /.col-sm-2.col-sm-pull-10 -->
491 </div> <!-- /.row -->
493 [% MACRO jsinclude BLOCK %]
495 $(document).ready(function() {
496 var selectedUnit = $("#units option:selected").val();
497 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");
498 $(unitfields).after("<span class=\"unit\">"+getUnit(selectedUnit)+"</span>");
499 $("#units").change(function(){
500 $(".unit").html(getUnit($(this).val()));
502 Go($("#image_1_image_source").val(), 'image_1_image_name');
503 Go($("#image_1_image_source").val(), 'image_1_image_metrics');
504 $("#image_1_image_source").change(function(){
505 $(".image_1_image_source").html(Go($(this).val(), 'image_1_image_name'));
506 $(".image_1_image_source").html(Go($(this).val(), 'image_1_image_metrics'));
508 Go($("#image_2_image_source").val(), 'image_2_image_name');
509 Go($("#image_2_image_source").val(), 'image_2_image_metrics');
510 $("#image_2_image_source").change(function(){
511 $(".image_2_image_source").html(Go($(this).val(), 'image_2_image_name'));
512 $(".image_2_image_source").html(Go($(this).val(), 'image_2_image_metrics'));
514 var selectFieldNames = ["field_1","field_2","field_3"];
515 for (var i=0; i < selectFieldNames.length; i++) {
516 Go($("#"+selectFieldNames[i]+"_enable").prop("checked"), selectFieldNames[i]+"_select");
518 $("#field_1_enable").change(function(){
519 $(".field_1_enable").html(Go($(this).prop("checked"), 'field_1_select'));
521 $("#field_2_enable").change(function(){
522 $(".field_2_enable").html(Go($(this).prop("checked"), 'field_2_select'));
524 $("#field_3_enable").change(function(){
525 $(".field_3_enable").html(Go($(this).prop("checked"), 'field_3_select'));
527 $("#barcode_print").load(barcode_text('barcode_param'));
528 $("#barcode_print").change(function(){
529 barcode_text('barcode_param');
531 function barcode_text(division) {
532 var eBarcode = document.getElementById(division);
533 if( $("input[name=barcode_print]:checked").prop("checked") ) {
534 eBarcode.style.display = 'block';
536 eBarcode.style.display = 'none';
537 $('input[name=barcode_text_print]').prop('checked', false);
540 function getUnit(unit){
562 function Go(oSelect, oElement){
563 var element = document.getElementById(oElement);
565 case /^.*_name/.test(oElement):
566 if ((oSelect == 'patronimages') || (oSelect == 'none')) {
567 element.style.display = 'none';
569 element.style.display = 'block';
572 case /^.*_metrics/.test(oElement):
573 if ((oSelect == 'none') || (oSelect == '')) {
574 element.style.display = 'none';
576 element.style.display = 'block';
579 case /^.*_select/.test(oElement):
581 element.style.display = 'none';
583 element.style.display = 'block';
595 [% INCLUDE 'intranet-bottom.inc' %]