Context Navigation

ConfModifBadgeDesign.tpl @ dad7bd

hello-world-walkthroughipv6v0.98-seriesv0.98.2v0.98.3v0.98b2v0.99v1.0v1.1

Last change on this file since dad7bd was dad7bd, checked in by Pedro Ferreira <jose.pedro.ferreira@…>, 19 months ago
[FIX] Badges: background image upload
Property mode set to `100644`
File size: 29.1 KB

Line
1	<script type="text/javascript">
2	var snapToGrid = false;
3
4	// Dimensions of the template space, in pixels
5	var templateDimensions;
6
7	// Previous dimensions of the template space, in cm
8	var previousTemplateDimensions;
9
10	// Number of pixels per cm
11	var pixelsPerCm = 50;
12
13	// Id of the background used
14	var backgroundId = -1;
15
16	// Number of pixels, both horizontal and vertical, that are between the top left corner
17	// and the position where items are inserted
18	var initialOffset = pixelsPerCm;
19
20	// Id of the next element to be inserted
21	var itemId = -1;
22
23	// Common parts of many elements
24	var elementCommon1 = '<table border="2" cellpadding="0" cellspacing="0" style="cursor:move;" width="200"><tbody><tr><td align="center">';
25	var elementCommon2 = '</td></tr></tbody></table>';
26
27	// Last selected item (holds the div for that item)
28	var lastSelectedDiv = null;
29
30	// Translation dictionary from key to name in current language.
31	var translate = ${translateName};
32
33	// List of badge template items
34	var items = [];
35
36	// Item class
37	function Item(itemId, key) {
38	this.id = itemId;
39	this.key = key;
40	this.x = initialOffset;
41	this.y = initialOffset;
42	this.fontFamily = "Times New Roman";
43	this.bold = false;
44	this.italic = false;
45	this.textAlign = "Center";
46	this.color = "black";
47	this.fontSize = "medium";
48	this.width = 400;
49	this.text = "(Type your text)" // Only for fixed text items
50
51	// The following attributes have no meaning to the server
52	this.selected = false;
53	this.fontFamilyIndex = 0;
54	this.styleIndex = 0;
55	this.textAlignIndex = 2; //Center
56	this.colorIndex = 0;
57	this.fontSizeIndex = 3; //Medium
58	}
59
60	Item.prototype.toHTML = function () {
61	return '<table border="2" cellpadding="0" cellspacing="0"' +
62	' width="' + this.width + '"' +
63	' style="background-color: '+(this.selected ? "#ccf" : "#fff")+';cursor:move; font-weight:' + (this.bold ? 'bold' : 'normal') + '; font-style:' + (this.italic ? 'italic' : 'normal') +
64	'; text-align: ' + this.textAlign.replace('Justified', 'justify') + ';"' +
65	'><tbody><tr><td><span style="color:' + this.color + '; font-family: ' + this.fontFamily + '; font-size:' + this.fontSize + ';">' +
66	(this.key == "Fixed Text" ? this.text : translate[this.key]) +
67	'</span></td></tr></tbody></table>';
68	}
69
70	// Dimensions class
71	function Dimensions(width, height) {
72	this.width = width
73	this.height = height
74	}
75
76	// This function creates a new draggable div
77	function createDiv() {
78	// Each div has:
79	// -a unique id, which is a natural number (0, 1, 2, ...)
80	// -a type (stored in the name attribute)
81	// -absolute x,y position
82	// -an inner HTML with its content
83	itemId++;
84
85	var newDiv = $('<div/>', {
86	id: itemId
87	}).css({
88	position: 'absolute',
89	left: initialOffset + 'px',
90	top: initialOffset + 'px',
91	zIndex: itemId + 10
92	}).appendTo('#templateDiv');
93
94	newDiv.draggable({
95	containment: '#templateDiv',
96	stack: '#templateDiv > div',
97	opacity: 0.5,
98	drag: function(e, ui) {
99	if (snapToGrid) {
100	ui.position.left = Math.floor(ui.position.left / 10) * 10;
101	ui.position.top = Math.floor(ui.position.top / 10) * 10;
102	}
103	},
104	stop: function(e, ui) {
105	items[this.id].x = ui.position.left;
106	items[this.id].y = ui.position.top;
107	}
108	});
109
110	return newDiv;
111	}
112
113	// This function inserts the selected element in the blank space where badge template designing takes place
114	function insertElement() {
115	var newDiv = createDiv();
116	// We set the inner html of the div depending on the type of item inserted
117	switch($('#elementList').val()) {
118	${ switchCases }
119	}
120
121	if (!lastSelectedDiv) {
122	markSelected(newDiv);
123	}
124
125	initialOffset += 10;
126	}
127
128	function removeElement() {
129	if (lastSelectedDiv) {
130	items[lastSelectedDiv.attr('id')] = false;
131	lastSelectedDiv.remove();
132	$('#selection_text').html('');
133	lastSelectedDiv = null;
134	$('#removeButton').prop('disabled', true);
135	}
136	}
137
138	function markSelected(newSelectedDiv) {
139	// Change the text that says which item is selected
140	var id = newSelectedDiv.attr('id');
141	$('#selection_text').html(translate[items[id].key]);
142
143	// TODO: add check to see if there's a table inside and not an image
144
145	// Change the background color of the old selected item and the new selected item
146	if (lastSelectedDiv) {
147	var lastId = lastSelectedDiv.attr('id');
148	items[lastId].selected = false;
149	lastSelectedDiv.find('> table').css('backgroundColor', '#fff');
150	}
151
152	var newSelectedItem = items[id];
153	newSelectedItem.selected = true;
154	newSelectedDiv.find('> table').css('backgroundColor', '#ccf');
155	lastSelectedDiv = newSelectedDiv;
156	$('#removeButton').prop('disabled', false);
157
158	// Change the selectors so that they match the properties of the item
159	$('#alignment_selector').prop('selectedIndex', newSelectedItem.textAlignIndex);
160	$('#font_selector').prop('selectedIndex', newSelectedItem.fontFamilyIndex);
161	$('#size_selector').prop('selectedIndex', newSelectedItem.fontSizeIndex);
162	$('#style_selector').prop('selectedIndex', newSelectedItem.styleIndex);
163	$('#color_selector').prop('selectedIndex', newSelectedItem.colorIndex);
164	$('#width_field').val(newSelectedItem.width / pixelsPerCm);
165	if (newSelectedItem.key == "Fixed Text") {
166	$('#fixed_text_field').val(newSelectedItem.text).prop('disabled', false);
167	$('#changeText').prop('disabled', false);
168	} else {
169	$('#fixed_text_field').val("").prop('disabled', true);
170	$('#changeText').prop('disabled', true);
171	}
172	}
173
174	function updateRulers() {
175	if (templateDimensions.width > previousTemplateDimensions.width) {
176	var hRuler = $('#horizontal_ruler');
177	for (var i = Math.ceil(previousTemplateDimensions.width / pixelsPerCm); i < Math.ceil(templateDimensions.width / pixelsPerCm); i++) {
178	$('<td/>', {
179	id: 'rulerh' + i
180	}).html('<img src="${ baseURL }/images/ruler/rulerh' + i + '.png" align="center"/>').appendTo(hRuler);
181	}
182	}
183	else if (templateDimensions.width < previousTemplateDimensions.width) {
184	for (var i = Math.ceil(previousTemplateDimensions.width / pixelsPerCm); i > Math.ceil(templateDimensions.width / pixelsPerCm); i--) {
185	$('#rulerh' + (i - 1)).remove();
186	}
187	}
188
189	if (templateDimensions.height > previousTemplateDimensions.height) {
190	var vRuler = $('#vertical_ruler');
191	for (var i = Math.ceil(previousTemplateDimensions.height / pixelsPerCm); i < Math.ceil(templateDimensions.height / pixelsPerCm); i++) {
192	$('<tr/>', {
193	id: 'rulerv' + i
194	}).append('<td><img src="${ baseURL }/images/ruler/rulerv' + i + '.png" align="center"/></td>').appendTo(vRuler);
195	}
196	}
197	else if (templateDimensions.height < previousTemplateDimensions.height) {
198	for (i = Math.ceil(previousTemplateDimensions.height / pixelsPerCm); i > Math.ceil(templateDimensions.height / pixelsPerCm); i--) {
199	$('#rulerv' + (i - 1)).remove();
200	}
201	}
202	}
203
204	// This function displays all the items in the 'items' array on the screen
205	// If there are already some items being displayed, it does not erase them
206	function displayItems() {
207	$.each(items, function(i, item) {
208	var newDiv = createDiv();
209	newDiv.css({
210	left: item.x + 'px',
211	top: item.y + 'px'
212	});
213	newDiv.html(item.toHTML());
214	if (item.selected) {
215	markSelected(newDiv);
216	}
217	});
218	}
219
220
221	function changeTemplateSize() {
222	var tpl = $('#templateDiv');
223	tpl.width($('#badge_width').val() * pixelsPerCm);
224	tpl.height($('#badge_height').val() * pixelsPerCm);
225	previousTemplateDimensions.width = templateDimensions.width;
226	previousTemplateDimensions.height = templateDimensions.height;
227	templateDimensions = new Dimensions($('#badge_width').val() * pixelsPerCm, $('#badge_height').val() * pixelsPerCm);
228	updateRulers();
229	if (backgroundId != -1) {
230	var url = $('#background').attr('src');
231	$('#background').remove();
232	displayBackground(url);
233	}
234	}
235
236	var moveFuncs = {
237	left: function() {
238	if (lastSelectedDiv) {
239	lastSelectedDiv.css('left', 0);
240	items[lastSelectedDiv.attr('id')].x = 0 + "px";
241	}
242	},
243	right: function() {
244	if (lastSelectedDiv) {
245	lastSelectedDiv.css('left', (templateDimensions.width - lastSelectedDiv.width() - 1) + "px"); // -1 because of the table border
246	items[lastSelectedDiv.attr('id')].x = (templateDimensions.width - lastSelectedDiv.width() - 1) + "px";
247	}
248	},
249	center: function() {
250	if (lastSelectedDiv) {
251	lastSelectedDiv.css('left', ((templateDimensions.width - lastSelectedDiv.width() - 1) / 2) + "px");
252	lastSelectedDiv.css('top', ((templateDimensions.height - lastSelectedDiv.height() - 1) / 2) + "px");
253	items[lastSelectedDiv.attr('id')].x = ((templateDimensions.width - lastSelectedDiv.width() - 1) / 2) + "px";
254	items[lastSelectedDiv.attr('id')].y = ((templateDimensions.height - lastSelectedDiv.height() - 1) / 2) + "px";
255	}
256	},
257	top: function() {
258	if (lastSelectedDiv) {
259	lastSelectedDiv.css('top', 0);
260	items[lastSelectedDiv.attr('id')].y = 0 + "px";
261	}
262	},
263	bottom: function() {
264	if (lastSelectedDiv) {
265	lastSelectedDiv.css('top', (templateDimensions.height - lastSelectedDiv.height() - 1) + "px");
266	items[lastSelectedDiv.attr('id')].y = (templateDimensions.height - lastSelectedDiv.height() - 1) + "px";
267	}
268	}
269	};
270
271	var attrFuncs = {
272	font: function() {
273	if (lastSelectedDiv) {
274	var item = items[lastSelectedDiv.attr('id')];
275	item.fontFamily = $('#font_selector').val();
276	item.fontFamilyIndex = $('#font_selector').prop('selectedIndex');
277	lastSelectedDiv.html(item.toHTML());
278	}
279	},
280	color: function() {
281	if (lastSelectedDiv) {
282	var item = items[lastSelectedDiv.attr('id')];
283	item.color = $('#color_selector').val();
284	item.colorIndex = $('#color_selector').prop('selectedIndex');
285	lastSelectedDiv.html(item.toHTML());
286	}
287	},
288	alignment: function() {
289	if (lastSelectedDiv) {
290	var item = items[lastSelectedDiv.attr('id')];
291	item.textAlign = $('#alignment_selector').val();
292	item.textAlignIndex = $('#alignment_selector').prop('selectedIndex');
293	lastSelectedDiv.html(item.toHTML());
294	}
295	},
296	size: function() {
297	if (lastSelectedDiv) {
298	var item = items[lastSelectedDiv.attr('id')];
299	item.fontSize = $('#size_selector').val();
300	item.fontSizeIndex = $('#size_selector').prop('selectedIndex');
301	lastSelectedDiv.html(item.toHTML());
302	}
303	},
304	style: function() {
305	if (lastSelectedDiv) {
306	var item = items[lastSelectedDiv.attr('id')];
307	switch($('#style_selector').val()) {
308	case "normal":
309	item.bold = false;
310	item.italic = false;
311	break;
312	case "bold":
313	item.bold = true;
314	item.italic = false;
315	break;
316
317	case "italic":
318	item.bold = false;
319	item.italic = true;
320	break;
321
322	case "bold_italic":
323	item.bold = true;
324	item.italic = true;
325	break;
326	}
327
328	item.styleIndex = $('#style_selector').prop('selectedIndex');
329	lastSelectedDiv.html(item.toHTML());
330	}
331	},
332	text: function() {
333	if (lastSelectedDiv) {
334	var item = items[lastSelectedDiv.attr('id')];
335	item.text = unescapeHTML($('#fixed_text_field').val());
336	$('#fixed_text_field').val(item.text);
337	lastSelectedDiv.html(item.toHTML());
338	}
339	},
340	width: function() {
341	if (lastSelectedDiv) {
342	var item = items[lastSelectedDiv.attr('id')];
343	item.width = $('#width_field').val() * pixelsPerCm;
344	lastSelectedDiv.html(item.toHTML());
345	}
346	}
347	};
348
349
350	function save() {
351	if ($('#template_name').val() == '') {
352	alert("Please choose a name for the template");
353	return;
354	}
355	var template = [];
356	template.push($('#template_name').val());
357	template.push(templateDimensions, pixelsPerCm);
358	template.push(backgroundId);
359
360	template.push(items);
361	$('#templateData').val(Json.write(template));
362	$('#saveForm').submit();
363	}
364
365	function sent() {
366	var iframeDocument = $('#uploadTarget')[0].contentDocument \|\| $('#uploadTarget')[0].contentWindow;
367	if (iframeDocument.document) {
368	iframeDocument = iframeDocument.document;
369	}
370
371	try {
372	if (backgroundId != -1) {
373	$('#background').remove();
374	}
375	backgroundId = $('#background_id', iframeDocument).html();
376	var backgroundURL = $('#background_url', iframeDocument).html();
377	displayBackground(backgroundURL);
378	}
379	catch (err) {
380	$('#loadingIcon').hide();
381	}
382	}
383
384	function displayBackground(backgroundURL) {
385	$('<img/>', {
386	id: 'background',
387	src: backgroundURL
388	}).css({
389	position: 'absolute',
390	left: 0,
391	top: 0,
392	height: templateDimensions.height + 'px',
393	width: templateDimensions.width + 'px',
394	zIndex: 5
395	}).load(function() {
396	$('#loadingIcon').hide();
397	}).appendTo('#templateDiv');
398	}
399
400	function removeBackground() {
401	if (backgroundId != -1) {
402	backgroundId = -1;
403	$('#background').remove();
404	}
405	}
406
407	function unescapeHTML(str) {
408	// taken from Prototype
409	return str.replace(/<\w+(\s+("[^"]"\|'[^']'\|[^>])+)?>\|<\/\w+>/gi, '').replace(/</g,'<').replace(/>/g,'>').replace(/&/g,'&');
410	}
411
412	$(document).ready(function() {
413	// select items on mousedown
414	$('#templateDiv > div').live('mousedown', function() {
415	markSelected($(this));
416	});
417
418	// toggle grid/snap mode
419	$('#snap_checkbox').change(function() {
420	snapToGrid = this.checked;
421	}).change();
422
423	// show a throbber when uploading a background
424	$('#bgForm').submit(function() {
425	$('#uploadTarget').one('load', sent);
426	$('#loadingIcon').show();
427	});
428
429	$('#removeBackground').click(function(e) {
430	e.preventDefault();
431	removeBackground();
432	});
433
434	$('.moveButton').click(function(e) {
435	e.preventDefault();
436	var dir = $(this).data('direction');
437	moveFuncs[dir]();
438	});
439
440	$('.attrButton').click(function(e) {
441	e.preventDefault();
442	var attr = $(this).data('attr');
443	attrFuncs[attr]();
444	});
445
446	$('.attrSelect').change(function() {
447	var attr = $(this).data('attr');
448	attrFuncs[attr]();
449	});
450
451	$('#changeTemplateSize').click(function(e) {
452	e.preventDefault();
453	changeTemplateSize();
454	});
455
456	$('#insertButton').click(function(e) {
457	e.preventDefault();
458	insertElement();
459	});
460
461	$('#removeButton').click(function(e) {
462	e.preventDefault();
463	removeElement();
464	});
465
466	$('#saveButton').click(function(e) {
467	e.preventDefault();
468	save();
469	});
470	});
471	</script>
472
473	<!-- CONTEXT HELP DIVS -->
474	<div id="tooltipPool" style="display: none">
475	<!-- Where is key? -->
476	<div id="features" class="tip">
477	<b>FullName can have four different formats:</b><br>
478	- <b>FullName</b>: Mr. DOE, Jonh<br>
479	- <b>Full Name (w/o title)</b>: DOE, Jonh<br>
480	- <b>FullName B</b>: Mr. Jonh Doe<br>
481	- <b>FullName B Full Name (w/o title)</b>: Jonh Doe<br>
482	</div>
483	</div>
484	<!-- END OF CONTEXT HELP DIVS -->
485
486
487	<iframe id="uploadTarget" name="uploadTarget" src="" style="width:0px;height:0px;border:0"></iframe>
488
489	<div style="width:100%">
490	<br/>
491
492	<table class="groupTable" cellpadding="0">
493	<tbody>
494	<tr>
495	<td class="groupTitle" colspan="6">${titleMessage}</td>
496	</tr>
497	<tr>
498	<td class="titleCellTD">
499	<span class="titleCellFormat"> ${ _("Name")}</span>
500	</td>
501	<td colspan="5">
502	<input id="template_name" size="50" name="Template Name">
503	</td>
504	</tr>
505	<tr>
506	<td class="titleCellTD">
507	<span class="titleCellFormat"> ${ _("Background")}<br><small>(${ _("picture file in jpeg, png or gif")})</small></span>
508	</td>
509	<form id="bgForm" action="${ saveBackgroundURL }" method="POST" enctype="multipart/form-data" target="uploadTarget">
510	<td height="20px" NOWRAP align="left" colspan="3">
511	<input name="file" size="58" type="file">
512	<input class="btn" value="${ _("Send File")}" type="submit">
513	<input class="btn" type="button" value="${ _("Remove background")}" id="removeBackground">
514	</td>
515	</form>
516	<td width="100%" align="left" colspan="4">
517	<img id="loadingIcon" src=${loadingIconURL} width="20px" height="20px" style="display:none;">
518	</td>
519	</tr>
520	<tr>
521	<td class="titleCellTD" NOWRAP>
522	<span class="titleCellFormat">Badge Width (cm, decimals ok) </span>
523	</td>
524	<td>
525	<input id="badge_width" name="Badge Width" size="5">
526	</td>
527	<td class="titleCellTD" NOWRAP>
528	<span class="titleCellFormat">Badge Height (cm, decimals ok) </span>
529	</td>
530	<td>
531	<input id="badge_height" name="Badge Height" size="5">
532	<input class="btn" value="${ _("Change")}" type="button" id="changeTemplateSize">
533	</td>
534	</tr>
535	</tbody>
536	</table>
537
538	<br/>
539
540	<table class="groupTable" border="0" cellpadding="0" cellspacing="0">
541
542	<tbody>
543
544	<tr>
545
546	<td width="220px" rowspan="2" valign="top"> <!-- Width attribute necessary so that the template design space doesn't move depending on selection text-->
547	<span class="titleCellFormat">${ _("Elements")}</span>
548
549	<br/><br/>
550
551	<input name="insertButton" id="insertButton" class="btn" value="${ _("Insert")}" type="button">
552	<input name="removeButton" id="removeButton" class="btn" value="${ _("Remove")}" type="button" disabled="disabled">
553
554	<br/><br/>
555
556	<select name="Template Elements List" id="elementList">
557	${selectOptions}
558	</select>${contextHelp('features' )}
559
560	<br/>
561	<br/>
562
563	${ _("Selection")}: <span id="selection_text"></span>
564	<br/><br/>
565
566	${ _("Position")}:
567	<br/>
568
569	<table>
570	<tbody>
571	<tr>
572	<td></td>
573	<td align="center">
574	<input name="Move Template Element Top Button" class="btn moveButton" value="${ _("Top")}" type="button" data-direction="top">
575	</td>
576	<td></td>
577	</tr>
578	<tr>
579	<td align="center">
580	<input name="Move Template Element Left Button" class="btn moveButton" value="${ _("Left")}" type="button" data-direction="left">
581	</td>
582	<td align="center">
583	<input name="Move Template Element Center Button" class="btn moveButton" value="${ _("Center")}" type="button" data-direction="center">
584	</td>
585	<td align="center">
586	<input name="Move Template Element Right Button" class="btn moveButton" value="${ _("Right")}" type="button" data-direction="right">
587	</td>
588	</tr>
589	<tr>
590	<td></td>
591	<td align="center">
592	<input name="Move Template Element Bottom Button" class="btn moveButton" value="${ _("Bottom")}" type="button" data-direction="bottom">
593	</td>
594	<td></td>
595	</tr>
596	<tr>
597	</tbody>
598	</table>
599
600	<input id="snap_checkbox" type="checkbox"/><label for="snap_checkbox">${ _("Snap to grid")}</label>
601
602	</td>
603
604	<td></td>
605
606	<td align="left" valign="bottom" height="22px"> <!-- height of the horizontal ruler images -->
607	<table border="0" cellpadding="0" cellspacing="0">
608	<tbody>
609	<tr id="horizontal_ruler">
610	</tr>
611	</tbody>
612	</table>
613	</td>
614	</tr>
615
616	<tr>
617	<td valign="top" align="right" width="22px"> <!-- width of the vertical ruler image -->
618	<table border="0" cellpadding="0" cellspacing="0" align="right">
619	<tbody id="vertical_ruler">
620	</tbody>
621	</table>
622	</td>
623
624	<td align="left" valign="top">
625	<div id="templateDiv" style="width:425px;height:270px;position:relative;left:0px;top:0px"> <!-- put here the initial dimensions of templateDiv -->
626	<table border="1" style="border-style: none;" width="100%" height="100%" cellspacing="0" cellpadding="0">
627	<tbody>
628	<tr><td></td></tr>
629	</tbody>
630	</table>
631	</div>
632	</td>
633	</tr>
634	</tbody>
635	</table>
636
637	<br/>
638
639	<table class="groupTable" cellpadding="0" cellspacing="0">
640
641	<tbody>
642
643	<tr>
644	<td colspan="3" rowspan="1" class="titleCellFormat"> ${ _("Attributes")}</td>
645	<td></td>
646	<td></td>
647	</tr>
648
649	<tr>
650
651	<td class="titleCellTD">
652	<span class="titleCellFormat"> ${ _("Font")} </span>
653	</td>
654
655	<td colspan="2">
656	<select id='font_selector' name="Template Element Font" class="attrSelect" data-attr="font">
657	<optgroup label="${ _('Normal Fonts') }">
658	<option>Times New Roman</option>
659	<option>Courier</option>
660	<option>Sans</option>
661	</optgroup>
662	<optgroup label="${ _('Special Character Fonts') }">
663	<option>LinuxLibertine</option>
664	<option>Kochi-Mincho</option>
665	<option>Kochi-Gothic</option>
666	<option>Uming-CN</option>
667	<!--
668	<option>Bitstream Cyberbit</option>
669	<option>Free Serif</option>
670	-->
671	</optgroup>
672	</select>
673	</td>
674
675	<td class="titleCellTD">
676	<span class="titleCellFormat"> ${ _("Color")} </span>
677	</td>
678
679	<td width="100%">
680	<select id='color_selector' name="Template Element Color" class="attrSelect" data-attr="color">
681	<option value="black"> ${ _("black")}</option>
682	<option value="red"> ${ _("red")}</option>
683	<option value="blue"> ${ _("blue")}</option>
684	<option value="green"> ${ _("green")}</option>
685	<option value="yellow"> ${ _("yellow")}</option>
686	<option value="brown"> ${ _("brown")}</option>
687	<option value="gold"> ${ _("gold")}</option>
688	<option value="pink"> ${ _("pink")}</option>
689	<option value="gray"> ${ _("gray")}</option>
690	<option value="white"> ${ _("white")}</option>
691	</select>
692	</td>
693
694	</tr>
695
696	<tr>
697
698	<td class="titleCellTD">
699	<span class="titleCellFormat"> ${ _("Style")} </span>
700	</td>
701
702	<td colspan="2">
703	<select id='style_selector' name="Template Element Style" class="attrSelect" data-attr="style">
704	<option value="normal"> ${ _("Normal")}</option>
705	<option value="bold"> ${ _("Bold")}</option>
706	<option value="italic"> ${ _("Italic")}</option>
707	<option value="bold_italic"> ${ _("Bold & Italic")}</option>
708	</select>
709	</td>
710
711	<td class="titleCellTD">
712	<span class="titleCellFormat"> ${ _("Size")} </span>
713	</td>
714
715	<td width="100%">
716	<select id='size_selector' name="Template Element Size" class="attrSelect" data-attr="size">
717	<option value="xx-small"> ${ _("xx-small")}</option>
718	<option value="x-small"> ${ _("x-small")}</option>
719	<option value="small"> ${ _("small")}</option>
720	<option value="medium" SELECTED> ${ _("medium")}</option>
721	<option value="large"> ${ _("large")}</option>
722	<option value="x-large"> ${ _("x-large")}</option>
723	<option value="xx-large"> ${ _("xx-large")}</option>
724	</select>
725	</td>
726	</tr>
727
728	<tr>
729	<td class="titleCellTD">
730	<span class="titleCellFormat"> ${ _("Alignment")} </span>
731	</td>
732	<td colspan="2">
733	<select id='alignment_selector' name="Template Element Alignment" class="attrSelect" data-attr="alignment">
734	<!-- Note: the value of the options is used directly in the style attribute of the items -->
735	<option value="Left"> ${ _("Left")}</option>
736	<option value="Right"> ${ _("Right")}</option>
737	<option value="Center"> ${ _("Center")}</option>
738	<option value="Justified"> ${ _("Justified")}</option>
739	</select>
740	</td>
741	<td class="titleCellTD">
742	<span class="titleCellFormat"> ${ _("Width (cm)")} </span>
743	</td>
744	<td width="100%">
745	<input id="width_field" size="5" name="Element Size">
746	<input class="btn attrButton" value="${ _("Change")}" type="button" data-attr="width">
747	</td>
748	</tr>
749	<tr>
750	<td class="titleCellTD" NOWRAP>
751	<span class="titleCellFormat"> ${ _("Text (for Fixed Text)")} </span>
752	</td>
753	<td>
754	<input id="fixed_text_field" size="30" name="Element Size" disabled="disabled">
755	</td>
756	<td>
757	<input class="btn attrButton" value="${ _("Change")}" type="button" data-attr="text" id="changeText" disabled="disabled">
758	</td>
759	<td></td>
760	<td></td>
761	</tr>
762	</tbody>
763	</table>
764	<br/>
765	<table class="groupTable">
766	<tbody>
767	<tr>
768	<td colspan="4" align="center" width="100%">
769	<input class="btn" name="Save Template Button" value="${ _("Save")}" type="button" id="saveButton">
770	<input class="btn" name="Cancel Button" value="${ _("Cancel")}" type="button" onclick="location.href='${cancelURL}'">
771	</td>
772	</tr>
773	</tbody>
774	</table>
775
776	<form id="saveForm" action="${saveTemplateURL}" method="POST">
777	<input name="templateId" value="${templateId}" type="hidden">
778	<input id="templateData" name="templateData" type="hidden">
779	</form>
780
781
782	<script type="text/javascript">
783	// We load the template if we are editing a template
784	if (${ editingTemplate }) {
785	var template = ${ templateData };
786	$('#template_name').val(template[0]);
787	$('#templateDiv').width(template[1].width).height(template[1].height);
788	items = template[4];
789	// We give the toHTML() method to each of the items
790	$.each(items, function(i, item) {
791	item.toHTML = Item.prototype.toHTML;
792	});
793	templateDimensions = new Dimensions(template[1].width, template[1].height);
794	} else {
795	templateDimensions = new Dimensions(425, 270); //put here the initial dimensions of templateDiv
796	}
797
798	previousTemplateDimensions = new Dimensions(0,0);
799
800	$('#badge_width').val(templateDimensions.width / pixelsPerCm);
801	$('#badge_height').val(templateDimensions.height / pixelsPerCm);
802
803	updateRulers(); // creates the initial rulers
804	changeTemplateSize();
805
806	// This function displays the items, if any have been loaded, on the screen
807	displayItems();
808
809	if (${ editingTemplate } && ${ hasBackground }) {
810	backgroundId = ${ backgroundId };
811	displayBackground("${ backgroundURL }");
812	}
813
814	</script>
815
816	</div>

Note: See TracBrowser for help on using the repository browser.

Download in other formats:

Original Format