You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
413 lines
14 KiB
413 lines
14 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
|
|
<title>dojox.form.CheckedMultiSelect</title> |
|
|
|
<link rel="stylesheet" id="themeStyles" href="../../../dijit/themes/claro/claro.css"> |
|
<link rel="stylesheet" href="../resources/CheckedMultiSelect.css"> |
|
|
|
<style> |
|
@import url(../../../dojo/resources/dojo.css); |
|
@import url(../../../dijit/tests/css/dijitTests.css); |
|
.ark { text-decoration: underline; } |
|
</style> |
|
|
|
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true, async: true"></script> |
|
|
|
<script src="../../../dijit/tests/_testCommon.js"></script> |
|
|
|
<script type="text/javascript"> |
|
require(["doh", "dojo/_base/array", "dojo/_base/lang", "dojo/dom-form", "dojo/on", "dojo/parser", "dojo/ready", |
|
"dojox/form/CheckedMultiSelect", "dijit/form/Button", "dijit/form/Form", "dojo/data/ItemFileReadStore", |
|
"dojo/data/ItemFileWriteStore", "dojo/store/Memory" |
|
], function(doh, array, lang, domForm, on, parser, ready, CheckedMultiSelect, Button, Form, ItemFileReadStore, |
|
ItemFileWriteStore, Memory){ |
|
|
|
var data = { |
|
identifier: "value", |
|
label: "label", |
|
items: [ |
|
{value: "AL", label: "Alabama"}, |
|
{value: "AK", label: "Alaska"}, |
|
{value: "AZ", label: "Arizona"}, |
|
{value: "AR", label: "Arkansas"}, |
|
{value: "CA", label: "California"}, |
|
{value: "CO", label: "Colorado"}, |
|
{value: "CT", label: "Connecticut"} |
|
] |
|
}; |
|
|
|
readStore = new ItemFileReadStore({data:lang.clone(data)}); |
|
writeStore = new ItemFileWriteStore({data:lang.clone(data)}); |
|
objectStore = new Memory({data:lang.clone(data.items), idProperty:"value"}); |
|
|
|
numOptions = 0; |
|
var addNum = 10; |
|
var testType; |
|
itemCounter=0; // for disabled/readOnly add item button |
|
// Uncomment below line to run perf tests - note SLOW to run |
|
//testType = "perf"; |
|
|
|
ready(function(){ |
|
parser.parse(); |
|
|
|
doh.register("tests", |
|
[ |
|
function test_setValue(t){ |
|
t.is(["VA","WA"], form.get("value").ms1); |
|
t.is(["TX","GA"], form.get("value").ms2); |
|
ms1.set("value", ["TN","CA"]); |
|
t.is(["TN","CA"], form.get("value").ms1); |
|
ms1.invertSelection(); |
|
t.is(["VA","WA","FL"], form.get("value").ms1); |
|
}, |
|
function test_addSelected(t){ |
|
array.forEach(ms2.getOptions(ms2.get("value")), function(i){ |
|
ms2.removeOption(i); |
|
ms1.addOption(i); |
|
}); |
|
t.is([], form.get("value").ms2); |
|
ms1.invertSelection(); |
|
t.is(["TN","CA"], form.get("value").ms1); |
|
}, |
|
function delete_selected(t){ |
|
t.is(["TN","CA"], ms1.get("value")); |
|
var d = new doh.Deferred(); |
|
ms1.removeOption("CA"); |
|
window.setTimeout(function(){ |
|
try{ |
|
t.is(["TN"], ms1.get("value")); |
|
d.callback(true); |
|
}catch(e){ d.errback(e); } |
|
}, 100); |
|
return d; |
|
}, |
|
function test_storeBased(t){ |
|
t.is([], ms4.get("value")); |
|
ms4.set("value", ["CA","AL"]); |
|
t.is(["AL","CA"], ms4.get("value")); |
|
|
|
t.is([], ms6.get("value")); |
|
ms6.set("value", ["CA","AL"]); |
|
t.is(["AL","CA"], ms6.get("value")); |
|
}, |
|
function test_changeSelected(t){ |
|
t.is([], ms5.get("value")); |
|
ms5.set("value", ["AL", "AK"]); |
|
var d = new doh.Deferred(); |
|
var cb = function(item){ |
|
try{ |
|
writeStore.setValue(item, "label", "North Pole"); |
|
try{ |
|
t.is(["AL","AK"], ms5.get("value")); |
|
t.is(writeStore.getValue(item, "label"), |
|
array.filter(ms5._getChildren(), function(n){return n.option.value==="AK";})[0].labelNode.innerHTML); |
|
d.callback(true); |
|
}catch(e){ d.errback(e);} |
|
} |
|
catch(e){ |
|
d.errback(e); |
|
} |
|
} |
|
writeStore.fetchItemByIdentity({identity: "AK", onItem: cb}); |
|
return d; |
|
}, |
|
function test_deleteNonSelected(t){ |
|
t.is(["AL","AK"], ms5.get("value")); |
|
var d = new doh.Deferred(); |
|
var cb = function(item){ |
|
try{ |
|
t.is(7, ms5._getChildren().length); |
|
writeStore.deleteItem(item); |
|
try{ |
|
t.is(["AL","AK"], ms5.get("value")); |
|
t.is(6, ms5._getChildren().length); |
|
d.callback(true); |
|
}catch(e){ d.errback(e);} |
|
}catch (e){ |
|
d.errback(e); |
|
} |
|
} |
|
writeStore.fetchItemByIdentity({identity: "AZ", onItem: cb}); |
|
return d; |
|
}, |
|
function test_deleteSelected(t){ |
|
t.is(["AL","AK"], ms5.get("value")); |
|
var d = new doh.Deferred(); |
|
var cb = function(item){ |
|
try{ |
|
t.is(6, ms5._getChildren().length); |
|
writeStore.deleteItem(item); |
|
try{ |
|
t.is(["AL"], ms5.get("value")); |
|
t.is(5, ms5._getChildren().length); |
|
d.callback(true); |
|
}catch(e){ d.errback(e);} |
|
}catch (e){ |
|
d.errback(e); |
|
} |
|
} |
|
writeStore.fetchItemByIdentity({identity: "AK", onItem: cb}); |
|
return d; |
|
}, |
|
function test_newItem(t){ |
|
t.is(["AL"], ms5.get("value")); |
|
t.is(5, ms5._getChildren().length); |
|
ms5.set("value", ["AL","NY"]); |
|
t.is(["AL"], ms5.get("value")); |
|
var d = new doh.Deferred(); |
|
writeStore.newItem({value: "NY", label: "New York"}); |
|
try{ |
|
t.is(6, ms5._getChildren().length); |
|
ms5.set("value", ["AL","NY"]); |
|
t.is(["AL","NY"], ms5.get("value")); |
|
d.callback(true); |
|
}catch(e){d.errback(e);} |
|
return d; |
|
}, |
|
function test_formDegrade(t){ |
|
var form = domForm.toObject("form"); |
|
t.is(form.ms1, ["TN"], "form is set properly"); |
|
t.is(form.ms4, ["AL", "CA"], "form is set properly"); |
|
}, |
|
{ |
|
name: "test_performance_single", |
|
testType: testType, |
|
trialDuration: 100, |
|
trialIterations: 100, |
|
trialDelay: 100, |
|
runTest: function(t){ |
|
var opt = {value: "Test", label: "Test Option"}; |
|
ms3.addOption(opt); |
|
ms3.removeOption(opt); |
|
} |
|
}, |
|
{ |
|
name: "test_performance_separate", |
|
testType: testType, |
|
trialDuration: 100, |
|
trialIterations: 100, |
|
trialDelay: 100, |
|
setUp: function(t){ |
|
var opts = t.options = []; |
|
for(var i = 0; i < addNum; i++){ |
|
opts.push({value: i + "", label: "Option " + (i + 1)}); |
|
} |
|
}, |
|
runTest: function(t){ |
|
array.forEach(t.options, function(opt){ |
|
ms3.addOption(opt); |
|
}); |
|
array.forEach(t.options, function(opt){ |
|
ms3.removeOption(opt); |
|
}); |
|
}, |
|
tearDown: function(t){ |
|
delete t.options; |
|
} |
|
}, |
|
{ |
|
name: "test_performance_batch", |
|
testType: testType, |
|
trialDuration: 100, |
|
trialIterations: 100, |
|
trialDelay: 100, |
|
setUp: function(t){ |
|
var opts = t.options = []; |
|
for(var i = 0; i < addNum; i++){ |
|
opts.push({value: i + "", label: "Option " + (i + 1)}); |
|
} |
|
}, |
|
runTest: function(t){ |
|
ms3.addOption(t.options); |
|
ms3.removeOption(t.options); |
|
}, |
|
tearDown: function(t){ |
|
delete t.options; |
|
} |
|
} |
|
] |
|
); |
|
doh.run(); |
|
on(ms1, "change", function(val){ |
|
console.log("First Select Changed to " + val); |
|
}); |
|
on(ss1, "change", function(val){ |
|
console.log("First Radio Select Changed to " + val); |
|
}); |
|
}); |
|
}); |
|
</script> |
|
</head> |
|
<body class="claro"> |
|
<h1 class="testTitle">Test: dojox.form.CheckedMultiSelect</h1> |
|
<form data-dojo-type="dijit/form/Form" id="form" data-dojo-id="form"> |
|
<h2>Check Boxes</h2> |
|
<select data-dojo-id="ms1" multiple="true" name="ms1" data-dojo-type="dojox.form.CheckedMultiSelect"> |
|
<option value="TN">Tennessee</option> |
|
<option value="VA" selected="selected">Virginia</option> |
|
<option value="WA" selected="selected">Washington</option> |
|
<option value="FL">Florida</option> |
|
<option value="CA">California</option> |
|
</select> |
|
<select data-dojo-id="ms2" multiple="true" name="ms2" data-dojo-type="dojox.form.CheckedMultiSelect"> |
|
<option value="UT">Utah</option> |
|
<option value="TX" selected="selected">Texas</option> |
|
<option value="GA" selected="selected">Georgia</option> |
|
<option value="ID">Idaho</option> |
|
<option value="WY">Wyoming</option> |
|
<option value="OR">Oregon</option> |
|
<option value="PA">Pennsylvania</option> |
|
</select> |
|
<select data-dojo-id="ms3" multiple="true" name="ms3" data-dojo-type="dojox.form.CheckedMultiSelect"> |
|
</select> |
|
<hr> |
|
<h2>Radio Buttons</h2> |
|
<select data-dojo-id="ss1" name="ss1" data-dojo-type="dojox.form.CheckedMultiSelect"> |
|
<option value="TN">Tennessee</option> |
|
<option value="VA" selected="selected">Virginia</option> |
|
<option value="WA">Washington</option> |
|
<option value="FL">Florida</option> |
|
<option value="CA">California</option> |
|
</select> |
|
<select data-dojo-id="ss2" name="ss2" value="TX" data-dojo-type="dojox.form.CheckedMultiSelect"> |
|
<option value="UT">Utah</option> |
|
<option value="TX">Texas</option> |
|
<option value="GA">Georgia</option> |
|
<option value="ID">Idaho</option> |
|
<option value="WY">Wyoming</option> |
|
<option value="OR">Oregon</option> |
|
<option value="PA">Pennsylvania</option> |
|
</select> |
|
<select data-dojo-id="ss3" name="ss3" data-dojo-type="dojox.form.CheckedMultiSelect"> |
|
</select> |
|
<hr> |
|
<h4 class="testSubtitle">Store-based</h4> |
|
<select data-dojo-id="ms4" multiple="true" size="5" name="ms4" store="readStore" data-dojo-type="dojox.form.CheckedMultiSelect"> |
|
</select> |
|
<select data-dojo-id="ms5" multiple="true" size="5" name="ms5" store="writeStore" data-dojo-type="dojox.form.CheckedMultiSelect"> |
|
</select> |
|
<select data-dojo-id="ms6" multiple="true" size="5" name="ms6" store="objectStore" labelAttr="label" data-dojo-type="dojox.form.CheckedMultiSelect"> |
|
</select> |
|
<hr> |
|
<h4 class="testSubtitle">Validation</h4> |
|
<select data-dojo-id="rq1" multiple="true" required="true" name="rq1" store="readStore" data-dojo-type="dojox.form.CheckedMultiSelect" |
|
invalidMessage="You need to select at least one" |
|
></select> |
|
<button data-dojo-type="dijit.form.Button"> |
|
Validate |
|
<script type='dojo/on' data-dojo-event='click'> |
|
var isvalid = rq1.isValid(); |
|
console.warn("isvalid?", isvalid, form, form.validate); |
|
try{ |
|
rq1.validate(); |
|
form.validate(); |
|
}catch(e){ |
|
console.log(e); |
|
} |
|
console.warn("validated"); |
|
</script> |
|
</button> |
|
<hr> |
|
<button data-dojo-type="dijit.form.Button"> |
|
<script type="dojo/on" data-dojo-event="click"> |
|
console.dir(form.get("value")); |
|
</script> |
|
Get Values |
|
</button> |
|
<button data-dojo-type="dijit.form.Button"> |
|
<script type="dojo/on" data-dojo-event="click"> |
|
numOptions++; |
|
ms3.addOption({value: numOptions + "", label: "Option " + (numOptions)}); |
|
</script> |
|
Add Check Option |
|
</button> |
|
<button data-dojo-type="dijit.form.Button"> |
|
<script type="dojo/on" data-dojo-event="click"> |
|
numOptions++; |
|
ss3.addOption({value: numOptions + "", label: "Option " + (numOptions)}); |
|
</script> |
|
Add Radio Option |
|
</button> |
|
<button data-dojo-type="dijit.form.Button"> |
|
<script type="dojo/on" data-dojo-event="click"> |
|
ms3.set("disabled", !ms3.disabled); |
|
ss3.set("disabled", !ss3.disabled); |
|
</script> |
|
Toggle Disabled |
|
</button> |
|
<button data-dojo-type="dijit.form.Button"> |
|
<script type="dojo/on" data-dojo-event="click"> |
|
ms2.set("readOnly", !ms2.readOnly); |
|
ss2.set("readOnly", !ss2.readOnly); |
|
</script> |
|
Toggle Read Only |
|
</button> |
|
<button data-dojo-type="dijit.form.Button"> |
|
<script type="dojo/on" data-dojo-event="click"> |
|
ms1.invertSelection(true); |
|
</script> |
|
Invert Selection |
|
</button> |
|
<button data-dojo-type="dijit.form.Button"> |
|
<script type="dojo/on" data-dojo-event="click"> |
|
console.log(ms1.get("displayedValue")); |
|
</script> |
|
Get Displayed Value |
|
</button> |
|
<hr> |
|
<h1>Disabled select (shouldn't be able to check items)</h1> |
|
<select data-dojo-props='multiple:"true", id:"multiselectdisabled", name:"multiselectdisabled", disabled:true' data-dojo-type="dojox.form.CheckedMultiSelect"> |
|
<option value="TN"> |
|
Tennessee |
|
</option> |
|
<option value="VA" selected="selected"> |
|
Virginia |
|
</option> |
|
<option value="WA" selected="selected"> |
|
Washington |
|
</option> |
|
<option value="FL"> |
|
Florida |
|
</option> |
|
<option value="CA"> |
|
California |
|
</option> |
|
</select> |
|
|
|
<button data-dojo-type="dijit.form.Button"> |
|
<script type="dojo/on" data-dojo-event="click"> |
|
dijit.byId("multiselectdisabled").addOption({value: itemCounter + "", label: "Option " + (++itemCounter)}); |
|
</script> |
|
Add item |
|
</button> |
|
<hr> |
|
<h1>ReadOnly select (shouldn't be able to check items, but checkboxes should still be colored)</h1> |
|
<select data-dojo-props='multiple:"true", id:"multiselectreadonly", name:"multiselectreadonly", readOnly:true' data-dojo-type="dojox.form.CheckedMultiSelect"> |
|
<option value="TN"> |
|
Tennessee |
|
</option> |
|
<option value="VA" selected="selected"> |
|
Virginia |
|
</option> |
|
<option value="WA" selected="selected"> |
|
Washington |
|
</option> |
|
<option value="FL"> |
|
Florida |
|
</option> |
|
<option value="CA"> |
|
California |
|
</option> |
|
</select> |
|
|
|
<button data-dojo-type="dijit.form.Button"> |
|
<script type="dojo/on" data-dojo-event="click"> |
|
dijit.byId("multiselectreadonly").addOption({value: itemCounter + "", label: "Option " + (++itemCounter)}); |
|
</script> |
|
Add item |
|
</button> |
|
</form> |
|
</body> |
|
</html>
|
|
|