oxjs/examples/forms/form_elements/js/example.js

753 lines
29 KiB
JavaScript
Raw Normal View History

2012-06-13 13:57:05 +00:00
/*
2012-06-24 17:13:23 +00:00
This example demonstrates various form elements provided by Ox.UI.
2012-06-13 13:57:05 +00:00
*/
2012-06-15 07:11:06 +00:00
'use strict';
2012-06-14 10:36:51 +00:00
Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
var countries = Ox.sortASCII(Ox.COUNTRIES.filter(function(country) {
return !country.dissolved && !country.disputed && !country.exception;
}).map(function(country) {
return country.name;
})),
2012-06-14 13:50:53 +00:00
elements = {
ArrayInput: {
description: 'Allows you to enter an array of strings.',
options: [
{
2012-06-15 07:11:06 +00:00
description: 'Array input',
2012-06-14 13:50:53 +00:00
max: 3,
width: 256
},
{
2012-06-15 07:11:06 +00:00
description: 'Array input with label',
2012-06-14 13:50:53 +00:00
label: 'Please enter up to 3 names',
max: 3,
width: 256
2015-02-21 07:36:14 +00:00
},
{
description: 'Custom array input with label',
input: {
get: function() {
var $input = Ox.FormElementGroup({
elements: [
Ox.Select({
items: [
{id: 'home', title: 'Home'},
{id: 'work', title: 'Work'},
{id: 'mobile', title: 'Mobile'}
],
overlap: 'right',
width: 80
})
.bindEvent({
change: function() {
$input.options('elements')[1]
.focusInput();
}
}),
Ox.Input({
autovalidate: /[\d\s\.+\-\/]/,
width: 128
})
]
});
return $input
},
getEmpty: function() {
return ['home', ''];
},
isEmpty: function(value) {
return value[1] === '';
}
},
label: 'Please enter up to 3 phone numbers',
max: 3,
width: 256
2012-06-13 13:57:05 +00:00
}
2012-06-14 13:50:53 +00:00
]
},
Button: {
2012-06-15 07:11:06 +00:00
description: 'Can be used as a form element '
+ '(i.e. has a value and fires change events) '
+ 'when it\'s selectable, or has multiple values.',
2012-06-14 13:50:53 +00:00
options: [
{
description: 'Selectable image button with tooltip',
selectable: true,
title: 'like',
tooltip: 'Like',
type: 'image'
},
{
description: 'Multi-value image button with tooltip',
tooltip: ['Lock', 'Unlock'],
type: 'image',
values: [
{id: 'unlocked', title: 'lock'},
{id: 'locked', title: 'unlock'}
]
},
{
description: 'Selectable button',
selectable: true,
title: 'Select me'
},
{
description: 'Multi-value button with fixed width',
values: [
{id: 'off', title: 'Off'},
{id: 'on', title: 'On'}
],
width: 64
2012-06-13 13:57:05 +00:00
}
2012-06-14 13:50:53 +00:00
]
},
ButtonGroup: {
2012-06-15 07:11:06 +00:00
description: 'Works as a form element when it\'s selectable.',
2012-06-14 13:50:53 +00:00
options: [
{
description: 'Image buttons, select one',
buttons: [
{id: 'grid', title: 'grid'},
{id: 'iconlist', title: 'iconlist'},
{id: 'list', title: 'list'},
{id: 'columns', title: 'columns'}
],
selectable: true,
type: 'image'
},
{
description: 'Image buttons, select any',
buttons: [
{id: 'check', title: 'check'},
{id: 'flag', title: 'flag'},
{id: 'like', title: 'like'},
{id: 'star', title: 'star'}
],
max: -1,
min: 0,
selectable: true,
type: 'image'
},
{
description: 'Text buttons, select one',
buttons: [
{id: 'a', title: 'Select me'},
{id: 'b', title: 'or select me'},
{id: 'c', title: 'or select me'}
],
selectable: true
},
{
description: 'Text buttons, select one or two',
buttons: [
{id: 'a', title: 'Select me'},
{id: 'b', title: 'and select me'},
{id: 'c', title: 'or select me'}
],
max: 2,
min: 1,
selectable: true
},
{
description: 'Text buttons, select two',
buttons: [
{id: 'a', title: 'Select me'},
{id: 'b', title: 'and select me'},
{id: 'c', title: 'or select me'}
],
max: 2,
min: 2,
selectable: true
},
{
description: 'Text buttons, select any',
buttons: [
{id: 'a', title: 'Select me'},
{id: 'b', title: 'and select me'},
{id: 'c', title: 'and select me'}
],
max: -1,
min: 0,
selectable: true
2012-06-13 13:57:05 +00:00
}
2012-06-14 13:50:53 +00:00
]
},
Checkbox: {
2012-06-15 07:11:06 +00:00
description: 'Has a value of either true or false',
2012-06-14 13:50:53 +00:00
options: [
{
2012-07-09 14:00:39 +00:00
description: 'Checkbox',
2012-06-14 13:50:53 +00:00
},
{
description: 'Checkbox with label',
2012-06-15 09:36:21 +00:00
label: 'Check me',
2012-07-09 14:00:39 +00:00
labelWidth: 112, // fixme
2012-06-15 09:36:21 +00:00
width: 128
},
{
description: 'Checkbox with title',
2012-06-14 13:50:53 +00:00
title: 'Check me',
width: 128
2012-06-14 10:36:51 +00:00
}
2012-06-14 13:50:53 +00:00
]
},
CheckboxGroup: {
2012-07-09 14:00:39 +00:00
description: 'Combines multiple checkboxes',
2012-06-14 13:50:53 +00:00
options: [
{
description: 'Checkboxes, select one',
checkboxes: [
{id: 'a', title: 'Check me'},
{id: 'b', title: 'or check me'},
{id: 'c', title: 'or check me'}
],
width: 360
},
{
description: 'Checkboxes, select one or two',
checkboxes: [
{id: 'a', title: 'Check me'},
{id: 'b', title: 'and check me'},
{id: 'c', title: 'or check me'}
],
max: 2,
min: 1,
width: 360
},
{
description: 'Checkboxes, select two',
checkboxes: [
{id: 'a', title: 'Check me'},
{id: 'b', title: 'and check me'},
{id: 'c', title: 'or check me'}
],
max: 2,
min: 2,
width: 360
},
{
description: 'Checkboxes, select any',
checkboxes: [
{id: 'a', title: 'Check me'},
{id: 'b', title: 'and check me'},
{id: 'c', title: 'and check me'}
],
max: -1,
min: 0,
width: 360
},
{
2012-07-09 14:00:39 +00:00
description: 'Checkboxes as a list, select one',
checkboxes: [
{id: 'a', title: 'Check me'},
{id: 'b', title: 'or check me'},
{id: 'c', title: 'or check me'}
],
type: 'list',
width: 360
2012-06-14 10:36:51 +00:00
}
2012-06-14 13:50:53 +00:00
]
},
ColorInput: {
2012-07-09 15:39:05 +00:00
description: 'Allows you to enter a RGB or HSL value.',
options: [
{
description: 'RGB',
value: [255, 0, 0]
},
{
description: 'HSL',
mode: 'hsl'
}
]
},
2012-06-14 13:50:53 +00:00
DateInput: {
2012-07-09 14:00:39 +00:00
description: 'Allows you to enter a date.',
2012-06-14 13:50:53 +00:00
options: [
{
description: 'Short date input'
},
{
description: 'Medium date input',
format: 'medium'
},
{
description: 'Long date input',
format: 'long'
},
{
description: 'Medium date input with weekday',
format: 'medium',
weekday: true
},
{
description: 'Long date input with weekday',
format: 'long',
weekday: true
2012-06-14 10:36:51 +00:00
}
2012-06-14 13:50:53 +00:00
]
},
DateTimeInput: {
2012-07-09 14:00:39 +00:00
description: 'Allows you to enter a date and a time.',
2012-06-14 13:50:53 +00:00
options: [
{
description: 'Short date/time input with am/pm',
ampm: true
},
{
description: 'Medium date/time input with seconds',
format: 'medium',
seconds: true
},
{
description: 'Long date/time input with weekday',
format: 'long',
weekday: true
2012-06-14 10:36:51 +00:00
}
2012-06-14 13:50:53 +00:00
]
},
FormElementGroup: {
2012-07-09 14:00:39 +00:00
description: 'Combines multiple form elements.',
2012-06-14 13:50:53 +00:00
options: [
{
2012-07-09 14:00:39 +00:00
description: 'Two Selects and one DateInput',
2012-06-14 13:50:53 +00:00
elements: [
Ox.Select({
items: [
{id: 'departure', title: 'Departure'},
{id: 'arrival', title: 'Arrival'}
],
overlap: 'right',
width: 96
}),
Ox.Select({
items: [
{id: 'before', title: 'is before'},
{id: 'after', title: 'is after'}
],
overlap: 'right',
width: 96
}),
Ox.DateInput()
]
2012-06-14 10:36:51 +00:00
}
2012-06-14 13:50:53 +00:00
]
},
Input: {
2012-07-09 14:00:39 +00:00
description: 'Is a standard text input element, with various options.',
2012-06-14 13:50:53 +00:00
options: [
{
2012-07-09 14:00:39 +00:00
description: 'Integer between 0 and 100',
2012-06-14 13:50:53 +00:00
arrows: true,
max: 100,
min: 0,
type: 'int'
},
{
description: 'Input with placeholder',
placeholder: 'Placeholder'
},
{
description: 'Input with label',
label: 'Label'
},
{
description: 'Input with clear button',
clear: true
},
{
description: 'Autocomplete with replace',
autocomplete: countries,
autocompleteReplace: true,
width: 256
},
{
description: 'Autocomplete with replace and correct',
autocomplete: countries,
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
width: 256
},
{
description: 'Autocomplete with select and highlight',
autocomplete: countries,
autocompleteSelect: true,
autocompleteSelectHighlight: true,
width: 256
},
{
description: 'Autocomplete with replace and select',
autocomplete: countries,
autocompleteReplace: true,
autocompleteSelect: true,
width: 256
},
{
description: 'Autocomplete with replace, correct and select',
autocomplete: countries,
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
autocompleteSelect: true,
width: 256
},
{
description: 'Password',
type: 'password',
width: 256
},
{
description: 'Password with label, placeholder and clear button',
clear: true,
label: 'Label',
placeholder: 'Placeholder',
type: 'password',
width: 256
},
2012-07-09 14:00:39 +00:00
//{
// description: 'Textarea with label',
// height: 128,
// label: 'Label',
// type: 'textarea',
// width: 256
//},
2012-06-14 13:50:53 +00:00
{
description: 'Textarea with placeholder',
height: 128,
placeholder: 'Placeholder',
type: 'textarea',
width: 256
}
]
},
InputGroup: {
2012-07-09 14:00:39 +00:00
description: 'Combines multiple input elements and separators.',
2012-06-14 13:50:53 +00:00
options: [
{
2012-07-09 14:00:39 +00:00
description: 'Two Inputs',
2012-06-14 13:50:53 +00:00
inputs: [
Ox.Input({
id: 'width',
placeholder: 'Width',
2012-07-09 14:00:39 +00:00
//type: 'int',
2012-06-14 13:50:53 +00:00
width: 64
}),
Ox.Input({
id: 'height',
placeholder: 'Height',
2012-07-09 14:00:39 +00:00
//type: 'int',
2012-06-14 13:50:53 +00:00
width: 64
})
],
separators: [
2012-07-09 14:00:39 +00:00
{title: '×', width: 16}
2012-06-14 13:50:53 +00:00
]
2012-06-15 07:11:06 +00:00
},
{
2012-07-09 14:00:39 +00:00
description: 'A Checkbox, an Input, and two Selects',
2012-06-15 07:11:06 +00:00
inputs: [
Ox.Checkbox({
width: 16
}),
Ox.FormElementGroup({
elements: [
Ox.Input({
type: 'int',
width: 64
}),
Ox.Select({
items: [
{id: 'items', title: 'items'},
{id: 'hours', title: 'hours'},
{id: 'gb', title: 'GB'},
],
overlap: 'left',
width: 64
}),
],
float: 'right',
width: 128
}),
Ox.Select({
items: [
{id: 'title', title: 'Title'},
{id: 'director', title: 'Director'},
{id: 'year', title: 'Year'}
],
value: 'title',
width: 128
})
],
separators: [
{title: 'Limit to', width: 64},
{title: 'sorted by', width: 64}
]
2012-06-13 13:57:05 +00:00
}
2012-06-14 13:50:53 +00:00
]
},
ObjectArrayInput: {
2012-07-09 14:00:39 +00:00
description: 'Allows you to enter an array of objects.',
2012-06-14 13:50:53 +00:00
options: [
{
2012-07-09 14:00:39 +00:00
description: 'Multiple contacts',
2012-06-14 13:50:53 +00:00
buttonTitles: {
add: 'Add contact',
remove: 'Remove contact'
},
inputs: [
{
element: 'Input',
options: {id: 'firstname', label: 'First Name'}
2012-06-13 13:57:05 +00:00
},
2012-06-14 13:50:53 +00:00
{
element: 'Input',
options: {id: 'lastname', label: 'Last Name'}
},
{
element: 'ArrayInput',
options: {id: 'phone', label: 'Phone Numbers', max: 3}
},
{
element: 'Input',
options: {id: 'email', label: 'E-Mail Address'}
},
]
2012-06-13 13:57:05 +00:00
}
2012-06-14 13:50:53 +00:00
]
},
ObjectInput: {
2012-07-09 14:00:39 +00:00
description: 'Combines multiple key/value pairs.',
2012-06-14 13:50:53 +00:00
options: [
{
2012-07-09 14:00:39 +00:00
description: 'Contact object',
2012-06-14 13:50:53 +00:00
elements: [
Ox.Input({id: 'firstname', label: 'First Name'}),
Ox.Input({id: 'lastname', label: 'First Name'}),
Ox.ArrayInput({id: 'phone', label: 'Phone Numbers', max: 3}),
Ox.Input({id: 'email', label: 'E-Mail Address'})
]
2012-06-13 13:57:05 +00:00
}
2012-06-14 13:50:53 +00:00
]
},
Range: {
2012-07-09 14:00:39 +00:00
description: 'Is a horizontal slider.',
2012-06-14 13:50:53 +00:00
options: [
{
2012-07-09 14:00:39 +00:00
description: 'On/off switch',
2012-06-15 07:11:06 +00:00
max: 1,
2012-06-14 13:50:53 +00:00
min: 0,
2012-06-15 07:11:06 +00:00
size: 48,
2012-06-14 13:50:53 +00:00
thumbSize: 32,
2012-06-15 07:11:06 +00:00
thumbValue: true,
values: ['Off', 'On']
2012-06-14 13:50:53 +00:00
},
{
2012-07-09 14:00:39 +00:00
description: 'A value between 0 and 10',
2012-06-15 07:11:06 +00:00
arrows: true,
max: 10,
2012-06-14 13:50:53 +00:00
min: 0,
2012-06-15 07:11:06 +00:00
size: 360,
2012-06-14 13:50:53 +00:00
thumbSize: 32,
2012-06-15 07:11:06 +00:00
thumbValue: true
2012-06-14 13:50:53 +00:00
},
{
2012-07-09 14:00:39 +00:00
description: 'One of six colors',
2012-06-14 13:50:53 +00:00
size: 360,
thumbValue: true,
trackColors: [
'rgb(255, 0, 0)',
'rgb(255, 255, 0)',
'rgb(0, 255, 0)',
'rgb(0, 255, 255)',
'rgb(0, 0, 255)',
'rgb(255, 0, 255)'
],
values: ['Red', 'Yellow', 'Green', 'Cyan', 'Blue', 'Magenta']
},
{
2012-07-09 14:00:39 +00:00
description: 'A value between 0 and 359',
2012-06-14 13:50:53 +00:00
max: 359,
min: 0,
size: 360,
thumbSize: 36,
thumbValue: true,
trackColors: [
'rgb(255, 0, 0)',
'rgb(255, 255, 0)',
'rgb(0, 255, 0)',
'rgb(0, 255, 255)',
'rgb(0, 0, 255)',
'rgb(255, 0, 255)',
'rgb(255, 0, 0)'
],
trackGradient: true
2012-06-13 13:57:05 +00:00
}
2012-06-14 13:50:53 +00:00
]
},
Select: {
2012-07-09 14:00:39 +00:00
description: 'Is a select element.',
2012-06-14 13:50:53 +00:00
options: [
{
2012-06-15 07:11:06 +00:00
description: 'Image select, select one',
2012-06-14 13:50:53 +00:00
items: [
{id: 'a', title: 'Select me'},
{id: 'b', title: 'or select me'},
{id: 'c', title: 'or select me'}
],
type: 'image',
width: 16 // fixme!
},
{
2012-06-15 07:11:06 +00:00
description: 'Text select with label, select one',
2012-06-14 13:50:53 +00:00
items: [
{id: 'a', title: 'Select me'},
{id: 'b', title: 'or select me'},
{id: 'c', title: 'or select me'}
2012-06-15 07:11:06 +00:00
],
label: 'Please select...',
labelWidth: 128
},
{
description: 'Text select with title, select one or two',
items: [
{id: 'a', title: 'Select me'},
{id: 'b', title: 'and select me'},
{id: 'c', title: 'or select me'}
],
max: 2,
min: 1,
title: 'Please select...'
},
{
description: 'Text select with title, select two',
items: [
{id: 'a', title: 'Select me'},
{id: 'b', title: 'and select me'},
{id: 'c', title: 'or select me'}
],
max: 2,
min: 2,
title: 'Please select...'
},
{
description: 'Text select with title, select any',
items: [
{id: 'a', title: 'Select me'},
{id: 'b', title: 'and select me'},
{id: 'c', title: 'and select me'}
],
max: -1,
min: 0,
title: 'Please select...'
2012-06-13 13:57:05 +00:00
}
2012-06-14 13:50:53 +00:00
]
},
SelectInput: {
2012-07-09 14:00:39 +00:00
description: 'Is a select element with optional text input.',
2012-06-14 13:50:53 +00:00
options: [
{
items: [
2012-07-09 14:00:39 +00:00
{id: 'javascript', title: 'JavaScript'},
{id: 'python', title: 'Python'},
2012-06-14 13:50:53 +00:00
{id: 'other', title: 'Other...'}
],
2012-07-09 14:00:39 +00:00
value: 'javascript',
2012-06-14 13:50:53 +00:00
width: 256
}
]
},
Spreadsheet: {
2012-07-09 14:00:39 +00:00
description: 'Combines a variable number of columns and rows.',
2012-06-14 13:50:53 +00:00
options: [
{
title: 'Budget',
value: {
columns: [2010, 2011, 2012],
rows: ['Item A', 'Item B', 'Item C']
}
}
]
},
TimeInput: {
2012-07-09 14:00:39 +00:00
description: 'Allows you to enter a time.',
2012-06-14 13:50:53 +00:00
options: [
{
description: 'Time input with am/pm',
ampm: true
},
{
description: 'Time input with seconds',
seconds: true
},
{
description: 'Time input with milliseconds',
milliseconds: true
}
]
}
2012-06-15 07:11:06 +00:00
},
2012-06-14 13:50:53 +00:00
$form = Ox.FormPanel({
form: Object.keys(elements).sort().map(function(name) {
var element = elements[name];
return {
id: name.toLowerCase(),
title: name,
description: '<code>Ox.' + name + '</code> '
+ element.description[0].toLowerCase()
+ element.description.slice(1),
descriptionWidth: 360,
items: element.options.map(function(options, i) {
return Ox[name](Ox.extend(options, {
id: Ox.char(97 + i),
description: Ox.char(65 + i) + '. '
+ options.description
}));
}),
2012-06-13 13:57:05 +00:00
validate: function() {
return true;
}
}
2012-06-14 13:50:53 +00:00
})
2012-06-13 13:57:05 +00:00
})
.bindEvent({
2012-07-09 14:00:39 +00:00
change: showValues,
select: showValues
2012-06-13 13:57:05 +00:00
}),
2012-07-09 14:00:39 +00:00
$list = Ox.Element(),
2012-06-13 13:57:05 +00:00
$panel = Ox.SplitPanel({
elements: [
{
element: $form
},
{
element: $list,
resizable: true,
resize: [256],
size: 256
}
],
orientation: 'horizontal'
})
.appendTo(Ox.$body);
2012-07-09 14:00:39 +00:00
showValues({section: 'arrayinput'});
function showValues(data) {
setTimeout(function() {
$panel.replaceElement(1,
Ox.TreeList({
data: Ox.extend(
{}, data.section, $form.values()[data.section]
),
expanded: true,
width: 256 - Ox.UI.SCROLLBAR_SIZE
})
);
}, 250);
}
});