Skip to content

Commit b03a10c

Browse files
author
Richard Jones
committed
new improved help controls
1 parent 24cb13e commit b03a10c

File tree

3 files changed

+249
-97
lines changed

3 files changed

+249
-97
lines changed
Lines changed: 55 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,58 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
12
<html>
2-
<head>
3-
<link rel="stylesheet" type="text/css" href="_file/style.css">
4-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8;">
5-
<script language="JavaScript"
6-
tal:condition="python:request.form.has_key('property')"
7-
tal:content="structure string:
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="_file/style.css" />
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8;" />
6+
<tal:block tal:condition="python:request.form.has_key('property')">
7+
<title tal:content="string:${request/form/property/value} help">Property</title>
8+
<script language="Javascript" type="text/javascript"
9+
tal:content="structure string:
10+
// this is the name of the field in the original form that we're working on
11+
field = '${request/form/property/value}';" >
12+
</script>
13+
<script src="_file/help_controls.js" type="text/javascript"><!--
14+
//--></script>
15+
</tal:block>
16+
</head>
17+
<body class="body" marginwidth="0" marginheight="0" onload="resetList();">
18+
<form name="frm_help" action="">
19+
20+
<div id="classhelp-controls">
21+
<!--input type="button" name="btn_clear"
22+
value="Clear" onClick="clearList()"/ -->
23+
<input type="text" name="text_preview" size="24" class="preview"
24+
onchange="reviseList(this.value);"/>
25+
<input type="button" name="btn_reset"
26+
value=" Cancel " onclick="resetList(); window.close();"/>
27+
<input type="button" name="btn_apply" class="apply"
28+
value=" Apply " onclick="updateList(); window.close();"/>
29+
</div>
830

9-
// this is the name of the field in the original form that we're working on
10-
field = '${request/form/property/value}';
31+
<table class="classhelp"
32+
tal:define="props python:request.form['properties'].value.split(',')">
33+
<tr>
34+
<th>&nbsp;<b>x</b></th>
35+
<th tal:repeat="prop props" tal:content="prop"></th>
36+
</tr>
37+
<tr tal:repeat="item context/list">
38+
<td>
39+
<input type="checkbox" name="check"
40+
onclick="updatePreview();"
41+
tal:define="attr python:item[props[0]]"
42+
tal:attributes="value attr; id attr" />
43+
</td>
44+
<td tal:repeat="prop props">
45+
<label class="classhelp-label"
46+
tal:attributes="for python:item[props[0]]"
47+
tal:content="structure python:item[prop]"></label>
48+
</td>
49+
</tr>
50+
<tr>
51+
<th>&nbsp;<b>x</b></th>
52+
<th tal:repeat="prop props" tal:content="prop"></th>
53+
</tr>
54+
</table>
1155

12-
function listClose() {
13-
window.close();
14-
}
15-
16-
function listClear() {
17-
window.opener.document.itemSynopsis[field].value = '';
18-
}
19-
20-
function pick(opt) {
21-
if (window.opener && !window.opener.closed) {
22-
window.opener.document.itemSynopsis[field].value = opt;
23-
}
24-
}
25-
26-
// add a value to the form field
27-
function add(opt) {
28-
val = window.opener.document.itemSynopsis[field].value;
29-
if (/^\s*$$/.test(val)) {
30-
newval = opt; // existing is all whitespace, so just replace
31-
} else {
32-
newval = val + ', ' + opt;
33-
}
34-
pick(newval);
35-
}
36-
37-
// remove a value from the form field
38-
function remove(opt) {
39-
// ((opt(,\s*)?)|(,\s*opt))
40-
replaceStr = new String('(('+opt+'(,\\s*)?)|(,\\s*'+opt+'))');
41-
re = new RegExp(replaceStr);
42-
43-
str = window.opener.document.itemSynopsis[field].value;
44-
45-
// replace occurences with empty string
46-
newstr = str.replace(re, '');
47-
pick(newstr);
48-
}
49-
">
50-
</script>
51-
</head>
52-
53-
<body class="body" marginwidth="0" marginheight="0">
54-
<form>
55-
<div style="padding:10px;text-align:center;">
56-
<script language="javascript">
57-
// put up a 'reset' button if the field has values when we pop up this window
58-
59-
// this is the name of the field in the original form that we're working on
60-
orig = window.opener.document.itemSynopsis[field].value;
61-
if (/[^\s]/.test(orig)) {
62-
reset = '<input type="button" onclick="pick(orig);" ' +
63-
'value="Reset to original values" /> | ';
64-
document.write(reset);
65-
}
66-
</script>
67-
<input type="button"
68-
tal:attributes="value string:Clear all ${request/form/property/value} values"
69-
onclick="listClear();" /> |
70-
<input type="button" onclick="listClose();" value="Close this window" />
71-
</div>
72-
73-
<table class="classhelp"
74-
tal:define="props python:request.form['properties'].value.split(',')">
75-
<tr>
76-
<th tal:condition="python:request.form.has_key('property')">add/remove</th>
77-
<th tal:repeat="prop props" tal:content="prop"></th>
78-
</tr>
79-
<tr tal:repeat="item context/list">
80-
<td tal:condition="python:request.form.has_key('property')">
81-
<input type="button" tal:define="opt python: item[props[0]]"
82-
tal:attributes="onclick string:add('${opt}')" value=" + ">
83-
<input type="button" tal:define="opt python: item[props[0]]"
84-
tal:attributes="onclick string:remove('${opt}')" value=" - " />
85-
</td>
86-
<td tal:repeat="prop props" tal:content="structure python:item[prop]"></td>
87-
</tr>
88-
</table>
89-
</form>
90-
</body>
91-
</html>
56+
</form>
57+
</body>
58+
</html>
Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
// initial values for either Nosy, Superceder, Topic and Waiting On,
2+
// depecding on which has called
3+
4+
original_field = window.opener.document.itemSynopsis[field].value;
5+
6+
7+
// pop() and push() methods for pre5.5 IE browsers
8+
9+
function bName() {
10+
// test for IE
11+
if (navigator.appName == "Microsoft Internet Explorer")
12+
return 1;
13+
return 0;
14+
}
15+
16+
function bVer() {
17+
// return version number (e.g., 4.03)
18+
msieIndex = navigator.appVersion.indexOf("MSIE") + 5;
19+
return(parseFloat(navigator.appVersion.substr(msieIndex,3)));
20+
}
21+
22+
function pop() {
23+
// make a pop method for old IE browsers
24+
var lastElement = this[this.length - 1];
25+
this.length--;
26+
return lastElement;
27+
}
28+
29+
function push() {
30+
// make a pop method for old IE browsers
31+
var sub = this.length;
32+
for (var i = 0; i < push.arguments.length; ++i) {
33+
this[sub] = push.arguments[i];
34+
sub++;
35+
}
36+
}
37+
38+
// add the pop() and push() method to Array prototype for old IE browser
39+
if (bName() == 1 && bVer() >= 5.5);
40+
else {
41+
Array.prototype.pop = pop;
42+
Array.prototype.push = push;
43+
}
44+
45+
function trim(value) {
46+
var temp = value;
47+
var obj = /^(\s*)([\W\w]*)(\b\s*$)/;
48+
if (obj.test(temp)) { temp = temp.replace(obj, '$2'); }
49+
var obj = / /g;
50+
while (temp.match(obj)) { temp = temp.replace(obj, " "); }
51+
return temp;
52+
}
53+
54+
function updateList() {
55+
// write back to opener window
56+
var list = new Array();
57+
for (box=0; box < document.frm_help.check.length; box++) {
58+
if (document.frm_help.check[box].checked) {
59+
list.push(document.frm_help.check[box].value);
60+
}
61+
}
62+
window.opener.document.itemSynopsis[field].value = list.join(",");
63+
}
64+
65+
function updatePreview() {
66+
// add new checkbox selections to preview
67+
var list = new Array();
68+
for (box=0; box < document.frm_help.check.length; box++) {
69+
if (document.frm_help.check[box].checked) {
70+
list.push(document.frm_help.check[box].value);
71+
}
72+
}
73+
listString = new String(list.join(','));
74+
writePreview(listString);
75+
}
76+
77+
function clearList() {
78+
// uncheck all checkboxes
79+
for (box=0; box < document.frm_help.check.length; box++) {
80+
document.frm_help.check[box].checked = false;
81+
}
82+
}
83+
84+
function reviseList(vals) {
85+
// update the checkboxes based on the preview field
86+
var to_check;
87+
var list = vals.split(",");
88+
for (box=0; box < document.frm_help.check.length; box++) {
89+
check = document.frm_help.check[box];
90+
to_check = false;
91+
for (val in list) {
92+
if (check.value==trim(list[val])) {
93+
to_check = true;
94+
break;
95+
}
96+
}
97+
check.checked = to_check;
98+
}
99+
}
100+
101+
function resetList() {
102+
// reset preview and check boxes to initial values
103+
var to_check;
104+
var list = original_field.split(',');
105+
writePreview(list);
106+
for (box=0; box < document.frm_help.check.length; box++) {
107+
check = document.frm_help.check[box];
108+
to_check = false;
109+
for (val in list) {
110+
if (check.value==trim(list[val])) {
111+
to_check = true;
112+
break;
113+
}
114+
}
115+
check.checked = to_check;
116+
}
117+
}
118+
119+
function writePreview(val) {
120+
// writes a value to the text_preview
121+
document.forms[0].text_preview.value = val;
122+
}
123+
124+
function focusField(name) {
125+
for(i=0; i < document.forms.length; ++i) {
126+
var obj = document.forms[i].elements[name];
127+
if (obj && obj.focus) {obj.focus();}
128+
}
129+
}
130+
131+
function selectField(name) {
132+
for(i=0; i < document.forms.length; ++i) {
133+
var obj = document.forms[i].elements[name];
134+
if (obj && obj.focus){obj.focus();}
135+
if (obj && obj.select){obj.select();}
136+
}
137+
}
138+

templates/classic/html/style.css

Lines changed: 56 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -265,26 +265,73 @@ table.classlist th {
265265

266266

267267
/* style for class help display */
268-
table.classhelp {
269-
border-spacing: 0px;
270-
border-collapse: separate;
271-
width: 100%;
268+
table.classhelp { /* the table-layout: fixed; */
269+
table-layout: fixed; /* compromises quality for speed */
270+
overflow: hidden;
271+
font-size: .9em;
272+
padding-bottom: 3em;
272273
}
273274

274275
table.classhelp th {
275-
font-weight: bold;
276+
font-weight: normal;
276277
text-align: left;
277-
color: #707040;
278+
color: #444444;
279+
background-color: #efefef;
280+
border-bottom: 1px solid #afafaf;
281+
border-top: 1px solid #afafaf;
282+
text-transform: uppercase;
283+
vertical-align: middle;
284+
line-height:1.5em;
278285
}
279286

280287
table.classhelp td {
281-
padding: 2 2 2 2;
282-
border: 1px solid black;
288+
vertical-align: middle;
289+
padding-right: .2em;
290+
border-bottom: 1px solid #efefef;
291+
text-align: left;
292+
empty-cells: show;
293+
}
294+
295+
table.classhelp td {
296+
white-space: nowrap;
297+
vertical-align: middle;
298+
padding-right: .2em;
299+
border-bottom: 1px solid #efefef;
283300
text-align: left;
284-
vertical-align: top;
285301
empty-cells: show;
286302
}
287303

304+
table.classhelp tr:hover {
305+
background-color: #eeeeee;
306+
}
307+
308+
label.classhelp-label {
309+
cursor: pointer;
310+
}
311+
312+
#classhelp-controls {
313+
position: fixed;
314+
display: block;
315+
top: auto;
316+
right: 0;
317+
bottom: 0;
318+
left: 0;
319+
padding: .5em;
320+
border-top: 2px solid #444444;
321+
background-color: #eeeeee;
322+
}
323+
324+
#classhelp-controls input.apply {
325+
width: 7em;
326+
font-weight: bold;
327+
margin-right: 2em;
328+
margin-left: 2em;
329+
}
330+
331+
#classhelp-controls input.preview {
332+
margin-right: 3em;
333+
margin-left: 1em;
334+
}
288335

289336
/* style for "other" displays */
290337
table.otherinfo {

0 commit comments

Comments
 (0)