oxjs/demos/form2/js/form.js

1198 lines
45 KiB
JavaScript
Raw Normal View History

Ox.load('UI', {debug: true}, function() {
Ox.load('Geo', function() {
2010-09-03 08:47:40 +00:00
var $body = $("body"),
$panel = $("<div>")
.attr({
id: "panel"
})
.appendTo($body),
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: {
title: [
2011-03-07 22:31:46 +00:00
{id: "one", title: "right"},
{id: "two", title: "down"},
2010-09-03 08:47:40 +00:00
],
type: "image"
},
title: "Multi-Title Image Button"
},
{
options: {
selectable: true,
title: [
{id: "off", title: "Off"},
{id: "on", title: "On"},
],
width: 32
},
title: "Multi-Title Selectable Text Button"
}
],
"ButtonGroup": [
{
options: {
buttons: [
{ id: "", title: "add" },
2011-03-07 22:31:46 +00:00
{ id: "", title: "remove" },
{ id: "", title: "close" },
2010-09-03 08:47:40 +00:00
{ id: "", title: "select" },
2011-03-07 22:31:46 +00:00
{ id: "", title: "arrowLeft" },
{ id: "", title: "arrowRight" },
{ id: "", title: "arrowUp" },
{ id: "", title: "arrowDown" },
{ id: "", title: "left" },
{ id: "", title: "right" },
{ id: "", title: "up" },
{ id: "", title: "down" },
2010-09-03 08:47:40 +00:00
{ id: "", title: "pause" },
2011-03-07 22:31:46 +00:00
{ id: "", title: "playInToOut" },
{ id: "", title: "goToIn" },
{ id: "", title: "goToOut" },
{ id: "", title: "setIn" },
{ id: "", title: "setOut" },
2011-05-20 11:46:52 +00:00
{ id: "", title: "goToPoster" },
{ id: "", title: "setPoster" },
2011-03-07 22:31:46 +00:00
{ id: "", title: "center" },
{ id: "", title: "zoom" },
{ id: "", title: "grow" },
{ id: "", title: "shrink" },
{ id: "", title: "fill" },
{ id: "", title: "fit" },
2010-09-03 08:47:40 +00:00
{ id: "", title: "unmute" },
2011-03-07 22:31:46 +00:00
{ id: "", title: "volumeUp" },
{ id: "", title: "volumeDown" },
{ id: "", title: "mute" },
{ id: "", title: "undo" },
{ id: "", title: "redo" },
{ id: "", title: "unlock" },
{ id: "", title: "lock" },
2011-09-01 04:46:14 +00:00
{ id: "", title: "volume" },
2011-03-07 22:31:46 +00:00
{ id: "", title: "mount" },
{ id: "", title: "unmount" },
{ id: "", title: "sync" },
2010-09-03 08:47:40 +00:00
{ id: "", title: "info" },
{ id: "", title: "warning" },
2011-03-07 22:31:46 +00:00
{ id: "", title: "help" },
{ id: "", title: "check" },
2011-05-20 11:46:52 +00:00
{ id: "", title: "embed" },
2011-03-07 22:31:46 +00:00
{ id: "", title: "bracket" },
2011-09-01 04:46:14 +00:00
{ id: "", title: "upload" },
2011-03-07 22:31:46 +00:00
{ id: "", title: "download" },
2011-09-01 04:46:14 +00:00
{ id: "", title: "click" },
{ id: "", title: "delete" },
2011-03-07 22:31:46 +00:00
{ id: "", title: "edit" },
{ id: "", title: "find" },
{ id: "", title: "flag" },
2011-09-01 04:46:14 +00:00
{ id: "", title: "icon" },
2011-03-07 22:31:46 +00:00
{ id: "", title: "like" },
{ id: "", title: "publish" },
{ id: "", title: "set" },
{ id: "", title: "star" },
2010-09-03 08:47:40 +00:00
{ id: "", title: "user" },
2011-09-01 04:46:14 +00:00
{ id: "", title: "view" },
{ id: "", title: "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,
selectable: true
},
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: {},
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,
width: 300
},
title: "CheckboxGroup, select any"
},
],
"ColorInput": [
{
options: {
id: "colorInput",
value: "255, 0, 0"
},
title: "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: {
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: [
new Ox.Label({
title: "Match",
overlap: "right",
}),
new Ox.Select({
id: "select_",
items: [
{id: "all", title: "all"},
{id: "any", title: "any"},
],
overlap: "right",
width: 48
}),
new Ox.Label({
title: "of the following conditions",
}),
],
float: "left",
id: "formElementGroupLabels"
},
title: "foo"
},
2010-09-03 08:47:40 +00:00
{
options: {
elements: [
new Ox.Select({
id: "selectOne",
items: [
{id: "one", title: "Title"},
{id: "two", title: "Date"},
{id: "three", title: "Place"}
],
overlap: "right",
width: 128
}),
new Ox.Select({
id: "selectTwo",
items: [
{id: "one", title: "is"},
{id: "two", title: "is between"},
{id: "three", title: "is not between"}
],
overlap: "right",
width: 128
}),
new Ox.InputGroup({
id: "input",
inputs: [
new Ox.DateInput({
id: "inputOne",
width: {
day: 36,
month: 36,
year: 56
}
}),
new Ox.DateInput({
id: "inputTwo",
width: {
day: 36,
month: 36,
year: 56
}
}),
],
separators: [
{title: "and", width: 32}
]
})
],
id: "formElementGroupSelectSelectInput"
},
title: "FormElementGroup (two Selects, one Input)"
}
],
"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: {
autocomplete: $.map(Ox.COUNTRIES, function(v, i) {
2010-09-03 08:47:40 +00:00
return v.name;
}),
autocompleteReplace: true,
id: "autocompleteReplace"
},
title: "Autocomplete with Replace"
},
{
options: {
autocomplete: $.map(Ox.COUNTRIES, function(v, i) {
2010-09-03 08:47:40 +00:00
return v.name;
}),
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
id: "autocompleteReplaceCorrect"
},
title: "Autocomplete with Replace and Correct"
},
{
options: {
autocomplete: $.map(Ox.COUNTRIES, function(v, i) {
2010-09-03 08:47:40 +00:00
return v.name;
}),
autocompleteSelect: true,
autocompleteSelectHighlight: true,
id: "autocompleteSelect"
},
title: "Autocomplete with Select"
},
{
options: {
autocomplete: $.map(Ox.COUNTRIES, function(v, i) {
2010-09-03 08:47:40 +00:00
return v.name;
}),
autocompleteReplace: true,
autocompleteSelect: true,
autocompleteSelectHighlight: true,
id: "autocompleteReplaceSelect"
},
title: "Autocomplete with Replace and Select"
},
{
options: {
autocomplete: $.map(Ox.COUNTRIES, function(v, i) {
2010-09-03 08:47:40 +00:00
return v.name;
}),
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"
},
{
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: [
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"
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,
valueNames: ["Off", "On"]
},
title: "Range with Value Names"
},
{
options: {
id: "rangeTrackColors",
max: 255,
min: 0,
size: 400,
thumbSize: 40,
thumbValue: true,
trackColors: [
"rgb(0, 0, 0)",
"rgb(255, 255, 255)"
],
},
title: "Range with Track Colors"
},
{
options: {
id: "rangeTrackColorsColor",
max: 359,
min: 0,
size: 400,
thumbSize: 40,
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)"
]
},
title: "Range with Track Colors"
},
{
options: {
id: "rangeTrackImage",
size: 400,
trackImages: ["png/timeline.png"]
},
title: "Range with Track Image"
},
{
options: {
id: "rangeTrackImages",
max: 5,
size: 386,
thumbValue: true,
trackImages: [
"png/red.png",
"png/yellow.png",
"png/green.png",
"png/cyan.png",
"png/blue.png",
"png/magenta.png"
],
valueNames: ["Red", "Yellow", "Green", "Cyan", "Blue", "Magenta"]
},
title: "Range with Track Images"
},
{
options: {
id: "rangeTrackImages",
max: 9,
size: 240,
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": [
{
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: "textSelectNone",
items: [
{id: "one", title: "Item One"},
{id: "two", title: "Item Two"},
{id: "three", title: "Item Three"}
],
selectable: false,
title: "Title..."
},
title: "Text Select, select none"
},
{
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"
}
],
"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: "00:00:00",
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, $button;
$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) {
}
$element = new Ox[object](element.options)
.addClass("margin")
.appendTo($div);
if (object != "Button" && object != "Label") {
$button = new Ox.Button({
id: "id" + Ox.uid(),
title: "Value"
})
.addClass("margin")
.bindEvent("click", function() {
var value = $element.options("value"),
$dialog = new Ox.Dialog({
buttons: [
2010-12-26 20:16:35 +00:00
new Ox.Button({
id: 'close',
title: 'Close'
}).bindEvent({
click: function() { $dialog.close(); }
})
2010-09-03 08:47:40 +00:00
],
2010-12-26 20:16:35 +00:00
content: Ox.isUndefined(value) ? "undefined" : value,
2010-09-03 08:47:40 +00:00
height: 128,
id: "value",
title: "Value",
width: 256
})
.open();
})
.appendTo($div);
}
$("<br clear=\"both\">").appendTo($panel);
});
});
$("<div>")
.css({
height: "256px"
})
.appendTo($panel);
});
2010-09-03 08:47:40 +00:00
});