oxjs/demos/form2/js/form.js

1280 lines
48 KiB
JavaScript
Raw Normal View History

2011-11-30 14:35:08 +00:00
Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
2010-09-03 08:47:40 +00:00
var $body = $("body"),
$panel = $("<div>")
.attr({
id: "panel"
})
.appendTo($body),
2011-12-21 13:42:47 +00:00
countries = Ox.sortASCII(Ox.map(Ox.COUNTRIES, function(country) {
return country.dissolved ? null : country.name;
}));
2010-09-03 08:47:40 +00:00
objects = {
"Button": [
{
options: {
style: "symbol",
title: "add",
type: "image"
},
title: "Symbol Button"
},
{
options: {
title: "add",
type: "image",
},
title: "Image Button"
},
{
options: {
title: "Button",
},
title: "Text Button"
},
{
options: {
selectable: true,
title: "Button",
},
title: "Selectable Button"
},
{
options: {
disabled: true,
title: "Button",
},
title: "Disabled Button"
},
{
options: {
2011-12-22 05:52:46 +00:00
values: [
{id: "collapsed", title: "right"},
{id: "expanded", title: "down"},
2010-09-03 08:47:40 +00:00
],
type: "image"
},
2011-12-22 05:52:46 +00:00
title: "Multi-Value Image Button"
2010-09-03 08:47:40 +00:00
},
{
options: {
selectable: true,
2011-12-22 05:52:46 +00:00
value: 'on',
values: [
2010-09-03 08:47:40 +00:00
{id: "off", title: "Off"},
2011-12-22 05:52:46 +00:00
{id: "on", title: "On"}
2010-09-03 08:47:40 +00:00
],
2011-12-22 05:52:46 +00:00
width: 32
2010-09-03 08:47:40 +00:00
},
2011-12-22 05:52:46 +00:00
title: "Multi-Value Selectable Text Button"
2010-09-03 08:47:40 +00:00
}
],
"ButtonGroup": [
{
options: {
buttons: [
2011-12-21 13:42:47 +00:00
'Add', 'Remove', 'Close', 'Select',
'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',
'Left', 'Right', 'Up', 'Down',
'Pause', 'PlayInToOut', 'GoToIn', 'GoToOut', 'SetIn', 'SetOut',
'GoToPoster', 'SetPoster',
'Center', 'Zoom', 'Grow', 'Shrink', 'Fill', 'Fit',
'Unmute', 'VolumeUp', 'VolumeDown', 'Mute',
'Undo', 'Redo', 'Unlock', 'Lock',
'Volume', 'Mount', 'Unmount', 'Sync',
'Info', 'Warning', 'Help',
'Check', 'Embed', 'Bracket',
'Upload', 'Download',
'Copyright', 'NoCopyright',
'Click', 'Delete', 'Edit', 'Find', 'Flag', 'Icon', 'Like',
'Mail', 'Publish', 'Set', 'Star', 'User', 'View', 'Loading'
2010-09-03 08:47:40 +00:00
],
id: "buttonGroupImage",
type: "image"
},
title: "Image ButtonGroup"
},
{
options: {
buttons: [
{
id: "one",
title: "do something",
},
{
id: "two",
title: "do something else",
}
],
id: "buttonGroupText"
},
title: "Text ButtonGroup"
},
{
options: {
buttons: [
{
id: "either",
title: "select me",
},
{
id: "or1",
title: "or select me",
},
{
id: "or2",
title: "or select me",
}
],
id: "selectableButtonGroupOne",
selectable: true
},
title: "Selectable ButtonGroup, select one"
},
{
options: {
buttons: [
{
id: "both",
title: "select me",
},
{
id: "and",
title: "and select me",
},
{
id: "or",
title: "or select me",
}
],
id: "selectableButtonGroupOneTwo",
max: 2,
min: 1,
selectable: true
},
title: "Selectable ButtonGroup, select one or two"
},
{
options: {
buttons: [
{
id: "both",
title: "select me",
},
{
id: "and",
title: "and select me",
},
{
id: "or",
title: "or select me",
}
],
id: "selectableButtonGroupTwo",
max: 2,
min: 2,
selectable: true
},
title: "Selectable ButtonGroup, select two"
},
{
options: {
buttons: [
{
id: "both",
title: "select me",
},
{
id: "and1",
title: "and select me",
},
{
id: "and2",
title: "and select me",
}
],
id: "selectableButtonGroupAny",
max: -1,
min: 0,
2011-12-21 13:42:47 +00:00
selectable: true,
value: 'and1'
2010-09-03 08:47:40 +00:00
},
title: "Selectable ButtonGroup, select any"
},
{
options: {
buttons: [
{
id: "either",
title: "select me",
},
{
id: "or1",
title: "or select me",
},
{
id: "or2",
title: "or select me",
}
],
id: "tabButtonGroup",
selectable: true,
style: "tab"
},
title: "Tab ButtonGroup"
}
],
"Checkbox": [
{
2011-12-21 13:42:47 +00:00
options: {
value: true
},
title: "Checkbox",
2010-09-03 08:47:40 +00:00
},
{
options: {
title: "check me",
},
title: "Checkbox with Title"
},
{
options: {
disabled: true,
title: "check me",
},
title: "Disabled Checkbox with Title"
},
{
options: {
title: "check me",
width: 300,
},
title: "Checkbox with Title and Width"
}
],
"CheckboxGroup": [
{
options: {
checkboxes: [
{id: "either", title: "check me"},
{id: "or1", title: "or check me"},
{id: "or2", title: "or check me"},
],
id: "CheckboxGroupOne",
width: 300
},
title: "CheckboxGroup, select one"
},
{
options: {
checkboxes: [
{id: "either", title: "check me"},
{id: "or1", title: "or check me"},
{id: "or2", title: "or check me"},
],
id: "CheckboxGroupTwo",
max: 2,
min: 2,
width: 300
},
title: "CheckboxGroup, select two"
},
{
options: {
checkboxes: [
{id: "both", title: "check me"},
{id: "and1", title: "and check me"},
{id: "and2", title: "and check me"},
],
id: "CheckboxGroupAny",
max: -1,
min: 0,
2011-12-21 13:42:47 +00:00
value: 'and1',
2010-09-03 08:47:40 +00:00
width: 300
},
title: "CheckboxGroup, select any"
},
],
"ColorInput": [
{
options: {
2011-11-30 14:35:08 +00:00
id: "colorInputRGB",
value: [255, 0, 0]
2010-09-03 08:47:40 +00:00
},
2011-11-30 14:35:08 +00:00
title: "RGB ColorInput"
},
{
options: {
id: "colorInputHSL",
mode: "HSL",
value: [0, 1, 0.5]
},
title: "HSL ColorInput"
2010-09-03 08:47:40 +00:00
}
],
"DateInput": [
{
options: {
id: "dateInputShort"
},
title: "Short DateInput"
},
{
options: {
format: "medium",
id: "dateInputMedium"
},
title: "Medium DateInput"
},
{
options: {
format: "long",
id: "dateInputLong",
},
title: "Long DateInput"
},
{
options: {
id: "dateInputShortValue",
value: "2000-01-01"
},
title: "Short DateInput with Value"
},
{
options: {
format: "medium",
id: "dateInputMediumWeekday",
weekday: true
},
title: "Medium DateInput with Weekday"
},
{
options: {
format: "long",
id: "dateInputLongWeekday",
weekday: true
},
title: "Long DateInput with Weekday"
}
],
"DateTimeInput": [
{
options: {
id: "dateTimeInputShort"
},
title: "Short DateTimeInput"
},
2011-12-21 13:42:47 +00:00
{
options: {
format: 'medium',
id: "dateTimeInputMedium",
seconds: true,
weekday: true
},
title: "Medium DateTimeInput"
},
2010-09-03 08:47:40 +00:00
{
options: {
ampm: true,
format: "long",
id: "dateTimeInputLong",
seconds: true,
weekday: true,
},
title: "Long DateTimeInput"
},
],
"FormElementGroup": [
{
options: {
elements: [
new Ox.Select({
id: "select",
items: [
{id: "one", title: "Find: One"},
{id: "two", title: "Find: Two"},
{id: "three", title: "Find: Three"}
],
overlap: "right",
width: 128
}),
new Ox.Input({
id: "input",
width: 128
})
],
id: "formElementGroupSelectInput"
},
title: "FormElementGroup (Select and Input)"
},
{
options: {
elements: [
new Ox.Input({
id: "input_",
width: 128
}),
new Ox.Select({
id: "select_",
items: [
{id: "kb", title: "KB"},
{id: "mb", title: "MB"},
{id: "gb", title: "GB"},
{id: "tb", title: "TB"}
],
overlap: "left",
width: 128
}),
],
float: "right",
id: "formElementGroupInputSelect"
},
title: "FormElementGroup (Input and Select)"
},
2011-01-23 04:59:16 +00:00
{
options: {
elements: [
Ox.Label({
2011-01-23 04:59:16 +00:00
title: "Match",
overlap: "right",
width: 48
}),
Ox.FormElementGroup({
elements: [
Ox.Select({
id: "select_",
items: [
{id: "all", title: "all"},
{id: "any", title: "any"},
],
width: 48
}),
Ox.Label({
overlap: "left",
title: "of the following conditions",
width: 160
})
],
float: 'right',
width: 208
})
2011-01-23 04:59:16 +00:00
],
2011-12-21 13:42:47 +00:00
join: function(value) {
return value[1][0];
},
2011-01-23 04:59:16 +00:00
float: "left",
2011-12-21 13:42:47 +00:00
id: "formElementGroupLabels",
split: function(value) {
return [null, [value, null]];
}
2011-01-23 04:59:16 +00:00
},
title: "FormElementGroup (Select and Labels)"
2011-01-23 04:59:16 +00:00
},
2010-09-03 08:47:40 +00:00
{
options: {
elements: [
new Ox.Select({
items: [
2011-12-21 13:42:47 +00:00
{id: "title", title: "Title"},
{id: "date", title: "Date"},
{id: "place", title: "Place"}
2010-09-03 08:47:40 +00:00
],
overlap: "right",
width: 128
}),
new Ox.Select({
items: [
2011-12-21 13:42:47 +00:00
{id: "is", title: "is"},
{id: "is_between", title: "is between"},
{id: "is_not_between", title: "is not between"}
2010-09-03 08:47:40 +00:00
],
overlap: "right",
width: 128
}),
new Ox.InputGroup({
inputs: [
new Ox.DateInput({
width: {
day: 36,
month: 36,
year: 56
}
}),
new Ox.DateInput({
width: {
day: 36,
month: 36,
year: 56
}
}),
],
separators: [
{title: "and", width: 32}
]
})
],
2011-12-21 13:42:47 +00:00
id: "formElementGroupSelectInputGroup",
2010-09-03 08:47:40 +00:00
},
2011-12-21 13:42:47 +00:00
title: "FormElementGroup (Selects and InputGroup)"
2010-09-03 08:47:40 +00:00
}
],
"Input": [
{
options: {
value: "Value"
},
title: "Input"
},
{
options: {
disabled: true,
value: "Disabled"
},
title: "Disabled Input"
},
{
options: {
placeholder: "Placeholder"
},
title: "Input with Placeholder"
},
{
options: {
label: "Label"
},
title: "Input with Label"
},
{
options: {
clear: true
},
title: "Input with Clear Button"
},
{
options: {
clear: true,
label: "Label",
placeholder: "Placeholder",
width: 256
},
title: "Input with Label, Placeholder and Button"
},
{
options: {
type: "password"
},
title: "Password Input"
},
{
options: {
clear: true,
placeholder: "Password",
type: "password"
},
title: "Password Input with Placeholder"
},
{
options: {
2011-05-21 17:56:15 +00:00
min: 0,
max: 100,
2010-09-03 08:47:40 +00:00
type: "float"
},
title: "Float Input (0.0 - 100.0)"
},
{
options: {
2011-05-21 17:56:15 +00:00
min: 0,
2010-09-03 08:47:40 +00:00
max: 255,
2011-05-21 17:56:15 +00:00
type: "int"
2010-09-03 08:47:40 +00:00
},
title: "Integer Input (0 - 255)"
},
{
options: {
clear: true,
id: "integerClear",
2011-05-21 17:56:15 +00:00
type: "int"
2010-09-03 08:47:40 +00:00
},
title: "Integer Input with Clear Button"
},
{
options: {
arrows: true,
id: "integerArrows",
2011-05-21 17:56:15 +00:00
type: "int"
2010-09-03 08:47:40 +00:00
},
title: "Integer Input with Arrows"
},
{
options: {
2011-12-21 13:42:47 +00:00
autocomplete: countries,
2010-09-03 08:47:40 +00:00
autocompleteReplace: true,
id: "autocompleteReplace"
},
title: "Autocomplete with Replace"
},
{
options: {
2011-12-21 13:42:47 +00:00
autocomplete: countries,
2010-09-03 08:47:40 +00:00
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
id: "autocompleteReplaceCorrect"
},
title: "Autocomplete with Replace and Correct"
},
{
options: {
2011-12-21 13:42:47 +00:00
autocomplete: countries,
2010-09-03 08:47:40 +00:00
autocompleteSelect: true,
autocompleteSelectHighlight: true,
id: "autocompleteSelect"
},
title: "Autocomplete with Select"
},
{
options: {
2011-12-21 13:42:47 +00:00
autocomplete: countries,
2010-09-03 08:47:40 +00:00
autocompleteReplace: true,
autocompleteSelect: true,
autocompleteSelectHighlight: true,
id: "autocompleteReplaceSelect"
},
title: "Autocomplete with Replace and Select"
},
{
options: {
2011-12-21 13:42:47 +00:00
autocomplete: countries,
2010-09-03 08:47:40 +00:00
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
autocompleteSelect: true,
autocompleteSelectHighlight: true,
id: "autocompleteReplaceCorrectSelect"
},
title: "Autocomplete with Replace, Correct and Select"
},
2011-02-01 09:56:16 +00:00
{
options: {
height: 128,
type: 'textarea',
width: 256
},
title: 'Textarea'
}
2010-09-03 08:47:40 +00:00
/*
{
options: {
autocomplete: function(value, callback) {
callback([value]);
},
autocompleteSelect: true,
autocompleteSelectHighlight: true,
id: "autocompleteFunction"
},
title: "Autocomplete with Select (Function)"
},
{
options: {
autocorrect: /\d/,
},
title: "Autocorrect with RegExp (Integer)"
},
{
options: {
autocorrect: function(value, blur, callback) {
var length = value.length;
value = $.map(value.toLowerCase().split(""), function(v, i) {
Ox.print(new RegExp("[\d" + ((i == 0 || (i == length - 1 && blur)) ? "" : "\.") + "]"))
if (new RegExp("[\\d" + ((i == 0 || (i == length - 1 && blur) || i != value.indexOf(".")) ? "" : "\\.") + "]")(v)) {
return v;
} else {
return null;
}
}).join("");
callback(blur ? parseFloat(value) : value);
},
},
title: "Autocorrect with Function (Float)"
},
*/
],
"InputGroup": [
{
options: {
id: "inputGroup",
inputs: [
Ox.Input({id: "width", placeholder: "Width", width: 64}),
Ox.Input({id: "height", placeholder: "Height", width: 64})
],
separators: [
{title: "x", width: 16}
]
},
title: "InputGroup"
},
{
options: {
id: "inputGroupWithWidth",
inputs: [
Ox.Input({id: "width", placeholder: "Width"}),
Ox.Input({id: "height", placeholder: "Height"})
],
separators: [
{title: "x", width: 16}
],
width: 128
},
title: "InputGroup with Width"
},
2011-12-21 13:42:47 +00:00
{
options: {
id: "inputGroupWithSplitAndJoin",
inputs: [
Ox.Input({id: "width", placeholder: "Width"}),
Ox.Input({id: "height", placeholder: "Height"})
],
join: function(value) {
return value.join('x');
},
separators: [
{title: "x", width: 16}
],
split: function(value) {
return value.split('x');
},
value: '256x96',
width: 128
},
title: "InputGroup with Split and Join"
},
{
options: {
id: "inputGroupWithObjectValue",
inputs: [
Ox.Input({id: "width", placeholder: "Width"}),
Ox.Input({id: "height", placeholder: "Height"})
],
join: function(value) {
return {width: value[0], height: value[1]};
},
separators: [
{title: "x", width: 16}
],
split: function(value) {
return [value.width, value.height];
},
value: {width: 256, height: 96},
width: 128
},
title: "InputGroup with Object Value"
},
2010-09-03 08:47:40 +00:00
{
options: {
id: "inputGroupUsernamePassword",
inputs: [
Ox.Input({clear: true, id: "username", label: "Username", labelWidth: 80, placeholder: "Username"}),
Ox.Input({clear: true, id: "password", label: "Password", labelWidth: 80, placeholder: "Password", type: "password"})
],
separators: [
{title: "", width: 8},
],
width: 400
},
title: "Complex InputGroup"
},
{
options: {
id: "inputGroupTest",
inputs: [
Ox.Select({
id: "select",
items: [
{id: "one", title: "One"},
{id: "two", title: "Two"},
{id: "three", title: "Three"}
],
overlap: "right",
width: 128
}),
Ox.Input({
id: "input",
placeholder: "Placeholder",
width: 128
})
],
separators: [
2010-12-26 20:16:35 +00:00
{title: "", width: 0}
2010-09-03 08:47:40 +00:00
]
},
title: 'foo'
2011-01-23 04:59:16 +00:00
},
{
options: {
id: 'debug',
inputs: [
2011-12-22 15:47:46 +00:00
Ox.Checkbox({
2011-01-23 04:59:16 +00:00
id: 'tttt',
width: 16
}),
2011-12-22 15:47:46 +00:00
Ox.FormElementGroup({
2011-01-23 04:59:16 +00:00
elements: [
2011-12-22 15:47:46 +00:00
Ox.Input({
2011-01-23 04:59:16 +00:00
//overlap: "right",
width: 64
}),
2011-12-22 15:47:46 +00:00
Ox.Select({
2011-01-23 04:59:16 +00:00
items: [
{id: "items", title: "items"},
2011-12-22 15:47:46 +00:00
{},
2011-01-23 04:59:16 +00:00
{id: "hours", title: "hours"},
{id: "days", title: "days"},
2011-12-22 15:47:46 +00:00
{},
2011-01-23 04:59:16 +00:00
{id: "GB", title: "GB"},
],
overlap: "left",
width: 64
}),
],
float: "right",
width: 128
}),
2011-12-22 15:47:46 +00:00
Ox.Select({
2011-01-23 04:59:16 +00:00
items: [
{id: "title", title: "Title"},
{id: "director", title: "Director"},
],
2011-12-22 15:47:46 +00:00
value: 'title',
2011-01-23 04:59:16 +00:00
width: 128
})
],
separators: [
{title: 'Limit to', width: 64},
{title: 'sorted by', width: 64}
],
//width: 480
},
title: "bar"
2010-09-03 08:47:40 +00:00
}
],
"Label": [
{
options: {
title: "Title"
},
title: "Label"
},
{
options: {
disabled: true,
title: "Title"
},
title: "Disabled Label"
},
{
options: {
title: "Title",
width: 128
},
title: "Label with Width"
},
{
options: {
textAlign: "right",
title: "Title",
width: 128
},
title: "Right-Aligned Label"
}
],
"PlaceInput": [
{
options: {
id: "placeInput"
},
title: "PlaceInput"
}
],
"Range": [
{
options: {
id: "range"
},
title: "Range"
},
{
options: {
arrows: true,
id: "rangeArrows"
},
title: "Range with Arrows"
},
{
options: {
arrows: true,
id: "rangeThumbValue",
max: 10,
min: 0,
thumbSize: 32,
thumbValue: true,
},
title: "Range with Thumb Value"
},
{
options: {
id: "rangeValueNames",
max: 1,
min: 0,
size: 48,
thumbSize: 32,
thumbValue: true,
2011-12-21 13:42:47 +00:00
values: ["Off", "On"]
2010-09-03 08:47:40 +00:00
},
2011-12-21 13:42:47 +00:00
title: "Range with Values"
2010-09-03 08:47:40 +00:00
},
{
options: {
id: "rangeTrackColors",
2011-12-21 13:42:47 +00:00
size: 360,
2010-09-03 08:47:40 +00:00
thumbValue: true,
trackColors: [
2011-12-21 13:42:47 +00:00
"rgb(255, 0, 0)",
"rgb(255, 255, 0)",
"rgb(0, 255, 0)",
"rgb(0, 255, 255)",
"rgb(0, 0, 255)",
"rgb(255, 0, 255)"
2010-09-03 08:47:40 +00:00
],
2011-12-21 13:42:47 +00:00
values: ['Red', 'Yellow', 'Green', 'Cyan', 'Blue', 'Magenta']
2010-09-03 08:47:40 +00:00
},
title: "Range with Track Colors"
},
{
options: {
2011-12-21 13:42:47 +00:00
id: "rangeTrackGradientColor",
2010-09-03 08:47:40 +00:00
max: 359,
min: 0,
2011-12-21 13:42:47 +00:00
size: 360,
thumbSize: 36,
2010-09-03 08:47:40 +00:00
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)"
2011-12-21 13:42:47 +00:00
],
trackGradient: true
2010-09-03 08:47:40 +00:00
},
2011-12-21 13:42:47 +00:00
title: "Range with Track Gradient"
2010-09-03 08:47:40 +00:00
},
{
options: {
2011-12-21 13:42:47 +00:00
id: "rangeTrackGradient",
max: 255,
min: 0,
size: 360,
thumbSize: 36,
thumbValue: true,
trackColors: [
"rgb(0, 0, 0)",
"rgb(255, 255, 255)"
],
trackGradient: true
2010-09-03 08:47:40 +00:00
},
2011-12-21 13:42:47 +00:00
title: "Range with Track Gradient"
2010-09-03 08:47:40 +00:00
},
{
options: {
2011-12-21 13:42:47 +00:00
id: "rangeTrackImage",
size: 360,
trackImages: ["png/timeline.png"]
2010-09-03 08:47:40 +00:00
},
2011-12-21 13:42:47 +00:00
title: "Range with Track Image"
2010-09-03 08:47:40 +00:00
},
{
options: {
id: "rangeTrackImages",
max: 9,
size: 240,
2011-12-21 13:42:47 +00:00
thumbStyle: 'transparent',
2010-09-03 08:47:40 +00:00
trackImages: [
"jpg/Children's Games.jpg",
"jpg/Dulle Griet.jpg",
2011-03-07 22:31:46 +00:00
"jpg/Landscape with the Fall of Icarus.jpg",
2010-09-03 08:47:40 +00:00
"jpg/Netherlandish Proverbs.jpg",
"jpg/The Fight Between Carnival and Lent.jpg",
"jpg/The Hunters in the Snow.jpg",
"jpg/The Procession to Calvary.jpg",
"jpg/The Tower of Babel.jpg",
"jpg/The Triumph of Death.jpg",
2011-03-07 22:31:46 +00:00
"jpg/Winter Landscape with a Bird Trap.jpg",
2010-09-03 08:47:40 +00:00
]
},
title: "Range with Track Images"
},
],
"Select": [
2011-12-21 13:42:47 +00:00
{
options: {
id: 'simpleSelect',
items: ['foo', 'bar', 'baz']
},
title: 'Simple Select'
},
2010-09-03 08:47:40 +00:00
{
options: {
id: "imageSelectOne",
items: [
{id: "one", title: "select me"},
{id: "two", title: "or select me"},
{id: "three", title: "or select me"}
],
type: "image"
},
title: "Image Select, select one"
},
{
options: {
id: "imageSelectTwo",
items: [
{id: "one", title: "select me"},
{id: "two", title: "or select me"},
{id: "three", title: "or select me"}
],
max: 2,
min: 2,
type: "image"
},
title: "Image Select, select two"
},
{
options: {
id: "imageSelectAny",
items: [
{id: "one", title: "select me"},
{id: "two", title: "and select me"},
{id: "three", title: "and select me"}
],
max: -1,
min: 0,
type: "image"
},
title: "Image Select, select any"
},
{
options: {
id: "textSelectOne",
items: [
{id: "one", title: "Item One"},
{id: "two", title: "Item Two"},
{id: "three", title: "Item Three"}
]
},
title: "Text Select, select one"
},
{
options: {
id: "textSelectAny",
items: [
{id: "one", title: "Item One"},
{id: "two", title: "Item Two"},
{id: "three", title: "Item Three"}
],
max: -1,
min: 0,
title: "Title..."
},
title: "Text Select, select any"
},
{
options: {
id: "textSelectWidth",
items: [
{id: "one", title: "Item One"},
{id: "two", title: "Item Two"},
{id: "three", title: "Item Three Has a Long Title"}
],
width: 128
},
title: "Text Select with Width"
2011-11-30 14:35:08 +00:00
},
{
options: {
id: "textSelectMaxWidth",
items: [
{id: "one", title: "Item One"},
{id: "two", title: "Item Two"},
{id: "three", title: "Item Three Has a Long Title"}
],
maxWidth: 128,
width: 128
},
title: "Text Select with Max Width"
2010-09-03 08:47:40 +00:00
}
],
2011-12-21 13:42:47 +00:00
'SelectInput': [
{
options: {
id: 'selectInput',
items: [
{id: 'male', title: 'Male'},
{id: 'female', title: 'Female'},
{id: 'other', title: 'Other...'}
],
width: 256
},
title: 'SelectInput'
}
],
2010-09-03 08:47:40 +00:00
"TimeInput": [
{
options: {
id: "timeInput",
//width: 72
2010-09-03 08:47:40 +00:00
},
title: "TimeInput"
},
{
options: {
id: "timeInputSeconds",
seconds: true,
//width: 112
2010-09-03 08:47:40 +00:00
},
title: "TimeInput with Seconds"
},
{
options: {
id: "timeInputMilliseconds",
milliseconds: true,
//width: 168
},
title: "TimeInput with Milliseconds"
},
{
options: {
ampm: true,
id: "timeInputAmPm",
seconds: true,
//width: 152
2010-09-03 08:47:40 +00:00
},
title: "TimeInput with am/pm"
},
{
options: {
id: "timeInputValue",
seconds: true,
value: "23:59:59",
//width: 112
2010-09-03 08:47:40 +00:00
},
title: "TimeInput with Value"
}
]
};
$.each(objects, function(object, elements) {
var $div = $("<div>").appendTo($panel);
new Ox.Label({
title: "Ox." + object,
width: 840
})
.addClass("margin")
.appendTo($div);
$("<br clear=\"both\">").appendTo($panel);
// if (object != "PlaceInput") return;
$.each(elements, function(i, element) {
var $div = $("<div>").appendTo($panel),
2011-12-21 13:42:47 +00:00
$label, $element;
2010-09-03 08:47:40 +00:00
$label = Ox.Label({
textAlign: "right",
title: element.title,
width: 256
})
.addClass("margin")
.appendTo($div);
try {
$label.attr({
title: "Ox." + object + "(" + JSON.stringify(element.options) + ")"
});
} catch(error) {
}
2011-12-21 13:42:47 +00:00
Ox.Button({
title: 'Options'
})
.addClass("margin")
.bindEvent({
click: function() {
var $dialog = Ox.Dialog({
buttons: [
Ox.Button({
id: 'close',
title: 'Close'
}).bindEvent({
click: function() { $dialog.close(); }
})
],
content: $('<div>')
.css({margin: '16px'})
.html(
JSON.stringify(Ox.map($element.options(), function(val, key) {
return Ox.isEqual(val, $element.defaults(key)) ? null : val;
}), void 0, 4)
.replace(/\n/g, '<br/>')
.replace(/\s/g, '&nbsp;')
),
height: 256,
title: "Options",
width: 384
}).open()
}
})
.appendTo($div);
$element = Ox[object](element.options)
2010-09-03 08:47:40 +00:00
.addClass("margin")
.appendTo($div);
if (object != "Button" && object != "Label") {
2011-12-21 13:42:47 +00:00
Ox.Button({
2010-09-03 08:47:40 +00:00
id: "id" + Ox.uid(),
title: "Value"
})
.addClass("margin")
.bindEvent("click", function() {
var value = $element.options("value"),
$dialog = Ox.Dialog({
2010-09-03 08:47:40 +00:00
buttons: [
Ox.Button({
2010-12-26 20:16:35 +00:00
id: 'close',
title: 'Close'
}).bindEvent({
click: function() { $dialog.close(); }
})
2010-09-03 08:47:40 +00:00
],
2011-12-21 13:42:47 +00:00
content: $('<div>')
.css({margin: '16px'})
.html(
Ox.isUndefined(value)
? "undefined"
: JSON.stringify(value, void 0, 4)
.replace(/\n/g, '<br/>')
.replace(/\s/g, '&nbsp;')
),
height: 256,
2010-09-03 08:47:40 +00:00
title: "Value",
2011-12-21 13:42:47 +00:00
width: 384
2010-09-03 08:47:40 +00:00
})
.open();
})
.appendTo($div);
}
$("<br clear=\"both\">").appendTo($panel);
});
});
$("<div>")
.css({
height: "256px"
})
.appendTo($panel);
});