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.
200 lines
6.5 KiB
200 lines
6.5 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|
<title>Testing MultiSelect form widget | The Dojo Toolkit</title> |
|
|
|
<style type="text/css"> |
|
#select, #select2 { |
|
width:255px; |
|
height:300px; |
|
overflow:auto; |
|
} |
|
div#sel1, div#sel2 { |
|
float: left; |
|
} |
|
div#leftRightButtons { |
|
float: left; |
|
padding: 10em 0.5em 0 0.5em; |
|
} |
|
</style> |
|
|
|
<script type="text/javascript" src="../boilerplate.js"></script> |
|
|
|
<script type="text/javascript"> |
|
require([ |
|
"doh/runner", |
|
"dojo/query", |
|
"dojo/dom-form", |
|
"dojo/_base/json", |
|
"dojo/_base/array", |
|
"dojo/_base/lang", |
|
"dojo/dom", |
|
"dojo/dom-class", |
|
"dojo/parser", |
|
"dijit/dijit", |
|
"dijit/focus", |
|
"dijit/registry", |
|
"dijit/form/MultiSelect", |
|
"dijit/form/Button", |
|
"dijit/form/Form", |
|
"dijit/tests/helpers", |
|
"dojo/domReady!" |
|
], function(doh, query, domForm, json, array, lang, dom, domClass, parser, |
|
dijit, focus, registry, MultiSelect, Button, Form, helpers){ |
|
|
|
parser.parse(); |
|
|
|
// Add mode=test to the URL to run unit tests. |
|
var test = /mode=test/i.test(window.location.href); |
|
|
|
// ref a clonable node, then split it between two selects |
|
var c = query(".clone")[0]; |
|
var l = -1; |
|
opt = function(){ |
|
return dom.byId((++l % 2 == 0 ? "select" : "select2" )); |
|
}; |
|
// based on the the 'dijit' object |
|
var count=0; |
|
var select1Values = "dojo._defaultEasing"; |
|
for(var i in dijit){ |
|
var n = opt().appendChild(lang.clone(c)); |
|
n.value = count++; |
|
if(l % 2 == 0){ |
|
select1Values += "," + i; |
|
} |
|
n.innerHTML = i; |
|
} |
|
|
|
// turn any non-data-dojo-type selects into widgets programatically: |
|
query("select").forEach(function(n){ |
|
if(!dijit.byNode(n)){ |
|
var foo = new dijit.form.MultiSelect({ name: n.name }, n).startup(); |
|
} |
|
}); |
|
|
|
// listen to the "move items" buttons |
|
query("button.switch") |
|
.on("click",function(e){ |
|
switch(e.target.id.toString()){ |
|
case "left" : registry.byId("select").addSelected(registry.byId("select2")); break; |
|
case "right" : registry.byId("select2").addSelected(registry.byId("select")); break; |
|
} |
|
}); |
|
|
|
// listen to the invert buttons |
|
query("button.invert") |
|
.on("click",function(e){ |
|
switch(e.target.id.toString()){ |
|
case "i1" : registry.byId("select").invertSelection(); break; |
|
case "i2" : registry.byId("select2").invertSelection(); break; |
|
case "i3" : registry.byId("select3").invertSelection(); break; |
|
} |
|
}); |
|
|
|
// there is only one debug button |
|
query(".debug").on("click",function(e){ |
|
console.log('select value:',registry.byId("select").get('value') + '/' + registry.byId("select").value); |
|
console.log('select2 value:',registry.byId("select2").get('value') + '/' + registry.byId("select2").value); |
|
console.log('select3 value:',registry.byId("select3").get('value') + '/' + registry.byId("select3").value); |
|
}); |
|
|
|
query("#formSubmit").on("click", function(e){ |
|
// see what the real form says about our widgets: |
|
var vals = domForm.toJson("test"); |
|
console.log(vals); |
|
}); |
|
|
|
query("#s1").on("click", function(e){ |
|
registry.byId('select3').set('value', ['VA', 'WA']); |
|
}); |
|
|
|
if(test){ |
|
doh.register("API", [ |
|
function initial(t){ |
|
var vals = json.fromJson(domForm.toJson("test")); |
|
t.is(select1Values, query("option", registry.byId('select').containerNode).map(function(n){ return n.innerHTML; }).join(',')); |
|
t.is("", registry.byId('select').get('value').join(''), 'easing widget value'); |
|
t.is("", registry.byId('select2').get('value').join(''), 'second widget value'); |
|
t.is("TN", registry.byId('select3').get('value').join(''), 'select3 widget value'); |
|
t.is("", vals.easing, 'easing form value'); |
|
t.is("", vals.second, 'second form value'); |
|
t.is("TN", vals.select3, 'select3 form value'); |
|
t.t(domClass.contains(registry.byId('select2').domNode, "dijitMultiSelect"), 'second base class'); |
|
t.t(domClass.contains(registry.byId('select3').domNode, "dijitMultiSelect"), 'select3 base class'); |
|
t.t(domClass.contains(registry.byId('select3').domNode, "addedClass"), 'select3 added class'); |
|
}, |
|
{ |
|
name: "set", |
|
timeout: 1000, |
|
runTest: function(t){ |
|
var d = new doh.Deferred(); |
|
registry.byId('select3').set('value', ['TN','FL']); |
|
setTimeout(d.getTestCallback(function(){ |
|
var vals = json.fromJson(domForm.toJson("test")); |
|
t.is("TN,FL", registry.byId('select3').get('value').join(','), "select3 widget value"); |
|
t.is("TN,FL", vals.select3, "select3 form value"); |
|
}), 500); |
|
return d; |
|
} |
|
} |
|
]); |
|
|
|
doh.run(); |
|
} |
|
}); |
|
</script> |
|
</head> |
|
<body style="padding:20px" role="main"> |
|
|
|
<h1 class="testTitle">dijit.form.MultiSelect:</h1> |
|
<p>Select one or more items in First or Second list and move them between lists using the buttons provided.</p> |
|
<form action="#" method="get" id="test" onsubmit="return false"> |
|
|
|
<div> |
|
<div id="sel1" role="presentation"> |
|
<label for="select">First list:</label><br> |
|
<select id="select" multiple size="7" name="easing" tabindex="1"> |
|
<option class="clone" value="dojo._defaultEasing">dojo._defaultEasing</option> |
|
</select> |
|
</div> |
|
<div id="leftRightButtons" role="presentation"> |
|
<span> |
|
<button class="switch" id="left" title="Move Items to First list"><</button> |
|
<button class="switch" id="right" title="Move Items to Second list">></button> |
|
</span> |
|
</div> |
|
<div id="sel2" role="presentation"> |
|
<label for="select2">Second list:</label><br> |
|
<select id="select2" multiple size="7" name="second"> |
|
</select> |
|
</div> |
|
</div> |
|
|
|
<br style="clear: both;"/><br> |
|
|
|
<button class='invert' id="i1">invert first list</button> |
|
<button class="invert" id="i2">invert second list</button> |
|
<button id="formSubmit" type="submit">Submit</button> |
|
|
|
|
|
<button class="debug">call get('value')</button> |
|
|
|
<h3><label for="select3">markup:</label></h3> |
|
|
|
<select class="addedClass" id="select3" multiple data-dojo-type="dijit/form/MultiSelect" |
|
data-dojo-props='name:"select3",style:{height:"200px", width:"175px", border:"5px solid #ededed"}'> |
|
|
|
<option value="TN" selected>Tennessee</option> |
|
<option value="VA">Virginia</option> |
|
<option value="WA">Washington</option> |
|
<option value="FL">Florida</option> |
|
<option value="CA">California</option> |
|
|
|
</select> |
|
</form> |
|
<br><br> |
|
<button class='invert' id="i3">invert markup list</button> |
|
<button class='set' id="s1">set markup list to [VA, WA]</button> |
|
</body> |
|
</html>
|
|
|