Koha/koha-tmpl/intranet-tmpl/prog/en/modules/patroncards/edit-layout.tt
David Cook 76a1a00977 Bug 9603 - Fix layout of Patron Card Creator Layout screen for display in IE
Currently, the layout for the Edit/Add Layout screen of the Patron
Card Creator is in complete disarray, when viewed in Internet Explorer
(of any version).

The nav bar is pushed to the bottom of the page, every fieldset is
empty (as their contents have been pushed out into different parts
of the page), and the checkboxes don't work.

The cause appears to be some extraneous mark-up (a few extra fieldset
and li elements)and some missing mark-up (ol elements to wrap the list
elements, especially when nesting lists within each other and within
div elements).

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Katrin Fischer <Katrin.Fischer.83@web.de>
I didn't test this in IE, but changes are fixing general
problems with HTML validity.

Checking the page with the W3C validator:
Before: 27 Errors, 7 warning(s)
After:  6 Errors, 7 warning(s)

All tests and QA script pass, page looks alright.
Would be nice to see the remaining problems fixed in
a follow-up.

Signed-off-by: Galen Charlton <gmc@esilibrary.com>
2013-09-04 18:15:51 +00:00

546 lines
36 KiB
Text

[% INCLUDE 'doc-head-open.inc' %]
<title>Koha &rsaquo; Tools &rsaquo; Patron card creator</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").attr("checked"), selectFieldNames[i]+"_select");
}
$("#field_1_enable").change(function(){
$(".field_1_enable").html(Go($(this).attr("checked"), 'field_1_select'));
});
$("#field_2_enable").change(function(){
$(".field_2_enable").html(Go($(this).attr("checked"), 'field_2_select'));
});
$("#field_3_enable").change(function(){
$(".field_3_enable").html(Go($(this).attr("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").attr("checked") ) {
eBarcode.style.display = 'block';
} else {
eBarcode.style.display = 'none';
$('input[name=barcode_text_print]').removeAttr('checked');
}
}
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">Manage patron card layouts</a> &rsaquo;
[% IF ( layout_id ) %]Edit[% ELSE %]Create[% END %] patron card layout
</div>
<div id="doc3" class="yui-t2">
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<!-- 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>
</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_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 implimented 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 implimented 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 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 'patroncards-menu.inc' %]
</div>
</div>
[% INCLUDE 'intranet-bottom.inc' %]