Mercurial > p > roundup > code
changeset 1608:49dd1bf17d66
new improved help controls
| author | Richard Jones <richard@users.sourceforge.net> |
|---|---|
| date | Thu, 24 Apr 2003 05:38:11 +0000 |
| parents | 8b0bd0b897e6 |
| children | 7625bf9feec1 |
| files | templates/classic/html/_generic.help.html templates/classic/html/help_controls.js templates/classic/html/style.css |
| diffstat | 3 files changed, 249 insertions(+), 97 deletions(-) [+] |
line wrap: on
line diff
--- a/templates/classic/html/_generic.help.html Thu Apr 24 04:28:33 2003 +0000 +++ b/templates/classic/html/_generic.help.html Thu Apr 24 05:38:11 2003 +0000 @@ -1,91 +1,58 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> -<head> -<link rel="stylesheet" type="text/css" href="_file/style.css"> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8;"> -<script language="JavaScript" - tal:condition="python:request.form.has_key('property')" - tal:content="structure string: - -// this is the name of the field in the original form that we're working on -field = '${request/form/property/value}'; - -function listClose() { - window.close(); -} - -function listClear() { - window.opener.document.itemSynopsis[field].value = ''; -} - -function pick(opt) { - if (window.opener && !window.opener.closed) { - window.opener.document.itemSynopsis[field].value = opt; - } -} - -// add a value to the form field -function add(opt) { - val = window.opener.document.itemSynopsis[field].value; - if (/^\s*$$/.test(val)) { - newval = opt; // existing is all whitespace, so just replace - } else { - newval = val + ', ' + opt; - } - pick(newval); -} - -// remove a value from the form field -function remove(opt) { - // ((opt(,\s*)?)|(,\s*opt)) - replaceStr = new String('(('+opt+'(,\\s*)?)|(,\\s*'+opt+'))'); - re = new RegExp(replaceStr); - - str = window.opener.document.itemSynopsis[field].value; + <head> + <link rel="stylesheet" type="text/css" href="_file/style.css" /> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8;" /> + <tal:block tal:condition="python:request.form.has_key('property')"> + <title tal:content="string:${request/form/property/value} help">Property</title> + <script language="Javascript" type="text/javascript" + tal:content="structure string: + // this is the name of the field in the original form that we're working on + field = '${request/form/property/value}';" > + </script> + <script src="_file/help_controls.js" type="text/javascript"><!-- + //--></script> + </tal:block> + </head> + <body class="body" marginwidth="0" marginheight="0" onload="resetList();"> + <form name="frm_help" action=""> + + <div id="classhelp-controls"> + <!--input type="button" name="btn_clear" + value="Clear" onClick="clearList()"/ --> + <input type="text" name="text_preview" size="24" class="preview" + onchange="reviseList(this.value);"/> + <input type="button" name="btn_reset" + value=" Cancel " onclick="resetList(); window.close();"/> + <input type="button" name="btn_apply" class="apply" + value=" Apply " onclick="updateList(); window.close();"/> + </div> - // replace occurences with empty string - newstr = str.replace(re, ''); - pick(newstr); -} -"> -</script> -</head> - -<body class="body" marginwidth="0" marginheight="0"> -<form> -<div style="padding:10px;text-align:center;"> - <script language="javascript"> - // put up a 'reset' button if the field has values when we pop up this window + <table class="classhelp" + tal:define="props python:request.form['properties'].value.split(',')"> + <tr> + <th> <b>x</b></th> + <th tal:repeat="prop props" tal:content="prop"></th> + </tr> + <tr tal:repeat="item context/list"> + <td> + <input type="checkbox" name="check" + onclick="updatePreview();" + tal:define="attr python:item[props[0]]" + tal:attributes="value attr; id attr" /> + </td> + <td tal:repeat="prop props"> + <label class="classhelp-label" + tal:attributes="for python:item[props[0]]" + tal:content="structure python:item[prop]"></label> + </td> + </tr> + <tr> + <th> <b>x</b></th> + <th tal:repeat="prop props" tal:content="prop"></th> + </tr> + </table> - // this is the name of the field in the original form that we're working on - orig = window.opener.document.itemSynopsis[field].value; - if (/[^\s]/.test(orig)) { - reset = '<input type="button" onclick="pick(orig);" ' + - 'value="Reset to original values" /> | '; - document.write(reset); - } - </script> - <input type="button" - tal:attributes="value string:Clear all ${request/form/property/value} values" - onclick="listClear();" /> | - <input type="button" onclick="listClose();" value="Close this window" /> -</div> - -<table class="classhelp" - tal:define="props python:request.form['properties'].value.split(',')"> -<tr> - <th tal:condition="python:request.form.has_key('property')">add/remove</th> - <th tal:repeat="prop props" tal:content="prop"></th> -</tr> -<tr tal:repeat="item context/list"> - <td tal:condition="python:request.form.has_key('property')"> - <input type="button" tal:define="opt python: item[props[0]]" - tal:attributes="onclick string:add('${opt}')" value=" + "> - <input type="button" tal:define="opt python: item[props[0]]" - tal:attributes="onclick string:remove('${opt}')" value=" - " /> - </td> - <td tal:repeat="prop props" tal:content="structure python:item[prop]"></td> -</tr> -</table> -</form> -</body> -</html> + </form> + </body> +</html> \ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/templates/classic/html/help_controls.js Thu Apr 24 05:38:11 2003 +0000 @@ -0,0 +1,138 @@ +// initial values for either Nosy, Superceder, Topic and Waiting On, +// depecding on which has called + +original_field = window.opener.document.itemSynopsis[field].value; + + +// pop() and push() methods for pre5.5 IE browsers + +function bName() { + // test for IE + if (navigator.appName == "Microsoft Internet Explorer") + return 1; + return 0; +} + +function bVer() { + // return version number (e.g., 4.03) + msieIndex = navigator.appVersion.indexOf("MSIE") + 5; + return(parseFloat(navigator.appVersion.substr(msieIndex,3))); +} + +function pop() { + // make a pop method for old IE browsers + var lastElement = this[this.length - 1]; + this.length--; + return lastElement; +} + +function push() { + // make a pop method for old IE browsers + var sub = this.length; + for (var i = 0; i < push.arguments.length; ++i) { + this[sub] = push.arguments[i]; + sub++; + } +} + +// add the pop() and push() method to Array prototype for old IE browser +if (bName() == 1 && bVer() >= 5.5); +else { + Array.prototype.pop = pop; + Array.prototype.push = push; +} + +function trim(value) { + var temp = value; + var obj = /^(\s*)([\W\w]*)(\b\s*$)/; + if (obj.test(temp)) { temp = temp.replace(obj, '$2'); } + var obj = / /g; + while (temp.match(obj)) { temp = temp.replace(obj, " "); } + return temp; +} + +function updateList() { + // write back to opener window + var list = new Array(); + for (box=0; box < document.frm_help.check.length; box++) { + if (document.frm_help.check[box].checked) { + list.push(document.frm_help.check[box].value); + } + } + window.opener.document.itemSynopsis[field].value = list.join(","); +} + +function updatePreview() { + // add new checkbox selections to preview + var list = new Array(); + for (box=0; box < document.frm_help.check.length; box++) { + if (document.frm_help.check[box].checked) { + list.push(document.frm_help.check[box].value); + } + } + listString = new String(list.join(',')); + writePreview(listString); +} + +function clearList() { + // uncheck all checkboxes + for (box=0; box < document.frm_help.check.length; box++) { + document.frm_help.check[box].checked = false; + } +} + +function reviseList(vals) { + // update the checkboxes based on the preview field + var to_check; + var list = vals.split(","); + for (box=0; box < document.frm_help.check.length; box++) { + check = document.frm_help.check[box]; + to_check = false; + for (val in list) { + if (check.value==trim(list[val])) { + to_check = true; + break; + } + } + check.checked = to_check; + } +} + +function resetList() { + // reset preview and check boxes to initial values + var to_check; + var list = original_field.split(','); + writePreview(list); + for (box=0; box < document.frm_help.check.length; box++) { + check = document.frm_help.check[box]; + to_check = false; + for (val in list) { + if (check.value==trim(list[val])) { + to_check = true; + break; + } + } + check.checked = to_check; + } +} + +function writePreview(val) { + // writes a value to the text_preview + document.forms[0].text_preview.value = val; +} + +function focusField(name) { + for(i=0; i < document.forms.length; ++i) { + var obj = document.forms[i].elements[name]; + if (obj && obj.focus) {obj.focus();} + } +} + +function selectField(name) { + for(i=0; i < document.forms.length; ++i) { + var obj = document.forms[i].elements[name]; + if (obj && obj.focus){obj.focus();} + if (obj && obj.select){obj.select();} + } +} +
--- a/templates/classic/html/style.css Thu Apr 24 04:28:33 2003 +0000 +++ b/templates/classic/html/style.css Thu Apr 24 05:38:11 2003 +0000 @@ -265,26 +265,73 @@ /* style for class help display */ -table.classhelp { - border-spacing: 0px; - border-collapse: separate; - width: 100%; +table.classhelp { /* the table-layout: fixed; */ + table-layout: fixed; /* compromises quality for speed */ + overflow: hidden; + font-size: .9em; + padding-bottom: 3em; } table.classhelp th { - font-weight: bold; + font-weight: normal; text-align: left; - color: #707040; + color: #444444; + background-color: #efefef; + border-bottom: 1px solid #afafaf; + border-top: 1px solid #afafaf; + text-transform: uppercase; + vertical-align: middle; + line-height:1.5em; +} + +table.classhelp td { + vertical-align: middle; + padding-right: .2em; + border-bottom: 1px solid #efefef; + text-align: left; + empty-cells: show; } table.classhelp td { - padding: 2 2 2 2; - border: 1px solid black; + white-space: nowrap; + vertical-align: middle; + padding-right: .2em; + border-bottom: 1px solid #efefef; text-align: left; - vertical-align: top; empty-cells: show; } +table.classhelp tr:hover { + background-color: #eeeeee; +} + +label.classhelp-label { + cursor: pointer; +} + +#classhelp-controls { + position: fixed; + display: block; + top: auto; + right: 0; + bottom: 0; + left: 0; + padding: .5em; + border-top: 2px solid #444444; + background-color: #eeeeee; +} + +#classhelp-controls input.apply { + width: 7em; + font-weight: bold; + margin-right: 2em; + margin-left: 2em; +} + +#classhelp-controls input.preview { + margin-right: 3em; + margin-left: 1em; +} /* style for "other" displays */ table.otherinfo {
