1279 lines
No EOL
48 KiB
JavaScript
1279 lines
No EOL
48 KiB
JavaScript
Ox.load({UI: {}, Geo:{}, Unicode: {}}, function() {
|
|
|
|
var $body = $("body"),
|
|
$panel = $("<div>")
|
|
.attr({
|
|
id: "panel"
|
|
})
|
|
.appendTo($body),
|
|
countries = Ox.sortASCII(Ox.map(Ox.COUNTRIES, function(country) {
|
|
return country.dissolved ? null : country.name;
|
|
}));
|
|
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: {
|
|
values: [
|
|
{id: "collapsed", title: "right"},
|
|
{id: "expanded", title: "down"},
|
|
],
|
|
type: "image"
|
|
},
|
|
title: "Multi-Value Image Button"
|
|
},
|
|
{
|
|
options: {
|
|
selectable: true,
|
|
value: 'on',
|
|
values: [
|
|
{id: "off", title: "Off"},
|
|
{id: "on", title: "On"}
|
|
],
|
|
width: 32
|
|
},
|
|
title: "Multi-Value Selectable Text Button"
|
|
}
|
|
],
|
|
"ButtonGroup": [
|
|
{
|
|
options: {
|
|
buttons: [
|
|
'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'
|
|
],
|
|
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,
|
|
selectable: true,
|
|
value: 'and1'
|
|
},
|
|
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": [
|
|
{
|
|
options: {
|
|
value: true
|
|
},
|
|
title: "Checkbox",
|
|
},
|
|
{
|
|
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,
|
|
value: 'and1',
|
|
width: 300
|
|
},
|
|
title: "CheckboxGroup, select any"
|
|
},
|
|
],
|
|
"ColorInput": [
|
|
{
|
|
options: {
|
|
id: "colorInputRGB",
|
|
value: [255, 0, 0]
|
|
},
|
|
title: "RGB ColorInput"
|
|
},
|
|
{
|
|
options: {
|
|
id: "colorInputHSL",
|
|
mode: "HSL",
|
|
value: [0, 1, 0.5]
|
|
},
|
|
title: "HSL ColorInput"
|
|
}
|
|
],
|
|
"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"
|
|
},
|
|
{
|
|
options: {
|
|
format: 'medium',
|
|
id: "dateTimeInputMedium",
|
|
seconds: true,
|
|
weekday: true
|
|
},
|
|
title: "Medium DateTimeInput"
|
|
},
|
|
{
|
|
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)"
|
|
},
|
|
{
|
|
options: {
|
|
elements: [
|
|
Ox.Label({
|
|
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
|
|
})
|
|
],
|
|
join: function(value) {
|
|
return value[1][0];
|
|
},
|
|
float: "left",
|
|
id: "formElementGroupLabels",
|
|
split: function(value) {
|
|
return [null, [value, null]];
|
|
}
|
|
},
|
|
title: "FormElementGroup (Select and Labels)"
|
|
},
|
|
{
|
|
options: {
|
|
elements: [
|
|
new Ox.Select({
|
|
items: [
|
|
{id: "title", title: "Title"},
|
|
{id: "date", title: "Date"},
|
|
{id: "place", title: "Place"}
|
|
],
|
|
overlap: "right",
|
|
width: 128
|
|
}),
|
|
new Ox.Select({
|
|
items: [
|
|
{id: "is", title: "is"},
|
|
{id: "is_between", title: "is between"},
|
|
{id: "is_not_between", title: "is not between"}
|
|
],
|
|
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}
|
|
]
|
|
})
|
|
],
|
|
id: "formElementGroupSelectInputGroup",
|
|
},
|
|
title: "FormElementGroup (Selects and InputGroup)"
|
|
}
|
|
],
|
|
"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: {
|
|
min: 0,
|
|
max: 100,
|
|
type: "float"
|
|
},
|
|
title: "Float Input (0.0 - 100.0)"
|
|
},
|
|
{
|
|
options: {
|
|
min: 0,
|
|
max: 255,
|
|
type: "int"
|
|
},
|
|
title: "Integer Input (0 - 255)"
|
|
},
|
|
{
|
|
options: {
|
|
clear: true,
|
|
id: "integerClear",
|
|
type: "int"
|
|
},
|
|
title: "Integer Input with Clear Button"
|
|
},
|
|
{
|
|
options: {
|
|
arrows: true,
|
|
id: "integerArrows",
|
|
type: "int"
|
|
},
|
|
title: "Integer Input with Arrows"
|
|
},
|
|
{
|
|
options: {
|
|
autocomplete: countries,
|
|
autocompleteReplace: true,
|
|
id: "autocompleteReplace"
|
|
},
|
|
title: "Autocomplete with Replace"
|
|
},
|
|
{
|
|
options: {
|
|
autocomplete: countries,
|
|
autocompleteReplace: true,
|
|
autocompleteReplaceCorrect: true,
|
|
id: "autocompleteReplaceCorrect"
|
|
},
|
|
title: "Autocomplete with Replace and Correct"
|
|
},
|
|
{
|
|
options: {
|
|
autocomplete: countries,
|
|
autocompleteSelect: true,
|
|
autocompleteSelectHighlight: true,
|
|
id: "autocompleteSelect"
|
|
},
|
|
title: "Autocomplete with Select"
|
|
},
|
|
{
|
|
options: {
|
|
autocomplete: countries,
|
|
autocompleteReplace: true,
|
|
autocompleteSelect: true,
|
|
autocompleteSelectHighlight: true,
|
|
id: "autocompleteReplaceSelect"
|
|
},
|
|
title: "Autocomplete with Replace and Select"
|
|
},
|
|
{
|
|
options: {
|
|
autocomplete: countries,
|
|
autocompleteReplace: true,
|
|
autocompleteReplaceCorrect: true,
|
|
autocompleteSelect: true,
|
|
autocompleteSelectHighlight: true,
|
|
id: "autocompleteReplaceCorrectSelect"
|
|
},
|
|
title: "Autocomplete with Replace, Correct and Select"
|
|
},
|
|
{
|
|
options: {
|
|
height: 128,
|
|
type: 'textarea',
|
|
width: 256
|
|
},
|
|
title: 'Textarea'
|
|
}
|
|
/*
|
|
{
|
|
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"
|
|
},
|
|
{
|
|
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"
|
|
},
|
|
{
|
|
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: [
|
|
{title: "", width: 0}
|
|
]
|
|
},
|
|
title: 'foo'
|
|
},
|
|
{
|
|
options: {
|
|
id: 'debug',
|
|
inputs: [
|
|
new Ox.Checkbox({
|
|
id: 'tttt',
|
|
width: 16
|
|
}),
|
|
new Ox.FormElementGroup({
|
|
elements: [
|
|
new Ox.Input({
|
|
//overlap: "right",
|
|
width: 64
|
|
}),
|
|
new Ox.Select({
|
|
items: [
|
|
{id: "items", title: "items"},
|
|
//{},
|
|
{id: "hours", title: "hours"},
|
|
{id: "days", title: "days"},
|
|
//{},
|
|
{id: "GB", title: "GB"},
|
|
],
|
|
overlap: "left",
|
|
width: 64
|
|
}),
|
|
],
|
|
float: "right",
|
|
width: 128
|
|
}),
|
|
new Ox.Select({
|
|
items: [
|
|
{id: "title", title: "Title"},
|
|
{id: "director", title: "Director"},
|
|
],
|
|
width: 128
|
|
})
|
|
],
|
|
separators: [
|
|
{title: 'Limit to', width: 64},
|
|
{title: 'sorted by', width: 64}
|
|
],
|
|
//width: 480
|
|
},
|
|
title: "bar"
|
|
}
|
|
],
|
|
"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,
|
|
values: ["Off", "On"]
|
|
},
|
|
title: "Range with Values"
|
|
},
|
|
{
|
|
options: {
|
|
id: "rangeTrackColors",
|
|
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']
|
|
},
|
|
title: "Range with Track Colors"
|
|
},
|
|
{
|
|
options: {
|
|
id: "rangeTrackGradientColor",
|
|
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
|
|
},
|
|
title: "Range with Track Gradient"
|
|
},
|
|
{
|
|
options: {
|
|
id: "rangeTrackGradient",
|
|
max: 255,
|
|
min: 0,
|
|
size: 360,
|
|
thumbSize: 36,
|
|
thumbValue: true,
|
|
trackColors: [
|
|
"rgb(0, 0, 0)",
|
|
"rgb(255, 255, 255)"
|
|
],
|
|
trackGradient: true
|
|
},
|
|
title: "Range with Track Gradient"
|
|
},
|
|
{
|
|
options: {
|
|
id: "rangeTrackImage",
|
|
size: 360,
|
|
trackImages: ["png/timeline.png"]
|
|
},
|
|
title: "Range with Track Image"
|
|
},
|
|
{
|
|
options: {
|
|
id: "rangeTrackImages",
|
|
max: 9,
|
|
size: 240,
|
|
thumbStyle: 'transparent',
|
|
trackImages: [
|
|
"jpg/Children's Games.jpg",
|
|
"jpg/Dulle Griet.jpg",
|
|
"jpg/Landscape with the Fall of Icarus.jpg",
|
|
"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",
|
|
"jpg/Winter Landscape with a Bird Trap.jpg",
|
|
]
|
|
},
|
|
title: "Range with Track Images"
|
|
},
|
|
],
|
|
"Select": [
|
|
{
|
|
options: {
|
|
id: 'simpleSelect',
|
|
items: ['foo', 'bar', 'baz']
|
|
},
|
|
title: 'Simple Select'
|
|
},
|
|
{
|
|
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"
|
|
},
|
|
{
|
|
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"
|
|
}
|
|
],
|
|
'SelectInput': [
|
|
{
|
|
options: {
|
|
id: 'selectInput',
|
|
items: [
|
|
{id: 'male', title: 'Male'},
|
|
{id: 'female', title: 'Female'},
|
|
{id: 'other', title: 'Other...'}
|
|
],
|
|
width: 256
|
|
},
|
|
title: 'SelectInput'
|
|
}
|
|
],
|
|
"TimeInput": [
|
|
{
|
|
options: {
|
|
id: "timeInput",
|
|
//width: 72
|
|
},
|
|
title: "TimeInput"
|
|
},
|
|
{
|
|
options: {
|
|
id: "timeInputSeconds",
|
|
seconds: true,
|
|
//width: 112
|
|
},
|
|
title: "TimeInput with Seconds"
|
|
},
|
|
{
|
|
options: {
|
|
id: "timeInputMilliseconds",
|
|
milliseconds: true,
|
|
//width: 168
|
|
},
|
|
title: "TimeInput with Milliseconds"
|
|
},
|
|
{
|
|
options: {
|
|
ampm: true,
|
|
id: "timeInputAmPm",
|
|
seconds: true,
|
|
//width: 152
|
|
},
|
|
title: "TimeInput with am/pm"
|
|
},
|
|
{
|
|
options: {
|
|
id: "timeInputValue",
|
|
seconds: true,
|
|
value: "23:59:59",
|
|
//width: 112
|
|
},
|
|
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),
|
|
$label, $element;
|
|
$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) {
|
|
|
|
}
|
|
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, ' ')
|
|
),
|
|
height: 256,
|
|
title: "Options",
|
|
width: 384
|
|
}).open()
|
|
}
|
|
})
|
|
.appendTo($div);
|
|
$element = Ox[object](element.options)
|
|
.addClass("margin")
|
|
.appendTo($div);
|
|
if (object != "Button" && object != "Label") {
|
|
Ox.Button({
|
|
id: "id" + Ox.uid(),
|
|
title: "Value"
|
|
})
|
|
.addClass("margin")
|
|
.bindEvent("click", function() {
|
|
var value = $element.options("value"),
|
|
$dialog = Ox.Dialog({
|
|
buttons: [
|
|
Ox.Button({
|
|
id: 'close',
|
|
title: 'Close'
|
|
}).bindEvent({
|
|
click: function() { $dialog.close(); }
|
|
})
|
|
],
|
|
content: $('<div>')
|
|
.css({margin: '16px'})
|
|
.html(
|
|
Ox.isUndefined(value)
|
|
? "undefined"
|
|
: JSON.stringify(value, void 0, 4)
|
|
.replace(/\n/g, '<br/>')
|
|
.replace(/\s/g, ' ')
|
|
),
|
|
height: 256,
|
|
title: "Value",
|
|
width: 384
|
|
})
|
|
.open();
|
|
})
|
|
.appendTo($div);
|
|
}
|
|
$("<br clear=\"both\">").appendTo($panel);
|
|
});
|
|
});
|
|
|
|
$("<div>")
|
|
.css({
|
|
height: "256px"
|
|
})
|
|
.appendTo($panel);
|
|
|
|
}); |