_old/form/combobox/combobox.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
			"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>combobox</title>
		<style type='text/css'>
			body {font-family: verdana; margin: 0px; padding: 0px;}
			.error {border: solid 1px red;}
			.error_text { color: red; font-size: 10px;}
			td {padding: 3px;}
			.color1 { background-color: #334433; padding-left: 10px; margin: 1px; }
			.color2 { background-color: #3366aa; padding-left: 10px; margin: 1px; }
			.color3 { background-color: #6699aa; padding-left: 10px; margin: 1px; }
			.color4 { background-color: #aabbbb; padding-left: 10px; margin: 1px; }
			.color5 { background-color: #778877; padding-left: 10px; margin: 1px; }
			.text { margin-left: 5px; }
			.item-match {
				font-weight: bold;
			}
			#selectable {
				overflow: auto;
				height: 100px;
				width: 200px;
			}
			.selectable {
				display: block;
				width: 100%;
				margin:0;
				padding: 3px 0;
				border-bottom: 1px solid #cccccc;
				cursor: pointer;
			}
			.selected {
				background-color: orange;
			}
		</style>
		<link type="text/css" href="combobox.css" rel="stylesheet" />
		<!--<link type="text/css" href="StyleResourceHandler.css" rel="stylesheet" /> -->
	</head>
	<body>
		<h3>Selectable</h3>
		<a href="javascript://" id='select_next'>select next</a>
		<a href="javascript://" id='select_prev'>select prev</a>
		<div id='selectable'>
			<ul>
				<li class='selectable'>First</li><li class='selectable'>First</li><li class='selectable'>First</li>
				<li class='selectable'>First</li><li class='selectable'>First</li><li class='selectable'>First</li>
				<li class='selectable'>First</li><li class='selectable'>First</li><li class='selectable'>First</li>
				<li class='selectable'>First</li><li class='selectable'>First</li><li class='selectable'>First</li>
				<li class='selectable'>First</li><li class='selectable'>First</li><li class='selectable'>First</li>
			</ul>
		</div>
		<h3>Select Combobox Demo</h3>
		<select id='expirationBehavior' name='forum[expirationBehavior]'>
			<option value='0' selected='true'>archive</option>
			<option value='1'>delete</option>
			<option value='2'>none</option>
		</select>
		<h4>Change Event Counter</h4>
		<div class='change_count'>0</div>
		<br/>
		<h3>Nested Data Demo (Text Mode)</h3>
		<input id="combobox_demo" type="text" name="myname" />

		<br/>
		<br/>
		<span class="log"><label>Log (Set Value, Query, Open):</label><div id="log"></div></span>
		<span class="log"><label>Log (Get Value):</label><div id="log2"></div></span>
		<span class="log"><label>Log (Change):</label><div id="log3"></div></span>

		<div class="commands">
			<input id="someValue" />
			<button id="setValue">Set Value</button>
			<button id="getValue">Get Value</button>
			<button id="query">Query</button>
			<button id="enable">Enable</button>
			<button id="disable">Disable</button>
			<button id="showItem">Show Item</button>
			<button id="hideItem">Hide Item</button>
			<button id="select">Select</button>
			<button id="getItem">Get Item</button>
			<button id="clearSelection">Clear Selection</button>
			<button id="getItems">Get Items</button>
		</div>

		<br/>
		<br/>
		<h3>Color Picker Demo (HTML Mode)</h3>
		<input id="color_picker" type="text" name="color_picker" />

		<br/>
		<h3>Ajax Combobox Demo</h3>
		<div id="ajax_container" style="width:400px;height:100px;overflow:auto;">
			<input id="ajax_someValue" />
			<button id="populateItems" >Populate Items</button>
			<button id="ajax_showItem" >Show Item</button>
			<button id="ajax_hideItem" >Hide Item</button>
			<button id="ajax_select" >Select</button>
			<button id="ajax_clearSelection" >Clear Selection</button>
			<button id="ajax_getItems">Get Items</button>
			<input id="ajax_demo"  name="ajax_demo" />
		</div>

		<br/>

		<br/>
		<h3>Preloaded Ajax Combobox Demo</h3>
		<div id="preloaded_ajax_container" style="width:1000px">
			<input id="preloaded_ajax_demo" style="float:left" name="preloaded_ajax_demo" />
		</div>

		<h3>Slow</h3>
		<input id="combobox_slow" type="text" name="myname" />

		<h3>No Selection</h3>
		<button id="enableNoSelection" >Enable No Selection</button>
		<button id="disableNoSelection" >Disable No Selection</button>
		<input id="combobox_no_selection" type="text" name="no_selection" />

		<div>abc</div>
		<br/>
		<div>abc</div>
		<br/>
		<div>abc</div>
		<br/>
		<div>abc</div>
		<br/>
		<div>abc</div>
		<br/>
		<div>abc</div>
		<br/>
		<div>abc</div>
		<br/>
		<div>abc</div>
		<br/>
		<div>abc</div>
		<br/>
		<div>abc</div>
		<br/>
		<div>abc</div>
		<br/>
		<div>abc</div>
		<br/>
		<div>abc</div>
		<br/>
		<div>abc</div>
		<br/>
		<div>abc</div>
		<br/>

		<script type='text/javascript'
				src='../../../steal/steal.js'>
		</script>
		<script type='text/javascript'>
			steal("canui/form/combobox/select",
						  "canui/form/combobox/ajax",
						  "jquery/dom/fixture").then(function($){

				// SELECT COMBOBOX DEMO
				$("#expirationBehavior").can_ui_form_combobox_select();

				 $("#expirationBehavior").change(function(){
				 	var el = $('.change_count'),
						num = parseInt(el.text(), 10);

					el.html(num+1)
				 })

				// Utility function - allows you to create item lists.
				var createItems = function(n){
					var data = [];
					for (var i = 0; i < n; i++) {
						data.push({
							value: i,
							text: "item" + i
						})
					}
					data[0].selected = true;
					return data;
				}
				/* Combobox "No Selection" demo */
				$("#combobox_no_selection").can_ui_form_combobox({
					items: createItems(10),
					showNoSelectionOption:true });

				$("#enableNoSelection").click( function(ev) {
					var value = 1;
					$("#combobox_no_selection").control().enableNoSelection( value );
				});
				$("#disableNoSelection").click( function(ev) {
					var value = null;
					$("#combobox_no_selection").control().enableNoSelection( value );
				});


				/* Combobox slow demo */
				$("#combobox_slow").can_ui_form_combobox({
					items: createItems(1000),
					maxHeight: 300 });
				// NESTED COMBOBOX DEMO (TEXT MODE)
				$("#combobox_demo").can_ui_form_combobox({
					items: [{ value: "1", text: "hola", enabled: "true", selected: true,
								children: [  { value: "5", text: "chicago", enabled: "true", children: [] },
											  { value: "6", text: "kansas", enabled: "true",
											  children: [ { value: "7", text: "losangeles", enabled: "true", children: [] } ] } ] },
							{ value: "2", text: "mundo", enabled: "true", children: [] },
							{ value: "3", text: "nuevo", enabled: "true",
								children: [ { value: "8", text: "sanfrancisco", enabled: "true", children: [] } ] },
							{ value: "4", text: "viva", enabled: "true", children: [] }] });

				// get/set API demo
				$("#getValue").bind("click", function(ev) {
					var value = $("#combobox_demo").control().val();
					$("#log2").html("<span>" + value + "</span>");
				})
				$("#setValue").bind("click", function(ev) {
					var value = $("input#someValue").val();
					$("#combobox_demo").control().val(value);
				})

				// query API demo
				$("#query").bind("click", function(ev) {
					var text = $("input#someValue").val();
					var values = $("#combobox_demo").control().query(text);
					if (values.length) {
						$("#log").html("");
						for (var i = 0; i < values.length; i++) {
							$("#log").append("<div>" + values[i] + "</div>");
						}
					}
				});

				// enable/disable API demo
				$("#enable").click( function(ev) {
					var value = $("#someValue").val();
					$("#combobox_demo").control().enable(value);
				});
				$("#disable").click( function(ev){
					var value = $("#someValue").val();
					$("#combobox_demo").control().disable(value);
				});

				$("#showItem").click( function(ev) {
					var value = $("#someValue").val();
					$("#combobox_demo").control().showItem( value );
				});
				$("#hideItem").click( function(ev){
					var value = $("#someValue").val();
					$("#combobox_demo").control().hideItem( value );
				});
				$("#select").bind("click", function(ev) {
					var value = $("input#someValue").val();
					$("#combobox_demo").control().selectItem( value );
				});
				$("#getItem").bind("click", function(ev) {
					var value = $("input#someValue").val();
					var item = $("#combobox_demo").control().getItem( value );
					$("#log2").html("<span>" + item.text + "</span>");
				});
				$("#clearSelection").bind("click", function(ev) {
					var value = $("input#someValue").val();
					$("#combobox_demo").control().clearSelection();
				});

				$("#getItems").bind("click", function(ev) {
					var items = $("#combobox_demo").control().getItems();
					var html = [];
					for(var i=0;i<items.length;i++) {
						html.push( items[i].text );
					}
					$("#log").html("<div>" + html.join(", ") + "</div>");
				});

				// event API for when a value is selected demo
				$("#combobox_demo").bind("change", function(ev, value) {
					//console.log("changed "+value)
					$("#log3").text(value);
				});

				// event API for when the dropdown is opened
				$("#combobox_demo").bind("open", function(ev) {
					$("#log").html("<div>Combobox Opened.</div>");
				});

				$("input#someValue").val("");


				// NESTED COMBOBOX DEMO (HTML MODE)
				$("#color_picker").can_ui_form_combobox({
					render: {
						"itemTemplate" : function(item) {
							var html = [];
							if (item.colors) {
								for (var i = 0; i < item.colors.length; i++) {
									var color = item.colors[i];

									html.push("<span class='color" + color + "'>&nbsp;</span>");

								}
								html.push("<span class='text'>" + item.text + "</span>");
							}
							return html.join(" ");
						}
					},
					items: [{value: 1, text: "pallete1", colors: [1, 2, 3, 4, 5], selected: true},
							{value: 2, text: "pallete2", colors: [5, 4, 3, 2, 1]},
							{value: 3, text: "pallete3", colors: [3, 2, 1, 5, 4]},
							{value: 4, text: "pallete4", colors: [2, 5, 1, 3, 4]},
							{value: 5, text: "pallete5", colors: [4, 1, 5, 3, 2]} ],
					displayHTML: true
				});


				// AJAX COMBOBOX DEMO
				// fixture that simulate nested data sent by the server
				$.fixture.make(["items", "item"], 100, function(num, items) {

						var itemId = parseInt(Math.random() * num);
						var item = items[itemId];
						var experiment = parseInt(Math.random() * 10);
						if (num < 5) {
							return {
								"value": num,
								"text": "dir" + num,
								"enabled": num < 5 ? true : experiment > 3 ? true : false,
								"parentId": null,
								children: []
							}
						} else {
							var child =  {
								"value": num,
								"text": experiment > 6 ? "file" + num : "dir" + num,
								"enabled": experiment > 3 ? true : false,
								"parentId": itemId,
								children: []
							}
							item.children.push(child);
							return child;
						}
				});


				var match = function(list, results, target) {
					results = results || [];
					for(var i=0;i<list.length;i++) {
						var item = list[i];
						if(item.children && item.children.length) match(item.children, results, target);
						if (item.text.indexOf(target) > -1) {
							delete item.children;
							results.push(item);
							return results;
						}
					}
					return results;
				}

				// modify fixture to return only data filtered
				// by value in combobox input (autocomplete)
				var oldFixture1 = $.fixture["-items"];
				$.fixture["-items"] = function(settings){

					settings.data = "loadOnDemand"
					var items = oldFixture1(settings)[0].data;

					// make a clone of the data so that changes
					// in the to the data in combobox don't get
					// reflected in the fixture
					var clonedItems = [];
					for (var i = 0; i < items.length; i++) {
						var parentId = items[i].parentId;
						if (!parentId && parentId != 0) {
							clonedItems.push($.extend(true, {}, items[i]));
						}
					}

					if(settings.data == "loadOnDemand") {
						return [{
							"count": clonedItems.length,
							"d" : clonedItems
						}]
					}

					var retArr = [];
					if (settings.data != "") {
						retArr = match(clonedItems, [], settings.data);
					}

					return [{
						"count": retArr.length,
						"data" : retArr
					}]
				}


				$("#ajax_demo").can_ui_form_combobox_ajax({
					url: "/Archer/Service/DiscussionForumServiceJS.svc/GetForumsForCommunity"
				});

				$("#populateItems").bind("click", function(ev) {
					$("#ajax_demo").control().populateItems( function( items ) {
						var html = [];
						for(var i=0;i<items.length;i++) {
							html.push( items[i].text );
						}
						$("<div id='ajax_demo_output' />").appendTo("#ajax_container");
						$("#ajax_demo_output").html("<div>" + html.join(", ") + "</div>");
					} );
				});

				$("#ajax_showItem").click( function(ev) {
					var value = $("#ajax_someValue").val();
					$("#ajax_demo").control().showItem( value );
				});
				$("#ajax_hideItem").click( function(ev){
					var value = $("#ajax_someValue").val();
					$("#ajax_demo").control().hideItem( value );
				});
				$("#ajax_select").bind("click", function(ev) {
					var value = $("input#ajax_someValue").val();
					$("#ajax_demo").control().select( value );
				});
				$("#ajax_clearSelection").bind("click", function(ev) {
					var value = $("input#ajax_someValue").val();
					$("#ajax_demo").control().clearSelection();
				});

				$("#ajax_getItems").bind("click", function(ev) {
					var items = $("#ajax_demo").control().getItems();
					var html = [];
					for(var i=0;i<items.length;i++) {
						html.push( items[i].text );
					}
					$("<div id='ajax_demo_output2' />").appendTo("#ajax_container");
					$("#ajax_demo_output2").html("<div>" + html.join(", ") + "</div>");
				});


				/*
				 *  Pre-loaded Ajax Demo
				 */
			   $("#preloaded_ajax_demo").can_ui_form_combobox_ajax({
			   		items: [{ value: "0", text: "dir0", selected: true}],
					url: "/Archer/Service/DiscussionForumServiceJS.svc/GetForumsForCommunity"
				});

				$("#selectable").can_ui_form_combobox_selectable()
				$("#select_next").click(function(){
					$("#selectable").can_ui_form_combobox_selectable("selectNext")
				})
				$("#select_prev").click(function(){
					$("#selectable").can_ui_form_combobox_selectable("selectPrev")
				})
			});


		</script>
	</body>
</html>