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

761 lines
30 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/*
This example demonstrates various form elements provided by Ox.UI.
*/
'use strict';
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;
})),
elements = {
ArrayInput: {
description: 'Allows you to enter an array of strings.',
options: [
{
description: 'Array input',
max: 3,
width: 256
},
{
description: 'Array input with label',
label: 'Please enter up to 3 names',
max: 3,
width: 256
},
{
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
}
]
},
Button: {
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.',
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
}
]
},
ButtonGroup: {
description: 'Works as a form element when it\'s selectable.',
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
}
]
},
Checkbox: {
description: 'Has a value of either true or false',
options: [
{
description: 'Checkbox',
},
{
description: 'Checkbox with label',
label: 'Check me',
labelWidth: 112, // fixme
width: 128
},
{
description: 'Checkbox with title',
title: 'Check me',
width: 128
}
]
},
CheckboxGroup: {
description: 'Combines multiple checkboxes',
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
},
{
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
}
]
},
ColorInput: {
description: 'Allows you to enter a RGB or HSL value.',
options: [
{
description: 'RGB',
value: [255, 0, 0]
},
{
description: 'HSL',
mode: 'hsl'
}
]
},
DateInput: {
description: 'Allows you to enter a date.',
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
}
]
},
DateTimeInput: {
description: 'Allows you to enter a date and a time.',
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
}
]
},
FormElementGroup: {
description: 'Combines multiple form elements.',
options: [
{
description: 'Two Selects and one DateInput',
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()
]
}
]
},
Input: {
description: 'Is a standard text input element, with various options.',
options: [
{
description: 'Integer between 0 and 100',
arrows: true,
max: 100,
min: 0,
type: 'int'
},
{
description: 'Input with text',
value: 'Text'
},
{
description: 'Disabled input with text',
disabled: true,
value: 'Text'
},
{
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
},
//{
// description: 'Textarea with label',
// height: 128,
// label: 'Label',
// type: 'textarea',
// width: 256
//},
{
description: 'Textarea with placeholder',
height: 128,
placeholder: 'Placeholder',
type: 'textarea',
width: 256
}
]
},
InputGroup: {
description: 'Combines multiple input elements and separators.',
options: [
{
description: 'Two Inputs',
inputs: [
Ox.Input({
id: 'width',
placeholder: 'Width',
//type: 'int',
width: 64
}),
Ox.Input({
id: 'height',
placeholder: 'Height',
//type: 'int',
width: 64
})
],
separators: [
{title: '×', width: 16}
]
},
{
description: 'A Checkbox, an Input, and two Selects',
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}
]
}
]
},
ObjectArrayInput: {
description: 'Allows you to enter an array of objects.',
options: [
{
description: 'Multiple contacts',
buttonTitles: {
add: 'Add contact',
remove: 'Remove contact'
},
inputs: [
{
element: 'Input',
options: {id: 'firstname', label: 'First Name'}
},
{
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'}
},
]
}
]
},
ObjectInput: {
description: 'Combines multiple key/value pairs.',
options: [
{
description: 'Contact object',
elements: [
Ox.Input({id: 'firstname', label: 'First Name'}),
Ox.Input({id: 'lastname', label: 'Last Name'}),
Ox.ArrayInput({id: 'phone', label: 'Phone Numbers', max: 3}),
Ox.Input({id: 'email', label: 'E-Mail Address'})
]
}
]
},
Range: {
description: 'Is a horizontal slider.',
options: [
{
description: 'On/off switch',
max: 1,
min: 0,
size: 48,
thumbSize: 32,
thumbValue: true,
values: ['Off', 'On']
},
{
description: 'A value between 0 and 10',
arrows: true,
max: 10,
min: 0,
size: 360,
thumbSize: 32,
thumbValue: true
},
{
description: 'One of six colors',
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']
},
{
description: 'A value between 0 and 359',
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
}
]
},
Select: {
description: 'Is a select element.',
options: [
{
description: 'Image select, select one',
items: [
{id: 'a', title: 'Select me'},
{id: 'b', title: 'or select me'},
{id: 'c', title: 'or select me'}
],
type: 'image',
width: 16 // fixme!
},
{
description: 'Text select with label, select one',
items: [
{id: 'a', title: 'Select me'},
{id: 'b', title: 'or select me'},
{id: 'c', title: 'or select me'}
],
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...'
}
]
},
SelectInput: {
description: 'Is a select element with optional text input.',
options: [
{
items: [
{id: 'javascript', title: 'JavaScript'},
{id: 'python', title: 'Python'},
{id: 'other', title: 'Other...'}
],
value: 'javascript',
width: 256
}
]
},
Spreadsheet: {
description: 'Combines a variable number of columns and rows.',
options: [
{
title: 'Budget',
value: {
columns: [2010, 2011, 2012],
rows: ['Item A', 'Item B', 'Item C']
}
}
]
},
TimeInput: {
description: 'Allows you to enter a time.',
options: [
{
description: 'Time input with am/pm',
ampm: true
},
{
description: 'Time input with seconds',
seconds: true
},
{
description: 'Time input with milliseconds',
milliseconds: true
}
]
}
},
$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
}));
}),
validate: function() {
return true;
}
}
})
})
.bindEvent({
change: showValues,
select: showValues
}),
$list = Ox.Element(),
$panel = Ox.SplitPanel({
elements: [
{
element: $form
},
{
element: $list,
resizable: true,
resize: [256],
size: 256
}
],
orientation: 'horizontal'
})
.appendTo(Ox.$body);
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);
}
});