686 lines
38 KiB
HTML
686 lines
38 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
|
|
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
|
|
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
|
|
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
|
<head>
|
|
<title>deliteful/Combobox - Control-Freak</title>
|
|
<meta name="description" content="IDE for Automation & IoT" />
|
|
<meta name="author" content="Justin Walsh">
|
|
<meta charset="UTF-8">
|
|
<link rel="icon" href="../../themes/mytheme/img/favicon-blue.png" type="image/x-icon">
|
|
<!-- Mobile -->
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<script src="../..//ext/easyXDM.js"></script>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
var pixlrEditor = null;
|
|
var xdmSocket = null;
|
|
var editorImage=null;
|
|
var imageUrl=null;
|
|
var editorArgs=null;
|
|
var saveUrl=null;
|
|
var title='';
|
|
var format = 'jpg';
|
|
|
|
function urlDecode (string, overwrite) {
|
|
if (!string || !string.length) {
|
|
return{}
|
|
}
|
|
var obj = {};
|
|
var pairs = string.split("&");
|
|
var pair, name, value;
|
|
for (var i = 0, len = pairs.length; i < len; i++) {
|
|
pair = pairs[i].split("=");
|
|
name = decodeURIComponent(pair[0]);
|
|
value = decodeURIComponent(pair[1]);
|
|
if(value!=null && value==='true'){
|
|
value=true;
|
|
}else if(value==='false'){
|
|
value=false;
|
|
}
|
|
if (overwrite !== true) {
|
|
if (typeof obj[name] == "undefined") {
|
|
obj[name] = value
|
|
} else {
|
|
if (typeof obj[name] == "string") {
|
|
obj[name] = [obj[name]];
|
|
obj[name].push(value)
|
|
} else {
|
|
obj[name].push(value)
|
|
}
|
|
}
|
|
} else {
|
|
obj[name] = value
|
|
}
|
|
}
|
|
return obj;
|
|
}
|
|
|
|
|
|
function onMessage(message){
|
|
|
|
var result = JSON.parse(message);
|
|
|
|
console.log('message :',message);
|
|
if(result && result.command && result.command==='edit')
|
|
{
|
|
if(editorImage==null){
|
|
img_create(result.url,'','');
|
|
}
|
|
imageUrl = result.url;
|
|
saveUrl = result.saveUrl;
|
|
title = result.title;
|
|
format = result.format;
|
|
}
|
|
}
|
|
|
|
function sendMessage(message)
|
|
{
|
|
xdmSocket.postMessage(JSON.stringify(message));
|
|
}
|
|
|
|
function init (){
|
|
|
|
return;
|
|
var inUrl = '' + window.location.href;
|
|
|
|
console.log('init url ' + inUrl);
|
|
//http://localhost/projects/x4mm/Code/xapp/xcf/?debug=true&run=run-release-debug&protocols=true&xideve=true&drivers=true&plugins=false&xblox=debug&files=true&dijit=debug&xdocker=debug&xfile=debug&davinci=debug&dgrid=debug&xgrid=debug&xace=debug&wcDocker=debug
|
|
if(!inUrl){
|
|
console.error('invalid');
|
|
//http://localhost/projects/x4mm/Code/xapp/xcf/?debug=true&run=run-release-debug&protocols=true&xideve=true&drivers=true&plugins=false&xblox=debug&files=true&dijit=debug&xdocker=debug&xfile=debug&davinci=debug&dgrid=debug&xgrid=debug&xace=debug&wcDocker=debug
|
|
}
|
|
|
|
var parameterString = '' ;
|
|
|
|
function base64_decode (encodedData) {
|
|
|
|
if (typeof window !== 'undefined') {
|
|
if (typeof window.atob !== 'undefined') {
|
|
return decodeURIComponent(escape(window.atob(encodedData)))
|
|
}
|
|
} else {
|
|
return new Buffer(encodedData, 'base64').toString('utf-8')
|
|
}
|
|
|
|
var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
|
|
var o1
|
|
var o2
|
|
var o3
|
|
var h1
|
|
var h2
|
|
var h3
|
|
var h4
|
|
var bits
|
|
var i = 0
|
|
var ac = 0
|
|
var dec = ''
|
|
var tmpArr = []
|
|
|
|
if (!encodedData) {
|
|
return encodedData
|
|
}
|
|
|
|
encodedData += ''
|
|
|
|
do {
|
|
// unpack four hexets into three octets using index points in b64
|
|
h1 = b64.indexOf(encodedData.charAt(i++))
|
|
h2 = b64.indexOf(encodedData.charAt(i++))
|
|
h3 = b64.indexOf(encodedData.charAt(i++))
|
|
h4 = b64.indexOf(encodedData.charAt(i++))
|
|
|
|
bits = h1 << 18 | h2 << 12 | h3 << 6 | h4
|
|
|
|
o1 = bits >> 16 & 0xff
|
|
o2 = bits >> 8 & 0xff
|
|
o3 = bits & 0xff
|
|
|
|
if (h3 === 64) {
|
|
tmpArr[ac++] = String.fromCharCode(o1)
|
|
} else if (h4 === 64) {
|
|
tmpArr[ac++] = String.fromCharCode(o1, o2)
|
|
} else {
|
|
tmpArr[ac++] = String.fromCharCode(o1, o2, o3)
|
|
}
|
|
} while (i < encodedData.length)
|
|
|
|
dec = tmpArr.join('')
|
|
|
|
return decodeURIComponent(escape(dec.replace(/\0+$/, '')))
|
|
}
|
|
|
|
function base64_encode(data) {
|
|
|
|
// From: http://phpjs.org/functions
|
|
// + original by: Tyler Akins (http://rumkin.com)
|
|
// + improved by: Bayron Guevara
|
|
// + improved by: Thunder.m
|
|
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
|
|
// + bugfixed by: Pellentesque Malesuada
|
|
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
|
|
// + improved by: Rafał Kukawski (http://kukawski.pl)
|
|
// * example 1: base64_encode('Kevin van Zonneveld');
|
|
// * returns 1: 'S2V2aW4gdmFuIFpvbm5ldmVsZA=='
|
|
// mozilla has this native
|
|
// - but breaks in 2.0.0.12!
|
|
//if (typeof this.window.btoa === 'function') {
|
|
// return btoa(data);
|
|
//}
|
|
var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
|
|
var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,
|
|
ac = 0,
|
|
enc = '',
|
|
tmp_arr = [];
|
|
|
|
if (!data) {
|
|
return data;
|
|
}
|
|
|
|
do { // pack three octets into four hexets
|
|
o1 = data.charCodeAt(i++);
|
|
o2 = data.charCodeAt(i++);
|
|
o3 = data.charCodeAt(i++);
|
|
|
|
bits = o1 << 16 | o2 << 8 | o3;
|
|
|
|
h1 = bits >> 18 & 0x3f;
|
|
h2 = bits >> 12 & 0x3f;
|
|
h3 = bits >> 6 & 0x3f;
|
|
h4 = bits & 0x3f;
|
|
|
|
// use hexets to index into b64, and append result to encoded string
|
|
tmp_arr[ac++] = b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4);
|
|
} while (i < data.length);
|
|
|
|
enc = tmp_arr.join('');
|
|
|
|
var r = data.length % 3;
|
|
|
|
return (r ? enc.slice(0, r - 3) : enc) + '==='.slice(r || 3);
|
|
|
|
}
|
|
|
|
if(inUrl.lastIndexOf('?')){
|
|
|
|
parameterString = inUrl.substring(inUrl.lastIndexOf('?')+1,inUrl.length);
|
|
var urlParameters=urlDecode(parameterString);
|
|
|
|
var target =urlParameters.xdmTarget;
|
|
|
|
if(!target || target && target=='undefined'){
|
|
return;
|
|
}
|
|
|
|
if(target.indexOf('http:')==-1){
|
|
target = base64_decode(target);
|
|
}
|
|
|
|
target=decodeURIComponent(target);
|
|
//http://localhost/projects/x4mm/Control-Freak-Documentation/daux/Getting_Started?xdmTarget=http%3A%2F%2Flocalhost%2Fprojects%2Fx4mm%2FCode%2Fxapp%2Fxcf%2F%3Fdebug%3Dtrue%26run%3Drun-release-debug%26protocols%3Dtrue%26xideve%3Dtrue%26drivers%3Dtrue%26plugins%3Dfalse%26xblox%3Ddebug%26files%3Dtrue%26dijit%3Ddebug%26xdocker%3Ddebug%26xfile%3Ddebug%26davinci%3Ddebug%26dgrid%3Ddebug%26xgrid%3Ddebug%26xace%3Ddebug%26wcDocker%3Ddebug&xdm_e=http%3A%2F%2Flocalhost%2Fprojects%2Fx4mm%2FCode%2Fxapp%2Fxcf%2F&xdm_c=default9743&xdm_p=4
|
|
//console.error('creating socket to '+target);
|
|
xdmSocket = new easyXDM.Socket({
|
|
remote: "" + target,
|
|
onMessage:function (message, origin)
|
|
{
|
|
onMessage(message);
|
|
}
|
|
});
|
|
|
|
//console.error('xdmtarge = ' + target);
|
|
|
|
//var newUrl = + encodeURIComponent('' + window.location.href);
|
|
|
|
if(target && target!=='undefined' && target.length) {
|
|
$(function () {
|
|
$('a').each(function () {
|
|
var cUrl = $(this).attr('href');
|
|
var bindStr = '?';
|
|
if (cUrl && cUrl.indexOf('xdmTarget') == -1) {
|
|
if (cUrl.indexOf('?') != -1) {
|
|
bindStr = '&';
|
|
}
|
|
var newUrl = cUrl + bindStr + 'xdmTarget=' + base64_encode(target);
|
|
//console.log('new url ' + newUrl);
|
|
//$(this).attr('href', newUrl);
|
|
}
|
|
|
|
|
|
});
|
|
});
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
document.onreadystatechange = function () {
|
|
|
|
if(typeof easyXDM !=='undefined') {
|
|
|
|
var state = document.readyState;
|
|
if (state == 'interactive') {
|
|
} else if (state == 'complete') {
|
|
init();
|
|
}
|
|
}else{
|
|
console.error('easy xdm not defined');
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Font -->
|
|
|
|
<!-- CSS -->
|
|
<link href='../../themes/mytheme/css/theme-blue.min.css' rel='stylesheet' type='text/css'><link href='../../admin-theme/bower_components/font-awesome/css/font-awesome.min.css' rel='stylesheet' type='text/css'><link href='../../admin-theme/html-white/dist/css/application.css' rel='stylesheet' type='text/css'><link href='../../themes/mytheme/css/bootstrap-override-white.css' rel='stylesheet' type='text/css'>
|
|
<!-- Tipue Search -->
|
|
<link href="../../tipuesearch/tipuesearch.css" rel="stylesheet">
|
|
|
|
<!--[if lt IE 9]>
|
|
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
<body class=" xTheme xTheme-white">
|
|
<header class="Navbar hidden-print">
|
|
<a class="Navbar__brand" href="../../index.html">Control-Freak</a>
|
|
|
|
<div class="Search">
|
|
<svg class="Search__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 451 451"><path d="M447.05 428l-109.6-109.6c29.4-33.8 47.2-77.9 47.2-126.1C384.65 86.2 298.35 0 192.35 0 86.25 0 .05 86.3.05 192.3s86.3 192.3 192.3 192.3c48.2 0 92.3-17.8 126.1-47.2L428.05 447c2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4c5.2-5.2 5.2-13.8 0-19zM26.95 192.3c0-91.2 74.2-165.3 165.3-165.3 91.2 0 165.3 74.2 165.3 165.3s-74.1 165.4-165.3 165.4c-91.1 0-165.3-74.2-165.3-165.4z"/></svg>
|
|
<input type="search" id="tipue_search_input" class="Search__field" placeholder="Search..." autocomplete="on" results=25 autosave=text_search>
|
|
</div>
|
|
</header>
|
|
<div class="Columns content">
|
|
<aside class="Columns__left Collapsible">
|
|
<div class="Collapsible__container">
|
|
<button type="button" class="Button Collapsible__trigger">
|
|
<span class="Collapsible__trigger--bar"></span>
|
|
<span class="Collapsible__trigger--bar"></span>
|
|
<span class="Collapsible__trigger--bar"></span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="Collapsible__content">
|
|
<!-- Navigation -->
|
|
<ul class='Nav'><li class='Nav__item '><a href="../../Getting_Started.html">Getting Started</a></li><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>Installation</a><ul class='Nav'><li class='Nav__item '><a href="../../Installation/Windows.html">Windows</a></li><li class='Nav__item '><a href="../../Installation/Linux.html">Linux</a></li><li class='Nav__item '><a href="../../Installation/Raspberry-PI.html">Raspberry-PI</a></li><li class='Nav__item '><a href="../../Installation/OSX.html">OSX</a></li><li class='Nav__item has-children'><a href="../../Installation/WEB/index.html" class="folder"><i class="Nav__arrow"> </i>WEB</a><ul class='Nav'><li class='Nav__item '><a href="../../Installation/WEB/Requirements.html">Requirements</a></li></ul></li></ul></li><li class='Nav__item Nav__item--open has-children'><a href="../../Interface_Designer/index.html" class="folder"><i class="Nav__arrow"> </i>Interface Designer</a><ul class='Nav'><li class='Nav__item '><a href="../../Interface_Designer/Guide.html">Guide</a></li><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>Examples</a><ul class='Nav'><li class='Nav__item '><a href="../../Interface_Designer/Examples/Button_Group.html">Button Group</a></li><li class='Nav__item '><a href="../../Interface_Designer/Examples/States.html">States</a></li></ul></li><li class='Nav__item '><a href="../../Interface_Designer/States.html">States</a></li><li class='Nav__item '><a href="../../Interface_Designer/VariableStates.html">VariableStates</a></li><li class='Nav__item Nav__item--open has-children'><a href="../../Interface_Designer/Widgets/index.html" class="folder"><i class="Nav__arrow"> </i>Widgets</a><ul class='Nav'><li class='Nav__item '><a href="../../Interface_Designer/Widgets/Accordion.html">deliteful/Accordion</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/Button.html">deliteful/Button</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/channelBreakpoints.html">deliteful/channelBreakpoints</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/Checkbox.html">deliteful/Checkbox</a></li><li class='Nav__item Nav__item--active'><a href="../../Interface_Designer/Widgets/Combobox.html">deliteful/Combobox</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/features.html">deliteful/features</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/LinearLayout.html">deliteful/LinearLayout</a></li><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>list</a><ul class='Nav'><li class='Nav__item '><a href="../../Interface_Designer/Widgets/list/List.html">deliteful/list/List</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/list/PageableList.html">deliteful/list/PageableList</a></li></ul></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/Panel.html">deliteful/Panel</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/ProgressBar.html">deliteful/ProgressBar</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/ProgressIndicator.html">deliteful/ProgressIndicator</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/RadioButton.html">deliteful/RadioButton</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/ResponsiveColumns.html">deliteful/ResponsiveColumns</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/ScrollableContainer.html">deliteful/ScrollableContainer</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/Select.html">deliteful/Select</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/SidePane.html">deliteful/SidePane</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/Slider.html">deliteful/Slider</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/StarRating.html">deliteful/StarRating</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/styling.html">styling</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/SwapView.html">deliteful/SwapView</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/Switch.html">deliteful/Switch</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/Toaster.html">deliteful/Toaster</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/ToggleButton.html">deliteful/ToggleButton</a></li><li class='Nav__item has-children'><a href="../../Interface_Designer/Widgets/tutorial/index.html" class="folder"><i class="Nav__arrow"> </i>tutorial</a><ul class='Nav'><li class='Nav__item '><a href="../../Interface_Designer/Widgets/tutorial/Part1GettingStarted.html">Deliteful Tutorial Part 1</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/tutorial/Part2QuickLook.html">Deliteful Tutorial Part 2</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/tutorial/Part3PhotoFeedApp.html">Deliteful Tutorial Part 3</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/tutorial/Part4ListView.html">Deliteful Tutorial Part 4</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/tutorial/Part5CustomRenderer.html">Deliteful Tutorial Part 5</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/tutorial/Part6DetailsView.html">Deliteful Tutorial Part 6</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/tutorial/Part7SettingsView.html">Deliteful Tutorial Part 7</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/tutorial/Part8Build.html">Deliteful Tutorial Part 8</a></li></ul></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/ViewIndicator.html">deliteful/ViewIndicator</a></li><li class='Nav__item '><a href="../../Interface_Designer/Widgets/ViewStack.html">deliteful/ViewStack</a></li></ul></li></ul></li><li class='Nav__item has-children'><a href="../../Driver/index.html" class="folder"><i class="Nav__arrow"> </i>Driver</a><ul class='Nav'><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>Code Examples</a><ul class='Nav'><li class='Nav__item '><a href="../../Driver/Code_Examples/Expressions.html">Expressions</a></li><li class='Nav__item '><a href="../../Driver/Code_Examples/Variable_Changes.html">Variable Changes</a></li></ul></li><li class='Nav__item has-children'><a href="../../Driver/Built-In/index.html" class="folder"><i class="Nav__arrow"> </i>Built-In</a><ul class='Nav'><li class='Nav__item '><a href="../../Driver/Built-In/VLC.html">VLC</a></li></ul></li><li class='Nav__item '><a href="../../Driver/Guide.html">Guide</a></li><li class='Nav__item '><a href="../../Driver/API.html">API</a></li><li class='Nav__item '><a href="../../Driver/Editors.html">Editors</a></li><li class='Nav__item '><a href="../../Driver/Debugging.html">Debugging</a></li><li class='Nav__item '><a href="../../Driver/Intern.html">Intern</a></li><li class='Nav__item has-children'><a href="../../Driver/Fiddle/index.html" class="folder"><i class="Nav__arrow"> </i>Fiddle</a><ul class='Nav'><li class='Nav__item '><a href="../../Driver/Fiddle/Blocks_Example.html">Blocks Example</a></li><li class='Nav__item '><a href="../../Driver/Fiddle/Blocks_Template.html">Blocks Template</a></li></ul></li></ul></li><li class='Nav__item '><a href="../../Protocols/index.html" class="folder"><i class="Nav__arrow"> </i>Protocols</a><ul class='Nav'></ul></li><li class='Nav__item has-children'><a href="../../Blocks/index.html" class="folder"><i class="Nav__arrow"> </i>Blocks</a><ul class='Nav'><li class='Nav__item '><a href="../../Blocks/Command.html">Command</a></li><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>Events</a><ul class='Nav'><li class='Nav__item '><a href="../../Blocks/Events/OnEvent.html">OnEvent</a></li></ul></li><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>File</a><ul class='Nav'><li class='Nav__item '><a href="../../Blocks/File/ReadJSON.html">ReadJSON</a></li></ul></li></ul></li><li class='Nav__item '><a href="../../Exporter/index.html" class="folder"><i class="Nav__arrow"> </i>Exporter</a><ul class='Nav'></ul></li><li class='Nav__item '><a href="../../Device_Server/index.html" class="folder"><i class="Nav__arrow"> </i>Device Server</a><ul class='Nav'></ul></li><li class='Nav__item '><a href="../../Tutorials/index.html" class="folder"><i class="Nav__arrow"> </i>Tutorials</a><ul class='Nav'></ul></li><li class='Nav__item '><a href="../../Raspberry_PI/index.html" class="folder"><i class="Nav__arrow"> </i>Raspberry PI</a><ul class='Nav'></ul></li><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>Resources</a><ul class='Nav'><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>Software</a><ul class='Nav'><li class='Nav__item has-children'><a href="#" class="aj-nav folder"><i class="Nav__arrow"> </i>MQTT</a><ul class='Nav'><li class='Nav__item '><a href="../../Resources/Software/MQTT/Software.html">Software</a></li><li class='Nav__item '><a href="../../Resources/Software/MQTT/Architecture.html">Architecture</a></li></ul></li><li class='Nav__item '><a href="../../Resources/Software/Tools/index.html" class="folder"><i class="Nav__arrow"> </i>Tools</a><ul class='Nav'></ul></li></ul></li><li class='Nav__item '><a href="../../Resources/Utils_API/index.html" class="folder"><i class="Nav__arrow"> </i>Utils API</a><ul class='Nav'></ul></li></ul></li></ul>
|
|
|
|
<div class="Links">
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<div class="Columns__right ">
|
|
<div class="Columns__right__content">
|
|
<div class="doc_content">
|
|
<article class="Page">
|
|
|
|
<div class="Page__header">
|
|
<h1><a href="../../Interface_Designer/index.html">Interface Designer</a> <svg class="Page__header--separator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 477.175 477.175"><path d="M360.73 229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1 0s-5.3 13.8 0 19.1l215.5 215.5-215.5 215.5c-5.3 5.3-5.3 13.8 0 19.1 2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-4l225.1-225.1c5.3-5.2 5.3-13.8.1-19z"/></svg> <a href="../../Interface_Designer/Widgets/index.html">Widgets</a> <svg class="Page__header--separator" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 477.175 477.175"><path d="M360.73 229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1 0s-5.3 13.8 0 19.1l215.5 215.5-215.5 215.5c-5.3 5.3-5.3 13.8 0 19.1 2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-4l225.1-225.1c5.3-5.2 5.3-13.8.1-19z"/></svg> <a href="../../Interface_Designer/Widgets/Combobox.html">deliteful/Combobox</a></h1>
|
|
<span style="float: right; font-size: 10px; color: gray;">
|
|
<a href="https://github.com/net-commander/net-commander-documentation/blob/master/docFiles/03_Interface_Designer/Widgets/Combobox.md" target="_blank">Edit on GitHub</a>
|
|
</span>
|
|
</div>
|
|
|
|
|
|
<div class="s-content">
|
|
<h1 id="page_delitefulCombobox">deliteful/Combobox</h1>
|
|
<p><code>deliteful/Combobox</code> is a form-aware and store-aware widget leveraging the
|
|
<a href="list/List.html"><code>deliteful/list/List</code></a> widget for
|
|
displaying the list of options.</p>
|
|
<p>Main features:</p>
|
|
<ul>
|
|
<li>Allows to benefit from the customization mechanism of the list item rendering.</li>
|
|
<li>Provides single and multiple selection modes.</li>
|
|
<li>Provides optional interactive filtering of list of options (single selection mode only).</li>
|
|
<li>Multichannel rendering.</li>
|
|
</ul>
|
|
<p><em>Example of deliteful/Combobox (single choice mode, on desktop browser):</em></p>
|
|
<p><img src="images/Combobox-single.png" alt="Example of Combobox (single choice mode)" /></p>
|
|
<p><em>Example of deliteful/Combobox (multiple choice mode, on mobile browser):</em></p>
|
|
<p><img src="images/Combobox-multiple.png" alt="Example of Combobox (multiple choice mode)" /></p>
|
|
<h5 id="page_Table_of_Contents">Table of Contents</h5>
|
|
<p><a href="#instantiation">Element Instantiation </a><br />
|
|
<a href="#using">Using Combobox</a><br />
|
|
<a href="#styling">Element Styling</a><br />
|
|
<a href="#enterprise">Enterprise Use</a></p>
|
|
<p><a name="instantiation"></a></p>
|
|
<h2 id="page_Element_Instantiation">Element Instantiation</h2>
|
|
<p>For details on the instantiation lifecycle, see <a href="/delite/docs/master/Widget.md/broken"><code>delite/Widget</code></a>.</p>
|
|
<h3 id="page_Declarative_Instantiation">Declarative Instantiation</h3>
|
|
<pre><code class="language-js">require(["deliteful/Combobox", "requirejs-domready/domReady!"],
|
|
function () {
|
|
});
|
|
</code></pre>
|
|
<pre><code class="language-html"><html>
|
|
<d-combobox>
|
|
<d-list>
|
|
{ "label": "France", ... },
|
|
...
|
|
</d-list>
|
|
</d-combobox>
|
|
</html>
|
|
</code></pre>
|
|
<p><iframe width="100%" height="300" allowfullscreen="allowfullscreen" frameborder="0"
|
|
src="http://jsfiddle.net/ibmjs/d1sj0fkp/embedded/result,js,html">
|
|
<a href="http://jsfiddle.net/ibmjs/d1sj0fkp/">checkout the sample on JSFiddle</a></iframe></p>
|
|
<h3 id="page_Programmatic_Instantiation">Programmatic Instantiation</h3>
|
|
<pre><code class="language-js">require(["dstore/Memory", "dstore/Trackable",
|
|
"deliteful/Combobox", "deliteful/list/List",
|
|
"requirejs-domready/domReady!"],
|
|
function (Memory, Trackable, Combobox, List) {
|
|
// Create the store
|
|
var dataSource = new (Memory.createSubclass(Trackable))({});
|
|
// Add options
|
|
dataSource.add(...);
|
|
...
|
|
// Create the List
|
|
var list = new List({source: dataSource, ...});
|
|
// Create the Combobox
|
|
var Combobox = new Combobox({list: list, selectionMode: "multiple"});
|
|
Combobox.placeAt(document.body);
|
|
});
|
|
</code></pre>
|
|
<p>Or with an array in source property of the list :</p>
|
|
<pre><code class="language-js">require(["decor/ObservableArray", "decor/Observable",
|
|
"deliteful/Combobox", "deliteful/list/List",
|
|
"requirejs-domready/domReady!"],
|
|
function (ObservableArray, Observable, Combobox, List) {
|
|
// Create the store
|
|
var dataSource = new ObservableArray();
|
|
// Add options
|
|
dataSource.push(new Observable(...));
|
|
...
|
|
// Create the List
|
|
var list = new List({source: dataSource, ...});
|
|
// Create the Combobox
|
|
var Combobox = new Combobox({list: list, selectionMode: "multiple"});
|
|
Combobox.placeAt(document.body);
|
|
});
|
|
</code></pre>
|
|
<p><iframe width="100%" height="300" allowfullscreen="allowfullscreen" frameborder="0"
|
|
src="http://jsfiddle.net/ibmjs/s2fzabtb/embedded/result,js,html">
|
|
<a href="http://jsfiddle.net/ibmjs/s2fzabtb/">checkout the sample on JSFiddle</a></iframe></p>
|
|
<p>Note that the <code>list</code> property is set by default to a newly created instance of
|
|
<code>deliteful/list/List</code>. Hence, applications can write:</p>
|
|
<pre><code class="language-js"> var combobox = new Combobox();
|
|
// Create the store
|
|
combobox.list.source = ...;
|
|
...
|
|
</code></pre>
|
|
<p><a name="using"></a></p>
|
|
<h2 id="page_Using_Combobox">Using Combobox</h2>
|
|
<h3 id="page_Selection">Selection</h3>
|
|
<p>The widget provides two selection modes through the <code>selectionMode</code> property:
|
|
"single" (only one option can be selected at a time) and "multiple" (one or more
|
|
options can be selected).</p>
|
|
<p>Options can be selected programmatically using the <code>selectedItem</code> property (or, for multiple
|
|
selection mode, <code>selectedItems</code>) inherited from <a href="/delite/docs/master/Selection.md/broken"><code>delite/Selection</code></a>.</p>
|
|
<h3 id="page_Auto_Filtering">Auto Filtering</h3>
|
|
<p>In single selection mode, if the property <code>autoFilter</code> is set to <code>true</code> (default is <code>false</code>)
|
|
the widget allows to type one or more characters which are used for filtering
|
|
the list of shown list items. By default, the filtering is case-insensitive, and an item
|
|
is shown if its label contains the entered string.</p>
|
|
<p>The default filtering policy can be customized using the <code>filterMode</code> and
|
|
<code>ignoreCase</code> properties.</p>
|
|
<p>The valid values of <code>filterMode</code> are:</p>
|
|
<ul>
|
|
<li>
|
|
<code>"startsWith"</code>: the item matches if its label starts with the filter text.</li>
|
|
<li>
|
|
<code>"contains"</code>: the item matches if its label contains the filter text.</li>
|
|
<li>
|
|
<code>"is"</code>: the item matches if its label is the filter text.</li>
|
|
</ul>
|
|
<p>The matching is case insensitive by default. Setting <code>ignoreCase</code> to <code>false</code> turns
|
|
it case sensitive.</p>
|
|
<p>The filtering is performed by the <code>filter(fitlerTxt)</code> method, which is called automatically
|
|
while the user types into the editable input element, with <code>filterTxt</code> being the currently
|
|
entered text. The default implementation of this method uses <code>dstore/Filter.match()</code>.
|
|
The matching is performed against the <code>list.labelAttr</code> attribute of the source items.
|
|
The method can be overridden for implementing other filtering strategies.</p>
|
|
<h3 id="page_Attribute_Mapping">Attribute Mapping</h3>
|
|
<p>The customization of the mapping of source item attributes into render item attributes
|
|
can be done on the List instance using the mapping API of
|
|
<a href="list/List.html"><code>deliteful/list/List</code></a>, as supported by its superclass
|
|
<code>delite/StoreMap</code>.</p>
|
|
<p>See the <a href="/delite/docs/master/StoreMap.md/broken"><code>delite/StoreMap</code></a> documentation for
|
|
more information about the available mapping options, and the section
|
|
<a href="list/List.html#store"><code>Store capabilities</code></a> of List's documentation.</p>
|
|
<h3 id="page_Multichannel_rendering">Multichannel rendering</h3>
|
|
<p>The widget provides multichannel rendering: the popup is displayed on
|
|
large screens (desktop-like) below/above the main element, while on small and medium
|
|
screens (phone-like and tablet-like), to optimize the usage of the available space,
|
|
the popup is displayed in a centered overlay (an instance of <code>deliteful/Combobox/ComboPopup</code>
|
|
is used in this case).</p>
|
|
<p>The channel is controlled by the value of the <code>has()</code> channel flags set by
|
|
<code>deliteful/features</code> using CSS media queries depending on the screen size.
|
|
See the <a href="features.html"><code>deliteful/features</code></a> documentation
|
|
for information about how to configure the channel. Also, see the
|
|
<a href="channelBreakpoints.html"><code>deliteful/channelBreakpoints</code></a> documentation for information
|
|
about how to customize the values of the screen size breakpoints used by the media queries.</p>
|
|
<h3 id="page_Value_and_form_support">Value and form support</h3>
|
|
<p>The widget supports the following form-related properties: <code>value</code>, <code>name</code>, <code>disabled</code>
|
|
and <code>alt</code>, inherited from <a href="/delite/docs/master/FormWidget.md/broken"><code>delite/FormWidget</code></a>, and
|
|
<code>readOnly</code> inherited from <a href="/delite/docs/master/FormValueWidget.md/broken"><code>delite/FormValueWidget</code></a>.</p>
|
|
<p>The <code>value</code> property of the widget contains:</p>
|
|
<ul>
|
|
<li>Single selection mode: the value of the selected list items. By default, the
|
|
value of the first item is selected.</li>
|
|
<li>Multiple selection mode: an array containing the values of the selected items.
|
|
Defaults to <code>[]</code>.</li>
|
|
</ul>
|
|
<p>If the widget is used in an HTML form, the submitted value contains:</p>
|
|
<ul>
|
|
<li>Single selection mode: the same as widget's <code>value</code> property.</li>
|
|
<li>Multiple selection mode: a string containing a comma-separated list of the values
|
|
of the selected items. Defaults to <code>""</code>.</li>
|
|
</ul>
|
|
<p>By default, the <code>label</code> field of the List's render items is used as value of the item.
|
|
If the value needs to be different than the label, an attribute mapping needs to be
|
|
set for <code>value</code> on the <code>List</code> instance, for example:</p>
|
|
<pre><code class="language-js"> // Create the store
|
|
var dataSourceWithValue = new Memory({idProperty: "label",
|
|
data: [
|
|
{ label: "France", value: "FR" },
|
|
{ label: "Germany", value: "DE" },
|
|
...
|
|
]});
|
|
// Create the List and set valueAttr to specify the name of the field
|
|
// which stores the value of the item (valueFunc can also be used
|
|
// for dynamically computed values)
|
|
var list = new List({source: dataSourceWithValue, valueAttr: "value", ...});
|
|
// Create the Combobox
|
|
var combobox = new Combobox({list: list, ...});
|
|
combobox.placeAt(document.body);
|
|
</code></pre>
|
|
<p>or in markup:</p>
|
|
<pre><code class="language-html"><html>
|
|
<d-combobox>
|
|
<d-list valueAttr="value">
|
|
{ "label": "France", "value": "FR" },
|
|
...
|
|
</d-list>
|
|
</d-combobox>
|
|
</html>
|
|
</code></pre>
|
|
<p>If no mapping is specified for <code>value</code>, the item label is used as value (itself subject to
|
|
attribute mapping using <code>List.labelAttr</code> or <code>List.labelFunc</code>).</p>
|
|
<p><a name="styling"></a></p>
|
|
<h2 id="page_Element_Styling">Element Styling</h2>
|
|
<h3 id="page_Supported_themes">Supported themes</h3>
|
|
<p>This widget provides default styling for the following delite theme:</p>
|
|
<ul>
|
|
<li>bootstrap</li>
|
|
</ul>
|
|
<h3 id="page_CSS_Classes">CSS Classes</h3>
|
|
<p>CSS classes are bound to the structure of the widget declared in its template <code>deliteful/Combobox/Combobox.html</code>.
|
|
The following table lists the CSS classes that can be used to style the Combobox widget.</p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Class name/selector</th>
|
|
<th>Applies to</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>d-combobox</td>
|
|
<td>Combobox widget root node.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>d-combobox-input</td>
|
|
<td>The native <code><input></code> nodes used by the Combobox widget.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>d-combobox-list</td>
|
|
<td>The List widget displayed inside the popup.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>d-combo-ok-button</td>
|
|
<td>The OK button used in some cases inside the popup.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>d-combo-cancel-button</td>
|
|
<td>The Cancel button used in some cases inside the popup.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p><a name="enterprise"></a></p>
|
|
<h2 id="page_Enterprise_Use">Enterprise Use</h2>
|
|
<h3 id="page_Accessibility">Accessibility</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>type</th>
|
|
<th>status</th>
|
|
<th>comment</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Keyboard</td>
|
|
<td>ok</td>
|
|
<td>For details, see below this table.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Visual Formatting</td>
|
|
<td>ok</td>
|
|
<td>Tested for high constrast and browser zoom (200%), in IE and Firefox.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Screen Reader</td>
|
|
<td>ok</td>
|
|
<td>Tested on JAWS 15 and iOS VoiceOver.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p>Keyboard navigation details:</p>
|
|
<ul>
|
|
<li>DOWN arrow opens the focused combobox.</li>
|
|
<li>In single selection mode:
|
|
<ul>
|
|
<li>UP and DOWN arrows select the next, respectively the previous option.</li>
|
|
<li>RETURN and ESCAPE validate the change.</li>
|
|
</ul>
|
|
</li>
|
|
<li>In multiple selection mode:
|
|
<ul>
|
|
<li>UP and DOWN arrows navigate to the next, respectively the previous option.</li>
|
|
<li>SPACE toggles the selected state of the currently navigated option.</li>
|
|
<li>RETURN and ESCAPE validate the change.</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<h3 id="page_Globalization">Globalization</h3>
|
|
<p><code>deliteful/Combobox</code> provides an internationalizable bundle that contains the following
|
|
messages:</p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Key</th>
|
|
<th>Role</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>"multiple-choice"</td>
|
|
<td>Text written in the combo in multiple selection mode if more than one item is selected.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>"multiple-choice-no-selection"</td>
|
|
<td>Text written in the combo in multiple selection mode if no item is selected.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>"search-placeholder"</td>
|
|
<td>Set as placeholder attribute of the input element used for filtering the list of options.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>"ok-button-label"</td>
|
|
<td>The label of the OK button used for multiple selection mode on mobile.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>"cancel-button-label"</td>
|
|
<td>The label of the Cancel button used for multiple selection mode on mobile.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p>The first 3 strings in the table above are used as default values for the widget properties
|
|
<code>multipleChoiceMsg</code>, <code>multipleChoiceNoSelectionMsg</code>, and respectively <code>searchPlaceHolder</code>.
|
|
To customize these strings on a per-widget basis, set directly these properties.</p>
|
|
<p>Right to left orientation is supported by setting the <code>dir</code> attribute to <code>rtl</code> on the
|
|
widget.</p>
|
|
<h3 id="page_Security">Security</h3>
|
|
<p>This class has no specific security concern.</p>
|
|
<h3 id="page_Browser_Support">Browser Support</h3>
|
|
<p>This class supports all supported browsers.</p>
|
|
</div>
|
|
|
|
<nav>
|
|
<ul class="Pager">
|
|
<li class=Pager--prev><a href="../../Interface_Designer/Widgets/Checkbox.html">Previous</a></li> <li class=Pager--next><a href="../../Interface_Designer/Widgets/features.html">Next</a></li> </ul>
|
|
</nav>
|
|
</article>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- jQuery -->
|
|
<script src="../../themes/daux/js/jquery-1.11.3.min.js"></script>
|
|
|
|
<!-- hightlight.js -->
|
|
<script src="../../themes/daux/js/highlight.pack.js"></script>
|
|
<script>hljs.initHighlightingOnLoad();</script>
|
|
|
|
<!-- JS -->
|
|
<script src="../../admin-theme/bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
|
|
<script src="../../themes/daux/js/daux.js"></script>
|
|
|
|
<!-- Tipue Search -->
|
|
<script type="text/javascript" src="../../tipuesearch/tipuesearch.js"></script>
|
|
|
|
<script>
|
|
window.onunload = function(){}; // force $(document).ready to be called on back/forward navigation in firefox
|
|
$(function() {
|
|
tipuesearch({
|
|
'base_url': '../../'
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|