oxjs/demos/form2/js/form.js

1083 lines
40 KiB
JavaScript
Raw Normal View History

2010-09-03 08:47:40 +00:00
$(function() {
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: [
{id: "one", title: "expand"},
{id: "two", title: "collapse"},
],
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: "close" },
{ id: "", title: "remove" },
{ id: "", title: "add" },
{ id: "", title: "check" },
{ id: "", title: "edit" },
{ id: "", title: "find" },
{ id: "", title: "select" },
{ id: "", title: "unlock" },
{ id: "", title: "lock" },
{ id: "", title: "previous" },
{ id: "", title: "next" },
{ id: "", title: "above" },
{ id: "", title: "below" },
{ id: "", title: "play" },
{ id: "", title: "pause" },
{ id: "", title: "mute" },
{ id: "", title: "volume" },
{ id: "", title: "unmute" },
{ id: "", title: "expand" },
{ id: "", title: "collapse" },
{ id: "", title: "info" },
{ id: "", title: "help" },
{ id: "", title: "warning" },
{ id: "", title: "user" },
{ id: "", title: "location" },
{ id: "", title: "date" },
{ id: "", title: "time" },
],
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)"
},
{
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: {
type: "float"
},
title: "Float Input (0.0 - 100.0)"
},
{
options: {
max: 255,
type: "integer"
},
title: "Integer Input (0 - 255)"
},
{
options: {
clear: true,
id: "integerClear",
max: 255,
type: "integer"
},
title: "Integer Input with Clear Button"
},
{
options: {
arrows: true,
id: "integerArrows",
max: 255,
type: "integer"
},
title: "Integer Input with Arrows"
},
{
options: {
autocomplete: $.map(Ox.getCountries(), function(v, i) {
return v.name;
}),
autocompleteReplace: true,
id: "autocompleteReplace"
},
title: "Autocomplete with Replace"
},
{
options: {
autocomplete: $.map(Ox.getCountries(), function(v, i) {
return v.name;
}),
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
id: "autocompleteReplaceCorrect"
},
title: "Autocomplete with Replace and Correct"
},
{
options: {
autocomplete: $.map(Ox.getCountries(), function(v, i) {
return v.name;
}),
autocompleteSelect: true,
autocompleteSelectHighlight: true,
id: "autocompleteSelect"
},
title: "Autocomplete with Select"
},
{
options: {
autocomplete: $.map(Ox.getCountries(), function(v, i) {
return v.name;
}),
autocompleteReplace: true,
autocompleteSelect: true,
autocompleteSelectHighlight: true,
id: "autocompleteReplaceSelect"
},
title: "Autocomplete with Replace and Select"
},
{
options: {
autocomplete: $.map(Ox.getCountries(), function(v, i) {
return v.name;
}),
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
autocompleteSelect: true,
autocompleteSelectHighlight: true,
id: "autocompleteReplaceCorrectSelect"
},
title: "Autocomplete with Replace, Correct and Select"
},
/*
{
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
]
}
}
],
"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",
"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: "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);
});