Mega Code Archive
Toggle Multi select Widget
<![CDATA[
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Multi-select Widget</title>
<script language="JavaScript" type="text/javascript">
<!--
/* ***** BEGIN LICENSE BLOCK *****
* Version: MPL 1.1/GPL 2.0/LGPL 2.1
*
* The contents of this file are subject to the Mozilla Public License Version
* 1.1 (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
* http://www.mozilla.org/MPL/
*
* Software distributed under the License is distributed on an "AS IS" basis,
* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
* for the specific language governing rights and limitations under the
* License.
*
*
* The initial developer of the code is Andy Edmonds.
* Portions created by the Initial Developer are Copyright (C) 2001
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
* Andy Edmonds <andy@uzilla.net>
*
* Alternatively, the contents of this file may be used under the terms of
* either the GNU General Public License Version 2 or later (the "GPL"), or
* the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
* in which case the provisions of the GPL or the LGPL are applicable instead
* of those above. If you wish to allow use of your version of this file only
* under the terms of either the GPL or the LGPL, and not to allow others to
* use your version of this file under the terms of the MPL, indicate your
* decision by deleting the provisions above and replace them with the notice
* and other provisions required by the GPL or the LGPL. If you do not delete
* the provisions above, a recipient may use your version of this file under
* the terms of any one of the MPL, the GPL or the LGPL.
*
* ***** END LICENSE BLOCK ***** */
// CUSTOMIZABLE VALUES
var multis = "methods,datasources,lifecycle";
var isEdit = false; // Using numeric count for number of specified values
var inSequence = true; // Set to false to disable auto-sequential expansion
var autoCollapse = true; // Only allow one container to be expanded at a time
// TRACKING VARIABLES -- do not change
var arMultis = multis.split(",");
var curOpen = false;
var sequenceNum = 0; //Tracker for auto-sequential expansion
var isOpen = -1; // Currently open element for auto-collapse
//,activity,agent,condition";
function initMultiSelect() {
var isEdit = false;
var i, viewSummary, viewOptions;
for(i=0;i<arMultis.length;i++) {
viewSummary = document.getElementById("summary_" + arMultis[i]);
viewOptions = document.getElementById("options_" + arMultis[i]);
// In edit default to all collapsed
// In new mode, default to editing first element
// If any checkbox is selected, dont reset edit flag
if(!isEdit) {
isEdit = populateSummary(viewSummary, viewOptions);
} else {
populateSummary(viewSummary, viewOptions);
}
if(isEdit) inSequence = false;
showSummary(viewSummary, viewOptions);
}
// If it's an edit
if(!isEdit && inSequence) {
var firstField = arMultis[0];
// Show first option panel
showOptions(
document.getElementById("summary_" + firstField),
document.getElementById("options_" + firstField)
)
}
}
function populateSummary(sum,opt) {
var editString = "<input type='button' value='Edit Selections' onclick='showOptions(this.parentNode,this.parentNode.previousSibling);'>";
var curNode;
var numChecked = 0;
var sumStr = '';
// Get all checkboxes inside current div
var inputs = opt.getElementsByTagName("input");
//alert(inputs.length + " inputs in " + opt.id);
for(var i=0;i<inputs.length;i++) {
curNode = inputs.item(i);
//alert(i);
if(curNode.nodeName == "INPUT" && curNode.getAttribute("type") == "checkbox") {
if(curNode.checked) {
if(numChecked > 0) sumStr += "; ";
numChecked++;
sumStr += curNode.getAttribute("value") + '';
//alert("At " + i + " of " + curNode.getAttribute("value"));
}
}
}
// Options selected? summarize. Otherwise? instruct.
if(sumStr.length) {
sum.innerHTML = sumStr + ".<br/>" + editString;
} else {
// No current selectiongs, provide help msg
sum.innerHTML = "Please click Edit Selections to specify" + ".<br/>" + editString;
}
// Pass back positive if items are already checked
return numChecked;
}
function showSummary(sum, opt) {
sum.style.display = 'inline';
opt.style.display = 'none';
isOpen = -1;
}
function showOptions(sum, opt) {
sum.style.display = 'none';
opt.style.display = 'inline';
if(isOpen > -1 && autoCollapse) {
showSummary(
document.getElementById("summary_" + arMultis[isOpen]),
document.getElementById("options_" + arMultis[isOpen])
)
}
isOpen = getOffset(sum.getAttribute("id"));
}
function getOffset(label) {
for(var i=0;i<arMultis.length;i++) {
if(label.indexOf(arMultis[i]) > -1) return i;
}
}
function saveOptions(optNode) {
var sumNode = document.getElementById("summary_" +optNode.getAttribute("id").split("_")[1]);
populateSummary(sumNode,optNode);
showSummary(sumNode,optNode);
if(inSequence) {
// check to see if the user is editing sequentialy
if(optNode.id.indexOf(arMultis[sequenceNum]) > -1) {
// They're editing in sequence
sequenceNum++;
// Is there a next element to show?
if(sequenceNum < arMultis.length) {
var nextField = arMultis[sequenceNum];
showOptions(
document.getElementById("summary_" + nextField),
document.getElementById("options_" + nextField)
)
}
} else {
inSequence = false;
}
}
}
//-->
</script></head>
<body onload="initMultiSelect()">
<table cellpadding="8" cellspacing="0" width="942">
<tbody><tr>
<td valign="top" width="12%">Usability Methods</td>
<td bgcolor="#ffffff" width="88%">
<div style="display: inline;" id="options_methods"><table><tbody><tr><td valign="top">
<input name="methods" value="Card Sorting" id="cardsort" type="checkbox"><label for="carsort">Card Sorting</label><br>
<input name="methods" value="Contextual Task Analysis" id="cta" type="checkbox"><label for="cta">Contextual Task Analysis</label> <br>
<input name="methods" value="Ethnography" id="ethno" type="checkbox"><label for="ethno">Ethnography</label><br>
</td><td valign="top">
<input name="methods" value="Heuristic Review" id="heur" type="checkbox"><label for="heur">Heuristic Review</label><br>
<input name="methods" value="Remote Usability Testing" id="remote" type="checkbox"><label for="remote">Remote Usability Testing</label><br>
<input name="methods" value="Usability Testing" id="ut" type="checkbox"><label for="ut">Usability Testing</label><br>
</td></tr></tbody></table>
<input value="Close" style="float: left;" onclick="saveOptions(this.parentNode);" type="button"></div><div style="display: none;" id="summary_methods">Please click Edit Selections to specify.<br><input value="Edit Selections" onclick="showOptions(this.parentNode,this.parentNode.previousSibling);" type="button"></div>
</td>
</tr>
<tr bgcolor="#dddddd">
<td id="label_activity" valign="top">Datasources</td>
<td valign="top">
<div style="display: none;" id="options_datasources">
<table><tbody><tr><td valign="top">
<input name="methods" value="Competitive Review" ic="comp" type="checkbox"><label for="comp">Competitive Review</label><br>
<input name="methods" value="Performance Data" id="perf" type="checkbox"><label for="perf">Performance Data</label><br>
<input name="methods" value="Verbal Protocol" label="protocol" type="checkbox"><label for="protocol">Verbal Protocol</label><br>
</td><td valign="top">
<input name="methods" value="User Surveys" id="survey" type="checkbox"><label for="survey">User Surveys</label><br>
<input name="methods" value="Support Requests" id="support" type="checkbox"><label for="support">Support Requests</label><br>
<input name="methods" value="Usage Data" id="usage" type="checkbox"><label for="usage">Usage Data</label><br>
</td></tr></tbody></table>
<input value="Close" style="float: left;" onclick="saveOptions(this.parentNode);" type="button"></div><div style="display: inline;" id="summary_datasources">Please click Edit Selections to specify.<br><input value="Edit Selections" onclick="showOptions(this.parentNode,this.parentNode.previousSibling);" type="button"></div>
</td>
</tr><tr><td valign="top">Lifecycle </td>
<td valign="top">
<div style="display: none;" id="options_lifecycle">
<table><tbody><tr><td valign="top">
<input name="methods" value="Acceptance Testing" id="at" type="checkbox"><label for="at">Acceptance Testing</label><br>
<input name="methods" value="Iterative Design" id="iterative" type="checkbox"><label for="iterative">Iterative Design</label><br>
<input name="methods" value="Needs Analysis" id="needs" type="checkbox"><label for="needs">Needs Analysis</label><br>
</td><td valign="top">
<input name="methods" value="Rapid Prototyping" id="proto" type="checkbox"><label for="proto">Rapid prototyping</label><br>
<input name="methods" value="Requirements Definition" id="reqs" type="checkbox"><label for="reqs">Requirements Definition</label><br>
<input name="methods" value="Specification" id="spec" type="checkbox"><label for="spec">Specification</label><br>
</td></tr></tbody></table>
<input value="Close" style="float: left;" onclick="saveOptions(this.parentNode);" type="button"></div><div style="display: inline;" id="summary_lifecycle">Please click Edit Selections to specify.<br><input value="Edit Selections" onclick="showOptions(this.parentNode,this.parentNode.previousSibling);" type="button"></div>
</td>
</tr>
</tbody></table>
</body></html>
]]>